baseui 12.2.0 → 13.0.0

package/a11y/a11y.js

@@ -119,6 +119,7 @@ function Violation(props) {
     var node = document.querySelector(props.target);
 
     if (node) {
+      // @ts-ignore
       setAnchor(node);
       node.setAttribute('style', "border: solid 1px ".concat(theme.colors.negative300, ";"));
       node.addEventListener('mouseenter', handleMouseEnter);
@@ -140,7 +141,8 @@ function Violation(props) {
       return setOffset(update.popper);
     },
     placement: _layer.TETHER_PLACEMENT.bottom
-  }, /*#__PURE__*/React.createElement(ViolationContainer, {
+  }, /*#__PURE__*/React.createElement(ViolationContainer // @ts-ignore
+  , {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
@@ -171,8 +173,10 @@ function A11y(props) {
       }
 
       var id = requestIdleCallback(function () {
+        // @ts-ignore
         validateNode(child.current).then(setViolations);
-      });
+      }); // @ts-ignore
+
       setIdleID(id);
     }
   }, [props.children]);

package/a11y/types.d.ts

@@ -1,5 +1,5 @@
 import type { Result } from 'axe-core';
-export declare type ViolationProps = {
+export type ViolationProps = {
     target: string;
     violations: Result[];
 };

package/accordion/accordion.js

@@ -222,6 +222,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
           renderAll: renderAll,
           overrides: child.props.overrides || overrides,
           disabled: child.props.disabled || disabled,
+          // @ts-ignore
           onChange: function onChange() {
             for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
               args[_key3] = arguments[_key3];

package/accordion/index.d.ts

@@ -9,4 +9,4 @@ export { Root as StyledRoot, PanelContainer as StyledPanelContainer, Header as S
 export * from './types';
 export type { AccordionLocale } from './locale';
 /** @deprecated use SharedStylePropsArg instead. To be removed in future versions.*/
-export declare type SharedProps = SharedStylePropsArg;
+export type SharedProps = SharedStylePropsArg;

package/accordion/locale.d.ts

@@ -1,4 +1,4 @@
-export declare type AccordionLocale = {
+export type AccordionLocale = {
     collapse: string;
     expand: string;
 };

package/accordion/panel.js

@@ -41,7 +41,8 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var Panel = function Panel(_ref, ref) {
+var Panel = function Panel(_ref, // @ts-ignore
+ref) {
   var ariaControls = _ref['aria-controls'],
       children = _ref.children,
       _ref$disabled = _ref.disabled,

package/accordion/stateless-accordion.js

@@ -80,6 +80,7 @@ function StatelessAccordion(_ref) {
       key: key,
       onChange: // Don't bother constructing the wrapper function if no one is listening
       onChange && typeof onChange === 'function' ? function () {
+        // @ts-ignore
         var next;
 
         if (accordion) {
@@ -96,7 +97,8 @@ function StatelessAccordion(_ref) {
           } else {
             next = [].concat(_toConsumableArray(expanded), [key]);
           }
-        }
+        } // @ts-ignore
+
 
         onChange({
           key: key,

package/accordion/types.d.ts

@@ -1,16 +1,16 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { STATE_CHANGE_TYPE } from './constants';
-export declare type AccordionState = {
+export type AccordionState = {
     expanded: Array<React.Key>;
 };
-export declare type PanelState = {
+export type PanelState = {
     expanded: boolean;
 };
-export declare type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
-export declare type StateReducer = (stateChangeType: StateChangeType, nextState: AccordionState, currentState: AccordionState) => AccordionState;
-export declare type PanelStateReducer = (stateChangeType: StateChangeType, nextState: PanelState, currentState: PanelState) => PanelState;
-export declare type AccordionOverrides = {
+export type StateChangeType = keyof typeof STATE_CHANGE_TYPE;
+export type StateReducer = (stateChangeType: StateChangeType, nextState: AccordionState, currentState: AccordionState) => AccordionState;
+export type PanelStateReducer = (stateChangeType: StateChangeType, nextState: PanelState, currentState: PanelState) => PanelState;
+export type AccordionOverrides = {
     Content?: Override;
     ContentAnimationContainer?: Override;
     Header?: Override;
@@ -19,7 +19,7 @@ export declare type AccordionOverrides = {
     ToggleIcon?: Override;
     ToggleIconGroup?: Override;
 };
-export declare type PanelOverrides = {
+export type PanelOverrides = {
     PanelContainer?: Override;
     Header?: Override;
     ToggleIcon?: Override;
@@ -27,13 +27,13 @@ export declare type PanelOverrides = {
     Content?: Override;
     ContentAnimationContainer?: Override;
 };
-export declare type OnChangeHandler = (a: {
+export type OnChangeHandler = (a: {
     expanded: boolean;
 }) => unknown;
-export declare type AccordionOnChangeHandler = (a: {
+export type AccordionOnChangeHandler = (a: {
     expanded: Array<React.Key>;
 }) => unknown;
-export declare type AccordionProps = {
+export type AccordionProps = {
     /** Determines how many panels may be expanded at a time. If set to
      * true it will collapse a current panel when a new panel is expanded.
      * If set to false more than one panel may be expanded at a time. */
@@ -56,11 +56,11 @@ export declare type AccordionProps = {
      */
     renderAll?: boolean;
 };
-export declare type StatelessAccordionOnChangeHandler = (a: {
+export type StatelessAccordionOnChangeHandler = (a: {
     expanded: Array<React.Key>;
     key: React.Key;
 }) => unknown;
-export declare type StatelessAccordionProps = {
+export type StatelessAccordionProps = {
     /** Determines how many panels may be expanded at a time. If set to
      * true it will collapse a current panel when a new panel is expanded.
      * If set to false more than one panel may be expanded at a time. */
@@ -85,7 +85,7 @@ export declare type StatelessAccordionProps = {
      */
     renderAll?: boolean;
 };
-declare type SharedPanelProps = {
+type SharedPanelProps = {
     /** The content visible when Panel is expanded. */
     children: React.ReactNode;
     /** Defaults to the disabled value provided by the parent Accordion component. */
@@ -117,11 +117,11 @@ declare type SharedPanelProps = {
      */
     renderAll?: boolean;
 };
-export declare type PanelProps = SharedPanelProps & {
+export type PanelProps = SharedPanelProps & {
     /** Defines if the panel is expanded. If set to true the panel is rendered expanded. */
     expanded?: boolean;
 };
-declare type SharedStatefulPanelContainerProps = {
+type SharedStatefulPanelContainerProps = {
     /** Initial state of a stateful panel component.
      * The expanded prop indicates if the panel is initially expanded.
      * If set to true the panel will be expanded initially */
@@ -129,11 +129,11 @@ declare type SharedStatefulPanelContainerProps = {
     onChange?: OnChangeHandler;
     stateReducer?: PanelStateReducer;
 };
-export declare type StatefulPanelContainerProps = SharedStatefulPanelContainerProps & {
+export type StatefulPanelContainerProps = SharedStatefulPanelContainerProps & {
     children: (props: Omit<PanelProps, 'children'>) => React.ReactNode;
 };
-export declare type StatefulPanelProps = SharedStatefulPanelContainerProps & SharedPanelProps;
-export declare type SharedStylePropsArg = {
+export type StatefulPanelProps = SharedStatefulPanelContainerProps & SharedPanelProps;
+export type SharedStylePropsArg = {
     $color?: string;
     $disabled: boolean | undefined | null;
     $expanded?: boolean | null;

package/app-nav-bar/app-nav-bar.js

@@ -47,6 +47,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function MainMenuItem(props) {
   var item = props.item,
       _props$kind = props.kind,
@@ -59,13 +60,15 @@ function MainMenuItem(props) {
   var _React$useState = React.useState(false),
       _React$useState2 = _slicedToArray(_React$useState, 2),
       focusVisible = _React$useState2[0],
-      setFocusVisible = _React$useState2[1];
+      setFocusVisible = _React$useState2[1]; // @ts-ignore
+
 
   function handleFocus(event) {
     if ((0, _focusVisible.isFocusVisible)(event)) {
       setFocusVisible(true);
     }
   } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
 
 
   function handleBlur(event) {
@@ -73,13 +76,15 @@ function MainMenuItem(props) {
       setFocusVisible(false);
     }
   } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
 
 
   function handleClick(event) {
     if (onSelect) {
       onSelect(item);
     }
-  }
+  } // @ts-ignore
+
 
   function handleKeyDown(event) {
     if (event.key === 'Enter' && onSelect) {
@@ -103,7 +108,8 @@ function MainMenuItem(props) {
     onKeyDown: handleKeyDown,
     tabIndex: 0
   }, mainMenuItemElementProps), mapItemToNode(item));
-}
+} // @ts-ignore
+
 
 function SecondaryMenu(props) {
   var _props$items = props.items,

package/app-nav-bar/index.d.ts

@@ -5,10 +5,10 @@ export * from './styled-components';
 export * from './types';
 export { setItemActive } from './utils';
 /** @deprecated use AppNavBarOverrides instead. To be removed in future versions.*/
-export declare type AppNavBarOverridesT = AppNavBarOverrides;
+export type AppNavBarOverridesT = AppNavBarOverrides;
 /** @deprecated use NavItem instead. To be removed in future versions.*/
-export declare type NavItemT = NavItem;
+export type NavItemT = NavItem;
 /** @deprecated use UserMenuProps instead. To be removed in future versions.*/
-export declare type UserMenuPropsT = UserMenuProps;
+export type UserMenuPropsT = UserMenuProps;
 /** @deprecated use AppNavBarProps instead. To be removed in future versions.*/
-export declare type AppNavBarPropsT = AppNavBarProps;
+export type AppNavBarPropsT = AppNavBarProps;

package/app-nav-bar/mobile-menu.js

@@ -220,7 +220,8 @@ function MobileMenu(props) {
     onClose: toggleMenu,
     size: '75%'
   }, drawerProps), /*#__PURE__*/React.createElement(MobileMenu, _extends({
-    items: currentNavItems,
+    items: currentNavItems // @ts-ignore
+    ,
     onItemSelect: function onItemSelect(_ref3) {
       var item = _ref3.item;
 
@@ -250,7 +251,8 @@ function MobileMenu(props) {
       }
 
       if (item.children && item.children.length) {
-        var parentItem = _objectSpread(_objectSpread({}, item), {}, _defineProperty({}, PARENT_MENU_ITEM, true));
+        var parentItem = _objectSpread(_objectSpread({}, item), {}, _defineProperty({}, PARENT_MENU_ITEM, true)); // @ts-ignore
+
 
         setAncestorNavItems([].concat(_toConsumableArray(ancestorNavItems), [item]));
         setCurrentNavItems([parentItem].concat(_toConsumableArray(item.children)));

package/app-nav-bar/styled-components.js

@@ -53,46 +53,13 @@ StyledButton.displayName = "StyledButton";
 StyledButton.displayName = 'StyledButton';
 var StyledRoot = (0, _styles.styled)('div', function (props) {
   var $theme = props.$theme;
-  var mediaQueries = (0, _responsiveHelpers.getMediaQueries)($theme.breakpoints);
-  var breakpoints = Object.values($theme.breakpoints).sort();
-  var margins = [];
-
-  if (Array.isArray($theme.grid.margins)) {
-    for (var i = 0; i < breakpoints.length; i++) {
-      var margin = $theme.grid.margins[i];
-
-      if (margin == null) {
-        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
-      } else {
-        margins.push(margin);
-      }
-    }
-  } else {
-    for (var _i = 0; _i < breakpoints.length; _i++) {
-      margins.push($theme.grid.margins);
-    }
-  }
-
-  var style = _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, $theme.typography.font300), (0, _responsiveHelpers.getMinimumPageMargins)($theme.grid.margins)), (0, _responsiveHelpers.getMediaQueryPageMargins)($theme)), {}, {
     boxSizing: 'border-box',
     backgroundColor: $theme.colors.backgroundPrimary,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
-    borderBottomColor: "".concat($theme.colors.borderOpaque),
-    paddingInlineStart: margins[0] + 'px',
-    paddingInlineEnd: margins[0] + 'px'
+    borderBottomColor: "".concat($theme.colors.borderOpaque)
   });
-
-  for (var _i2 = 1; _i2 < mediaQueries.length; _i2++) {
-    var _margin = Array.isArray($theme.grid.margins) ? $theme.grid.margins[_i2] : $theme.grid.margins;
-
-    style[mediaQueries[_i2]] = {
-      paddingInlineStart: _margin + 'px',
-      paddingInlineEnd: _margin + 'px'
-    };
-  }
-
-  return style;
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";

package/app-nav-bar/styled-components.js.flow

@@ -7,9 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import { styled, withStyle } from '../styles/index.js';
-import { getMediaQueries } from '../helpers/responsive-helpers.js';
+import { getMediaQueryPageMargins, getMinimumPageMargins } from '../helpers/responsive-helpers.js';
 import { StyledListItem } from '../menu/index.js';
 import { KIND } from './constants.js';
+import { type StyleObject } from 'styletron-react';
 
 const StyledButton = styled<{ $isFocusVisible: boolean }>(
   'button',
@@ -41,49 +42,18 @@ const StyledButton = styled<{ $isFocusVisible: boolean }>(
   })
 );
 
-export const StyledRoot = styled<{}>('div', (props) => {
+export const StyledRoot = styled<{}>('div', (props): StyleObject => {
   const { $theme } = props;
-  const mediaQueries = getMediaQueries($theme.breakpoints);
-  const breakpoints = Object.values($theme.breakpoints).sort();
-  const margins = [];
-  if (Array.isArray($theme.grid.margins)) {
-    for (let i = 0; i < breakpoints.length; i++) {
-      const margin = $theme.grid.margins[i];
-      if (margin == null) {
-        margins.push($theme.grid.margins[$theme.grid.margins.length - 1]);
-      } else {
-        margins.push(margin);
-      }
-    }
-  } else {
-    for (let i = 0; i < breakpoints.length; i++) {
-      margins.push($theme.grid.margins);
-    }
-  }
-
-  const style = {
+  return {
+    ...getMediaQueryPageMargins($theme),
     ...$theme.typography.font300,
+    ...getMinimumPageMargins($theme.grid.margins),
     boxSizing: 'border-box',
     backgroundColor: $theme.colors.backgroundPrimary,
     borderBottomWidth: '1px',
     borderBottomStyle: 'solid',
     borderBottomColor: `${$theme.colors.borderOpaque}`,
-    paddingInlineStart: margins[0] + 'px',
-    paddingInlineEnd: margins[0] + 'px',
   };
-
-  for (let i = 1; i < mediaQueries.length; i++) {
-    const margin = Array.isArray($theme.grid.margins)
-      ? $theme.grid.margins[i]
-      : $theme.grid.margins;
-
-    style[mediaQueries[i]] = {
-      paddingInlineStart: margin + 'px',
-      paddingInlineEnd: margin + 'px',
-    };
-  }
-
-  return style;
 });
 
 export const StyledSubnavContainer = styled('div', {});

package/app-nav-bar/types.d.ts

@@ -1,7 +1,7 @@
 import type * as React from 'react';
 import type { POSITION } from './constants';
 import type { Override } from '../helpers/overrides';
-export declare type AppNavBarOverrides = {
+export type AppNavBarOverrides = {
     Root?: Override;
     AppName?: Override;
     DesktopMenu?: Override;
@@ -22,7 +22,7 @@ export declare type AppNavBarOverrides = {
     UserMenuButton?: Override;
     UserMenu?: Override;
 };
-export declare type NavItem = {
+export type NavItem = {
     active?: boolean;
     icon?: React.ComponentType<any>;
     info?: any;
@@ -30,18 +30,18 @@ export declare type NavItem = {
     children?: NavItem[];
     navExitIcon?: React.ComponentType<any>;
     navPosition?: {
-        desktop?: typeof POSITION[keyof typeof POSITION];
-        mobile?: typeof POSITION[keyof typeof POSITION];
+        desktop?: (typeof POSITION)[keyof typeof POSITION];
+        mobile?: (typeof POSITION)[keyof typeof POSITION];
     };
 };
-export declare type UserMenuProps = {
+export type UserMenuProps = {
     userItems?: NavItem[];
     username?: string;
     usernameSubtitle?: React.ReactNode;
     userImgUrl?: string;
     onUserItemSelect?: (a: NavItem) => unknown;
 };
-export declare type AppNavBarProps = {
+export type AppNavBarProps = {
     isMainItemActive?: (a: NavItem) => boolean;
     mainItems?: NavItem[];
     mapItemToNode?: (a: NavItem) => React.ReactNode;

package/app-nav-bar/user-menu.js

@@ -69,7 +69,7 @@ var UserMenuListItem = /*#__PURE__*/React.forwardRef(function (props, ref) {
     artwork: item.icon || null,
     artworkSize: _list.ARTWORK_SIZES.LARGE
   }), /*#__PURE__*/React.createElement(_list.ListItemLabel, null, mapItemToNode(item)));
-});
+}); // @ts-ignore
 
 var svgStyleOverride = function svgStyleOverride(_ref) {
   var $theme = _ref.$theme;
@@ -146,7 +146,8 @@ function UserMenuComponent(props) {
     content: function content(_ref3) {
       var close = _ref3.close;
       return /*#__PURE__*/React.createElement(UserMenu, _extends({
-        items: userItems,
+        items: userItems // @ts-ignore
+        ,
         onItemSelect: function onItemSelect(_ref4) {
           var item = _ref4.item;
           props.onItemSelect(item);

package/app-nav-bar/utils.d.ts

@@ -1,5 +1,5 @@
 import type { NavItem } from './types';
-declare type GetUniqueIdentifier = (a: NavItem) => string | number;
+type GetUniqueIdentifier = (a: NavItem) => string | number;
 export declare function defaultMapItemToNode(item: NavItem): string;
 export declare function mapItemsActive(items: NavItem[], predicate: (a: NavItem) => boolean): NavItem[];
 export declare function setItemActive(items: NavItem[], item: NavItem, getUniqueIdentifier?: GetUniqueIdentifier): NavItem[];

package/aspect-ratio-box/aspect-ratio-box-body.js

@@ -30,13 +30,17 @@ var AspectRatioBoxBody = function AspectRatioBoxBody(_ref) {
       width = _ref.width,
       restProps = _objectWithoutProperties(_ref, _excluded);
 
-  return /*#__PURE__*/React.createElement(_block.Block, _extends({
-    "data-baseweb": "aspect-ratio-box-body",
-    position: position || 'absolute',
-    top: top || 0,
-    bottom: bottom || 0,
-    width: width || '100%'
-  }, restProps));
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error todo(ts-migration) TS2322 Type '{ "data-baseweb": string; position: Responsive<Position>; top: string | 0 | Scale[]; bottom: string | 0 | Scale[]; width: string | Scale[]; } & Omit<...>' is not assignable to type 'IntrinsicAtt...
+    React.createElement(_block.Block, _extends({
+      "data-baseweb": "aspect-ratio-box-body",
+      position: position || 'absolute',
+      top: top || 0,
+      bottom: bottom || 0,
+      width: width || '100%'
+    }, restProps))
+  );
 };
 
 exports.AspectRatioBoxBody = AspectRatioBoxBody;

package/aspect-ratio-box/aspect-ratio-box.js

@@ -25,6 +25,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+// @ts-ignore
 var aspectRatioBoxStyle = function aspectRatioBoxStyle(_ref) {
   var $aspectRatio = _ref.$aspectRatio;
   return {

package/aspect-ratio-box/types.d.ts

@@ -1,6 +1,6 @@
 import type * as React from 'react';
 import type { BlockProps } from '../block';
-export declare type AspectRatioBoxProps<T extends React.ElementType = React.ElementType> = {
+export type AspectRatioBoxProps<T extends React.ElementType = React.ElementType> = {
     /** Aspect ratio is width divided by height. */
     readonly aspectRatio?: number;
 } & BlockProps<T>;

package/avatar/avatar.js

@@ -31,8 +31,10 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function getInitials(name) {
-  var words = name.split(' ');
+  var words = name.split(' '); // @ts-ignore
+
   var initials = words.map(function (word) {
     return word[0];
   });

package/avatar/styled-components.js

@@ -13,6 +13,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+// @ts-ignore
 function getSize(props) {
   var $size = props.$size,
       $theme = props.$theme;
@@ -49,7 +50,8 @@ var Initials = (0, _styles.styled)('div', function (props) {
 });
 exports.Initials = Initials;
 Initials.displayName = "Initials";
-Initials.displayName = 'Initials';
+Initials.displayName = 'Initials'; // @ts-ignore
+
 var Root = (0, _styles.styled)('div', function (props) {
   var $didImageFailToLoad = props.$didImageFailToLoad;
   var themedSize = getSize(props);

package/avatar/types.d.ts

@@ -1,21 +1,21 @@
 import type { Override } from '../helpers/overrides';
-export declare type InitialsStyleProps = {};
-export declare type AvatarStyleProps = {
+export type InitialsStyleProps = {};
+export type AvatarStyleProps = {
     $didImageFailToLoad?: boolean;
     $imageLoaded?: boolean;
     $size?: string;
 };
-export declare type RootStyleProps = {
+export type RootStyleProps = {
     $didImageFailToLoad: boolean;
     $size?: string;
 };
-export declare type StyleProps = RootStyleProps;
-export declare type AvatarOverrides = {
+export type StyleProps = RootStyleProps;
+export type AvatarOverrides = {
     Avatar?: Override;
     Initials?: Override;
     Root?: Override;
 };
-export declare type AvatarProps = {
+export type AvatarProps = {
     /** Bypasses initial generation from provided name with this value. */
     initials?: string;
     /** Defines an alternative text description of the image. */

package/badge/index.d.ts

@@ -6,18 +6,18 @@ export { HIERARCHY, SHAPE, COLOR, PLACEMENT } from './constants';
 export * from './styled-components';
 export * from './types';
 /** @deprecated use Hierarchy instead. To be removed in future versions.*/
-export declare type HierarchyT = Hierarchy;
+export type HierarchyT = Hierarchy;
 /** @deprecated use Shape instead. To be removed in future versions.*/
-export declare type ShapeT = Shape;
+export type ShapeT = Shape;
 /** @deprecated use Color instead. To be removed in future versions.*/
-export declare type ColorT = Color;
+export type ColorT = Color;
 /** @deprecated use Placement instead. To be removed in future versions.*/
-export declare type PlacementT = Placement;
+export type PlacementT = Placement;
 /** @deprecated use BadgeOverrides instead. To be removed in future versions.*/
-export declare type BadgeOverridesT = BadgeOverrides;
+export type BadgeOverridesT = BadgeOverrides;
 /** @deprecated use BadgeProps instead. To be removed in future versions.*/
-export declare type BadgePropsT = BadgeProps;
+export type BadgePropsT = BadgeProps;
 /** @deprecated use NotificationCircleProps instead. To be removed in future versions.*/
-export declare type NotificationCirclePropsT = NotificationCircleProps;
+export type NotificationCirclePropsT = NotificationCircleProps;
 /** @deprecated use HintDotProps instead. To be removed in future versions.*/
-export declare type HintDotPropsT = HintDotProps;
+export type HintDotPropsT = HintDotProps;

package/badge/styled-components.js

@@ -17,6 +17,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+// @ts-ignore
 function getColorStyles(_ref) {
   var _HIERARCHY$primary, _HIERARCHY$secondary, _COLOR_STYLES;
 
@@ -40,20 +41,21 @@ function getColorStyles(_ref) {
     backgroundColor: $theme.colors.backgroundWarning
   }), _HIERARCHY$primary)), _defineProperty(_COLOR_STYLES, _constants.HIERARCHY.secondary, (_HIERARCHY$secondary = {}, _defineProperty(_HIERARCHY$secondary, _constants.COLOR.accent, {
     color: $theme.colors.contentAccent,
-    backgroundColor: $theme.colors.backgroundLightAccent
+    backgroundColor: $theme.colors.backgroundAccentLight
   }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.primary, {
     color: $theme.colors.primaryA,
     backgroundColor: $theme.colors.backgroundSecondary
   }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.positive, {
     color: $theme.colors.contentPositive,
-    backgroundColor: $theme.colors.backgroundLightPositive
+    backgroundColor: $theme.colors.backgroundPositiveLight
   }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.negative, {
     color: $theme.colors.contentNegative,
-    backgroundColor: $theme.colors.backgroundLightNegative
+    backgroundColor: $theme.colors.backgroundNegativeLight
   }), _defineProperty(_HIERARCHY$secondary, _constants.COLOR.warning, {
     color: $theme.colors.contentWarning,
-    backgroundColor: $theme.colors.backgroundLightWarning
-  }), _HIERARCHY$secondary)), _COLOR_STYLES);
+    backgroundColor: $theme.colors.backgroundWarningLight
+  }), _HIERARCHY$secondary)), _COLOR_STYLES); // @ts-ignore
+
   return COLOR_STYLES[$hierarchy][$color];
 }
 
@@ -230,6 +232,7 @@ var StyledHintDot = (0, _styles.styled)('div', function (_ref5) {
       $hidden = _ref5.$hidden;
   return _objectSpread({
     visibility: $hidden ? 'hidden' : 'inherit',
+    // @ts-ignore
     backgroundColor: $theme.colors[$color],
     boxSizing: 'content-box',
     height: '8px',