baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/esm/list/list-heading.js

@@ -29,6 +29,7 @@ import * as ReactIs from 'react-is';
 import { getOverrides } from '../helpers/overrides';
 import { StyledHeadingRoot, StyledHeadingContent, StyledHeadingContentRow, StyledHeadingEndEnhancerContainer, StyledHeadingEndEnhancerDescriptionContainer, StyledHeadingMainHeading, StyledHeadingSubHeading } from './styled-components';
 
+// @ts-ignore
 function RenderNode(props) {
   var component = props.component,
       restProps = _objectWithoutProperties(props, _excluded);
@@ -48,7 +49,8 @@ function RenderNode(props) {
   }
 
   return Component;
-}
+} // @ts-ignore
+
 
 function isMaxLinesValid(maxLines) {
   return maxLines === 1 || maxLines === 2;
@@ -104,27 +106,24 @@ var ListHeading = /*#__PURE__*/React.forwardRef(function (props, ref) {
     }
   }
 
-  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
-    })))))
-  );
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , _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/esm/list/list-item.js

@@ -66,14 +66,18 @@ var ListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
       return props.artworkSize || ARTWORK_SIZES.MEDIUM;
     }
   }, [props.artworkSize, props.sublist]);
+  var isTapTarget = Boolean(props.onClick);
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _extends({
     ref: ref,
     $shape: props.shape || SHAPE.DEFAULT,
+    $as: isTapTarget ? 'button' : 'li',
+    $isTapTarget: isTapTarget,
     "aria-label": props['aria-label'],
     "aria-selected": props['aria-selected'],
     id: props.id,
-    role: props.role
+    role: props.role,
+    onClick: props.onClick
   }, rootProps), Artwork && /*#__PURE__*/React.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)

package/esm/list/styled-components.js

@@ -15,8 +15,10 @@ import { artworkSizeToValue } from './utils';
 import { SHAPE } from './constants';
 export var StyledRoot = styled('li', function (_ref) {
   var $theme = _ref.$theme,
-      $shape = _ref.$shape;
-  return {
+      $shape = _ref.$shape,
+      _ref$$isTapTarget = _ref.$isTapTarget,
+      $isTapTarget = _ref$$isTapTarget === void 0 ? false : _ref$$isTapTarget;
+  return _objectSpread({
     alignItems: 'center',
     backgroundColor: $theme.colors.backgroundPrimary,
     display: 'flex',
@@ -27,11 +29,22 @@ export var StyledRoot = styled('li', function (_ref) {
     borderBottomLeftRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
     borderBottomRightRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
     overflow: 'hidden'
-  };
+  }, $isTapTarget ? {
+    // button style reset
+    borderRadius: 0,
+    textAlign: 'inherit',
+    boxShadow: 'none',
+    padding: 0,
+    cursor: 'pointer',
+    border: 'none',
+    color: 'inherit',
+    font: 'inherit'
+  } : {});
 });
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
-export var StyledContent = styled('div', function (_ref2) {
+export var StyledContent = styled('div', // @ts-ignore
+function (_ref2) {
   var $mLeft = _ref2.$mLeft,
       $sublist = _ref2.$sublist,
       $theme = _ref2.$theme;

package/esm/locale/es_AR.js

@@ -57,6 +57,7 @@ var es_AR = {
     optionsLabel: 'Selecciona una columna para filtrar',
     optionsSearch: 'Busque una columna para filtrar por...',
     optionsEmpty: 'Sin columnas disponibles.',
+    categoricalFilterSearchLabel: 'Buscar categorías',
     categoricalFilterSelectAll: 'Seleccionar Todo',
     categoricalFilterSelectClear: 'Borrar',
     categoricalFilterEmpty: 'No se encontraron categorías',
@@ -79,7 +80,8 @@ var es_AR = {
     booleanColumnTrueShort: 'V',
     booleanColumnFalseShort: 'F',
     selectRow: 'Seleccionar fila',
-    selectAllRows: 'Seleccionar todas las filas'
+    selectAllRows: 'Seleccionar todas las filas',
+    sortColumn: 'Clasificar columna'
   },
   buttongroup: {
     ariaLabel: 'grupo de botones'

package/esm/locale/index.js

@@ -4,7 +4,8 @@ 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 * as React from 'react'; // @ts-ignore
+
 import extend from 'just-extend';
 import en_US from './en_US';
 export var LocaleContext = /*#__PURE__*/React.createContext(en_US);
@@ -15,9 +16,14 @@ var LocaleProvider = function LocaleProvider(props) {
   var locale = props.locale,
       children = props.children;
   var parentLocale = (_React$useContext = React.useContext(LocaleContext)) !== null && _React$useContext !== void 0 ? _React$useContext : {};
-  return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
-    value: extend({}, en_US, parentLocale, locale)
-  }, children);
+  return (
+    /*#__PURE__*/
+    // this is poorly documented but specifying true enforces that the object is deeply extended
+    // https://www.npmjs.com/package/just-extend
+    React.createElement(LocaleContext.Provider, {
+      value: extend(true, {}, en_US, parentLocale, locale)
+    }, children)
+  );
 };
 
 export default LocaleProvider;

package/esm/locale/tr_TR.js

@@ -57,6 +57,7 @@ var tr_TR = {
     optionsLabel: 'Filtrelenecek sütunu seçin',
     optionsSearch: 'Filtrelemek için bir sütun arayın...',
     optionsEmpty: 'Sütun yok.',
+    categoricalFilterSearchLabel: 'Arama kategorileri',
     categoricalFilterSelectAll: 'Tümünü Seç',
     categoricalFilterSelectClear: 'Temizle',
     categoricalFilterEmpty: 'Kategori bulunamadı',
@@ -79,7 +80,8 @@ var tr_TR = {
     booleanColumnTrueShort: 'D',
     booleanColumnFalseShort: 'Y',
     selectRow: 'satır seç',
-    selectAllRows: 'Tüm satırları seç'
+    selectAllRows: 'Tüm satırları seç',
+    sortColumn: 'Sıralama sütunu'
   },
   buttongroup: {
     ariaLabel: 'buton grup'

package/esm/map-marker/calculate-offsets.js

@@ -4,7 +4,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 /*
 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.
 */

package/esm/map-marker/constants.js

@@ -14,7 +14,8 @@ export var NEEDLE_SIZES = Object.freeze({
   medium: 'medium',
   tall: 'tall'
 });
-export var NEEDLE_HEIGHTS = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, NEEDLE_SIZES.none, 0), _defineProperty(_Object$freeze, NEEDLE_SIZES.short, 4), _defineProperty(_Object$freeze, NEEDLE_SIZES.medium, 12), _defineProperty(_Object$freeze, NEEDLE_SIZES.tall, 20), _Object$freeze));
+export var NEEDLE_HEIGHTS = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, NEEDLE_SIZES.none, 0), _defineProperty(_Object$freeze, NEEDLE_SIZES.short, 4), _defineProperty(_Object$freeze, NEEDLE_SIZES.medium, 12), _defineProperty(_Object$freeze, NEEDLE_SIZES.tall, 20), _Object$freeze)); // Important: keep this sorted by size, as it used to determine label size when a secondary label is used.
+
 export var PINHEAD_SIZES_SHAPES = Object.freeze({
   xxSmallCircle: 'xx-small-circle',
   xxSmallSquare: 'xx-small-square',

package/esm/map-marker/floating-marker.js

@@ -23,7 +23,7 @@ import { useStyletron } from '../styles';
 import PinHead from './pin-head';
 import { getOverrides } from '../helpers/overrides';
 import { StyledFloatingMarkerRoot, StyledFloatingMarkerAnchorContainer, StyledFloatingMarkerPinHeadContainer } from './styled-components';
-import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, PINHEAD_DIMENSIONS } from './constants';
+import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, PINHEAD_DIMENSIONS } from './constants'; // @ts-ignore
 
 function getAnchorPinHeadSize(anchorType) {
   if (anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle) {
@@ -39,6 +39,7 @@ function getAnchorPinHeadSize(anchorType) {
 
 var FloatingMarker = function FloatingMarker(_ref) {
   var label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref$size,
       _ref$anchor = _ref.anchor,
@@ -88,6 +89,7 @@ var FloatingMarker = function FloatingMarker(_ref) {
     background: backgroundPrimary,
     type: PINHEAD_TYPES.floating,
     label: label,
+    secondaryLabel: secondaryLabel,
     startEnhancer: startEnhancer,
     endEnhancer: endEnhancer,
     overrides: overrides

package/esm/map-marker/floating-route-marker.js

@@ -14,7 +14,6 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 /*
 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.
 */
@@ -23,15 +22,13 @@ import { useStyletron } from '../styles';
 import { getOverrides } from '../helpers/overrides';
 import { LabelSmall, LabelMedium } from '../typography';
 import { FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS, FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES, FLOATING_ROUTE_MARKER_POINTERS, PINHEAD_SIZES_SHAPES, PINHEAD_DIMENSIONS } from './constants';
-import { StyledFloatingRouteMarkerRoot, StyledContentItem, StyledFloatingRouteMarkerPointerContainer, StyledFloatingRouteMarkerPointer } from './styled-components';
+import { StyledFloatingRouteMarkerRoot, StyledLabelSlot, StyledFloatingRouteMarkerPointerContainer, StyledFloatingRouteMarkerPointer } from './styled-components';
 
 var FloatingRouteMarker = function FloatingRouteMarker(_ref) {
   var label = _ref.label,
       secondaryLabel = _ref.secondaryLabel,
-      _ref$startEnhancer = _ref.startEnhancer,
-      StartEnhancer = _ref$startEnhancer === void 0 ? null : _ref$startEnhancer,
-      _ref$endEnhancer = _ref.endEnhancer,
-      EndEnhancer = _ref$endEnhancer === void 0 ? null : _ref$endEnhancer,
+      StartEnhancer = _ref.startEnhancer,
+      EndEnhancer = _ref.endEnhancer,
       _ref$selected = _ref.selected,
       selected = _ref$selected === void 0 ? false : _ref$selected,
       _ref$anchorPosition = _ref.anchorPosition,
@@ -53,7 +50,7 @@ var FloatingRouteMarker = function FloatingRouteMarker(_ref) {
       Root = _getOverrides2[0],
       rootProps = _getOverrides2[1];
 
-  var _getOverrides3 = getOverrides(overrides.IconContainer, StyledContentItem),
+  var _getOverrides3 = getOverrides(overrides.IconContainer, StyledLabelSlot),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
       IconContainer = _getOverrides4[0],
       iconContainerProps = _getOverrides4[1];

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

@@ -22,7 +22,7 @@ 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';
+import { LocationPuckContainer, StyledConsumerLocationPuckCore, StyledLocationPuckApproximation, StyledEarnerLocationPuckCore } from './styled-components'; // @ts-ignore
 
 var ConsumerLocationPuckHeading = function ConsumerLocationPuckHeading(_ref) {
   var heading = _ref.heading;
@@ -87,7 +87,8 @@ var ConsumerLocationPuck = function ConsumerLocationPuck(_ref2) {
   }, locationPuckApproximationProps)), /*#__PURE__*/React.createElement(ConsumerLocationPuckCore, consumerLocationPuckCoreProps), showHeading && /*#__PURE__*/React.createElement(ConsumerLocationPuckHeading, {
     heading: heading
   }));
-};
+}; // @ts-ignore
+
 
 var EarnerLocationPuckHeading = function EarnerLocationPuckHeading(_ref3) {
   var size = _ref3.size,
@@ -105,6 +106,7 @@ var EarnerLocationPuckHeading = function EarnerLocationPuckHeading(_ref3) {
       transition: "".concat(theme.animation.timing300, " ").concat(theme.animation.easeOutCurve, " all")
     }),
     style: {
+      // @ts-ignore
       transform: "rotate(".concat(heading, "deg) scale(").concat(EARNER_LOCATION_PUCK_CORE_SCALES[size], ")")
     },
     width: "72",
@@ -130,19 +132,21 @@ var EarnerLocationPuck = function EarnerLocationPuck(_ref4) {
       _useStyletron8 = _slicedToArray(_useStyletron7, 2),
       theme = _useStyletron8[1];
 
-  var color = theme.colors.contentPrimary;
+  var color = theme.colors.contentPrimary; // @ts-ignore
 
   var _getOverrides7 = getOverrides(overrides.Root, LocationPuckContainer),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       Root = _getOverrides8[0],
       rootProps = _getOverrides8[1];
 
-  var _getOverrides9 = getOverrides(overrides.LocationPuckApproximation, StyledLocationPuckApproximation),
+  var _getOverrides9 = getOverrides( // @ts-ignore
+  overrides.LocationPuckApproximation, StyledLocationPuckApproximation),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
       LocationPuckApproximation = _getOverrides10[0],
       locationPuckApproximationProps = _getOverrides10[1];
 
-  var _getOverrides11 = getOverrides(overrides.EarnerLocationPuckCore, StyledEarnerLocationPuckCore),
+  var _getOverrides11 = getOverrides( // @ts-ignore
+  overrides.EarnerLocationPuckCore, StyledEarnerLocationPuckCore),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
       EarnerLocationPuckCore = _getOverrides12[0],
       earnerLocationPuckCoreProps = _getOverrides12[1];

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

@@ -20,7 +20,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides';
-import { StyledInnerXXSmallAnchor, StyledOuterXXSmallAnchor, StyledInnerXSmallAnchor, StyledOuterXSmallAnchor, StyledPinHead, RelativeContainer, StyledContentItem } from './styled-components';
+import { StyledInnerXXSmallAnchor, StyledOuterXXSmallAnchor, StyledInnerXSmallAnchor, StyledOuterXSmallAnchor, StyledPinHead, RelativeContainer, StyledEnhancerSlot, StyledLabelSlot, StyledLabel } from './styled-components';
 import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES, NEEDLE_HEIGHTS, NEEDLE_SIZES } from './constants';
 import BadgeEnhancer from './badge-enhancer';
 import LabelEnhancer from './label-enhancer';
@@ -30,6 +30,8 @@ var PinHead = function PinHead(_ref) {
       size = _ref$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref$size,
       _ref$label = _ref.label,
       label = _ref$label === void 0 ? '' : _ref$label,
+      _ref$secondaryLabel = _ref.secondaryLabel,
+      secondaryLabel = _ref$secondaryLabel === void 0 ? '' : _ref$secondaryLabel,
       StartEnhancer = _ref.startEnhancer,
       EndEnhancer = _ref.endEnhancer,
       color = _ref.color,
@@ -61,30 +63,45 @@ var PinHead = function PinHead(_ref) {
       PinHead = _getOverrides2[0],
       pinHeadProps = _getOverrides2[1];
 
-  var _getOverrides3 = getOverrides(overrides.PinHeadContent, StyledContentItem),
+  var _getOverrides3 = getOverrides(overrides.EnhancerSlot, StyledEnhancerSlot),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
-      ContentItem = _getOverrides4[0],
-      contentItemProps = _getOverrides4[1];
+      EnhancerSlot = _getOverrides4[0],
+      enhancerSlotProps = _getOverrides4[1];
 
-  var _getOverrides5 = getOverrides(overrides.InnerAnchor, StyledInnerXXSmallAnchor),
+  var _getOverrides5 = getOverrides(overrides.LabelSlot, StyledLabelSlot),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-      InnerXXSmallAnchor = _getOverrides6[0],
-      innerXXSmallAnchorProps = _getOverrides6[1];
+      LabelSlot = _getOverrides6[0],
+      labelSlotProps = _getOverrides6[1];
 
-  var _getOverrides7 = getOverrides(overrides.OuterAnchor, StyledOuterXXSmallAnchor),
+  var _getOverrides7 = getOverrides(overrides.Label, StyledLabel),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-      OuterXXSmallAnchor = _getOverrides8[0],
-      outerXXSmallAnchorProps = _getOverrides8[1];
+      Label = _getOverrides8[0],
+      labelProps = _getOverrides8[1];
 
-  var _getOverrides9 = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor),
+  var _getOverrides9 = getOverrides(overrides.SecondaryLabel, StyledLabel),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
-      InnerXSmallAnchor = _getOverrides10[0],
-      innerXSmallAnchorProps = _getOverrides10[1];
+      SecondaryLabel = _getOverrides10[0],
+      secondaryLabelProps = _getOverrides10[1];
 
-  var _getOverrides11 = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor),
+  var _getOverrides11 = getOverrides(overrides.InnerAnchor, StyledInnerXXSmallAnchor),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      OuterXSmallAnchor = _getOverrides12[0],
-      outerXSmallAnchorProps = _getOverrides12[1];
+      InnerXXSmallAnchor = _getOverrides12[0],
+      innerXXSmallAnchorProps = _getOverrides12[1];
+
+  var _getOverrides13 = getOverrides(overrides.OuterAnchor, StyledOuterXXSmallAnchor),
+      _getOverrides14 = _slicedToArray(_getOverrides13, 2),
+      OuterXXSmallAnchor = _getOverrides14[0],
+      outerXXSmallAnchorProps = _getOverrides14[1];
+
+  var _getOverrides15 = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      InnerXSmallAnchor = _getOverrides16[0],
+      innerXSmallAnchorProps = _getOverrides16[1];
+
+  var _getOverrides17 = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor),
+      _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+      OuterXSmallAnchor = _getOverrides18[0],
+      outerXSmallAnchorProps = _getOverrides18[1];
 
   var badge = /*#__PURE__*/React.createElement(BadgeEnhancer, {
     markerType: type,
@@ -121,6 +138,7 @@ var PinHead = function PinHead(_ref) {
     }, innerXSmallAnchorProps))));
   }
 
+  var renderSecondaryLabel = (size === PINHEAD_SIZES_SHAPES.large || size === PINHEAD_SIZES_SHAPES.medium) && secondaryLabel;
   return /*#__PURE__*/React.createElement(RelativeContainer, null, /*#__PURE__*/React.createElement(LabelEnhancer, {
     labelEnhancerContent: labelEnhancerContent,
     labelEnhancerPosition: labelEnhancerPosition,
@@ -133,21 +151,25 @@ var PinHead = function PinHead(_ref) {
     $gridTemplateColumns: gridTemplateColumns,
     $forceCircle: forceCircle,
     $type: type
-  }, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
+  }, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(EnhancerSlot, _extends({
     $height: height,
     $color: color,
     $size: size
-  }, contentItemProps), /*#__PURE__*/React.createElement(StartEnhancer, {
+  }, enhancerSlotProps), /*#__PURE__*/React.createElement(StartEnhancer, {
     size: icon
-  })), label && /*#__PURE__*/React.createElement(ContentItem, _extends({
-    $height: height,
-    $color: color,
-    $size: size
-  }, contentItemProps), label), EndEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
+  })), label && /*#__PURE__*/React.createElement(LabelSlot, labelSlotProps, /*#__PURE__*/React.createElement(Label, _extends({
+    $size: size,
+    $renderSecondaryLabel: renderSecondaryLabel,
+    $color: color
+  }, labelProps), label), renderSecondaryLabel && /*#__PURE__*/React.createElement(SecondaryLabel, _extends({
+    $size: size,
+    $renderSecondaryLabel: renderSecondaryLabel,
+    $color: color
+  }, secondaryLabelProps), secondaryLabel)), EndEnhancer && /*#__PURE__*/React.createElement(EnhancerSlot, _extends({
     $height: height,
     $color: color,
     $size: size
-  }, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
+  }, enhancerSlotProps), /*#__PURE__*/React.createElement(EndEnhancer, {
     size: icon
   }))));
 };

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

@@ -11,7 +11,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, EARNER_LOCATION_PUCK_CORE_SCALES, FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS } from './constants';
+import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES, EARNER_LOCATION_PUCK_CORE_SCALES, PINHEAD_SIZES_SHAPES, FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS } from './constants';
 export var getAnchorTransform = function getAnchorTransform(anchor, anchorSize) {
   var _FLOATING_MARKER_ANCH;
 
@@ -299,7 +299,7 @@ export var RelativeContainer = styled('div', function () {
 });
 RelativeContainer.displayName = "RelativeContainer";
 RelativeContainer.displayName = 'RelativeContainer';
-export var StyledContentItem = styled('div', function (_ref15) {
+export var StyledEnhancerSlot = styled('div', function (_ref15) {
   var $theme = _ref15.$theme,
       $color = _ref15.$color,
       $height = _ref15.$height,
@@ -313,8 +313,7 @@ export var StyledContentItem = styled('div', function (_ref15) {
     color: $color
   });
 });
-StyledContentItem.displayName = "StyledContentItem";
-StyledContentItem.displayName = 'StyledContentItem';
+StyledEnhancerSlot.displayName = "StyledEnhancerSlot";
 export var StyledFloatingRouteMarkerRoot = styled('div', function (_ref16) {
   var $theme = _ref16.$theme,
       $height = _ref16.$height,
@@ -336,12 +335,35 @@ export var StyledFloatingRouteMarkerRoot = styled('div', function (_ref16) {
 });
 StyledFloatingRouteMarkerRoot.displayName = "StyledFloatingRouteMarkerRoot";
 StyledFloatingRouteMarkerRoot.displayName = 'StyledFloatingRouteMarkerRoot';
-export var StyledLabel = styled('div', function (_ref17) {
-  var $color = _ref17.$color;
+StyledEnhancerSlot.displayName = 'StyledEnhancerSlot';
+export var StyledLabelSlot = styled('div', function () {
   return {
-    color: $color
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column'
   };
 });
+StyledLabelSlot.displayName = "StyledLabelSlot";
+StyledLabelSlot.displayName = 'StyledLabelSlot';
+export var StyledLabel = styled('div', function (_ref17) {
+  var $theme = _ref17.$theme,
+      $size = _ref17.$size,
+      $renderSecondaryLabel = _ref17.$renderSecondaryLabel,
+      $color = _ref17.$color;
+  var pinheadSizeOrder = Object.values(PINHEAD_SIZES_SHAPES);
+  var labelSizeIndex = pinheadSizeOrder.findIndex(function (x) {
+    return $size === x;
+  });
+
+  if ($renderSecondaryLabel) {
+    labelSizeIndex--;
+  }
+
+  var typographyStyle = LABEL_SIZES[pinheadSizeOrder[labelSizeIndex]];
+  return _objectSpread(_objectSpread({}, $theme.typography[typographyStyle]), {}, {
+    color: $color
+  });
+});
 StyledLabel.displayName = "StyledLabel";
 StyledLabel.displayName = 'StyledLabel';
 export var LocationPuckContainer = styled('div', function () {

package/esm/menu/menu.js

@@ -104,10 +104,14 @@ export default function Menu(props) {
         itemIndex = _ref2[1];
 
     if (optgroup !== '__ungrouped') {
-      els.push( /*#__PURE__*/React.createElement(OptgroupHeader, _extends({
+      els.push(
+      /*#__PURE__*/
+      // @ts-ignore
+      React.createElement(OptgroupHeader, _extends({
         key: optgroup
       }, optgroupHeaderProps), optgroup));
     } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-ignore
 
 
     var groupItems = groupedItems[optgroup].map(function (item, index) {
@@ -149,7 +153,8 @@ export default function Menu(props) {
     return [els.concat(groupItems), itemIndex];
   }, [[], -1]),
       _optgroups$reduce2 = _slicedToArray(_optgroups$reduce, 1),
-      elements = _optgroups$reduce2[0];
+      elements = _optgroups$reduce2[0]; // @ts-ignore
+
 
   var isEmpty = optgroups.every(function (optgroup) {
     return !groupedItems[optgroup].length;
@@ -168,7 +173,8 @@ export default function Menu(props) {
       }, handleFocus),
       onBlur: forkBlur({
         onBlur: unfocusMenu
-      }, handleBlur),
+      }, handleBlur) // @ts-ignore
+      ,
       onKeyDown: function onKeyDown(event) {
         if (props.isFocused) {
           handleKeyDown(event);

package/esm/menu/nested-menus.js

@@ -93,6 +93,7 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "mouseLeaveTimeoueId", null);
 
     _defineProperty(_assertThisInitialized(_this), "handleMenuMouseLeave", function (event) {
+      // @ts-ignore
       _this.mouseLeaveTimeoueId = setTimeout(function () {
         _this.setState({
           nestedMenuHoverIndex: -1
@@ -102,10 +103,14 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
 
     _defineProperty(_assertThisInitialized(_this), "handleMenuMouseEnter", function (event) {
       if (typeof document !== 'undefined') {
+        // @ts-ignore
         clearTimeout(_this.mouseLeaveTimeoueId);
 
         var index = _this.state.menus.findIndex(function (m) {
-          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+          return (// @ts-ignore
+            m.current && event.currentTarget instanceof Node && // @ts-ignore
+            m.current.contains(event.currentTarget)
+          );
         });
 
         _this.setState({
@@ -141,7 +146,9 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
           for (_iterator.s(); !(_step = _iterator.n()).done;) {
             var r = _step.value;
 
+            // @ts-ignore
             if (r.current && isSame(r.current, ref.current)) {
+              // @ts-ignore
               var element = r.current;
               element.removeEventListener('mouseenter', _this.handleMenuMouseEnter);
               element.removeEventListener('mouseleave', _this.handleMenuMouseLeave);
@@ -163,6 +170,7 @@ var NestedMenus = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "findMenuIndexByRef", function (ref) {
+      // @ts-ignore
       return _this.state.menus.findIndex(function (r) {
         return isSame(r.current, ref.current);
       });

package/esm/menu/option-list.js

@@ -68,7 +68,8 @@ function OptionList(props, ref) {
   var _getOverrides3 = getOverrides(overrides.ListItemAnchor, StyledListItemAnchor),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
       ListItemAnchor = _getOverrides4[0],
-      listItemAnchorProps = _getOverrides4[1];
+      listItemAnchorProps = _getOverrides4[1]; // @ts-ignore
+
 
   var getItem = function getItem(item) {
     if (item.href && renderHrefAsAnchor) {
@@ -102,7 +103,8 @@ function OptionList(props, ref) {
       isHighlighted: $isHighlighted
     }, item))));
   });
-}
+} // @ts-ignore
+
 
 function areEqualShallow(a, b) {
   if (!a || !b) return false;
@@ -114,11 +116,13 @@ function areEqualShallow(a, b) {
   }
 
   return true;
-}
+} // @ts-ignore
+
 
 function compare(prevProps, nextProps) {
   return prevProps.$isHighlighted === nextProps.$isHighlighted && prevProps.$isFocused === nextProps.$isFocused && areEqualShallow(prevProps.item, nextProps.item) && areEqualShallow(prevProps.overrides, nextProps.overrides) && prevProps.size === nextProps.size && prevProps.getItemLabel === nextProps.getItemLabel && prevProps.getChildMenu === nextProps.getChildMenu && prevProps.resetMenu === nextProps.resetMenu;
-}
+} // @ts-ignore
+
 
 var forwarded = /*#__PURE__*/React.forwardRef(OptionList);
 forwarded.displayName = 'OptionList';

package/esm/menu/option-profile.js

@@ -87,8 +87,7 @@ function OptionProfile(props, ref) {
       subtitle = _getProfileItemLabels.subtitle,
       body = _getProfileItemLabels.body;
 
-  return /*#__PURE__*/React.createElement(MaybeChildMenu // @ts-expect-error todo(flow->ts)
-  , {
+  return /*#__PURE__*/React.createElement(MaybeChildMenu, {
     ref: ref,
     getChildMenu: getChildMenu,
     isOpen: !!$isHighlighted,
@@ -106,7 +105,8 @@ function OptionProfile(props, ref) {
   /*#__PURE__*/
   // Or just render the entire component user specified
   React.createElement(ItemImg, profileImgProps))), /*#__PURE__*/React.createElement(ProfileLabelsContainer, profileLabelsContainerProps, title && /*#__PURE__*/React.createElement(ProfileTitle, profileTitleProps, title), subtitle && /*#__PURE__*/React.createElement(ProfileSubtitle, profileSubtitleProps, subtitle), body && /*#__PURE__*/React.createElement(ProfileBody, profileBodyProps, body))));
-}
+} // @ts-ignore
+
 
 var forwarded = /*#__PURE__*/React.forwardRef(OptionProfile);
 forwarded.displayName = 'OptionProfile';