baseui 12.1.3 → 13.0.0

package/modal/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Root = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.DialogContainer = exports.Dialog = exports.Close = void 0;
+exports.Root = exports.ModalHeader = exports.ModalFooter = exports.ModalBody = exports.Hidden = exports.DialogContainer = exports.Dialog = exports.Close = void 0;
 
 var _styles = require("../styles");
 
@@ -18,12 +18,14 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 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 (_constants.SIZE[$size]) {
+    // @ts-ignore
     styles.width = _constants.SIZE_WIDTHS[$size];
   } else if (typeof $size === 'string') {
     styles.width = $size;
@@ -201,4 +203,10 @@ var ModalFooter = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.ModalFooter = ModalFooter;
 ModalFooter.displayName = "ModalFooter";
-ModalFooter.displayName = 'ModalFooter';
+ModalFooter.displayName = 'ModalFooter';
+var Hidden = (0, _styles.styled)('div', {
+  display: 'none'
+});
+exports.Hidden = Hidden;
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';

package/modal/styled-components.js.flow

@@ -189,6 +189,10 @@ export const ModalFooter = styled<{}>('div', ({ $theme }) => ({
   textAlign: $theme.direction === 'rtl' ? 'left' : 'right',
 }));
 
+export const Hidden = styled('div', {
+  display: 'none',
+});
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/modal/types.d.ts

@@ -1,18 +1,18 @@
 import type * as React from 'react';
 import type { Override } from '../helpers/overrides';
 import type { SIZE, ROLE, CLOSE_SOURCE } from './constants';
-export declare type Size = keyof typeof SIZE;
-export declare type SizeProp = Size | number | string;
-export declare type Role = keyof typeof ROLE;
-export declare type RoleProp = Role | string;
-export declare type CloseSource = keyof typeof CLOSE_SOURCE;
-export declare type ModalOverrides = {
+export type Size = keyof typeof SIZE;
+export type SizeProp = Size | number | string;
+export type Role = keyof typeof ROLE;
+export type RoleProp = Role | string;
+export type CloseSource = keyof typeof CLOSE_SOURCE;
+export type ModalOverrides = {
     Root?: Override;
     Dialog?: Override;
     DialogContainer?: Override;
     Close?: Override;
 };
-export declare type ModalProps = {
+export type ModalProps = {
     /** Sets whether the Modal should be displayed by easing in and out */
     animate?: boolean;
     /** If true, focus will shift to the first interactive element within the modal.
@@ -51,14 +51,19 @@ export declare type ModalProps = {
     /** Controls the size of the modal (primarily width).
      * Can be a SIZE constant or css width property value. */
     size?: SizeProp;
+    /**
+     * Allows users to render all child content whether a modal is open or not
+     * for SEO purposes
+     */
+    renderAll?: boolean;
 };
-export declare type ModalPropsWithoutChildren = Omit<ModalProps, 'children'>;
-export declare type ModalState = {
+export type ModalPropsWithoutChildren = Omit<ModalProps, 'children'>;
+export type ModalState = {
     isVisible: boolean;
     mounted: boolean;
     isFocusVisible: boolean;
 };
-export declare type SharedStylePropsArg = {
+export type SharedStylePropsArg = {
     $animate: boolean;
     $isVisible: boolean;
     $isOpen: boolean;

package/modal/types.js.flow

@@ -65,6 +65,11 @@ export type ModalPropsT = {
   /** Controls the size of the modal (primarily width).
    * Can be a SIZE constant or css width property value. */
   size: SizePropT,
+  /**
+   * Allows users to render all child content whether a panel is expanded or not
+   * for SEO purposes
+   */
+  renderAll?: boolean;
 };
 
 export type ModalPropsWithoutChildrenT = $Diff<ModalPropsT, { children: ?React.Node }>;

package/overrides.js.flow

@@ -0,0 +1,16 @@
+/*
+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 type { OverrideT, OverridesT } from './helpers/overrides';
+
+export type { OverrideT, OverridesT };
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "12.1.3",
+  "version": "13.0.0",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -92,7 +92,7 @@
     "@svgr/cli": "^4.3.2",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/jest-dom": "^5.16.3",
-    "@testing-library/react": "^12.1.4",
+    "@testing-library/react": "^13.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/babel__code-frame": "^7.0.3",
     "@types/babel__core": "^7.1.19",
@@ -106,8 +106,8 @@
     "@types/lodash": "^4.14.141",
     "@types/node": "^12.6.8",
     "@types/prettier": "^1.18.0",
-    "@types/react": "^17.0.2",
-    "@types/react-dom": "^17.0.2",
+    "@types/react": "^18.0.25",
+    "@types/react-dom": "^18.0.25",
     "@types/react-is": "^17.0.2",
     "@types/react-virtualized": "^9.21.3",
     "@types/react-window": "^1.8.1",
@@ -161,7 +161,7 @@
     "markdownlint-cli": "^0.18.0",
     "mkdirp": "^0.5.1",
     "moment": "^2.24.0",
-    "next": "^10.0.0",
+    "next": "^12.3.1",
     "next-images": "^1.6.2",
     "node-fetch": "^2.6.1",
     "now": "16.5.2",
@@ -173,10 +173,10 @@
     "prism-react-renderer": "^1.0.1",
     "query-string": "^6.14.0",
     "raw-loader": "^3.1.0",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
     "react-codesandboxer": "^3.1.5",
     "react-compare-image": "^2.0.3",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
     "react-hook-form": "^7.9.0",
     "react-icons": "^3.8.0",
     "react-map-gl": "^5.3.19",
@@ -185,7 +185,6 @@
     "react-twitter-embed": "^2.0.8",
     "react-view": "^2.3.3",
     "react-vis": "^1.11.6",
-    "remove-flow-types-loader": "^1.1.0",
     "semver": "^6.2.0",
     "shx": "^0.3.2",
     "static-server": "^2.2.1",
@@ -194,7 +193,7 @@
     "styletron-standard": "^3.1.0-beta.2",
     "tar": "^5.0.0",
     "tsconfig-paths": "^3.9.0",
-    "typescript": "^4.7.2",
+    "typescript": "^5.0.4",
     "universal-cookie": "^4.0.2",
     "webpack": "^4.17.1",
     "webpack-bundle-analyzer": "^3.5.0",
@@ -202,12 +201,14 @@
   },
   "dependencies": {
     "@date-io/date-fns": "^2.6.2",
+    "@next/mdx": "^13.3.1",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.1",
     "card-validator": "^6.2.0",
     "d3": "^6.7.0",
     "date-fns": "^2.6.0",
     "date-fns-tz": "^1.2.2",
+    "file-loader": "^6.2.0",
     "glob": "^7.1.6",
     "just-extend": "^4.0.2",
     "memoize-one": "^5.1.1",
@@ -233,7 +234,7 @@
     "styletron-react": ">=6.1.0 < 7"
   },
   "resolutions": {
-    "@types/react": "^17.0.2",
+    "@types/react": "^18.0.25",
     "@types/jest/jest-diff": "^25.1.0",
     "@types/jest/pretty-format": "^25.1.0"
   },

package/page-control/constants.d.ts

@@ -0,0 +1,12 @@
+export declare const SIZE: Readonly<{
+    readonly large: "large";
+    readonly medium: "medium";
+    readonly small: "small";
+}>;
+export declare const KIND: Readonly<{
+    readonly default: "default";
+    readonly backgroundProtection: "backgroundProtection";
+    readonly inverse: "inverse";
+    readonly alwaysLight: "alwaysLight";
+    readonly alwaysDark: "alwaysDark";
+}>;

package/page-control/constants.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SIZE = exports.KIND = void 0;
+
+/*
+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.
+*/
+var SIZE = Object.freeze({
+  large: 'large',
+  medium: 'medium',
+  small: 'small'
+});
+exports.SIZE = SIZE;
+var KIND = Object.freeze({
+  default: 'default',
+  backgroundProtection: 'backgroundProtection',
+  inverse: 'inverse',
+  alwaysLight: 'alwaysLight',
+  alwaysDark: 'alwaysDark'
+});
+exports.KIND = KIND;

package/page-control/index.d.ts

@@ -0,0 +1,4 @@
+export { default as PageControl } from './page-control';
+export * from './styled-components';
+export { KIND } from './constants';
+export * from './types';

package/page-control/index.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  PageControl: true,
+  KIND: true
+};
+Object.defineProperty(exports, "KIND", {
+  enumerable: true,
+  get: function get() {
+    return _constants.KIND;
+  }
+});
+Object.defineProperty(exports, "PageControl", {
+  enumerable: true,
+  get: function get() {
+    return _pageControl.default;
+  }
+});
+
+var _pageControl = _interopRequireDefault(require("./page-control"));
+
+var _styledComponents = require("./styled-components");
+
+Object.keys(_styledComponents).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _styledComponents[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _styledComponents[key];
+    }
+  });
+});
+
+var _constants = require("./constants");
+
+var _types = require("./types");
+
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _types[key];
+    }
+  });
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/page-control/index.js.flow

@@ -0,0 +1,53 @@
+/*
+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 { OverrideT } from '../helpers/overrides.js';
+import { type StyletronComponent } from 'styletron-react';
+
+declare export var SIZE: {
+  large: 'large',
+  medium: 'medium',
+  small: 'small',
+};
+
+declare export var KIND: {
+  default: 'default',
+  backgroundProtection: 'backgroundProtection',
+  inverse: 'inverse',
+  alwaysLight: 'alwaysLight',
+  alwaysDark: 'alwaysDark',
+};
+
+export type SizeT = $Values<typeof SIZE>;
+export type KindT = $Values<typeof KIND>;
+
+export type PageControlOverridesT = {
+  Root?: OverrideT,
+  Dot?: OverrideT,
+};
+
+export type PageControlPropsT = {
+  currentPage: number,
+  numPages: number,
+  onPageChange: (page: number) => mixed,
+  kind: KindT,
+  disabled?: boolean,
+  'aria-label'?: string,
+  overrides?: PageControlOverridesT,
+};
+
+declare export var StyledRoot: StyletronComponent<'div', { $kind: KindT }>;
+declare export var StyledDot: StyletronComponent<
+  'button',
+  { $kind: KindT, $active: boolean, $size: SizeT, $disabled: boolean, $isVisible: boolean }
+>;
+
+declare export var PageControl: React.ComponentType<PageControlPropsT>;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;

package/page-control/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": false,
+  "module": "../esm/page-control/index.js"
+}

package/page-control/page-control.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { PageControlProps } from './types';
+declare const PageControl: ({ currentPage, numPages, onPageChange, kind, disabled, "aria-label": ariaLabel, overrides, }: PageControlProps) => JSX.Element;
+export default PageControl;

package/page-control/page-control.js

@@ -0,0 +1,151 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _overrides = require("../helpers/overrides");
+
+var _styledComponents = require("./styled-components");
+
+var _constants = require("./constants");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; }
+
+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 ? _constants.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 = (0, _overrides.getOverrides)(overrides.Root, _styledComponents.StyledRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      Root = _getOverrides2[0],
+      RootProps = _getOverrides2[1];
+
+  var _getOverrides3 = (0, _overrides.getOverrides)(overrides.Dot, _styledComponents.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 _constants.SIZE.large;
+
+    if (currentPage <= 3) {
+      if (page <= 3) {
+        return _constants.SIZE.large;
+      }
+
+      if (page === 4) {
+        return _constants.SIZE.medium;
+      }
+
+      return _constants.SIZE.small;
+    }
+
+    if (numPages - currentPage < 3) {
+      if (page > numPages - 3) {
+        return _constants.SIZE.large;
+      }
+
+      if (page === numPages - 3) {
+        return _constants.SIZE.medium;
+      }
+
+      return _constants.SIZE.small;
+    }
+
+    if (page >= currentPage - 1 && page <= currentPage + 1) {
+      return _constants.SIZE.large;
+    }
+
+    if (page === currentPage - 2 || page === currentPage + 2) {
+      return _constants.SIZE.medium;
+    }
+
+    return _constants.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));
+  }));
+};
+
+var _default = PageControl;
+exports.default = _default;

package/page-control/styled-components.d.ts

@@ -0,0 +1,11 @@
+import type { Size, Kind } from './types';
+export declare const StyledRoot: import("styletron-react").StyletronComponent<"div", {
+    $kind: Kind;
+}>;
+export declare const StyledDot: import("styletron-react").StyletronComponent<"input", {
+    $active: boolean;
+    $kind: Kind;
+    $size: Size;
+    $disabled: boolean;
+    $isVisible: boolean;
+}>;

package/page-control/styled-components.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledRoot = exports.StyledDot = void 0;
+
+var _styles = require("../styles");
+
+var _constants = require("./constants");
+
+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; }
+
+var StyledRoot = (0, _styles.styled)('div', function (_ref) {
+  var $kind = _ref.$kind,
+      $theme = _ref.$theme;
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    gap: $theme.sizing.scale300,
+    width: 'fit-content',
+    paddingTop: $theme.sizing.scale100,
+    paddingRight: $theme.sizing.scale500,
+    paddingBottom: $theme.sizing.scale100,
+    paddingLeft: $theme.sizing.scale500,
+    borderRadius: $theme.borders.radius500,
+    backgroundColor: $kind === _constants.KIND.backgroundProtection ? $theme.colors.backgroundPrimary : 'transparent'
+  };
+});
+exports.StyledRoot = StyledRoot;
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+var StyledDot = (0, _styles.styled)('input', function (_ref2) {
+  var _sizes, _colors;
+
+  var $active = _ref2.$active,
+      $kind = _ref2.$kind,
+      $size = _ref2.$size,
+      $disabled = _ref2.$disabled,
+      $isVisible = _ref2.$isVisible,
+      $theme = _ref2.$theme;
+  var sizes = (_sizes = {}, _defineProperty(_sizes, _constants.SIZE.large, {
+    height: $theme.sizing.scale300,
+    width: $theme.sizing.scale300
+  }), _defineProperty(_sizes, _constants.SIZE.medium, {
+    height: $theme.sizing.scale200,
+    width: $theme.sizing.scale200,
+    marginTop: '1px',
+    marginRight: '1px',
+    marginBottom: '1px',
+    marginLeft: '1px'
+  }), _defineProperty(_sizes, _constants.SIZE.small, {
+    height: $theme.sizing.scale100,
+    width: $theme.sizing.scale100,
+    marginTop: $theme.sizing.scale0,
+    marginRight: $theme.sizing.scale0,
+    marginBottom: $theme.sizing.scale0,
+    marginLeft: $theme.sizing.scale0
+  }), _sizes);
+  var colors = (_colors = {}, _defineProperty(_colors, _constants.KIND.default, {
+    active: $theme.colors.contentPrimary,
+    inactive: $theme.colors.backgroundTertiary
+  }), _defineProperty(_colors, _constants.KIND.backgroundProtection, {
+    active: $theme.colors.contentPrimary,
+    inactive: $theme.colors.backgroundTertiary
+  }), _defineProperty(_colors, _constants.KIND.inverse, {
+    active: $theme.colors.contentInversePrimary,
+    inactive: $theme.colors.backgroundInversePrimary
+  }), _defineProperty(_colors, _constants.KIND.alwaysLight, {
+    active: $theme.colors.contentOnColorInverse,
+    inactive: (0, _styles.hexToRgb)($theme.colors.backgroundAlwaysDark, '0.12')
+  }), _defineProperty(_colors, _constants.KIND.alwaysDark, {
+    active: $theme.colors.contentOnColor,
+    inactive: (0, _styles.hexToRgb)($theme.colors.backgroundAlwaysLight, '0.24')
+  }), _colors);
+  return _objectSpread(_objectSpread({
+    // reset default input styles
+    appearance: 'none',
+    margin: 0
+  }, sizes[$size]), {}, {
+    borderRadius: '50%',
+    backgroundColor: $disabled ? $theme.colors.contentStateDisabled : $active ? colors[$kind].active : colors[$kind].inactive
+  }, !$isVisible ? {
+    // https://www.nomensa.com/blog/how-improve-web-accessibility-hiding-elements
+    border: 0,
+    clip: 'rect(1px, 1px, 1px, 1px)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    width: '1px'
+  } : {});
+});
+exports.StyledDot = StyledDot;
+StyledDot.displayName = "StyledDot";
+StyledDot.displayName = 'StyledDot';

package/page-control/types.d.ts

@@ -0,0 +1,19 @@
+import type { Override } from '../helpers/overrides';
+import type { SIZE, KIND } from './constants';
+export type Size = keyof typeof SIZE;
+export type Kind = keyof typeof KIND;
+export type PageControlOverrides = {
+    Root?: Override;
+    Dot?: Override;
+};
+export type PageControlProps = {
+    currentPage: number;
+    numPages: number;
+    onPageChange?: (a: {
+        nextPage: number;
+    }) => unknown;
+    kind?: Kind;
+    disabled?: boolean;
+    'aria-label'?: string;
+    overrides?: PageControlOverrides;
+};