baseui 15.0.1 → 16.0.0

package/button/types.d.ts

@@ -1,5 +1,5 @@
 import type * as React from 'react';
-import type { KIND, SIZE, SHAPE } from './constants';
+import type { KIND, SIZE, SHAPE, MIN_HIT_AREA, WIDTH_TYPE } from './constants';
 import type { Override } from '../helpers/overrides';
 export type ButtonOverrides = {
     Root?: Override;
@@ -8,17 +8,27 @@ export type ButtonOverrides = {
     EndEnhancer?: Override;
     LoadingSpinnerContainer?: Override;
     LoadingSpinner?: Override;
+    StartEnhancerButtonContentContainer?: Override;
 };
 export type CustomColors = {
     backgroundColor: string;
     color: string;
 };
-interface BaseButtonProps {
+interface BaseButtonSharedProps {
+    /** Sets a11y attributes */
+    /** For icon only buttons, aria-label is mandatory; aria-hidden needs to be true on svg elements */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
+    /** floating action button */
+    backgroundSafe?: boolean;
     children?: React.ReactNode;
     colors?: CustomColors;
     disabled?: boolean;
     /** A helper rendered at the end of the button. */
     endEnhancer?: React.ReactNode | React.ComponentType<any>;
+    /** Defines the minimum height of the hit target area */
+    minHitArea?: keyof typeof MIN_HIT_AREA;
     /** Show loading button style and spinner. */
     isLoading?: boolean;
     /** Indicates that the button is selected */
@@ -34,6 +44,12 @@ interface BaseButtonProps {
     /** A helper rendered at the start of the button. */
     startEnhancer?: React.ReactNode | React.ComponentType<any>;
     type?: 'submit' | 'reset' | 'button';
+    /**
+     * Controls the button’s width behavior.
+     * "hug" allows the button to adjust its width based on the content (hug),
+     * while "fill" lets the button maintain a specified, filled or fixed width (parent container will provide the width or developer can use overrides to set the width)
+     */
+    widthType?: keyof typeof WIDTH_TYPE;
 }
 export interface LinkButtonProps {
     /** Convert button to <a> tag allowing for opening links directly.
@@ -43,10 +59,25 @@ export interface LinkButtonProps {
     href?: string | null;
     target?: string;
 }
-export interface ButtonProps extends BaseButtonProps, LinkButtonProps {
+export interface ButtonProps extends BaseButtonSharedProps, LinkButtonProps {
 }
+export type BaseButtonProps = Omit<ButtonProps, 'children'> & {
+    /** Children can be either React nodes or a function that returns React nodes */
+    children?: React.ReactNode | ((props: {
+        isHovered: boolean;
+        isPressed: boolean;
+        isFocused: boolean;
+        artworkSize: string;
+    }) => React.ReactNode);
+};
+export type ButtonInternalsProps = BaseButtonProps & {
+    isHovered?: boolean;
+    isPressed?: boolean;
+    isFocused?: boolean;
+};
 export type SharedStyleProps<AS = React.ComponentType<any> | keyof JSX.IntrinsicElements> = {
     $colors?: CustomColors;
+    $minHitArea?: keyof typeof MIN_HIT_AREA;
     $kind?: keyof typeof KIND;
     $isSelected?: boolean;
     $shape?: keyof typeof SHAPE;
@@ -54,6 +85,11 @@ export type SharedStyleProps<AS = React.ComponentType<any> | keyof JSX.Intrinsic
     $isLoading?: boolean;
     $disabled?: boolean;
     $isFocusVisible?: boolean;
+    $isHovered?: boolean;
+    $isPressed?: boolean;
+    $isFocused?: boolean;
     $as?: AS;
+    $backgroundSafe?: boolean;
+    $widthType?: keyof typeof WIDTH_TYPE;
 };
 export {};

package/button/utils.d.ts

@@ -1,2 +1,2 @@
-import type { ButtonProps, SharedStyleProps } from './types';
-export declare function getSharedProps({ colors, disabled, isLoading, isSelected, kind, shape, size, }: ButtonProps): Partial<SharedStyleProps>;
+import type { BaseButtonProps, SharedStyleProps } from './types';
+export declare function getSharedProps({ colors, disabled, minHitArea, isLoading, isSelected, kind, shape, size, backgroundSafe, widthType, }: BaseButtonProps): Partial<SharedStyleProps>;

package/button/utils.js

@@ -14,19 +14,25 @@ LICENSE file in the root directory of this source tree.
 function getSharedProps({
   colors,
   disabled,
+  minHitArea,
   isLoading,
   isSelected,
   kind,
   shape,
-  size
+  size,
+  backgroundSafe,
+  widthType
 }) {
   return {
     $colors: colors,
     $disabled: disabled,
+    $minHitArea: minHitArea,
     $isLoading: isLoading,
-    $isSelected: isSelected,
+    $isSelected: Boolean(isSelected),
     $kind: kind,
     $shape: shape,
-    $size: size
+    $size: size,
+    $backgroundSafe: backgroundSafe,
+    $widthType: widthType
   };
 }

package/button-group/button-group.d.ts

@@ -10,6 +10,7 @@ export default class ButtonGroup extends React.Component<ButtonGroupProps> {
         shape: "default";
         size: "default";
         kind: "secondary";
+        padding: "none";
     };
     render(): React.JSX.Element;
 }

package/button-group/button-group.js

@@ -39,40 +39,46 @@ class ButtonGroup extends React.Component {
   render() {
     const {
       overrides = {},
-      mode = _constants.MODE.checkbox,
+      mode,
       children,
       selected,
       disabled,
       onClick,
       kind,
       shape,
-      size
+      size,
+      wrap,
+      padding
     } = this.props;
     const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
     const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
     const isRadio = mode === _constants.MODE.radio;
+    const isSimpleClickableBtnGroup = (!mode || Object.values(_constants.MODE).every(val => val !== mode)) && typeof selected === 'undefined'; // button group for simple clickable buttons(not checkbox or radio buttons)
+
     const numItems = React.Children.count(children);
     return /*#__PURE__*/React.createElement(_locale.LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
       "aria-label": ariaLabel || locale.buttongroup.ariaLabel,
+      "aria-labelledby": this.props['aria-labelledby'],
+      "aria-describedby": this.props['aria-describedby'],
       "data-baseweb": "button-group",
       role: isRadio ? 'radiogroup' : 'group',
-      $shape: shape,
-      $length: children.length
+      $size: size,
+      $padding: padding,
+      $wrap: wrap
     }, rootProps), React.Children.map(children, (child, index) => {
       if (! /*#__PURE__*/React.isValidElement(child)) {
         return null;
       }
-      const isSelected = child.props.isSelected ? child.props.isSelected : isIndexSelected(selected, index);
+      const isSelected = child.props.isSelected ? child.props.isSelected : isSimpleClickableBtnGroup ? undefined // avoid adding aria-pressed to buttons in actionable button group
+      : isIndexSelected(selected, index);
       if (isRadio) {
         this.childRefs[index] = /*#__PURE__*/React.createRef();
       }
       return /*#__PURE__*/React.cloneElement(child, {
-        // @ts-ignore
         disabled: disabled || child.props.disabled,
         isSelected,
         ref: isRadio ? this.childRefs[index] : undefined,
-        tabIndex: !isRadio || isSelected || isRadio && (!selected || selected === -1) && index === 0 ? 0 : -1,
-        // @ts-ignore
+        tabIndex: !isRadio || isSelected || isRadio && (!selected || selected === -1 || Array.isArray(selected) && selected.length === 0) && index === 0 ? 0 : -1,
         onKeyDown: e => {
           if (!isRadio) return;
           const value = Number(selected) ? Number(selected) : 0;
@@ -90,7 +96,6 @@ class ButtonGroup extends React.Component {
           }
         },
         kind,
-        // @ts-ignore
         onClick: event => {
           if (disabled) {
             return;
@@ -106,30 +111,13 @@ class ButtonGroup extends React.Component {
         size,
         overrides: {
           BaseButton: {
-            // @ts-ignore
-            style: ({
-              $theme
-            }) => {
-              // Even though baseui's buttons have square corners, some applications override to
-              // rounded. Maintaining corner radius in this circumstance is ideal to avoid further
-              // customization.
-              if (children.length === 1) {
-                return {};
-              }
-              if (shape !== _button.SHAPE.default) {
-                return {
-                  marginLeft: $theme.sizing.scale100,
-                  marginRight: $theme.sizing.scale100
-                };
-              }
-              return {
-                marginLeft: '0.5px',
-                marginRight: '0.5px'
-              };
-            },
             props: {
-              'aria-checked': isSelected,
-              role: isRadio ? 'radio' : 'checkbox'
+              ...(typeof child.props['aria-checked'] === 'boolean' ? {
+                'aria-checked': child.props['aria-checked']
+              } : isSimpleClickableBtnGroup ? {} : {
+                'aria-checked': isSelected
+              }),
+              role: child.props.role || isRadio ? 'radio' : !isSimpleClickableBtnGroup ? 'checkbox' : undefined
             }
           },
           ...child.props.overrides
@@ -144,5 +132,6 @@ _defineProperty(ButtonGroup, "defaultProps", {
   onClick: () => {},
   shape: _button.SHAPE.default,
   size: _button.SIZE.default,
-  kind: _button.KIND.secondary
+  kind: _button.KIND.secondary,
+  padding: _constants.PADDING.none
 });

package/button-group/constants.d.ts

@@ -5,3 +5,8 @@ export declare const MODE: Readonly<{
 export declare const STATE_CHANGE_TYPE: Readonly<{
     readonly change: "change";
 }>;
+export declare const PADDING: Readonly<{
+    readonly default: "default";
+    readonly none: "none";
+    readonly custom: "custom";
+}>;

package/button-group/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.STATE_CHANGE_TYPE = exports.MODE = void 0;
+exports.STATE_CHANGE_TYPE = exports.PADDING = exports.MODE = void 0;
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -16,4 +16,9 @@ const MODE = exports.MODE = Object.freeze({
 });
 const STATE_CHANGE_TYPE = exports.STATE_CHANGE_TYPE = Object.freeze({
   change: 'change'
+});
+const PADDING = exports.PADDING = Object.freeze({
+  default: 'default',
+  none: 'none',
+  custom: 'custom' // expect custom padding from developer
 });

package/button-group/index.d.ts

@@ -1,8 +1,17 @@
+export declare const KIND: {
+    readonly outline: "outline";
+    readonly primary: "primary";
+    readonly secondary: "secondary";
+    readonly tertiary: "tertiary";
+    readonly dangerPrimary: "dangerPrimary";
+    readonly dangerSecondary: "dangerSecondary";
+    readonly dangerTertiary: "dangerTertiary";
+};
 export { default as ButtonGroup } from './button-group';
 export { default as StatefulButtonGroup } from './stateful-button-group';
 export { default as StatefulContainer } from './stateful-container';
 export { SIZE, SHAPE } from '../button';
-export { MODE, STATE_CHANGE_TYPE } from './constants';
+export { MODE, STATE_CHANGE_TYPE, PADDING } from './constants';
 export { StyledRoot } from './styled-components';
 export * from './types';
 export type { ButtonGroupLocale } from './locale';

package/button-group/index.js

@@ -4,13 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 var _exportNames = {
+  KIND: true,
+  SIZE: true,
+  SHAPE: true,
   ButtonGroup: true,
   StatefulButtonGroup: true,
   StatefulContainer: true,
-  SIZE: true,
-  SHAPE: true,
   MODE: true,
   STATE_CHANGE_TYPE: true,
+  PADDING: true,
   StyledRoot: true
 };
 Object.defineProperty(exports, "ButtonGroup", {
@@ -19,12 +21,19 @@ Object.defineProperty(exports, "ButtonGroup", {
     return _buttonGroup.default;
   }
 });
+exports.KIND = void 0;
 Object.defineProperty(exports, "MODE", {
   enumerable: true,
   get: function () {
     return _constants.MODE;
   }
 });
+Object.defineProperty(exports, "PADDING", {
+  enumerable: true,
+  get: function () {
+    return _constants.PADDING;
+  }
+});
 Object.defineProperty(exports, "SHAPE", {
   enumerable: true,
   get: function () {
@@ -61,10 +70,10 @@ Object.defineProperty(exports, "StyledRoot", {
     return _styledComponents.StyledRoot;
   }
 });
+var _button = require("../button");
 var _buttonGroup = _interopRequireDefault(require("./button-group"));
 var _statefulButtonGroup = _interopRequireDefault(require("./stateful-button-group"));
 var _statefulContainer = _interopRequireDefault(require("./stateful-container"));
-var _button = require("../button");
 var _constants = require("./constants");
 var _styledComponents = require("./styled-components");
 var _types = require("./types");
@@ -79,4 +88,24 @@ Object.keys(_types).forEach(function (key) {
     }
   });
 });
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+/*
+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.
+*/
+
+const KIND = exports.KIND = {
+  ..._button.KIND,
+  ..._button.BUTTON_GROUP_EXCLUSIVE_KINDS
+};
+
+// Constants
+
+// Styled elements
+
+// Types
+
+/** @deprecated To be removed in future versions */
+// eslint-disable-next-line @typescript-eslint/no-unused-vars

package/button-group/styled-components.d.ts

@@ -1,4 +1,7 @@
+import { SIZE } from '../button';
+import { PADDING } from './constants';
 export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
-    $shape: string;
-    $length: number;
+    $padding: (typeof PADDING)[keyof typeof PADDING];
+    $wrap?: boolean;
+    $size: (typeof SIZE)[keyof typeof SIZE];
 }>;

package/button-group/styled-components.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.StyledRoot = void 0;
 var _styles = require("../styles");
 var _button = require("../button");
+var _constants = require("./constants");
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -14,16 +15,56 @@ LICENSE file in the root directory of this source tree.
 */
 
 const StyledRoot = exports.StyledRoot = (0, _styles.styled)('div', ({
-  $shape,
-  $length,
+  $padding,
+  $wrap,
+  $size,
   $theme
 }) => {
-  const margin = $length === 1 ? undefined : $shape !== _button.SHAPE.default ? `-${$theme.sizing.scale100}` : '-0.5px';
   return {
     display: 'flex',
-    marginLeft: margin,
-    marginRight: margin
+    columnGap: $theme.sizing.scale300,
+    rowGap: $size === _button.SIZE.xSmall || $size === _button.SIZE.mini ? $theme.sizing.scale500 : $theme.sizing.scale300,
+    ...getWrapStyles({
+      $wrap
+    }),
+    ...getPaddingStyles({
+      $padding,
+      $theme
+    })
   };
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
+StyledRoot.displayName = 'StyledRoot';
+const getWrapStyles = ({
+  $wrap
+}) => {
+  if (typeof $wrap === 'boolean') {
+    return $wrap ? {
+      flexWrap: 'wrap'
+    } : {
+      overflowX: 'auto',
+      scrollbarWidth: 'none'
+    };
+  }
+  return {};
+};
+const getPaddingStyles = ({
+  $padding,
+  $theme
+}) => {
+  switch ($padding) {
+    case _constants.PADDING.default:
+      return {
+        paddingLeft: $theme.sizing.scale600,
+        paddingRight: $theme.sizing.scale600
+      };
+    case _constants.PADDING.none:
+      return {
+        paddingLeft: 0,
+        paddingRight: 0
+      };
+    case _constants.PADDING.custom:
+    default:
+      return Object.freeze({});
+  }
+};

package/button-group/types.d.ts

@@ -1,11 +1,14 @@
 import type * as React from 'react';
-import type { SIZE, SHAPE, KIND } from '../button';
+import type { SIZE, SHAPE } from '../button';
+import type { KIND } from './index';
 import type { Override } from '../helpers/overrides';
-import type { MODE, STATE_CHANGE_TYPE } from './constants';
+import type { MODE, STATE_CHANGE_TYPE, PADDING } from './constants';
 export type ButtonGroupProps = {
     /** Accessible label. */
     ariaLabel?: string;
     'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-describedby'?: string;
     /** Set of more than one `Button` components */
     children: Array<React.ReactNode>;
     /** Defines if the button group is disabled. */
@@ -34,6 +37,10 @@ export type ButtonGroupProps = {
     size?: (typeof SIZE)[keyof typeof SIZE];
     /** Defines the `kind` of the buttons in the group */
     kind?: (typeof KIND)[keyof typeof KIND];
+    /** Defines if the button group should wrap. (when it's set to false, the button group will be displayed in a single line and overflow if necessary)*/
+    wrap?: boolean;
+    /** Defines the padding of the buttons in the button group. 'none' by default - no padding, 'default' - 8px horizontal padding, 'custom' - expect custom padding from developer */
+    padding?: (typeof PADDING)[keyof typeof PADDING];
 };
 type ButtonGroupOverrides = {
     Root?: Override;

package/checkbox/styled-components.js

@@ -285,13 +285,9 @@ const Toggle = exports.Toggle = (0, _styles.styled)('div', props => {
 Toggle.displayName = "Toggle";
 Toggle.displayName = 'Toggle';
 const ToggleTrack = exports.ToggleTrack = (0, _styles.styled)('div', props => {
-  let backgroundColor = props.$theme.colors.toggleTrackFill;
-  if (props.$disabled) {
-    backgroundColor = props.$theme.colors.toggleTrackFillDisabled;
-  } else if (props.$error && props.$checked) {
-    backgroundColor = props.$theme.colors.tickFillError;
-  }
+  const backgroundColor = props.$disabled ? props.$theme.colors.toggleTrackFillDisabled : props.$theme.colors.toggleTrackFill;
   return {
+    flex: '0 0 auto',
     alignItems: 'center',
     backgroundColor,
     borderTopLeftRadius: '7px',

package/modal/modal-button.d.ts

@@ -1,3 +1,10 @@
 import * as React from 'react';
-declare const ModalButton: React.ForwardRefExoticComponent<Omit<import("../button").ButtonProps & Omit<any, keyof import("../button").SharedStyleProps | keyof import("../button").ButtonProps> & import("../button").SharedStyleProps<"symbol" | "object" | React.ComponentClass<any, any> | React.FunctionComponent<any> | "progress" | "text" | "ruby" | "table" | "small" | "embed" | "pre" | "caption" | "menu" | "center" | "clipPath" | "filter" | "mask" | "marker" | "button" | "meter" | "textarea" | "style" | "sub" | "circle" | "menuitem" | "svg" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "sup" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+declare const ModalButton: React.ForwardRefExoticComponent<Omit<Omit<import("../button").ButtonProps, "children"> & {
+    children?: React.ReactNode | ((props: {
+        isHovered: boolean;
+        isPressed: boolean;
+        isFocused: boolean;
+        artworkSize: string;
+    }) => React.ReactNode);
+} & Omit<any, "size" | "disabled" | "target" | "type" | "href" | "aria-describedby" | "aria-label" | "aria-labelledby" | "children" | "onClick" | "overrides" | "colors" | "startEnhancer" | "endEnhancer" | "isLoading" | "kind" | "backgroundSafe" | "minHitArea" | "isSelected" | "shape" | "widthType" | keyof import("../button").SharedStyleProps> & import("../button").SharedStyleProps<"symbol" | "object" | React.ComponentClass<any, any> | React.FunctionComponent<any> | "progress" | "text" | "ruby" | "table" | "small" | "embed" | "pre" | "caption" | "menu" | "center" | "clipPath" | "filter" | "mask" | "marker" | "button" | "meter" | "textarea" | "style" | "sub" | "circle" | "menuitem" | "svg" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "canvas" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "meta" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "q" | "rp" | "rt" | "s" | "samp" | "search" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "sup" | "template" | "tbody" | "td" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "animate" | "animateMotion" | "animateTransform" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "textPath" | "tspan" | "use" | "view">, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default ModalButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "15.0.1",
+  "version": "16.0.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

package/tag/constants.d.ts

@@ -1,4 +1,5 @@
 export declare const SIZE: {
+    readonly xSmall: "xSmall";
     readonly small: "small";
     readonly medium: "medium";
     readonly large: "large";
@@ -7,8 +8,7 @@ export declare const HIERARCHY: Readonly<{
     readonly primary: "primary";
     readonly secondary: "secondary";
 }>;
-export declare const KIND: {
-    readonly custom: "custom";
+export declare const DEPRECATED_KIND: Readonly<{
     readonly neutral: "neutral";
     readonly primary: "primary";
     readonly accent: "accent";
@@ -16,13 +16,39 @@ export declare const KIND: {
     readonly warning: "warning";
     readonly negative: "negative";
     readonly black: "black";
-    readonly blue: "blue";
-    readonly green: "green";
+    readonly brown: "brown";
+}>;
+export declare const SUPPORTED_KIND: Readonly<{
+    readonly custom: "custom";
+    readonly gray: "gray";
     readonly red: "red";
+    readonly orange: "orange";
     readonly yellow: "yellow";
+    readonly green: "green";
+    readonly blue: "blue";
+    readonly purple: "purple";
+    readonly magenta: "magenta";
+    readonly teal: "teal";
+    readonly lime: "lime";
+}>;
+export declare const KIND: {
+    readonly custom: "custom";
+    readonly gray: "gray";
+    readonly red: "red";
     readonly orange: "orange";
+    readonly yellow: "yellow";
+    readonly green: "green";
+    readonly blue: "blue";
     readonly purple: "purple";
-    readonly brown: "brown";
+    readonly magenta: "magenta";
     readonly teal: "teal";
     readonly lime: "lime";
+    readonly neutral: "neutral";
+    readonly primary: "primary";
+    readonly accent: "accent";
+    readonly positive: "positive";
+    readonly warning: "warning";
+    readonly negative: "negative";
+    readonly black: "black";
+    readonly brown: "brown";
 };

package/tag/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.SIZE = exports.KIND = exports.HIERARCHY = void 0;
+exports.SUPPORTED_KIND = exports.SIZE = exports.KIND = exports.HIERARCHY = exports.DEPRECATED_KIND = void 0;
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -11,6 +11,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 const SIZE = exports.SIZE = {
+  xSmall: 'xSmall',
   small: 'small',
   medium: 'medium',
   large: 'large'
@@ -19,26 +20,32 @@ const HIERARCHY = exports.HIERARCHY = Object.freeze({
   primary: 'primary',
   secondary: 'secondary'
 });
-
-// todo: dynamic identity map generation
-const KIND = exports.KIND = {
-  custom: 'custom',
-  // semantic
+const DEPRECATED_KIND = exports.DEPRECATED_KIND = Object.freeze({
   neutral: 'neutral',
   primary: 'primary',
   accent: 'accent',
   positive: 'positive',
   warning: 'warning',
   negative: 'negative',
-  // primitive
   black: 'black',
-  blue: 'blue',
-  green: 'green',
+  brown: 'brown'
+});
+const SUPPORTED_KIND = exports.SUPPORTED_KIND = Object.freeze({
+  custom: 'custom',
+  gray: 'gray',
   red: 'red',
-  yellow: 'yellow',
   orange: 'orange',
+  yellow: 'yellow',
+  green: 'green',
+  blue: 'blue',
   purple: 'purple',
-  brown: 'brown',
+  magenta: 'magenta',
   teal: 'teal',
   lime: 'lime'
+});
+
+// todo: dynamic identity map generation
+const KIND = exports.KIND = {
+  ...DEPRECATED_KIND,
+  ...SUPPORTED_KIND
 };