baseui/map-marker/styled-components.js

A React Component library implementing the Base design language

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.getAnchorTransform = exports.earnerLocationShadow = exports.consumerLocationShadow = exports.StyledStrokedLabelContainer = exports.StyledStrokedLabel = exports.StyledPinHead = exports.StyledOuterXXSmallAnchor = exports.StyledOuterXSmallAnchor = exports.StyledNeedle = exports.StyledLocationPuckApproximation = exports.StyledLabelSlot = exports.StyledLabel = exports.StyledInnerXXSmallAnchor = exports.StyledInnerXSmallAnchor = exports.StyledFloatingRouteMarkerRoot = exports.StyledFloatingRouteMarkerPointerContainer = exports.StyledFloatingRouteMarkerPointer = exports.StyledFloatingMarkerRoot = exports.StyledFloatingMarkerPinHeadContainer = exports.StyledFloatingMarkerAnchorContainer = exports.StyledFixedMarkerRoot = exports.StyledFixedMarkerDragContainer = exports.StyledEnhancerSlot = exports.StyledEarnerLocationPuckCore = exports.StyledDragShadowContainer = exports.StyledDragShadow = exports.StyledConsumerLocationPuckCore = exports.StyledBadgeEnhancerRoot = exports.RelativeContainer = exports.LocationPuckContainer = void 0;
var _styles = require("../styles");
var _constants = require("./constants");
/*
Copyright (c) Uber Technologies, Inc.

This source code is licensed under the MIT license found in the
LICENSE file in the root directory of this source tree.
*/

const getAnchorTransform = (anchor, anchorSize) => ({
  [_constants.FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
  [_constants.FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
  [_constants.FLOATING_MARKER_ANCHOR_POSITIONS.topRight]: `translate(-100%, ${anchorSize}px)`,
  [_constants.FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft]: `translate(${anchorSize}px, -100%)`,
  [_constants.FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight]: `translate(-100%, -100%)`
})[anchor];
exports.getAnchorTransform = getAnchorTransform;
const StyledDragShadowContainer = exports.StyledDragShadowContainer = (0, _styles.styled)('div', ({
  $theme,
  $height,
  $width,
  $dragging
}) => ({
  width: `${$width}px`,
  height: `${$height}px`,
  opacity: $dragging ? 1 : 0,
  visibility: $dragging ? 'visible' : 'hidden',
  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
  position: 'relative',
  boxShadow: $theme.lighting.shadow600
}));
StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
StyledDragShadowContainer.displayName = 'StyledDragShadowContainer';
const StyledDragShadow = exports.StyledDragShadow = (0, _styles.styled)('div', ({
  $theme,
  $background,
  $width
}) => ({
  backgroundColor: $background,
  borderRadius: '50%',
  width: `${$width}px`,
  height: '4px',
  position: 'absolute',
  bottom: 0
}));
StyledDragShadow.displayName = "StyledDragShadow";
StyledDragShadow.displayName = 'StyledDragShadow';
const StyledNeedle = exports.StyledNeedle = (0, _styles.styled)('div', ({
  $theme,
  $background,
  $height
}) => ({
  backgroundColor: $background,
  width: '4px',
  height: `${$height}px`,
  boxShadow: $theme.lighting.shadow600
}));
StyledNeedle.displayName = "StyledNeedle";
StyledNeedle.displayName = 'StyledNeedle';
const StyledFloatingMarkerRoot = exports.StyledFloatingMarkerRoot = (0, _styles.styled)('div', ({
  $size
}) => ({
  position: 'relative',
  height: `${$size}px`,
  width: `${$size}px`
}));
StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
StyledFloatingMarkerRoot.displayName = 'StyledFloatingMarkerRoot';
const StyledFloatingMarkerPinHeadContainer = exports.StyledFloatingMarkerPinHeadContainer = (0, _styles.styled)('div', ({
  $theme,
  $anchor,
  $anchorSize
}) => ({
  position: 'absolute',
  transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
  transform: getAnchorTransform($anchor, $anchorSize)
}));
StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
StyledFloatingMarkerPinHeadContainer.displayName = 'StyledFloatingMarkerPinHeadContainer';
const StyledFloatingMarkerAnchorContainer = exports.StyledFloatingMarkerAnchorContainer = (0, _styles.styled)('div', () => ({
  position: 'absolute'
}));
StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
StyledFloatingMarkerAnchorContainer.displayName = 'StyledFloatingMarkerAnchorContainer';
const StyledFixedMarkerRoot = exports.StyledFixedMarkerRoot = (0, _styles.styled)('div', () => ({
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column'
}));
StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
StyledFixedMarkerRoot.displayName = 'StyledFixedMarkerRoot';
const StyledFixedMarkerDragContainer = exports.StyledFixedMarkerDragContainer = (0, _styles.styled)('div', ({
  $theme,
  $translateAmount,
  $performTranslate
}) => {
  return {
    transform: `translateY(${$performTranslate ? `${$translateAmount}px` : '0px'})`,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    display: 'flex',
    alignItems: 'center',
    flexDirection: 'column'
  };
});
StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
StyledFixedMarkerDragContainer.displayName = 'StyledFixedMarkerDragContainer';
const StyledOuterXXSmallAnchor = exports.StyledOuterXXSmallAnchor = (0, _styles.styled)('div', ({
  $theme,
  $round,
  $background,
  $size
}) => ({
  backgroundColor: $background,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: `${$size}px`,
  width: `${$size}px`,
  borderRadius: $round ? '50%' : 0,
  boxShadow: $theme.lighting.shadow600
}));
StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
StyledOuterXXSmallAnchor.displayName = 'StyledOuterXXSmallAnchor';
const StyledInnerXXSmallAnchor = exports.StyledInnerXXSmallAnchor = (0, _styles.styled)('div', ({
  $round,
  $color,
  $size
}) => ({
  backgroundColor: $color,
  height: `${$size}px`,
  width: `${$size}px`,
  borderRadius: $round ? '50%' : 0
}));
StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
StyledInnerXXSmallAnchor.displayName = 'StyledInnerXXSmallAnchor';
const StyledOuterXSmallAnchor = exports.StyledOuterXSmallAnchor = (0, _styles.styled)('div', ({
  $theme,
  $round,
  $background,
  $size
}) => ({
  backgroundColor: $background,
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: `${$size}px`,
  width: `${$size}px`,
  borderRadius: $round ? '50%' : 0,
  boxShadow: $theme.lighting.shadow600
}));
StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
StyledOuterXSmallAnchor.displayName = 'StyledOuterXSmallAnchor';
const StyledInnerXSmallAnchor = exports.StyledInnerXSmallAnchor = (0, _styles.styled)('div', ({
  $round,
  $color,
  $size
}) => ({
  backgroundColor: $color,
  height: `${$size}px`,
  width: `${$size}px`,
  borderRadius: $round ? '50%' : 0
}));
StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
StyledInnerXSmallAnchor.displayName = 'StyledInnerXSmallAnchor';
const StyledPinHead = exports.StyledPinHead = (0, _styles.styled)('div', ({
  $theme,
  $height,
  $background,
  $gridTemplateColumns,
  $type,
  $forceCircle
}) => {
  const sharedStyles = {
    fixed: {
      padding: '0px 12px',
      borderRadius: `${$height}px`
    },
    floating: {
      padding: '0px 8px'
    }
  };
  return {
    backgroundColor: $background,
    height: `${$height}px`,
    display: 'grid',
    gridTemplateColumns: $gridTemplateColumns,
    gap: '8px',
    boxShadow: $theme.lighting.shadow600,
    whiteSpace: 'nowrap',
    // @ts-ignore
    ...sharedStyles[$type],
    ...($forceCircle && {
      width: `${$height}px`,
      display: 'flex',
      justifyContent: 'center',
      boxSizing: 'border-box'
    })
  };
});
StyledPinHead.displayName = "StyledPinHead";
StyledPinHead.displayName = 'StyledPinHead';
const StyledStrokedLabelContainer = exports.StyledStrokedLabelContainer = (0, _styles.styled)('div', ({
  $position,
  $theme,
  $labelOffset
}) => {
  const staticLabelOffset = 4;
  const positions = {
    top: {
      left: `calc(50% + ${staticLabelOffset}px)`,
      bottom: '100%',
      alignItems: 'flex-end',
      justifyContent: 'center',
      textAlign: 'center'
    },
    bottom: {
      left: '50%',
      top: `calc(100% + ${staticLabelOffset}px + ${$labelOffset}px)`,
      alignItems: 'flex-start',
      justifyContent: 'center',
      textAlign: 'center'
    },
    right: {
      left: `calc(100% + ${staticLabelOffset}px)`,
      top: '50%',
      alignItems: 'center',
      justifyContent: 'flex-start'
    },
    left: {
      right: `calc(100% + ${staticLabelOffset}px)`,
      top: '50%',
      alignItems: 'center',
      justifyContent: 'flex-end',
      textAlign: 'right'
    },
    none: {}
  };
  return {
    position: 'absolute',
    width: '0px',
    height: '0px',
    pointerEvents: 'none',
    display: 'flex',
    ...positions[$position]
  };
});
StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
StyledStrokedLabelContainer.displayName = 'StyledStrokedLabelContainer';
const StyledStrokedLabel = exports.StyledStrokedLabel = (0, _styles.styled)('div', ({
  $theme,
  $size
}) => {
  const strokeWidth = 1.5;
  const strokeColor = $theme.colors.borderInverseSelected;
  const textShadow = `-${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
    0 -${strokeWidth}px 0 ${strokeColor},
    ${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
    ${strokeWidth}px 0 0 ${strokeColor},
    ${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
    0 ${strokeWidth}px 0 ${strokeColor},
   -${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
   -${strokeWidth}px 0 0 ${strokeColor}`;
  return {
    display: 'flex',
    // @ts-ignore
    ...$theme.typography[_constants.LABEL_SIZES[$size]],
    color: $theme.colors.contentPrimary,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    textShadow,
    pointerEvents: 'auto',
    width: 'max-content',
    maxWidth: '200px'
  };
});
StyledStrokedLabel.displayName = "StyledStrokedLabel";
StyledStrokedLabel.displayName = 'StyledStrokedLabel';
const StyledBadgeEnhancerRoot = exports.StyledBadgeEnhancerRoot = (0, _styles.styled)('div', ({
  $theme,
  $size,
  $position
}) => {
  const {
    x,
    y
  } = $position;
  return {
    position: 'absolute',
    ...$theme.typography.LabelSmall,
    backgroundColor: $theme.colors.backgroundAccent,
    color: $theme.colors.contentOnColor,
    boxSizing: 'border-box',
    right: 0,
    transform: `translate(calc(100% + ${x}px), ${y}px)`,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    ..._constants.BADGE_ENHANCER_STYLES[$size]
  };
});
StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
StyledBadgeEnhancerRoot.displayName = 'StyledBadgeEnhancerRoot';
const RelativeContainer = exports.RelativeContainer = (0, _styles.styled)('div', () => {
  return {
    position: 'relative'
  };
});
RelativeContainer.displayName = "RelativeContainer";
RelativeContainer.displayName = 'RelativeContainer';
const StyledEnhancerSlot = exports.StyledEnhancerSlot = (0, _styles.styled)('div', ({
  $theme,
  $color,
  $height,
  $size
}) => {
  return {
    // @ts-ignore
    ...$theme.typography[_constants.LABEL_SIZES[$size]],
    display: 'flex',
    alignItems: 'center',
    textAlign: 'center',
    lineHeight: `${$height}px`,
    height: `${$height}px`,
    color: $color
  };
});
StyledEnhancerSlot.displayName = "StyledEnhancerSlot";
const StyledFloatingRouteMarkerRoot = exports.StyledFloatingRouteMarkerRoot = (0, _styles.styled)('div', ({
  $theme,
  $height,
  $background,
  $gridTemplateColumns
}) => {
  return {
    position: 'absolute',
    backgroundColor: $background,
    height: `${$height}px`,
    display: 'grid',
    gridTemplateColumns: $gridTemplateColumns,
    gap: '8px',
    filter: `drop-shadow(${$theme.lighting.shadow600})`,
    whiteSpace: 'nowrap',
    borderRadius: `${8}px`,
    padding: `${4}px ${8}px`,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`
  };
});
StyledFloatingRouteMarkerRoot.displayName = "StyledFloatingRouteMarkerRoot";
StyledFloatingRouteMarkerRoot.displayName = 'StyledFloatingRouteMarkerRoot';
StyledEnhancerSlot.displayName = 'StyledEnhancerSlot';
const StyledLabelSlot = exports.StyledLabelSlot = (0, _styles.styled)('div', () => {
  return {
    display: 'flex',
    justifyContent: 'center',
    flexDirection: 'column'
  };
});
StyledLabelSlot.displayName = "StyledLabelSlot";
StyledLabelSlot.displayName = 'StyledLabelSlot';
const StyledLabel = exports.StyledLabel = (0, _styles.styled)('div', ({
  $theme,
  $size,
  $renderSecondaryLabel,
  $color
}) => {
  const pinheadSizeOrder = Object.values(_constants.PINHEAD_SIZES_SHAPES);
  let labelSizeIndex = pinheadSizeOrder.findIndex(x => $size === x);
  if ($renderSecondaryLabel) {
    labelSizeIndex--;
  }
  const typographyStyle = _constants.LABEL_SIZES[pinheadSizeOrder[labelSizeIndex]];
  return {
    ...$theme.typography[typographyStyle],
    color: $color
  };
});
StyledLabel.displayName = "StyledLabel";
StyledLabel.displayName = 'StyledLabel';
const LocationPuckContainer = exports.LocationPuckContainer = (0, _styles.styled)('div', () => {
  return {
    position: 'relative',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center'
  };
});
LocationPuckContainer.displayName = "LocationPuckContainer";
LocationPuckContainer.displayName = 'LocationPuckContainer';
const consumerLocationShadow = exports.consumerLocationShadow = {
  boxShadow: `0px 2px 4px 0px rgba(67, 76, 123, 0.2)`
};
const earnerLocationShadow = exports.earnerLocationShadow = {
  boxShadow: `0px 3px 5px 0px rgba(67, 76, 123, 0.4)`
};
const StyledConsumerLocationPuckCore = exports.StyledConsumerLocationPuckCore = (0, _styles.styled)('div', ({
  $theme
}) => {
  return {
    height: `${12}px`,
    width: `${12}px`,
    background: $theme.colors.contentAccent,
    borderRadius: `${100}px `,
    position: 'absolute',
    ...consumerLocationShadow
  };
});
StyledConsumerLocationPuckCore.displayName = "StyledConsumerLocationPuckCore";
const StyledLocationPuckApproximation = exports.StyledLocationPuckApproximation = (0, _styles.styled)('div', ({
  $theme,
  $color,
  $radius
}) => {
  return {
    background: $color,
    opacity: 0.12,
    height: `${$radius / 2}px`,
    width: `${$radius / 2}px`,
    borderRadius: `${10000}px `,
    position: 'absolute',
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`
  };
});
StyledLocationPuckApproximation.displayName = "StyledLocationPuckApproximation";
StyledLocationPuckApproximation.displayName = 'StyledLocationPuckApproximation';
const StyledEarnerLocationPuckCore = exports.StyledEarnerLocationPuckCore = (0, _styles.styled)('div', ({
  $theme,
  $color,
  $size
}) => {
  return {
    position: 'absolute',
    transform: `scale(${_constants.EARNER_LOCATION_PUCK_CORE_SCALES[$size]})`,
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    ...earnerLocationShadow,
    borderRadius: '50%',
    height: `${72}px`,
    width: `${72}px`,
    background: $theme.colors.backgroundPrimary,
    border: `${6}px solid ${$color}`,
    boxSizing: 'border-box'
  };
});
StyledEarnerLocationPuckCore.displayName = "StyledEarnerLocationPuckCore";
StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';
const StyledFloatingRouteMarkerPointerContainer = exports.StyledFloatingRouteMarkerPointerContainer = (0, _styles.styled)('svg', ({
  $position
}) => {
  return {
    position: 'absolute',
    ..._constants.FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS[$position]
  };
});
StyledFloatingRouteMarkerPointerContainer.displayName = "StyledFloatingRouteMarkerPointerContainer";
StyledFloatingRouteMarkerPointerContainer.displayName = 'StyledFloatingRouteMarkerPointerContainer';
const StyledFloatingRouteMarkerPointer = exports.StyledFloatingRouteMarkerPointer = (0, _styles.styled)('path', ({
  $theme,
  $background
}) => {
  return {
    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
    fill: $background
  };
});
StyledFloatingRouteMarkerPointer.displayName = "StyledFloatingRouteMarkerPointer";
StyledFloatingRouteMarkerPointer.displayName = 'StyledFloatingRouteMarkerPointer';