baseui 15.0.0 → 15.0.2

package/accordion/stateless-accordion.js

@@ -33,13 +33,13 @@ function StatelessAccordion({
   return /*#__PURE__*/React.createElement(Root, _extends({
     "data-baseweb": "accordion"
   }, rootProps), React.Children.map(children, (child, index) => {
-    let normalizedChild = (0, _reactIs.isElement)(child) || (0, _reactIs.isPortal)(child) ? child :
-    /*#__PURE__*/
-    // if primitive value - wrap it in a fragment
-    React.createElement(React.Fragment, null, child);
-    const key = normalizedChild.key || String(index);
-    return /*#__PURE__*/React.cloneElement(normalizedChild, {
-      disabled: normalizedChild.props.disabled || disabled,
+    if (!(0, _reactIs.isElement)(child) && !(0, _reactIs.isPortal)(child)) {
+      return child;
+    }
+    const element = child;
+    const key = element.key || String(index);
+    return /*#__PURE__*/React.cloneElement(element, {
+      disabled: element.props.disabled || disabled,
       expanded: expanded.includes(key),
       key,
       onChange:
@@ -66,7 +66,7 @@ function StatelessAccordion({
           expanded: next
         });
       } : onChange,
-      overrides: normalizedChild.props.overrides || PanelOverrides,
+      overrides: element.props.overrides || PanelOverrides,
       renderAll
     });
   }));

package/bottom-navigation/bottom-navigation.js

@@ -34,7 +34,6 @@ const BottomNavigation = ({
   const [displayOverflow, setDisplayOverflow] = React.useState(false);
   const NavItemPanelRefs = React.useRef([]);
   function scrollToTop(idx) {
-    // @ts-expect-error todo(ts-migration) TS2339 Property 'scrollTo' does not exist on type 'never'.
     NavItemPanelRefs.current[idx].scrollTo({
       top: 0,
       left: 0,
@@ -45,7 +44,6 @@ const BottomNavigation = ({
     if (displayOverflow) {
       setDisplayOverflow(false);
     }
-    // @ts-expect-error todo(ts-migration) TS2722 Cannot invoke an object which is possibly 'undefined'.
     onChange({
       activeKey
     });
@@ -79,9 +77,7 @@ const BottomNavigation = ({
     if (!navItem) return;
     const isActive = activeKey === idx && !displayOverflow;
     return /*#__PURE__*/React.createElement(_panel.Panel, {
-      isActive: isActive
-      // @ts-expect-error todo(ts-migration) TS2345 Argument of type 'unknown' is not assignable to parameter of type 'never'.
-      ,
+      isActive: isActive,
       ref: element => NavItemPanelRefs.current.push(element),
       overrides: navItem.props.overrides,
       key: idx,

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/data-table/column-numerical.js

@@ -66,7 +66,6 @@ function validateInput(input) {
 
 // @ts-ignore
 const bisect = (0, _d.bisector)(d => d.x0);
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Histogram = /*#__PURE__*/React.memo(function Histogram({
   data,
   lower,
@@ -83,9 +82,7 @@ const Histogram = /*#__PURE__*/React.memo(function Histogram({
     yScale
   } = React.useMemo(() => {
     const bins = (0, _d.bin)().thresholds(Math.min(data.length, _constants.MAX_BIN_COUNT))(data);
-    const xScale = (0, _d.scaleLinear)()
-    // @ts-expect-error todo(ts-migration) TS2345 Argument of type '(number | undefined)[]' is not assignable to parameter of type 'Iterable<NumberValue>'.
-    .domain([bins[0].x0, bins[bins.length - 1].x1]).range([0, _constants.HISTOGRAM_SIZE.width]).clamp(true);
+    const xScale = (0, _d.scaleLinear)().domain([bins[0].x0, bins[bins.length - 1].x1]).range([0, _constants.HISTOGRAM_SIZE.width]).clamp(true);
     const yScale = (0, _d.scaleLinear)()
     // @ts-ignore
     .domain([0, (0, _d.max)(bins, d => d.length)]).nice().range([_constants.HISTOGRAM_SIZE.height, 0]);
@@ -114,19 +111,15 @@ const Histogram = /*#__PURE__*/React.memo(function Histogram({
       overflow: 'visible'
     })
   }, /*#__PURE__*/React.createElement("svg", _constants.HISTOGRAM_SIZE, bins.map((d, index) => {
-    // @ts-expect-error todo(ts-migration) TS2345 Argument of type 'number | undefined' is not assignable to parameter of type 'NumberValue'.
     const x = xScale(d.x0) + 1;
     const y = yScale(d.length);
-    // @ts-expect-error todo(ts-migration) TS2345 Argument of type 'number | undefined' is not assignable to parameter of type 'NumberValue'.
     const width = Math.max(0, xScale(d.x1) - xScale(d.x0) - 1);
     const height = yScale(0) - yScale(d.length);
     let included;
     if (singleIndexNearest != null) {
       included = index === singleIndexNearest;
     } else {
-      // @ts-expect-error todo(ts-migration) TS18048 'd.x1' is possibly 'undefined'.
       const withinLower = d.x1 > lower;
-      // @ts-expect-error todo(ts-migration) TS18048 'd.x0' is possibly 'undefined'.
       const withinUpper = d.x0 <= upper;
       included = withinLower && withinUpper;
     }
@@ -201,19 +194,14 @@ function NumericalFilter(props) {
     // once the user is done inputting.
     // we validate then format to the given precision
     let l = isRange ? lv : sv;
-    // @ts-expect-error todo(ts-migration) TS2322 Type 'string | number | undefined' is not assignable to type 'number'.
     l = validateInput(l) ? l : min;
     let h = validateInput(uv) ? uv : max;
-
-    // @ts-expect-error todo(ts-migration) TS2345 Argument of type 'string | number | undefined' is not assignable to parameter of type 'number'.
     return [roundToFixed(l, precision), roundToFixed(h, precision)];
   }, [isRange, focused, sv, lv, uv, precision]);
 
   // We have our slider values range from 1 to the bin size, so we have a scale which
   // takes in the data driven range and maps it to values the scale can always handle
-  const sliderScale = React.useMemo(() => (0, _d.scaleLinear)()
-  // @ts-expect-error todo(ts-migration) TS2345 Argument of type '(string | undefined)[]' is not assignable to parameter of type 'Iterable<NumberValue>'.
-  .domain([min, max]).rangeRound([1, _constants.MAX_BIN_COUNT])
+  const sliderScale = React.useMemo(() => (0, _d.scaleLinear)().domain([min, max]).rangeRound([1, _constants.MAX_BIN_COUNT])
   // We clamp the values within our min and max even if a user enters a huge number
   .clamp(true), [min, max]);
   let sliderValue = isRange ? [sliderScale(inputValueLower), sliderScale(inputValueUpper)] : [sliderScale(inputValueLower)];
@@ -395,10 +383,7 @@ function NumericalFilter(props) {
     },
     onFocus: () => setFocus(true),
     onBlur: () => setFocus(false)
-  }), isRange &&
-  /*#__PURE__*/
-  // @ts-expect-error todo(ts-migration) TS2769 No overload matches this call.
-  React.createElement(_input.Input, {
+  }), isRange && /*#__PURE__*/React.createElement(_input.Input, {
     min: min,
     max: max,
     size: _input.SIZE.mini,

package/dnd-list/list.js

@@ -23,7 +23,7 @@ Copyright (c) Uber Technologies, Inc.
 
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
-*/
+*/ // @ts-ignore - react-movable is an ES module but we're in a CommonJS context
 const ItemLayer = ({
   children,
   dragged

package/dnd-list/stateful-list-container.js

@@ -15,7 +15,7 @@ Copyright (c) Uber Technologies, Inc.
 
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
-*/
+*/ // @ts-ignore - react-movable is an ES module but we're in a CommonJS context
 const defaultStateReducer = (type, nextState) => nextState;
 class StatefulListContainer extends React.Component {
   constructor(...args) {

package/file-uploader/constants.d.ts

@@ -14,3 +14,5 @@ export declare enum ARIA_LIVE_ELEMENT_ID {
     REMOVAL = "file-uploader-removal"
 }
 export declare const ARIA_LIVE_TIMEOUT_MS = 5000;
+export declare const PROGRESS_AMOUNT_LOADING = 20;
+export declare const PROGRESS_AMOUNT_LOADING_COMPLETE = 100;

package/file-uploader/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FILE_STATUS_TO_COLOR_MAP = exports.FILE_STATUS = exports.ARIA_LIVE_TIMEOUT_MS = exports.ARIA_LIVE_ELEMENT_ID = void 0;
+exports.PROGRESS_AMOUNT_LOADING_COMPLETE = exports.PROGRESS_AMOUNT_LOADING = exports.FILE_STATUS_TO_COLOR_MAP = exports.FILE_STATUS = exports.ARIA_LIVE_TIMEOUT_MS = exports.ARIA_LIVE_ELEMENT_ID = void 0;
 /*
 Copyright (c) Uber Technologies, Inc.
 
@@ -27,4 +27,6 @@ let ARIA_LIVE_ELEMENT_ID = exports.ARIA_LIVE_ELEMENT_ID = /*#__PURE__*/function
   ARIA_LIVE_ELEMENT_ID["REMOVAL"] = "file-uploader-removal";
   return ARIA_LIVE_ELEMENT_ID;
 }({});
-const ARIA_LIVE_TIMEOUT_MS = exports.ARIA_LIVE_TIMEOUT_MS = 5000;
+const ARIA_LIVE_TIMEOUT_MS = exports.ARIA_LIVE_TIMEOUT_MS = 5000;
+const PROGRESS_AMOUNT_LOADING = exports.PROGRESS_AMOUNT_LOADING = 20;
+const PROGRESS_AMOUNT_LOADING_COMPLETE = exports.PROGRESS_AMOUNT_LOADING_COMPLETE = 100;

package/file-uploader/file-uploader.js

@@ -39,6 +39,9 @@ function FileUploader(props) {
   if (props['onDropRejected']) {
     console.error('onDropRejected is not a prop for FileUploader.');
   }
+  if (props['progressAmount']) {
+    console.error('progressAmount is not a prop for FileUploader.');
+  }
 
   // Isolate props that are not meant to be passed to FileUploaderBasic
   const {
@@ -49,6 +52,7 @@ function FileUploader(props) {
     maxFiles,
     overrides = {},
     processFileOnDrop,
+    progressAmountStartValue,
     setFileRows,
     ...fileUploaderBasicProps
   } = props;
@@ -114,6 +118,7 @@ function FileUploader(props) {
         file,
         id: (0, _reactUid.uid)(file),
         imagePreviewThumbnail: '',
+        progressAmount: progressAmountStartValue ?? _constants.PROGRESS_AMOUNT_LOADING,
         status: _constants.FILE_STATUS.added
       });
       props.setFileRows([...newFileRows]);
@@ -124,6 +129,7 @@ function FileUploader(props) {
         reader.onerror = () => {
           newFileRows[index].errorMessage = 'cannot read file';
           newFileRows[index].status = _constants.FILE_STATUS.error;
+          newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
           (0, _utils.handleAriaLiveUpdates)(_constants.ARIA_LIVE_ELEMENT_ID.ADDITION, `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`);
           props.setFileRows([...newFileRows]);
         };
@@ -136,29 +142,33 @@ function FileUploader(props) {
             // If too many files
             newFileRows[index].errorMessage = `cannot process more than ${props.maxFiles} file(s)`;
             newFileRows[index].status = _constants.FILE_STATUS.error;
+            newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
             (0, _utils.handleAriaLiveUpdates)(_constants.ARIA_LIVE_ELEMENT_ID.ADDITION, `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`);
             props.setFileRows([...newFileRows]);
           } else if (props.minSize !== undefined && Number.isInteger(props.minSize) && props.minSize > fileRow.file.size) {
             // If file size is too small
             newFileRows[index].errorMessage = `file size must be greater than ${(0, _utils.formatBytes)(props.minSize)}`;
             newFileRows[index].status = _constants.FILE_STATUS.error;
+            newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
             (0, _utils.handleAriaLiveUpdates)(_constants.ARIA_LIVE_ELEMENT_ID.ADDITION, `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`);
             props.setFileRows([...newFileRows]);
           } else if (props.maxSize !== undefined && Number.isInteger(props.maxSize) && props.maxSize < fileRow.file.size) {
             // If file size is too big
             newFileRows[index].errorMessage = `file size must be less than ${(0, _utils.formatBytes)(props.maxSize)}`;
             newFileRows[index].status = _constants.FILE_STATUS.error;
+            newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
             (0, _utils.handleAriaLiveUpdates)(_constants.ARIA_LIVE_ELEMENT_ID.ADDITION, `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`);
             props.setFileRows([...newFileRows]);
           } else if (index >= newFileRows.length - rejectedFiles.length) {
             // If file was rejected by dropzone (e.g. wrong file type)
             newFileRows[index].errorMessage = fileRow.file.type ? `file type of ${fileRow.file.type} is not accepted` : 'file type is not accepted';
             newFileRows[index].status = _constants.FILE_STATUS.error;
+            newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
             (0, _utils.handleAriaLiveUpdates)(_constants.ARIA_LIVE_ELEMENT_ID.ADDITION, `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`);
             props.setFileRows([...newFileRows]);
           } else if (props.processFileOnDrop) {
             // If caller passed in file process function
-            props.processFileOnDrop(fileRow.file).then(({
+            props.processFileOnDrop(fileRow.file, fileRow.id, newFileRows).then(({
               errorMessage,
               fileInfo
             }) => {
@@ -168,13 +178,16 @@ function FileUploader(props) {
               if (errorMessage) {
                 newFileRows[index].errorMessage = errorMessage;
                 newFileRows[index].status = _constants.FILE_STATUS.error;
+                newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
               } else {
                 newFileRows[index].status = _constants.FILE_STATUS.processed;
+                newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
               }
             }).catch(error => {
               console.error('error with processFileOnDrop', error);
               newFileRows[index].errorMessage = 'unknown processing error';
               newFileRows[index].status = _constants.FILE_STATUS.error;
+              newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
               (0, _utils.handleAriaLiveUpdates)(_constants.ARIA_LIVE_ELEMENT_ID.ADDITION, `${newFileRows[index].file.name} added, upload failed: ${newFileRows[index].errorMessage}`);
             }).finally(() => {
               props.setFileRows([...newFileRows]);
@@ -182,6 +195,7 @@ function FileUploader(props) {
           } else {
             // If no errors and no file process function
             newFileRows[index].status = _constants.FILE_STATUS.processed;
+            newFileRows[index].progressAmount = _constants.PROGRESS_AMOUNT_LOADING_COMPLETE;
             (0, _utils.handleAriaLiveUpdates)(_constants.ARIA_LIVE_ELEMENT_ID.ADDITION, `${newFileRows[index].file.name} added, upload successful`);
             props.setFileRows([...newFileRows]);
           }
@@ -233,13 +247,15 @@ function FileUploader(props) {
   }, labelProps, {
     $disabled: !!props.disabled
   }), props.label), /*#__PURE__*/React.createElement(_fileUploaderBasic.FileUploaderBasic, _extends({
-    buttonIcon: () => /*#__PURE__*/React.createElement(_upload.default, null),
+    buttonIcon: () => /*#__PURE__*/React.createElement(_upload.default, {
+      "aria-hidden": 'true'
+    }),
     buttonText: locale.fileuploader.buttonText,
     contentMessage: locale.fileuploader.contentMessage,
     overrides: {
       ButtonComponent: {
         props: {
-          'aria-label': `${locale.fileuploader.buttonText} ${props.hint || ''}`,
+          'aria-describedby': 'file-uploader-hint',
           shape: _button.SHAPE.default,
           size: _button.SIZE.default,
           ...props.overrides?.ButtonComponent?.props,
@@ -309,7 +325,8 @@ function FileUploader(props) {
     ,
     onDrop: onDrop,
     onDropAccepted: _ => {},
-    onDropRejected: _ => {}
+    onDropRejected: _ => {},
+    progressAmount: undefined
   })), props.fileRows.length > 0 && /*#__PURE__*/React.createElement(FileRows, _extends({
     "data-baseweb": "file-uploader-file-rows"
   }, fileRowsProps), props.fileRows.map((fileRow, index) => /*#__PURE__*/React.createElement(FileRow, _extends({
@@ -344,7 +361,9 @@ function FileUploader(props) {
     title: fileRow.status
   }, circleExclamationPointFilledIconProps)), /*#__PURE__*/React.createElement(FileRowUploadText, _extends({
     "aria-errormessage": fileRow.errorMessage,
-    "data-baseweb": "file-uploader-file-row-upload-message-text"
+    "aria-invalid": true,
+    "data-baseweb": "file-uploader-file-row-upload-message-text",
+    id: `file-uploader-file-row-upload-message-text-${index}`
   }, fileRowUploadTextProps), locale.fileuploader.error, fileRow.errorMessage)), fileRow.status === _constants.FILE_STATUS.processed && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CircleCheckFilledIcon, _extends({
     "aria-hidden": 'true',
     color: (0, _constants.FILE_STATUS_TO_COLOR_MAP)(theme)[fileRow.status],
@@ -405,7 +424,7 @@ function FileUploader(props) {
       }
     },
     size: _progressBar.SIZE.small,
-    value: fileRow.status === _constants.FILE_STATUS.processed ? 100 : 20
+    value: fileRow.progressAmount ?? _constants.PROGRESS_AMOUNT_LOADING_COMPLETE
   }, progressBarProps)))))), props.hint && /*#__PURE__*/React.createElement(Hint, _extends({
     "data-baseweb": "file-uploader-hint",
     id: "file-uploader-hint",

package/file-uploader/locale.js

@@ -12,7 +12,7 @@ LICENSE file in the root directory of this source tree.
 */
 
 const locale = {
-  added: 'Description',
+  added: 'Uploading',
   buttonText: 'Browse files',
   contentMessage: 'or drop to upload',
   error: 'Upload failed: ',

package/file-uploader/types.d.ts

@@ -33,6 +33,7 @@ export type FileRow = {
     id: string;
     fileInfo?: any;
     imagePreviewThumbnail?: any;
+    progressAmount: number;
     /** Defines the status of a file */
     status: keyof typeof FILE_STATUS;
 };
@@ -44,9 +45,10 @@ export type FileUploaderProps = Omit<FileUploaderBasicProps, 'onDrop' | 'onDropA
     maxFiles?: number;
     overrides?: FileUploaderBasicOverrides & FileUploaderOverrides;
     /** Function to run on each file, returns "errorMessage: null" on success and "errorMessage: string" for failures */
-    processFileOnDrop?: (file: File) => Promise<{
+    processFileOnDrop?: (fileToProcess: File, fileToProcessId: string, fileRows: FileRow[]) => Promise<{
         errorMessage: string | null;
         fileInfo?: any;
     }>;
+    progressAmountStartValue?: number;
     setFileRows: (fileRows: FileRow[]) => void;
 };

package/file-uploader-basic/file-uploader-basic.js

@@ -86,7 +86,6 @@ function FileUploaderBasic(props) {
       shape: _button.SHAPE.pill,
       size: _button.SIZE.compact,
       onClick: open,
-      role: "button",
       overrides: {
         BaseButton: {
           // @ts-ignore
@@ -106,7 +105,6 @@ function FileUploaderBasic(props) {
       shape: _button.SHAPE.pill,
       size: _button.SIZE.compact,
       onClick: open,
-      role: "button",
       overrides: {
         BaseButton: {
           // @ts-ignore

package/helpers/react-helpers.js

@@ -18,7 +18,7 @@ LICENSE file in the root directory of this source tree.
 const flattenFragments = (children, ChildWrapper, depth = 0) =>
 // @ts-ignore
 React.Children.toArray(children).reduce((acc, child, i) => {
-  if ((0, _reactIs.isFragment)(child)) {
+  if ((0, _reactIs.isFragment)(child) && /*#__PURE__*/React.isValidElement(child)) {
     acc.push(...flattenFragments(child.props.children, ChildWrapper, depth + 1));
   } else if ( /*#__PURE__*/React.isValidElement(child)) {
     if (ChildWrapper) {

package/list/list-item.js

@@ -53,8 +53,6 @@ const ListItem = /*#__PURE__*/_react.default.forwardRef((props, ref) => {
   const listItemName = _react.default.Children.count(props.children) === 0 ? ['List item'] : _react.default.Children.map(props.children, child => {
     return getMainTextFromChild(child);
   });
-
-  // @ts-expect-error todo(ts-migration) TS18049 'listItemName' is possibly 'null' or 'undefined'.
   const ariaLabel = props.hasOwnProperty('aria-label') ? props['aria-label'] : listItemName[0];
   return /*#__PURE__*/_react.default.createElement(Root
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

package/locale/index.js

@@ -30,7 +30,6 @@ 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)

package/mobile-header/mobile-header.js

@@ -95,7 +95,6 @@ function MobileHeader({
     $type: type,
     $expanded: expanded
   }, titleProps), title), actionButtons.length > 0 && /*#__PURE__*/React.createElement(ActionButtonsContainer, actionButtonsContainerProps, actionButtons.map((button, idx) => {
-    // @ts-expect-error todo(ts-migration) TS2339 Property 'renderIcon' does not exist on type 'IconButton | undefined'.
     const {
       renderIcon,
       onClick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "15.0.0",
+  "version": "15.0.2",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -16,6 +16,7 @@
     "dev:docs": "next dev documentation-site",
     "dev:ladle": "ladle serve",
     "build:docs": "next build documentation-site",
+    "start:docs": "npx serve@latest documentation-site/out",
     "build:ladle": "ladle build",
     "build:lib": "NODE_ENV=production babel ./src --out-dir ./dist --config-file ./publish/.babelrc.js --extensions '.ts,.tsx,.js' --ignore **.test.*,**/__tests__/**,**/e2e.*,**/template-component/**,**/test/**",
     "build:lib:dts": "tsc -p tsconfig.dist.json || true",
@@ -24,7 +25,7 @@
   "dependencies": {
     "@date-io/date-fns": "^2.13.1",
     "@date-io/moment": "^2.13.1",
-    "baseui": "^14.0.0",
+    "axe-core": "^4.11.0",
     "card-validator": "^6.2.0",
     "csstype": "2.6.11",
     "d3": "^6.7.0",
@@ -57,7 +58,7 @@
   "peerDependencies": {
     "react": ">=18",
     "react-dom": ">=18",
-    "styletron-react": "^6.1.1"
+    "styletron-react": ">=6"
   },
   "devDependencies": {
     "@babel/cli": "^7.23.4",

package/page-control/page-control.js

@@ -91,9 +91,7 @@ const PageControl = ({
       checked: isActive(page),
       key: page,
       "aria-label": `page ${page}`,
-      name: name
-      // @ts-expect-error todo(ts-migration) TS2722 Cannot invoke an object which is possibly 'undefined'.
-      ,
+      name: name,
       onChange: () => onPageChange({
         nextPage: page
       }),

package/segmented-control/segmented-control.js

@@ -81,8 +81,7 @@ function SegmentedControl({
   activateOnFocus = true,
   onChange,
   overrides = {},
-  // @ts-expect-error todo(ts-migration) TS2322 Type 'null' is not assignable to type 'string'.
-  uid: customUid = null,
+  uid: customUid,
   width,
   height
 }) {

package/segmented-control/stateful-segmented-control.js

@@ -19,10 +19,9 @@ const getInitialState = (children, initialState) => {
   if (initialState && initialState.activeKey) {
     return initialState;
   } else {
-    // @ts-expect-error todo(ts-migration) TS2533 Object is possibly 'null' or 'undefined'.
     const firstKey = React.Children.map(children,
     // @ts-expect-error todo(flow->ts) child might be not a ReactElement, theoretically including null
-    (child, index) => child.key || String(index))[0];
+    (child, index) => child.key || String(index))?.[0];
     return {
       activeKey: firstKey
     };

package/sheet/sheet.js

@@ -85,9 +85,7 @@ const Sheet = ({
     onClick: trailingAction.onClick,
     "aria-label": trailingAction.label,
     size: buttonSize
-  }, actionButtonProps), renderActionButtonContent(trailingAction.renderIcon || trailingAction.label, buttonSize)), !trailingAction && leadingAction && /*#__PURE__*/React.createElement(EmptyDiv, emptyDivProps)), progressBar ? /*#__PURE__*/React.createElement(_progressBar.ProgressBar
-  // @ts-expect-error todo(ts-migration) TS2783 'size' is specified more than once, so this usage will be overwritten.
-  , _extends({
+  }, actionButtonProps), renderActionButtonContent(trailingAction.renderIcon || trailingAction.label, buttonSize)), !trailingAction && leadingAction && /*#__PURE__*/React.createElement(EmptyDiv, emptyDivProps)), progressBar ? /*#__PURE__*/React.createElement(_progressBar.ProgressBar, _extends({
     size: _progressBar.SIZE.small,
     overrides: {
       BarContainer: {

package/stepper/stepper.js

@@ -84,9 +84,7 @@ function Stepper({
     disabled: disabled,
     "aria-label": "value"
   }, inputProps)), /*#__PURE__*/React.createElement(IncrementButton, _extends({
-    onClick: () => setValue(value + 1)
-    // @ts-expect-error todo(ts-migration) TS18048 'maxValue' is possibly 'undefined'.
-    ,
+    onClick: () => setValue(value + 1),
     disabled: disabled || value >= maxValue,
     "aria-label": "increment value"
   }, incrementButtonProps), /*#__PURE__*/React.createElement(IncrementButtonIcon, incrementButtonIconProps)));

package/system-banner/system-banner.js

@@ -67,9 +67,7 @@ function SystemBanner(props) {
     MessageContent: hasTwoActions ? (0, _overrides.mergeOverride)(systemBannerMessageContentOverrides, MessageContent || {}) : {},
     ...restOverrides
   };
-  return /*#__PURE__*/React.createElement(_banner.Banner
-  // @ts-expect-error todo(ts-migration) TS2322 Type '{ icon?: ArtworkIcon | undefined; onClick: ((a: SyntheticEvent<HTMLButtonElement, Event>) => unknown) | null; label: string; } | { ...; } | null' is not assignable to type 'ActionContent | undef...
-  , _extends({
+  return /*#__PURE__*/React.createElement(_banner.Banner, _extends({
     action: secondaryAction ? {
       onClick: null,
       ...secondaryAction