baseui 10.8.0 → 10.9.2

package/form-control/form-control.js.flow

@@ -11,10 +11,16 @@ import {getOverride, getOverrideProps} from '../helpers/overrides.js';
 import {UIDConsumer} from 'react-uid';
 import {
   Label as StyledLabel,
+  LabelEndEnhancer as StyledLabelEndEnhancer,
+  LabelContainer as StyledLabelContainer,
   Caption as StyledCaption,
   ControlContainer as StyledControlContainer,
 } from './styled-components.js';
-import type {FormControlPropsT, FormControlStateT} from './types.js';
+import type {
+  FormControlPropsT,
+  FormControlStateT,
+  StylePropsT,
+} from './types.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (error && typeof error !== 'boolean') {
@@ -41,12 +47,15 @@ export default class FormControl extends React.Component<
     label: null,
     caption: null,
     disabled: false,
+    counter: false,
   };
 
   render() {
     const {
       overrides: {
         Label: LabelOverride,
+        LabelEndEnhancer: LabelEndEnhancerOverride,
+        LabelContainer: LabelContainerOverride,
         Caption: CaptionOverride,
         ControlContainer: ControlContainerOverride,
       },
@@ -57,17 +66,22 @@ export default class FormControl extends React.Component<
       positive,
       htmlFor,
       children,
+      counter,
     } = this.props;
 
     const onlyChildProps = React.Children.only(children).props;
 
-    const sharedProps = {
+    const sharedProps: StylePropsT = {
       $disabled: !!disabled,
       $error: !!error,
       $positive: !!positive,
     };
 
     const Label = getOverride(LabelOverride) || StyledLabel;
+    const LabelEndEnhancer =
+      getOverride(LabelEndEnhancerOverride) || StyledLabelEndEnhancer;
+    const LabelContainer =
+      getOverride(LabelContainerOverride) || StyledLabelContainer;
     const Caption = getOverride(CaptionOverride) || StyledCaption;
     const ControlContainer =
       getOverride(ControlContainerOverride) || StyledControlContainer;
@@ -83,17 +97,75 @@ export default class FormControl extends React.Component<
       }
     }
 
+    let labelEndEnhancer = this.props.labelEndEnhancer;
+    if (counter) {
+      // inferred values are preferred but if the user specifies the value
+      // that is then used as the default.
+      let maxLength: ?number = null;
+      let length: ?number = null;
+      let counterError: ?boolean = null;
+
+      if (typeof counter === 'object') {
+        length = counter.length;
+        maxLength = counter.maxLength;
+        counterError = counter.error;
+      }
+
+      maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
+      if (length == null && typeof onlyChildProps.value === 'string') {
+        length = onlyChildProps.value.length;
+      }
+
+      if (length == null) {
+        length = 0;
+        if (__DEV__) {
+          console.warn(
+            `[FromControl] \`length\` must either be explicitly set via \`counter\` object property, or \`value\` string property on the child component.`,
+          );
+        }
+      }
+
+      sharedProps.$length = length;
+      if (maxLength == null) {
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}`;
+      } else {
+        sharedProps.$maxLength = length;
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}/${maxLength}`;
+        if (length > maxLength && counterError == null) counterError = true;
+      }
+
+      if (counterError) {
+        sharedProps.$error = true;
+        sharedProps.$counterError = true;
+      }
+    }
+
     return (
       <React.Fragment>
         {label && (
-          <Label
-            data-baseweb="form-control-label"
-            htmlFor={htmlFor || onlyChildProps.id}
+          <LabelContainer
             {...sharedProps}
-            {...getOverrideProps(LabelOverride)}
+            {...getOverrideProps(LabelContainerOverride)}
           >
-            {typeof label === 'function' ? label(sharedProps) : label}
-          </Label>
+            <Label
+              data-baseweb="form-control-label"
+              htmlFor={htmlFor || onlyChildProps.id}
+              {...sharedProps}
+              {...getOverrideProps(LabelOverride)}
+            >
+              {typeof label === 'function' ? label(sharedProps) : label}
+            </Label>
+            {labelEndEnhancer && (
+              <LabelEndEnhancer
+                {...sharedProps}
+                {...getOverrideProps(LabelEndEnhancerOverride)}
+              >
+                {typeof labelEndEnhancer === 'function'
+                  ? labelEndEnhancer(sharedProps)
+                  : labelEndEnhancer}
+              </LabelEndEnhancer>
+            )}
+          </LabelContainer>
         )}
         <UIDConsumer>
           {captionId => (
@@ -114,11 +186,11 @@ export default class FormControl extends React.Component<
                   error:
                     typeof onlyChildProps.error !== 'undefined'
                       ? onlyChildProps.error
-                      : error,
+                      : sharedProps.$error,
                   positive:
                     typeof onlyChildProps.positive !== 'undefined'
                       ? onlyChildProps.positive
-                      : positive,
+                      : sharedProps.$positive,
                 });
               })}
               {(caption || error || positive) && (

package/form-control/index.d.ts

@@ -25,6 +25,7 @@ export interface FormControlProps {
   error?: boolean | React.ReactNode;
   positive?: React.ReactNode;
   htmlFor?: string;
+  counter?: boolean | {length?: number; maxLength?: number; error?: boolean};
 }
 
 export class FormControl extends React.Component<

package/form-control/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ControlContainer = exports.Caption = exports.Label = void 0;
+exports.ControlContainer = exports.Caption = exports.LabelEndEnhancer = exports.LabelContainer = exports.Label = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -17,7 +17,6 @@ var Label = (0, _index.styled)('label', function (props) {
   var $disabled = props.$disabled,
       _props$$theme = props.$theme,
       colors = _props$$theme.colors,
-      sizing = _props$$theme.sizing,
       typography = _props$$theme.typography;
   return _objectSpread(_objectSpread({}, typography.font250), {}, {
     fontWeight: 500,
@@ -27,15 +26,38 @@ var Label = (0, _index.styled)('label', function (props) {
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
-    paddingLeft: 0,
+    paddingLeft: 0
+  });
+});
+exports.Label = Label;
+Label.displayName = "Label";
+var LabelContainer = (0, _index.styled)('span', function (_ref) {
+  var sizing = _ref.$theme.sizing;
+  return {
+    display: 'flex',
+    width: '100%',
     marginTop: sizing.scale300,
     marginRight: 0,
     marginBottom: sizing.scale300,
     marginLeft: 0
+  };
+});
+exports.LabelContainer = LabelContainer;
+LabelContainer.displayName = "LabelContainer";
+var LabelEndEnhancer = (0, _index.styled)('span', function (_ref2) {
+  var $disabled = _ref2.$disabled,
+      $counterError = _ref2.$counterError,
+      _ref2$$theme = _ref2.$theme,
+      colors = _ref2$$theme.colors,
+      typography = _ref2$$theme.typography;
+  return _objectSpread(_objectSpread({}, typography.font100), {}, {
+    flex: 0,
+    width: '100%',
+    color: $counterError ? colors.negative400 : $disabled ? colors.contentSecondary : colors.contentPrimary
   });
 });
-exports.Label = Label;
-Label.displayName = "Label";
+exports.LabelEndEnhancer = LabelEndEnhancer;
+LabelEndEnhancer.displayName = "LabelEndEnhancer";
 var Caption = (0, _index.styled)('div', function (props) {
   var $error = props.$error,
       $positive = props.$positive,

package/form-control/styled-components.js.flow

@@ -12,7 +12,7 @@ import type {StylePropsT} from './types.js';
 export const Label = styled<StylePropsT>('label', props => {
   const {
     $disabled,
-    $theme: {colors, sizing, typography},
+    $theme: {colors, typography},
   } = props;
   return {
     ...typography.font250,
@@ -24,12 +24,34 @@ export const Label = styled<StylePropsT>('label', props => {
     paddingRight: 0,
     paddingBottom: 0,
     paddingLeft: 0,
+  };
+});
+
+export const LabelContainer = styled<StylePropsT>(
+  'span',
+  ({$theme: {sizing}}) => ({
+    display: 'flex',
+    width: '100%',
     marginTop: sizing.scale300,
     marginRight: 0,
     marginBottom: sizing.scale300,
     marginLeft: 0,
-  };
-});
+  }),
+);
+
+export const LabelEndEnhancer = styled<StylePropsT>(
+  'span',
+  ({$disabled, $counterError, $theme: {colors, typography}}) => ({
+    ...typography.font100,
+    flex: 0,
+    width: '100%',
+    color: $counterError
+      ? colors.negative400
+      : $disabled
+      ? colors.contentSecondary
+      : colors.contentPrimary,
+  }),
+);
 
 export const Caption = styled<StylePropsT>('div', props => {
   const {

package/form-control/types.js.flow

@@ -13,15 +13,20 @@ export type FormControlStateT = {|
   captionId: string,
 |};
 
+export type OverridesT = {
+  /** Customizes the label element. */
+  Label?: OverrideT,
+  /** Customizes the label end enhancer element. */
+  LabelEndEnhancer?: OverrideT,
+  /** Customizes the label container element. */
+  LabelContainer?: OverrideT,
+  /** Customizes the caption element. */
+  Caption?: OverrideT,
+  /** Customizes the container element. */
+  ControlContainer?: OverrideT,
+};
 export type FormControlPropsT = {
-  overrides: {
-    /** Customizes the label element. */
-    Label?: OverrideT,
-    /** Customizes the caption element. */
-    Caption?: OverrideT,
-    /** Customizes the container element. */
-    ControlContainer?: OverrideT,
-  },
+  overrides: OverridesT,
   /** A label rendered above the input field. */
   label: ?(React.Node | ((props: {}) => React.Node)),
   /** A caption rendered below the input field. */
@@ -34,6 +39,10 @@ export type FormControlPropsT = {
   positive?: React.Node | ((props: {}) => React.Node),
   /** The id of the related form element. Defaults to the id property of the child, if any. */
   htmlFor?: string,
+  /** Adds a label end enhancer to the label */
+  labelEndEnhancer?: ?(React.Node | ((props: {}) => React.Node)),
+  /** Adds a length counter to the form control. If your input does not have a "string" value exposed as a prop, you provide the length as an object.*/
+  counter?: boolean | {|length?: number, maxLength?: number, error?: boolean|},
   children: React.Node,
 };
 
@@ -41,6 +50,9 @@ export type StylePropsT = {
   $disabled?: boolean,
   $error?: boolean,
   $positive?: boolean,
+  $length?: number,
+  $maxLength?: number,
+  $counterError?: boolean,
 };
 
 declare var __DEV__: boolean;

package/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "BaseProvider", {
     return _baseProvider.default;
   }
 });
+Object.defineProperty(exports, "getOverrides", {
+  enumerable: true,
+  get: function get() {
+    return _overrides.getOverrides;
+  }
+});
 Object.defineProperty(exports, "mergeOverrides", {
   enumerable: true,
   get: function get() {

package/index.js.flow

@@ -30,7 +30,7 @@ export {
 } from './themes/index.js';
 export {default as LocaleProvider} from './locale/index.js';
 export {default as BaseProvider} from './helpers/base-provider.js';
-export {mergeOverrides} from './helpers/overrides.js';
+export {getOverrides, mergeOverrides} from './helpers/overrides.js';
 export type {PrimitivesT} from './themes/types.js';
 export type {ThemeT} from './styles/types.js';
 

package/map-marker/badge-enhancer.js

@@ -0,0 +1,90 @@
+"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 _styledComponents = require("./styled-components.js");
+
+var _constants = require("./constants.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 BadgeEnhancer = function BadgeEnhancer(_ref) {
+  var pinHeadSize = _ref.pinHeadSize,
+      markerType = _ref.markerType,
+      _ref$badgeEnhancerSiz = _ref.badgeEnhancerSize,
+      badgeEnhancerSize = _ref$badgeEnhancerSiz === void 0 ? _constants.BADGE_ENHANCER_SIZES.none : _ref$badgeEnhancerSiz,
+      BadgeEnhancerContent = _ref.badgeEnhancerContent,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  if (badgeEnhancerSize === null || badgeEnhancerSize == _constants.BADGE_ENHANCER_SIZES.none) {
+    return null;
+  }
+
+  if (badgeEnhancerSize !== _constants.BADGE_ENHANCER_SIZES.xSmall && !BadgeEnhancerContent) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Badges (except for size ".concat(_constants.BADGE_ENHANCER_SIZES.xSmall, ") must contain content"));
+    }
+
+    return null;
+  }
+
+  if (markerType === _constants.PINHEAD_TYPES.floating) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Badges can only be rendered on fixed markers");
+    }
+
+    return null;
+  }
+
+  var positions = _constants.BADGE_ENHANCER_POSITIONS[pinHeadSize];
+  var position = positions ? positions[badgeEnhancerSize] : null;
+
+  if (!position) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Badge size ".concat(badgeEnhancerSize, " cannot be rendered with pinhead size ").concat(pinHeadSize));
+    }
+
+    return null;
+  }
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.BadgeEnhancer, _styledComponents.StyledBadgeEnhancerRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      BadgeEnhancerRoot = _getOverrides2[0],
+      badgeEnhancerRootProps = _getOverrides2[1];
+
+  return /*#__PURE__*/React.createElement(BadgeEnhancerRoot, _extends({
+    $size: badgeEnhancerSize,
+    $position: position
+  }, badgeEnhancerRootProps), BadgeEnhancerContent && badgeEnhancerSize !== _constants.BADGE_ENHANCER_SIZES.xSmall && /*#__PURE__*/React.createElement(BadgeEnhancerContent, {
+    size: _constants.BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]
+  }));
+};
+
+var _default = BadgeEnhancer;
+exports.default = _default;

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

@@ -0,0 +1,86 @@
+/*
+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 {BadgeEnhancerComponentT} from './types.js';
+import {getOverrides} from '../helpers/overrides.js';
+import {StyledBadgeEnhancerRoot} from './styled-components.js';
+import {
+  PINHEAD_TYPES,
+  BADGE_ENHANCER_SIZES,
+  BADGE_ENHANCER_POSITIONS,
+  BADGE_ENHANCER_CONTENT_SIZE,
+} from './constants.js';
+
+const BadgeEnhancer = ({
+  pinHeadSize,
+  markerType,
+  badgeEnhancerSize = BADGE_ENHANCER_SIZES.none,
+  badgeEnhancerContent: BadgeEnhancerContent,
+  overrides = {},
+}: BadgeEnhancerComponentT) => {
+  if (
+    badgeEnhancerSize === null ||
+    badgeEnhancerSize == BADGE_ENHANCER_SIZES.none
+  ) {
+    return null;
+  }
+  if (
+    badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall &&
+    !BadgeEnhancerContent
+  ) {
+    if (__DEV__) {
+      console.warn(
+        `Badges (except for size ${BADGE_ENHANCER_SIZES.xSmall}) must contain content`,
+      );
+    }
+    return null;
+  }
+  if (markerType === PINHEAD_TYPES.floating) {
+    if (__DEV__) {
+      console.warn(`Badges can only be rendered on fixed markers`);
+    }
+    return null;
+  }
+  const positions = BADGE_ENHANCER_POSITIONS[pinHeadSize];
+  const position = positions ? positions[badgeEnhancerSize] : null;
+  if (!position) {
+    if (__DEV__) {
+      console.warn(
+        `Badge size ${badgeEnhancerSize} cannot be rendered with pinhead size ${pinHeadSize}`,
+      );
+    }
+    return null;
+  }
+
+  const [BadgeEnhancerRoot, badgeEnhancerRootProps] = getOverrides(
+    overrides.BadgeEnhancer,
+    StyledBadgeEnhancerRoot,
+  );
+
+  return (
+    <BadgeEnhancerRoot
+      $size={badgeEnhancerSize}
+      $position={position}
+      {...badgeEnhancerRootProps}
+    >
+      {BadgeEnhancerContent &&
+        badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && (
+          <BadgeEnhancerContent
+            size={BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]}
+          />
+        )}
+    </BadgeEnhancerRoot>
+  );
+};
+
+export default BadgeEnhancer;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/map-marker/constants.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.anchorSize = exports.dragShadowWidth = exports.dragShadowMarginTop = exports.dragShadowHeight = exports.FLOATING_MARKER_ANCHOR_TYPES = exports.FLOATING_MARKER_ANCHOR_POSITIONS = exports.FLOATING_MARKER_SIZES = exports.PINHEAD_TYPES = exports.PINHEAD_DIMENSIONS = exports.xSmallPinheadDimension = exports.PINHEAD_SIZES_SHAPES = exports.NEEDLE_HEIGHTS = exports.NEEDLE_SIZES = void 0;
+exports.KIND = exports.BADGE_ENHANCER_CONTENT_SIZE = exports.BADGE_ENHANCER_STYLES = exports.BADGE_ENHANCER_POSITIONS = exports.BADGE_ENHANCER_SIZES = exports.LABEL_ENHANCER_POSITIONS = exports.LABEL_SIZES = exports.anchorSize = exports.dragShadowWidth = exports.dragShadowMarginTop = exports.dragShadowHeight = exports.FLOATING_MARKER_ANCHOR_TYPES = exports.FLOATING_MARKER_ANCHOR_POSITIONS = exports.FLOATING_MARKER_SIZES = exports.PINHEAD_TYPES = exports.PINHEAD_DIMENSIONS = exports.xxSmallPinheadDimension = exports.xSmallPinheadDimension = exports.PINHEAD_SIZES_SHAPES = exports.NEEDLE_HEIGHTS = exports.NEEDLE_SIZES = void 0;
 
-var _Object$freeze, _Object$freeze2;
+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;
 
 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; }
 
@@ -25,6 +25,8 @@ exports.NEEDLE_SIZES = NEEDLE_SIZES;
 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));
 exports.NEEDLE_HEIGHTS = NEEDLE_HEIGHTS;
 var PINHEAD_SIZES_SHAPES = Object.freeze({
+  xxSmallCircle: 'xx-small-circle',
+  xxSmallSquare: 'xx-small-square',
   xSmallCircle: 'x-small-circle',
   xSmallSquare: 'x-small-square',
   small: 'small',
@@ -37,7 +39,12 @@ var xSmallPinheadDimension = {
   icon: 4
 };
 exports.xSmallPinheadDimension = xSmallPinheadDimension;
-var PINHEAD_DIMENSIONS = Object.freeze((_Object$freeze2 = {}, _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xSmallSquare, xSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xSmallCircle, xSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.small, {
+var xxSmallPinheadDimension = {
+  height: 8,
+  icon: 4
+};
+exports.xxSmallPinheadDimension = xxSmallPinheadDimension;
+var PINHEAD_DIMENSIONS = Object.freeze((_Object$freeze2 = {}, _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xxSmallSquare, xxSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xxSmallCircle, xxSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xSmallSquare, xSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.xSmallCircle, xSmallPinheadDimension), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.small, {
   height: 24,
   icon: 16
 }), _defineProperty(_Object$freeze2, PINHEAD_SIZES_SHAPES.medium, {
@@ -69,7 +76,9 @@ var FLOATING_MARKER_ANCHOR_POSITIONS = Object.freeze({
 exports.FLOATING_MARKER_ANCHOR_POSITIONS = FLOATING_MARKER_ANCHOR_POSITIONS;
 var FLOATING_MARKER_ANCHOR_TYPES = Object.freeze({
   circle: 'circle',
-  square: 'square'
+  square: 'square',
+  xxSmallCircle: 'xx-small-circle',
+  xxSmallSquare: 'xx-small-square'
 });
 exports.FLOATING_MARKER_ANCHOR_TYPES = FLOATING_MARKER_ANCHOR_TYPES;
 var dragShadowHeight = 4;
@@ -79,4 +88,93 @@ exports.dragShadowMarginTop = dragShadowMarginTop;
 var dragShadowWidth = 6;
 exports.dragShadowWidth = dragShadowWidth;
 var anchorSize = 16;
-exports.anchorSize = anchorSize;
+exports.anchorSize = anchorSize;
+var labelSmall = 'LabelSmall';
+var LABEL_SIZES = (_LABEL_SIZES = {}, _defineProperty(_LABEL_SIZES, PINHEAD_SIZES_SHAPES.xxSmallCircle, labelSmall), _defineProperty(_LABEL_SIZES, PINHEAD_SIZES_SHAPES.xxSmallSquare, labelSmall), _defineProperty(_LABEL_SIZES, PINHEAD_SIZES_SHAPES.xSmallCircle, labelSmall), _defineProperty(_LABEL_SIZES, PINHEAD_SIZES_SHAPES.xSmallSquare, labelSmall), _defineProperty(_LABEL_SIZES, PINHEAD_SIZES_SHAPES.small, labelSmall), _defineProperty(_LABEL_SIZES, PINHEAD_SIZES_SHAPES.medium, 'LabelMedium'), _defineProperty(_LABEL_SIZES, PINHEAD_SIZES_SHAPES.large, 'LabelLarge'), _LABEL_SIZES);
+exports.LABEL_SIZES = LABEL_SIZES;
+var LABEL_ENHANCER_POSITIONS = Object.freeze({
+  none: 'none',
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom'
+});
+exports.LABEL_ENHANCER_POSITIONS = LABEL_ENHANCER_POSITIONS;
+var BADGE_ENHANCER_SIZES = Object.freeze({
+  none: 'none',
+  xSmall: 'x-small',
+  small: 'small',
+  mediumText: 'medium-text',
+  mediumIcon: 'medium-icon'
+});
+exports.BADGE_ENHANCER_SIZES = BADGE_ENHANCER_SIZES;
+var xSmallPinheadBadge = (_xSmallPinheadBadge = {}, _defineProperty(_xSmallPinheadBadge, BADGE_ENHANCER_SIZES.none, null), _defineProperty(_xSmallPinheadBadge, BADGE_ENHANCER_SIZES.xSmall, {
+  x: -5,
+  y: -3
+}), _defineProperty(_xSmallPinheadBadge, BADGE_ENHANCER_SIZES.small, null), _defineProperty(_xSmallPinheadBadge, BADGE_ENHANCER_SIZES.mediumText, null), _defineProperty(_xSmallPinheadBadge, BADGE_ENHANCER_SIZES.mediumIcon, null), _xSmallPinheadBadge);
+var BADGE_ENHANCER_POSITIONS = (_BADGE_ENHANCER_POSIT = {}, _defineProperty(_BADGE_ENHANCER_POSIT, PINHEAD_SIZES_SHAPES.xxSmallSquare, null), _defineProperty(_BADGE_ENHANCER_POSIT, PINHEAD_SIZES_SHAPES.xxSmallCircle, null), _defineProperty(_BADGE_ENHANCER_POSIT, PINHEAD_SIZES_SHAPES.xSmallSquare, xSmallPinheadBadge), _defineProperty(_BADGE_ENHANCER_POSIT, PINHEAD_SIZES_SHAPES.xSmallCircle, xSmallPinheadBadge), _defineProperty(_BADGE_ENHANCER_POSIT, PINHEAD_SIZES_SHAPES.small, (_PINHEAD_SIZES_SHAPES = {}, _defineProperty(_PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES.none, null), _defineProperty(_PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES.xSmall, {
+  x: -7,
+  y: -1
+}), _defineProperty(_PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES.small, {
+  x: -8,
+  y: -8
+}), _defineProperty(_PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES.mediumText, null), _defineProperty(_PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES.mediumIcon, null), _PINHEAD_SIZES_SHAPES)), _defineProperty(_BADGE_ENHANCER_POSIT, PINHEAD_SIZES_SHAPES.medium, (_PINHEAD_SIZES_SHAPES2 = {}, _defineProperty(_PINHEAD_SIZES_SHAPES2, BADGE_ENHANCER_SIZES.none, null), _defineProperty(_PINHEAD_SIZES_SHAPES2, BADGE_ENHANCER_SIZES.xSmall, {
+  x: -9,
+  y: 1
+}), _defineProperty(_PINHEAD_SIZES_SHAPES2, BADGE_ENHANCER_SIZES.small, {
+  x: -10,
+  y: -4
+}), _defineProperty(_PINHEAD_SIZES_SHAPES2, BADGE_ENHANCER_SIZES.mediumText, {
+  x: -12,
+  y: -8
+}), _defineProperty(_PINHEAD_SIZES_SHAPES2, BADGE_ENHANCER_SIZES.mediumIcon, {
+  x: -12,
+  y: -8
+}), _PINHEAD_SIZES_SHAPES2)), _defineProperty(_BADGE_ENHANCER_POSIT, PINHEAD_SIZES_SHAPES.large, (_PINHEAD_SIZES_SHAPES3 = {}, _defineProperty(_PINHEAD_SIZES_SHAPES3, BADGE_ENHANCER_SIZES.none, null), _defineProperty(_PINHEAD_SIZES_SHAPES3, BADGE_ENHANCER_SIZES.xSmall, {
+  x: -11,
+  y: 3
+}), _defineProperty(_PINHEAD_SIZES_SHAPES3, BADGE_ENHANCER_SIZES.small, null), _defineProperty(_PINHEAD_SIZES_SHAPES3, BADGE_ENHANCER_SIZES.mediumText, {
+  x: -14,
+  y: -6
+}), _defineProperty(_PINHEAD_SIZES_SHAPES3, BADGE_ENHANCER_SIZES.mediumIcon, {
+  x: -14,
+  y: -6
+}), _PINHEAD_SIZES_SHAPES3)), _BADGE_ENHANCER_POSIT);
+exports.BADGE_ENHANCER_POSITIONS = BADGE_ENHANCER_POSITIONS;
+var BADGE_ENHANCER_STYLES = (_BADGE_ENHANCER_STYLE = {}, _defineProperty(_BADGE_ENHANCER_STYLE, BADGE_ENHANCER_SIZES.none, {}), _defineProperty(_BADGE_ENHANCER_STYLE, BADGE_ENHANCER_SIZES.xSmall, {
+  height: '8px',
+  width: '8px',
+  borderRadius: '50%'
+}), _defineProperty(_BADGE_ENHANCER_STYLE, BADGE_ENHANCER_SIZES.small, {
+  height: '16px',
+  width: '16px',
+  borderRadius: '50%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  fontSize: '10px'
+}), _defineProperty(_BADGE_ENHANCER_STYLE, BADGE_ENHANCER_SIZES.mediumText, {
+  borderRadius: '10px',
+  height: '20px',
+  padding: '0px 8px',
+  display: 'flex',
+  alignItems: 'center',
+  boxSizing: 'border-box'
+}), _defineProperty(_BADGE_ENHANCER_STYLE, BADGE_ENHANCER_SIZES.mediumIcon, {
+  height: '20px',
+  width: '20px',
+  borderRadius: '50%',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  boxSizing: 'border-box'
+}), _BADGE_ENHANCER_STYLE);
+exports.BADGE_ENHANCER_STYLES = BADGE_ENHANCER_STYLES;
+var BADGE_ENHANCER_CONTENT_SIZE = (_BADGE_ENHANCER_CONTE = {}, _defineProperty(_BADGE_ENHANCER_CONTE, BADGE_ENHANCER_SIZES.none, 0), _defineProperty(_BADGE_ENHANCER_CONTE, BADGE_ENHANCER_SIZES.xSmall, 0), _defineProperty(_BADGE_ENHANCER_CONTE, BADGE_ENHANCER_SIZES.small, 10), _defineProperty(_BADGE_ENHANCER_CONTE, BADGE_ENHANCER_SIZES.mediumText, 12), _defineProperty(_BADGE_ENHANCER_CONTE, BADGE_ENHANCER_SIZES.mediumIcon, 12), _BADGE_ENHANCER_CONTE);
+exports.BADGE_ENHANCER_CONTENT_SIZE = BADGE_ENHANCER_CONTENT_SIZE;
+var KIND = Object.freeze({
+  default: 'default',
+  accent: 'accent',
+  negative: 'negative'
+});
+exports.KIND = KIND;