baseui 0.0.0-next-7387ac2 → 0.0.0-next-b95320a

package/a11y/a11y.js

@@ -140,8 +140,8 @@ function Violation(props) {
     ref: setPopper,
     $top: "".concat(offset.top, "px") || '0px',
     $left: "".concat(offset.left, "px") || '0px'
-  }, /*#__PURE__*/React.createElement(_index2.Caption1, null, props.target), props.violations.map(function (violation, index) {
-    return /*#__PURE__*/React.createElement(_index2.Paragraph3, {
+  }, /*#__PURE__*/React.createElement(_index2.ParagraphXSmall, null, props.target), props.violations.map(function (violation, index) {
+    return /*#__PURE__*/React.createElement(_index2.ParagraphSmall, {
       key: index
     }, violation.description);
   }))));

package/a11y/a11y.js.flow

@@ -11,7 +11,7 @@ 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';
 
@@ -101,9 +101,9 @@ function Violation(props: ViolationPropsT) {
           $top={`${offset.top}px` || '0px'}
           $left={`${offset.left}px` || '0px'}
         >
-          <Caption1>{props.target}</Caption1>
+          <ParagraphXSmall>{props.target}</ParagraphXSmall>
           {props.violations.map((violation, index) => (
-            <Paragraph3 key={index}>{violation.description}</Paragraph3>
+            <ParagraphSmall key={index}>{violation.description}</ParagraphSmall>
           ))}
         </ViolationContainer>
       </TetherBehavior>

package/button/styled-components.js

@@ -46,11 +46,14 @@ var BaseButton = (0, _index.styled)('button', function (_ref) {
     transitionDuration: $theme.animation.timing200,
     transitionTimingFunction: $theme.animation.linearCurve,
     cursor: 'pointer',
-    ':disabled': {
-      cursor: 'not-allowed',
-      backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText
-    },
+    ':disabled': _objectSpread({
+      cursor: 'not-allowed'
+    }, getDisabledStyles({
+      $theme: $theme,
+      $kind: $kind,
+      $disabled: $disabled,
+      $isSelected: $isSelected
+    })),
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,
@@ -275,10 +278,36 @@ function getFontStyles(_ref10) {
   }
 }
 
-function getPaddingStyles(_ref11) {
+function getDisabledStyles(_ref11) {
   var $theme = _ref11.$theme,
-      $size = _ref11.$size,
-      $shape = _ref11.$shape;
+      $kind = _ref11.$kind,
+      $isSelected = _ref11.$isSelected,
+      $disabled = _ref11.$disabled;
+
+  if ($disabled && $isSelected) {
+    if ($kind === _constants.KIND.primary || $kind === _constants.KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === _constants.KIND.minimal || $kind === _constants.KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
+function getPaddingStyles(_ref12) {
+  var $theme = _ref12.$theme,
+      $size = _ref12.$size,
+      $shape = _ref12.$shape;
   var iconShape = $shape === _constants.SHAPE.square || $shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.round;
 
   switch ($size) {
@@ -316,12 +345,12 @@ function getPaddingStyles(_ref11) {
   }
 }
 
-function getKindStyles(_ref12) {
-  var $theme = _ref12.$theme,
-      $isLoading = _ref12.$isLoading,
-      $isSelected = _ref12.$isSelected,
-      $kind = _ref12.$kind,
-      $disabled = _ref12.$disabled;
+function getKindStyles(_ref13) {
+  var $theme = _ref13.$theme,
+      $isLoading = _ref13.$isLoading,
+      $isSelected = _ref13.$isSelected,
+      $kind = _ref13.$kind,
+      $disabled = _ref13.$disabled;
 
   if ($disabled) {
     return Object.freeze({});
@@ -409,10 +438,10 @@ function getKindStyles(_ref12) {
   }
 }
 
-function getShapeStyles(_ref13) {
-  var $theme = _ref13.$theme,
-      $shape = _ref13.$shape,
-      $size = _ref13.$size;
+function getShapeStyles(_ref14) {
+  var $theme = _ref14.$theme,
+      $shape = _ref14.$shape,
+      $size = _ref14.$size;
 
   if ($shape === _constants.SHAPE.circle || $shape === _constants.SHAPE.square) {
     var height, width;

package/button/styled-components.js.flow

@@ -46,11 +46,7 @@ export const BaseButton = styled<SharedStylePropsT>(
     cursor: 'pointer',
     ':disabled': {
       cursor: 'not-allowed',
-      backgroundColor:
-        $kind === KIND.minimal || $kind === KIND.tertiary
-          ? 'transparent'
-          : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText,
+      ...getDisabledStyles({$theme, $kind, $disabled, $isSelected}),
     },
     marginLeft: 0,
     marginTop: 0,
@@ -229,6 +225,30 @@ function getFontStyles({$theme, $size}) {
   }
 }
 
+function getDisabledStyles({$theme, $kind, $isSelected, $disabled}) {
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill,
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText,
+      };
+    }
+  }
+
+  return {
+    backgroundColor:
+      $kind === KIND.minimal || $kind === KIND.tertiary
+        ? 'transparent'
+        : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText,
+  };
+}
+
 function getPaddingStyles({$theme, $size, $shape}) {
   const iconShape =
     $shape === SHAPE.square ||

package/data-table/column-categorical.js

@@ -208,7 +208,7 @@ function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(_index6.LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
     return /*#__PURE__*/React.createElement("div", {
       className: checkboxStyles,
       key: i

package/data-table/column-categorical.js.flow

@@ -14,7 +14,7 @@ import {Checkbox, StyledLabel} from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron, withStyle} from '../styles/index.js';
-import {Label3} from '../typography/index.js';
+import {LabelSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS} from './constants.js';
@@ -184,7 +184,7 @@ export function CategoricalFilter(props: CategoricalFilterProps) {
         })}
       >
         {!filteredCategories.length && (
-          <Label3>{locale.datatable.categoricalFilterEmpty}</Label3>
+          <LabelSmall>{locale.datatable.categoricalFilterEmpty}</LabelSmall>
         )}
 
         {Boolean(filteredCategories.length) &&

package/data-table/column-numerical.js

@@ -493,7 +493,7 @@ function NumericalFilter(props) {
       marginLeft: theme.sizing.scale300,
       marginRight: theme.sizing.scale300
     })
-  }, /*#__PURE__*/React.createElement(_index5.Paragraph4, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.Paragraph4, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(_index5.ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
       justifyContent: 'space-between'

package/data-table/column-numerical.js.flow

@@ -12,7 +12,7 @@ import {Button, SIZE} from '../button/index.js';
 import {ButtonGroup, MODE} from '../button-group/index.js';
 import {Input, SIZE as INPUT_SIZE} from '../input/index.js';
 import {useStyletron} from '../styles/index.js';
-import {Paragraph4} from '../typography/index.js';
+import {ParagraphXSmall} from '../typography/index.js';
 
 import Column from './column.js';
 import {COLUMNS, NUMERICAL_FORMATS, NUMERICAL_OPERATIONS} from './constants.js';
@@ -388,8 +388,8 @@ function NumericalFilter(props) {
           marginRight: theme.sizing.scale300,
         })}
       >
-        <Paragraph4>{format(min, props.options)}</Paragraph4>{' '}
-        <Paragraph4>{format(max, props.options)}</Paragraph4>
+        <ParagraphXSmall>{format(min, props.options)}</ParagraphXSmall>{' '}
+        <ParagraphXSmall>{format(max, props.options)}</ParagraphXSmall>
       </div>
 
       <div className={css({display: 'flex', justifyContent: 'space-between'})}>

package/es/a11y/a11y.js

@@ -9,7 +9,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';
 
@@ -95,7 +95,7 @@ function Violation(props) {
     ref: setPopper,
     $top: `${offset.top}px` || '0px',
     $left: `${offset.left}px` || '0px'
-  }, /*#__PURE__*/React.createElement(Caption1, null, props.target), props.violations.map((violation, index) => /*#__PURE__*/React.createElement(Paragraph3, {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, props.target), props.violations.map((violation, index) => /*#__PURE__*/React.createElement(ParagraphSmall, {
     key: index
   }, violation.description)))));
 }

package/es/button/styled-components.js

@@ -39,8 +39,12 @@ export const BaseButton = styled('button', ({
   cursor: 'pointer',
   ':disabled': {
     cursor: 'not-allowed',
-    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-    color: $theme.colors.buttonDisabledText
+    ...getDisabledStyles({
+      $theme,
+      $kind,
+      $disabled,
+      $isSelected
+    })
   },
   marginLeft: 0,
   marginTop: 0,
@@ -272,6 +276,32 @@ function getFontStyles({
   }
 }
 
+function getDisabledStyles({
+  $theme,
+  $kind,
+  $isSelected,
+  $disabled
+}) {
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
 function getPaddingStyles({
   $theme,
   $size,

package/es/data-table/column-categorical.js

@@ -13,7 +13,7 @@ import { Checkbox, StyledLabel } from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
 import { useStyletron, withStyle } from '../styles/index.js';
-import { Label3 } from '../typography/index.js';
+import { LabelSmall } from '../typography/index.js';
 import Column from './column.js';
 import { COLUMNS } from './constants.js';
 import { LocaleContext } from '../locale/index.js';
@@ -139,7 +139,7 @@ export function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map((category, i) => /*#__PURE__*/React.createElement("div", {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map((category, i) => /*#__PURE__*/React.createElement("div", {
     className: checkboxStyles,
     key: i
   }, /*#__PURE__*/React.createElement(Checkbox, {

package/es/data-table/column-numerical.js

@@ -11,7 +11,7 @@ import { Button, SIZE } from '../button/index.js';
 import { ButtonGroup, MODE } from '../button-group/index.js';
 import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
 import { useStyletron } from '../styles/index.js';
-import { Paragraph4 } from '../typography/index.js';
+import { ParagraphXSmall } from '../typography/index.js';
 import Column from './column.js';
 import { COLUMNS, NUMERICAL_FORMATS, NUMERICAL_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
@@ -402,7 +402,7 @@ function NumericalFilter(props) {
       marginLeft: theme.sizing.scale300,
       marginRight: theme.sizing.scale300
     })
-  }, /*#__PURE__*/React.createElement(Paragraph4, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(Paragraph4, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
       justifyContent: 'space-between'

package/es/index.js

@@ -8,4 +8,4 @@ export { styled, withStyle, withWrapper, useStyletron, createThemedStyled, creat
 export { createTheme, createDarkTheme, createLightTheme, lightThemePrimitives, darkThemePrimitives, darkThemeOverrides, DarkTheme, DarkThemeMove, LightTheme, LightThemeMove } from './themes/index.js';
 export { default as LocaleProvider } from './locale/index.js';
 export { default as BaseProvider } from './helpers/base-provider.js';
-export { mergeOverrides } from './helpers/overrides.js';
+export { getOverrides, mergeOverrides } from './helpers/overrides.js';

package/es/progress-bar/index.js

@@ -8,4 +8,4 @@ export { default as ProgressBar } from './progressbar.js';
 export { default as ProgressBarRounded } from './progressbar-rounded.js';
 export { SIZE } from './constants.js'; // Styled elements
 
-export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow
+export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledInfiniteBar, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow

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

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

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);
   }))));

package/esm/button/styled-components.js

@@ -43,11 +43,14 @@ export var BaseButton = styled('button', function (_ref) {
     transitionDuration: $theme.animation.timing200,
     transitionTimingFunction: $theme.animation.linearCurve,
     cursor: 'pointer',
-    ':disabled': {
-      cursor: 'not-allowed',
-      backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
-      color: $theme.colors.buttonDisabledText
-    },
+    ':disabled': _objectSpread({
+      cursor: 'not-allowed'
+    }, getDisabledStyles({
+      $theme: $theme,
+      $kind: $kind,
+      $disabled: $disabled,
+      $isSelected: $isSelected
+    })),
     marginLeft: 0,
     marginTop: 0,
     marginRight: 0,
@@ -267,10 +270,36 @@ function getFontStyles(_ref10) {
   }
 }
 
-function getPaddingStyles(_ref11) {
+function getDisabledStyles(_ref11) {
   var $theme = _ref11.$theme,
-      $size = _ref11.$size,
-      $shape = _ref11.$shape;
+      $kind = _ref11.$kind,
+      $isSelected = _ref11.$isSelected,
+      $disabled = _ref11.$disabled;
+
+  if ($disabled && $isSelected) {
+    if ($kind === KIND.primary || $kind === KIND.secondary) {
+      return {
+        color: $theme.colors.buttonDisabledActiveText,
+        backgroundColor: $theme.colors.buttonDisabledActiveFill
+      };
+    } else if ($kind === KIND.minimal || $kind === KIND.tertiary) {
+      return {
+        backgroundColor: $theme.colors.buttonTertiaryDisabledActiveFill,
+        color: $theme.colors.buttonTertiaryDisabledActiveText
+      };
+    }
+  }
+
+  return {
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
+    color: $theme.colors.buttonDisabledText
+  };
+}
+
+function getPaddingStyles(_ref12) {
+  var $theme = _ref12.$theme,
+      $size = _ref12.$size,
+      $shape = _ref12.$shape;
   var iconShape = $shape === SHAPE.square || $shape === SHAPE.circle || $shape === SHAPE.round;
 
   switch ($size) {
@@ -308,12 +337,12 @@ function getPaddingStyles(_ref11) {
   }
 }
 
-function getKindStyles(_ref12) {
-  var $theme = _ref12.$theme,
-      $isLoading = _ref12.$isLoading,
-      $isSelected = _ref12.$isSelected,
-      $kind = _ref12.$kind,
-      $disabled = _ref12.$disabled;
+function getKindStyles(_ref13) {
+  var $theme = _ref13.$theme,
+      $isLoading = _ref13.$isLoading,
+      $isSelected = _ref13.$isSelected,
+      $kind = _ref13.$kind,
+      $disabled = _ref13.$disabled;
 
   if ($disabled) {
     return Object.freeze({});
@@ -401,10 +430,10 @@ function getKindStyles(_ref12) {
   }
 }
 
-function getShapeStyles(_ref13) {
-  var $theme = _ref13.$theme,
-      $shape = _ref13.$shape,
-      $size = _ref13.$size;
+function getShapeStyles(_ref14) {
+  var $theme = _ref14.$theme,
+      $shape = _ref14.$shape,
+      $size = _ref14.$size;
 
   if ($shape === SHAPE.circle || $shape === SHAPE.square) {
     var height, width;

package/esm/data-table/column-categorical.js

@@ -29,7 +29,7 @@ import { Checkbox, StyledLabel } from '../checkbox/index.js';
 import Search from '../icon/search.js';
 import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
 import { useStyletron, withStyle } from '../styles/index.js';
-import { Label3 } from '../typography/index.js';
+import { LabelSmall } from '../typography/index.js';
 import Column from './column.js';
 import { COLUMNS } from './constants.js';
 import { LocaleContext } from '../locale/index.js';
@@ -186,7 +186,7 @@ export function CategoricalFilter(props) {
       overflowY: 'auto',
       marginTop: theme.sizing.scale600
     })
-  }, !filteredCategories.length && /*#__PURE__*/React.createElement(Label3, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
+  }, !filteredCategories.length && /*#__PURE__*/React.createElement(LabelSmall, null, locale.datatable.categoricalFilterEmpty), Boolean(filteredCategories.length) && filteredCategories.map(function (category, i) {
     return /*#__PURE__*/React.createElement("div", {
       className: checkboxStyles,
       key: i

package/esm/data-table/column-numerical.js

@@ -37,7 +37,7 @@ import { Button, SIZE } from '../button/index.js';
 import { ButtonGroup, MODE } from '../button-group/index.js';
 import { Input, SIZE as INPUT_SIZE } from '../input/index.js';
 import { useStyletron } from '../styles/index.js';
-import { Paragraph4 } from '../typography/index.js';
+import { ParagraphXSmall } from '../typography/index.js';
 import Column from './column.js';
 import { COLUMNS, NUMERICAL_FORMATS, NUMERICAL_OPERATIONS } from './constants.js';
 import FilterShell from './filter-shell.js';
@@ -475,7 +475,7 @@ function NumericalFilter(props) {
       marginLeft: theme.sizing.scale300,
       marginRight: theme.sizing.scale300
     })
-  }, /*#__PURE__*/React.createElement(Paragraph4, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(Paragraph4, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(min, props.options)), ' ', /*#__PURE__*/React.createElement(ParagraphXSmall, null, format(max, props.options))), /*#__PURE__*/React.createElement("div", {
     className: css({
       display: 'flex',
       justifyContent: 'space-between'

package/esm/index.js

@@ -8,4 +8,4 @@ export { styled, withStyle, withWrapper, useStyletron, createThemedStyled, creat
 export { createTheme, createDarkTheme, createLightTheme, lightThemePrimitives, darkThemePrimitives, darkThemeOverrides, DarkTheme, DarkThemeMove, LightTheme, LightThemeMove } from './themes/index.js';
 export { default as LocaleProvider } from './locale/index.js';
 export { default as BaseProvider } from './helpers/base-provider.js';
-export { mergeOverrides } from './helpers/overrides.js';
+export { getOverrides, mergeOverrides } from './helpers/overrides.js';

package/esm/progress-bar/index.js

@@ -8,4 +8,4 @@ export { default as ProgressBar } from './progressbar.js';
 export { default as ProgressBarRounded } from './progressbar-rounded.js';
 export { SIZE } from './constants.js'; // Styled elements
 
-export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow
+export { StyledRoot, StyledBarContainer, StyledBar, StyledBarProgress, StyledInfiniteBar, StyledLabel, StyledProgressBarRoundedRoot, StyledProgressBarRoundedSvg, StyledProgressBarRoundedTrackBackground, StyledProgressBarRoundedTrackForeground, StyledProgressBarRoundedText } from './styled-components.js'; // Flow

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

@@ -38,6 +38,8 @@ export default (function () {
     buttonTertiaryActive: themePrimitives.primary600,
     buttonTertiarySelectedText: themePrimitives.primary,
     buttonTertiarySelectedFill: themePrimitives.primary600,
+    buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
+    buttonTertiaryDisabledActiveText: themePrimitives.mono300,
     buttonTertiarySpinnerForeground: themePrimitives.primary50,
     buttonTertiarySpinnerBackground: themePrimitives.primary500,
     buttonMinimalFill: 'transparent',
@@ -50,6 +52,8 @@ export default (function () {
     buttonMinimalSpinnerBackground: themePrimitives.primary500,
     buttonDisabledFill: themePrimitives.mono600,
     buttonDisabledText: themePrimitives.mono300,
+    buttonDisabledActiveFill: themePrimitives.mono200,
+    buttonDisabledActiveText: themePrimitives.primary500,
     buttonDisabledSpinnerForeground: themePrimitives.mono200,
     buttonDisabledSpinnerBackground: themePrimitives.mono400,
     // Breadcrumbs

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

@@ -38,6 +38,8 @@ export default (function () {
     buttonTertiaryActive: themePrimitives.primary100,
     buttonTertiarySelectedFill: themePrimitives.primary100,
     buttonTertiarySelectedText: themePrimitives.primary,
+    buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
+    buttonTertiaryDisabledActiveText: themePrimitives.mono600,
     buttonTertiarySpinnerForeground: themePrimitives.accent,
     buttonTertiarySpinnerBackground: themePrimitives.primary100,
     buttonMinimalFill: 'transparent',
@@ -50,6 +52,8 @@ export default (function () {
     buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
+    buttonDisabledActiveFill: themePrimitives.mono700,
+    buttonDisabledActiveText: themePrimitives.mono100,
     buttonDisabledSpinnerForeground: themePrimitives.mono600,
     buttonDisabledSpinnerBackground: themePrimitives.mono400,
     // Breadcrumbs

package/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "BaseProvider", {
     return _baseProvider.default;
   }
 });
+Object.defineProperty(exports, "getOverrides", {
+  enumerable: true,
+  get: function get() {
+    return _overrides.getOverrides;
+  }
+});
 Object.defineProperty(exports, "mergeOverrides", {
   enumerable: true,
   get: function get() {

package/index.js.flow

@@ -30,7 +30,7 @@ export {
 } from './themes/index.js';
 export {default as LocaleProvider} from './locale/index.js';
 export {default as BaseProvider} from './helpers/base-provider.js';
-export {mergeOverrides} from './helpers/overrides.js';
+export {getOverrides, mergeOverrides} from './helpers/overrides.js';
 export type {PrimitivesT} from './themes/types.js';
 export type {ThemeT} from './styles/types.js';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-next-7387ac2",
+  "version": "0.0.0-next-b95320a",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/progress-bar/index.js

@@ -45,6 +45,12 @@ Object.defineProperty(exports, "StyledBarProgress", {
     return _styledComponents.StyledBarProgress;
   }
 });
+Object.defineProperty(exports, "StyledInfiniteBar", {
+  enumerable: true,
+  get: function get() {
+    return _styledComponents.StyledInfiniteBar;
+  }
+});
 Object.defineProperty(exports, "StyledLabel", {
   enumerable: true,
   get: function get() {

package/progress-bar/index.js.flow

@@ -14,6 +14,7 @@ export {
   StyledBarContainer,
   StyledBar,
   StyledBarProgress,
+  StyledInfiniteBar,
   StyledLabel,
   StyledProgressBarRoundedRoot,
   StyledProgressBarRoundedSvg,

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

@@ -48,6 +48,8 @@ var _default = function _default() {
     buttonTertiaryActive: themePrimitives.primary600,
     buttonTertiarySelectedText: themePrimitives.primary,
     buttonTertiarySelectedFill: themePrimitives.primary600,
+    buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
+    buttonTertiaryDisabledActiveText: themePrimitives.mono300,
     buttonTertiarySpinnerForeground: themePrimitives.primary50,
     buttonTertiarySpinnerBackground: themePrimitives.primary500,
     buttonMinimalFill: 'transparent',
@@ -60,6 +62,8 @@ var _default = function _default() {
     buttonMinimalSpinnerBackground: themePrimitives.primary500,
     buttonDisabledFill: themePrimitives.mono600,
     buttonDisabledText: themePrimitives.mono300,
+    buttonDisabledActiveFill: themePrimitives.mono200,
+    buttonDisabledActiveText: themePrimitives.primary500,
     buttonDisabledSpinnerForeground: themePrimitives.mono200,
     buttonDisabledSpinnerBackground: themePrimitives.mono400,
     // Breadcrumbs

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

@@ -43,6 +43,8 @@ export default (
   buttonTertiaryActive: themePrimitives.primary600,
   buttonTertiarySelectedText: themePrimitives.primary,
   buttonTertiarySelectedFill: themePrimitives.primary600,
+  buttonTertiaryDisabledActiveFill: themePrimitives.primary700,
+  buttonTertiaryDisabledActiveText: themePrimitives.mono300,
   buttonTertiarySpinnerForeground: themePrimitives.primary50,
   buttonTertiarySpinnerBackground: themePrimitives.primary500,
 
@@ -57,6 +59,8 @@ export default (
 
   buttonDisabledFill: themePrimitives.mono600,
   buttonDisabledText: themePrimitives.mono300,
+  buttonDisabledActiveFill: themePrimitives.mono200,
+  buttonDisabledActiveText: themePrimitives.primary500,
   buttonDisabledSpinnerForeground: themePrimitives.mono200,
   buttonDisabledSpinnerBackground: themePrimitives.mono400,
 

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

@@ -48,6 +48,8 @@ var _default = function _default() {
     buttonTertiaryActive: themePrimitives.primary100,
     buttonTertiarySelectedFill: themePrimitives.primary100,
     buttonTertiarySelectedText: themePrimitives.primary,
+    buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
+    buttonTertiaryDisabledActiveText: themePrimitives.mono600,
     buttonTertiarySpinnerForeground: themePrimitives.accent,
     buttonTertiarySpinnerBackground: themePrimitives.primary100,
     buttonMinimalFill: 'transparent',
@@ -60,6 +62,8 @@ var _default = function _default() {
     buttonMinimalSpinnerBackground: themePrimitives.primary100,
     buttonDisabledFill: themePrimitives.mono200,
     buttonDisabledText: themePrimitives.mono600,
+    buttonDisabledActiveFill: themePrimitives.mono700,
+    buttonDisabledActiveText: themePrimitives.mono100,
     buttonDisabledSpinnerForeground: themePrimitives.mono600,
     buttonDisabledSpinnerBackground: themePrimitives.mono400,
     // Breadcrumbs

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

@@ -43,6 +43,8 @@ export default (
   buttonTertiaryActive: themePrimitives.primary100,
   buttonTertiarySelectedFill: themePrimitives.primary100,
   buttonTertiarySelectedText: themePrimitives.primary,
+  buttonTertiaryDisabledActiveFill: themePrimitives.primary50,
+  buttonTertiaryDisabledActiveText: themePrimitives.mono600,
   buttonTertiarySpinnerForeground: themePrimitives.accent,
   buttonTertiarySpinnerBackground: themePrimitives.primary100,
 
@@ -57,6 +59,8 @@ export default (
 
   buttonDisabledFill: themePrimitives.mono200,
   buttonDisabledText: themePrimitives.mono600,
+  buttonDisabledActiveFill: themePrimitives.mono700,
+  buttonDisabledActiveText: themePrimitives.mono100,
   buttonDisabledSpinnerForeground: themePrimitives.mono600,
   buttonDisabledSpinnerBackground: themePrimitives.mono400,
 

package/themes/types.js.flow

@@ -198,6 +198,8 @@ export type ComponentColorTokensT = {|
   buttonTertiaryActive: string,
   buttonTertiarySelectedText: string,
   buttonTertiarySelectedFill: string,
+  buttonTertiaryDisabledActiveFill: string,
+  buttonTertiaryDisabledActiveText: string,
   buttonTertiarySpinnerForeground: string,
   buttonTertiarySpinnerBackground: string,
   buttonMinimalFill: string,
@@ -210,6 +212,8 @@ export type ComponentColorTokensT = {|
   buttonMinimalSpinnerBackground: string,
   buttonDisabledFill: string,
   buttonDisabledText: string,
+  buttonDisabledActiveFill: string,
+  buttonDisabledActiveText: string,
   buttonDisabledSpinnerForeground: string,
   buttonDisabledSpinnerBackground: string,