baseui 12.1.3 → 13.0.0

package/esm/tabs-motion/tabs.js

@@ -54,7 +54,7 @@ import { getTabId, getTabPanelId, isVertical, isHorizontal, isRTL } from './util
 var KEYBOARD_ACTION = {
   next: 'next',
   previous: 'previous'
-};
+}; // @ts-ignore
 
 var getLayoutParams = function getLayoutParams(el, orientation) {
   if (!el) {
@@ -80,7 +80,8 @@ var getLayoutParams = function getLayoutParams(el, orientation) {
       distance: el.offsetLeft
     };
   }
-};
+}; // @ts-ignore
+
 
 var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode) {
   var _targetNode$parentNod = targetNode.parentNode.getBoundingClientRect(),
@@ -110,7 +111,8 @@ var scrollParentToCentreTarget = function scrollParentToCentreTarget(targetNode)
   }; // ignore out of bounds, the browser will manage this for us
 
   targetNode.parentNode.scroll(target.x, target.y);
-};
+}; // @ts-ignore
+
 
 function RenderEnhancer(_ref) {
   var Enhancer = _ref.Enhancer;
@@ -178,7 +180,12 @@ export function Tabs(_ref2) {
   var _getOverrides9 = getOverrides(overrides.EndEnhancerContainer, StyledEndEnhancerContainer),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
       EndEnhancerContainer = _getOverrides10[0],
-      endEnhancerContainerProps = _getOverrides10[1]; // Count key updates
+      endEnhancerContainerProps = _getOverrides10[1];
+
+  var _getOverrides11 = getOverrides(overrides.TabBar, StyledTabBar),
+      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
+      TabBar = _getOverrides12[0],
+      tabBarProps = _getOverrides12[1]; // Count key updates
   // We disable a few things until after first mount:
   // - the highlight animation, avoiding an initial slide-in
   // - smooth scrolling active tab into view
@@ -284,10 +291,10 @@ export function Tabs(_ref2) {
       }
     }
   }, [orientation, theme.direction]);
-  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(StyledTabBar, {
+  return /*#__PURE__*/React.createElement(Root, _extends({}, sharedStylingProps, RootProps), /*#__PURE__*/React.createElement(TabBar, _extends({
     $hasEndEnhancer: Boolean(endEnhancer),
     $orientation: orientation
-  }, /*#__PURE__*/React.createElement(TabList, _extends({
+  }, tabBarProps), /*#__PURE__*/React.createElement(TabList, _extends({
     "data-baseweb": "tab-list",
     role: "tablist",
     "aria-orientation": orientation
@@ -400,15 +407,15 @@ function InternalTab(_ref3) {
   var TabOverrides = overrides.Tab,
       ArtworkContainerOverrides = overrides.ArtworkContainer;
 
-  var _getOverrides11 = getOverrides(TabOverrides, StyledTab),
-      _getOverrides12 = _slicedToArray(_getOverrides11, 2),
-      Tab = _getOverrides12[0],
-      TabProps = _getOverrides12[1];
-
-  var _getOverrides13 = getOverrides(ArtworkContainerOverrides, StyledArtworkContainer),
+  var _getOverrides13 = getOverrides(TabOverrides, StyledTab),
       _getOverrides14 = _slicedToArray(_getOverrides13, 2),
-      ArtworkContainer = _getOverrides14[0],
-      ArtworkContainerProps = _getOverrides14[1]; // Keyboard focus styling
+      Tab = _getOverrides14[0],
+      TabProps = _getOverrides14[1];
+
+  var _getOverrides15 = getOverrides(ArtworkContainerOverrides, StyledArtworkContainer),
+      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
+      ArtworkContainer = _getOverrides16[0],
+      ArtworkContainerProps = _getOverrides16[1]; // Keyboard focus styling
 
 
   var _React$useState5 = React.useState(false),
@@ -492,6 +499,7 @@ function InternalTab(_ref3) {
     $focusVisible: focusVisible,
     $isActive: isActive
   }, sharedStylingProps, restProps, TabProps, {
+    // @ts-ignore
     onClick: function onClick(event) {
       if (typeof onChange === 'function') onChange({
         activeKey: key
@@ -524,10 +532,10 @@ function InternalTabPanel(_ref4) {
       children = props.children;
   var TabPanelOverrides = overrides.TabPanel;
 
-  var _getOverrides15 = getOverrides(TabPanelOverrides, StyledTabPanel),
-      _getOverrides16 = _slicedToArray(_getOverrides15, 2),
-      TabPanel = _getOverrides16[0],
-      TabPanelProps = _getOverrides16[1];
+  var _getOverrides17 = getOverrides(TabPanelOverrides, StyledTabPanel),
+      _getOverrides18 = _slicedToArray(_getOverrides17, 2),
+      TabPanel = _getOverrides18[0],
+      TabPanelProps = _getOverrides18[1];
 
   return /*#__PURE__*/React.createElement(TabPanel, _extends({
     "data-baseweb": "tab-panel",

package/esm/tag/styled-components.js

@@ -23,30 +23,38 @@ export function customOnRamp(color, unit) {
       return 'white';
 
     case '50':
+      // @ts-ignore
       return tint(0.8, color);
 
     case '100':
+      // @ts-ignore
       return tint(0.6, color);
 
     case '200':
+      // @ts-ignore
       return tint(0.4, color);
 
     case '300':
+      // @ts-ignore
       return tint(0.2, color);
 
     case '400':
       return color;
 
     case '500':
+      // @ts-ignore
       return shade(0.2, color);
 
     case '600':
+      // @ts-ignore
       return shade(0.4, color);
 
     case '700':
+      // @ts-ignore
       return shade(0.6, color);
 
     case '800':
+      // @ts-ignore
       return shade(0.8, color);
 
     case '1000':
@@ -61,6 +69,7 @@ var COLOR_STATE = {
   solid: 'solid',
   outline: 'outline'
 }; // Probably best to bake this into the theme once we hit our next major.
+// @ts-ignore
 
 var pick = function pick(theme, light, dark) {
   return theme.name && theme.name.includes('dark') ? dark : light;
@@ -69,6 +78,7 @@ var pick = function pick(theme, light, dark) {
 var neutralColorStates = (_neutralColorStates = {}, _defineProperty(_neutralColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagNeutralFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedDisabled
   };
@@ -76,11 +86,13 @@ var neutralColorStates = (_neutralColorStates = {}, _defineProperty(_neutralColo
   return {
     color: theme.colors.tagNeutralSolidFont,
     backgroundColor: theme.colors.tagNeutralSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_neutralColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagNeutralOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedBackground
   };
@@ -88,6 +100,7 @@ var neutralColorStates = (_neutralColorStates = {}, _defineProperty(_neutralColo
 var primaryColorStates = (_primaryColorStates = {}, _defineProperty(_primaryColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagPrimaryFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedDisabled
   };
@@ -95,11 +108,13 @@ var primaryColorStates = (_primaryColorStates = {}, _defineProperty(_primaryColo
   return {
     color: theme.colors.tagPrimarySolidFont,
     backgroundColor: theme.colors.tagPrimarySolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_primaryColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagPrimaryOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedBackground
   };
@@ -107,6 +122,7 @@ var primaryColorStates = (_primaryColorStates = {}, _defineProperty(_primaryColo
 var accentColorStates = (_accentColorStates = {}, _defineProperty(_accentColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagAccentFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedDisabled
   };
@@ -114,11 +130,13 @@ var accentColorStates = (_accentColorStates = {}, _defineProperty(_accentColorSt
   return {
     color: theme.colors.tagAccentSolidFont,
     backgroundColor: theme.colors.tagAccentSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_accentColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagAccentOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedBackground
   };
@@ -126,6 +144,7 @@ var accentColorStates = (_accentColorStates = {}, _defineProperty(_accentColorSt
 var positiveColorStates = (_positiveColorStates = {}, _defineProperty(_positiveColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagPositiveFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedDisabled
   };
@@ -133,11 +152,13 @@ var positiveColorStates = (_positiveColorStates = {}, _defineProperty(_positiveC
   return {
     color: theme.colors.tagPositiveSolidFont,
     backgroundColor: theme.colors.tagPositiveSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_positiveColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagPositiveOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedBackground
   };
@@ -145,6 +166,7 @@ var positiveColorStates = (_positiveColorStates = {}, _defineProperty(_positiveC
 var warningColorStates = (_warningColorStates = {}, _defineProperty(_warningColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagWarningFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedDisabled
   };
@@ -152,11 +174,13 @@ var warningColorStates = (_warningColorStates = {}, _defineProperty(_warningColo
   return {
     color: theme.colors.tagWarningSolidFont,
     backgroundColor: theme.colors.tagWarningSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_warningColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagWarningOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedBackground
   };
@@ -164,6 +188,7 @@ var warningColorStates = (_warningColorStates = {}, _defineProperty(_warningColo
 var negativeColorStates = (_negativeColorStates = {}, _defineProperty(_negativeColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: theme.colors.tagNegativeFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedDisabled
   };
@@ -171,11 +196,13 @@ var negativeColorStates = (_negativeColorStates = {}, _defineProperty(_negativeC
   return {
     color: theme.colors.tagNegativeSolidFont,
     backgroundColor: theme.colors.tagNegativeSolidBackground,
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_negativeColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: theme.colors.tagNegativeOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedBackground
   };
@@ -183,6 +210,7 @@ var negativeColorStates = (_negativeColorStates = {}, _defineProperty(_negativeC
 var orangeColorStates = (_orangeColorStates = {}, _defineProperty(_orangeColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: pick(theme, colorTokens.orange200, colorTokens.orange600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.orange200, colorTokens.orange700)
   };
@@ -190,11 +218,13 @@ var orangeColorStates = (_orangeColorStates = {}, _defineProperty(_orangeColorSt
   return {
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.orange400, colorTokens.orange500),
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_orangeColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: pick(theme, colorTokens.orange400, colorTokens.orange300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.orange200, colorTokens.orange500)
   };
@@ -202,6 +232,7 @@ var orangeColorStates = (_orangeColorStates = {}, _defineProperty(_orangeColorSt
 var purpleColorStates = (_purpleColorStates = {}, _defineProperty(_purpleColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: pick(theme, colorTokens.purple200, colorTokens.purple600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.purple200, colorTokens.purple700)
   };
@@ -209,11 +240,13 @@ var purpleColorStates = (_purpleColorStates = {}, _defineProperty(_purpleColorSt
   return {
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.purple400, colorTokens.purple500),
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_purpleColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: pick(theme, colorTokens.purple400, colorTokens.purple300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.purple200, colorTokens.purple500)
   };
@@ -221,6 +254,7 @@ var purpleColorStates = (_purpleColorStates = {}, _defineProperty(_purpleColorSt
 var brownColorStates = (_brownColorStates = {}, _defineProperty(_brownColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: pick(theme, colorTokens.brown200, colorTokens.brown600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.brown200, colorTokens.brown700)
   };
@@ -228,11 +262,13 @@ var brownColorStates = (_brownColorStates = {}, _defineProperty(_brownColorState
   return {
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.brown400, colorTokens.brown500),
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_brownColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: pick(theme, colorTokens.brown400, colorTokens.brown300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.brown200, colorTokens.brown500)
   };
@@ -240,6 +276,7 @@ var brownColorStates = (_brownColorStates = {}, _defineProperty(_brownColorState
 var customColorStates = (_customColorStates = {}, _defineProperty(_customColorStates, COLOR_STATE.disabled, function (theme, color) {
   return {
     color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit)
   };
@@ -247,16 +284,18 @@ var customColorStates = (_customColorStates = {}, _defineProperty(_customColorSt
   return {
     color: customOnRamp(color, theme.colors.tagSolidFontRampUnit),
     backgroundColor: customOnRamp(color, theme.colors.tagSolidRampUnit),
+    // @ts-ignore
     borderColor: null
   };
 }), _defineProperty(_customColorStates, COLOR_STATE.outline, function (theme, color) {
   return {
     color: customOnRamp(color, theme.colors.tagOutlinedFontRampUnit),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagOutlinedRampUnit)
   };
 }), _customColorStates);
-var colorMap = (_colorMap = {}, _defineProperty(_colorMap, KIND.neutral, neutralColorStates), _defineProperty(_colorMap, KIND.primary, primaryColorStates), _defineProperty(_colorMap, KIND.accent, accentColorStates), _defineProperty(_colorMap, KIND.positive, positiveColorStates), _defineProperty(_colorMap, KIND.warning, warningColorStates), _defineProperty(_colorMap, KIND.negative, negativeColorStates), _defineProperty(_colorMap, KIND.black, primaryColorStates), _defineProperty(_colorMap, KIND.blue, accentColorStates), _defineProperty(_colorMap, KIND.green, positiveColorStates), _defineProperty(_colorMap, KIND.red, negativeColorStates), _defineProperty(_colorMap, KIND.yellow, warningColorStates), _defineProperty(_colorMap, KIND.orange, orangeColorStates), _defineProperty(_colorMap, KIND.purple, purpleColorStates), _defineProperty(_colorMap, KIND.brown, brownColorStates), _defineProperty(_colorMap, KIND.custom, customColorStates), _colorMap);
+var colorMap = (_colorMap = {}, _defineProperty(_colorMap, KIND.neutral, neutralColorStates), _defineProperty(_colorMap, KIND.primary, primaryColorStates), _defineProperty(_colorMap, KIND.accent, accentColorStates), _defineProperty(_colorMap, KIND.positive, positiveColorStates), _defineProperty(_colorMap, KIND.warning, warningColorStates), _defineProperty(_colorMap, KIND.negative, negativeColorStates), _defineProperty(_colorMap, KIND.black, primaryColorStates), _defineProperty(_colorMap, KIND.blue, accentColorStates), _defineProperty(_colorMap, KIND.green, positiveColorStates), _defineProperty(_colorMap, KIND.red, negativeColorStates), _defineProperty(_colorMap, KIND.yellow, warningColorStates), _defineProperty(_colorMap, KIND.orange, orangeColorStates), _defineProperty(_colorMap, KIND.purple, purpleColorStates), _defineProperty(_colorMap, KIND.brown, brownColorStates), _defineProperty(_colorMap, KIND.custom, customColorStates), _colorMap); // @ts-ignore
 
 var getColorStateFromProps = function getColorStateFromProps(props) {
   if (props.$disabled) return COLOR_STATE.disabled;
@@ -328,7 +367,7 @@ export var Root = styled('span', function (props) {
       $size = _props$$size2 === void 0 ? SIZE.small : _props$$size2;
   var borderRadius = $theme.borders.tagBorderRadius;
   var paddingMagnitude = (_SIZE$small$SIZE$medi2 = {}, _defineProperty(_SIZE$small$SIZE$medi2, SIZE.small, $theme.sizing.scale300), _defineProperty(_SIZE$small$SIZE$medi2, SIZE.medium, $theme.sizing.scale500), _defineProperty(_SIZE$small$SIZE$medi2, SIZE.large, $theme.sizing.scale600), _SIZE$small$SIZE$medi2)[$size];
-  var borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px';
+  var borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px'; // @ts-ignore
 
   var _colorMap$$kind$getCo = colorMap[$kind][getColorStateFromProps(props)]($theme, $color),
       color = _colorMap$$kind$getCo.color,

package/esm/tag/tag.js

@@ -30,6 +30,7 @@ import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
 // Previously, Tag used a hardcoded SVG as its 'close' icon. Replacing it with
 // Delete requires modifying Delete's viewbox to prevent visual regressions.
+// @ts-ignore
 var ModifiedViewBoxDeleteIcon = function ModifiedViewBoxDeleteIcon(props) {
   return /*#__PURE__*/React.createElement(DeleteIcon, _extends({
     viewBox: "5 5 13.186 13.186"
@@ -138,6 +139,7 @@ var Tag = /*#__PURE__*/React.forwardRef(function (props, ref) {
     onKeyDown: handleKeyDown
   };
   var actionHandlers = disabled ? {} : {
+    // @ts-ignore
     onClick: function onClick(event) {
       // we don't want onClick to be called when the close icon is clicked
       event.stopPropagation();

package/esm/textarea/stateful-textarea.js

@@ -8,7 +8,11 @@ import * as React from 'react';
 import StatefulContainer from './stateful-container';
 import Textarea from './textarea';
 export default function StatefulTextarea(props) {
-  return /*#__PURE__*/React.createElement(StatefulContainer, props, function (childrenProps) {
-    return /*#__PURE__*/React.createElement(Textarea, childrenProps);
-  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(StatefulContainer, props, function (childrenProps) {
+      return /*#__PURE__*/React.createElement(Textarea, childrenProps);
+    })
+  );
 }

package/esm/textarea/textarea.js

@@ -70,7 +70,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
       _this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
 
       _this.props.onFocus(e);
     });
@@ -78,7 +79,8 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "onBlur", function (e) {
       _this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
 
       _this.props.onBlur(e);
     });

package/esm/themes/dark-theme/color-component-tokens.js

@@ -24,7 +24,7 @@ export default (function () {
     bannerActionHighPositive: themePrimitives.positive600,
     bannerActionHighWarning: themePrimitives.warning600,
     // Buttons
-    buttonPrimaryFill: themePrimitives.primary,
+    buttonPrimaryFill: themePrimitives.primaryA,
     buttonPrimaryText: themePrimitives.black,
     buttonPrimaryHover: themePrimitives.primary100,
     buttonPrimaryActive: themePrimitives.primary200,
@@ -63,7 +63,7 @@ export default (function () {
     calendarBackground: themePrimitives.mono800,
     calendarForeground: themePrimitives.white,
     calendarForegroundDisabled: themePrimitives.mono300,
-    calendarHeaderBackground: themePrimitives.primary700,
+    calendarHeaderBackground: themePrimitives.mono800,
     calendarHeaderForeground: themePrimitives.primary,
     calendarHeaderBackgroundActive: themePrimitives.primary600,
     calendarHeaderForegroundDisabled: themePrimitives.primary500,

package/esm/themes/dark-theme/color-semantic-tokens.js

@@ -31,26 +31,31 @@ export default (function () {
     contentInverseTertiary: colors.gray600,
     // Border
     borderOpaque: colors.gray700,
+    // @ts-ignore
     borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
     borderSelected: foundation.primaryA,
     borderInverseOpaque: colors.gray400,
+    // @ts-ignore
     borderInverseTransparent: hexToRgba(foundation.primaryB, '0.2'),
     borderInverseSelected: foundation.primaryB
   };
   var coreExtensions = {
     // Backgrounds
     backgroundStateDisabled: colors.gray800,
+    // @ts-ignore
     backgroundOverlayDark: hexToRgba(colors.black, '0.3'),
+    // @ts-ignore
     backgroundOverlayLight: hexToRgba(colors.black, '0.08'),
+    // @ts-ignore
     backgroundOverlayArt: hexToRgba(colors.black, '0.16'),
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
     backgroundPositive: colors.green500,
-    backgroundLightAccent: colors.blue700,
-    backgroundLightPositive: colors.green700,
-    backgroundLightNegative: colors.red700,
-    backgroundLightWarning: colors.yellow700,
+    backgroundAccentLight: colors.blue700,
+    backgroundPositiveLight: colors.green700,
+    backgroundNegativeLight: colors.red700,
+    backgroundWarningLight: colors.yellow700,
     backgroundAlwaysDark: colors.gray900,
     backgroundAlwaysLight: colors.gray100,
     // Content
@@ -68,6 +73,9 @@ export default (function () {
     borderNegative: colors.red500,
     borderWarning: colors.yellow500,
     borderPositive: colors.green500,
+    borderNegativeLight: colors.red200,
+    borderWarningLight: colors.yellow200,
+    borderPositiveLight: colors.green200,
     // Programs
     safety: colors.blue400,
     eatsGreen400: colors.green400,

package/esm/themes/light-theme/color-semantic-tokens.js

@@ -31,26 +31,31 @@ export default (function () {
     contentInverseTertiary: colors.gray400,
     // Border
     borderOpaque: colors.gray200,
+    // @ts-ignore
     borderTransparent: hexToRgba(foundation.primaryA, '0.08'),
     borderSelected: foundation.primaryA,
     borderInverseOpaque: colors.gray700,
+    // @ts-ignore
     borderInverseTransparent: hexToRgba(foundation.primaryB, '0.2'),
     borderInverseSelected: foundation.primaryB
   };
   var coreExtensions = {
     // Backgrounds
     backgroundStateDisabled: colors.gray50,
+    // @ts-ignore
     backgroundOverlayDark: hexToRgba(colors.black, '0.3'),
+    // @ts-ignore
     backgroundOverlayLight: hexToRgba(colors.black, '0.08'),
+    // @ts-ignore
     backgroundOverlayArt: hexToRgba(colors.black, '0.00'),
     backgroundAccent: foundation.accent,
     backgroundNegative: foundation.negative,
     backgroundWarning: foundation.warning,
     backgroundPositive: colors.green400,
-    backgroundLightAccent: colors.blue50,
-    backgroundLightNegative: colors.red50,
-    backgroundLightWarning: colors.yellow50,
-    backgroundLightPositive: colors.green50,
+    backgroundAccentLight: colors.blue50,
+    backgroundNegativeLight: colors.red50,
+    backgroundWarningLight: colors.yellow50,
+    backgroundPositiveLight: colors.green50,
     backgroundAlwaysDark: colors.black,
     backgroundAlwaysLight: colors.white,
     // Content
@@ -68,6 +73,9 @@ export default (function () {
     borderNegative: colors.red200,
     borderWarning: colors.yellow200,
     borderPositive: colors.green200,
+    borderNegativeLight: colors.red200,
+    borderWarningLight: colors.yellow200,
+    borderPositiveLight: colors.green200,
     // Programs
     safety: colors.blue400,
     eatsGreen400: colors.green400,

package/esm/timepicker/timepicker.js

@@ -58,6 +58,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
 
   var _super = _createSuper(TimePicker);
 
+  // @ts-ignore
   function TimePicker(props) {
     var _this;
 
@@ -94,7 +95,8 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       var _this$dateHelpers$sec = _this.dateHelpers.secondsToHourMinute(seconds),
           _this$dateHelpers$sec2 = _slicedToArray(_this$dateHelpers$sec, 2),
           hours = _this$dateHelpers$sec2[0],
-          minutes = _this$dateHelpers$sec2[1];
+          minutes = _this$dateHelpers$sec2[1]; // @ts-ignore
+
 
       var zeroPrefix = function zeroPrefix(n) {
         return n < 10 ? "0".concat(n) : n;
@@ -137,6 +139,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       switch (format) {
         case '24':
           {
+            // @ts-ignore
             hoursMinutes = [{
               hours: hours,
               minutes: minutes
@@ -151,15 +154,18 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
             var meridiem = match[3]; // if there's no AM/PM, add both AM and PM options
 
             if (!meridiem) {
-              hoursMinutes = [{
+              hoursMinutes = [// @ts-ignore
+              {
                 hours: twelveHours,
                 minutes: minutes
-              }, {
+              }, // @ts-ignore
+              {
                 hours: twelveHours + 12,
                 minutes: minutes
               }];
             } else {
-              var twentyFourHours = meridiem.toLowerCase()[0] === 'a' ? twelveHours : twelveHours + 12;
+              var twentyFourHours = meridiem.toLowerCase()[0] === 'a' ? twelveHours : twelveHours + 12; // @ts-ignore
+
               hoursMinutes = [{
                 hours: twentyFourHours,
                 minutes: minutes
@@ -266,6 +272,7 @@ var TimePicker = /*#__PURE__*/function (_React$Component) {
       var options = [];
 
       for (var i = timeWindow.start; i < timeWindow.end; i += step) {
+        // @ts-ignore
         options.push(i);
       }
 

package/esm/timezonepicker/timezone-picker.js

@@ -207,6 +207,7 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
 
       if (this.props.mapLabels) {
         options = options.map(function (option) {
+          // @ts-ignore
           option.label = _this3.props.mapLabels(option);
           return option;
         });
@@ -220,7 +221,8 @@ var TimezonePicker = /*#__PURE__*/function (_React$Component) {
           disabled: _this3.props.disabled,
           error: _this3.props.error,
           positive: _this3.props.positive,
-          size: _this3.props.size,
+          size: _this3.props.size // @ts-ignore
+          ,
           onChange: function onChange(params) {
             if (params.type === 'clear') {
               _this3.setState({

package/esm/toast/toast.js

@@ -131,15 +131,19 @@ var Toast = /*#__PURE__*/function (_React$Component) {
     });
 
     _defineProperty(_assertThisInitialized(_this), "onFocus", function (e) {
-      if (!_this.state.isVisible) return;
-      clearTimeout(_this.autoHideTimeout);
+      if (!_this.state.isVisible) return; // @ts-ignore
+
+      clearTimeout(_this.autoHideTimeout); // @ts-ignore
+
       clearTimeout(_this.animateOutCompleteTimer);
       typeof _this.props.onFocus === 'function' && _this.props.onFocus(e);
     });
 
     _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function (e) {
-      if (!_this.state.isVisible) return;
-      clearTimeout(_this.autoHideTimeout);
+      if (!_this.state.isVisible) return; // @ts-ignore
+
+      clearTimeout(_this.autoHideTimeout); // @ts-ignore
+
       clearTimeout(_this.animateOutCompleteTimer);
       typeof _this.props.onMouseEnter === 'function' && _this.props.onMouseEnter(e);
     });
@@ -290,7 +294,8 @@ var Toast = /*#__PURE__*/function (_React$Component) {
           onMouseLeave: _this2.onMouseLeave
         }), /*#__PURE__*/React.createElement(InnerContainer, _extends({}, sharedProps, innerContainerProps), typeof children === 'function' ? children({
           dismiss: _this2.dismiss
-        }) : children), closeable ? /*#__PURE__*/React.createElement(DeleteIcon, _extends({
+        }) : children), closeable ? /*#__PURE__*/React.createElement(DeleteIcon // @ts-ignore
+        , _extends({
           ref: _this2.closeRef,
           role: "button",
           tabIndex: 0,