baseui 12.1.3 → 13.0.0

package/file-uploader/styled-components.js

@@ -18,7 +18,7 @@ var StyledFileDragAndDrop = (0, _styles.styled)('div', function (props) {
   var 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,
@@ -49,7 +49,8 @@ var StyledFileDragAndDrop = (0, _styles.styled)('div', function (props) {
 exports.StyledFileDragAndDrop = StyledFileDragAndDrop;
 StyledFileDragAndDrop.displayName = "StyledFileDragAndDrop";
 StyledFileDragAndDrop.displayName = 'StyledFileDragAndDrop';
-var StyledContentMessage = (0, _styles.styled)('div', function (_ref) {
+var StyledContentMessage = (0, _styles.styled)('div', // @ts-ignore
+function (_ref) {
   var $theme = _ref.$theme,
       $afterFileDrop = _ref.$afterFileDrop,
       $isDragActive = _ref.$isDragActive;
@@ -62,7 +63,8 @@ var StyledContentMessage = (0, _styles.styled)('div', function (_ref) {
 exports.StyledContentMessage = StyledContentMessage;
 StyledContentMessage.displayName = "StyledContentMessage";
 StyledContentMessage.displayName = 'StyledContentMessage';
-var StyledContentSeparator = StyledContentMessage;
+var StyledContentSeparator = StyledContentMessage; // @ts-ignore
+
 exports.StyledContentSeparator = StyledContentSeparator;
 var StyledErrorMessage = (0, _styles.styled)('div', function (props) {
   return _objectSpread(_objectSpread({}, props.$theme.typography.LabelMedium), {}, {

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

@@ -17,7 +17,7 @@ export const StyledFileDragAndDrop = styled<StylePropsT>('div', (props) => {
   return ({
     alignItems: 'center',
     backgroundColor: props.$isDragActive
-      ? props.$theme.colors.backgroundLightAccent
+      ? props.$theme.colors.backgroundAccentLight
       : props.$theme.colors.fileUploaderBackgroundColor,
     borderLeftColor: borderColor,
     borderRightColor: borderColor,

package/file-uploader/types.d.ts

@@ -1,6 +1,7 @@
+import type { DropzoneProps } from 'react-dropzone';
+import type { DragEvent } from 'react';
 import type { Override } from '../helpers/overrides';
-import type { SyntheticEvent, ChangeEvent, FocusEvent, KeyboardEvent, MouseEvent, DragEvent } from 'react';
-export declare type StyleProps = {
+export type StyleProps = {
     $afterFileDrop: boolean;
     $isDisabled: boolean;
     $isDragActive: boolean;
@@ -8,7 +9,7 @@ export declare type StyleProps = {
     $isDragReject: boolean;
     $isFocused: boolean;
 };
-export declare type FileUploaderOverrides = {
+export type FileUploaderOverrides = {
     Root?: Override;
     FileDragAndDrop?: Override;
     ContentMessage?: Override;
@@ -22,29 +23,9 @@ export declare type FileUploaderOverrides = {
     Spinner?: Override;
     ProgressBar?: Override;
 };
-export declare type FileUploaderProps = {
-    accept?: string | string[];
-    /** Disallow clicking on the dropzone container to open file dialog */
+export type FileUploaderProps = Omit<DropzoneProps, 'accept'> & {
+    accept?: string[] | string;
     disableClick?: boolean;
-    disabled?: boolean;
-    getDataTransferItems?: GetDataTransferItems;
-    maxSize?: number;
-    minSize?: number;
-    multiple?: boolean;
-    name?: string;
-    onClick?: (event: MouseEvent<HTMLElement>) => unknown;
-    onFocus?: (event: FocusEvent<HTMLElement>) => unknown;
-    onBlur?: (event: FocusEvent<HTMLElement>) => unknown;
-    onKeyDown?: (event: KeyboardEvent<HTMLElement>) => unknown;
-    onDragStart?: (event: DragEvent<HTMLElement>) => unknown;
-    onDragEnter?: (event: DragEvent<HTMLElement>) => unknown;
-    onDragOver?: (event: DragEvent<HTMLElement>) => unknown;
-    onDragLeave?: (event: DragEvent<HTMLElement>) => unknown;
-    onDrop?: DropFilesEventHandler;
-    onDropAccepted?: DropFileEventHandler;
-    onDropRejected?: DropFileEventHandler;
-    onFileDialogCancel?: () => unknown;
-    preventDropOnDocument?: boolean;
     'aria-describedby'?: string;
     errorMessage?: string;
     onCancel?: () => unknown;
@@ -53,8 +34,4 @@ export declare type FileUploaderProps = {
     progressAmount?: number;
     progressMessage?: string;
 };
-export declare type DropFilesEventHandler = (accepted: File[], rejected: File[], event: DragEvent<HTMLElement>) => unknown;
-declare type DropFileEventHandler = (acceptedOrRejected: File[], event: DragEvent<HTMLElement>) => unknown;
-declare type DataTransferEvent = DragEvent<HTMLElement> | ChangeEvent<HTMLInputElement> | DragEvent<any> | SyntheticEvent<any>;
-declare type GetDataTransferItems = (event: DataTransferEvent) => Promise<Array<File | DataTransferItem>>;
-export {};
+export type DropFilesEventHandler = (accepted: File[], rejected: File[], event: DragEvent<HTMLElement>) => unknown;

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

@@ -56,9 +56,11 @@ var flexGridItemMediaQueryStyle = function flexGridItemMediaQueryStyle(_ref) {
       itemIndex = _ref.flexGridItemIndex,
       itemCount = _ref.flexGridItemCount;
   // 0px needed for calc() to behave properly
+  // @ts-ignore
   var colGap = $theme.sizing[flexGridColumnGap] || flexGridColumnGap || '0px';
   var colGapQuantity = parseFloat(colGap);
-  var colGapUnit = colGap.match(/[a-zA-Z]+/)[0];
+  var colGapUnit = colGap.match(/[a-zA-Z]+/)[0]; // @ts-ignore
+
   var rowGap = $theme.sizing[flexGridRowGap] || flexGridRowGap || '0px';
   var rowGapQuantity = parseFloat(rowGap);
   var widthCalc = "(100% - ".concat((colCount - 1) * colGapQuantity).concat(colGapUnit, ") / ").concat(colCount);
@@ -74,12 +76,14 @@ exports.flexGridItemMediaQueryStyle = flexGridItemMediaQueryStyle;
 
 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];
 }
@@ -125,6 +129,7 @@ var flexGridItemStyle = function flexGridItemStyle(_ref3) {
     (0, _responsiveHelpers.getMediaQuery)(0) : mediaQueries[i - 1];
 
     if (mediaQuery) {
+      // @ts-ignore
       acc[mediaQuery] = flexGridItemMediaQueryStyle({
         $theme: $theme,
         flexGridColumnCount: flexGridColumnCountValue || 1,

package/flex-grid/flex-grid.js

@@ -77,7 +77,8 @@ var FlexGrid = function FlexGrid(_ref2) {
     ref: forwardedRef,
     as: as
   }, restProps, flexGridProps), // flatten fragments so FlexGrid correctly iterates over fragments’ children
-  (0, _reactHelpers.flattenFragments)(children).map(function (child, flexGridItemIndex, _ref3) {
+  (0, _reactHelpers.flattenFragments)(children).map( // @ts-ignore
+  function (child, flexGridItemIndex, _ref3) {
     var flexGridItemCount = _ref3.length;
     return /*#__PURE__*/React.cloneElement(child, {
       flexGridColumnCount: flexGridColumnCount,

package/flex-grid/types.d.ts

@@ -1,6 +1,6 @@
 import type { BlockProps, Responsive, Scale } from '../block';
 import type { ElementType } from 'react';
-export declare type FlexGridProps<T extends ElementType = ElementType> = {
+export type FlexGridProps<T extends ElementType = ElementType> = {
     /** Number of equal-width columns to allow for */
     flexGridColumnCount?: Responsive<number>;
     /** Grid gap between columns */
@@ -8,7 +8,7 @@ export declare type FlexGridProps<T extends ElementType = ElementType> = {
     /** Grid gap between rows */
     flexGridRowGap?: Responsive<Scale>;
 } & BlockProps<T>;
-export declare type FlexGridItemProps<T extends ElementType = ElementType> = {
+export type FlexGridItemProps<T extends ElementType = ElementType> = {
     /** Index of item in FlexGrid, used to determine gaps **/
     flexGridItemIndex?: number;
     /** Total count of items in FlexGrid, used to determine gaps **/

package/form-control/form-control.js

@@ -43,6 +43,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// @ts-ignore
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (!!error && typeof error !== 'boolean') {
     return typeof error === 'function' ? error(sharedProps) : error;
@@ -176,8 +177,8 @@ var FormControl = /*#__PURE__*/function (_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",
@@ -194,7 +195,9 @@ exports.default = FormControl;
 
 _defineProperty(FormControl, "defaultProps", {
   overrides: {},
+  // @ts-ignore
   label: null,
+  // @ts-ignore
   caption: null,
   disabled: false,
   counter: false

package/form-control/types.d.ts

@@ -1,9 +1,9 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
-export declare type FormControlState = {
+export type FormControlState = {
     captionId: string;
 };
-export declare type FormControlOverrides = {
+export type FormControlOverrides = {
     /** Customizes the label element. */
     Label?: Override;
     /** Customizes the label end enhancer element. */
@@ -15,7 +15,7 @@ export declare type FormControlOverrides = {
     /** Customizes the container element. */
     ControlContainer?: Override;
 };
-export declare type FormControlProps = {
+export type FormControlProps = {
     overrides?: FormControlOverrides;
     /** A label rendered above the input field. */
     label?: React.ReactNode | ((props: {}) => React.ReactNode) | undefined | null;
@@ -39,7 +39,7 @@ export declare type FormControlProps = {
     };
     children: React.ReactNode;
 };
-export declare type StyleProps = {
+export type StyleProps = {
     $disabled?: boolean;
     $error?: boolean;
     $positive?: boolean;

package/header-navigation/types.d.ts

@@ -1,7 +1,8 @@
+import type { PropsWithChildren } from 'react';
 import type { Override } from '../helpers/overrides';
-export declare type HeaderNavigationOverrides = {
+export type HeaderNavigationOverrides = {
     Root?: Override;
 };
-export declare type HeaderNavigationProps = {
+export type HeaderNavigationProps = PropsWithChildren<{
     overrides: HeaderNavigationOverrides;
-};
+}>;

package/header-navigation/types.js.flow

@@ -5,6 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
+import * as React from 'react';
 import type { OverrideT } from '../helpers/overrides.js';
 
 export type OverridesT = {
@@ -13,6 +14,7 @@ export type OverridesT = {
 
 export type PropsT = {
   overrides: OverridesT,
+  children?: React.Node,
 };
 
 declare var __DEV__: boolean;

package/heading/types.d.ts

@@ -1,10 +1,10 @@
 import type * as React from 'react';
 import type { BlockProps } from '../block';
-export declare type HeadingProps = {
+export type HeadingProps = {
     /** Set and fix the style level independently on the hierarchy context. */
     styleLevel?: 1 | 2 | 3 | 4 | 5 | 6;
 } & BlockProps<'h1'>;
-export declare type HeadingLevelProps = {
+export type HeadingLevelProps = {
     /** Content to be rendered in the HeadingLevel. */
     children: React.ReactNode;
 };

package/helper/index.d.ts

@@ -6,4 +6,4 @@ export { StatefulHelper as Unstable_StatefulHelper } from './stateful-helper';
 export * from './styled-components';
 export * from './types';
 /** @deprecated use HelperStepsProps instead. To be removed in future versions.*/
-export declare type HelperStepsPropsT = HelperStepsProps;
+export type HelperStepsPropsT = HelperStepsProps;

package/helper/stateful-helper.js

@@ -45,6 +45,7 @@ StatefulHelper.defaultProps = {
   triggerType: _popover.TRIGGER_TYPE.click,
   dismissOnClickOutside: true,
   dismissOnEsc: true,
+  // @ts-ignore
   stateReducer: function stateReducer(_, nextState) {
     return nextState;
   },

package/helper/styled-components.js

@@ -39,7 +39,7 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
-var CLAMP_ARROW_SIZE = 16;
+var CLAMP_ARROW_SIZE = 16; // @ts-ignore
 
 function dimensions(placement) {
   switch (placement) {
@@ -54,11 +54,13 @@ function dimensions(placement) {
     default:
       return [CLAMP_ARROW_SIZE, CLAMP_ARROW_SIZE];
   }
-}
+} // @ts-ignore
+
 
 function linearGradientDirection(placement) {
   return ['to'].concat(_toConsumableArray((0, _utils.splitPlacement)(placement))).join(' ');
-}
+} // @ts-ignore
+
 
 function conicGradientOrigin(placement) {
   switch (placement) {
@@ -77,7 +79,8 @@ function conicGradientOrigin(placement) {
     default:
       return [0, 0];
   }
-}
+} // @ts-ignore
+
 
 function conicGradientDegStart(placement) {
   switch (placement) {
@@ -96,7 +99,8 @@ function conicGradientDegStart(placement) {
     default:
       return 0;
   }
-}
+} // @ts-ignore
+
 
 function position(offsets, placement, width, height) {
   if (placement === _popover.PLACEMENT.top) {

package/helper/types.d.ts

@@ -1,5 +1,5 @@
 export type { PopoverProps as Props, StatefulPopoverProps as StatefulProps } from '../popover';
-export declare type HelperStepsProps = {
+export type HelperStepsProps = {
     index: number;
     length: number;
     onFinish: () => unknown;

package/helpers/overrides.d.ts

@@ -1,21 +1,21 @@
 import * as React from 'react';
-export declare type ConfigurationOverrideFunction = (a: any) => any | undefined | null;
-export declare type ConfigurationOverrideObject = {
+export type ConfigurationOverrideFunction = (a: any) => any | undefined | null;
+export type ConfigurationOverrideObject = {
     [k: string]: any;
 };
-export declare type ConfigurationOverride = ConfigurationOverrideObject | ConfigurationOverrideFunction;
-export declare type StyleOverride = ConfigurationOverride;
-export declare type OverrideObject = {
+export type ConfigurationOverride = ConfigurationOverrideObject | ConfigurationOverrideFunction;
+export type StyleOverride = ConfigurationOverride;
+export type OverrideObject = {
     component?: React.ComponentType<any> | null;
     props?: ConfigurationOverride | null;
     style?: ConfigurationOverride | null;
 };
-export declare type Override<T = any> = OverrideObject | (React.ComponentType<any> & {
+export type Override<T = any> = OverrideObject | (React.ComponentType<any> & {
     component?: undefined;
     props?: undefined;
     style?: undefined;
 });
-export declare type Overrides<T = any> = {
+export type Overrides<T = any> = {
     [x: string]: Override;
 };
 /**

package/helpers/overrides.js

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

package/helpers/react-helpers.d.ts

@@ -1,2 +1,2 @@
 import * as React from 'react';
-export declare const flattenFragments: (children?: React.ReactNode, ChildWrapper?: React.ComponentType<{}>, depth?: number) => React.ReactNode[];
+export declare const flattenFragments: (children?: React.ReactNode, ChildWrapper?: React.ComponentType<React.PropsWithChildren<{}>>, depth?: number) => React.ReactNode[];

package/helpers/react-helpers.js

@@ -29,7 +29,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 
 var flattenFragments = function flattenFragments(children, ChildWrapper) {
   var depth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  return (// @ts-expect-error
+  return (// @ts-ignore
     React.Children.toArray(children).reduce(function (acc, child, i) {
       if ((0, _reactIs.isFragment)(child)) {
         acc.push.apply(acc, _toConsumableArray(flattenFragments(child.props.children, ChildWrapper, depth + 1)));

package/helpers/responsive-helpers.d.ts

@@ -1,7 +1,11 @@
-import type { Breakpoints } from '../styles';
+import type { Breakpoints, Theme } from '../styles';
+import type { Responsive } from '../layout-grid';
+import type { MediaQueryPageMargins, PageMargins } from './types';
 /**
  * Helper function that generates media queries based on breakpoint, e.g.
  * getMediaQuery(720) => '@media screen and (min-width: 720px)'
  */
 export declare const getMediaQuery: (breakpoint: number) => string;
 export declare const getMediaQueries: (breakpoints: Breakpoints) => string[];
+export declare const getMinimumPageMargins: (margins: Responsive<number>) => PageMargins;
+export declare const getMediaQueryPageMargins: (theme: Theme) => MediaQueryPageMargins;

package/helpers/responsive-helpers.js

@@ -3,7 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getMediaQuery = exports.getMediaQueries = void 0;
+exports.getMinimumPageMargins = exports.getMediaQueryPageMargins = exports.getMediaQuery = exports.getMediaQueries = void 0;
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e2) { throw _e2; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e3) { didErr = true; err = _e3; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 /*
 Copyright (c) Uber Technologies, Inc.
@@ -23,11 +37,56 @@ var getMediaQuery = function getMediaQuery(breakpoint) {
 exports.getMediaQuery = getMediaQuery;
 
 var getMediaQueries = function getMediaQueries(breakpoints) {
-  return Object.keys(breakpoints).map(function (key) {
+  return Object.keys(breakpoints) // @ts-ignore
+  .map(function (key) {
     return breakpoints[key];
   }).sort(function (a, b) {
     return a - b;
   }).map(getMediaQuery);
 };
 
-exports.getMediaQueries = getMediaQueries;
+exports.getMediaQueries = getMediaQueries;
+
+var getMinimumPageMargins = function getMinimumPageMargins(margins) {
+  var margin = Array.isArray(margins) ? margins[0] : margins;
+  return {
+    paddingInlineStart: "".concat(margin, "px"),
+    paddingInlineEnd: "".concat(margin, "px")
+  };
+};
+
+exports.getMinimumPageMargins = getMinimumPageMargins;
+
+var getMediaQueryPageMargins = function getMediaQueryPageMargins(theme) {
+  var result = {};
+  var mediaQueries = getMediaQueries(theme.breakpoints);
+
+  var _iterator = _createForOfIteratorHelper(mediaQueries.entries()),
+      _step;
+
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _theme$grid$margins$i;
+
+      var _step$value = _slicedToArray(_step.value, 2),
+          index = _step$value[0],
+          query = _step$value[1];
+
+      // There is no guarantee grid.margins will have enough margins to satisfy
+      // each breakpoint.
+      var margin = Array.isArray(theme.grid.margins) ? (_theme$grid$margins$i = theme.grid.margins[index]) !== null && _theme$grid$margins$i !== void 0 ? _theme$grid$margins$i : theme.grid.margins.at(-1) : theme.grid.margins;
+      result[query] = {
+        paddingInlineStart: "".concat(margin, "px"),
+        paddingInlineEnd: "".concat(margin, "px")
+      };
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+
+  return result;
+};
+
+exports.getMediaQueryPageMargins = getMediaQueryPageMargins;

package/helpers/responsive-helpers.js.flow

@@ -6,7 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type { BreakpointsT } from '../styles/types.js';
+import type { BreakpointsT, ThemeT } from '../styles/types.js';
+import type { ResponsiveT } from '../layout-grid/types.js';
+import type { MediaQueryPageMarginsT, PageMarginsT } from './types.js';
 
 /**
  * Helper function that generates media queries based on breakpoint, e.g.
@@ -21,6 +23,30 @@ export const getMediaQueries = (breakpoints: BreakpointsT): string[] =>
     .sort((a, b) => a - b)
     .map(getMediaQuery);
 
+export const getMinimumPageMargins = (margins: ResponsiveT<number>): PageMarginsT => {
+  const margin = Array.isArray(margins) ? margins[0] : margins;
+  return {
+    paddingInlineStart: `${margin}px`,
+    paddingInlineEnd: `${margin}px`,
+  };
+};
+
+export const getMediaQueryPageMargins = (theme: ThemeT): MediaQueryPageMarginsT => {
+  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)
+      ? // $FlowFixMe Array.at() is not available in flow version
+        theme.grid.margins[index] ?? theme.grid.margins.at(-1)
+      : theme.grid.margins;
+
+    result[query] = { paddingInlineStart: `${margin}px`, paddingInlineEnd: `${margin}px` };
+  }
+  return result;
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/helpers/types.d.ts

@@ -1,11 +1,11 @@
 import type * as React from 'react';
 import type { Theme } from '../styles/types';
 import type { Override } from '../helpers/overrides';
-export declare type BaseProviderOverrides = {
+export type BaseProviderOverrides = {
     AppContainer?: Override;
     LayersContainer?: Override;
 };
-export declare type BaseProviderProps = {
+export type BaseProviderProps = {
     /** Children element to be rendered. Normally the BaseProvider
      should be added at the top level of an application. */
     children: React.ReactNode | undefined | null;
@@ -15,3 +15,10 @@ export declare type BaseProviderProps = {
     /** A value of z-index to be set on the layers. */
     zIndex?: number;
 };
+export type PageMargins = {
+    paddingInlineStart: string;
+    paddingInlineEnd: string;
+};
+export type MediaQueryPageMargins = {
+    [key: string]: PageMargins;
+};

package/helpers/types.js.flow

@@ -4,7 +4,9 @@ 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.
 */
+
 // @flow
+
 import * as React from 'react';
 import type { ThemeT } from '../styles/types.js';
 import type { OverrideT } from '../helpers/overrides.js';
@@ -23,6 +25,15 @@ export type BaseProviderPropsT = {
   zIndex?: number,
 };
 
+export type PageMarginsT = {|
+  paddingInlineStart: string,
+  paddingInlineEnd: string,
+|};
+
+export type MediaQueryPageMarginsT = {
+  [string]: PageMarginsT,
+};
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/icon/alert.js

@@ -41,6 +41,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function Alert(props, ref) {
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),

package/icon/arrow-down.js

@@ -41,6 +41,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function ArrowDown(props, ref) {
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),

package/icon/arrow-left.js

@@ -41,6 +41,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function ArrowLeft(props, ref) {
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),

package/icon/arrow-right.js

@@ -41,6 +41,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function ArrowRight(props, ref) {
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),

package/icon/arrow-up.js

@@ -41,6 +41,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function ArrowUp(props, ref) {
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),

package/icon/blank.js

@@ -41,6 +41,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function Blank(props, ref) {
   var _useStyletron = (0, _styles.useStyletron)(),
       _useStyletron2 = _slicedToArray(_useStyletron, 2),

package/icon/calendar.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;