baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/esm/menu/stateful-container.js

@@ -65,6 +65,7 @@ var DEFAULT_PROPS = {
   getRequiredItemProps: function getRequiredItemProps() {
     return {};
   },
+  // @ts-ignore
   children: function children() {
     return null;
   },
@@ -135,6 +136,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
 
         default:
           if (_this.props.typeAhead) {
+            // @ts-ignore
             clearTimeout(_this.typeAheadTimeOut);
 
             _this.handleAlphaDown(event);
@@ -184,7 +186,8 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       });
 
       if (_this.refList[nextIndex]) {
-        scrollItemIntoView(_this.refList[nextIndex].current, rootRef.current, nextIndex === 0, nextIndex === list.length - 1);
+        scrollItemIntoView(_this.refList[nextIndex].current, // @ts-ignore
+        rootRef.current, nextIndex === 0, nextIndex === list.length - 1);
       }
     });
 
@@ -240,7 +243,8 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
       }
 
       if (_this.refList[nextIndex]) {
-        scrollItemIntoView(_this.refList[nextIndex].current, rootRef.current, nextIndex === 0, nextIndex === _this.getItems().length - 1);
+        scrollItemIntoView(_this.refList[nextIndex].current, // @ts-ignore
+        rootRef.current, nextIndex === 0, nextIndex === _this.getItems().length - 1);
       }
     });
 
@@ -357,6 +361,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
 
       var optgroups = Object.keys(this.props.items);
       return optgroups.reduce(function (output, optgroup) {
+        // @ts-ignore
         return output.concat(_this2.props.items[optgroup]);
       }, []);
     }
@@ -469,6 +474,7 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
         highlightedIndex: this.state.highlightedIndex,
         isFocused: this.state.isFocused,
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        // @ts-ignore
         handleKeyDown: this.props.keyboardControlNode.current ? function (event) {} : this.onKeyDown,
         focusMenu: this.focusMenu,
         unfocusMenu: this.unfocusMenu
@@ -483,7 +489,6 @@ var MenuStatefulContainerInner = /*#__PURE__*/function (_React$Component) {
 _defineProperty(MenuStatefulContainerInner, "defaultProps", DEFAULT_PROPS);
 
 var MenuStatefulContainer = function MenuStatefulContainer(props) {
-  //$FlowExpectedError[cannot-spread-inexact]
   return /*#__PURE__*/React.createElement(MenuStatefulContainerInner, _extends({
     uidSeed: useUIDSeed()
   }, props));

package/esm/menu/styled-components.js

@@ -45,7 +45,7 @@ export var StyledList = styled('ul', function (_ref) {
   };
 });
 StyledList.displayName = "StyledList";
-StyledList.displayName = 'StyledList';
+StyledList.displayName = 'StyledList'; // @ts-ignore
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -61,7 +61,8 @@ function getFontColor(props) {
   }
 
   return props.$theme.colors.menuFontDefault;
-}
+} // @ts-ignore
+
 
 function getBackgroundColor(props) {
   if (props.$disabled) {
@@ -140,7 +141,8 @@ export var StyledListItemElement = styled('li', function (props) {
   });
 });
 StyledListItemElement.displayName = "StyledListItemElement";
-StyledListItemElement.displayName = 'StyledListItemElement';
+StyledListItemElement.displayName = 'StyledListItemElement'; // @ts-ignore
+
 export var StyledListItem = withWrapper(StyledListItemElement, function (Styled) {
   return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
     function StyledListItem(_ref2) {

package/esm/message-card/message-card.js

@@ -1,13 +1,13 @@
 var _excluded = ["children"];
 
+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); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 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; }
 
-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); }
-
 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."); }
@@ -37,7 +37,7 @@ import { useStyletron } from '../styles/index';
 import { ThemeProvider, LightTheme } from '../';
 import { getBackgroundColorType } from './utils';
 import { colors } from '../tokens';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE, BUTTON_KIND } from './constants';
 
 var ButtonAlwaysLightTheme = function ButtonAlwaysLightTheme(_ref) {
@@ -70,10 +70,14 @@ var MessageCard = function MessageCard(_ref2) {
       backgroundPosition = _ref3.backgroundPosition,
       ariaLabel = _ref3.ariaLabel;
 
+  var _useStyletron = useStyletron(),
+      _useStyletron2 = _slicedToArray(_useStyletron, 2),
+      theme = _useStyletron2[1];
+
   var _getOverrides = getOverrides(overrides.Root, StyledRoot),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
       Root = _getOverrides2[0],
-      RootProps = _getOverrides2[1];
+      rootProps = _getOverrides2[1];
 
   var _getOverrides3 = getOverrides(overrides.ContentContainer, StyledContentContainer),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),
@@ -83,27 +87,37 @@ var MessageCard = function MessageCard(_ref2) {
   var _getOverrides5 = getOverrides(overrides.HeadingContainer, StyledHeadingContainer),
       _getOverrides6 = _slicedToArray(_getOverrides5, 2),
       HeadingContainer = _getOverrides6[0],
-      HeadingContainerProps = _getOverrides6[1];
+      headingContainerProps = _getOverrides6[1];
 
   var _getOverrides7 = getOverrides(overrides.ParagraphContainer, StyledParagraphContainer),
       _getOverrides8 = _slicedToArray(_getOverrides7, 2),
       ParagraphContainer = _getOverrides8[0],
-      ParagraphContainerProps = _getOverrides8[1];
+      paragraphContainerProps = _getOverrides8[1];
 
   var _getOverrides9 = getOverrides(overrides.Image, StyledImage),
       _getOverrides10 = _slicedToArray(_getOverrides9, 2),
       Image = _getOverrides10[0],
-      ImageProps = _getOverrides10[1];
+      imageProps = _getOverrides10[1];
 
   var _getOverrides11 = getOverrides(overrides.Button, ButtonAlwaysLightTheme),
       _getOverrides12 = _slicedToArray(_getOverrides11, 2),
       Button = _getOverrides12[0],
-      ButtonProps = _getOverrides12[1];
-
-  var _useStyletron = useStyletron(),
-      _useStyletron2 = _slicedToArray(_useStyletron, 2),
-      theme = _useStyletron2[1];
-
+      buttonProps = _getOverrides12[1];
+
+  var defaultButtonOverrides = {
+    BaseButton: {
+      style: _objectSpread({
+        textAlign: 'center',
+        pointerEvents: 'none'
+      }, buttonKind === BUTTON_KIND.tertiary ? {
+        marginTop: theme.sizing.scale100,
+        transform: theme.direction === 'rtl' ? "translateX(".concat(theme.sizing.scale500, ")") : "translateX(-".concat(theme.sizing.scale500, ")")
+      } : {
+        marginTop: theme.sizing.scale500
+      })
+    }
+  };
+  buttonProps.overrides = mergeOverrides(defaultButtonOverrides, buttonProps.overrides);
   var backgroundColorType = backgroundColorTypeProp || getBackgroundColorType(backgroundColor);
 
   if (!backgroundColorType) {
@@ -135,34 +149,21 @@ var MessageCard = function MessageCard(_ref2) {
     $backgroundColor: backgroundColor,
     $backgroundColorType: backgroundColorType,
     $imageLayout: layout
-  }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
+  }, rootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
     role: "img",
     "aria-label": ariaLabel,
     $src: src,
     $imageLayout: layout,
     $backgroundPosition: backgroundPosition
-  }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+  }, imageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, headingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, paragraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
     $as: "div",
     kind: buttonKind,
     shape: SHAPE.pill,
     size: SIZE.compact,
     role: "none",
     tabIndex: -1,
-    colors: buttonColors,
-    overrides: {
-      BaseButton: {
-        style: _objectSpread({
-          textAlign: 'center',
-          pointerEvents: 'none'
-        }, buttonKind === BUTTON_KIND.tertiary ? {
-          marginTop: theme.sizing.scale100,
-          transform: theme.direction === 'rtl' ? "translateX(".concat(theme.sizing.scale500, ")") : "translateX(-".concat(theme.sizing.scale500, ")")
-        } : {
-          marginTop: theme.sizing.scale500
-        })
-      }
-    }
-  }, ButtonProps), buttonLabel)));
+    colors: buttonColors
+  }, buttonProps), buttonLabel)));
 };
 
 export default MessageCard;

package/esm/mobile-header/constants.js

@@ -1,6 +1,5 @@
 /*
 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.
 */

package/esm/mobile-header/index.js

@@ -1,6 +1,5 @@
 /*
 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.
 */

package/esm/mobile-header/mobile-header.js

@@ -26,7 +26,6 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 /*
 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.
 */
@@ -134,8 +133,8 @@ export function MobileHeader(_ref2) {
     $expanded: expanded
   }), /*#__PURE__*/React.createElement(NavContainer, _extends({
     $type: type,
-    $hasTextContent: !Boolean(navButton.renderIcon)
-  }, navContainerProps), /*#__PURE__*/React.createElement(HeaderButton, _extends({
+    $hasTextContent: navButton && !Boolean(navButton.renderIcon)
+  }, navContainerProps), navButton && /*#__PURE__*/React.createElement(HeaderButton, _extends({
     onClick: navButton.onClick,
     type: type,
     "aria-label": navButton.label

package/esm/mobile-header/styled-components.js

@@ -8,7 +8,6 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 /*
 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.
 */
@@ -20,7 +19,8 @@ export var StyledRoot = styled('div', function (_ref) {
   return _objectSpread({
     width: '100%',
     display: 'grid',
-    gridTemplateColumns: 'auto 1fr auto'
+    gridTemplateColumns: 'auto 1fr auto',
+    gridTemplateRows: '48px'
   }, $type === TYPE.floating ? {
     backgroundColor: 'transparent',
     pointerEvents: 'none'
@@ -40,7 +40,8 @@ export var StyledNavContainer = styled('div', function (_ref2) {
     paddingLeft: $theme.sizing.scale300
   };
   return _objectSpread({
-    pointerEvents: 'auto'
+    pointerEvents: 'auto',
+    minWidth: '48px'
   }, $hasTextContent && $type === TYPE.fixed ? {} : floatingPadding);
 });
 StyledNavContainer.displayName = "StyledNavContainer";

package/esm/modal/modal-button.js

@@ -14,6 +14,7 @@ import { mergeOverrides } from '../helpers/overrides';
 // ModalButtons should have some margin pre-applied
 var overrides = {
   BaseButton: {
+    // @ts-ignore
     style: function style(_ref) {
       var $theme = _ref.$theme;
       var marginInlineEnd = $theme.direction !== 'rtl' ? 'marginRight' : 'marginLeft';

package/esm/modal/modal.js

@@ -50,7 +50,7 @@ import { LocaleContext } from '../locale';
 import { getOverrides } from '../helpers/overrides';
 import { Layer } from '../layer';
 import { SIZE, ROLE, CLOSE_SOURCE } from './constants';
-import { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose } from './styled-components';
+import { Root as StyledRoot, Dialog as StyledDialog, DialogContainer as StyledDialogContainer, Close as StyledClose, Hidden } from './styled-components';
 import { CloseIcon } from './close-icon';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
@@ -255,10 +255,13 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           role = _this$props.role,
           closeable = _this$props.closeable;
       return {
+        // @ts-ignore
         $animate: animate,
         $isVisible: this.state.isVisible,
         $isOpen: !!isOpen,
+        // @ts-ignore
         $size: size,
+        // @ts-ignore
         $role: role,
         $closeable: !!closeable,
         $isFocusVisible: this.state.isFocusVisible
@@ -285,7 +288,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
     }
   }, {
     key: "renderModal",
-    value: function renderModal() {
+    value: function renderModal(renderedContent) {
       var _this3 = this;
 
       var _this$props2 = this.props,
@@ -322,7 +325,6 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           closeProps = _getOverrides8[1];
 
       var sharedProps = this.getSharedProps();
-      var children = this.getChildren();
       return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(FocusLock, {
           disabled: !focusLock // Allow focus to escape when UI is within an iframe
@@ -331,7 +333,8 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           returnFocus: returnFocus,
           autoFocus: autoFocus
         }, /*#__PURE__*/React.createElement(Root, _extends({
-          "data-baseweb": "modal",
+          "data-baseweb": "modal" // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          ,
           ref: _this3.rootRef
         }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // eslint-disable-next-line @typescript-eslint/no-explicit-any
         , _extends({
@@ -341,7 +344,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
           "aria-modal": true,
           "aria-label": "dialog",
           role: role
-        }, sharedProps, dialogProps), children, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
+        }, sharedProps, dialogProps), renderedContent, closeable ? /*#__PURE__*/React.createElement(Close, _extends({
           "aria-label": locale.modal.close,
           onClick: _this3.onCloseClick
         }, sharedProps, closeProps, {
@@ -353,21 +356,23 @@ var Modal = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      // Only render modal on the browser (portals aren't supported server-side)
-      if (!this.state.mounted) {
-        return null;
-      } // Only render the modal if its isOpen is passed, or isVisible is true (still animating)
-
-
-      if (!this.props.isOpen && !this.state.isVisible) {
+      // Only render an open and non-renderAll modal on the browser (portals aren't supported server-side)
+      var mountedAndOpen = this.state.mounted && (this.props.isOpen || this.state.isVisible);
+      var renderedContent = mountedAndOpen || this.props.renderAll ? this.getChildren() : null;
+
+      if (renderedContent) {
+        if (mountedAndOpen) {
+          return /*#__PURE__*/React.createElement(Layer, {
+            onEscape: this.onEscape,
+            onDocumentClick: this.onDocumentClick,
+            mountNode: this.props.mountNode
+          }, this.renderModal(renderedContent));
+        } else {
+          return /*#__PURE__*/React.createElement(Hidden, null, renderedContent);
+        }
+      } else {
         return null;
       }
-
-      return /*#__PURE__*/React.createElement(Layer, {
-        onEscape: this.onEscape,
-        onDocumentClick: this.onDocumentClick,
-        mountNode: this.props.mountNode
-      }, this.renderModal());
     }
   }]);
 
@@ -384,7 +389,8 @@ _defineProperty(Modal, "defaultProps", {
   isOpen: false,
   overrides: {},
   role: ROLE.dialog,
-  size: SIZE.default
+  size: SIZE.default,
+  renderAll: false
 });
 
 export default Modal;

package/esm/modal/styled-components.js

@@ -16,12 +16,14 @@ import { SIZE, SIZE_WIDTHS } from './constants';
 function getSizeStyles($size) {
   var styles = {
     maxWidth: '100%',
+    // @ts-ignore
     width: null
   };
 
   if (typeof $size === 'number') {
-    styles.width = "".concat($size, "px");
+    styles.width = "".concat($size, "px"); // @ts-ignore
   } else if (SIZE[$size]) {
+    // @ts-ignore
     styles.width = SIZE_WIDTHS[$size];
   } else if (typeof $size === 'string') {
     styles.width = $size;
@@ -192,4 +194,9 @@ export var ModalFooter = styled('div', function (_ref4) {
   });
 });
 ModalFooter.displayName = "ModalFooter";
-ModalFooter.displayName = 'ModalFooter';
+ModalFooter.displayName = 'ModalFooter';
+export var Hidden = styled('div', {
+  display: 'none'
+});
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';

package/esm/page-control/constants.js

@@ -0,0 +1,17 @@
+/*
+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.
+*/
+export var SIZE = Object.freeze({
+  large: 'large',
+  medium: 'medium',
+  small: 'small'
+});
+export var KIND = Object.freeze({
+  default: 'default',
+  backgroundProtection: 'backgroundProtection',
+  inverse: 'inverse',
+  alwaysLight: 'alwaysLight',
+  alwaysDark: 'alwaysDark'
+});

package/esm/page-control/index.js

@@ -0,0 +1,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.
+*/
+export { default as PageControl } from './page-control';
+export * from './styled-components';
+export { KIND } from './constants';
+export * from './types';

package/esm/page-control/page-control.js

@@ -0,0 +1,139 @@
+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); }
+
+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 _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; }
+
+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; }
+
+/*
+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.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides';
+import { StyledRoot, StyledDot } from './styled-components';
+import { SIZE, KIND } from './constants';
+var MAX_DOTS = 5;
+
+var PageControl = function PageControl(_ref) {
+  var currentPage = _ref.currentPage,
+      numPages = _ref.numPages,
+      onPageChange = _ref.onPageChange,
+      _ref$kind = _ref.kind,
+      kind = _ref$kind === void 0 ? KIND.default : _ref$kind,
+      _ref$disabled = _ref.disabled,
+      disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+      ariaLabel = _ref['aria-label'],
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  var _getOverrides = getOverrides(overrides.Root, StyledRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      RootProps = _getOverrides2[1];
+
+  var _getOverrides3 = getOverrides(overrides.Dot, StyledDot),
+      _getOverrides4 = _slicedToArray(_getOverrides3, 2),
+      Dot = _getOverrides4[0],
+      DotProps = _getOverrides4[1];
+
+  var isOverflow = numPages > MAX_DOTS;
+
+  function isActive(page) {
+    return page === currentPage;
+  }
+
+  function isVisible(page) {
+    if (!isOverflow) return true; // if current page is one of first three pages, first five page dots are visible
+
+    if (currentPage <= 3) {
+      return page <= 5;
+    } // if current page is one of last three pages, last five page dots are visible
+
+
+    if (numPages - currentPage < 3) {
+      return page > numPages - 5;
+    } // otherwise, page must be within 2 of the current page for dot to be visible
+
+
+    return page >= currentPage - 2 && page <= currentPage + 2;
+  }
+
+  function getSize(page) {
+    if (!isOverflow) return SIZE.large;
+
+    if (currentPage <= 3) {
+      if (page <= 3) {
+        return SIZE.large;
+      }
+
+      if (page === 4) {
+        return SIZE.medium;
+      }
+
+      return SIZE.small;
+    }
+
+    if (numPages - currentPage < 3) {
+      if (page > numPages - 3) {
+        return SIZE.large;
+      }
+
+      if (page === numPages - 3) {
+        return SIZE.medium;
+      }
+
+      return SIZE.small;
+    }
+
+    if (page >= currentPage - 1 && page <= currentPage + 1) {
+      return SIZE.large;
+    }
+
+    if (page === currentPage - 2 || page === currentPage + 2) {
+      return SIZE.medium;
+    }
+
+    return SIZE.small;
+  }
+
+  var name = React.useId();
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    $kind: kind,
+    role: "radiogroup",
+    "aria-label": ariaLabel || 'page control'
+  }, RootProps), Array.from({
+    length: numPages
+  }, function (_, i) {
+    var page = i + 1;
+    return /*#__PURE__*/React.createElement(Dot, _extends({
+      $active: isActive(page),
+      $kind: kind,
+      $disabled: disabled,
+      $isVisible: isVisible(page),
+      $size: getSize(page),
+      checked: isActive(page),
+      key: page,
+      "aria-label": "page ".concat(page),
+      name: name,
+      onChange: function onChange() {
+        return onPageChange({
+          nextPage: page
+        });
+      },
+      tabIndex: isActive(page) ? 0 : -1,
+      type: "radio"
+    }, DotProps));
+  }));
+};
+
+export default PageControl;