baseui 12.1.3 → 13.0.0

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

@@ -25,7 +25,8 @@ class StatefulListContainer extends React.Component {
       newIndex,
       targetRect
     }) => {
-      const newItemsState = newIndex === -1 ? arrayRemove(this.state.items, oldIndex) : arrayMove(this.state.items, oldIndex, newIndex);
+      const newItemsState = newIndex === -1 ? arrayRemove(this.state.items, oldIndex) : arrayMove(this.state.items, oldIndex, newIndex); // @ts-ignore
+
       this.props.onChange({
         newState: newItemsState,
         oldIndex,
@@ -41,7 +42,8 @@ class StatefulListContainer extends React.Component {
   internalSetState(type, changes) {
     const {
       stateReducer
-    } = this.props;
+    } = this.props; // @ts-ignore
+
     this.setState(prevState => stateReducer(type, changes, prevState));
   }
 
@@ -55,6 +57,7 @@ class StatefulListContainer extends React.Component {
     } = this.props;
     return this.props.children({ ...restProps,
       items: this.state.items,
+      // @ts-ignore
       onChange: this.onChange
     });
   }

package/es/dnd-list/styled-components.js

@@ -19,7 +19,8 @@ export const Root = styled('div', ({
 });
 Root.displayName = "Root";
 Root.displayName = 'Root';
-Root.displayName = 'StyledRoot';
+Root.displayName = 'StyledRoot'; // @ts-ignore
+
 export const List = styled('ul', ({
   $isDragged
 }) => {
@@ -32,7 +33,8 @@ export const List = styled('ul', ({
 List.displayName = "List";
 List.displayName = 'List';
 List.displayName = 'StyledList';
-export const Item = styled('li', ({
+export const Item = styled('li', // @ts-ignore
+({
   $isDragged,
   $isSelected,
   $theme,

package/es/drawer/styled-components.js

@@ -17,18 +17,20 @@ function getSizeStyles($size, $anchor) {
 
   if ($anchor === ANCHOR.left || $anchor === ANCHOR.right) {
     // If the anchor is horizontal, set the width
-    styles.height = SIZE_DIMENSION.full;
+    styles.height = SIZE_DIMENSION.full; // @ts-ignore
 
     if (SIZE[$size]) {
+      // @ts-ignore
       styles.width = SIZE_DIMENSION[$size];
     } else if (typeof $size === 'string') {
       styles.width = $size;
     }
   } else {
     // If the anchor is vertical, set the height
-    styles.width = SIZE_DIMENSION.full;
+    styles.width = SIZE_DIMENSION.full; // @ts-ignore
 
     if (SIZE[$size]) {
+      // @ts-ignore
       styles.height = SIZE_DIMENSION[$size];
     } else if (typeof $size === 'string') {
       styles.height = $size;
@@ -56,8 +58,8 @@ function getAnchorStyles(props) {
     case right:
       {
         return {
-          transform: $isVisible ? 'translateX(0)' : `translateX(${sizeStyles.width})`,
-          right: $isVisible ? 0 : `-${sizeStyles.width}`,
+          transform: $isVisible ? 'translateX(0)' : 'translateX(100%)',
+          right: $isVisible ? 0 : '-100%',
           top: 0,
           ...sizeStyles
         };
@@ -66,8 +68,8 @@ function getAnchorStyles(props) {
     case left:
       {
         return {
-          transform: $isVisible ? 'translateX(0)' : `translateX(-${sizeStyles.width})`,
-          left: $isVisible ? 0 : `-${sizeStyles.width}`,
+          transform: $isVisible ? 'translateX(0)' : `translateX(-100%)`,
+          left: $isVisible ? 0 : '-100%',
           top: 0,
           ...sizeStyles
         };
@@ -76,9 +78,9 @@ function getAnchorStyles(props) {
     case bottom:
       {
         return {
-          transform: $isVisible ? 'translateY(0)' : `translateY(${sizeStyles.height})`,
+          transform: $isVisible ? 'translateY(0)' : 'translateY(100%)',
           left: 0,
-          bottom: $isVisible ? '0' : `-${sizeStyles.height}`,
+          bottom: $isVisible ? '0' : `-100%`,
           ...sizeStyles
         };
       }
@@ -86,9 +88,9 @@ function getAnchorStyles(props) {
     case top:
       {
         return {
-          transform: $isVisible ? 'translateY(0)' : `translateY(-${sizeStyles.height})`,
+          transform: $isVisible ? 'translateY(0)' : 'translateY(-100%)',
           left: 0,
-          top: $isVisible ? '0' : `-${sizeStyles.height}`,
+          top: $isVisible ? '0' : '-100%',
           ...sizeStyles
         };
       }
@@ -141,7 +143,8 @@ export const StyledBackdrop = styled('div', props => {
   };
 });
 StyledBackdrop.displayName = "StyledBackdrop";
-StyledBackdrop.displayName = 'StyledBackdrop';
+StyledBackdrop.displayName = 'StyledBackdrop'; // @ts-ignore
+
 export const StyledDrawerContainer = styled('div', props => {
   const {
     $animating,

package/es/file-uploader/file-uploader.js

@@ -16,8 +16,10 @@ import { ProgressBar } from '../progress-bar';
 import { Spinner, SIZE as SPINNER_SIZE } from '../spinner';
 import { StyledRoot, StyledFileDragAndDrop, StyledContentMessage, StyledContentSeparator, StyledErrorMessage, StyledHiddenInput } from './styled-components';
 
+// @ts-ignore
 function prependStyleProps(styleProps) {
   return Object.keys(styleProps).reduce((nextStyleProps, currentKey) => {
+    // @ts-ignore
     nextStyleProps[`$${currentKey}`] = styleProps[currentKey];
     return nextStyleProps;
   }, {});
@@ -40,91 +42,99 @@ function FileUploader(props) {
   const [SpinnerComponent, spinnerProps] = getOverrides(overrides.Spinner, Spinner);
   const [ProgressBarComponent, progressBarProps] = getOverrides(overrides.ProgressBar, ProgressBar);
   const afterFileDrop = !!(props.progressAmount || props.progressMessage || props.errorMessage);
-  return (
-    /*#__PURE__*/
-    // @ts-expect-error todo(flow->ts): dropzone api
-    React.createElement(Dropzone, _extends({}, props, {
-      disabled: props.disabled || afterFileDrop
-    }), renderProps => {
-      const {
-        getRootProps,
-        getInputProps,
-        open,
-        ...styleProps
-      } = renderProps;
-      const prefixedStyledProps = prependStyleProps({ ...styleProps,
-        isDisabled: props.disabled,
-        afterFileDrop
-      });
-      const getRootPropsArgs = { ...(props.disableClick ? {
-          onClick: evt => evt.preventDefault()
-        } : {}),
-        tabIndex: -1
-      };
-      return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
-        "data-baseweb": "file-uploader"
-      }, prefixedStyledProps, rootProps), /*#__PURE__*/React.createElement(FileDragAndDrop, _extends({}, getRootProps(getRootPropsArgs), prefixedStyledProps, fileDragAndDropProps), !afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), locale.fileuploader.dropFilesToUpload), /*#__PURE__*/React.createElement(ContentSeparator, _extends({}, prefixedStyledProps, contentSeparatorProps), locale.fileuploader.or), /*#__PURE__*/React.createElement(ButtonComponent, _extends({
-        disabled: props.disabled,
-        kind: KIND.secondary,
-        shape: SHAPE.pill,
-        size: BUTTON_SIZE.compact,
-        onClick: open,
-        role: "button",
-        overrides: {
-          BaseButton: {
-            style: ({
-              $theme
-            }) => ({
-              marginTop: $theme.sizing.scale500
-            })
-          }
-        }
-      }, prefixedStyledProps, buttonProps), locale.fileuploader.browseFiles)), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(ProgressBarComponent, _extends({
-        value: props.progressAmount,
-        overrides: {
-          BarProgress: {
-            style: ({
-              $theme
-            }) => ({
-              backgroundColor: props.errorMessage ? $theme.colors.negative : $theme.colors.accent
-            })
-          }
+  let accept;
+
+  if (Array.isArray(props.accept)) {
+    accept = props.accept.join(',');
+  } else if (typeof props.accept === 'string') {
+    accept = props.accept;
+  }
+
+  return /*#__PURE__*/React.createElement(Dropzone, _extends({}, props, {
+    accept: accept,
+    disabled: props.disabled || afterFileDrop
+  }), renderProps => {
+    const {
+      getRootProps,
+      getInputProps,
+      open,
+      ...styleProps
+    } = renderProps;
+    const prefixedStyledProps = prependStyleProps({ ...styleProps,
+      isDisabled: props.disabled,
+      afterFileDrop
+    });
+    const getRootPropsArgs = { ...(props.disableClick ? {
+        onClick: evt => evt.preventDefault()
+      } : {}),
+      tabIndex: -1
+    };
+    return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
+      "data-baseweb": "file-uploader"
+    }, prefixedStyledProps, rootProps), /*#__PURE__*/React.createElement(FileDragAndDrop, _extends({}, getRootProps(getRootPropsArgs), prefixedStyledProps, fileDragAndDropProps), !afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), locale.fileuploader.dropFilesToUpload), /*#__PURE__*/React.createElement(ContentSeparator, _extends({}, prefixedStyledProps, contentSeparatorProps), locale.fileuploader.or), /*#__PURE__*/React.createElement(ButtonComponent, _extends({
+      disabled: props.disabled,
+      kind: KIND.secondary,
+      shape: SHAPE.pill,
+      size: BUTTON_SIZE.compact,
+      onClick: open,
+      role: "button",
+      overrides: {
+        BaseButton: {
+          // @ts-ignore
+          style: ({
+            $theme
+          }) => ({
+            marginTop: $theme.sizing.scale500
+          })
         }
-      }, progressBarProps)) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
-        $size: SPINNER_SIZE.medium,
-        $style: {
-          marginBottom: theme.sizing.scale300
+      }
+    }, prefixedStyledProps, buttonProps), locale.fileuploader.browseFiles)), afterFileDrop && /*#__PURE__*/React.createElement(React.Fragment, null, typeof props.progressAmount === 'number' ? /*#__PURE__*/React.createElement(ProgressBarComponent, _extends({
+      value: props.progressAmount,
+      overrides: {
+        BarProgress: {
+          // @ts-ignore
+          style: ({
+            $theme
+          }) => ({
+            backgroundColor: props.errorMessage ? $theme.colors.negative : $theme.colors.accent
+          })
         }
-      }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(RetryButtonComponent, _extends({
-        kind: KIND.tertiary,
-        onClick: () => {
-          props.onRetry && props.onRetry();
-        },
-        "aria-invalid": Boolean(props.errorMessage),
-        "aria-describedby": props['aria-describedby'],
-        "aria-errormessage": props.errorMessage
-      }, retryButtonProps), locale.fileuploader.retry) : /*#__PURE__*/React.createElement(CancelButtonComponent, _extends({
-        kind: KIND.tertiary,
-        onClick: () => {
-          props.onCancel && props.onCancel();
-        },
-        "aria-describedby": props['aria-describedby'],
-        overrides: {
-          BaseButton: {
-            style: ({
-              $theme
-            }) => ({
-              color: $theme.colors.contentNegative
-            })
-          }
+      }
+    }, progressBarProps)) : props.errorMessage ? null : /*#__PURE__*/React.createElement(SpinnerComponent, _extends({
+      $size: SPINNER_SIZE.medium,
+      $style: {
+        marginBottom: theme.sizing.scale300
+      }
+    }, spinnerProps)), (props.errorMessage || props.progressMessage) && props.errorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, _extends({}, prefixedStyledProps, errorMessageProps), props.errorMessage) : /*#__PURE__*/React.createElement(ContentMessage, _extends({}, prefixedStyledProps, contentMessageProps), props.progressMessage), props.errorMessage ? /*#__PURE__*/React.createElement(RetryButtonComponent, _extends({
+      kind: KIND.tertiary,
+      onClick: () => {
+        props.onRetry && props.onRetry();
+      },
+      "aria-invalid": Boolean(props.errorMessage),
+      "aria-describedby": props['aria-describedby'],
+      "aria-errormessage": props.errorMessage
+    }, retryButtonProps), locale.fileuploader.retry) : /*#__PURE__*/React.createElement(CancelButtonComponent, _extends({
+      kind: KIND.tertiary,
+      onClick: () => {
+        props.onCancel && props.onCancel();
+      },
+      "aria-describedby": props['aria-describedby'],
+      overrides: {
+        BaseButton: {
+          // @ts-ignore
+          style: ({
+            $theme
+          }) => ({
+            color: $theme.colors.contentNegative
+          })
         }
-      }, cancelButtonProps), locale.fileuploader.cancel))), /*#__PURE__*/React.createElement(HiddenInput, _extends({
-        "aria-invalid": Boolean(props.errorMessage) || null,
-        "aria-describedby": props['aria-describedby'],
-        "aria-errormessage": props.errorMessage || null
-      }, getInputProps(), prefixedStyledProps, hiddenInputProps))));
-    })
-  );
+      }
+    }, cancelButtonProps), locale.fileuploader.cancel))), /*#__PURE__*/React.createElement(HiddenInput, _extends({
+      "aria-invalid": Boolean(props.errorMessage) || null,
+      "aria-describedby": props['aria-describedby'],
+      "aria-errormessage": props.errorMessage || null
+    }, getInputProps(), prefixedStyledProps, hiddenInputProps))));
+  });
 }
 
 FileUploader.defaultProps = {

package/es/file-uploader/styled-components.js

@@ -10,7 +10,7 @@ export const StyledFileDragAndDrop = styled('div', props => {
   const borderStyle = props.$afterFileDrop ? 'none' : 'dashed';
   return {
     alignItems: 'center',
-    backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundLightAccent : props.$theme.colors.fileUploaderBackgroundColor,
+    backgroundColor: props.$isDragActive ? props.$theme.colors.backgroundAccentLight : props.$theme.colors.fileUploaderBackgroundColor,
     borderLeftColor: borderColor,
     borderRightColor: borderColor,
     borderTopColor: borderColor,
@@ -40,7 +40,8 @@ export const StyledFileDragAndDrop = styled('div', props => {
 });
 StyledFileDragAndDrop.displayName = "StyledFileDragAndDrop";
 StyledFileDragAndDrop.displayName = 'StyledFileDragAndDrop';
-export const StyledContentMessage = styled('div', ({
+export const StyledContentMessage = styled('div', // @ts-ignore
+({
   $theme,
   $afterFileDrop,
   $isDragActive
@@ -51,7 +52,8 @@ export const StyledContentMessage = styled('div', ({
 }));
 StyledContentMessage.displayName = "StyledContentMessage";
 StyledContentMessage.displayName = 'StyledContentMessage';
-export const StyledContentSeparator = StyledContentMessage;
+export const StyledContentSeparator = StyledContentMessage; // @ts-ignore
+
 export const StyledErrorMessage = styled('div', props => ({ ...props.$theme.typography.LabelMedium,
   color: props.$theme.colors.negative,
   marginTop: props.$afterFileDrop ? props.$theme.sizing.scale100 : null,

package/es/flex-grid/flex-grid-item.js

@@ -19,9 +19,11 @@ export const flexGridItemMediaQueryStyle = ({
   flexGridItemCount: itemCount
 }) => {
   // 0px needed for calc() to behave properly
+  // @ts-ignore
   const colGap = $theme.sizing[flexGridColumnGap] || flexGridColumnGap || '0px';
   const colGapQuantity = parseFloat(colGap);
-  const colGapUnit = colGap.match(/[a-zA-Z]+/)[0];
+  const colGapUnit = colGap.match(/[a-zA-Z]+/)[0]; // @ts-ignore
+
   const rowGap = $theme.sizing[flexGridRowGap] || flexGridRowGap || '0px';
   const rowGapQuantity = parseFloat(rowGap);
   const widthCalc = `(100% - ${(colCount - 1) * colGapQuantity}${colGapUnit}) / ${colCount}`;
@@ -42,12 +44,14 @@ export const flexGridItemMediaQueryStyle = ({
 };
 export function getResponsiveValue(responsive, i) {
   if (!responsive) {
+    // @ts-ignore
     return null;
   }
 
   if (!Array.isArray(responsive)) {
     return responsive;
-  }
+  } // @ts-ignore
+
 
   return responsive[i] || responsive[responsive.length - 1];
 }
@@ -93,6 +97,7 @@ export const flexGridItemStyle = ({
     getMediaQuery(0) : mediaQueries[i - 1];
 
     if (mediaQuery) {
+      // @ts-ignore
       acc[mediaQuery] = flexGridItemMediaQueryStyle({
         $theme,
         flexGridColumnCount: flexGridColumnCountValue || 1,

package/es/flex-grid/flex-grid.js

@@ -40,7 +40,8 @@ const FlexGrid = ({
     ref: forwardedRef,
     as: as
   }, restProps, flexGridProps), // flatten fragments so FlexGrid correctly iterates over fragments’ children
-  flattenFragments(children).map((child, flexGridItemIndex, {
+  flattenFragments(children).map( // @ts-ignore
+  (child, flexGridItemIndex, {
     length: flexGridItemCount
   }) => {
     return /*#__PURE__*/React.cloneElement(child, {

package/es/form-control/form-control.js

@@ -13,6 +13,7 @@ import { getOverride, getOverrideProps } from '../helpers/overrides';
 import { UIDConsumer } from 'react-uid';
 import { Label as StyledLabel, LabelEndEnhancer as StyledLabelEndEnhancer, LabelContainer as StyledLabelContainer, Caption as StyledCaption, ControlContainer as StyledControlContainer } from './styled-components';
 
+// @ts-ignore
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (!!error && typeof error !== 'boolean') {
     return typeof error === 'function' ? error(sharedProps) : error;
@@ -33,10 +34,15 @@ export default class FormControl extends React.Component {
   render() {
     const {
       overrides: {
+        // @ts-ignore
         Label: LabelOverride,
+        // @ts-ignore
         LabelEndEnhancer: LabelEndEnhancerOverride,
+        // @ts-ignore
         LabelContainer: LabelContainerOverride,
+        // @ts-ignore
         Caption: CaptionOverride,
+        // @ts-ignore
         ControlContainer: ControlContainerOverride
       },
       label,
@@ -129,8 +135,8 @@ export default class FormControl extends React.Component {
         'aria-errormessage': error ? captionId : null,
         'aria-describedby': caption || positive ? captionId : null,
         disabled: onlyChildProps.disabled || disabled,
-        error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
-        positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
+        error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error === false ? undefined : sharedProps.$error,
+        positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive === false ? undefined : sharedProps.$positive
       });
     }), (!!caption || !!error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
       "data-baseweb": "form-control-caption",
@@ -142,7 +148,9 @@ export default class FormControl extends React.Component {
 
 _defineProperty(FormControl, "defaultProps", {
   overrides: {},
+  // @ts-ignore
   label: null,
+  // @ts-ignore
   caption: null,
   disabled: false,
   counter: false

package/es/helper/stateful-helper.js

@@ -26,6 +26,7 @@ StatefulHelper.defaultProps = {
   triggerType: TRIGGER_TYPE.click,
   dismissOnClickOutside: true,
   dismissOnEsc: true,
+  // @ts-ignore
   stateReducer: (_, nextState) => nextState,
   popoverMargin: POPOVER_MARGIN
 };

package/es/helper/styled-components.js

@@ -8,7 +8,7 @@ import { styled } from '../styles';
 import { PLACEMENT } from '../popover';
 import { getBodyStyles } from '../popover/styled-components';
 import { getPopoverMarginStyles, splitPlacement } from '../popover/utils';
-const CLAMP_ARROW_SIZE = 16;
+const CLAMP_ARROW_SIZE = 16; // @ts-ignore
 
 function dimensions(placement) {
   switch (placement) {
@@ -23,11 +23,13 @@ function dimensions(placement) {
     default:
       return [CLAMP_ARROW_SIZE, CLAMP_ARROW_SIZE];
   }
-}
+} // @ts-ignore
+
 
 function linearGradientDirection(placement) {
   return ['to', ...splitPlacement(placement)].join(' ');
-}
+} // @ts-ignore
+
 
 function conicGradientOrigin(placement) {
   switch (placement) {
@@ -46,7 +48,8 @@ function conicGradientOrigin(placement) {
     default:
       return [0, 0];
   }
-}
+} // @ts-ignore
+
 
 function conicGradientDegStart(placement) {
   switch (placement) {
@@ -65,7 +68,8 @@ function conicGradientDegStart(placement) {
     default:
       return 0;
   }
-}
+} // @ts-ignore
+
 
 function position(offsets, placement, width, height) {
   if (placement === PLACEMENT.top) {

package/es/helpers/overrides.js

@@ -118,6 +118,7 @@ export function mergeOverrides(target = {}, source = {}) {
   const allIdentifiers = Object.keys(merged); // const allIdentifiers = Object.keys({...target, ...source});
 
   return allIdentifiers.reduce((acc, name) => {
+    // @ts-ignore
     acc[name] = mergeOverride(toObjectOverride(target[name]), toObjectOverride(source[name]));
     return acc;
   }, {});

package/es/helpers/react-helpers.js

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { isFragment } from 'react-is';
-export const flattenFragments = (children, ChildWrapper, depth = 0) => // @ts-expect-error
+export const flattenFragments = (children, ChildWrapper, depth = 0) => // @ts-ignore
 React.Children.toArray(children).reduce((acc, child, i) => {
   if (isFragment(child)) {
     acc.push(...flattenFragments(child.props.children, ChildWrapper, depth + 1));

package/es/helpers/responsive-helpers.js

@@ -10,4 +10,28 @@ LICENSE file in the root directory of this source tree.
  * getMediaQuery(720) => '@media screen and (min-width: 720px)'
  */
 export const getMediaQuery = breakpoint => `@media screen and (min-width: ${breakpoint}px)`;
-export const getMediaQueries = breakpoints => Object.keys(breakpoints).map(key => breakpoints[key]).sort((a, b) => a - b).map(getMediaQuery);
+export const getMediaQueries = breakpoints => Object.keys(breakpoints) // @ts-ignore
+.map(key => breakpoints[key]).sort((a, b) => a - b).map(getMediaQuery);
+export const getMinimumPageMargins = margins => {
+  const margin = Array.isArray(margins) ? margins[0] : margins;
+  return {
+    paddingInlineStart: `${margin}px`,
+    paddingInlineEnd: `${margin}px`
+  };
+};
+export const getMediaQueryPageMargins = theme => {
+  const result = {};
+  const mediaQueries = getMediaQueries(theme.breakpoints);
+
+  for (const [index, query] of mediaQueries.entries()) {
+    // There is no guarantee grid.margins will have enough margins to satisfy
+    // each breakpoint.
+    const margin = Array.isArray(theme.grid.margins) ? theme.grid.margins[index] ?? theme.grid.margins.at(-1) : theme.grid.margins;
+    result[query] = {
+      paddingInlineStart: `${margin}px`,
+      paddingInlineEnd: `${margin}px`
+    };
+  }
+
+  return result;
+};

package/es/icon/alert.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Alert(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/arrow-down.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function ArrowDown(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/arrow-left.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function ArrowLeft(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/arrow-right.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function ArrowRight(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/arrow-up.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function ArrowUp(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/blank.js

@@ -13,6 +13,7 @@ import { useStyletron } from '../styles';
 import { mergeOverride, toObjectOverride } from '../helpers/overrides';
 import Icon from './icon';
 
+// @ts-ignore
 function Blank(props, ref) {
   const [, theme] = useStyletron();
   const {

package/es/icon/calendar.js

@@ -0,0 +1,44 @@
+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
+import * as React from 'react';
+import { useStyletron } from '../styles';
+import { mergeOverride, toObjectOverride } from '../helpers/overrides';
+import Icon from './icon';
+
+// @ts-ignore
+function Calendar(props, ref) {
+  const [, theme] = useStyletron();
+  const {
+    title = 'Calendar',
+    size,
+    color,
+    overrides = {},
+    ...restProps
+  } = props;
+  const SvgOverride = mergeOverride( // Icons from the theme target the SVG override in the underlying Icon component
+  {
+    component: theme.icons && theme.icons.Calendar ? theme.icons.Calendar : null
+  }, overrides && overrides.Svg ? toObjectOverride(overrides.Svg) : {});
+  return /*#__PURE__*/React.createElement(Icon, _extends({
+    viewBox: "0 0 24 24",
+    ref: ref,
+    title: title,
+    size: size,
+    color: color,
+    overrides: {
+      Svg: SvgOverride
+    }
+  }, restProps), /*#__PURE__*/React.createElement("path", {
+    d: "M21.1667 2.83333H19.3333V1.45833C19.3333 1.20522 19.1283 1 18.875 1H17.9583C17.705 1 17.5 1.20522 17.5 1.45833V2.83333H6.5V1.45833C6.5 1.20522 6.295 1 6.04167 1H5.125C4.87166 1 4.66667 1.20522 4.66667 1.45833V2.83333H2.83333C1.82088 2.83333 1 3.6541 1 4.66667V21.1667C1 22.1791 1.82088 23 2.83333 23H21.1667C22.1791 23 23 22.1791 23 21.1667V4.66667C23 3.6541 22.1791 2.83333 21.1667 2.83333ZM4.66667 4.66667H6.5V6.5H4.66667V4.66667V4.66667ZM8.33333 19.3333H4.66667V15.6667H8.33333V19.3333ZM13.8333 19.3333H10.1667V15.6667H13.8333V19.3333ZM13.8333 13.8333H10.1667V10.1667H13.8333V13.8333ZM19.3333 19.3333H15.6667V15.6667H19.3333V19.3333ZM19.3333 13.8333H15.6667V10.1667H19.3333V13.8333ZM19.3333 6.5H17.5V4.66667H19.3333V6.5Z"
+  }));
+}
+
+export default /*#__PURE__*/React.forwardRef(Calendar);