baseui 14.0.0 → 15.0.0

package/progress-bar/styled-components.js

@@ -312,16 +312,12 @@ const StyledProgressBarRoundedTrackBackground = exports.StyledProgressBarRounded
 const _StyledProgressBarRoundedTrackForeground = (0, _styles.styled)('path', ({
   $theme,
   $size,
-  $visible,
-  $pathLength,
-  $pathProgress
+  $visible
 }) => {
   return {
     visibility: $visible ? 'visible' : 'hidden',
     stroke: $theme.colors.borderAccent,
-    strokeWidth: PROGRESS_BAR_ROUNDED_SIZES[$size].strokeWidth + 'px',
-    strokeDasharray: $pathLength,
-    strokeDashoffset: $pathLength * (1 - $pathProgress) + ''
+    strokeWidth: PROGRESS_BAR_ROUNDED_SIZES[$size].strokeWidth + 'px'
   };
 });
 _StyledProgressBarRoundedTrackForeground.displayName = "_StyledProgressBarRoundedTrackForeground";
@@ -329,6 +325,12 @@ _StyledProgressBarRoundedTrackForeground.displayName = '_StyledProgressBarRounde
 const StyledProgressBarRoundedTrackForeground = exports.StyledProgressBarRoundedTrackForeground = (0, _styles.withWrapper)(_StyledProgressBarRoundedTrackForeground, Styled => function StyledProgressBarRoundedSvg(props) {
   return /*#__PURE__*/_react.default.createElement(Styled, _extends({
     d: PROGRESS_BAR_ROUNDED_SIZES[props.$size].d
+    // We're using inline styles here to avoid the change on the class name on every update
+    ,
+    style: {
+      strokeDasharray: props.$pathLength,
+      strokeDashoffset: props.$pathLength * (1 - props.$pathProgress) + ''
+    }
   }, props));
 });
 const StyledProgressBarRoundedText = exports.StyledProgressBarRoundedText = (0, _styles.styled)('div', ({

package/rating/styled-components.js

@@ -106,11 +106,12 @@ const StyledEmoticon = exports.StyledEmoticon = (0, _styles.styled)('li', ({
   $isReadOnly,
   $size
 }) => {
-  let emoticonFill = $theme.colors.ratingInactiveFill;
+  let emoticonFill = $theme.colors.backgroundSecondary;
   if ($isActive) {
     emoticonFill = $theme.colors.backgroundWarning;
   }
-  const ratingIcons = [(0, _svgIcons.angryRatingSVG)(emoticonFill, $size), (0, _svgIcons.sadRatingSVG)(emoticonFill, $size), (0, _svgIcons.neutralRatingSVG)(emoticonFill, $size), (0, _svgIcons.happyRatingSVG)(emoticonFill, $size), (0, _svgIcons.veryHappyRatingSVG)(emoticonFill, $size)];
+  const faceColor = $theme.colors.contentPrimary;
+  const ratingIcons = [(0, _svgIcons.angryRatingSVG)(emoticonFill, faceColor, $size), (0, _svgIcons.sadRatingSVG)(emoticonFill, faceColor, $size), (0, _svgIcons.neutralRatingSVG)(emoticonFill, faceColor, $size), (0, _svgIcons.happyRatingSVG)(emoticonFill, faceColor, $size), (0, _svgIcons.veryHappyRatingSVG)(emoticonFill, faceColor, $size)];
   const styles = {
     paddingLeft: 0,
     paddingTop: 0,

package/rating/svg-icons.d.ts

@@ -1,6 +1,6 @@
 export declare function starSVG(fillColor: string, strokeColor: string, size: number): string;
-export declare function angryRatingSVG(fillColor: string, size: number): string;
-export declare function sadRatingSVG(fillColor: string, size: number): string;
-export declare function neutralRatingSVG(fillColor: string, size: number): string;
-export declare function happyRatingSVG(fillColor: string, size: number): string;
-export declare function veryHappyRatingSVG(fillColor: string, size: number): string;
+export declare function angryRatingSVG(fillColor: string, faceColor: string, size: number): string;
+export declare function sadRatingSVG(fillColor: string, faceColor: string, size: number): string;
+export declare function neutralRatingSVG(fillColor: string, faceColor: string, size: number): string;
+export declare function happyRatingSVG(fillColor: string, faceColor: string, size: number): string;
+export declare function veryHappyRatingSVG(fillColor: string, faceColor: string, size: number): string;

package/rating/svg-icons.js

@@ -26,53 +26,53 @@ function starSVG(fillColor, strokeColor, size) {
     </svg>
   `);
 }
-function angryRatingSVG(fillColor, size) {
+function angryRatingSVG(fillColor, faceColor, size) {
   return encodeURIComponent(`
     <svg width="${size}" height="${size}" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z" fill="black"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z" fill="black"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 29C24.8073 29 26.6585 30.7697 27.1609 31.5442C27.4615 32.0075 28.0807 32.1395 28.5441 31.839C29.0074 31.5384 29.1394 30.9192 28.8388 30.4558C28.0439 29.2303 25.614 27 21.8377 27C18.0453 27 15.8091 29.25 15.1202 30.5245C14.8576 31.0103 15.0385 31.6171 15.5244 31.8797C16.0102 32.1423 16.617 31.9614 16.8796 31.4755C17.2718 30.75 18.8842 29 21.8377 29Z" fill="${faceColor}"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M11.684 16.949C11.1601 16.7743 10.8769 16.208 11.0516 15.684C11.2262 15.1601 11.7926 14.8769 12.3165 15.0516L18.3165 17.0516C18.8404 17.2262 19.1236 17.7926 18.949 18.3165C18.8093 18.7355 18.4192 19.0005 18.0005 19.0005C18.0004 20.105 17.105 21.0002 16.0005 21.0002C14.896 21.0002 14.0005 20.1048 14.0005 19.0002C14.0005 18.5694 14.1368 18.1703 14.3686 17.8438L11.684 16.949ZM32.949 15.684C33.1237 16.208 32.8405 16.7743 32.3166 16.949L29.6324 17.8437C29.8642 18.1702 30.0005 18.5693 30.0005 19.0002C30.0005 20.1048 29.1051 21.0002 28.0005 21.0002C26.8961 21.0002 26.0007 20.105 26.0005 19.0005C25.5817 19.0007 25.1914 18.7356 25.0516 18.3165C24.877 17.7926 25.1602 17.2262 25.6841 17.0516L31.6841 15.0516C32.208 14.8769 32.7744 15.1601 32.949 15.684Z" fill="${faceColor}"/>
     </svg>
   `);
 }
-function sadRatingSVG(fillColor, size) {
+function sadRatingSVG(fillColor, faceColor, size) {
   return encodeURIComponent(`
     <svg width="${size}" height="${size}" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
-      <ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/>
-      <ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 28C24.8073 28 26.6585 29.7697 27.1609 30.5442C27.4615 31.0075 28.0807 31.1395 28.5441 30.839C29.0074 30.5384 29.1394 29.9192 28.8388 29.4558C28.0439 28.2303 25.614 26 21.8377 26C18.0453 26 15.8091 28.25 15.1202 29.5245C14.8576 30.0103 15.0385 30.6171 15.5244 30.8797C16.0102 31.1423 16.617 30.9614 16.8796 30.4755C17.2718 29.75 18.8842 28 21.8377 28Z" fill="black"/>
+      <ellipse cx="16" cy="18" rx="2" ry="2" fill="${faceColor}"/>
+      <ellipse cx="28" cy="18" rx="2" ry="2" fill="${faceColor}"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 28C24.8073 28 26.6585 29.7697 27.1609 30.5442C27.4615 31.0075 28.0807 31.1395 28.5441 30.839C29.0074 30.5384 29.1394 29.9192 28.8388 29.4558C28.0439 28.2303 25.614 26 21.8377 26C18.0453 26 15.8091 28.25 15.1202 29.5245C14.8576 30.0103 15.0385 30.6171 15.5244 30.8797C16.0102 31.1423 16.617 30.9614 16.8796 30.4755C17.2718 29.75 18.8842 28 21.8377 28Z" fill="${faceColor}"/>
     </svg>
   `);
 }
-function neutralRatingSVG(fillColor, size) {
+function neutralRatingSVG(fillColor, faceColor, size) {
   return encodeURIComponent(`
     <svg width="${size}" height="${size}" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
-      <ellipse cx="16" cy="19" rx="2" ry="2" fill="black"/>
-      <ellipse cx="28" cy="19" rx="2" ry="2" fill="black"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M15 28C15 27.4477 15.4477 27 16 27L16 28L16 29C15.4477 29 15 28.5523 15 28ZM28 28L28 29H16L16 28L16 27H27.9995L28 28ZM28 28L28 29C28.5523 29 29 28.5523 29 28C29 27.4477 28.5518 27 27.9995 27L28 28Z" fill="black"/>
+      <ellipse cx="16" cy="19" rx="2" ry="2" fill="${faceColor}"/>
+      <ellipse cx="28" cy="19" rx="2" ry="2" fill="${faceColor}"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M15 28C15 27.4477 15.4477 27 16 27L16 28L16 29C15.4477 29 15 28.5523 15 28ZM28 28L28 29H16L16 28L16 27H27.9995L28 28ZM28 28L28 29C28.5523 29 29 28.5523 29 28C29 27.4477 28.5518 27 27.9995 27L28 28Z" fill="${faceColor}"/>
     </svg>
   `);
 }
-function happyRatingSVG(fillColor, size) {
+function happyRatingSVG(fillColor, faceColor, size) {
   return encodeURIComponent(`
     <svg width="${size}" height="${size}" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
-      <ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/>
-      <ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 29C24.8073 29 26.6585 27.2303 27.1609 26.4558C27.4615 25.9925 28.0807 25.8605 28.5441 26.161C29.0074 26.4616 29.1394 27.0808 28.8388 27.5442C28.0439 28.7697 25.614 31 21.8377 31C18.0453 31 15.8091 28.75 15.1202 27.4755C14.8576 26.9897 15.0385 26.3829 15.5244 26.1203C16.0102 25.8577 16.617 26.0386 16.8796 26.5245C17.2718 27.25 18.8842 29 21.8377 29Z" fill="black"/>
+      <ellipse cx="16" cy="18" rx="2" ry="2" fill="${faceColor}"/>
+      <ellipse cx="28" cy="18" rx="2" ry="2" fill="${faceColor}"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M21.8377 29C24.8073 29 26.6585 27.2303 27.1609 26.4558C27.4615 25.9925 28.0807 25.8605 28.5441 26.161C29.0074 26.4616 29.1394 27.0808 28.8388 27.5442C28.0439 28.7697 25.614 31 21.8377 31C18.0453 31 15.8091 28.75 15.1202 27.4755C14.8576 26.9897 15.0385 26.3829 15.5244 26.1203C16.0102 25.8577 16.617 26.0386 16.8796 26.5245C17.2718 27.25 18.8842 29 21.8377 29Z" fill="${faceColor}"/>
     </svg>
   `);
 }
-function veryHappyRatingSVG(fillColor, size) {
+function veryHappyRatingSVG(fillColor, faceColor, size) {
   return encodeURIComponent(`
     <svg width="${size}" height="${size}" viewBox="0 0 44 44" fill="none" xmlns="http://www.w3.org/2000/svg">
       <circle cx="22" cy="22" r="20" fill="${fillColor}"/>
-      <ellipse cx="16" cy="18" rx="2" ry="2" fill="black"/>
-      <ellipse cx="28" cy="18" rx="2" ry="2" fill="black"/>
-      <path d="M21.8378 31C26.7027 31 28 27.8 28 27H16C16 27.8 16.973 31 21.8378 31Z" fill="black"/>
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M26.5528 28H17.3513C17.4656 28.1996 17.6126 28.3984 17.8211 28.6128C18.4608 29.2891 19.6453 30 21.8378 30C24.0315 30 25.3168 29.2869 26.0488 28.5805C26.2631 28.3781 26.4239 28.1881 26.5528 28ZM27.4377 30.0195C26.3048 31.1131 24.5091 32 21.8378 32C19.1655 32 17.4311 31.1109 16.3681 29.9872C15.3474 28.9082 15 27.6646 15 27C15 26.4477 15.4477 26 16 26H28C28.5523 26 29 26.4477 29 27C29 27.404 28.8568 27.9069 28.6231 28.3946C28.3936 28.868 27.9783 29.4894 27.4377 30.0195Z" fill="black"/>
+      <ellipse cx="16" cy="18" rx="2" ry="2" fill="${faceColor}"/>
+      <ellipse cx="28" cy="18" rx="2" ry="2" fill="${faceColor}"/>
+      <path d="M21.8378 31C26.7027 31 28 27.8 28 27H16C16 27.8 16.973 31 21.8378 31Z" fill="${faceColor}"/>
+      <path fill-rule="evenodd" clip-rule="evenodd" d="M26.5528 28H17.3513C17.4656 28.1996 17.6126 28.3984 17.8211 28.6128C18.4608 29.2891 19.6453 30 21.8378 30C24.0315 30 25.3168 29.2869 26.0488 28.5805C26.2631 28.3781 26.4239 28.1881 26.5528 28ZM27.4377 30.0195C26.3048 31.1131 24.5091 32 21.8378 32C19.1655 32 17.4311 31.1109 16.3681 29.9872C15.3474 28.9082 15 27.6646 15 27C15 26.4477 15.4477 26 16 26H28C28.5523 26 29 26.4477 29 27C29 27.404 28.8568 27.9069 28.6231 28.3946C28.3936 28.868 27.9783 29.4894 27.4377 30.0195Z" fill="${faceColor}"/>
     </svg>
   `);
 }

package/select/multi-value.js

@@ -25,7 +25,7 @@ function MultiValue(props) {
   // todo(v11): remove the MultiValue override in favor of Tag
   const [MultiValue, tagProps] = (0, _overrides.getOverrides)(overrides.Tag || overrides.MultiValue, _tag.Tag);
   return /*#__PURE__*/React.createElement(MultiValue, _extends({
-    variant: _tag.VARIANT.solid,
+    hierarchy: _tag.HIERARCHY.primary,
     overrides: {
       Root: {
         // @ts-ignore

package/snackbar/index.d.ts

@@ -2,6 +2,7 @@ import type { Duration, Placement, SnackbarElementOverrides, SnackbarElementProp
 export { DURATION, PLACEMENT } from './constants';
 export { default as SnackbarElement } from './snackbar-element';
 export { default as SnackbarProvider, useSnackbar } from './snackbar-context';
+export type { Context as SnackbarContextT } from './snackbar-context';
 export { StyledRoot, StyledContent, StyledStartEnhancerContainer, StyledSpinner, StyledMessage, StyledWrapActionButtonContainer, StyledActionButtonContainer, StyledPlacementContainer, } from './styled-components';
 export * from './types';
 /** @deprecated use Duration instead. To be removed in future versions.*/

package/snackbar/snackbar-context.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { SnackbarElementProps, SnackbarProviderProps, Duration } from './types';
-type Context = {
+export type Context = {
     enqueue: (elementProps: SnackbarElementProps, duration?: Duration) => void;
     dequeue: () => void;
 };
@@ -10,4 +10,3 @@ export declare function useSnackbar(): {
     dequeue: () => void;
 };
 export default function SnackbarProvider({ children, overrides, placement, defaultDuration, }: SnackbarProviderProps): React.JSX.Element;
-export {};

package/snackbar/snackbar-context.js

@@ -34,11 +34,20 @@ const SnackbarContext = exports.SnackbarContext = /*#__PURE__*/React.createConte
   dequeue: fallbackHandler
 });
 function useSnackbar() {
-  const context = React.useContext(SnackbarContext);
-  return {
-    enqueue: context.enqueue,
-    dequeue: context.dequeue
-  };
+  const {
+    enqueue,
+    dequeue
+  } = React.useContext(SnackbarContext);
+  /* We use an empty dependency array because `enquque` and `dequeue` never change.
+     Ideally we'd memoize these functions and include them in the dependency array,
+     but that would require us to memoize many more functions in the SnackbarProvider,
+     and those functions depend on eachother in a circular way.
+  */
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  return React.useMemo(() => ({
+    enqueue,
+    dequeue
+  }), []);
 }
 
 // @ts-ignore
@@ -81,17 +90,6 @@ function SnackbarProvider({
       enter(snackbars[0].duration);
     }
   }, [snackbars, prevSnackbars]);
-  function dequeue() {
-    setContainerHeight(0);
-    setSnackbars(prev => {
-      const next = prev.slice(1);
-      if (next.length > 0) {
-        // @ts-ignore
-        enter(next[0].duration);
-      }
-      return next;
-    });
-  }
 
   // @ts-ignore
   function enter(duration) {
@@ -101,11 +99,19 @@ function SnackbarProvider({
       display(duration);
     }, 0);
   }
-  function exit() {
+  function dequeue() {
     setAnimating(true);
     setTimeout(() => {
       setAnimating(false);
-      dequeue();
+      setContainerHeight(0);
+      setSnackbars(prev => {
+        const next = prev.slice(1);
+        if (next.length > 0) {
+          // @ts-ignore
+          enter(next[0].duration);
+        }
+        return next;
+      });
     }, 1000);
   }
 
@@ -117,7 +123,7 @@ function SnackbarProvider({
 
     // @ts-ignore
     timeoutRef.current = setTimeout(() => {
-      exit();
+      dequeue();
     }, duration);
   }
   function handleMouseEnter() {
@@ -132,7 +138,7 @@ function SnackbarProvider({
   function handleActionClick() {
     // @ts-ignore
     clearTimeout(timeoutRef.current);
-    exit();
+    dequeue();
   }
   React.useEffect(() => {
     if (typeof document !== 'undefined') {
@@ -160,7 +166,7 @@ function SnackbarProvider({
   return /*#__PURE__*/React.createElement(SnackbarContext.Provider, {
     value: {
       enqueue,
-      dequeue: exit
+      dequeue
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: css({

package/spinner/index.d.ts

@@ -1,4 +1,6 @@
-import { StyledSpinner } from './styled-components';
-export { StyledSpinner as Spinner };
+import type { SpinnerProps } from './types';
+import type { StyletronComponent } from 'styletron-react';
 export { SIZE } from './constants';
 export * from './types';
+declare const Spinner: StyletronComponent<'i', SpinnerProps>;
+export { Spinner };

package/stepper/stepper.js

@@ -41,15 +41,39 @@ function Stepper({
   const [Input, inputProps] = (0, _overrides.getOverrides)(overrides.Input, _input.Input);
   const [DecrementButton, decrementButtonProps] = (0, _overrides.getOverrides)(overrides.DecrementButton, DefaultButton);
   const [DecrementButtonIcon, decrementButtonIconProps] = (0, _overrides.getOverrides)(overrides.DecrementButtonIcon, _icon.CheckIndeterminate);
-  const [IncrementButton, incrementButtonProps] = (0, _overrides.getOverrides)(overrides.DecrementButton, DefaultButton);
-  const [IncrementButtonIcon, incrementButtonIconProps] = (0, _overrides.getOverrides)(overrides.DecrementButtonIcon, _icon.Plus);
+  const [IncrementButton, incrementButtonProps] = (0, _overrides.getOverrides)(overrides.IncrementButton, DefaultButton);
+  const [IncrementButtonIcon, incrementButtonIconProps] = (0, _overrides.getOverrides)(overrides.IncrementButtonIcon, _icon.Plus);
+  const [, theme] = (0, _styles.useStyletron)();
+  const defaultInputOverrides = {
+    Root: {
+      style: {
+        maxWidth: '36px',
+        height: '36px',
+        borderLeftStyle: 'none',
+        borderRightStyle: 'none',
+        borderTopStyle: 'none',
+        borderBottomStyle: 'none'
+      }
+    },
+    Input: {
+      style: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        paddingLeft: 0,
+        paddingRight: 0,
+        textAlign: 'center',
+        backgroundColor: theme.colors.backgroundPrimary,
+        ...theme.typography.LabelLarge
+      }
+    }
+  };
+  inputProps.overrides = (0, _overrides.mergeOverrides)(defaultInputOverrides, inputProps.overrides);
   const handleInputChange = e => {
     const newValue = Number(e.target.value);
     if (!isNaN(newValue) && (!maxValue || newValue <= maxValue) && newValue >= minValue) {
       setValue(newValue);
     }
   };
-  const [, theme] = (0, _styles.useStyletron)();
   return /*#__PURE__*/React.createElement(Root, rootProps, /*#__PURE__*/React.createElement(DecrementButton, _extends({
     onClick: () => setValue(value - 1),
     disabled: disabled || value <= minValue,
@@ -58,30 +82,7 @@ function Stepper({
     value: value,
     onChange: handleInputChange,
     disabled: disabled,
-    "aria-label": "value",
-    overrides: {
-      Root: {
-        style: {
-          maxWidth: '36px',
-          height: '36px',
-          borderLeftStyle: 'none',
-          borderRightStyle: 'none',
-          borderTopStyle: 'none',
-          borderBottomStyle: 'none'
-        }
-      },
-      Input: {
-        style: {
-          paddingTop: 0,
-          paddingBottom: 0,
-          paddingLeft: 0,
-          paddingRight: 0,
-          textAlign: 'center',
-          backgroundColor: theme.colors.backgroundPrimary,
-          ...theme.typography.LabelLarge
-        }
-      }
-    }
+    "aria-label": "value"
   }, inputProps)), /*#__PURE__*/React.createElement(IncrementButton, _extends({
     onClick: () => setValue(value + 1)
     // @ts-expect-error todo(ts-migration) TS18048 'maxValue' is possibly 'undefined'.

package/styles/__mocks__/styled.js

@@ -24,7 +24,6 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 const MOCK_THEME = (0, _createMockTheme.default)(_themes.LightTheme);
-// @ts-ignore
 const IDENTITY = x => x;
 function useStyletron() {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -77,7 +76,6 @@ function styled(ElementName, objOrFn = {}) {
       } = this.props;
       return Object.keys(restProps).reduce((acc, key) => {
         if (key[0] !== '$') {
-          // @ts-ignore
           acc[key] = restProps[key];
         }
         return acc;

package/styles/as-primary-export-hoc.js

@@ -19,10 +19,8 @@ function asPrimaryExport(StyledComponent, propsTransformNames) {
   return function withStyledPropsHOC(props) {
     const styledProps = Object.keys(props).reduce((acc, key) => {
       if (key[0] === '$' || propsTransformNames.indexOf(key) < 0) {
-        // @ts-ignore
         acc[key] = props[key];
       } else if (propsTransformNames.indexOf(key) >= 0) {
-        // @ts-ignore
         acc['$' + key] = props[key];
       }
       return acc;

package/styles/styled.js

@@ -20,7 +20,6 @@ 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.
 */
-// @ts-ignore
 const wrapper = StyledComponent => {
   // eslint-disable-next-line react/display-name
   return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, theme => /*#__PURE__*/React.createElement(StyledComponent, _extends({
@@ -55,7 +54,6 @@ const useStyletron = exports.useStyletron = createThemedUseStyletron();
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 function withWrapper(StyledElement, wrapperFn) {
-  // @ts-ignore
   return (0, _styletronReact.withWrapper)(StyledElement, Styled => {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, theme =>

package/styles/types.d.ts

@@ -1,9 +1,9 @@
 import type { ComponentType } from 'react';
 import type { IconProps } from '../icon';
-import type { FoundationColorTokens, ComponentColorTokens, SemanticColorTokens, Animation, Breakpoints, Border, Borders, Font, Grid, Lighting, MediaQuery, Sizing, Typography, ZIndex } from '../themes';
-import type { PrimitiveColorTokens } from '../tokens';
+import type { FoundationColors, ComponentColors, SemanticColors, Animation, Breakpoints, Border, Borders, Font, Grid, Lighting, MediaQuery, Sizing, Typography, ZIndex } from '../themes';
+import type { PrimitiveColors } from '../tokens';
 export type { Animation, Breakpoints, Border, Borders, Font, Grid, Lighting, MediaQuery, Sizing, Typography, ZIndex, };
-export type ColorTokens = PrimitiveColorTokens & FoundationColorTokens & ComponentColorTokens & SemanticColorTokens & {
+export type ColorTokens = PrimitiveColors & FoundationColors & ComponentColors & SemanticColors & {
     [key in string]: string;
 };
 export type Theme = {
@@ -40,6 +40,8 @@ export type Icon = {
     ChevronLeftSmall?: ComponentType<IconProps> | ForwardedSVG;
     ChevronRight?: ComponentType<IconProps> | ForwardedSVG;
     ChevronRightSmall?: ComponentType<IconProps> | ForwardedSVG;
+    CircleCheckFilled?: ComponentType<IconProps> | ForwardedSVG;
+    CircleExclamationPointFilled?: ComponentType<IconProps> | ForwardedSVG;
     DeleteAlt?: ComponentType<IconProps> | ForwardedSVG;
     Delete?: ComponentType<IconProps> | ForwardedSVG;
     Filter?: ComponentType<IconProps> | ForwardedSVG;
@@ -47,10 +49,12 @@ export type Icon = {
     Hide?: ComponentType<IconProps> | ForwardedSVG;
     Menu?: ComponentType<IconProps> | ForwardedSVG;
     Overflow?: ComponentType<IconProps> | ForwardedSVG;
+    PaperclipFilled?: ComponentType<IconProps> | ForwardedSVG;
     Plus?: ComponentType<IconProps> | ForwardedSVG;
     Search?: ComponentType<IconProps> | ForwardedSVG;
     Show?: ComponentType<IconProps> | ForwardedSVG;
     Spinner?: ComponentType<IconProps> | ForwardedSVG;
+    TrashCanFilled?: ComponentType<IconProps> | ForwardedSVG;
     TriangleDown?: ComponentType<IconProps> | ForwardedSVG;
     TriangleLeft?: ComponentType<IconProps> | ForwardedSVG;
     TriangleRight?: ComponentType<IconProps> | ForwardedSVG;

package/tabs-motion/tabs.js

@@ -153,8 +153,8 @@ function Tabs({
     }
   }, [activeTabRef.current, orientation]);
 
-  // Update highlight on key and orientation changes.
-  React.useEffect(updateHighlight, [activeTabRef.current, orientation]);
+  // Update highlight on key, orientation and children changes.
+  React.useEffect(updateHighlight, [activeTabRef.current, orientation, children]);
 
   // Scroll active tab into view when the parent has scrollbar on mount and
   // on key change (smooth scroll). Note, if the active key changes while

package/tag/constants.d.ts

@@ -3,10 +3,9 @@ export declare const SIZE: {
     readonly medium: "medium";
     readonly large: "large";
 };
-export declare const VARIANT: Readonly<{
-    readonly solid: "solid";
-    readonly light: "light";
-    readonly outlined: "outlined";
+export declare const HIERARCHY: Readonly<{
+    readonly primary: "primary";
+    readonly secondary: "secondary";
 }>;
 export declare const KIND: {
     readonly custom: "custom";
@@ -24,4 +23,6 @@ export declare const KIND: {
     readonly orange: "orange";
     readonly purple: "purple";
     readonly brown: "brown";
+    readonly teal: "teal";
+    readonly lime: "lime";
 };

package/tag/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VARIANT = exports.SIZE = exports.KIND = void 0;
+exports.SIZE = exports.KIND = exports.HIERARCHY = void 0;
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -15,10 +15,9 @@ const SIZE = exports.SIZE = {
   medium: 'medium',
   large: 'large'
 };
-const VARIANT = exports.VARIANT = Object.freeze({
-  solid: 'solid',
-  light: 'light',
-  outlined: 'outlined'
+const HIERARCHY = exports.HIERARCHY = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary'
 });
 
 // todo: dynamic identity map generation
@@ -39,5 +38,7 @@ const KIND = exports.KIND = {
   yellow: 'yellow',
   orange: 'orange',
   purple: 'purple',
-  brown: 'brown'
+  brown: 'brown',
+  teal: 'teal',
+  lime: 'lime'
 };

package/tag/index.d.ts

@@ -1,4 +1,4 @@
 export { default as Tag } from './tag';
 export { Root as StyledRoot, Action as StyledAction, Text as StyledText, } from './styled-components';
-export { KIND, VARIANT, SIZE } from './constants';
+export { KIND, HIERARCHY, SIZE } from './constants';
 export * from './types';

package/tag/index.js

@@ -9,9 +9,15 @@ var _exportNames = {
   StyledAction: true,
   StyledText: true,
   KIND: true,
-  VARIANT: true,
+  HIERARCHY: true,
   SIZE: true
 };
+Object.defineProperty(exports, "HIERARCHY", {
+  enumerable: true,
+  get: function () {
+    return _constants.HIERARCHY;
+  }
+});
 Object.defineProperty(exports, "KIND", {
   enumerable: true,
   get: function () {
@@ -48,12 +54,6 @@ Object.defineProperty(exports, "Tag", {
     return _tag.default;
   }
 });
-Object.defineProperty(exports, "VARIANT", {
-  enumerable: true,
-  get: function () {
-    return _constants.VARIANT;
-  }
-});
 var _tag = _interopRequireDefault(require("./tag"));
 var _styledComponents = require("./styled-components");
 var _constants = require("./constants");

package/tag/styled-components.d.ts

@@ -1,5 +1,5 @@
 import type { SharedPropsArg } from './types';
-export declare function customOnRamp(color?: string, unit?: string): string;
+export declare function customOnRamp(color: string, unit?: string): string;
 export declare const Action: import("styletron-react").StyletronComponent<"span", SharedPropsArg>;
 export declare const StartEnhancerContainer: import("styletron-react").StyletronComponent<"div", SharedPropsArg>;
 export declare const Text: import("styletron-react").StyletronComponent<"span", SharedPropsArg>;