baseui 10.7.2 → 10.9.0

package/es/data-table/constants.js

@@ -19,13 +19,6 @@ export const NUMERICAL_FORMATS = Object.freeze({
   ACCOUNTING: 'ACCOUNTING',
   PERCENTAGE: 'PERCENTAGE'
 });
-export const NUMERICAL_OPERATIONS = Object.freeze({
-  EQ: 'EQ',
-  GT: 'GT',
-  GTE: 'GTE',
-  LT: 'LT',
-  LTE: 'LTE'
-});
 export const DATETIME_OPERATIONS = Object.freeze({
   RANGE_DATETIME: 'RANGE_DATETIME',
   RANGE_DATE: 'RANGE_DATE',
@@ -39,4 +32,15 @@ export const DATETIME_OPERATIONS = Object.freeze({
 export const SORT_DIRECTIONS = Object.freeze({
   ASC: 'ASC',
   DESC: 'DESC'
-});
+}); // If modifying this, take a look at the histogram and adjust. see HISTOGRAM_SIZE
+
+export const FILTER_SHELL_WIDTH = '320px'; // Depends on FILTER_SHELL_WIDTH
+
+export const HISTOGRAM_SIZE = {
+  width: 308,
+  height: 120
+}; // Arguably visually appealing within the given width.
+// Smaller and we don't have enough detail per bar.
+// Larger and the bars are too granular and don't align well with the slider steps
+
+export const MAX_BIN_COUNT = 50;

package/es/data-table/data-table.js

@@ -17,6 +17,8 @@ import { LocaleContext } from '../locale/index.js'; // consider pulling this out
 
 const HEADER_ROW_HEIGHT = 48;
 
+const sum = ns => ns.reduce((s, n) => s + n, 0);
+
 function CellPlacement({
   columnIndex,
   rowIndex,
@@ -255,7 +257,7 @@ function Header(props) {
   }))));
 }
 
-function Headers(props) {
+function Headers() {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
   const ctx = React.useContext(HeaderContext);
@@ -265,7 +267,7 @@ function Headers(props) {
       position: 'sticky',
       top: 0,
       left: 0,
-      width: `${ctx.widths.reduce((sum, w) => sum + w, 0)}px`,
+      width: `${sum(ctx.widths)}px`,
       height: `${HEADER_ROW_HEIGHT}px`,
       display: 'flex',
       // this feels bad.. the absolutely positioned children elements
@@ -467,8 +469,10 @@ export function DataTable({
     }
 
     return rowHeight;
-  }, [rowHeight]);
-  const gridRef = React.useRef(null);
+  }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
+  // eslint-disable-next-line flowtype/no-weak-types
+
+  const [gridRef, setGridRef] = React.useState(null);
   const [measuredWidths, setMeasuredWidths] = React.useState(columns.map(() => 0));
   const [resizeDeltas, setResizeDeltas] = React.useState(columns.map(() => 0));
   React.useEffect(() => {
@@ -480,11 +484,11 @@ export function DataTable({
     });
   }, [columns]);
   const resetAfterColumnIndex = React.useCallback(columnIndex => {
-    if (gridRef.current) {
+    if (gridRef) {
       // $FlowFixMe trigger react-window to layout the elements again
-      gridRef.current.resetAfterColumnIndex(columnIndex, true);
+      gridRef.resetAfterColumnIndex(columnIndex, true);
     }
-  }, [gridRef.current]);
+  }, [gridRef]);
   const handleWidthsChange = React.useCallback(nextWidths => {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -594,13 +598,10 @@ export function DataTable({
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
   const [browserScrollbarWidth, setBrowserScrollbarWidth] = React.useState(0);
   const normalizedWidths = React.useMemo(() => {
-    const sum = ns => ns.reduce((s, n) => s + n, 0);
-
     const resizedWidths = measuredWidths.map((w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]));
 
-    if (gridRef.current) {
-      // $FlowFixMe
-      const gridProps = gridRef.current.props;
+    if (gridRef) {
+      const gridProps = gridRef.props;
       let isContentTallerThanContainer = false;
       let visibleRowHeight = 0;
 
@@ -635,7 +636,7 @@ export function DataTable({
     }
 
     return resizedWidths;
-  }, [measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   const isSelectable = batchActions ? !!batchActions.length : false;
   const isSelectedAll = React.useMemo(() => {
     if (!selectedRowIds) {
@@ -684,10 +685,10 @@ export function DataTable({
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
 
-    if (gridRef.current) {
+    if (gridRef) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.current.scrollToItem({
+        gridRef.scrollToItem({
           rowIndex: nextIndex
         });
       }
@@ -776,8 +777,9 @@ export function DataTable({
     }
   }, /*#__PURE__*/React.createElement(VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
   , {
-    ref: gridRef,
+    ref: setGridRef,
     overscanRowCount: 10,
+    overscanColumnCount: 5,
     innerElementType: InnerTableElement,
     columnCount: columns.length,
     columnWidth: columnIndex => normalizedWidths[columnIndex],

package/es/data-table/filter-shell.js

@@ -9,10 +9,26 @@ import { Button, SIZE as BUTTON_SIZE } from '../button/index.js';
 import { Checkbox, STYLE_TYPE } from '../checkbox/index.js';
 import { useStyletron } from '../styles/index.js';
 import { LocaleContext } from '../locale/index.js';
+import { FILTER_SHELL_WIDTH } from './constants.js';
 
 function FilterShell(props) {
   const [css, theme] = useStyletron();
   const locale = React.useContext(LocaleContext);
+  let excludeText;
+
+  switch (props.excludeKind) {
+    case 'value':
+      excludeText = locale.datatable.filterExcludeValue;
+      break;
+
+    case 'range':
+      excludeText = locale.datatable.filterExcludeRange;
+      break;
+
+    default:
+      excludeText = locale.datatable.filterExclude;
+  }
+
   return /*#__PURE__*/React.createElement("form", {
     className: css({
       backgroundColor: theme.colors.backgroundPrimary,
@@ -20,7 +36,7 @@ function FilterShell(props) {
       paddingRight: theme.sizing.scale600,
       paddingBottom: theme.sizing.scale600,
       paddingLeft: theme.sizing.scale600,
-      width: '320px'
+      width: FILTER_SHELL_WIDTH
     }),
     onSubmit: event => {
       event.preventDefault();
@@ -28,17 +44,23 @@ function FilterShell(props) {
     }
   }, props.children, /*#__PURE__*/React.createElement("div", {
     className: css({
-      alignItems: 'center',
       display: 'flex',
+      flexDirection: 'column',
       justifyContent: 'space-between',
-      marginTop: theme.sizing.scale600
+      alignItems: 'flex-end',
+      marginTop: theme.sizing.scale600,
+      gap: theme.sizing.scale200
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: css({
+      alignSelf: 'flex-start'
     })
   }, /*#__PURE__*/React.createElement(Checkbox, {
     checked: props.exclude,
     onChange: props.onExcludeChange,
     checkmarkType: STYLE_TYPE.toggle_round,
     labelPlacement: "right"
-  }, locale.datatable.filterExclude), /*#__PURE__*/React.createElement(Button, {
+  }, excludeText)), /*#__PURE__*/React.createElement(Button, {
     size: BUTTON_SIZE.compact,
     type: "submit"
   }, locale.datatable.filterApply)));

package/es/data-table/locale.js

@@ -6,18 +6,20 @@ LICENSE file in the root directory of this source tree.
 */
 const locale = {
   emptyState: 'No rows match the filter criteria defined. Please remove one or more filters to view more data.',
-  loadingState: 'Loading Rows.',
+  loadingState: 'Loading rows.',
   searchAriaLabel: 'Search by text',
   filterAdd: 'Add Filter',
   filterExclude: 'Exclude',
   filterApply: 'Apply',
+  filterExcludeRange: 'Exclude range',
+  filterExcludeValue: 'Exclude value',
   filterAppliedTo: 'filter applied to',
   optionsLabel: 'Select column to filter by',
   optionsSearch: 'Search for a column to filter by...',
   optionsEmpty: 'No columns available.',
   categoricalFilterSelectAll: 'Select All',
   categoricalFilterSelectClear: 'Clear',
-  categoricalFilterEmpty: 'No Categories Found',
+  categoricalFilterEmpty: 'No categories found',
   datetimeFilterRange: 'Range',
   datetimeFilterRangeDatetime: 'Date, Time',
   datetimeFilterRangeDate: 'Date',

package/es/data-table/measure-column-widths.js

@@ -7,40 +7,59 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { useStyletron } from '../styles/index.js';
 import HeaderCell from './header-cell.js';
+import { useRef } from 'react'; // Measures the column header + sampled data
 
-// https://github.com/Swizec/useDimensions
-function useDimensions() {
-  const [dimensions, setDimensions] = React.useState({});
-  const [node, setNode] = React.useState(null);
-  const ref = React.useCallback(node => {
-    setNode(node);
-  }, []);
+function MeasureColumn({
+  sampleIndexes,
+  column,
+  columnIndex,
+  rows,
+  isSelectable,
+  onLayout
+}) {
+  const [css] = useStyletron();
+  const ref = useRef();
   React.useEffect(() => {
-    if (typeof document !== 'undefined') {
-      if (node) {
-        window.requestAnimationFrame(() => {
-          setDimensions(node.getBoundingClientRect());
-        });
-      }
+    if (ref.current) {
+      onLayout(columnIndex, ref.current.getBoundingClientRect());
     }
-  }, [node]);
-  return [ref, dimensions];
-}
-
-function ElementMeasurer(props) {
-  const {
-    onDimensionsChange
-  } = props;
-  const [ref, dimensions] = useDimensions();
-  React.useEffect(() => {
-    onDimensionsChange(dimensions);
-  }, [dimensions, onDimensionsChange]);
-  return /*#__PURE__*/React.cloneElement(props.item, {
-    ref
-  });
+  }, []);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: css({
+      display: 'flex',
+      flexDirection: 'column',
+      width: 'fit-content'
+    })
+  }, /*#__PURE__*/React.createElement(HeaderCell, {
+    index: columnIndex,
+    isHovered: true,
+    isMeasured: true,
+    isSelectedAll: false,
+    isSelectedIndeterminate: false,
+    onMouseEnter: () => {},
+    onMouseLeave: () => {},
+    onSelectAll: () => {},
+    onSelectNone: () => {},
+    onSort: i => {},
+    sortable: column.sortable,
+    sortDirection: null,
+    title: column.title,
+    isSelectable: isSelectable
+  }), sampleIndexes.map((rowIndex, i) => {
+    const Cell = column.renderCell;
+    return /*#__PURE__*/React.createElement(Cell, {
+      key: `measure-${i}`,
+      value: column.mapDataToValue(rows[rowIndex].data),
+      isSelectable: isSelectable,
+      isMeasured: true,
+      sortable: column.sortable,
+      x: 0,
+      y: rowIndex
+    });
+  }));
 }
 
-// sample size could likely be generated based on row count, to have higher confidence
 const MAX_SAMPLE_SIZE = 50;
 
 function generateSampleIndices(inputMin, inputMax, maxSamples) {
@@ -77,43 +96,35 @@ export default function MeasureColumnWidths({
   onWidthsChange
 }) {
   const [css] = useStyletron();
-  const measurementCount = React.useRef(0);
-  const dimensionsCache = React.useRef(widths);
+  const widthMap = React.useMemo(() => {
+    return new Map();
+  }, []);
   const sampleSize = rows.length < MAX_SAMPLE_SIZE ? rows.length : MAX_SAMPLE_SIZE;
   const finishedMeasurementCount = (sampleSize + 1) * columns.length;
-  const sampleRowIndicesByColumn = React.useMemo(() => {
-    measurementCount.current = 0;
-    dimensionsCache.current = widths;
-    const indices = generateSampleIndices(0, rows.length - 1, sampleSize);
-    return columns.map(() => indices);
+  const sampleIndexes = React.useMemo(() => {
+    return generateSampleIndices(0, rows.length - 1, sampleSize);
   }, [columns, rows, widths, sampleSize]);
-  const handleDimensionsChange = React.useCallback((columnIndex, rowIndex, dimensions) => {
-    if (dimensions.width === undefined) return;
-
-    if (columns[columnIndex] === undefined || dimensionsCache.current[columnIndex] === undefined) {
-      return;
-    }
-
-    measurementCount.current += 1;
-    const nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, dimensionsCache.current[columnIndex], dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
+  const handleDimensionsChange = React.useCallback((columnIndex, dimensions) => {
+    const nextWidth = Math.min(Math.max(columns[columnIndex].minWidth || 0, widthMap.get(columnIndex) || 0, dimensions.width + 1), columns[columnIndex].maxWidth || Infinity);
 
-    if (nextWidth !== dimensionsCache.current[columnIndex]) {
-      const nextWidths = [...dimensionsCache.current];
-      nextWidths[columnIndex] = nextWidth;
-      dimensionsCache.current = nextWidths;
+    if (nextWidth !== widthMap.get(columnIndex)) {
+      widthMap.set(columnIndex, nextWidth);
     }
 
-    if (measurementCount.current >= finishedMeasurementCount) {
-      onWidthsChange(dimensionsCache.current);
+    if ( // Refresh at 100% of done
+    widthMap.size === columns.length || // ...50%
+    widthMap.size === Math.floor(columns.length / 2) || // ...25%
+    widthMap.size === Math.floor(columns.length / 4)) {
+      onWidthsChange(Array.from(widthMap.values()));
     }
   }, [columns, finishedMeasurementCount, onWidthsChange]);
   const hiddenStyle = css({
     position: 'absolute',
     overflow: 'hidden',
     height: 0
-  });
+  }); // Remove the measurement nodes after we are done updating our column width
 
-  if (measurementCount.current >= finishedMeasurementCount) {
+  if (widthMap.size === columns.length) {
     return null;
   }
 
@@ -124,38 +135,16 @@ export default function MeasureColumnWidths({
       className: hiddenStyle,
       "aria-hidden": true,
       role: "none"
-    }, sampleRowIndicesByColumn.map((rowIndices, columnIndex) => {
-      const Cell = columns[columnIndex].renderCell;
-      return rowIndices.map(rowIndex => /*#__PURE__*/React.createElement(ElementMeasurer, {
-        key: `measure-${columnIndex}-${rowIndex}`,
-        onDimensionsChange: dimensions => handleDimensionsChange(columnIndex, rowIndex, dimensions),
-        item: /*#__PURE__*/React.createElement(Cell, {
-          value: columns[columnIndex].mapDataToValue(rows[rowIndex].data),
-          isMeasured: true,
-          onSelect: isSelectable && columnIndex === 0 ? () => {} : undefined,
-          x: columnIndex,
-          y: rowIndex
-        })
-      }));
-    }), columns.map((column, columnIndex) => /*#__PURE__*/React.createElement(ElementMeasurer, {
-      key: `measure-column-${columnIndex}`,
-      onDimensionsChange: dimensions => handleDimensionsChange(columnIndex, -1, dimensions),
-      item: /*#__PURE__*/React.createElement(HeaderCell, {
-        index: columnIndex,
-        isHovered: true,
-        isMeasured: true,
-        isSelectable: isSelectable && columnIndex === 0,
-        isSelectedAll: false,
-        isSelectedIndeterminate: false,
-        onMouseEnter: () => {},
-        onMouseLeave: () => {},
-        onSelectAll: () => {},
-        onSelectNone: () => {},
-        onSort: i => {},
-        sortable: column.sortable,
-        sortDirection: null,
-        title: column.title
-      })
-    })))
+    }, columns.map((column, i) => {
+      return /*#__PURE__*/React.createElement(MeasureColumn, {
+        key: column.title + i,
+        column: column,
+        rows: rows,
+        isSelectable: isSelectable,
+        onLayout: handleDimensionsChange,
+        columnIndex: i,
+        sampleIndexes: sampleIndexes
+      });
+    }))
   );
 }

package/es/datepicker/styled-components.js

@@ -503,7 +503,7 @@ export const StyledDay = styled('div', props => {
       content: '""',
       boxSizing: 'border-box',
       display: 'inline-block',
-      boxShadow: $isFocusVisible ? `0 0 0 3px ${colors.accent}` : 'none',
+      boxShadow: $isFocusVisible && (!$outsideMonth || $peekNextMonth) ? `0 0 0 3px ${colors.accent}` : 'none',
       backgroundColor: $selected ? colors.calendarDayBackgroundSelectedHighlighted : $pseudoSelected && $isHighlighted ? colors.calendarDayBackgroundPseudoSelectedHighlighted : colors.calendarBackground,
       height: $hasDateLabel ? '100%' : $density === DENSITY.high ? '42px' : '50px',
       width: '100%',

package/es/drawer/drawer.js

@@ -250,7 +250,9 @@ class Drawer extends React.Component {
     const [Close, closeProps] = getOverrides(CloseOverride, StyledClose);
     const sharedProps = this.getSharedProps();
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => {
-      return /*#__PURE__*/React.createElement(FocusLock, {
+      return /*#__PURE__*/React.createElement(FocusLock // Allow focus to escape when UI is within an iframe
+      , {
+        crossFrame: false,
         returnFocus: true,
         autoFocus: autoFocus,
         noFocusGuards: true

package/es/index.js

@@ -8,4 +8,4 @@ export { styled, withStyle, withWrapper, useStyletron, createThemedStyled, creat
 export { createTheme, createDarkTheme, createLightTheme, lightThemePrimitives, darkThemePrimitives, darkThemeOverrides, DarkTheme, DarkThemeMove, LightTheme, LightThemeMove } 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';

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

@@ -0,0 +1,61 @@
+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); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { 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 = {}
+}) => {
+  if (badgeEnhancerSize === null || badgeEnhancerSize == BADGE_ENHANCER_SIZES.none) {
+    return null;
+  }
+
+  if (badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && !BadgeEnhancerContent) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`Badges (except for size ${BADGE_ENHANCER_SIZES.xSmall}) must contain content`);
+    }
+
+    return null;
+  }
+
+  if (markerType === PINHEAD_TYPES.floating) {
+    if (process.env.NODE_ENV !== "production") {
+      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 (process.env.NODE_ENV !== "production") {
+      console.warn(`Badge size ${badgeEnhancerSize} cannot be rendered with pinhead size ${pinHeadSize}`);
+    }
+
+    return null;
+  }
+
+  const [BadgeEnhancerRoot, badgeEnhancerRootProps] = getOverrides(overrides.BadgeEnhancer, StyledBadgeEnhancerRoot);
+  return /*#__PURE__*/React.createElement(BadgeEnhancerRoot, _extends({
+    $size: badgeEnhancerSize,
+    $position: position
+  }, badgeEnhancerRootProps), BadgeEnhancerContent && badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && /*#__PURE__*/React.createElement(BadgeEnhancerContent, {
+    size: BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]
+  }));
+};
+
+export default BadgeEnhancer;

package/es/map-marker/constants.js

@@ -17,6 +17,8 @@ export const NEEDLE_HEIGHTS = Object.freeze({
   [NEEDLE_SIZES.tall]: 20
 });
 export const PINHEAD_SIZES_SHAPES = Object.freeze({
+  xxSmallCircle: 'xx-small-circle',
+  xxSmallSquare: 'xx-small-square',
   xSmallCircle: 'x-small-circle',
   xSmallSquare: 'x-small-square',
   small: 'small',
@@ -27,7 +29,13 @@ export const xSmallPinheadDimension = {
   height: 16,
   icon: 4
 };
+export const xxSmallPinheadDimension = {
+  height: 8,
+  icon: 4
+};
 export const PINHEAD_DIMENSIONS = Object.freeze({
+  [PINHEAD_SIZES_SHAPES.xxSmallSquare]: xxSmallPinheadDimension,
+  [PINHEAD_SIZES_SHAPES.xxSmallCircle]: xxSmallPinheadDimension,
   [PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadDimension,
   [PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadDimension,
   [PINHEAD_SIZES_SHAPES.small]: {
@@ -61,9 +69,145 @@ export const FLOATING_MARKER_ANCHOR_POSITIONS = Object.freeze({
 });
 export const FLOATING_MARKER_ANCHOR_TYPES = Object.freeze({
   circle: 'circle',
-  square: 'square'
+  square: 'square',
+  xxSmallCircle: 'xx-small-circle',
+  xxSmallSquare: 'xx-small-square'
 });
 export const dragShadowHeight = 4;
 export const dragShadowMarginTop = 6;
 export const dragShadowWidth = 6;
-export const anchorSize = 16;
+export const anchorSize = 16;
+const labelSmall = 'LabelSmall';
+export const LABEL_SIZES = {
+  [PINHEAD_SIZES_SHAPES.xxSmallCircle]: labelSmall,
+  [PINHEAD_SIZES_SHAPES.xxSmallSquare]: labelSmall,
+  [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'
+};
+export const LABEL_ENHANCER_POSITIONS = Object.freeze({
+  none: 'none',
+  top: 'top',
+  left: 'left',
+  right: 'right',
+  bottom: 'bottom'
+});
+export const BADGE_ENHANCER_SIZES = Object.freeze({
+  none: 'none',
+  xSmall: 'x-small',
+  small: 'small',
+  mediumText: 'medium-text',
+  mediumIcon: 'medium-icon'
+});
+const xSmallPinheadBadge = {
+  [BADGE_ENHANCER_SIZES.none]: null,
+  [BADGE_ENHANCER_SIZES.xSmall]: {
+    x: -5,
+    y: -3
+  },
+  [BADGE_ENHANCER_SIZES.small]: null,
+  [BADGE_ENHANCER_SIZES.mediumText]: null,
+  [BADGE_ENHANCER_SIZES.mediumIcon]: null
+};
+export const BADGE_ENHANCER_POSITIONS = {
+  [PINHEAD_SIZES_SHAPES.xxSmallSquare]: null,
+  [PINHEAD_SIZES_SHAPES.xxSmallCircle]: null,
+  [PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadBadge,
+  [PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadBadge,
+  [PINHEAD_SIZES_SHAPES.small]: {
+    [BADGE_ENHANCER_SIZES.none]: null,
+    [BADGE_ENHANCER_SIZES.xSmall]: {
+      x: -7,
+      y: -1
+    },
+    [BADGE_ENHANCER_SIZES.small]: {
+      x: -8,
+      y: -8
+    },
+    [BADGE_ENHANCER_SIZES.mediumText]: null,
+    [BADGE_ENHANCER_SIZES.mediumIcon]: null
+  },
+  [PINHEAD_SIZES_SHAPES.medium]: {
+    [BADGE_ENHANCER_SIZES.none]: null,
+    [BADGE_ENHANCER_SIZES.xSmall]: {
+      x: -9,
+      y: 1
+    },
+    [BADGE_ENHANCER_SIZES.small]: {
+      x: -10,
+      y: -4
+    },
+    [BADGE_ENHANCER_SIZES.mediumText]: {
+      x: -12,
+      y: -8
+    },
+    [BADGE_ENHANCER_SIZES.mediumIcon]: {
+      x: -12,
+      y: -8
+    }
+  },
+  [PINHEAD_SIZES_SHAPES.large]: {
+    [BADGE_ENHANCER_SIZES.none]: null,
+    [BADGE_ENHANCER_SIZES.xSmall]: {
+      x: -11,
+      y: 3
+    },
+    [BADGE_ENHANCER_SIZES.small]: null,
+    [BADGE_ENHANCER_SIZES.mediumText]: {
+      x: -14,
+      y: -6
+    },
+    [BADGE_ENHANCER_SIZES.mediumIcon]: {
+      x: -14,
+      y: -6
+    }
+  }
+};
+export const BADGE_ENHANCER_STYLES = {
+  [BADGE_ENHANCER_SIZES.none]: {},
+  [BADGE_ENHANCER_SIZES.xSmall]: {
+    height: '8px',
+    width: '8px',
+    borderRadius: '50%'
+  },
+  [BADGE_ENHANCER_SIZES.small]: {
+    height: '16px',
+    width: '16px',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '10px'
+  },
+  [BADGE_ENHANCER_SIZES.mediumText]: {
+    borderRadius: '10px',
+    height: '20px',
+    padding: '0px 8px',
+    display: 'flex',
+    alignItems: 'center',
+    boxSizing: 'border-box'
+  },
+  [BADGE_ENHANCER_SIZES.mediumIcon]: {
+    height: '20px',
+    width: '20px',
+    borderRadius: '50%',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box'
+  }
+};
+export const BADGE_ENHANCER_CONTENT_SIZE = {
+  [BADGE_ENHANCER_SIZES.none]: 0,
+  [BADGE_ENHANCER_SIZES.xSmall]: 0,
+  [BADGE_ENHANCER_SIZES.small]: 10,
+  [BADGE_ENHANCER_SIZES.mediumText]: 12,
+  [BADGE_ENHANCER_SIZES.mediumIcon]: 12
+};
+export const KIND = Object.freeze({
+  default: 'default',
+  accent: 'accent',
+  negative: 'negative'
+});