baseui 10.7.4 → 10.9.1

package/es/progress-bar/progressbar.js

@@ -32,10 +32,16 @@ class ProgressBar extends React.Component {
       size,
       steps,
       successValue,
+      minValue,
+      maxValue,
       showLabel,
       infinite,
-      errorMessage
-    } = this.props;
+      errorMessage,
+      forwardedRef,
+      ...restProps
+    } = this.props; // fallback on successValue (and it's default) if maxValue is not set by user
+
+    const maximumValue = maxValue !== 100 ? maxValue : successValue;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [BarContainer, barContainerProps] = getOverrides(overrides.BarContainer, StyledBarContainer);
     const [Bar, barProps] = getOverrides(overrides.Bar, StyledBar);
@@ -46,7 +52,9 @@ class ProgressBar extends React.Component {
       $infinite: infinite,
       $size: size,
       $steps: steps,
-      $successValue: successValue,
+      $successValue: maximumValue,
+      $minValue: minValue,
+      $maxValue: maximumValue,
       $value: value
     };
 
@@ -68,34 +76,41 @@ class ProgressBar extends React.Component {
       /*#__PURE__*/
       // eslint-disable-next-line jsx-a11y/role-supports-aria-props
       React.createElement(Root, _extends({
+        ref: forwardedRef,
         "data-baseweb": "progress-bar",
         role: "progressbar",
-        "aria-label": ariaLabel || getProgressLabel(value, successValue),
+        "aria-label": ariaLabel || getProgressLabel(value, maximumValue, minValue),
         "aria-valuenow": infinite ? null : value,
-        "aria-valuemin": infinite ? null : 0,
-        "aria-valuemax": infinite ? null : successValue,
+        "aria-valuemin": infinite ? null : minValue,
+        "aria-valuemax": infinite ? null : maximumValue,
         "aria-invalid": errorMessage ? true : null,
         "aria-errormessage": errorMessage
-      }, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
+      }, restProps, sharedProps, rootProps), /*#__PURE__*/React.createElement(BarContainer, _extends({}, sharedProps, barContainerProps), infinite ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InfiniteBar, _extends({
         $isLeft: true,
         $size: sharedProps.$size
       }, infiniteBarProps)), /*#__PURE__*/React.createElement(InfiniteBar, _extends({
         $size: sharedProps.$size
-      }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, successValue)))
+      }, infiniteBarProps))) : renderProgressBar()), showLabel && /*#__PURE__*/React.createElement(Label, _extends({}, sharedProps, labelProps), getProgressLabel(value, maximumValue, minValue)))
     );
   }
 
 }
 
 _defineProperty(ProgressBar, "defaultProps", {
-  getProgressLabel: (value, successValue) => `${Math.round(value / successValue * 100)}% Loaded`,
+  getProgressLabel: (value, maxValue, minValue) => `${Math.round((value - minValue) / (maxValue - minValue) * 100)}% Loaded`,
   infinite: false,
   overrides: {},
   showLabel: false,
   size: SIZE.medium,
   steps: 1,
   successValue: 100,
+  minValue: 0,
+  maxValue: 100,
   value: 0
 });
 
-export default ProgressBar;
+const ForwardedProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ProgressBar, _extends({
+  forwardedRef: ref
+}, props)));
+ForwardedProgressBar.displayName = 'ProgressBar';
+export default ForwardedProgressBar;

package/es/progress-bar/styled-components.js

@@ -76,14 +76,18 @@ export const StyledBarProgress = styled('div', props => {
     $value,
     $successValue,
     $steps,
-    $index
-  } = props;
+    $index,
+    $maxValue,
+    $minValue = 0
+  } = props; // making sure this doesn't break existing use that use StyledBarProgress directly
+
+  const maxValue = $maxValue ? $maxValue : $successValue;
   const {
     colors,
     sizing,
     borders
   } = $theme;
-  const width = `${100 - $value / $successValue * 100}%`;
+  const width = `${100 - ($value - $minValue) * 100 / (maxValue - $minValue)}%`;
   const stepStates = {
     default: 'default',
     awaits: 'awaits',
@@ -93,8 +97,8 @@ export const StyledBarProgress = styled('div', props => {
   let stepState = stepStates.default;
 
   if ($steps > 1) {
-    const stepValue = $successValue / $steps;
-    const currentValue = $value / $successValue * 100;
+    const stepValue = (maxValue - $minValue) / $steps;
+    const currentValue = ($value - $minValue) / (maxValue - $minValue) * 100;
     const completedSteps = Math.floor(currentValue / stepValue);
 
     if ($index < completedSteps) {

package/es/select/select-component.js

@@ -124,11 +124,6 @@ class Select extends React.Component {
       this.handleClick(event);
     });
 
-    _defineProperty(this, "handleTouchEndClearValue", event => {
-      if (this.dragging) return;
-      this.clearValue(event);
-    });
-
     _defineProperty(this, "handleClick", event => {
       if (this.props.disabled || !isClick(event) && !isLeftClick(event)) {
         return;
@@ -741,7 +736,7 @@ class Select extends React.Component {
         "aria-required": this.props.required || null,
         onFocus: this.handleInputFocus,
         tabIndex: 0
-      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", {
+      }, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement("input", _extends({
         "aria-hidden": true,
         id: this.props.id || null,
         ref: this.handleInputRef,
@@ -753,7 +748,7 @@ class Select extends React.Component {
           padding: 0
         },
         tabIndex: -1
-      }));
+      }, overrides.Input ? overrides.Input.props ? overrides.Input.props : {} : {})));
     }
 
     return /*#__PURE__*/React.createElement(InputContainer, _extends({}, sharedProps, inputContainerProps), /*#__PURE__*/React.createElement(AutosizeInput, _extends({
@@ -800,9 +795,6 @@ class Select extends React.Component {
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,
-      onTouchEnd: this.handleTouchEndClearValue,
-      onTouchMove: this.handleTouchMove,
-      onTouchStart: this.handleTouchStart,
       role: "button",
       overrides: {
         Svg: {

package/es/spinner/styled-components.js

@@ -46,13 +46,39 @@ export const StyledActivePath = styled('path', props => ({
 StyledActivePath.displayName = "StyledActivePath";
 export const StyledSpinnerNext = styled('i', ({
   $theme,
+  $color = $theme.colors.contentAccent,
+  $borderWidth,
   $size = SIZE.medium
 }) => {
-  const borderWidth = {
+  //$FlowFixMe
+  let borderSize = {
     large: $theme.sizing.scale300,
     medium: $theme.sizing.scale100,
     small: $theme.sizing.scale0
+  }[$borderWidth || $size];
+  let boxSize = {
+    large: $theme.sizing.scale1000,
+    medium: $theme.sizing.scale900,
+    small: $theme.sizing.scale800
   }[$size];
+
+  if (!borderSize) {
+    borderSize = $theme.sizing[$borderWidth];
+
+    if (!borderSize) {
+      borderSize = `${parseInt($borderWidth)}px`;
+    }
+  }
+
+  if (!boxSize) {
+    //$FlowFixMe
+    boxSize = $theme.sizing[$size];
+
+    if (!boxSize) {
+      boxSize = `${parseInt($size)}px`;
+    }
+  }
+
   return {
     display: 'block',
     animationName: spin,
@@ -64,24 +90,16 @@ export const StyledSpinnerNext = styled('i', ({
     borderTopStyle: 'solid',
     borderBottomStyle: 'solid',
     borderRadius: '50%',
-    borderTopColor: $theme.colors.contentAccent,
+    borderTopColor: $color,
     borderRightColor: $theme.colors.backgroundTertiary,
     borderBottomColor: $theme.colors.backgroundTertiary,
     borderLeftColor: $theme.colors.backgroundTertiary,
-    borderLeftWidth: borderWidth,
-    borderRightWidth: borderWidth,
-    borderTopWidth: borderWidth,
-    borderBottomWidth: borderWidth,
-    width: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
-    height: {
-      large: $theme.sizing.scale1000,
-      medium: $theme.sizing.scale900,
-      small: $theme.sizing.scale800
-    }[$size],
+    borderLeftWidth: borderSize,
+    borderRightWidth: borderSize,
+    borderTopWidth: borderSize,
+    borderBottomWidth: borderSize,
+    width: boxSize,
+    height: boxSize,
     cursor: 'wait'
   };
 });

package/es/table/filter.js

@@ -39,7 +39,9 @@ export default function Filter(props) {
     content: ({
       close
     }) => /*#__PURE__*/React.createElement(FocusLock, {
-      autoFocus: false
+      autoFocus: false // Allow focus to escape when UI is within an iframe
+      ,
+      crossFrame: false
     }, /*#__PURE__*/React.createElement(Heading, headingProps, "Filter Column"), /*#__PURE__*/React.createElement(Content, contentProps, props.children), /*#__PURE__*/React.createElement(Footer, footerProps, /*#__PURE__*/React.createElement(Button, {
       kind: KIND.minimal,
       size: SIZE.compact,

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

@@ -36,6 +36,8 @@ export default ((themePrimitives = colorTokens) => ({
   buttonTertiaryActive: themePrimitives.primary600,
   buttonTertiarySelectedText: themePrimitives.primary,
   buttonTertiarySelectedFill: themePrimitives.primary600,
+  buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
+  buttonTertiaryDisabledActiveText: themePrimitives.mono300,
   buttonTertiarySpinnerForeground: themePrimitives.primary50,
   buttonTertiarySpinnerBackground: themePrimitives.primary500,
   buttonMinimalFill: 'transparent',
@@ -48,6 +50,8 @@ export default ((themePrimitives = colorTokens) => ({
   buttonMinimalSpinnerBackground: themePrimitives.primary500,
   buttonDisabledFill: themePrimitives.mono600,
   buttonDisabledText: themePrimitives.mono300,
+  buttonDisabledActiveFill: themePrimitives.mono200,
+  buttonDisabledActiveText: themePrimitives.primary500,
   buttonDisabledSpinnerForeground: themePrimitives.mono200,
   buttonDisabledSpinnerBackground: themePrimitives.mono400,
   // Breadcrumbs
@@ -106,15 +110,15 @@ export default ((themePrimitives = colorTokens) => ({
   modalCloseColorFocus: themePrimitives.mono400,
   // Notification
   notificationPrimaryBackground: themePrimitives.primary700,
-  notificationPrimaryText: themePrimitives.primary200,
+  notificationPrimaryText: themePrimitives.primaryA,
   notificationInfoBackground: themePrimitives.accent700,
-  notificationInfoText: themePrimitives.accent200,
+  notificationInfoText: themePrimitives.primaryA,
   notificationPositiveBackground: themePrimitives.positive700,
-  notificationPositiveText: themePrimitives.positive200,
+  notificationPositiveText: themePrimitives.primaryA,
   notificationWarningBackground: themePrimitives.warning700,
-  notificationWarningText: themePrimitives.warning200,
+  notificationWarningText: themePrimitives.primaryA,
   notificationNegativeBackground: themePrimitives.negative700,
-  notificationNegativeText: themePrimitives.negative200,
+  notificationNegativeText: themePrimitives.primaryA,
   // Tag
   // Custom ramps
   tagFontDisabledRampUnit: '600',
@@ -274,11 +278,16 @@ export default ((themePrimitives = colorTokens) => ({
   tableFilterFooterBackground: themePrimitives.mono800,
   // Toast
   toastText: themePrimitives.white,
-  toastPrimaryBackground: themePrimitives.primary500,
-  toastInfoBackground: themePrimitives.accent500,
-  toastPositiveBackground: themePrimitives.positive500,
-  toastWarningBackground: themePrimitives.warning500,
-  toastNegativeBackground: themePrimitives.negative500,
+  toastPrimaryBackground: themePrimitives.primary400,
+  toastPrimaryText: themePrimitives.white,
+  toastInfoBackground: themePrimitives.accent400,
+  toastInfoText: themePrimitives.white,
+  toastPositiveBackground: themePrimitives.positive400,
+  toastPositiveText: themePrimitives.white,
+  toastWarningBackground: themePrimitives.warning400,
+  toastWarningText: themePrimitives.black,
+  toastNegativeBackground: themePrimitives.negative400,
+  toastNegativeText: themePrimitives.white,
   // Toggle
   toggleFill: themePrimitives.mono300,
   toggleFillChecked: themePrimitives.primary,

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

@@ -36,6 +36,8 @@ export default ((themePrimitives = colorTokens) => ({
   buttonTertiaryActive: themePrimitives.primary100,
   buttonTertiarySelectedFill: themePrimitives.primary100,
   buttonTertiarySelectedText: themePrimitives.primary,
+  buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
+  buttonTertiaryDisabledActiveText: themePrimitives.mono600,
   buttonTertiarySpinnerForeground: themePrimitives.accent,
   buttonTertiarySpinnerBackground: themePrimitives.primary100,
   buttonMinimalFill: 'transparent',
@@ -48,6 +50,8 @@ export default ((themePrimitives = colorTokens) => ({
   buttonMinimalSpinnerBackground: themePrimitives.primary100,
   buttonDisabledFill: themePrimitives.mono200,
   buttonDisabledText: themePrimitives.mono600,
+  buttonDisabledActiveFill: themePrimitives.mono700,
+  buttonDisabledActiveText: themePrimitives.mono100,
   buttonDisabledSpinnerForeground: themePrimitives.mono600,
   buttonDisabledSpinnerBackground: themePrimitives.mono400,
   // Breadcrumbs
@@ -182,15 +186,15 @@ export default ((themePrimitives = colorTokens) => ({
   tabColor: themePrimitives.mono800,
   // Notification
   notificationPrimaryBackground: themePrimitives.primary50,
-  notificationPrimaryText: themePrimitives.primary500,
+  notificationPrimaryText: themePrimitives.primaryA,
   notificationInfoBackground: themePrimitives.accent50,
-  notificationInfoText: themePrimitives.accent500,
+  notificationInfoText: themePrimitives.primaryA,
   notificationPositiveBackground: themePrimitives.positive50,
-  notificationPositiveText: themePrimitives.positive500,
+  notificationPositiveText: themePrimitives.primaryA,
   notificationWarningBackground: themePrimitives.warning50,
-  notificationWarningText: themePrimitives.warning500,
+  notificationWarningText: themePrimitives.primaryA,
   notificationNegativeBackground: themePrimitives.negative50,
-  notificationNegativeText: themePrimitives.negative500,
+  notificationNegativeText: themePrimitives.primaryA,
   // Tag
   // Custom ramps
   tagFontDisabledRampUnit: '100',
@@ -349,11 +353,16 @@ export default ((themePrimitives = colorTokens) => ({
   tableFilterFooterBackground: themePrimitives.mono200,
   // Toast
   toastText: themePrimitives.white,
-  toastPrimaryBackground: themePrimitives.primary500,
-  toastInfoBackground: themePrimitives.accent500,
-  toastPositiveBackground: themePrimitives.positive500,
-  toastWarningBackground: themePrimitives.warning500,
-  toastNegativeBackground: themePrimitives.negative500,
+  toastPrimaryBackground: themePrimitives.primary400,
+  toastPrimaryText: themePrimitives.white,
+  toastInfoBackground: themePrimitives.accent400,
+  toastInfoText: themePrimitives.white,
+  toastPositiveBackground: themePrimitives.positive400,
+  toastPositiveText: themePrimitives.white,
+  toastWarningBackground: themePrimitives.warning400,
+  toastWarningText: themePrimitives.black,
+  toastNegativeBackground: themePrimitives.negative400,
+  toastNegativeText: themePrimitives.white,
   // Spinner
   spinnerTrackFill: themePrimitives.mono900,
   // Progress bar

package/es/timezonepicker/timezone-picker.js

@@ -10,11 +10,11 @@ LICENSE file in the root directory of this source tree.
 */
 // global Intl
 import * as React from 'react';
-import { findTimeZone, getZonedTime, listTimeZones } from 'timezone-support/dist/index-1900-2050.js';
-import { formatZonedTime } from 'timezone-support/dist/parse-format.js';
+import { format, getTimezoneOffset } from 'date-fns-tz';
 import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import { LocaleContext } from '../locale/index.js';
 import { Select } from '../select/index.js';
+import { zones } from './tzdata.js';
 
 class TimezonePicker extends React.Component {
   constructor(...args) {
@@ -25,42 +25,49 @@ class TimezonePicker extends React.Component {
       value: null
     });
 
-    _defineProperty(this, "buildTimezones", compareDate => listTimeZones().map(zone => {
-      const timezone = findTimeZone(zone);
-      const zonedTime = getZonedTime(compareDate, timezone);
-      const offsetTime = (zonedTime.zone.offset < 0 ? '+' : '-') + Math.abs(zonedTime.zone.offset / 60);
-      const abbreviation = formatZonedTime(zonedTime, 'z');
-      const formatted = `(GMT ${offsetTime}) ${zone}${this.props.includeAbbreviations ? ` - ${abbreviation}` : ''}`.replace('_', ' ');
-      const option = {
-        id: zone,
-        label: formatted,
-        offset: zonedTime.zone.offset
-      };
-
-      if (this.props.mapLabels) {
-        option.label = this.props.mapLabels(option);
-      }
+    _defineProperty(this, "buildTimezones", compareDate => {
+      const timezones = [];
+
+      for (const zoneName of zones) {
+        try {
+          const offset = getTimezoneOffset(zoneName, compareDate) / 3_600_000;
+          const offsetFormatted = `${offset >= 0 ? '+' : '-'}${Math.abs(offset)}`;
+          let label = `(GMT${offsetFormatted}) ${zoneName.replace('_', ' ')}`;
+
+          if (this.props.includeAbbreviations) {
+            const abbreviation = format(compareDate, 'zzz', {
+              timeZone: zoneName
+            });
+
+            if (abbreviation) {
+              label += ` - ${abbreviation}`;
+            }
+          }
+
+          timezones.push({
+            id: zoneName,
+            label,
+            offset
+          });
+        } catch (error) {
+          // Ignores timezones that are not available within a user's browser/operating system
+          console.error(`failed to format zone name ${zoneName}`);
+        }
+      } // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
 
-      return option;
-    }) // Formats 'noisy' timezones without a letter acronym.
-    .map(option => {
-      const rgx = /(\s-\s(\+|-)\d\d\d?\d?)$/;
-      const matches = option.label.match(rgx);
 
-      if (matches) {
-        const prefix = matches[0];
-        option.label = option.label.split(prefix)[0];
-      }
+      return timezones.sort((a, b) => {
+        const offsetDelta = b.offset - a.offset;
+        if (offsetDelta !== 0) return offsetDelta;
+
+        if (typeof a.label === 'string' && typeof b.label === 'string') {
+          if (a.label < b.label) return -1;
+          if (a.label > b.label) return 1;
+        }
 
-      return option;
-    }) // Sorts W -> E, prioritizes america. could be more nuanced based on system tz but simple for now
-    .sort((a, b) => {
-      const offsetDelta = b.offset - a.offset;
-      if (offsetDelta !== 0) return offsetDelta;
-      if (a.label < b.label) return -1;
-      if (a.label > b.label) return 1;
-      return 0;
-    }));
+        return 0;
+      });
+    });
   }
 
   componentDidMount() {
@@ -116,9 +123,19 @@ class TimezonePicker extends React.Component {
     selectProps.overrides); // $FlowFixMe
 
     selectProps.overrides = selectOverrides;
+    let options = this.state.timezones;
+
+    if (this.props.mapLabels) {
+      options = options.map(option => {
+        // $FlowFixMe - TimezoneT.label is a string, but mapLabels can return a React.Node
+        option.label = this.props.mapLabels(option);
+        return option;
+      });
+    }
+
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(OverriddenSelect, _extends({
       "aria-label": locale.datepicker.timezonePickerAriaLabel,
-      options: this.state.timezones,
+      options: options,
       clearable: false,
       disabled: this.props.disabled,
       error: this.props.error,

package/es/timezonepicker/tzdata.js

@@ -0,0 +1,2 @@
+/* eslint-disable header/header */
+export const zones = ['Europe/Andorra', 'Asia/Dubai', 'Asia/Kabul', 'Europe/Tirane', 'Asia/Yerevan', 'Antarctica/Casey', 'Antarctica/Davis', 'Antarctica/Mawson', 'Antarctica/Palmer', 'Antarctica/Rothera', 'Antarctica/Troll', 'Antarctica/Vostok', 'America/Argentina/Buenos_Aires', 'America/Argentina/Cordoba', 'America/Argentina/Salta', 'America/Argentina/Jujuy', 'America/Argentina/Tucuman', 'America/Argentina/Catamarca', 'America/Argentina/La_Rioja', 'America/Argentina/San_Juan', 'America/Argentina/Mendoza', 'America/Argentina/San_Luis', 'America/Argentina/Rio_Gallegos', 'America/Argentina/Ushuaia', 'Pacific/Pago_Pago', 'Europe/Vienna', 'Australia/Lord_Howe', 'Antarctica/Macquarie', 'Australia/Hobart', 'Australia/Melbourne', 'Australia/Sydney', 'Australia/Broken_Hill', 'Australia/Brisbane', 'Australia/Lindeman', 'Australia/Adelaide', 'Australia/Darwin', 'Australia/Perth', 'Australia/Eucla', 'Asia/Baku', 'America/Barbados', 'Asia/Dhaka', 'Europe/Brussels', 'Europe/Sofia', 'Atlantic/Bermuda', 'Asia/Brunei', 'America/La_Paz', 'America/Noronha', 'America/Belem', 'America/Fortaleza', 'America/Recife', 'America/Araguaina', 'America/Maceio', 'America/Bahia', 'America/Sao_Paulo', 'America/Campo_Grande', 'America/Cuiaba', 'America/Santarem', 'America/Porto_Velho', 'America/Boa_Vista', 'America/Manaus', 'America/Eirunepe', 'America/Rio_Branco', 'Asia/Thimphu', 'Europe/Minsk', 'America/Belize', 'America/St_Johns', 'America/Halifax', 'America/Glace_Bay', 'America/Moncton', 'America/Goose_Bay', 'America/Toronto', 'America/Nipigon', 'America/Thunder_Bay', 'America/Iqaluit', 'America/Pangnirtung', 'America/Winnipeg', 'America/Rainy_River', 'America/Resolute', 'America/Rankin_Inlet', 'America/Regina', 'America/Swift_Current', 'America/Edmonton', 'America/Cambridge_Bay', 'America/Yellowknife', 'America/Inuvik', 'America/Dawson_Creek', 'America/Fort_Nelson', 'America/Whitehorse', 'America/Dawson', 'America/Vancouver', 'Indian/Cocos', 'Europe/Zurich', 'Africa/Abidjan', 'Pacific/Rarotonga', 'America/Santiago', 'America/Punta_Arenas', 'Pacific/Easter', 'Asia/Shanghai', 'Asia/Urumqi', 'America/Bogota', 'America/Costa_Rica', 'America/Havana', 'Atlantic/Cape_Verde', 'Indian/Christmas', 'Asia/Nicosia', 'Asia/Famagusta', 'Europe/Prague', 'Europe/Berlin', 'Europe/Copenhagen', 'America/Santo_Domingo', 'Africa/Algiers', 'America/Guayaquil', 'Pacific/Galapagos', 'Europe/Tallinn', 'Africa/Cairo', 'Africa/El_Aaiun', 'Europe/Madrid', 'Africa/Ceuta', 'Atlantic/Canary', 'Europe/Helsinki', 'Pacific/Fiji', 'Atlantic/Stanley', 'Pacific/Chuuk', 'Pacific/Pohnpei', 'Pacific/Kosrae', 'Atlantic/Faroe', 'Europe/Paris', 'Europe/London', 'Asia/Tbilisi', 'America/Cayenne', 'Europe/Gibraltar', 'America/Nuuk', 'America/Danmarkshavn', 'America/Scoresbysund', 'America/Thule', 'Europe/Athens', 'Atlantic/South_Georgia', 'America/Guatemala', 'Pacific/Guam', 'Africa/Bissau', 'America/Guyana', 'Asia/Hong_Kong', 'America/Tegucigalpa', 'America/Port-au-Prince', 'Europe/Budapest', 'Asia/Jakarta', 'Asia/Pontianak', 'Asia/Makassar', 'Asia/Jayapura', 'Europe/Dublin', 'Asia/Jerusalem', 'Asia/Kolkata', 'Indian/Chagos', 'Asia/Baghdad', 'Asia/Tehran', 'Atlantic/Reykjavik', 'Europe/Rome', 'America/Jamaica', 'Asia/Amman', 'Asia/Tokyo', 'Africa/Nairobi', 'Asia/Bishkek', 'Pacific/Tarawa', 'Pacific/Kanton', 'Pacific/Kiritimati', 'Asia/Pyongyang', 'Asia/Seoul', 'Asia/Almaty', 'Asia/Qyzylorda', 'Asia/Qostanay', 'Asia/Aqtobe', 'Asia/Aqtau', 'Asia/Atyrau', 'Asia/Oral', 'Asia/Beirut', 'Asia/Colombo', 'Africa/Monrovia', 'Europe/Vilnius', 'Europe/Luxembourg', 'Europe/Riga', 'Africa/Tripoli', 'Africa/Casablanca', 'Europe/Monaco', 'Europe/Chisinau', 'Pacific/Majuro', 'Pacific/Kwajalein', 'Asia/Yangon', 'Asia/Ulaanbaatar', 'Asia/Hovd', 'Asia/Choibalsan', 'Asia/Macau', 'America/Martinique', 'Europe/Malta', 'Indian/Mauritius', 'Indian/Maldives', 'America/Mexico_City', 'America/Cancun', 'America/Merida', 'America/Monterrey', 'America/Matamoros', 'America/Mazatlan', 'America/Chihuahua', 'America/Ojinaga', 'America/Hermosillo', 'America/Tijuana', 'America/Bahia_Banderas', 'Asia/Kuala_Lumpur', 'Asia/Kuching', 'Africa/Maputo', 'Africa/Windhoek', 'Pacific/Noumea', 'Pacific/Norfolk', 'Africa/Lagos', 'America/Managua', 'Europe/Amsterdam', 'Europe/Oslo', 'Asia/Kathmandu', 'Pacific/Nauru', 'Pacific/Niue', 'Pacific/Auckland', 'Pacific/Chatham', 'America/Panama', 'America/Lima', 'Pacific/Tahiti', 'Pacific/Marquesas', 'Pacific/Gambier', 'Pacific/Port_Moresby', 'Pacific/Bougainville', 'Asia/Manila', 'Asia/Karachi', 'Europe/Warsaw', 'America/Miquelon', 'Pacific/Pitcairn', 'America/Puerto_Rico', 'Asia/Gaza', 'Asia/Hebron', 'Europe/Lisbon', 'Atlantic/Madeira', 'Atlantic/Azores', 'Pacific/Palau', 'America/Asuncion', 'Asia/Qatar', 'Indian/Reunion', 'Europe/Bucharest', 'Europe/Belgrade', 'Europe/Kaliningrad', 'Europe/Moscow', 'Europe/Simferopol', 'Europe/Kirov', 'Europe/Volgograd', 'Europe/Astrakhan', 'Europe/Saratov', 'Europe/Ulyanovsk', 'Europe/Samara', 'Asia/Yekaterinburg', 'Asia/Omsk', 'Asia/Novosibirsk', 'Asia/Barnaul', 'Asia/Tomsk', 'Asia/Novokuznetsk', 'Asia/Krasnoyarsk', 'Asia/Irkutsk', 'Asia/Chita', 'Asia/Yakutsk', 'Asia/Khandyga', 'Asia/Vladivostok', 'Asia/Ust-Nera', 'Asia/Magadan', 'Asia/Sakhalin', 'Asia/Srednekolymsk', 'Asia/Kamchatka', 'Asia/Anadyr', 'Asia/Riyadh', 'Pacific/Guadalcanal', 'Indian/Mahe', 'Africa/Khartoum', 'Europe/Stockholm', 'Asia/Singapore', 'America/Paramaribo', 'Africa/Juba', 'Africa/Sao_Tome', 'America/El_Salvador', 'Asia/Damascus', 'America/Grand_Turk', 'Africa/Ndjamena', 'Indian/Kerguelen', 'Asia/Bangkok', 'Asia/Dushanbe', 'Pacific/Fakaofo', 'Asia/Dili', 'Asia/Ashgabat', 'Africa/Tunis', 'Pacific/Tongatapu', 'Europe/Istanbul', 'Pacific/Funafuti', 'Asia/Taipei', 'Europe/Kiev', 'Europe/Uzhgorod', 'Europe/Zaporozhye', 'Pacific/Wake', 'America/New_York', 'America/Detroit', 'America/Kentucky/Louisville', 'America/Kentucky/Monticello', 'America/Indiana/Indianapolis', 'America/Indiana/Vincennes', 'America/Indiana/Winamac', 'America/Indiana/Marengo', 'America/Indiana/Petersburg', 'America/Indiana/Vevay', 'America/Chicago', 'America/Indiana/Tell_City', 'America/Indiana/Knox', 'America/Menominee', 'America/North_Dakota/Center', 'America/North_Dakota/New_Salem', 'America/North_Dakota/Beulah', 'America/Denver', 'America/Boise', 'America/Phoenix', 'America/Los_Angeles', 'America/Anchorage', 'America/Juneau', 'America/Sitka', 'America/Metlakatla', 'America/Yakutat', 'America/Nome', 'America/Adak', 'Pacific/Honolulu', 'America/Montevideo', 'Asia/Samarkand', 'Asia/Tashkent', 'America/Caracas', 'Asia/Ho_Chi_Minh', 'Pacific/Efate', 'Pacific/Wallis', 'Pacific/Apia', 'Africa/Johannesburg'];

package/es/timezonepicker/update-tzdata.js

@@ -0,0 +1,69 @@
+/*
+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.
+*/
+
+/* eslint-env node */
+const fs = require('fs');
+
+const path = require('path');
+
+const util = require('util');
+
+const exec = util.promisify(require('child_process').exec); // Download tzdata and collect a list of timezones. Baseui previously used a library
+// to do this, but it grew stale and unmaintained. This approach is straightforward
+// enough to update whenever necessary, but future improvements could include building
+// this data set before baseui is published so that the data is always fresh.
+
+async function main() {
+  try {
+    const tmpDir = path.join(__dirname, 'tmp'); // $FlowFixMe - flow is not aware of recursive option
+
+    await fs.promises.rmdir(tmpDir, {
+      recursive: true
+    });
+    await fs.promises.mkdir(tmpDir);
+    const src = `https://www.iana.org/time-zones/repository/tzdata-latest.tar.gz`;
+    await exec(`curl -L ${src} | gzip -dc | tar -xf - --directory ${tmpDir}`);
+    const zoneTabPath = path.join(tmpDir, 'zone1970.tab');
+    const content = await fs.promises.readFile(zoneTabPath, 'utf-8');
+    const lines = content.split('\n');
+    const zones = [];
+
+    for (const line of lines) {
+      if (line[0] === '#') {
+        continue;
+      }
+
+      const parts = line.split(/\s+/);
+
+      if (parts.length >= 3) {
+        zones.push(parts[2]);
+      }
+    }
+
+    const file = [];
+    file.push('/* eslint-disable header/header */');
+    file.push('// @flow');
+    file.push('');
+    file.push('export const zones = [');
+
+    for (const zone of zones) {
+      file.push(`  '${zone}',`);
+    }
+
+    file.push('];');
+    const tzdataPath = path.join(__dirname, 'tzdata.js');
+    await fs.promises.writeFile(tzdataPath, file.join('\n')); // $FlowFixMe - flow is not aware of recursive option
+
+    await fs.promises.rmdir(tmpDir, {
+      recursive: true
+    });
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+main();

package/es/toast/styled-components.js

@@ -18,12 +18,23 @@ function getBackgroundColor(kind, type, theme) {
   }[kind];
 }
 
-function getFontColor(kind, theme) {
+function getFontColor(kind, type, theme) {
+  const isInline = type === TYPE.inline;
+
+  if (isInline) {
+    return {
+      [KIND.info]: theme.colors.notificationInfoText,
+      [KIND.positive]: theme.colors.notificationPositiveText,
+      [KIND.warning]: theme.colors.notificationWarningText,
+      [KIND.negative]: theme.colors.notificationNegativeText
+    }[kind];
+  }
+
   return {
-    [KIND.info]: theme.colors.notificationInfoText,
-    [KIND.positive]: theme.colors.notificationPositiveText,
-    [KIND.warning]: theme.colors.notificationWarningText,
-    [KIND.negative]: theme.colors.notificationNegativeText
+    [KIND.info]: theme.colors.toastInfoText,
+    [KIND.positive]: theme.colors.toastPositiveText,
+    [KIND.warning]: theme.colors.toastWarningText,
+    [KIND.negative]: theme.colors.toastNegativeText
   }[kind];
 }
 
@@ -99,9 +110,9 @@ export const Body = styled('div', props => {
     $theme
   } = props;
   const isInline = $type === TYPE.inline;
-  return { ...$theme.typography.font250,
+  return { ...$theme.typography.font300,
     pointerEvents: 'auto',
-    color: isInline ? getFontColor($kind, $theme) : $theme.colors.toastText,
+    color: getFontColor($kind, $type, $theme),
     height: 'auto',
     width: '288px',
     paddingTop: $theme.sizing.scale600,

package/esm/a11y/a11y.js

@@ -21,7 +21,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import axe from 'axe-core';
 import { Layer, TetherBehavior, TETHER_PLACEMENT } from '../layer/index.js';
-import { Paragraph3, Caption1 } from '../typography/index.js';
+import { ParagraphSmall, ParagraphXSmall } from '../typography/index.js';
 import { styled } from '../styles/index.js';
 import { ThemeContext } from '../styles/theme-provider.js';
 
@@ -128,8 +128,8 @@ function Violation(props) {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
-  }, /*#__PURE__*/React.createElement(Caption1, null, props.target), props.violations.map(function (violation, index) {
-    return /*#__PURE__*/React.createElement(Paragraph3, {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
+    return /*#__PURE__*/React.createElement(ParagraphSmall, {
       key: index
     }, violation.description);
   }))));