baseui 12.1.3 → 13.0.0

package/es/tag/styled-components.js

@@ -15,30 +15,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':
@@ -53,202 +61,263 @@ const COLOR_STATE = {
   solid: 'solid',
   outline: 'outline'
 }; // Probably best to bake this into the theme once we hit our next major.
+// @ts-ignore
 
 const pick = (theme, light, dark) => theme.name && theme.name.includes('dark') ? dark : light;
 
 const neutralColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagNeutralFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagNeutralSolidFont,
     backgroundColor: theme.colors.tagNeutralSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagNeutralOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNeutralOutlinedBackground
   })
 };
 const primaryColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagPrimaryFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagPrimarySolidFont,
     backgroundColor: theme.colors.tagPrimarySolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagPrimaryOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPrimaryOutlinedBackground
   })
 };
 const accentColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagAccentFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagAccentSolidFont,
     backgroundColor: theme.colors.tagAccentSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagAccentOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagAccentOutlinedBackground
   })
 };
 const positiveColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagPositiveFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagPositiveSolidFont,
     backgroundColor: theme.colors.tagPositiveSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagPositiveOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagPositiveOutlinedBackground
   })
 };
 const warningColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagWarningFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagWarningSolidFont,
     backgroundColor: theme.colors.tagWarningSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagWarningOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagWarningOutlinedBackground
   })
 };
 const negativeColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: theme.colors.tagNegativeFontDisabled,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedDisabled
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: theme.colors.tagNegativeSolidFont,
     backgroundColor: theme.colors.tagNegativeSolidBackground,
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: theme.colors.tagNegativeOutlinedFont,
+    // @ts-ignore
     backgroundColor: null,
     borderColor: theme.colors.tagNegativeOutlinedBackground
   })
 };
 const orangeColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.orange200, colorTokens.orange600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.orange200, colorTokens.orange700)
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.orange400, colorTokens.orange500),
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.orange400, colorTokens.orange300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.orange200, colorTokens.orange500)
   })
 };
 const purpleColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.purple200, colorTokens.purple600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.purple200, colorTokens.purple700)
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.purple400, colorTokens.purple500),
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.purple400, colorTokens.purple300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.purple200, colorTokens.purple500)
   })
 };
 const brownColorStates = {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: pick(theme, colorTokens.brown200, colorTokens.brown600),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.brown200, colorTokens.brown700)
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: colorTokens.white,
     backgroundColor: pick(theme, colorTokens.brown400, colorTokens.brown500),
+    // @ts-ignore
     borderColor: null
   }),
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: pick(theme, colorTokens.brown400, colorTokens.brown300),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: pick(theme, colorTokens.brown200, colorTokens.brown500)
   })
 };
 const customColorStates = {
+  // @ts-ignore
   [COLOR_STATE.disabled]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagFontDisabledRampUnit),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagSolidDisabledRampUnit)
   }),
+  // @ts-ignore
   [COLOR_STATE.solid]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagSolidFontRampUnit),
     backgroundColor: customOnRamp(color, theme.colors.tagSolidRampUnit),
+    // @ts-ignore
     borderColor: null
   }),
+  // @ts-ignore
   [COLOR_STATE.outline]: (theme, color) => ({
     color: customOnRamp(color, theme.colors.tagOutlinedFontRampUnit),
+    // @ts-ignore
     backgroundColor: null,
     borderColor: customOnRamp(color, theme.colors.tagOutlinedRampUnit)
   })
@@ -269,7 +338,7 @@ const colorMap = {
   [KIND.purple]: purpleColorStates,
   [KIND.brown]: brownColorStates,
   [KIND.custom]: customColorStates
-};
+}; // @ts-ignore
 
 const getColorStateFromProps = props => {
   if (props.$disabled) return COLOR_STATE.disabled;
@@ -358,7 +427,8 @@ export const Root = styled('span', props => {
     [SIZE.medium]: $theme.sizing.scale500,
     [SIZE.large]: $theme.sizing.scale600
   }[$size];
-  const borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px';
+  const borderWidth = !$disabled && $variant === VARIANT.solid ? 0 : '2px'; // @ts-ignore
+
   const {
     color,
     backgroundColor,

package/es/tag/tag.js

@@ -16,6 +16,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
 const ModifiedViewBoxDeleteIcon = props => /*#__PURE__*/React.createElement(DeleteIcon, _extends({
   viewBox: "5 5 13.186 13.186"
 }, props));
@@ -88,6 +89,7 @@ const Tag = /*#__PURE__*/React.forwardRef((props, ref) => {
     onKeyDown: handleKeyDown
   };
   const actionHandlers = disabled ? {} : {
+    // @ts-ignore
     onClick: event => {
       // we don't want onClick to be called when the close icon is clicked
       event.stopPropagation();

package/es/textarea/stateful-textarea.js

@@ -8,5 +8,9 @@ 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, childrenProps => /*#__PURE__*/React.createElement(Textarea, childrenProps));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement(StatefulContainer, props, childrenProps => /*#__PURE__*/React.createElement(Textarea, childrenProps))
+  );
 }

package/es/textarea/textarea.js

@@ -24,14 +24,16 @@ class Textarea extends React.Component {
     _defineProperty(this, "onFocus", e => {
       this.setState({
         isFocused: true
-      });
+      }); // @ts-ignore
+
       this.props.onFocus(e);
     });
 
     _defineProperty(this, "onBlur", e => {
       this.setState({
         isFocused: false
-      });
+      }); // @ts-ignore
+
       this.props.onBlur(e);
     });
   }

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

@@ -22,7 +22,7 @@ export default ((themePrimitives = colorTokens) => ({
   bannerActionHighPositive: themePrimitives.positive600,
   bannerActionHighWarning: themePrimitives.warning600,
   // Buttons
-  buttonPrimaryFill: themePrimitives.primary,
+  buttonPrimaryFill: themePrimitives.primaryA,
   buttonPrimaryText: themePrimitives.black,
   buttonPrimaryHover: themePrimitives.primary100,
   buttonPrimaryActive: themePrimitives.primary200,
@@ -61,7 +61,7 @@ export default ((themePrimitives = colorTokens) => ({
   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/es/themes/dark-theme/color-semantic-tokens.js

@@ -25,26 +25,31 @@ foundation = colorTokens) => {
     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
   };
   const 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
@@ -62,6 +67,9 @@ foundation = colorTokens) => {
     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/es/themes/light-theme/color-semantic-tokens.js

@@ -25,26 +25,31 @@ foundation = colorTokens) => {
     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
   };
   const 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
@@ -62,6 +67,9 @@ foundation = colorTokens) => {
     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/es/timepicker/timepicker.js

@@ -20,6 +20,7 @@ const DAY = HOUR * 24;
 const NOON = DAY / 2;
 
 class TimePicker extends React.Component {
+  // @ts-ignore
   constructor(props) {
     super(props);
 
@@ -48,7 +49,7 @@ class TimePicker extends React.Component {
     });
 
     _defineProperty(this, "secondsToLabel", (seconds, format) => {
-      let [hours, minutes] = this.dateHelpers.secondsToHourMinute(seconds);
+      let [hours, minutes] = this.dateHelpers.secondsToHourMinute(seconds); // @ts-ignore
 
       const zeroPrefix = n => n < 10 ? `0${n}` : n;
 
@@ -88,6 +89,7 @@ class TimePicker extends React.Component {
       switch (format) {
         case '24':
           {
+            // @ts-ignore
             hoursMinutes = [{
               hours,
               minutes
@@ -102,15 +104,18 @@ class TimePicker extends React.Component {
             const meridiem = match[3]; // if there's no AM/PM, add both AM and PM options
 
             if (!meridiem) {
-              hoursMinutes = [{
+              hoursMinutes = [// @ts-ignore
+              {
                 hours: twelveHours,
                 minutes
-              }, {
+              }, // @ts-ignore
+              {
                 hours: twelveHours + 12,
                 minutes
               }];
             } else {
-              const twentyFourHours = meridiem.toLowerCase()[0] === 'a' ? twelveHours : twelveHours + 12;
+              const twentyFourHours = meridiem.toLowerCase()[0] === 'a' ? twelveHours : twelveHours + 12; // @ts-ignore
+
               hoursMinutes = [{
                 hours: twentyFourHours,
                 minutes
@@ -207,6 +212,7 @@ class TimePicker extends React.Component {
       const options = [];
 
       for (let i = timeWindow.start; i < timeWindow.end; i += step) {
+        // @ts-ignore
         options.push(i);
       }
 

package/es/timezonepicker/timezone-picker.js

@@ -130,6 +130,7 @@ class TimezonePicker extends React.Component {
 
     if (this.props.mapLabels) {
       options = options.map(option => {
+        // @ts-ignore
         option.label = this.props.mapLabels(option);
         return option;
       });
@@ -142,7 +143,8 @@ class TimezonePicker extends React.Component {
       disabled: this.props.disabled,
       error: this.props.error,
       positive: this.props.positive,
-      size: this.props.size,
+      size: this.props.size // @ts-ignore
+      ,
       onChange: params => {
         if (params.type === 'clear') {
           this.setState({

package/es/toast/toast.js

@@ -85,15 +85,19 @@ class Toast extends React.Component {
     });
 
     _defineProperty(this, "onFocus", 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(this, "onMouseEnter", 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);
     });
@@ -182,8 +186,11 @@ class Toast extends React.Component {
       isRendered
     } = this.state;
     const {
+      // @ts-ignore
       Body: BodyOverride,
+      // @ts-ignore
       CloseIcon: CloseIconOverride,
+      // @ts-ignore
       InnerContainer: InnerContainerOverride
     } = this.props.overrides;
     const [Body, bodyProps] = getOverrides(BodyOverride, StyledBody);
@@ -213,7 +220,8 @@ class Toast extends React.Component {
       onMouseLeave: this.onMouseLeave
     }), /*#__PURE__*/React.createElement(InnerContainer, _extends({}, sharedProps, innerContainerProps), typeof children === 'function' ? children({
       dismiss: this.dismiss
-    }) : children), closeable ? /*#__PURE__*/React.createElement(DeleteIcon, _extends({
+    }) : children), closeable ? /*#__PURE__*/React.createElement(DeleteIcon // @ts-ignore
+    , _extends({
       ref: this.closeRef,
       role: "button",
       tabIndex: 0,