baseui 12.0.0 → 12.1.0

package/map-marker/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {
   FixedMarker: true,
   FloatingMarker: true,
+  LocationPuck: true,
   FLOATING_MARKER_ANCHOR_POSITIONS: true,
   FLOATING_MARKER_SIZES: true,
   FLOATING_MARKER_ANCHOR_TYPES: true,
@@ -14,7 +15,9 @@ var _exportNames = {
   BADGE_ENHANCER_SIZES: true,
   LABEL_ENHANCER_POSITIONS: true,
   KIND: true,
-  PINHEAD_DIMENSIONS: true
+  PINHEAD_DIMENSIONS: true,
+  LOCATION_PUCK_SIZES: true,
+  LOCATION_PUCK_TYPES: true
 };
 Object.defineProperty(exports, "BADGE_ENHANCER_SIZES", {
   enumerable: true,
@@ -64,6 +67,24 @@ Object.defineProperty(exports, "LABEL_ENHANCER_POSITIONS", {
     return _constants.LABEL_ENHANCER_POSITIONS;
   }
 });
+Object.defineProperty(exports, "LOCATION_PUCK_SIZES", {
+  enumerable: true,
+  get: function get() {
+    return _constants.LOCATION_PUCK_SIZES;
+  }
+});
+Object.defineProperty(exports, "LOCATION_PUCK_TYPES", {
+  enumerable: true,
+  get: function get() {
+    return _constants.LOCATION_PUCK_TYPES;
+  }
+});
+Object.defineProperty(exports, "LocationPuck", {
+  enumerable: true,
+  get: function get() {
+    return _locationPuck.default;
+  }
+});
 Object.defineProperty(exports, "NEEDLE_SIZES", {
   enumerable: true,
   get: function get() {
@@ -87,6 +108,8 @@ var _fixedMarker = _interopRequireDefault(require("./fixed-marker"));
 
 var _floatingMarker = _interopRequireDefault(require("./floating-marker"));
 
+var _locationPuck = _interopRequireDefault(require("./location-puck"));
+
 var _constants = require("./constants");
 
 var _types = require("./types");

package/map-marker/index.js.flow

@@ -5,9 +5,9 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export { default as FixedMarker } from './fixed-marker.js';
-export { default as FloatingMarker } from './floating-marker.js';
-
+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,
@@ -17,6 +17,8 @@ export {
   BADGE_ENHANCER_SIZES,
   LABEL_ENHANCER_POSITIONS,
   KIND,
+  LOCATION_PUCK_SIZES,
+  LOCATION_PUCK_TYPES,
   PINHEAD_DIMENSIONS,
 } from './constants.js';
 

package/map-marker/location-puck.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { LocationPuckProps } from './types';
+declare const LocationPuck: ({ size, heading, showHeading, confidenceRadius, type, overrides, }: LocationPuckProps) => JSX.Element;
+export default LocationPuck;

package/map-marker/location-puck.js

@@ -0,0 +1,211 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _styles = require("../styles");
+
+var _overrides = require("../helpers/overrides");
+
+var _constants = require("./constants");
+
+var _styledComponents = require("./styled-components");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+var ConsumerLocationPuckHeading = function ConsumerLocationPuckHeading(_ref) {
+  var heading = _ref.heading;
+
+  var _useStyletron = (0, _styles.useStyletron)(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      css = _useStyletron2[0],
+      theme = _useStyletron2[1];
+
+  return /*#__PURE__*/React.createElement("svg", {
+    className: css({
+      height: "".concat(6, "px"),
+      width: "".concat(11, "px"),
+      position: 'absolute',
+      color: theme.colors.contentAccent,
+      transition: "".concat(theme.animation.timing300, " ").concat(theme.animation.easeOutCurve, " all")
+    }),
+    style: {
+      transform: "rotate(".concat(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"
+  }));
+};
+
+var ConsumerLocationPuck = function ConsumerLocationPuck(_ref2) {
+  var heading = _ref2.heading,
+      showHeading = _ref2.showHeading,
+      confidenceRadius = _ref2.confidenceRadius,
+      overrides = _ref2.overrides;
+
+  var _useStyletron3 = (0, _styles.useStyletron)(),
+      _useStyletron4 = _slicedToArray(_useStyletron3, 2),
+      theme = _useStyletron4[1];
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.LocationPuckContainer),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      rootProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.ConsumerLocationPuckCore, _styledComponents.StyledConsumerLocationPuckCore),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      ConsumerLocationPuckCore = _getOverrides4[0],
+      consumerLocationPuckCoreProps = _getOverrides4[1];
+
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.LocationPuckApproximation, _styledComponents.StyledLocationPuckApproximation),
+      _getOverrides6 = _slicedToArray(_getOverrides5, 2),
+      LocationPuckApproximation = _getOverrides6[0],
+      locationPuckApproximationProps = _getOverrides6[1];
+
+  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
+  }));
+};
+
+var EarnerLocationPuckHeading = function EarnerLocationPuckHeading(_ref3) {
+  var size = _ref3.size,
+      color = _ref3.color,
+      heading = _ref3.heading;
+
+  var _useStyletron5 = (0, _styles.useStyletron)(),
+      _useStyletron6 = _slicedToArray(_useStyletron5, 2),
+      css = _useStyletron6[0],
+      theme = _useStyletron6[1];
+
+  return /*#__PURE__*/React.createElement("svg", {
+    className: css({
+      position: 'absolute',
+      transition: "".concat(theme.animation.timing300, " ").concat(theme.animation.easeOutCurve, " all")
+    }),
+    style: {
+      transform: "rotate(".concat(heading, "deg) scale(").concat(_constants.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
+  }));
+};
+
+var EarnerLocationPuck = function EarnerLocationPuck(_ref4) {
+  var heading = _ref4.heading,
+      confidenceRadius = _ref4.confidenceRadius,
+      size = _ref4.size,
+      overrides = _ref4.overrides;
+
+  var _useStyletron7 = (0, _styles.useStyletron)(),
+      _useStyletron8 = _slicedToArray(_useStyletron7, 2),
+      theme = _useStyletron8[1];
+
+  var color = theme.colors.contentPrimary;
+
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.LocationPuckContainer),
+      _getOverrides8 = _slicedToArray(_getOverrides7, 2),
+      Root = _getOverrides8[0],
+      rootProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.LocationPuckApproximation, _styledComponents.StyledLocationPuckApproximation),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      LocationPuckApproximation = _getOverrides10[0],
+      locationPuckApproximationProps = _getOverrides10[1];
+
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.EarnerLocationPuckCore, _styledComponents.StyledEarnerLocationPuckCore),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      EarnerLocationPuckCore = _getOverrides12[0],
+      earnerLocationPuckCoreProps = _getOverrides12[1];
+
+  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
+  }));
+};
+
+var LocationPuck = function LocationPuck(_ref5) {
+  var _ref5$size = _ref5.size,
+      size = _ref5$size === void 0 ? _constants.LOCATION_PUCK_SIZES.medium : _ref5$size,
+      _ref5$heading = _ref5.heading,
+      heading = _ref5$heading === void 0 ? 0 : _ref5$heading,
+      _ref5$showHeading = _ref5.showHeading,
+      showHeading = _ref5$showHeading === void 0 ? true : _ref5$showHeading,
+      _ref5$confidenceRadiu = _ref5.confidenceRadius,
+      confidenceRadius = _ref5$confidenceRadiu === void 0 ? 0 : _ref5$confidenceRadiu,
+      _ref5$type = _ref5.type,
+      type = _ref5$type === void 0 ? _constants.LOCATION_PUCK_TYPES.consumer : _ref5$type,
+      _ref5$overrides = _ref5.overrides,
+      overrides = _ref5$overrides === void 0 ? {} : _ref5$overrides;
+
+  if (process.env.NODE_ENV !== "production") {
+    if (size !== _constants.LOCATION_PUCK_SIZES.medium && type === _constants.LOCATION_PUCK_TYPES.consumer) {
+      console.warn("Location puck size can only be applied to type === LOCATION_PUCK_TYPES.earner");
+    }
+
+    if (!showHeading && type === _constants.LOCATION_PUCK_TYPES.earner) {
+      console.warn("Earner location puck must show the heading indicator");
+    }
+  }
+
+  var sharedProps = {
+    heading: heading,
+    confidenceRadius: confidenceRadius,
+    overrides: overrides
+  };
+  return type === _constants.LOCATION_PUCK_TYPES.consumer ? /*#__PURE__*/React.createElement(ConsumerLocationPuck, _extends({}, sharedProps, {
+    showHeading: showHeading
+  })) : /*#__PURE__*/React.createElement(EarnerLocationPuck, _extends({}, sharedProps, {
+    size: size
+  }));
+};
+
+var _default = LocationPuck;
+exports.default = _default;

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

@@ -0,0 +1,18 @@
+/*
+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.
+*/
+// @flow
+import * as React from 'react';
+
+import type { LocationPuckPropsT } from './types';
+
+declare var LocationPuck: (props: LocationPuckPropsT) => React.Node;
+
+export default LocationPuck;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/map-marker/styled-components.d.ts

@@ -1,4 +1,4 @@
-import type { AnchorPositions, LabelEnhancerPosition, BadgeEnhancerSize, BadgePosition, PinHeadSize } from './types';
+import type { AnchorPositions, LabelEnhancerPosition, BadgeEnhancerSize, BadgePosition, PinHeadSize, LocationPuckSize } from './types';
 export declare const getAnchorTransform: (anchor: AnchorPositions, anchorSize: number) => string;
 export declare const StyledDragShadowContainer: import("styletron-react").StyletronComponent<"div", {
     $height: number;
@@ -72,3 +72,19 @@ export declare const StyledContentItem: import("styletron-react").StyletronCompo
     $height: number;
     $size: PinHeadSize;
 }>;
+export declare const LocationPuckContainer: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const consumerLocationShadow: {
+    boxShadow: string;
+};
+export declare const earnerLocationShadow: {
+    boxShadow: string;
+};
+export declare const StyledConsumerLocationPuckCore: import("styletron-react").StyletronComponent<"div", {}>;
+export declare const StyledLocationPuckApproximation: import("styletron-react").StyletronComponent<"div", {
+    $color: string;
+    $radius: number;
+}>;
+export declare const StyledEarnerLocationPuckCore: import("styletron-react").StyletronComponent<"div", {
+    $color: string;
+    $size: LocationPuckSize;
+}>;

package/map-marker/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getAnchorTransform = exports.StyledStrokedLabelContainer = exports.StyledStrokedLabel = exports.StyledPinHead = exports.StyledOuterXXSmallAnchor = exports.StyledOuterXSmallAnchor = exports.StyledNeedle = exports.StyledInnerXXSmallAnchor = exports.StyledInnerXSmallAnchor = exports.StyledFloatingMarkerRoot = exports.StyledFloatingMarkerPinHeadContainer = exports.StyledFloatingMarkerAnchorContainer = exports.StyledFixedMarkerRoot = exports.StyledFixedMarkerDragContainer = exports.StyledDragShadowContainer = exports.StyledDragShadow = exports.StyledContentItem = exports.StyledBadgeEnhancerRoot = exports.RelativeContainer = void 0;
+exports.getAnchorTransform = exports.earnerLocationShadow = exports.consumerLocationShadow = exports.StyledStrokedLabelContainer = exports.StyledStrokedLabel = exports.StyledPinHead = exports.StyledOuterXXSmallAnchor = exports.StyledOuterXSmallAnchor = exports.StyledNeedle = exports.StyledLocationPuckApproximation = exports.StyledInnerXXSmallAnchor = exports.StyledInnerXSmallAnchor = exports.StyledFloatingMarkerRoot = exports.StyledFloatingMarkerPinHeadContainer = exports.StyledFloatingMarkerAnchorContainer = exports.StyledFixedMarkerRoot = exports.StyledFixedMarkerDragContainer = exports.StyledEarnerLocationPuckCore = exports.StyledDragShadowContainer = exports.StyledDragShadow = exports.StyledContentItem = exports.StyledConsumerLocationPuckCore = exports.StyledBadgeEnhancerRoot = exports.RelativeContainer = exports.LocationPuckContainer = void 0;
 
 var _styles = require("../styles");
 
@@ -39,6 +39,7 @@ var StyledDragShadowContainer = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledDragShadowContainer = StyledDragShadowContainer;
 StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
+StyledDragShadowContainer.displayName = 'StyledDragShadowContainer';
 var StyledDragShadow = (0, _styles.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       $background = _ref2.$background,
@@ -54,6 +55,7 @@ var StyledDragShadow = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledDragShadow = StyledDragShadow;
 StyledDragShadow.displayName = "StyledDragShadow";
+StyledDragShadow.displayName = 'StyledDragShadow';
 var StyledNeedle = (0, _styles.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme,
       $background = _ref3.$background,
@@ -67,6 +69,7 @@ var StyledNeedle = (0, _styles.styled)('div', function (_ref3) {
 });
 exports.StyledNeedle = StyledNeedle;
 StyledNeedle.displayName = "StyledNeedle";
+StyledNeedle.displayName = 'StyledNeedle';
 var StyledFloatingMarkerRoot = (0, _styles.styled)('div', function (_ref4) {
   var $size = _ref4.$size;
   return {
@@ -77,6 +80,7 @@ var StyledFloatingMarkerRoot = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.StyledFloatingMarkerRoot = StyledFloatingMarkerRoot;
 StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
+StyledFloatingMarkerRoot.displayName = 'StyledFloatingMarkerRoot';
 var StyledFloatingMarkerPinHeadContainer = (0, _styles.styled)('div', function (_ref5) {
   var $theme = _ref5.$theme,
       $anchor = _ref5.$anchor,
@@ -89,6 +93,7 @@ var StyledFloatingMarkerPinHeadContainer = (0, _styles.styled)('div', function (
 });
 exports.StyledFloatingMarkerPinHeadContainer = StyledFloatingMarkerPinHeadContainer;
 StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
+StyledFloatingMarkerPinHeadContainer.displayName = 'StyledFloatingMarkerPinHeadContainer';
 var StyledFloatingMarkerAnchorContainer = (0, _styles.styled)('div', function () {
   return {
     position: 'absolute'
@@ -96,6 +101,7 @@ var StyledFloatingMarkerAnchorContainer = (0, _styles.styled)('div', function ()
 });
 exports.StyledFloatingMarkerAnchorContainer = StyledFloatingMarkerAnchorContainer;
 StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
+StyledFloatingMarkerAnchorContainer.displayName = 'StyledFloatingMarkerAnchorContainer';
 var StyledFixedMarkerRoot = (0, _styles.styled)('div', function () {
   return {
     display: 'flex',
@@ -105,6 +111,7 @@ var StyledFixedMarkerRoot = (0, _styles.styled)('div', function () {
 });
 exports.StyledFixedMarkerRoot = StyledFixedMarkerRoot;
 StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
+StyledFixedMarkerRoot.displayName = 'StyledFixedMarkerRoot';
 var StyledFixedMarkerDragContainer = (0, _styles.styled)('div', function (_ref6) {
   var $theme = _ref6.$theme,
       $translateAmount = _ref6.$translateAmount,
@@ -119,6 +126,7 @@ var StyledFixedMarkerDragContainer = (0, _styles.styled)('div', function (_ref6)
 });
 exports.StyledFixedMarkerDragContainer = StyledFixedMarkerDragContainer;
 StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
+StyledFixedMarkerDragContainer.displayName = 'StyledFixedMarkerDragContainer';
 var StyledOuterXXSmallAnchor = (0, _styles.styled)('div', function (_ref7) {
   var $theme = _ref7.$theme,
       $round = _ref7.$round,
@@ -137,6 +145,7 @@ var StyledOuterXXSmallAnchor = (0, _styles.styled)('div', function (_ref7) {
 });
 exports.StyledOuterXXSmallAnchor = StyledOuterXXSmallAnchor;
 StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
+StyledOuterXXSmallAnchor.displayName = 'StyledOuterXXSmallAnchor';
 var StyledInnerXXSmallAnchor = (0, _styles.styled)('div', function (_ref8) {
   var $round = _ref8.$round,
       $color = _ref8.$color,
@@ -150,6 +159,7 @@ var StyledInnerXXSmallAnchor = (0, _styles.styled)('div', function (_ref8) {
 });
 exports.StyledInnerXXSmallAnchor = StyledInnerXXSmallAnchor;
 StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
+StyledInnerXXSmallAnchor.displayName = 'StyledInnerXXSmallAnchor';
 var StyledOuterXSmallAnchor = (0, _styles.styled)('div', function (_ref9) {
   var $theme = _ref9.$theme,
       $round = _ref9.$round,
@@ -168,6 +178,7 @@ var StyledOuterXSmallAnchor = (0, _styles.styled)('div', function (_ref9) {
 });
 exports.StyledOuterXSmallAnchor = StyledOuterXSmallAnchor;
 StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
+StyledOuterXSmallAnchor.displayName = 'StyledOuterXSmallAnchor';
 var StyledInnerXSmallAnchor = (0, _styles.styled)('div', function (_ref10) {
   var $round = _ref10.$round,
       $color = _ref10.$color,
@@ -181,6 +192,7 @@ var StyledInnerXSmallAnchor = (0, _styles.styled)('div', function (_ref10) {
 });
 exports.StyledInnerXSmallAnchor = StyledInnerXSmallAnchor;
 StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
+StyledInnerXSmallAnchor.displayName = 'StyledInnerXSmallAnchor';
 var StyledPinHead = (0, _styles.styled)('div', function (_ref11) {
   var $theme = _ref11.$theme,
       $height = _ref11.$height,
@@ -214,6 +226,7 @@ var StyledPinHead = (0, _styles.styled)('div', function (_ref11) {
 });
 exports.StyledPinHead = StyledPinHead;
 StyledPinHead.displayName = "StyledPinHead";
+StyledPinHead.displayName = 'StyledPinHead';
 var StyledStrokedLabelContainer = (0, _styles.styled)('div', function (_ref12) {
   var $position = _ref12.$position,
       $theme = _ref12.$theme,
@@ -259,6 +272,7 @@ var StyledStrokedLabelContainer = (0, _styles.styled)('div', function (_ref12) {
 });
 exports.StyledStrokedLabelContainer = StyledStrokedLabelContainer;
 StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
+StyledStrokedLabelContainer.displayName = 'StyledStrokedLabelContainer';
 var StyledStrokedLabel = (0, _styles.styled)('div', function (_ref13) {
   var $theme = _ref13.$theme,
       $size = _ref13.$size;
@@ -278,6 +292,7 @@ var StyledStrokedLabel = (0, _styles.styled)('div', function (_ref13) {
 });
 exports.StyledStrokedLabel = StyledStrokedLabel;
 StyledStrokedLabel.displayName = "StyledStrokedLabel";
+StyledStrokedLabel.displayName = 'StyledStrokedLabel';
 var StyledBadgeEnhancerRoot = (0, _styles.styled)('div', function (_ref14) {
   var $theme = _ref14.$theme,
       $size = _ref14.$size,
@@ -297,6 +312,7 @@ var StyledBadgeEnhancerRoot = (0, _styles.styled)('div', function (_ref14) {
 });
 exports.StyledBadgeEnhancerRoot = StyledBadgeEnhancerRoot;
 StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
+StyledBadgeEnhancerRoot.displayName = 'StyledBadgeEnhancerRoot';
 var RelativeContainer = (0, _styles.styled)('div', function () {
   return {
     position: 'relative'
@@ -304,6 +320,7 @@ var RelativeContainer = (0, _styles.styled)('div', function () {
 });
 exports.RelativeContainer = RelativeContainer;
 RelativeContainer.displayName = "RelativeContainer";
+RelativeContainer.displayName = 'RelativeContainer';
 var StyledContentItem = (0, _styles.styled)('div', function (_ref15) {
   var $theme = _ref15.$theme,
       $color = _ref15.$color,
@@ -319,4 +336,73 @@ var StyledContentItem = (0, _styles.styled)('div', function (_ref15) {
   });
 });
 exports.StyledContentItem = StyledContentItem;
-StyledContentItem.displayName = "StyledContentItem";
+StyledContentItem.displayName = "StyledContentItem";
+StyledContentItem.displayName = 'StyledContentItem';
+var LocationPuckContainer = (0, _styles.styled)('div', function () {
+  return {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center'
+  };
+});
+exports.LocationPuckContainer = LocationPuckContainer;
+LocationPuckContainer.displayName = "LocationPuckContainer";
+LocationPuckContainer.displayName = 'LocationPuckContainer';
+var consumerLocationShadow = {
+  boxShadow: "0px 2px 4px 0px rgba(67, 76, 123, 0.2)"
+};
+exports.consumerLocationShadow = consumerLocationShadow;
+var earnerLocationShadow = {
+  boxShadow: "0px 3px 5px 0px rgba(67, 76, 123, 0.4)"
+};
+exports.earnerLocationShadow = earnerLocationShadow;
+var StyledConsumerLocationPuckCore = (0, _styles.styled)('div', function (_ref16) {
+  var $theme = _ref16.$theme;
+  return _objectSpread({
+    height: "".concat(12, "px"),
+    width: "".concat(12, "px"),
+    background: $theme.colors.contentAccent,
+    borderRadius: "".concat(100, "px "),
+    position: 'absolute'
+  }, consumerLocationShadow);
+});
+exports.StyledConsumerLocationPuckCore = StyledConsumerLocationPuckCore;
+StyledConsumerLocationPuckCore.displayName = "StyledConsumerLocationPuckCore";
+var StyledLocationPuckApproximation = (0, _styles.styled)('div', function (_ref17) {
+  var $theme = _ref17.$theme,
+      $color = _ref17.$color,
+      $radius = _ref17.$radius;
+  return {
+    background: $color,
+    opacity: 0.12,
+    height: "".concat($radius / 2, "px"),
+    width: "".concat($radius / 2, "px"),
+    borderRadius: "".concat(10000, "px "),
+    position: 'absolute',
+    transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all")
+  };
+});
+exports.StyledLocationPuckApproximation = StyledLocationPuckApproximation;
+StyledLocationPuckApproximation.displayName = "StyledLocationPuckApproximation";
+StyledLocationPuckApproximation.displayName = 'StyledLocationPuckApproximation';
+var StyledEarnerLocationPuckCore = (0, _styles.styled)('div', function (_ref18) {
+  var $theme = _ref18.$theme,
+      $color = _ref18.$color,
+      $size = _ref18.$size;
+  return _objectSpread(_objectSpread({
+    position: 'absolute',
+    transform: "scale(".concat(_constants.EARNER_LOCATION_PUCK_CORE_SCALES[$size], ")"),
+    transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all")
+  }, earnerLocationShadow), {}, {
+    borderRadius: '50%',
+    height: "".concat(72, "px"),
+    width: "".concat(72, "px"),
+    background: $theme.colors.backgroundPrimary,
+    border: "".concat(6, "px solid ", $color),
+    boxSizing: 'border-box'
+  });
+});
+exports.StyledEarnerLocationPuckCore = StyledEarnerLocationPuckCore;
+StyledEarnerLocationPuckCore.displayName = "StyledEarnerLocationPuckCore";
+StyledEarnerLocationPuckCore.displayName = 'StyledEarnerLocationPuckCore';

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

@@ -10,6 +10,7 @@ import {
   BADGE_ENHANCER_STYLES,
   FLOATING_MARKER_ANCHOR_POSITIONS,
   LABEL_SIZES,
+  EARNER_LOCATION_PUCK_CORE_SCALES,
 } from './constants.js';
 
 import type {
@@ -18,6 +19,7 @@ import type {
   BadgeEnhancerSizeT,
   BadgePositionT,
   PinHeadSizeT,
+  LocationPuckSizeT,
 } from './types.js';
 
 export const getAnchorTransform = (anchor: AnchorPositionsT, anchorSize: number) =>
@@ -307,6 +309,62 @@ export const StyledContentItem = styled<{
   };
 });
 
+export const LocationPuckContainer = styled<{}>('div', () => {
+  return {
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  };
+});
+
+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,
+  };
+});
+
+export const StyledLocationPuckApproximation = styled<{
+  $color: string,
+  $radius: number,
+}>('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`,
+  };
+});
+
+export const StyledEarnerLocationPuckCore = styled<{
+  $color: string,
+  $size: LocationPuckSizeT,
+}>('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',
+  };
+});
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;