baseui 12.1.3 → 13.0.0

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

@@ -0,0 +1,32 @@
+var _Object$freeze;
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*
+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 { FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS } from './constants';
+var arrowSize = 8;
+var FLOATING_ROUTE_MARKER_OFFSETS = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft, function (offset) {
+  return "translate(calc(".concat(arrowSize, "px + ").concat(offset, "px), calc(").concat(arrowSize, "px + ").concat(offset, "px))");
+}), _defineProperty(_Object$freeze, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topRight, function (offset) {
+  return "translate(calc(-100% - ".concat(arrowSize, "px - ").concat(offset, "px), calc(").concat(arrowSize, "px + ").concat(offset, "px))");
+}), _defineProperty(_Object$freeze, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft, function (offset) {
+  return "translate(calc(".concat(arrowSize, "px + ").concat(offset, "px), calc(-100% - ").concat(arrowSize, "px - ").concat(offset, "px))");
+}), _defineProperty(_Object$freeze, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomRight, function (offset) {
+  return "translate(calc(-100% - ".concat(arrowSize, "px - ").concat(offset, "px), calc(-100% - ").concat(arrowSize, "px - ").concat(offset, "px))");
+}), _defineProperty(_Object$freeze, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topCenter, function (offset) {
+  return "translate(-50%, calc(".concat(arrowSize, "px + ").concat(offset, "px))");
+}), _defineProperty(_Object$freeze, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomCenter, function (offset) {
+  return "translate(-50%, calc(-100% - ".concat(arrowSize, "px - ").concat(offset, "px))");
+}), _defineProperty(_Object$freeze, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.leftCenter, function (offset) {
+  return "translate(calc(".concat(arrowSize, "px + ").concat(offset, "px), -50% )");
+}), _defineProperty(_Object$freeze, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.rightCenter, function (offset) {
+  return "translate(calc(-100% - ".concat(arrowSize, "px - ").concat(offset, "px), -50%)");
+}), _Object$freeze));
+export function calculateFloatingRouteMarkerOffsets(anchorPosition) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
+  return FLOATING_ROUTE_MARKER_OFFSETS[anchorPosition](offset);
+}

package/esm/map-marker/constants.js

@@ -1,4 +1,4 @@
-var _Object$freeze, _Object$freeze2, _LABEL_SIZES, _xSmallPinheadBadge, _PINHEAD_SIZES_SHAPES, _PINHEAD_SIZES_SHAPES2, _PINHEAD_SIZES_SHAPES3, _BADGE_ENHANCER_POSIT, _BADGE_ENHANCER_STYLE, _BADGE_ENHANCER_CONTE, _Object$freeze3;
+var _Object$freeze, _Object$freeze2, _LABEL_SIZES, _xSmallPinheadBadge, _PINHEAD_SIZES_SHAPES, _PINHEAD_SIZES_SHAPES2, _PINHEAD_SIZES_SHAPES3, _BADGE_ENHANCER_POSIT, _BADGE_ENHANCER_STYLE, _BADGE_ENHANCER_CONTE, _Object$freeze3, _Object$freeze4, _Object$freeze5, _Object$freeze6;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -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',
@@ -159,4 +160,84 @@ export var LOCATION_PUCK_TYPES = Object.freeze({
   consumer: 'consumer',
   earner: 'earner'
 });
-export var EARNER_LOCATION_PUCK_CORE_SCALES = Object.freeze((_Object$freeze3 = {}, _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.small, '50%'), _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.medium, '75%'), _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.large, '100%'), _Object$freeze3));
+export var EARNER_LOCATION_PUCK_CORE_SCALES = Object.freeze((_Object$freeze3 = {}, _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.small, '50%'), _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.medium, '75%'), _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.large, '100%'), _Object$freeze3));
+export var FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS = Object.freeze({
+  topLeft: 'top-left',
+  topCenter: 'top-center',
+  topRight: 'top-right',
+  rightCenter: 'right-center',
+  bottomRight: 'bottom-right',
+  bottomCenter: 'bottom-center',
+  bottomLeft: 'bottom-left',
+  leftCenter: 'left-center'
+});
+export var FLOATING_ROUTE_MARKER_POINTER_TYPES = Object.freeze({
+  diagonal: 'diagonal',
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+});
+export var FLOATING_ROUTE_MARKER_POINTERS = Object.freeze((_Object$freeze4 = {}, _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+  path: 'M0 0L24 8L8 24L0 0Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topRight, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+  path: 'M24 0L0 8L16 24L24 0Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topCenter, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical,
+  path: 'M8.49928 0L0.499411 8L16.5006 8L8.49928 0Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+  path: 'M0 24L24 16L8 0L0 24Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomRight, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+  path: 'M24 24L0 16L16 0L24 24Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomCenter, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical,
+  path: 'M8.00133 8L16.0012 0H0L8.00133 8Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.leftCenter, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.horizontal,
+  path: 'M0.000610352 8.00059L8.00061 16.0005L8.00061 -0.000732422L0.000610352 8.00059Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.rightCenter, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.horizontal,
+  path: 'M8.00061 7.99916L0.000610352 -0.000711441L0.000610352 16.0005L8.00061 7.99916Z'
+}), _Object$freeze4));
+export var FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS = Object.freeze((_Object$freeze5 = {}, _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft, {
+  transform: "translate(-33.33%, -33.33%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topRight, {
+  right: 0,
+  transform: "translate(33.33%, -33.33%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft, {
+  transform: "translate(-33.33%, 33.33%)",
+  bottom: 0
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomRight, {
+  right: 0,
+  transform: "translate(33.33%, 33.33%)",
+  bottom: 0
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topCenter, {
+  right: '50%',
+  transform: "translate(50%, -100%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomCenter, {
+  bottom: 0,
+  right: '50%',
+  transform: "translate(50%, 100%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.leftCenter, {
+  top: '50%',
+  transform: "translate(-100%, -50%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.rightCenter, {
+  left: '100%',
+  top: '50%',
+  transform: "translate(0%, -50%)"
+}), _Object$freeze5));
+export var FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES = Object.freeze((_Object$freeze6 = {}, _defineProperty(_Object$freeze6, FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal, {
+  height: '24',
+  width: '24',
+  viewBox: '0 0 24 24'
+}), _defineProperty(_Object$freeze6, FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical, {
+  height: '8',
+  width: '17',
+  viewBox: '0 0 17 8'
+}), _defineProperty(_Object$freeze6, FLOATING_ROUTE_MARKER_POINTER_TYPES.horizontal, {
+  height: '16',
+  width: '8',
+  viewBox: '0 0 8 16'
+}), _Object$freeze6));

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

@@ -0,0 +1,118 @@
+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); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+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.
+*/
+import * as React from 'react';
+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, StyledLabelSlot, StyledFloatingRouteMarkerPointerContainer, StyledFloatingRouteMarkerPointer } from './styled-components';
+
+var FloatingRouteMarker = function FloatingRouteMarker(_ref) {
+  var label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
+      StartEnhancer = _ref.startEnhancer,
+      EndEnhancer = _ref.endEnhancer,
+      _ref$selected = _ref.selected,
+      selected = _ref$selected === void 0 ? false : _ref$selected,
+      _ref$anchorPosition = _ref.anchorPosition,
+      anchorPosition = _ref$anchorPosition === void 0 ? FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft : _ref$anchorPosition,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  var _useStyletron = useStyletron(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      css = _useStyletron2[0],
+      theme = _useStyletron2[1];
+
+  var backgroundColor = selected ? theme.colors.backgroundInversePrimary : theme.colors.backgroundPrimary;
+  var color = selected ? theme.colors.contentInversePrimary : theme.colors.contentPrimary;
+  var secondaryLabelColor = selected ? theme.colors.contentInverseSecondary : theme.colors.contentSecondary;
+
+  var _getOverrides = getOverrides(overrides.Root, StyledFloatingRouteMarkerRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = getOverrides(overrides.IconContainer, StyledLabelSlot),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      IconContainer = _getOverrides4[0],
+      iconContainerProps = _getOverrides4[1];
+
+  var _getOverrides5 = getOverrides(overrides.Label, LabelMedium),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      PrimaryLabel = _getOverrides6[0],
+      primaryLabelProps = _getOverrides6[1];
+
+  var _getOverrides7 = getOverrides(overrides.SecondaryLabel, LabelSmall),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      SecondaryLabel = _getOverrides8[0],
+      secondaryLabelProps = _getOverrides8[1];
+
+  var _getOverrides9 = getOverrides(overrides.Pointer, StyledFloatingRouteMarkerPointer),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      Pointer = _getOverrides10[0],
+      pointerProps = _getOverrides10[1];
+
+  var _getOverrides11 = getOverrides(overrides.PointerContainer, StyledFloatingRouteMarkerPointerContainer),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      PointerContainer = _getOverrides12[0],
+      pointerContainerProps = _getOverrides12[1];
+
+  var size = PINHEAD_SIZES_SHAPES.medium;
+  var icon = PINHEAD_DIMENSIONS[size].icon;
+  var activeElements = [label, StartEnhancer, EndEnhancer].filter(function (x) {
+    return x;
+  });
+  var gridTemplateColumns = activeElements.map(function () {
+    return 'auto';
+  }).join(' ');
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    "data-baseweb": "floating-route-map-marker",
+    $background: backgroundColor,
+    $gridTemplateColumns: gridTemplateColumns
+  }, rootProps), StartEnhancer && /*#__PURE__*/React.createElement(IconContainer, _extends({
+    $color: color,
+    $size: size
+  }, iconContainerProps), /*#__PURE__*/React.createElement(StartEnhancer, {
+    size: icon
+  })), label && /*#__PURE__*/React.createElement("div", {
+    className: css({
+      display: 'flex',
+      flexDirection: 'column'
+    })
+  }, /*#__PURE__*/React.createElement(PrimaryLabel, _extends({
+    $color: color
+  }, primaryLabelProps), label), /*#__PURE__*/React.createElement(SecondaryLabel, _extends({
+    $color: secondaryLabelColor
+  }, secondaryLabelProps), secondaryLabel)), EndEnhancer && /*#__PURE__*/React.createElement(IconContainer, _extends({
+    $color: color,
+    $size: size
+  }, iconContainerProps), /*#__PURE__*/React.createElement(EndEnhancer, {
+    size: icon
+  })), /*#__PURE__*/React.createElement(PointerContainer, _extends({
+    $position: anchorPosition,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES[FLOATING_ROUTE_MARKER_POINTERS[anchorPosition].type], pointerContainerProps), /*#__PURE__*/React.createElement(Pointer, _extends({
+    d: FLOATING_ROUTE_MARKER_POINTERS[anchorPosition].path,
+    $background: backgroundColor
+  }, pointerProps))));
+};
+
+export default FloatingRouteMarker;

package/esm/map-marker/index.js

@@ -7,6 +7,8 @@ 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 { 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 { default as FloatingRouteMarker } from './floating-route-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, LOCATION_PUCK_SIZES, LOCATION_PUCK_TYPES, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS } from './constants';
+export { calculateFloatingRouteMarkerOffsets } from './calculate-offsets';
 export * from './types';
 /** @deprecated use AnchorPositions instead. To be removed in future versions.*/

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];