baseui 10.8.0 → 10.9.2

package/map-marker/label-enhancer.js.flow

@@ -0,0 +1,63 @@
+/*
+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 {getOverrides} from '../helpers/overrides.js';
+import {
+  RelativeContainer,
+  StyledStrokedLabel,
+  StyledStrokedLabelContainer,
+} from './styled-components.js';
+import {LABEL_ENHANCER_POSITIONS} from './constants.js';
+import type {LabelEhancerComponentT} from './types.js';
+
+const LabelEnhancer = ({
+  labelEnhancerContent,
+  labelEnhancerPosition,
+  needleHeight,
+  size,
+  overrides = {},
+}: LabelEhancerComponentT) => {
+  if (
+    !labelEnhancerPosition ||
+    labelEnhancerPosition === LABEL_ENHANCER_POSITIONS.none
+  ) {
+    return null;
+  }
+  if (!labelEnhancerContent) {
+    return null;
+  }
+
+  const [StrokedLabelContainer, strokedLabelContainerProps] = getOverrides(
+    overrides.LabelEnhancerContainer,
+    StyledStrokedLabelContainer,
+  );
+
+  const [StrokedLabel, strokedLabelProps] = getOverrides(
+    overrides.LabelEnhancer,
+    StyledStrokedLabel,
+  );
+  return (
+    <StrokedLabelContainer
+      $position={labelEnhancerPosition}
+      $labelOffset={needleHeight}
+      {...strokedLabelContainerProps}
+    >
+      <RelativeContainer>
+        <StrokedLabel $size={size} {...strokedLabelProps}>
+          {labelEnhancerContent}
+        </StrokedLabel>
+      </RelativeContainer>
+    </StrokedLabelContainer>
+  );
+};
+
+export default LabelEnhancer;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/map-marker/needle.js

@@ -0,0 +1,54 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _overrides = require("../helpers/overrides.js");
+
+var _constants = require("./constants.js");
+
+var _styledComponents = require("./styled-components.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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 || 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) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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 Needle = function Needle(_ref) {
+  var size = _ref.size,
+      background = _ref.background,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.Needle, _styledComponents.StyledNeedle),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Needle = _getOverrides2[0],
+      needleProps = _getOverrides2[1];
+
+  return /*#__PURE__*/React.createElement(Needle, _extends({
+    $background: background,
+    $height: _constants.NEEDLE_HEIGHTS[size]
+  }, needleProps));
+};
+
+var _default = Needle;
+exports.default = _default;

package/map-marker/needle.js.flow

@@ -0,0 +1,29 @@
+/*
+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 {getOverrides} from '../helpers/overrides.js';
+import {NEEDLE_HEIGHTS} from './constants.js';
+import {StyledNeedle} from './styled-components.js';
+import type {NeedlePropsT} from './types.js';
+
+const Needle = ({size, background, overrides = {}}: NeedlePropsT) => {
+  const [Needle, needleProps] = getOverrides(overrides.Needle, StyledNeedle);
+  return (
+    <Needle
+      $background={background}
+      $height={NEEDLE_HEIGHTS[size]}
+      {...needleProps}
+    />
+  );
+};
+
+export default Needle;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/map-marker/pin-head.js

@@ -5,18 +5,22 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports._ContentItem = void 0;
+exports.default = void 0;
 
 var React = _interopRequireWildcard(require("react"));
 
-var _index = require("../styles/index.js");
-
 var _overrides = require("../helpers/overrides.js");
 
 var _styledComponents = require("./styled-components.js");
 
 var _constants = require("./constants.js");
 
+var _badgeEnhancer = _interopRequireDefault(require("./badge-enhancer.js"));
+
+var _labelEnhancer = _interopRequireDefault(require("./label-enhancer.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (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; }
@@ -35,57 +39,26 @@ function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
-
-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; }
-
-var _ContentItem = (0, _index.styled)('div', function (_ref) {
-  var _match;
-
-  var $theme = _ref.$theme,
-      $color = _ref.$color,
-      $height = _ref.$height,
-      $size = _ref.$size;
-  var match = (_match = {}, _defineProperty(_match, _constants.PINHEAD_SIZES_SHAPES.xSmallCircle, 'LabelSmall'), _defineProperty(_match, _constants.PINHEAD_SIZES_SHAPES.xSmallSquare, 'LabelSmall'), _defineProperty(_match, _constants.PINHEAD_SIZES_SHAPES.small, 'LabelSmall'), _defineProperty(_match, _constants.PINHEAD_SIZES_SHAPES.medium, 'LabelMedium'), _defineProperty(_match, _constants.PINHEAD_SIZES_SHAPES.large, 'LabelLarge'), _match);
-  return _objectSpread(_objectSpread({}, $theme.typography[match[$size]]), {}, {
-    display: 'flex',
-    alignItems: 'center',
-    textAlign: 'center',
-    lineHeight: "".concat($height, "px"),
-    height: "".concat($height, "px"),
-    color: $color
-  });
-});
-
-exports._ContentItem = _ContentItem;
-_ContentItem.displayName = "_ContentItem";
-
-var PinHead = function PinHead(_ref2) {
-  var _ref2$size = _ref2.size,
-      size = _ref2$size === void 0 ? _constants.PINHEAD_SIZES_SHAPES.medium : _ref2$size,
-      _ref2$label = _ref2.label,
-      label = _ref2$label === void 0 ? '' : _ref2$label,
-      StartEnhancer = _ref2.startEnhancer,
-      EndEnhancer = _ref2.endEnhancer,
-      color = _ref2.color,
-      background = _ref2.background,
-      _ref2$type = _ref2.type,
-      type = _ref2$type === void 0 ? _constants.PINHEAD_TYPES.fixed : _ref2$type,
-      anchorType = _ref2.anchorType,
-      _ref2$overrides = _ref2.overrides,
-      overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides;
-
-  var _useStyletron = (0, _index.useStyletron)(),
-      _useStyletron2 = _slicedToArray(_useStyletron, 2),
-      theme = _useStyletron2[1];
-
-  var _theme$colors = theme.colors,
-      backgroundPrimary = _theme$colors.backgroundPrimary,
-      primaryA = _theme$colors.primaryA;
-  color = color || backgroundPrimary;
-  background = background || primaryA;
+var PinHead = function PinHead(_ref) {
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? _constants.PINHEAD_SIZES_SHAPES.medium : _ref$size,
+      _ref$label = _ref.label,
+      label = _ref$label === void 0 ? '' : _ref$label,
+      StartEnhancer = _ref.startEnhancer,
+      EndEnhancer = _ref.endEnhancer,
+      color = _ref.color,
+      background = _ref.background,
+      _ref$type = _ref.type,
+      type = _ref$type === void 0 ? _constants.PINHEAD_TYPES.fixed : _ref$type,
+      anchorType = _ref.anchorType,
+      _ref$needle = _ref.needle,
+      needle = _ref$needle === void 0 ? _constants.NEEDLE_SIZES.none : _ref$needle,
+      labelEnhancerContent = _ref.labelEnhancerContent,
+      labelEnhancerPosition = _ref.labelEnhancerPosition,
+      badgeEnhancerSize = _ref.badgeEnhancerSize,
+      badgeEnhancerContent = _ref.badgeEnhancerContent,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
   var activeElements = [label, StartEnhancer, EndEnhancer].filter(function (x) {
     return x;
   });
@@ -97,40 +70,78 @@ var PinHead = function PinHead(_ref2) {
       height = _PINHEAD_DIMENSIONS$s.height,
       icon = _PINHEAD_DIMENSIONS$s.icon;
 
-  var _getOverrides = (0, _overrides.getOverrides)(overrides.PinHead, _styledComponents.PinHead),
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.PinHead, _styledComponents.StyledPinHead),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
       PinHead = _getOverrides2[0],
       pinHeadProps = _getOverrides2[1];
 
-  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.PinHeadContent, _ContentItem),
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.PinHeadContent, _styledComponents.StyledContentItem),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
       ContentItem = _getOverrides4[0],
       contentItemProps = _getOverrides4[1];
 
-  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.InnerAnchor, _styledComponents.InnerXSmallAnchor),
+  var _getOverrides5 = (0, _overrides.getOverrides)(overrides.InnerAnchor, _styledComponents.StyledInnerXXSmallAnchor),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
-      InnerXSmallAnchor = _getOverrides6[0],
-      innerXSmallAnchorProps = _getOverrides6[1];
+      InnerXXSmallAnchor = _getOverrides6[0],
+      innerXXSmallAnchorProps = _getOverrides6[1];
 
-  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.OuterAnchor, _styledComponents.OuterXSmallAnchor),
+  var _getOverrides7 = (0, _overrides.getOverrides)(overrides.OuterAnchor, _styledComponents.StyledOuterXXSmallAnchor),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
-      OuterXSmallAnchor = _getOverrides8[0],
-      outerXSmallAnchorProps = _getOverrides8[1];
+      OuterXXSmallAnchor = _getOverrides8[0],
+      outerXXSmallAnchorProps = _getOverrides8[1];
+
+  var _getOverrides9 = (0, _overrides.getOverrides)(overrides.InnerAnchor, _styledComponents.StyledInnerXSmallAnchor),
+      _getOverrides10 = _slicedToArray(_getOverrides9, 2),
+      InnerXSmallAnchor = _getOverrides10[0],
+      innerXSmallAnchorProps = _getOverrides10[1];
+
+  var _getOverrides11 = (0, _overrides.getOverrides)(overrides.OuterAnchor, _styledComponents.StyledOuterXSmallAnchor),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      OuterXSmallAnchor = _getOverrides12[0],
+      outerXSmallAnchorProps = _getOverrides12[1];
+
+  var badge = /*#__PURE__*/React.createElement(_badgeEnhancer.default, {
+    markerType: type,
+    pinHeadSize: size,
+    badgeEnhancerSize: badgeEnhancerSize,
+    badgeEnhancerContent: badgeEnhancerContent,
+    overrides: overrides
+  });
 
-  if (type === _constants.PINHEAD_TYPES.fixed && (size === _constants.PINHEAD_SIZES_SHAPES.xSmallSquare || size === _constants.PINHEAD_SIZES_SHAPES.xSmallCircle)) {
-    var round = size === _constants.PINHEAD_SIZES_SHAPES.xSmallCircle;
-    return /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
+  if (type === _constants.PINHEAD_TYPES.fixed && (size === _constants.PINHEAD_SIZES_SHAPES.xxSmallCircle || size === _constants.PINHEAD_SIZES_SHAPES.xxSmallSquare)) {
+    var round = size === _constants.PINHEAD_SIZES_SHAPES.xxSmallCircle;
+    return /*#__PURE__*/React.createElement(OuterXXSmallAnchor, _extends({
       $round: round,
       $background: background,
       $size: height
-    }, outerXSmallAnchorProps), /*#__PURE__*/React.createElement(InnerXSmallAnchor, _extends({
+    }, outerXXSmallAnchorProps), /*#__PURE__*/React.createElement(InnerXXSmallAnchor, _extends({
       $color: color,
       $round: round,
       $size: icon
-    }, innerXSmallAnchorProps)));
+    }, innerXXSmallAnchorProps)));
+  }
+
+  if (type === _constants.PINHEAD_TYPES.fixed && (size === _constants.PINHEAD_SIZES_SHAPES.xSmallSquare || size === _constants.PINHEAD_SIZES_SHAPES.xSmallCircle)) {
+    var _round = size === _constants.PINHEAD_SIZES_SHAPES.xSmallCircle;
+
+    return /*#__PURE__*/React.createElement(_styledComponents.RelativeContainer, null, badge, /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
+      $round: _round,
+      $background: background,
+      $size: height
+    }, outerXSmallAnchorProps), /*#__PURE__*/React.createElement(InnerXSmallAnchor, _extends({
+      $color: color,
+      $round: _round,
+      $size: icon
+    }, innerXSmallAnchorProps))));
   }
 
-  return /*#__PURE__*/React.createElement(PinHead, _extends({
+  return /*#__PURE__*/React.createElement(_styledComponents.RelativeContainer, null, /*#__PURE__*/React.createElement(_labelEnhancer.default, {
+    labelEnhancerContent: labelEnhancerContent,
+    labelEnhancerPosition: labelEnhancerPosition,
+    needleHeight: _constants.NEEDLE_HEIGHTS[needle],
+    size: size,
+    overrides: overrides
+  }), badge, /*#__PURE__*/React.createElement(PinHead, _extends({
     $background: background,
     $height: height,
     $gridTemplateColumns: gridTemplateColumns,
@@ -152,7 +163,7 @@ var PinHead = function PinHead(_ref2) {
     $size: size
   }, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
     size: icon
-  })));
+  }))));
 };
 
 var _default = PinHead;

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

@@ -6,42 +6,26 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {useStyletron, styled} from '../styles/index.js';
 import {getOverrides} from '../helpers/overrides.js';
 import {
-  InnerXSmallAnchor as StyledInnerXSmallAnchor,
-  OuterXSmallAnchor as StyledOuterXSmallAnchor,
-  PinHead as StyledPinHead,
+  StyledInnerXXSmallAnchor,
+  StyledOuterXXSmallAnchor,
+  StyledInnerXSmallAnchor,
+  StyledOuterXSmallAnchor,
+  StyledPinHead,
+  RelativeContainer,
+  StyledContentItem,
 } from './styled-components.js';
 import {
   PINHEAD_DIMENSIONS,
   PINHEAD_TYPES,
   PINHEAD_SIZES_SHAPES,
+  NEEDLE_HEIGHTS,
+  NEEDLE_SIZES,
 } from './constants.js';
-import type {PinHeadPropsT, PinHeadSizeT} from './types.js';
-
-export const _ContentItem = styled<{
-  $color: string,
-  $height: number,
-  $size: PinHeadSizeT,
-}>('div', ({$theme, $color, $height, $size}) => {
-  const match = {
-    [PINHEAD_SIZES_SHAPES.xSmallCircle]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.xSmallSquare]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.small]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.medium]: 'LabelMedium',
-    [PINHEAD_SIZES_SHAPES.large]: 'LabelLarge',
-  };
-  return {
-    ...$theme.typography[match[$size]],
-    display: 'flex',
-    alignItems: 'center',
-    textAlign: 'center',
-    lineHeight: `${$height}px`,
-    height: `${$height}px`,
-    color: $color,
-  };
-});
+import BadgeEnhancer from './badge-enhancer.js';
+import LabelEnhancer from './label-enhancer.js';
+import type {PinHeadPropsT} from './types.js';
 
 const PinHead = ({
   size = PINHEAD_SIZES_SHAPES.medium,
@@ -52,16 +36,14 @@ const PinHead = ({
   background,
   type = PINHEAD_TYPES.fixed,
   anchorType,
+  needle = NEEDLE_SIZES.none,
+  labelEnhancerContent,
+  labelEnhancerPosition,
+  badgeEnhancerSize,
+  badgeEnhancerContent,
+
   overrides = {},
 }: PinHeadPropsT) => {
-  const [, theme] = useStyletron();
-  const {
-    colors: {backgroundPrimary, primaryA},
-  } = theme;
-
-  color = color || backgroundPrimary;
-  background = background || primaryA;
-
   const activeElements = [label, StartEnhancer, EndEnhancer].filter(x => x);
   const gridTemplateColumns = activeElements.map(() => 'auto').join(' ');
   const forceCircle = activeElements.length === 1 && !label;
@@ -73,8 +55,18 @@ const PinHead = ({
   );
   const [ContentItem, contentItemProps] = getOverrides(
     overrides.PinHeadContent,
-    _ContentItem,
+    StyledContentItem,
+  );
+
+  const [InnerXXSmallAnchor, innerXXSmallAnchorProps] = getOverrides(
+    overrides.InnerAnchor,
+    StyledInnerXXSmallAnchor,
+  );
+  const [OuterXXSmallAnchor, outerXXSmallAnchorProps] = getOverrides(
+    overrides.OuterAnchor,
+    StyledOuterXXSmallAnchor,
   );
+
   const [InnerXSmallAnchor, innerXSmallAnchorProps] = getOverrides(
     overrides.InnerAnchor,
     StyledInnerXSmallAnchor,
@@ -84,68 +76,114 @@ const PinHead = ({
     StyledOuterXSmallAnchor,
   );
 
+  const badge = (
+    <BadgeEnhancer
+      markerType={type}
+      pinHeadSize={size}
+      badgeEnhancerSize={badgeEnhancerSize}
+      badgeEnhancerContent={badgeEnhancerContent}
+      overrides={overrides}
+    />
+  );
   if (
     type === PINHEAD_TYPES.fixed &&
-    (size === PINHEAD_SIZES_SHAPES.xSmallSquare ||
-      size === PINHEAD_SIZES_SHAPES.xSmallCircle)
+    (size === PINHEAD_SIZES_SHAPES.xxSmallCircle ||
+      size === PINHEAD_SIZES_SHAPES.xxSmallSquare)
   ) {
-    const round = size === PINHEAD_SIZES_SHAPES.xSmallCircle;
+    const round = size === PINHEAD_SIZES_SHAPES.xxSmallCircle;
     return (
-      <OuterXSmallAnchor
+      <OuterXXSmallAnchor
         $round={round}
         $background={background}
         $size={height}
-        {...outerXSmallAnchorProps}
+        {...outerXXSmallAnchorProps}
       >
-        <InnerXSmallAnchor
+        <InnerXXSmallAnchor
           $color={color}
           $round={round}
           $size={icon}
-          {...innerXSmallAnchorProps}
+          {...innerXXSmallAnchorProps}
         />
-      </OuterXSmallAnchor>
+      </OuterXXSmallAnchor>
     );
   }
-  return (
-    <PinHead
-      $background={background}
-      $height={height}
-      $gridTemplateColumns={gridTemplateColumns}
-      $forceCircle={forceCircle}
-      $type={type}
-      {...pinHeadProps}
-    >
-      {StartEnhancer && (
-        <ContentItem
-          $height={height}
-          $color={color}
-          $size={size}
-          {...contentItemProps}
-        >
-          <StartEnhancer size={icon} />
-        </ContentItem>
-      )}
-      {label && (
-        <ContentItem
-          $height={height}
-          $color={color}
-          $size={size}
-          {...contentItemProps}
-        >
-          {label}
-        </ContentItem>
-      )}
-      {EndEnhancer && (
-        <ContentItem
-          $height={height}
-          $color={color}
-          $size={size}
-          {...contentItemProps}
+
+  if (
+    type === PINHEAD_TYPES.fixed &&
+    (size === PINHEAD_SIZES_SHAPES.xSmallSquare ||
+      size === PINHEAD_SIZES_SHAPES.xSmallCircle)
+  ) {
+    const round = size === PINHEAD_SIZES_SHAPES.xSmallCircle;
+    return (
+      <RelativeContainer>
+        {badge}
+        <OuterXSmallAnchor
+          $round={round}
+          $background={background}
+          $size={height}
+          {...outerXSmallAnchorProps}
         >
-          <EndEnhancer size={icon} />
-        </ContentItem>
-      )}
-    </PinHead>
+          <InnerXSmallAnchor
+            $color={color}
+            $round={round}
+            $size={icon}
+            {...innerXSmallAnchorProps}
+          />
+        </OuterXSmallAnchor>
+      </RelativeContainer>
+    );
+  }
+
+  return (
+    <RelativeContainer>
+      <LabelEnhancer
+        labelEnhancerContent={labelEnhancerContent}
+        labelEnhancerPosition={labelEnhancerPosition}
+        needleHeight={NEEDLE_HEIGHTS[needle]}
+        size={size}
+        overrides={overrides}
+      />
+      {badge}
+      <PinHead
+        $background={background}
+        $height={height}
+        $gridTemplateColumns={gridTemplateColumns}
+        $forceCircle={forceCircle}
+        $type={type}
+        {...pinHeadProps}
+      >
+        {StartEnhancer && (
+          <ContentItem
+            $height={height}
+            $color={color}
+            $size={size}
+            {...contentItemProps}
+          >
+            <StartEnhancer size={icon} />
+          </ContentItem>
+        )}
+        {label && (
+          <ContentItem
+            $height={height}
+            $color={color}
+            $size={size}
+            {...contentItemProps}
+          >
+            {label}
+          </ContentItem>
+        )}
+        {EndEnhancer && (
+          <ContentItem
+            $height={height}
+            $color={color}
+            $size={size}
+            {...contentItemProps}
+          >
+            <EndEnhancer size={icon} />
+          </ContentItem>
+        )}
+      </PinHead>
+    </RelativeContainer>
   );
 };
 export default PinHead;