baseui 14.0.0 → 15.0.0

package/icon/circle-exclamation-point-filled.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("../styles");
+var _overrides = require("../helpers/overrides");
+var _icon = _interopRequireDefault(require("./icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
+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.
+*/ // BASEUI-GENERATED-REACT-ICON
+// DO NOT EDIT THIS FILE DIRECTLY, SEE README.md
+// @ts-ignore
+function CircleExclamationPointFilled(props, ref) {
+  const [, theme] = (0, _styles.useStyletron)();
+  const {
+    title = 'Circle Exclamation Point Filled',
+    size,
+    color,
+    overrides = {},
+    ...restProps
+  } = props;
+  const SvgOverride = (0, _overrides.mergeOverride)(
+  // Icons from the theme target the SVG override in the underlying Icon component
+  {
+    component: theme.icons && theme.icons.CircleExclamationPointFilled ? theme.icons.CircleExclamationPointFilled : null
+  }, overrides && overrides.Svg ? (0, _overrides.toObjectOverride)(overrides.Svg) : {});
+  return /*#__PURE__*/React.createElement(_icon.default, _extends({
+    viewBox: "0 0 24 24",
+    ref: ref,
+    title: title,
+    size: size,
+    color: color,
+    overrides: {
+      Svg: SvgOverride
+    }
+  }, restProps), /*#__PURE__*/React.createElement("path", {
+    d: "M12 23C5.9 23 1 18.1 1 12S5.9 1 12 1s11 4.9 11 11-4.9 11-11 11Zm1.5-18h-3v8h3V5ZM12 15c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2Z",
+    fill: "currentColor"
+  }));
+}
+var _default = exports.default = /*#__PURE__*/React.forwardRef(CircleExclamationPointFilled);

package/icon/hide.js

@@ -34,7 +34,7 @@ function Hide(props, ref) {
     component: theme.icons && theme.icons.Hide ? theme.icons.Hide : null
   }, overrides && overrides.Svg ? (0, _overrides.toObjectOverride)(overrides.Svg) : {});
   return /*#__PURE__*/React.createElement(_icon.default, _extends({
-    viewBox: "0 0 20 20",
+    viewBox: "0 0 24 24",
     ref: ref,
     title: title,
     size: size,

package/icon/icon-exports.d.ts

@@ -11,6 +11,8 @@ export { default as ChevronDown } from './chevron-down';
 export { default as ChevronLeft } from './chevron-left';
 export { default as ChevronRight } from './chevron-right';
 export { default as ChevronUp } from './chevron-up';
+export { default as CircleCheckFilled } from './circle-check-filled';
+export { default as CircleExclamationPointFilled } from './circle-exclamation-point-filled';
 export { default as DeleteAlt } from './delete-alt';
 export { default as Delete } from './delete';
 export { default as Filter } from './filter';
@@ -18,10 +20,12 @@ export { default as Grab } from './grab';
 export { default as Hide } from './hide';
 export { default as Menu } from './menu';
 export { default as Overflow } from './overflow';
+export { default as PaperclipFilled } from './paperclip-filled';
 export { default as Plus } from './plus';
 export { default as Search } from './search';
 export { default as Show } from './show';
 export { default as Spinner } from './spinner';
+export { default as TrashCanFilled } from './trash-can-filled';
 export { default as TriangleDown } from './triangle-down';
 export { default as TriangleLeft } from './triangle-left';
 export { default as TriangleRight } from './triangle-right';

package/icon/icon-exports.js

@@ -81,6 +81,18 @@ Object.defineProperty(exports, "ChevronUp", {
     return _chevronUp.default;
   }
 });
+Object.defineProperty(exports, "CircleCheckFilled", {
+  enumerable: true,
+  get: function () {
+    return _circleCheckFilled.default;
+  }
+});
+Object.defineProperty(exports, "CircleExclamationPointFilled", {
+  enumerable: true,
+  get: function () {
+    return _circleExclamationPointFilled.default;
+  }
+});
 Object.defineProperty(exports, "Delete", {
   enumerable: true,
   get: function () {
@@ -123,6 +135,12 @@ Object.defineProperty(exports, "Overflow", {
     return _overflow.default;
   }
 });
+Object.defineProperty(exports, "PaperclipFilled", {
+  enumerable: true,
+  get: function () {
+    return _paperclipFilled.default;
+  }
+});
 Object.defineProperty(exports, "Plus", {
   enumerable: true,
   get: function () {
@@ -147,6 +165,12 @@ Object.defineProperty(exports, "Spinner", {
     return _spinner.default;
   }
 });
+Object.defineProperty(exports, "TrashCanFilled", {
+  enumerable: true,
+  get: function () {
+    return _trashCanFilled.default;
+  }
+});
 Object.defineProperty(exports, "TriangleDown", {
   enumerable: true,
   get: function () {
@@ -190,6 +214,8 @@ var _chevronDown = _interopRequireDefault(require("./chevron-down"));
 var _chevronLeft = _interopRequireDefault(require("./chevron-left"));
 var _chevronRight = _interopRequireDefault(require("./chevron-right"));
 var _chevronUp = _interopRequireDefault(require("./chevron-up"));
+var _circleCheckFilled = _interopRequireDefault(require("./circle-check-filled"));
+var _circleExclamationPointFilled = _interopRequireDefault(require("./circle-exclamation-point-filled"));
 var _deleteAlt = _interopRequireDefault(require("./delete-alt"));
 var _delete = _interopRequireDefault(require("./delete"));
 var _filter = _interopRequireDefault(require("./filter"));
@@ -197,10 +223,12 @@ var _grab = _interopRequireDefault(require("./grab"));
 var _hide = _interopRequireDefault(require("./hide"));
 var _menu = _interopRequireDefault(require("./menu"));
 var _overflow = _interopRequireDefault(require("./overflow"));
+var _paperclipFilled = _interopRequireDefault(require("./paperclip-filled"));
 var _plus = _interopRequireDefault(require("./plus"));
 var _search = _interopRequireDefault(require("./search"));
 var _show = _interopRequireDefault(require("./show"));
 var _spinner = _interopRequireDefault(require("./spinner"));
+var _trashCanFilled = _interopRequireDefault(require("./trash-can-filled"));
 var _triangleDown = _interopRequireDefault(require("./triangle-down"));
 var _triangleLeft = _interopRequireDefault(require("./triangle-left"));
 var _triangleRight = _interopRequireDefault(require("./triangle-right"));

package/icon/paperclip-filled.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import("./types").Size;
+    color?: string;
+    title?: string;
+    overrides?: import("./types").IconOverrides;
+} & import("./types").StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/icon/paperclip-filled.js

@@ -0,0 +1,50 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _styles = require("../styles");
+var _overrides = require("../helpers/overrides");
+var _icon = _interopRequireDefault(require("./icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
+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.
+*/ // BASEUI-GENERATED-REACT-ICON
+// DO NOT EDIT THIS FILE DIRECTLY, SEE README.md
+// @ts-ignore
+function PaperclipFilled(props, ref) {
+  const [, theme] = (0, _styles.useStyletron)();
+  const {
+    title = 'PaperclipFilled',
+    size,
+    color,
+    overrides = {},
+    ...restProps
+  } = props;
+  const SvgOverride = (0, _overrides.mergeOverride)(
+  // Icons from the theme target the SVG override in the underlying Icon component
+  {
+    component: theme.icons && theme.icons.PaperclipFilled ? theme.icons.PaperclipFilled : null
+  }, overrides && overrides.Svg ? (0, _overrides.toObjectOverride)(overrides.Svg) : {});
+  return /*#__PURE__*/React.createElement(_icon.default, _extends({
+    viewBox: "0 0 24 24",
+    ref: ref,
+    title: title,
+    size: size,
+    color: color,
+    overrides: {
+      Svg: SvgOverride
+    }
+  }, restProps), /*#__PURE__*/React.createElement("path", {
+    d: "M21.1 2.9c-2.54-2.52-6.66-2.52-9.2 0l-9 9c-2.85 2.87-2.21 6.97 0 9.2A6.492 6.492 0 0 0 7.5 23c.17 0 .33-.01.5-.02v-3.05c-1.06.15-2.19-.17-2.98-.96a3.5 3.5 0 0 1 0-4.94l9-9.01c1.37-1.36 3.6-1.36 4.96-.01 1.36 1.37 1.36 3.6 0 4.96l-6.21 6.21c-.38.38-1.05.38-1.43 0-.39-.39-.4-1.04 0-1.43l5.67-5.6-2.11-2.13-5.67 5.6a4.017 4.017 0 0 0-.02 5.69 4.002 4.002 0 0 0 5.67 0l6.21-6.21a6.515 6.515 0 0 0 .01-9.2Z",
+    fill: "currentColor"
+  }));
+}
+var _default = exports.default = /*#__PURE__*/React.forwardRef(PaperclipFilled);

package/icon/show.js

@@ -34,7 +34,7 @@ function Show(props, ref) {
     component: theme.icons && theme.icons.Show ? theme.icons.Show : null
   }, overrides && overrides.Svg ? (0, _overrides.toObjectOverride)(overrides.Svg) : {});
   return /*#__PURE__*/React.createElement(_icon.default, _extends({
-    viewBox: "0 0 20 20",
+    viewBox: "0 0 24 24",
     ref: ref,
     title: title,
     size: size,

package/icon/trash-can-filled.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+declare const _default: React.ForwardRefExoticComponent<React.SVGAttributes<SVGElement> & {
+    children?: React.ReactNode;
+    size?: import("./types").Size;
+    color?: string;
+    title?: string;
+    overrides?: import("./types").IconOverrides;
+} & import("./types").StyledComponentArgs & React.RefAttributes<SVGSVGElement>>;
+export default _default;

package/{button-docked/button-docked.js → icon/trash-can-filled.js}

@@ -5,8 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _styledComponents = require("./styled-components");
+var _styles = require("../styles");
 var _overrides = require("../helpers/overrides");
+var _icon = _interopRequireDefault(require("./icon"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
@@ -14,20 +16,37 @@ 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 ButtonDocked = props => {
+*/ // BASEUI-GENERATED-REACT-ICON
+// DO NOT EDIT THIS FILE DIRECTLY, SEE README.md
+// @ts-ignore
+function TrashCanFilled(props, ref) {
+  const [, theme] = (0, _styles.useStyletron)();
   const {
-    primaryAction,
-    secondaryActions,
-    dismissiveAction,
-    topAccessory,
-    overrides = {}
+    title = 'Trash Can Filled',
+    size,
+    color,
+    overrides = {},
+    ...restProps
   } = props;
-  const [Root, rootProps] = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot);
-  const [ActionContainer, actionContainerProps] = (0, _overrides.getOverrides)(overrides.ActionContainer, _styledComponents.StyledActionContainer);
-  const [ActionSubContainer, actionSubContainerProps] = (0, _overrides.getOverrides)(overrides.ActionSubContainer, _styledComponents.StyledActionSubContainer);
-  return /*#__PURE__*/React.createElement(Root, rootProps, topAccessory, /*#__PURE__*/React.createElement(ActionContainer, actionContainerProps, /*#__PURE__*/React.createElement(ActionSubContainer, actionSubContainerProps, secondaryActions), /*#__PURE__*/React.createElement(ActionSubContainer, _extends({
-    $reverseWhenWide: true
-  }, actionSubContainerProps), primaryAction, dismissiveAction)));
-};
-var _default = exports.default = ButtonDocked;
+  const SvgOverride = (0, _overrides.mergeOverride)(
+  // Icons from the theme target the SVG override in the underlying Icon component
+  {
+    component: theme.icons && theme.icons.TrashCanFilled ? theme.icons.TrashCanFilled : null
+  }, overrides && overrides.Svg ? (0, _overrides.toObjectOverride)(overrides.Svg) : {});
+  return /*#__PURE__*/React.createElement(_icon.default, _extends({
+    viewBox: "0 0 24 24",
+    ref: ref,
+    title: title,
+    size: size,
+    color: color,
+    overrides: {
+      Svg: SvgOverride
+    }
+  }, restProps), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M16 1v2h5v3H3V3h5V1h8ZM5 8h14v15H5V8Z",
+    fill: "currentColor"
+  }));
+}
+var _default = exports.default = /*#__PURE__*/React.forwardRef(TrashCanFilled);

package/locale/en_US.js

@@ -10,12 +10,13 @@ var _locale3 = _interopRequireDefault(require("../datepicker/locale"));
 var _locale4 = _interopRequireDefault(require("../data-table/locale"));
 var _locale5 = _interopRequireDefault(require("../button-group/locale"));
 var _locale6 = _interopRequireDefault(require("../file-uploader/locale"));
-var _locale7 = _interopRequireDefault(require("../menu/locale"));
-var _locale8 = _interopRequireDefault(require("../modal/locale"));
-var _locale9 = _interopRequireDefault(require("../drawer/locale"));
-var _locale10 = _interopRequireDefault(require("../pagination/locale"));
-var _locale11 = _interopRequireDefault(require("../select/locale"));
-var _locale12 = _interopRequireDefault(require("../toast/locale"));
+var _locale7 = _interopRequireDefault(require("../file-uploader-basic/locale"));
+var _locale8 = _interopRequireDefault(require("../menu/locale"));
+var _locale9 = _interopRequireDefault(require("../modal/locale"));
+var _locale10 = _interopRequireDefault(require("../drawer/locale"));
+var _locale11 = _interopRequireDefault(require("../pagination/locale"));
+var _locale12 = _interopRequireDefault(require("../select/locale"));
+var _locale13 = _interopRequireDefault(require("../toast/locale"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -31,11 +32,12 @@ const en_US = {
   datatable: _locale4.default,
   buttongroup: _locale5.default,
   fileuploader: _locale6.default,
-  menu: _locale7.default,
-  modal: _locale8.default,
-  drawer: _locale9.default,
-  pagination: _locale10.default,
-  select: _locale11.default,
-  toast: _locale12.default
+  fileuploaderbasic: _locale7.default,
+  menu: _locale8.default,
+  modal: _locale9.default,
+  drawer: _locale10.default,
+  pagination: _locale11.default,
+  select: _locale12.default,
+  toast: _locale13.default
 };
 var _default = exports.default = en_US;

package/locale/es_AR.js

@@ -88,12 +88,20 @@ const es_AR = {
     booleanColumnFalseShort: 'F',
     selectRow: 'Seleccionar fila',
     selectAllRows: 'Seleccionar todas las filas',
-    sortColumn: 'Clasificar columna'
+    sortColumn: 'Clasificar columna',
+    textQueryPlaceholder: 'Buscar...'
   },
   buttongroup: {
     ariaLabel: 'grupo de botones'
   },
   fileuploader: {
+    added: 'Cargando...',
+    buttonText: 'Buscar archivos',
+    contentMessage: 'o soltar para subir',
+    error: 'Error al Subir',
+    processed: 'Subida exitosa'
+  },
+  fileuploaderbasic: {
     dropFilesToUpload: 'Arrastra archivos aquí para subir...',
     or: '',
     browseFiles: 'Buscar archivos',

package/locale/index.d.ts

@@ -6,6 +6,7 @@ import type { DatepickerLocale as DatepickerLocaleAlias } from '../datepicker';
 import type { DataTableLocale as DataTableLocaleAlias } from '../data-table';
 import type { ButtonGroupLocale as ButtonGroupLocaleAlias } from '../button-group';
 import type { FileUploaderLocale as FileUploaderLocaleAlias } from '../file-uploader';
+import type { FileUploaderBasicLocale as FileUploaderBasicLocaleAlias } from '../file-uploader-basic';
 import type { MenuLocale as MenuLocaleAlias } from '../menu';
 import type { ModalLocale as ModalLocaleAlias } from '../modal';
 import type { DrawerLocale as DrawerLocaleAlias } from '../drawer';
@@ -36,6 +37,8 @@ export type ButtonGroupLocale = ButtonGroupLocaleAlias;
 /** @deprecated inded use type exported from the component itself */
 export type FileUploaderLocale = FileUploaderLocaleAlias;
 /** @deprecated inded use type exported from the component itself */
+export type FileUploaderBasicLocale = FileUploaderBasicLocaleAlias;
+/** @deprecated inded use type exported from the component itself */
 export type MenuLocale = MenuLocaleAlias;
 /** @deprecated inded use type exported from the component itself */
 export type ModalLocale = ModalLocaleAlias;

package/locale/index.js

@@ -30,6 +30,7 @@ const LocaleProvider = props => {
     /*#__PURE__*/
     // this is poorly documented but specifying true enforces that the object is deeply extended
     // https://www.npmjs.com/package/just-extend
+    // @ts-expect-error todo(ts-migration) TS2740 Type '{}' is missing the following properties from type 'Locale': accordion, breadcrumbs, datepicker, datatable, and 8 more.
     React.createElement(LocaleContext.Provider, {
       value: (0, _justExtend.default)(true, {}, _en_US.default, parentLocale, locale)
     }, children)
@@ -47,4 +48,5 @@ var _default = exports.default = LocaleProvider;
 /** @deprecated inded use type exported from the component itself */
 /** @deprecated inded use type exported from the component itself */
 /** @deprecated inded use type exported from the component itself */
+/** @deprecated inded use type exported from the component itself */
 /** @deprecated inded use type exported from the component itself */

package/locale/tr_TR.js

@@ -88,12 +88,20 @@ const tr_TR = {
     booleanColumnFalseShort: 'Y',
     selectRow: 'satır seç',
     selectAllRows: 'Tüm satırları seç',
-    sortColumn: 'Sıralama sütunu'
+    sortColumn: 'Sıralama sütunu',
+    textQueryPlaceholder: 'Aramak...'
   },
   buttongroup: {
     ariaLabel: 'buton grup'
   },
   fileuploader: {
+    added: 'Yükleniyor...',
+    buttonText: 'Dosyalara göz atın',
+    contentMessage: 'veya yüklemek için bırakın',
+    error: 'Yükleme hatası',
+    processed: 'Yükleme başarılı'
+  },
+  fileuploaderbasic: {
     dropFilesToUpload: 'Dosyaları yüklemek için buraya bırakın...',
     or: '',
     browseFiles: 'Dosyalara göz atın',

package/locale/types.d.ts

@@ -4,6 +4,7 @@ import type { DatepickerLocale } from '../datepicker';
 import type { DataTableLocale } from '../data-table';
 import type { ButtonGroupLocale } from '../button-group';
 import type { FileUploaderLocale } from '../file-uploader';
+import type { FileUploaderBasicLocale } from '../file-uploader-basic';
 import type { MenuLocale } from '../menu';
 import type { ModalLocale } from '../modal';
 import type { DrawerLocale } from '../drawer';
@@ -17,6 +18,7 @@ export type Locale = {
     datatable: DataTableLocale;
     buttongroup: ButtonGroupLocale;
     fileuploader: FileUploaderLocale;
+    fileuploaderbasic: FileUploaderBasicLocale;
     menu: MenuLocale;
     modal: ModalLocale;
     drawer: DrawerLocale;

package/message-card/message-card.js

@@ -37,7 +37,7 @@ const DefaultDismissButton = props => /*#__PURE__*/React.createElement(_button.B
   size: 32
 }));
 const MessageCard = ({
-  backgroundColor = _tokens.colors.white,
+  backgroundColor = _tokens.primitiveColors.white,
   backgroundColorType: backgroundColorTypeProp,
   buttonKind = _constants.BUTTON_KIND.secondary,
   buttonLabel,
@@ -112,7 +112,7 @@ const MessageCard = ({
       backgroundColor: theme.colors.buttonTertiaryFill
     };
   }
-  if (buttonKind !== _constants.BUTTON_KIND.tertiary && backgroundColor !== _tokens.colors.white) {
+  if (buttonKind !== _constants.BUTTON_KIND.tertiary && backgroundColor !== _tokens.primitiveColors.white) {
     buttonColors = {
       color: theme.colors.contentOnColorInverse,
       backgroundColor: theme.colors.backgroundAlwaysLight

package/message-card/utils.js

@@ -13,13 +13,18 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 
-const LIGHT_COLORS = new Set([_tokens.colors.red50, _tokens.colors.red100, _tokens.colors.red200, _tokens.colors.red300, _tokens.colors.green50, _tokens.colors.green100, _tokens.colors.green200, _tokens.colors.green300, _tokens.colors.teal50, _tokens.colors.teal100, _tokens.colors.teal200, _tokens.colors.teal300, _tokens.colors.blue50, _tokens.colors.blue100, _tokens.colors.blue200, _tokens.colors.blue300, _tokens.colors.cobalt50, _tokens.colors.cobalt100, _tokens.colors.cobalt200, _tokens.colors.purple50, _tokens.colors.purple100, _tokens.colors.purple200, _tokens.colors.purple300, _tokens.colors.magenta50, _tokens.colors.magenta100, _tokens.colors.magenta200, _tokens.colors.magenta300, _tokens.colors.brown50, _tokens.colors.brown100, _tokens.colors.brown200, _tokens.colors.brown300, _tokens.colors.orange50, _tokens.colors.orange100, _tokens.colors.orange200, _tokens.colors.orange300, _tokens.colors.orange400, _tokens.colors.lime50, _tokens.colors.lime100, _tokens.colors.lime200, _tokens.colors.lime300, _tokens.colors.lime400, _tokens.colors.platinum50, _tokens.colors.platinum100, _tokens.colors.platinum200, _tokens.colors.platinum300, _tokens.colors.platinum400, _tokens.colors.yellow50, _tokens.colors.yellow100, _tokens.colors.yellow200, _tokens.colors.yellow300, _tokens.colors.yellow400, _tokens.colors.yellow500, _tokens.colors.white, _tokens.colors.gray50, _tokens.colors.gray100, _tokens.colors.gray200, _tokens.colors.gray300, _tokens.colors.gray400]);
-const DARK_COLORS = new Set([_tokens.colors.red400, _tokens.colors.red500, _tokens.colors.red600, _tokens.colors.red700, _tokens.colors.green400, _tokens.colors.green500, _tokens.colors.green600, _tokens.colors.green700, _tokens.colors.teal400, _tokens.colors.teal500, _tokens.colors.teal600, _tokens.colors.teal700, _tokens.colors.blue400, _tokens.colors.blue500, _tokens.colors.blue600, _tokens.colors.blue700, _tokens.colors.cobalt300, _tokens.colors.cobalt400, _tokens.colors.cobalt500, _tokens.colors.cobalt600, _tokens.colors.cobalt700, _tokens.colors.purple400, _tokens.colors.purple500, _tokens.colors.purple600, _tokens.colors.purple700, _tokens.colors.magenta400, _tokens.colors.magenta500, _tokens.colors.magenta600, _tokens.colors.magenta700, _tokens.colors.brown400, _tokens.colors.brown500, _tokens.colors.brown600, _tokens.colors.brown700, _tokens.colors.orange500, _tokens.colors.orange600, _tokens.colors.orange700, _tokens.colors.lime500, _tokens.colors.lime600, _tokens.colors.lime700, _tokens.colors.platinum500, _tokens.colors.platinum600, _tokens.colors.platinum700, _tokens.colors.platinum800, _tokens.colors.yellow600, _tokens.colors.yellow700, _tokens.colors.gray500, _tokens.colors.gray600, _tokens.colors.gray700, _tokens.colors.gray800, _tokens.colors.gray900, _tokens.colors.black]);
-const POOR_CONTRAST_COLORS = new Set([_tokens.colors.red300, _tokens.colors.gray500, _tokens.colors.yellow600]);
+const LIGHT_COLORS = new Set([_tokens.primitiveColors.red50, _tokens.primitiveColors.red100, _tokens.primitiveColors.red200, _tokens.primitiveColors.red300, _tokens.primitiveColors.red400, _tokens.primitiveColors.green50, _tokens.primitiveColors.green100, _tokens.primitiveColors.green200, _tokens.primitiveColors.green300, _tokens.primitiveColors.green400, _tokens.primitiveColors.teal50, _tokens.primitiveColors.teal100, _tokens.primitiveColors.teal200, _tokens.primitiveColors.teal300, _tokens.primitiveColors.teal400, _tokens.primitiveColors.blue50, _tokens.primitiveColors.blue100, _tokens.primitiveColors.blue200, _tokens.primitiveColors.blue300, _tokens.primitiveColors.blue400, _tokens.primitiveColors.cobalt50, _tokens.primitiveColors.cobalt100, _tokens.primitiveColors.cobalt200, _tokens.primitiveColors.purple50, _tokens.primitiveColors.purple100, _tokens.primitiveColors.purple200, _tokens.primitiveColors.purple300, _tokens.primitiveColors.purple400, _tokens.primitiveColors.magenta50, _tokens.primitiveColors.magenta100, _tokens.primitiveColors.magenta200, _tokens.primitiveColors.magenta300, _tokens.primitiveColors.magenta400, _tokens.primitiveColors.brown50, _tokens.primitiveColors.brown100, _tokens.primitiveColors.brown200, _tokens.primitiveColors.brown300, _tokens.primitiveColors.orange50, _tokens.primitiveColors.orange100, _tokens.primitiveColors.orange200, _tokens.primitiveColors.orange300, _tokens.primitiveColors.orange400, _tokens.primitiveColors.lime50, _tokens.primitiveColors.lime100, _tokens.primitiveColors.lime200, _tokens.primitiveColors.lime300, _tokens.primitiveColors.lime400, _tokens.primitiveColors.platinum50, _tokens.primitiveColors.platinum100, _tokens.primitiveColors.platinum200, _tokens.primitiveColors.platinum300, _tokens.primitiveColors.platinum400, _tokens.primitiveColors.yellow50, _tokens.primitiveColors.yellow100, _tokens.primitiveColors.yellow200, _tokens.primitiveColors.yellow300, _tokens.primitiveColors.yellow400, _tokens.primitiveColors.white, _tokens.primitiveColors.gray50, _tokens.primitiveColors.gray100, _tokens.primitiveColors.gray200, _tokens.primitiveColors.gray300, _tokens.primitiveColors.gray400]);
+const DARK_COLORS = new Set([_tokens.primitiveColors.red600, _tokens.primitiveColors.red700, _tokens.primitiveColors.red800, _tokens.primitiveColors.red900, _tokens.primitiveColors.green600, _tokens.primitiveColors.green700, _tokens.primitiveColors.green800, _tokens.primitiveColors.green900, _tokens.primitiveColors.teal600, _tokens.primitiveColors.teal700, _tokens.primitiveColors.teal800, _tokens.primitiveColors.teal900, _tokens.primitiveColors.blue600, _tokens.primitiveColors.blue700, _tokens.primitiveColors.blue800, _tokens.primitiveColors.blue900, _tokens.primitiveColors.purple600, _tokens.primitiveColors.purple700, _tokens.primitiveColors.purple800, _tokens.primitiveColors.purple900, _tokens.primitiveColors.cobalt300, _tokens.primitiveColors.cobalt400, _tokens.primitiveColors.cobalt500, _tokens.primitiveColors.cobalt600, _tokens.primitiveColors.cobalt700, _tokens.primitiveColors.magenta600, _tokens.primitiveColors.magenta700, _tokens.primitiveColors.magenta800, _tokens.primitiveColors.magenta900, _tokens.primitiveColors.brown400, _tokens.primitiveColors.brown500, _tokens.primitiveColors.brown600, _tokens.primitiveColors.brown700, _tokens.primitiveColors.orange600, _tokens.primitiveColors.orange700, _tokens.primitiveColors.orange800, _tokens.primitiveColors.orange900, _tokens.primitiveColors.lime600, _tokens.primitiveColors.lime700, _tokens.primitiveColors.lime800, _tokens.primitiveColors.lime900, _tokens.primitiveColors.platinum500, _tokens.primitiveColors.platinum600, _tokens.primitiveColors.platinum700, _tokens.primitiveColors.platinum800, _tokens.primitiveColors.yellow600, _tokens.primitiveColors.yellow700, _tokens.primitiveColors.yellow800, _tokens.primitiveColors.yellow900, _tokens.primitiveColors.gray600, _tokens.primitiveColors.gray700, _tokens.primitiveColors.gray800, _tokens.primitiveColors.gray900, _tokens.primitiveColors.black]);
+const POOR_CONTRAST_COLORS = new Set([_tokens.primitiveColors.gray500, _tokens.primitiveColors.red500, _tokens.primitiveColors.orange500, _tokens.primitiveColors.amber500, _tokens.primitiveColors.yellow600, _tokens.primitiveColors.lime500, _tokens.primitiveColors.green500, _tokens.primitiveColors.teal500, _tokens.primitiveColors.blue500, _tokens.primitiveColors.purple500, _tokens.primitiveColors.magenta500]);
+const DARK_COLOR_TOKENS = new Set([...Object.values(_tokens.primitiveDarkColors)]);
 function getBackgroundColorType(backgroundColor) {
   if (process.env.NODE_ENV !== "production" && POOR_CONTRAST_COLORS.has(backgroundColor)) {
     console.warn(`The provided value for backgroundColor, ${backgroundColor}, is not supported because \
         it does not pass accessibility contrast tests for either white or black text.`);
+    return null;
+  }
+  if (process.env.NODE_ENV !== "production" && ![_tokens.primitiveColors.white, _tokens.primitiveColors.black].includes(backgroundColor) && DARK_COLOR_TOKENS.has(backgroundColor)) {
+    console.warn(`It looks like you're supplying a primitive color token from the "dark" theme color ramp for MessageCard's backgroundColor. Only color tokens from the "light" theme color ramp are supported. MessageCard uses an overlay for dark mode.`);
   }
   if (LIGHT_COLORS.has(backgroundColor)) {
     return _constants.BACKGROUND_COLOR_TYPE.light;

package/modal/modal-button.d.ts

@@ -1,5 +1,3 @@
 import * as React from 'react';
-declare const ModalButton: React.ForwardRefExoticComponent<Omit<import("../button").ButtonProps & import("../button").SharedStyleProps & Omit<any, keyof import("../button").SharedStyleProps | keyof import("../button").ButtonProps> & {
-    $as?: "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<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>>;
 export default ModalButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "14.0.0",
+  "version": "15.0.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -24,6 +24,7 @@
   "dependencies": {
     "@date-io/date-fns": "^2.13.1",
     "@date-io/moment": "^2.13.1",
+    "baseui": "^14.0.0",
     "card-validator": "^6.2.0",
     "csstype": "2.6.11",
     "d3": "^6.7.0",
@@ -56,7 +57,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "styletron-react": ">=6"
+    "styletron-react": "^6.1.1"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",
@@ -72,6 +73,7 @@
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
     "@next/mdx": "^14.0.4",
+    "@stackblitz/sdk": "^1.9.0",
     "@types/mdx": "^2.0.10",
     "@types/node": "20.10.5",
     "@types/react": "^18.2.45",
@@ -85,7 +87,7 @@
     "just-omit": "^1.1.0",
     "just-pick": "^2.1.0",
     "lint-staged": "^15.1.0",
-    "next": "14.0.5-canary.18",
+    "next": "^14.1.0",
     "prettier": "^3.1.1",
     "prism-react-renderer": "^1.0.1",
     "raw-loader": "^4.0.2",

package/payment-card/custom-cards.config.d.ts

@@ -1,11 +1 @@
-export declare const CUSTOM_CARDS_CONFIGURATION: {
-    niceType: string;
-    type: string;
-    patterns: number[][];
-    gaps: number[];
-    lengths: number[];
-    code: {
-        name: string;
-        size: number;
-    };
-}[];
+export declare const CUSTOM_CARDS_CONFIGURATION: any[];

package/payment-card/payment-card.js

@@ -54,9 +54,7 @@ class PaymentCard extends React.Component {
     // For adding new custom card type, add card config to custom-cards.config.js
     _defineProperty(this, "caretPosition", 0);
     _defineProperty(this, "inRef", null);
-    _customCards.CUSTOM_CARDS_CONFIGURATION.forEach(cardTypeConfig =>
-    // @ts-expect-error todo(flow-ts) upgrade card-validator dependency
-    valid.creditCardType.addCard(cardTypeConfig));
+    _customCards.CUSTOM_CARDS_CONFIGURATION.forEach(cardTypeConfig => valid.creditCardType.addCard(cardTypeConfig));
   }
   componentDidUpdate(prevProps) {
     if (this.inRef && prevProps.value !== this.props.value) {

package/phone-input/base-country-picker.js

@@ -84,8 +84,7 @@ function CountryPicker(props) {
       },
       props: {
         // https://github.com/uber/baseweb/issues/3846
-        autoComplete: 'chrome-off',
-        'aria-label': 'Select country'
+        autoComplete: 'chrome-off'
       }
     },
     IconsContainer: {
@@ -200,6 +199,7 @@ function CountryPicker(props) {
     },
     options: options,
     positive: positive,
+    "aria-label": "Select country",
     required: required,
     size: size,
     value: [country],

package/phone-input/country-picker.js

@@ -79,16 +79,6 @@ function CountryPicker(props) {
           // @ts-ignore
           [padEndDir]: sizeToRightPadding[props.$size || _constants.SIZE.default]
         };
-        // do not add positive and error color borders when not focused
-        if (!props.$isFocused && !props.$isPseudoFocused) {
-          return {
-            ...styleOverride,
-            borderLeftColor: 'transparent',
-            borderRightColor: 'transparent',
-            borderTopColor: 'transparent',
-            borderBottomColor: 'transparent'
-          };
-        }
         return styleOverride;
       }
     }

package/progress-bar/progressbar-rounded.js

@@ -95,7 +95,7 @@ function ProgressBarRounded({
   return /*#__PURE__*/React.createElement(Root, _extends({
     "data-baseweb": "progressbar-rounded",
     role: "progressbar",
-    "aria-valuenow": progress,
+    "aria-valuenow": progress.toFixed(2).replace(/\.?0+$/, ''),
     "aria-valuemin": 0,
     "aria-valuemax": 1,
     $size: size,