baseui 10.8.0 → 10.9.2

package/map-marker/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PinHead = exports.InnerXSmallAnchor = exports.OuterXSmallAnchor = exports.FixedMarkerDragContainer = exports.FixedMarkerRoot = exports.FloatingMarkerAnchorContainer = exports.FloatingMarkerPinHeadContainer = exports.FloatingMarkerRoot = exports.Needle = exports.DragShadow = exports.DragShadowContainer = exports.getAnchorTransform = void 0;
+exports.StyledContentItem = exports.RelativeContainer = exports.StyledBadgeEnhancerRoot = exports.StyledStrokedLabel = exports.StyledStrokedLabelContainer = exports.StyledPinHead = exports.StyledInnerXSmallAnchor = exports.StyledOuterXSmallAnchor = exports.StyledInnerXXSmallAnchor = exports.StyledOuterXXSmallAnchor = exports.StyledFixedMarkerDragContainer = exports.StyledFixedMarkerRoot = exports.StyledFloatingMarkerAnchorContainer = exports.StyledFloatingMarkerPinHeadContainer = exports.StyledFloatingMarkerRoot = exports.StyledNeedle = exports.StyledDragShadow = exports.StyledDragShadowContainer = exports.getAnchorTransform = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -22,7 +22,7 @@ var getAnchorTransform = function getAnchorTransform(anchor, anchorSize) {
 };
 
 exports.getAnchorTransform = getAnchorTransform;
-var DragShadowContainer = (0, _index.styled)('div', function (_ref) {
+var StyledDragShadowContainer = (0, _index.styled)('div', function (_ref) {
   var $theme = _ref.$theme,
       $height = _ref.$height,
       $width = _ref.$width,
@@ -37,94 +37,95 @@ var DragShadowContainer = (0, _index.styled)('div', function (_ref) {
     boxShadow: $theme.lighting.shadow600
   };
 });
-exports.DragShadowContainer = DragShadowContainer;
-DragShadowContainer.displayName = "DragShadowContainer";
-var DragShadow = (0, _index.styled)('div', function (_ref2) {
+exports.StyledDragShadowContainer = StyledDragShadowContainer;
+StyledDragShadowContainer.displayName = "StyledDragShadowContainer";
+var StyledDragShadow = (0, _index.styled)('div', function (_ref2) {
   var $theme = _ref2.$theme,
       $background = _ref2.$background,
       $width = _ref2.$width;
   return {
-    background: $background,
+    backgroundColor: $background,
     borderRadius: '50%',
     width: "".concat($width, "px"),
-    height: "".concat(4, "px"),
+    height: '4px',
     position: 'absolute',
     bottom: 0
   };
 });
-exports.DragShadow = DragShadow;
-DragShadow.displayName = "DragShadow";
-var Needle = (0, _index.styled)('div', function (_ref3) {
+exports.StyledDragShadow = StyledDragShadow;
+StyledDragShadow.displayName = "StyledDragShadow";
+var StyledNeedle = (0, _index.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme,
       $background = _ref3.$background,
       $height = _ref3.$height;
   return {
-    background: $background,
+    backgroundColor: $background,
     width: '4px',
     height: "".concat($height, "px"),
     boxShadow: $theme.lighting.shadow600
   };
 });
-exports.Needle = Needle;
-Needle.displayName = "Needle";
-var FloatingMarkerRoot = (0, _index.styled)('div', function () {
+exports.StyledNeedle = StyledNeedle;
+StyledNeedle.displayName = "StyledNeedle";
+var StyledFloatingMarkerRoot = (0, _index.styled)('div', function (_ref4) {
+  var $size = _ref4.$size;
   return {
     position: 'relative',
-    height: "".concat(_constants.xSmallPinheadDimension.height, "px"),
-    width: "".concat(_constants.xSmallPinheadDimension.height, "px")
+    height: "".concat($size, "px"),
+    width: "".concat($size, "px")
   };
 });
-exports.FloatingMarkerRoot = FloatingMarkerRoot;
-FloatingMarkerRoot.displayName = "FloatingMarkerRoot";
-var FloatingMarkerPinHeadContainer = (0, _index.styled)('div', function (_ref4) {
-  var $theme = _ref4.$theme,
-      $anchor = _ref4.$anchor,
-      $anchorSize = _ref4.$anchorSize;
+exports.StyledFloatingMarkerRoot = StyledFloatingMarkerRoot;
+StyledFloatingMarkerRoot.displayName = "StyledFloatingMarkerRoot";
+var StyledFloatingMarkerPinHeadContainer = (0, _index.styled)('div', function (_ref5) {
+  var $theme = _ref5.$theme,
+      $anchor = _ref5.$anchor,
+      $anchorSize = _ref5.$anchorSize;
   return {
     position: 'absolute',
     transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
     transform: getAnchorTransform($anchor, $anchorSize)
   };
 });
-exports.FloatingMarkerPinHeadContainer = FloatingMarkerPinHeadContainer;
-FloatingMarkerPinHeadContainer.displayName = "FloatingMarkerPinHeadContainer";
-var FloatingMarkerAnchorContainer = (0, _index.styled)('div', function () {
+exports.StyledFloatingMarkerPinHeadContainer = StyledFloatingMarkerPinHeadContainer;
+StyledFloatingMarkerPinHeadContainer.displayName = "StyledFloatingMarkerPinHeadContainer";
+var StyledFloatingMarkerAnchorContainer = (0, _index.styled)('div', function () {
   return {
     position: 'absolute'
   };
 });
-exports.FloatingMarkerAnchorContainer = FloatingMarkerAnchorContainer;
-FloatingMarkerAnchorContainer.displayName = "FloatingMarkerAnchorContainer";
-var FixedMarkerRoot = (0, _index.styled)('div', function () {
+exports.StyledFloatingMarkerAnchorContainer = StyledFloatingMarkerAnchorContainer;
+StyledFloatingMarkerAnchorContainer.displayName = "StyledFloatingMarkerAnchorContainer";
+var StyledFixedMarkerRoot = (0, _index.styled)('div', function () {
   return {
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'column'
   };
 });
-exports.FixedMarkerRoot = FixedMarkerRoot;
-FixedMarkerRoot.displayName = "FixedMarkerRoot";
-var FixedMarkerDragContainer = (0, _index.styled)('div', function (_ref5) {
-  var $theme = _ref5.$theme,
-      $translateAmount = _ref5.$translateAmount,
-      $performTranslate = _ref5.$performTranslate;
+exports.StyledFixedMarkerRoot = StyledFixedMarkerRoot;
+StyledFixedMarkerRoot.displayName = "StyledFixedMarkerRoot";
+var StyledFixedMarkerDragContainer = (0, _index.styled)('div', function (_ref6) {
+  var $theme = _ref6.$theme,
+      $translateAmount = _ref6.$translateAmount,
+      $performTranslate = _ref6.$performTranslate;
   return {
-    transform: "translateY(".concat($performTranslate ? '0px' : "".concat($translateAmount, "px"), ")"),
+    transform: "translateY(".concat($performTranslate ? "".concat($translateAmount, "px") : '0px', ")"),
     transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'column'
   };
 });
-exports.FixedMarkerDragContainer = FixedMarkerDragContainer;
-FixedMarkerDragContainer.displayName = "FixedMarkerDragContainer";
-var OuterXSmallAnchor = (0, _index.styled)('div', function (_ref6) {
-  var $theme = _ref6.$theme,
-      $round = _ref6.$round,
-      $background = _ref6.$background,
-      $size = _ref6.$size;
+exports.StyledFixedMarkerDragContainer = StyledFixedMarkerDragContainer;
+StyledFixedMarkerDragContainer.displayName = "StyledFixedMarkerDragContainer";
+var StyledOuterXXSmallAnchor = (0, _index.styled)('div', function (_ref7) {
+  var $theme = _ref7.$theme,
+      $round = _ref7.$round,
+      $background = _ref7.$background,
+      $size = _ref7.$size;
   return {
-    background: $background,
+    backgroundColor: $background,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -134,28 +135,59 @@ var OuterXSmallAnchor = (0, _index.styled)('div', function (_ref6) {
     boxShadow: $theme.lighting.shadow600
   };
 });
-exports.OuterXSmallAnchor = OuterXSmallAnchor;
-OuterXSmallAnchor.displayName = "OuterXSmallAnchor";
-var InnerXSmallAnchor = (0, _index.styled)('div', function (_ref7) {
-  var $round = _ref7.$round,
-      $color = _ref7.$color,
-      $size = _ref7.$size;
+exports.StyledOuterXXSmallAnchor = StyledOuterXXSmallAnchor;
+StyledOuterXXSmallAnchor.displayName = "StyledOuterXXSmallAnchor";
+var StyledInnerXXSmallAnchor = (0, _index.styled)('div', function (_ref8) {
+  var $round = _ref8.$round,
+      $color = _ref8.$color,
+      $size = _ref8.$size;
+  return {
+    backgroundColor: $color,
+    height: "".concat($size, "px"),
+    width: "".concat($size, "px"),
+    borderRadius: $round ? '50%' : 0
+  };
+});
+exports.StyledInnerXXSmallAnchor = StyledInnerXXSmallAnchor;
+StyledInnerXXSmallAnchor.displayName = "StyledInnerXXSmallAnchor";
+var StyledOuterXSmallAnchor = (0, _index.styled)('div', function (_ref9) {
+  var $theme = _ref9.$theme,
+      $round = _ref9.$round,
+      $background = _ref9.$background,
+      $size = _ref9.$size;
+  return {
+    backgroundColor: $background,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: "".concat($size, "px"),
+    width: "".concat($size, "px"),
+    borderRadius: $round ? '50%' : 0,
+    boxShadow: $theme.lighting.shadow600
+  };
+});
+exports.StyledOuterXSmallAnchor = StyledOuterXSmallAnchor;
+StyledOuterXSmallAnchor.displayName = "StyledOuterXSmallAnchor";
+var StyledInnerXSmallAnchor = (0, _index.styled)('div', function (_ref10) {
+  var $round = _ref10.$round,
+      $color = _ref10.$color,
+      $size = _ref10.$size;
   return {
-    background: $color,
+    backgroundColor: $color,
     height: "".concat($size, "px"),
     width: "".concat($size, "px"),
     borderRadius: $round ? '50%' : 0
   };
 });
-exports.InnerXSmallAnchor = InnerXSmallAnchor;
-InnerXSmallAnchor.displayName = "InnerXSmallAnchor";
-var PinHead = (0, _index.styled)('div', function (_ref8) {
-  var $theme = _ref8.$theme,
-      $height = _ref8.$height,
-      $background = _ref8.$background,
-      $gridTemplateColumns = _ref8.$gridTemplateColumns,
-      $type = _ref8.$type,
-      $forceCircle = _ref8.$forceCircle;
+exports.StyledInnerXSmallAnchor = StyledInnerXSmallAnchor;
+StyledInnerXSmallAnchor.displayName = "StyledInnerXSmallAnchor";
+var StyledPinHead = (0, _index.styled)('div', function (_ref11) {
+  var $theme = _ref11.$theme,
+      $height = _ref11.$height,
+      $background = _ref11.$background,
+      $gridTemplateColumns = _ref11.$gridTemplateColumns,
+      $type = _ref11.$type,
+      $forceCircle = _ref11.$forceCircle;
   var sharedStyles = {
     fixed: {
       padding: '0px 12px',
@@ -166,7 +198,7 @@ var PinHead = (0, _index.styled)('div', function (_ref8) {
     }
   };
   return _objectSpread(_objectSpread({
-    background: $background,
+    backgroundColor: $background,
     height: "".concat($height, "px"),
     display: 'grid',
     gridTemplateColumns: $gridTemplateColumns,
@@ -180,5 +212,111 @@ var PinHead = (0, _index.styled)('div', function (_ref8) {
     boxSizing: 'border-box'
   });
 });
-exports.PinHead = PinHead;
-PinHead.displayName = "PinHead";
+exports.StyledPinHead = StyledPinHead;
+StyledPinHead.displayName = "StyledPinHead";
+var StyledStrokedLabelContainer = (0, _index.styled)('div', function (_ref12) {
+  var $position = _ref12.$position,
+      $theme = _ref12.$theme,
+      $labelOffset = _ref12.$labelOffset;
+  var staticLabelOffset = 4;
+  var positions = {
+    top: {
+      left: "calc(50% + ".concat(staticLabelOffset, "px)"),
+      bottom: '100%',
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    bottom: {
+      left: '50%',
+      top: "calc(100% + ".concat(staticLabelOffset, "px + ").concat($labelOffset, "px)"),
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      textAlign: 'center'
+    },
+    right: {
+      left: "calc(100% + ".concat(staticLabelOffset, "px)"),
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-start'
+    },
+    left: {
+      right: "calc(100% + ".concat(staticLabelOffset, "px)"),
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      textAlign: 'right'
+    },
+    none: {}
+  };
+  return _objectSpread({
+    position: 'absolute',
+    width: '0px',
+    height: '0px',
+    pointerEvents: 'none',
+    display: 'flex'
+  }, positions[$position]);
+});
+exports.StyledStrokedLabelContainer = StyledStrokedLabelContainer;
+StyledStrokedLabelContainer.displayName = "StyledStrokedLabelContainer";
+var StyledStrokedLabel = (0, _index.styled)('div', function (_ref13) {
+  var $theme = _ref13.$theme,
+      $size = _ref13.$size;
+  var strokeWidth = 1.5;
+  var strokeColor = $theme.colors.backgroundPrimary;
+  var textShadow = "-".concat(strokeWidth, "px -").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n    0 -").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n    ").concat(strokeWidth, "px -").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n    ").concat(strokeWidth, "px 0 0 ").concat(strokeColor, ",\n    ").concat(strokeWidth, "px ").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n    0 ").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n   -").concat(strokeWidth, "px ").concat(strokeWidth, "px 0 ").concat(strokeColor, ",\n   -").concat(strokeWidth, "px 0 0 ").concat(strokeColor);
+  return _objectSpread(_objectSpread({
+    display: 'flex'
+  }, $theme.typography[_constants.LABEL_SIZES[$size]]), {}, {
+    color: $theme.colors.primaryA,
+    transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
+    textShadow: textShadow,
+    pointerEvents: 'auto',
+    width: 'max-content',
+    maxWidth: '200px'
+  });
+});
+exports.StyledStrokedLabel = StyledStrokedLabel;
+StyledStrokedLabel.displayName = "StyledStrokedLabel";
+var StyledBadgeEnhancerRoot = (0, _index.styled)('div', function (_ref14) {
+  var $theme = _ref14.$theme,
+      $size = _ref14.$size,
+      $position = _ref14.$position;
+  var x = $position.x,
+      y = $position.y;
+  return _objectSpread(_objectSpread({
+    position: 'absolute'
+  }, $theme.typography.LabelSmall), {}, {
+    backgroundColor: $theme.colors.backgroundAccent,
+    color: $theme.colors.primaryB,
+    boxSizing: 'border-box',
+    right: 0,
+    transform: "translate(calc(100% + ".concat(x, "px), ").concat(y, "px)"),
+    transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all")
+  }, _constants.BADGE_ENHANCER_STYLES[$size]);
+});
+exports.StyledBadgeEnhancerRoot = StyledBadgeEnhancerRoot;
+StyledBadgeEnhancerRoot.displayName = "StyledBadgeEnhancerRoot";
+var RelativeContainer = (0, _index.styled)('div', function () {
+  return {
+    position: 'relative'
+  };
+});
+exports.RelativeContainer = RelativeContainer;
+RelativeContainer.displayName = "RelativeContainer";
+var StyledContentItem = (0, _index.styled)('div', function (_ref15) {
+  var $theme = _ref15.$theme,
+      $color = _ref15.$color,
+      $height = _ref15.$height,
+      $size = _ref15.$size;
+  return _objectSpread(_objectSpread({}, $theme.typography[_constants.LABEL_SIZES[$size]]), {}, {
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    lineHeight: "".concat($height, "px"),
+    height: "".concat($height, "px"),
+    color: $color
+  });
+});
+exports.StyledContentItem = StyledContentItem;
+StyledContentItem.displayName = "StyledContentItem";

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

@@ -7,11 +7,18 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import {styled} from '../styles/index.js';
 import {
+  BADGE_ENHANCER_STYLES,
   FLOATING_MARKER_ANCHOR_POSITIONS,
-  xSmallPinheadDimension,
+  LABEL_SIZES,
 } from './constants.js';
 
-import type {AnchorPositionsT} from './types.js';
+import type {
+  AnchorPositionsT,
+  LabelEnhancerPositionT,
+  BadgeEnhancerSizeT,
+  BadgePositionT,
+  PinHeadSizeT,
+} from './types.js';
 
 export const getAnchorTransform = (
   anchor: AnchorPositionsT,
@@ -25,7 +32,7 @@ export const getAnchorTransform = (
     [FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight]: `translate(-100%, -100%)`,
   }[anchor]);
 
-export const DragShadowContainer = styled<{
+export const StyledDragShadowContainer = styled<{
   $height: number,
   $width: number,
   $dragging: boolean,
@@ -39,35 +46,37 @@ export const DragShadowContainer = styled<{
   boxShadow: $theme.lighting.shadow600,
 }));
 
-export const DragShadow = styled<{
+export const StyledDragShadow = styled<{
   $background: string,
   $width: number,
 }>('div', ({$theme, $background, $width}) => ({
-  background: $background,
+  backgroundColor: $background,
   borderRadius: '50%',
   width: `${$width}px`,
-  height: `${4}px`,
+  height: '4px',
   position: 'absolute',
   bottom: 0,
 }));
 
-export const Needle = styled<{
+export const StyledNeedle = styled<{
   $background?: string,
   $height: number,
 }>('div', ({$theme, $background, $height}) => ({
-  background: $background,
+  backgroundColor: $background,
   width: '4px',
   height: `${$height}px`,
   boxShadow: $theme.lighting.shadow600,
 }));
 
-export const FloatingMarkerRoot = styled<{}>('div', () => ({
+export const StyledFloatingMarkerRoot = styled<{
+  $size: number,
+}>('div', ({$size}) => ({
   position: 'relative',
-  height: `${xSmallPinheadDimension.height}px`,
-  width: `${xSmallPinheadDimension.height}px`,
+  height: `${$size}px`,
+  width: `${$size}px`,
 }));
 
-export const FloatingMarkerPinHeadContainer = styled<{
+export const StyledFloatingMarkerPinHeadContainer = styled<{
   $anchor: AnchorPositionsT,
   $anchorSize: number,
 }>('div', ({$theme, $anchor, $anchorSize}) => ({
@@ -76,23 +85,23 @@ export const FloatingMarkerPinHeadContainer = styled<{
   transform: getAnchorTransform($anchor, $anchorSize),
 }));
 
-export const FloatingMarkerAnchorContainer = styled<{}>('div', () => ({
+export const StyledFloatingMarkerAnchorContainer = styled<{}>('div', () => ({
   position: 'absolute',
 }));
 
-export const FixedMarkerRoot = styled<{}>('div', () => ({
+export const StyledFixedMarkerRoot = styled<{}>('div', () => ({
   display: 'flex',
   alignItems: 'center',
   flexDirection: 'column',
 }));
 
-export const FixedMarkerDragContainer = styled<{
+export const StyledFixedMarkerDragContainer = styled<{
   $translateAmount: number,
   $performTranslate: boolean,
 }>('div', ({$theme, $translateAmount, $performTranslate}) => {
   return {
     transform: `translateY(${
-      $performTranslate ? '0px' : `${$translateAmount}px`
+      $performTranslate ? `${$translateAmount}px` : '0px'
     })`,
     transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
     display: 'flex',
@@ -101,12 +110,12 @@ export const FixedMarkerDragContainer = styled<{
   };
 });
 
-export const OuterXSmallAnchor = styled<{
+export const StyledOuterXXSmallAnchor = styled<{
   $round: boolean,
   $background: string,
   $size: number,
 }>('div', ({$theme, $round, $background, $size}) => ({
-  background: $background,
+  backgroundColor: $background,
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -116,18 +125,44 @@ export const OuterXSmallAnchor = styled<{
   boxShadow: $theme.lighting.shadow600,
 }));
 
-export const InnerXSmallAnchor = styled<{
+export const StyledInnerXXSmallAnchor = styled<{
   $round: boolean,
   $color: string,
   $size: number,
 }>('div', ({$round, $color, $size}) => ({
-  background: $color,
+  backgroundColor: $color,
   height: `${$size}px`,
   width: `${$size}px`,
   borderRadius: $round ? '50%' : 0,
 }));
 
-export const PinHead = styled<{
+export const StyledOuterXSmallAnchor = styled<{
+  $round: boolean,
+  $background: string,
+  $size: number,
+}>('div', ({$theme, $round, $background, $size}) => ({
+  backgroundColor: $background,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+  boxShadow: $theme.lighting.shadow600,
+}));
+
+export const StyledInnerXSmallAnchor = styled<{
+  $round: boolean,
+  $color: string,
+  $size: number,
+}>('div', ({$round, $color, $size}) => ({
+  backgroundColor: $color,
+  height: `${$size}px`,
+  width: `${$size}px`,
+  borderRadius: $round ? '50%' : 0,
+}));
+
+export const StyledPinHead = styled<{
   $height: number,
   $background: string,
   $gridTemplateColumns: string,
@@ -154,7 +189,7 @@ export const PinHead = styled<{
     };
 
     return {
-      background: $background,
+      backgroundColor: $background,
       height: `${$height}px`,
       display: 'grid',
       gridTemplateColumns: $gridTemplateColumns,
@@ -172,6 +207,121 @@ export const PinHead = styled<{
   },
 );
 
+export const StyledStrokedLabelContainer = styled<{
+  $position: LabelEnhancerPositionT,
+  $labelOffset: number,
+}>('div', ({$position, $theme, $labelOffset}) => {
+  const staticLabelOffset = 4;
+  const positions = {
+    top: {
+      left: `calc(50% + ${staticLabelOffset}px)`,
+      bottom: '100%',
+      alignItems: 'flex-end',
+      justifyContent: 'center',
+      textAlign: 'center',
+    },
+    bottom: {
+      left: '50%',
+      top: `calc(100% + ${staticLabelOffset}px + ${$labelOffset}px)`,
+      alignItems: 'flex-start',
+      justifyContent: 'center',
+      textAlign: 'center',
+    },
+    right: {
+      left: `calc(100% + ${staticLabelOffset}px)`,
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+    },
+    left: {
+      right: `calc(100% + ${staticLabelOffset}px)`,
+      top: '50%',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      textAlign: 'right',
+    },
+    none: {},
+  };
+  return {
+    position: 'absolute',
+    width: '0px',
+    height: '0px',
+    pointerEvents: 'none',
+    display: 'flex',
+    ...positions[$position],
+  };
+});
+
+export const StyledStrokedLabel = styled<{
+  $stroked: boolean,
+  $position: LabelEnhancerPositionT,
+  $size: PinHeadSizeT,
+}>('div', ({$theme, $size}) => {
+  const strokeWidth = 1.5;
+  const strokeColor = $theme.colors.backgroundPrimary;
+
+  const textShadow = `-${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+    0 -${strokeWidth}px 0 ${strokeColor},
+    ${strokeWidth}px -${strokeWidth}px 0 ${strokeColor},
+    ${strokeWidth}px 0 0 ${strokeColor},
+    ${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+    0 ${strokeWidth}px 0 ${strokeColor},
+   -${strokeWidth}px ${strokeWidth}px 0 ${strokeColor},
+   -${strokeWidth}px 0 0 ${strokeColor}`;
+
+  return {
+    display: 'flex',
+    ...$theme.typography[LABEL_SIZES[$size]],
+    color: $theme.colors.primaryA,
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    textShadow,
+    pointerEvents: 'auto',
+    width: 'max-content',
+    maxWidth: '200px',
+  };
+});
+
+export const StyledBadgeEnhancerRoot = styled<{
+  $size: BadgeEnhancerSizeT,
+  $position: BadgePositionT,
+}>('div', ({$theme, $size, $position}) => {
+  const {x, y} = $position;
+  return {
+    position: 'absolute',
+    ...$theme.typography.LabelSmall,
+    backgroundColor: $theme.colors.backgroundAccent,
+    color: $theme.colors.primaryB,
+    boxSizing: 'border-box',
+    right: 0,
+    transform: `translate(calc(100% + ${x}px), ${y}px)`,
+
+    transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
+    ...BADGE_ENHANCER_STYLES[$size],
+  };
+});
+
+export const RelativeContainer = styled<{}>('div', () => {
+  return {
+    position: 'relative',
+  };
+});
+
+export const StyledContentItem = styled<{
+  $color: string,
+  $height: number,
+  $size: PinHeadSizeT,
+}>('div', ({$theme, $color, $height, $size}) => {
+  return {
+    ...$theme.typography[LABEL_SIZES[$size]],
+    display: 'flex',
+    alignItems: 'center',
+    textAlign: 'center',
+    lineHeight: `${$height}px`,
+    height: `${$height}px`,
+    color: $color,
+  };
+});
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;