baseui 12.0.0 → 12.1.0

package/es/link/index.js

@@ -19,7 +19,8 @@ function LinkFocus(props) {
     if (isFocusVisible(event)) {
       setFocusVisible(true);
     }
-  };
+  }; // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
 
   const handleBlur = event => {
     if (focusVisible !== false) {

package/es/link/styled-components.js

@@ -50,4 +50,5 @@ export const Link = styled('a', ({
     }
   };
 });
-Link.displayName = "Link";
+Link.displayName = "Link";
+Link.displayName = 'Link';

package/es/list/list-heading.js

@@ -63,23 +63,27 @@ const ListHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }
 
-  return /*#__PURE__*/React.createElement(Root, _extends({
-    ref: ref
-  }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
-    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
-  }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-    component: props.heading
-  })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
-    $isText: isEndEnhancerString
-  }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-    component: EndEnhancer
-  }))), (Boolean(SubHeading) || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
-    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
-  }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-    component: SubHeading
-  })), Boolean(EndEnhancerDescription) && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
-    component: EndEnhancerDescription
-  })))));
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    React.createElement(Root, _extends({
+      ref: ref
+    }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
+      $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
+    }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+      component: props.heading
+    })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
+      $isText: isEndEnhancerString
+    }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+      component: EndEnhancer
+    }))), (Boolean(SubHeading) || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
+      $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
+    }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+      component: SubHeading
+    })), Boolean(EndEnhancerDescription) && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
+      component: EndEnhancerDescription
+    })))))
+  );
 });
 ListHeading.displayName = 'ListHeading';
 export default ListHeading;

package/es/list/list-item.js

@@ -38,7 +38,8 @@ const ListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       return props.artworkSize || ARTWORK_SIZES.MEDIUM;
     }
   }, [props.artworkSize, props.sublist]);
-  return /*#__PURE__*/React.createElement(Root, _extends({
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , _extends({
     ref: ref,
     $shape: props.shape || SHAPE.DEFAULT,
     "aria-label": props['aria-label'],

package/es/list/styled-components.js

@@ -25,6 +25,7 @@ export const StyledRoot = styled('li', ({
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledContent = styled('div', ({
   $mLeft,
   $sublist,
@@ -49,11 +50,13 @@ export const StyledContent = styled('div', ({
   };
 });
 StyledContent.displayName = "StyledContent";
+StyledContent.displayName = 'StyledContent';
 export const StyledEndEnhancerContainer = styled('div', {
   alignItems: 'center',
   display: 'flex'
 });
 StyledEndEnhancerContainer.displayName = "StyledEndEnhancerContainer";
+StyledEndEnhancerContainer.displayName = 'StyledEndEnhancerContainer';
 export const StyledArtworkContainer = styled('div', ({
   $artworkSize,
   $sublist,
@@ -65,6 +68,7 @@ export const StyledArtworkContainer = styled('div', ({
     return {
       alignItems: 'center',
       display: 'flex',
+      flexShrink: 0,
       paddingLeft: $theme.sizing.scale600,
       paddingRight: $theme.sizing.scale600
     };
@@ -73,11 +77,13 @@ export const StyledArtworkContainer = styled('div', ({
   return {
     alignItems: 'center',
     display: 'flex',
+    flexShrink: 0,
     justifyContent: 'center',
     width: $theme.sizing.scale1600
   };
 });
 StyledArtworkContainer.displayName = "StyledArtworkContainer";
+StyledArtworkContainer.displayName = 'StyledArtworkContainer';
 export const StyledLabelContent = styled('p', ({
   $theme
 }) => {
@@ -88,6 +94,7 @@ export const StyledLabelContent = styled('p', ({
   };
 });
 StyledLabelContent.displayName = "StyledLabelContent";
+StyledLabelContent.displayName = 'StyledLabelContent';
 export const StyledLabelDescription = styled('p', ({
   $theme
 }) => {
@@ -98,6 +105,7 @@ export const StyledLabelDescription = styled('p', ({
   };
 });
 StyledLabelDescription.displayName = "StyledLabelDescription";
+StyledLabelDescription.displayName = 'StyledLabelDescription';
 export const StyledLabelSublistContent = styled('p', ({
   $theme
 }) => {
@@ -108,6 +116,7 @@ export const StyledLabelSublistContent = styled('p', ({
   };
 });
 StyledLabelSublistContent.displayName = "StyledLabelSublistContent";
+StyledLabelSublistContent.displayName = 'StyledLabelSublistContent';
 export const StyledHeadingRoot = styled('div', ({
   $theme
 }) => {
@@ -121,6 +130,7 @@ export const StyledHeadingRoot = styled('div', ({
   };
 });
 StyledHeadingRoot.displayName = "StyledHeadingRoot";
+StyledHeadingRoot.displayName = 'StyledHeadingRoot';
 export const StyledHeadingContent = styled('div', ({
   $theme
 }) => {
@@ -140,12 +150,14 @@ export const StyledHeadingContent = styled('div', ({
   };
 });
 StyledHeadingContent.displayName = "StyledHeadingContent";
+StyledHeadingContent.displayName = 'StyledHeadingContent';
 export const StyledHeadingContentRow = styled('div', {
   display: 'flex',
   justifyContent: 'space-between',
   width: '100%'
 });
 StyledHeadingContentRow.displayName = "StyledHeadingContentRow";
+StyledHeadingContentRow.displayName = 'StyledHeadingContentRow';
 export const StyledHeadingMainHeading = styled('p', ({
   $maxLines = 1,
   $theme
@@ -162,6 +174,7 @@ export const StyledHeadingMainHeading = styled('p', ({
   };
 });
 StyledHeadingMainHeading.displayName = "StyledHeadingMainHeading";
+StyledHeadingMainHeading.displayName = 'StyledHeadingMainHeading';
 export const StyledHeadingSubHeading = styled('p', ({
   $maxLines = 1,
   $theme
@@ -178,6 +191,7 @@ export const StyledHeadingSubHeading = styled('p', ({
   };
 });
 StyledHeadingSubHeading.displayName = "StyledHeadingSubHeading";
+StyledHeadingSubHeading.displayName = 'StyledHeadingSubHeading';
 export const StyledHeadingEndEnhancerContainer = styled('div', ({
   $isText,
   $theme
@@ -189,6 +203,7 @@ export const StyledHeadingEndEnhancerContainer = styled('div', ({
   textOverflow: 'ellipsis'
 }));
 StyledHeadingEndEnhancerContainer.displayName = "StyledHeadingEndEnhancerContainer";
+StyledHeadingEndEnhancerContainer.displayName = 'StyledHeadingEndEnhancerContainer';
 export const StyledHeadingEndEnhancerDescriptionContainer = styled('p', ({
   $theme
 }) => ({ ...$theme.typography.ParagraphMedium,
@@ -200,4 +215,5 @@ export const StyledHeadingEndEnhancerDescriptionContainer = styled('p', ({
   overflow: 'hidden',
   textOverflow: 'ellipsis'
 }));
-StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";
+StyledHeadingEndEnhancerDescriptionContainer.displayName = "StyledHeadingEndEnhancerDescriptionContainer";
+StyledHeadingEndEnhancerDescriptionContainer.displayName = 'StyledHeadingEndEnhancerDescriptionContainer';

package/es/locale/es_AR.js

@@ -77,7 +77,9 @@ const es_AR = {
     booleanFilterTrue: 'verdadero',
     booleanFilterFalse: 'falso',
     booleanColumnTrueShort: 'V',
-    booleanColumnFalseShort: 'F'
+    booleanColumnFalseShort: 'F',
+    selectRow: 'Seleccionar fila',
+    selectAllRows: 'Seleccionar todas las filas'
   },
   buttongroup: {
     ariaLabel: 'grupo de botones'

package/es/locale/index.js

@@ -14,8 +14,9 @@ const LocaleProvider = props => {
     locale,
     children
   } = props;
+  const parentLocale = React.useContext(LocaleContext) ?? {};
   return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
-    value: extend({}, en_US, locale)
+    value: extend({}, en_US, parentLocale, locale)
   }, children);
 };
 

package/es/locale/tr_TR.js

@@ -77,7 +77,9 @@ const tr_TR = {
     booleanFilterTrue: 'doğru',
     booleanFilterFalse: 'yanlış',
     booleanColumnTrueShort: 'D',
-    booleanColumnFalseShort: 'Y'
+    booleanColumnFalseShort: 'Y',
+    selectRow: 'satır seç',
+    selectAllRows: 'Tüm satırları seç'
   },
   buttongroup: {
     ariaLabel: 'buton grup'

package/es/map-marker/constants.js

@@ -210,4 +210,18 @@ export const KIND = Object.freeze({
   default: 'default',
   accent: 'accent',
   negative: 'negative'
+});
+export const LOCATION_PUCK_SIZES = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+export const LOCATION_PUCK_TYPES = Object.freeze({
+  consumer: 'consumer',
+  earner: 'earner'
+});
+export const EARNER_LOCATION_PUCK_CORE_SCALES = Object.freeze({
+  [LOCATION_PUCK_SIZES.small]: '50%',
+  [LOCATION_PUCK_SIZES.medium]: '75%',
+  [LOCATION_PUCK_SIZES.large]: '100%'
 });

package/es/map-marker/fixed-marker.js

@@ -49,6 +49,7 @@ const FixedMarker = ({
   labelEnhancerPosition = LABEL_ENHANCER_POSITIONS.bottom,
   badgeEnhancerSize = null,
   badgeEnhancerContent = null,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...restProps
 }) => {
   const [, theme] = useStyletron();

package/es/map-marker/index.js

@@ -6,6 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as FixedMarker } from './fixed-marker';
 export { default as FloatingMarker } from './floating-marker';
-export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND, PINHEAD_DIMENSIONS } from './constants';
+export { default as LocationPuck } from './location-puck';
+export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND, PINHEAD_DIMENSIONS, LOCATION_PUCK_SIZES, LOCATION_PUCK_TYPES } from './constants';
 export * from './types';
 /** @deprecated use AnchorPositions instead. To be removed in future versions.*/

package/es/map-marker/location-puck.js

@@ -0,0 +1,142 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { useStyletron } from '../styles';
+import { getOverrides } from '../helpers/overrides';
+import { LOCATION_PUCK_SIZES, LOCATION_PUCK_TYPES, EARNER_LOCATION_PUCK_CORE_SCALES } from './constants';
+import { LocationPuckContainer, StyledConsumerLocationPuckCore, StyledLocationPuckApproximation, StyledEarnerLocationPuckCore } from './styled-components';
+
+const ConsumerLocationPuckHeading = ({
+  heading
+}) => {
+  const [css, theme] = useStyletron();
+  return /*#__PURE__*/React.createElement("svg", {
+    className: css({
+      height: `${6}px`,
+      width: `${11}px`,
+      position: 'absolute',
+      color: theme.colors.contentAccent,
+      transition: `${theme.animation.timing300} ${theme.animation.easeOutCurve} all`
+    }),
+    style: {
+      transform: `rotate(${heading}deg) translateY(-16px)`
+    },
+    width: "11",
+    height: "6",
+    viewBox: "0 0 11 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M5.5 0L0 6L5.5 5L11 6L5.5 0Z",
+    fill: "currentColor"
+  }));
+};
+
+const ConsumerLocationPuck = ({
+  heading,
+  showHeading,
+  confidenceRadius,
+  overrides
+}) => {
+  const [, theme] = useStyletron();
+  const [Root, rootProps] = getOverrides(overrides.Root, LocationPuckContainer);
+  const [ConsumerLocationPuckCore, consumerLocationPuckCoreProps] = getOverrides(overrides.ConsumerLocationPuckCore, StyledConsumerLocationPuckCore);
+  const [LocationPuckApproximation, locationPuckApproximationProps] = getOverrides(overrides.LocationPuckApproximation, StyledLocationPuckApproximation);
+  return /*#__PURE__*/React.createElement(Root, rootProps, /*#__PURE__*/React.createElement(LocationPuckApproximation, _extends({
+    $color: theme.colors.contentAccent,
+    $radius: confidenceRadius
+  }, locationPuckApproximationProps)), /*#__PURE__*/React.createElement(ConsumerLocationPuckCore, consumerLocationPuckCoreProps), showHeading && /*#__PURE__*/React.createElement(ConsumerLocationPuckHeading, {
+    heading: heading
+  }));
+};
+
+const EarnerLocationPuckHeading = ({
+  size,
+  color,
+  heading
+}) => {
+  const [css, theme] = useStyletron();
+  return /*#__PURE__*/React.createElement("svg", {
+    className: css({
+      position: 'absolute',
+      transition: `${theme.animation.timing300} ${theme.animation.easeOutCurve} all`
+    }),
+    style: {
+      transform: `rotate(${heading}deg) scale(${EARNER_LOCATION_PUCK_CORE_SCALES[size]})`
+    },
+    width: "72",
+    height: "72",
+    viewBox: "0 0 72 72",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M36 20L52 52L36 42.8571L20 52L36 20Z",
+    fill: color
+  }));
+};
+
+const EarnerLocationPuck = ({
+  heading,
+  confidenceRadius,
+  size,
+  overrides
+}) => {
+  const [, theme] = useStyletron();
+  const color = theme.colors.contentPrimary;
+  const [Root, rootProps] = getOverrides(overrides.Root, LocationPuckContainer);
+  const [LocationPuckApproximation, locationPuckApproximationProps] = getOverrides(overrides.LocationPuckApproximation, StyledLocationPuckApproximation);
+  const [EarnerLocationPuckCore, earnerLocationPuckCoreProps] = getOverrides(overrides.EarnerLocationPuckCore, StyledEarnerLocationPuckCore);
+  return /*#__PURE__*/React.createElement(Root, rootProps, /*#__PURE__*/React.createElement(LocationPuckApproximation, _extends({
+    $color: color,
+    $radius: confidenceRadius
+  }, locationPuckApproximationProps)), /*#__PURE__*/React.createElement(EarnerLocationPuckCore, _extends({
+    $color: color,
+    $size: size
+  }, earnerLocationPuckCoreProps)), /*#__PURE__*/React.createElement(EarnerLocationPuckHeading, {
+    size: size,
+    color: color,
+    heading: heading
+  }));
+};
+
+const LocationPuck = ({
+  size = LOCATION_PUCK_SIZES.medium,
+  heading = 0,
+  showHeading = true,
+  confidenceRadius = 0,
+  type = LOCATION_PUCK_TYPES.consumer,
+  overrides = {}
+}) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (size !== LOCATION_PUCK_SIZES.medium && type === LOCATION_PUCK_TYPES.consumer) {
+      console.warn(`Location puck size can only be applied to type === LOCATION_PUCK_TYPES.earner`);
+    }
+
+    if (!showHeading && type === LOCATION_PUCK_TYPES.earner) {
+      console.warn(`Earner location puck must show the heading indicator`);
+    }
+  }
+
+  const sharedProps = {
+    heading,
+    confidenceRadius,
+    overrides
+  };
+  return type === LOCATION_PUCK_TYPES.consumer ? /*#__PURE__*/React.createElement(ConsumerLocationPuck, _extends({}, sharedProps, {
+    showHeading: showHeading
+  })) : /*#__PURE__*/React.createElement(EarnerLocationPuck, _extends({}, sharedProps, {
+    size: size
+  }));
+};
+
+export default LocationPuck;

package/es/map-marker/pin-head.js

@@ -21,6 +21,7 @@ const PinHead = ({
   color,
   background,
   type = PINHEAD_TYPES.fixed,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   anchorType,
   needle = NEEDLE_SIZES.none,
   labelEnhancerContent,

package/es/map-marker/styled-components.js

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles';
-import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES } from './constants';
+import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES, EARNER_LOCATION_PUCK_CORE_SCALES } from './constants';
 export const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
   [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
@@ -28,6 +28,7 @@ export const StyledDragShadowContainer = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
+StyledDragShadowContainer.displayName = 'StyledDragShadowContainer';
 export const StyledDragShadow = styled('div', ({
   $theme,
   $background,
@@ -41,6 +42,7 @@ export const StyledDragShadow = styled('div', ({
   bottom: 0
 }));
 StyledDragShadow.displayName = "StyledDragShadow";
+StyledDragShadow.displayName = 'StyledDragShadow';
 export const StyledNeedle = styled('div', ({
   $theme,
   $background,
@@ -52,6 +54,7 @@ export const StyledNeedle = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledNeedle.displayName = "StyledNeedle";
+StyledNeedle.displayName = 'StyledNeedle';
 export const StyledFloatingMarkerRoot = styled('div', ({
   $size
 }) => ({
@@ -60,6 +63,7 @@ export const StyledFloatingMarkerRoot = styled('div', ({
   width: `${$size}px`
 }));
 StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
+StyledFloatingMarkerRoot.displayName = 'StyledFloatingMarkerRoot';
 export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
   $theme,
   $anchor,
@@ -70,16 +74,19 @@ export const StyledFloatingMarkerPinHeadContainer = styled('div', ({
   transform: getAnchorTransform($anchor, $anchorSize)
 }));
 StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
+StyledFloatingMarkerPinHeadContainer.displayName = 'StyledFloatingMarkerPinHeadContainer';
 export const StyledFloatingMarkerAnchorContainer = styled('div', () => ({
   position: 'absolute'
 }));
 StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
+StyledFloatingMarkerAnchorContainer.displayName = 'StyledFloatingMarkerAnchorContainer';
 export const StyledFixedMarkerRoot = styled('div', () => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column'
 }));
 StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
+StyledFixedMarkerRoot.displayName = 'StyledFixedMarkerRoot';
 export const StyledFixedMarkerDragContainer = styled('div', ({
   $theme,
   $translateAmount,
@@ -94,6 +101,7 @@ export const StyledFixedMarkerDragContainer = styled('div', ({
   };
 });
 StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
+StyledFixedMarkerDragContainer.displayName = 'StyledFixedMarkerDragContainer';
 export const StyledOuterXXSmallAnchor = styled('div', ({
   $theme,
   $round,
@@ -110,6 +118,7 @@ export const StyledOuterXXSmallAnchor = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
+StyledOuterXXSmallAnchor.displayName = 'StyledOuterXXSmallAnchor';
 export const StyledInnerXXSmallAnchor = styled('div', ({
   $round,
   $color,
@@ -121,6 +130,7 @@ export const StyledInnerXXSmallAnchor = styled('div', ({
   borderRadius: $round ? '50%' : 0
 }));
 StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
+StyledInnerXXSmallAnchor.displayName = 'StyledInnerXXSmallAnchor';
 export const StyledOuterXSmallAnchor = styled('div', ({
   $theme,
   $round,
@@ -137,6 +147,7 @@ export const StyledOuterXSmallAnchor = styled('div', ({
   boxShadow: $theme.lighting.shadow600
 }));
 StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
+StyledOuterXSmallAnchor.displayName = 'StyledOuterXSmallAnchor';
 export const StyledInnerXSmallAnchor = styled('div', ({
   $round,
   $color,
@@ -148,6 +159,7 @@ export const StyledInnerXSmallAnchor = styled('div', ({
   borderRadius: $round ? '50%' : 0
 }));
 StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
+StyledInnerXSmallAnchor.displayName = 'StyledInnerXSmallAnchor';
 export const StyledPinHead = styled('div', ({
   $theme,
   $height,
@@ -183,6 +195,7 @@ export const StyledPinHead = styled('div', ({
   };
 });
 StyledPinHead.displayName = "StyledPinHead";
+StyledPinHead.displayName = 'StyledPinHead';
 export const StyledStrokedLabelContainer = styled('div', ({
   $position,
   $theme,
@@ -229,6 +242,7 @@ export const StyledStrokedLabelContainer = styled('div', ({
   };
 });
 StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
+StyledStrokedLabelContainer.displayName = 'StyledStrokedLabelContainer';
 export const StyledStrokedLabel = styled('div', ({
   $theme,
   $size
@@ -255,6 +269,7 @@ export const StyledStrokedLabel = styled('div', ({
   };
 });
 StyledStrokedLabel.displayName = "StyledStrokedLabel";
+StyledStrokedLabel.displayName = 'StyledStrokedLabel';
 export const StyledBadgeEnhancerRoot = styled('div', ({
   $theme,
   $size,
@@ -277,12 +292,14 @@ export const StyledBadgeEnhancerRoot = styled('div', ({
   };
 });
 StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
+StyledBadgeEnhancerRoot.displayName = 'StyledBadgeEnhancerRoot';
 export const RelativeContainer = styled('div', () => {
   return {
     position: 'relative'
   };
 });
 RelativeContainer.displayName = "RelativeContainer";
+RelativeContainer.displayName = 'RelativeContainer';
 export const StyledContentItem = styled('div', ({
   $theme,
   $color,
@@ -298,4 +315,71 @@ export const StyledContentItem = styled('div', ({
     color: $color
   };
 });
-StyledContentItem.displayName = "StyledContentItem";
+StyledContentItem.displayName = "StyledContentItem";
+StyledContentItem.displayName = 'StyledContentItem';
+export const LocationPuckContainer = styled('div', () => {
+  return {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+});
+LocationPuckContainer.displayName = "LocationPuckContainer";
+LocationPuckContainer.displayName = 'LocationPuckContainer';
+export const consumerLocationShadow = {
+  boxShadow: `0px 2px 4px 0px rgba(67, 76, 123, 0.2)`
+};
+export const earnerLocationShadow = {
+  boxShadow: `0px 3px 5px 0px rgba(67, 76, 123, 0.4)`
+};
+export const StyledConsumerLocationPuckCore = styled('div', ({
+  $theme
+}) => {
+  return {
+    height: `${12}px`,
+    width: `${12}px`,
+    background: $theme.colors.contentAccent,
+    borderRadius: `${100}px `,
+    position: 'absolute',
+    ...consumerLocationShadow
+  };
+});
+StyledConsumerLocationPuckCore.displayName = "StyledConsumerLocationPuckCore";
+export const StyledLocationPuckApproximation = 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';
+export const StyledEarnerLocationPuckCore = styled('div', ({
+  $theme,
+  $color,
+  $size
+}) => {
+  return {
+    position: 'absolute',
+    transform: `scale(${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';

package/es/menu/index.js

@@ -13,6 +13,6 @@ export { default as NestedMenus, NestedMenuContext } from './nested-menus'; // C
 
 export { KEY_STRINGS, STATE_CHANGE_TYPES } from './constants'; // Styled elements
 
-export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody } from './styled-components'; // Flow
+export { StyledEmptyState, StyledList, StyledListItem, StyledListItemProfile, StyledProfileImgContainer, StyledProfileImg, StyledProfileLabelsContainer, StyledProfileTitle, StyledProfileSubtitle, StyledProfileBody, StyledMenuDivider } from './styled-components'; // Flow
 
 export * from './types';