@telus-uds/components-base 3.28.2 → 4.0.0-alpha.0

package/lib/cjs/OrderedList/{Item.js → OrderedListItem.js}

@@ -3,18 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OrderedListItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _ItemBase = _interopRequireDefault(require("./ItemBase"));
+var _tokens = require("../utils/props/tokens");
+var _htmlAttrs = require("../utils/htmlAttrs");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _children = require("../utils/children");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _Typography = require("../Typography/Typography");
+var _OrderedListItemBase = require("./OrderedListItemBase");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_htmlAttrs.htmlAttrs, _viewProps.viewProps]);
 const selectItemTextStyles = (_ref, themeOptions) => {
   let {
     itemFontHeight,
@@ -24,7 +31,7 @@ const selectItemTextStyles = (_ref, themeOptions) => {
     itemColor,
     itemTextColor
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontWeight: itemFontHeight,
     fontSize: itemFontSize,
     fontName: itemFontName,
@@ -49,7 +56,7 @@ const selectItemCounterStyles = _ref2 => {
     color: itemColor || itemTextColor,
     width: itemBulletContainerWidth,
     textAlign: itemBulletTextAlign,
-    ...(0, _ThemeProvider.applyTextStyles)({
+    ...(0, _styles.applyTextStyles)({
       fontWeight: itemFontWeight,
       fontSize: itemFontSize,
       fontName: itemFontName,
@@ -70,7 +77,7 @@ const selectItemContentStyles = (_ref3, isLastChild) => {
     marginBottom: !isLastChild ? interItemMargin : 0
   };
 };
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const OrderedListItem = exports.OrderedListItem = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     index,
@@ -80,7 +87,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     variant,
     ...rest
   } = _ref4;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('OrderedList', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('OrderedList', tokens, variant);
   const headingTokens = title && {
     lineHeight: themeTokens.itemLineHeight,
     fontSize: themeTokens.itemFontSize,
@@ -90,14 +97,14 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   };
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const itemContent = (0, _utils.wrapStringsInText)(children, {
+  } = (0, _useTheme.useTheme)();
+  const itemContent = (0, _children.wrapStringsInText)(children, {
     style: selectItemTextStyles(themeTokens, themeOptions)
   });
-  const itemCounter = (0, _utils.wrapStringsInText)(`${index}.`, {
+  const itemCounter = (0, _children.wrapStringsInText)(`${index}.`, {
     style: selectItemTextStyles(themeTokens, themeOptions)
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ItemBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_OrderedListItemBase.OrderedListItemBase, {
     ref: ref,
     style: {
       ...staticStyles.container,
@@ -110,7 +117,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)],
       children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.Typography, {
           variant: {
             size: 'h4'
           },
@@ -123,7 +130,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     })]
   });
 });
-Item.propTypes = {
+OrderedListItem.propTypes = {
   ...selectedSystemPropTypes,
   /**
    * Item content
@@ -138,20 +145,19 @@ Item.propTypes = {
    */
   isLastChild: _propTypes.default.bool,
   /**
-   * Defines the title of the `OrderedList.Item`
+   * Defines the title of the `OrderedListItem`
    */
   title: _propTypes.default.string,
   /**
    * Item tokens
    */
-  tokens: (0, _utils.getTokensPropType)('OrderedList'),
+  tokens: (0, _tokens.getTokensPropType)('OrderedList'),
   /**
    * Item variant
    */
-  variant: _utils.variantProp.propType
+  variant: _variantProp.variantProp.propType
 };
-Item.displayName = 'OrderedListItem';
-var _default = exports.default = Item;
+OrderedListItem.displayName = 'OrderedListItem';
 const staticStyles = _StyleSheet.default.create({
   container: {
     flex: 1,

package/lib/cjs/OrderedList/{ItemBase.js → OrderedListItemBase.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.OrderedListItemBase = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -18,7 +18,7 @@ const getAccessibilityRole = () => _Platform.default.select({
   android: 'none',
   web: 'listitem'
 });
-const Item = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const OrderedListItemBase = exports.OrderedListItemBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     children,
     style,
@@ -32,7 +32,7 @@ const Item = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children: children
   });
 });
-Item.propTypes = {
+OrderedListItemBase.propTypes = {
   /**
    * Item content
    */
@@ -42,8 +42,7 @@ Item.propTypes = {
    */
   style: _propTypes.default.object
 };
-Item.displayName = 'OrderedListItem';
-var _default = exports.default = Item;
+OrderedListItemBase.displayName = 'OrderedListItemBase';
 const staticStyles = _StyleSheet.default.create({
   container: {
     display: 'flex'

package/lib/cjs/Pagination/Pagination.js

@@ -3,24 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Pagination = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _utils = require("../utils");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _Box = _interopRequireDefault(require("../Box"));
-var _usePagination = _interopRequireDefault(require("./usePagination"));
-var _PageButton = _interopRequireDefault(require("./PageButton"));
-var _SideButton = _interopRequireDefault(require("./SideButton"));
+var _a11yProps = require("../utils/props/a11yProps");
+var _componentPropType = require("../utils/props/componentPropType");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _Box = require("../Box/Box");
+var _usePagination = require("./usePagination");
+var _PaginationPageButton = require("./PaginationPageButton");
+var _SideButton = require("./SideButton");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectTextStyles = (_ref, themeOptions) => {
   let {
     color,
@@ -29,7 +37,7 @@ const selectTextStyles = (_ref, themeOptions) => {
     fontWeight,
     lineHeight
   } = _ref;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     color,
     fontName,
     fontSize,
@@ -38,7 +46,7 @@ const selectTextStyles = (_ref, themeOptions) => {
     themeOptions
   });
 };
-const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Pagination = exports.Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     copy = 'en',
@@ -51,17 +59,17 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     numberOfPagesBeforeEllipsis = 4,
     ...rest
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     truncateAbove,
     gap,
     ...themeTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Pagination', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('Pagination', tokens, variant, {
     viewport
   });
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const {
     borderColor,
     borderWidth,
@@ -86,7 +94,7 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     previousItemProps,
     shouldRenderButton,
     shouldRenderEllipsis
-  } = (0, _usePagination.default)({
+  } = (0, _usePagination.usePagination)({
     items,
     truncateAbove,
     numberOfPagesBeforeEllipsis
@@ -109,7 +117,7 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 
   // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
   // concatenate all items to easily wrap them in identical spacing components
-  const buttons = [showPrevious && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+  const buttons = [showPrevious && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.SideButton, {
     ...previousItemProps,
     direction: "previous",
     copy: copy,
@@ -126,7 +134,7 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       ...itemProps.linkRouterProps
     };
     if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/(0, _react.createElement)(_PageButton.default, {
+      return /*#__PURE__*/(0, _react.createElement)(_PaginationPageButton.PaginationPageButton, {
         ...itemProps,
         LinkRouter: ItemLinkRouter,
         linkRouterProps: itemLinkRouterProps,
@@ -150,7 +158,7 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       }, "...");
     }
     return null;
-  }), showNext && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+  }), showNext && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.SideButton, {
     ...nextItemProps,
     direction: "next",
     copy: copy,
@@ -182,7 +190,7 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         return element !== null;
       }).map(_ref4 => {
         let [element, key] = _ref4;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.Box, {
           right: gap,
           children: element
         }, key);
@@ -191,26 +199,24 @@ const Pagination = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   });
 });
 Pagination.displayName = 'Pagination';
-_PageButton.default.displayName = 'PageButton';
-Pagination.PageButton = _PageButton.default;
 Pagination.propTypes = {
   ...selectedSystemPropTypes,
-  ..._utils.withLinkRouter.propTypes,
-  children: (0, _utils.componentPropType)('PageButton'),
+  ..._withLinkRouter.withLinkRouter.propTypes,
+  children: (0, _componentPropType.componentPropType)('PageButton'),
   /**
    * To change the language for labels
    */
-  copy: _utils.copyPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Pagination'),
+  copy: _copyPropTypes.copyPropTypes,
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('Pagination'),
   /**
    * When passed as `{{ compact: true }}`, `Pagination` does not render labels along side buttons
    */
-  sideButtonVariant: _utils.variantProp.propType,
+  sideButtonVariant: _variantProp.variantProp.propType,
   /**
    * Custom tokens for `PaginationSideButton`
    */
-  sideButtonTokens: (0, _utils.getTokensPropType)('PaginationSideButton'),
+  sideButtonTokens: (0, _tokens.getTokensPropType)('PaginationSideButton'),
   /**
    * The number of pages before the ellipsis is shown
    */
@@ -220,7 +226,7 @@ const staticStyles = _StyleSheet.default.create({
   container: {
     flexDirection: 'row',
     flexWrap: 'wrap',
+    alignContent: 'stretch',
     alignItems: 'center'
   }
-});
-var _default = exports.default = Pagination;
+});

package/lib/cjs/Pagination/PaginationPageButton.js

@@ -0,0 +1,90 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PaginationPageButtonBase = exports.PaginationPageButton = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ButtonBase = require("../Button/ButtonBase");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _tokens = require("../utils/props/tokens");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _linkProps = require("../utils/props/linkProps");
+var _variantProp = require("../utils/props/variantProp");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _useCopy = require("../utils/useCopy");
+var _dictionary = require("./dictionary");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const PaginationPageButtonInner = exports.PaginationPageButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    label,
+    onPress,
+    href,
+    isActive,
+    copy,
+    variant,
+    tokens,
+    ...props
+  } = _ref;
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('PaginationPageButton', tokens, variant);
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
+    copy
+  });
+  const getButtonTokens = buttonState => (0, _tokens.selectTokens)('Button', getTokens(buttonState));
+  const activeProps = isActive ? {
+    selected: true,
+    ..._a11yProps.a11yProps.nonFocusableProps
+    // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
+    // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
+  } : {};
+  const key = isActive ? 'active-item' : undefined;
+  const accessibilityRole = href !== undefined ? 'link' : 'button';
+  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
+  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
+  const {
+    hrefAttrs,
+    rest
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
+  const buttonProps = {
+    accessibilityRole,
+    accessibilityLabel,
+    onPress,
+    href,
+    hrefAttrs,
+    ...rest
+  };
+  return /*#__PURE__*/(0, _react.createElement)(_ButtonBase.ButtonBase, {
+    ref: ref,
+    ...buttonProps,
+    tokens: getButtonTokens,
+    key: key,
+    ...activeProps
+  }, label);
+});
+PaginationPageButtonInner.displayName = 'PaginationPageButton';
+PaginationPageButtonInner.propTypes = {
+  ..._linkProps.linkProps.types,
+  /**
+   * To set custom label for the button
+   */
+  label: _propTypes.default.string,
+  /**
+   * To set `PageButton` to active state
+   */
+  isActive: _propTypes.default.bool,
+  /**
+   * To change the language for labels
+   */
+  copy: _copyPropTypes.copyPropTypes,
+  variant: _variantProp.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('PaginationPageButton')
+};
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+const PaginationPageButton = exports.PaginationPageButton = (0, _withLinkRouter.withLinkRouter)(PaginationPageButtonInner);

package/lib/cjs/Pagination/SideButton.js

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SideButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
-var _Icon = require("../Icon");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _utils = require("../utils");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+var _ButtonBase = require("../Button/ButtonBase");
+var _IconText = require("../Icon/IconText");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _copyPropTypes = require("../utils/props/copyPropTypes");
+var _hrefAttrsProp = require("../utils/props/hrefAttrsProp");
+var _linkProps = require("../utils/props/linkProps");
+var _tokens = require("../utils/props/tokens");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _dictionary = require("./dictionary");
+var _useCopy = require("../utils/useCopy");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // We need to drop the icon here since it gets rendered via children and not
@@ -25,7 +29,7 @@ const selectButtonTokens = _ref => {
     displayLabel: __,
     ...rest
   } = _ref;
-  return (0, _utils.selectTokens)('Button', rest);
+  return (0, _tokens.selectTokens)('Button', rest);
 };
 const selectIconTokens = (_ref2, direction) => {
   let {
@@ -43,7 +47,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const SideButtonInner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     direction = 'previous',
     onPress,
@@ -53,15 +57,15 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     tokens,
     ...props
   } = _ref3;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const buttonVariant = {
     direction,
     viewport,
     ...variant
   };
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationSideButton', tokens, buttonVariant);
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('PaginationSideButton', tokens, buttonVariant);
+  const getCopy = (0, _useCopy.useCopy)({
+    dictionary: _dictionary.dictionary,
     copy
   });
   const {
@@ -76,7 +80,7 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     hrefAttrs,
     rest
-  } = _utils.hrefAttrsProp.bundle(props);
+  } = _hrefAttrsProp.hrefAttrsProp.bundle(props);
   const buttonProps = {
     accessibilityRole,
     accessibilityLabel,
@@ -85,7 +89,7 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
@@ -97,7 +101,7 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconText.IconText, {
         icon: icon,
         space: 1,
         iconPosition: directionToSide[direction],
@@ -110,10 +114,10 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     }
   });
 });
-SideButton.displayName = 'SideButton';
-SideButton.propTypes = {
+SideButtonInner.displayName = 'SideButton';
+SideButtonInner.propTypes = {
   direction: _propTypes.default.oneOf(['previous', 'next']),
-  copy: _utils.copyPropTypes,
-  ..._utils.linkProps.types
+  copy: _copyPropTypes.copyPropTypes,
+  ..._linkProps.linkProps.types
 };
-var _default = exports.default = (0, _utils.withLinkRouter)(SideButton);
+const SideButton = exports.SideButton = (0, _withLinkRouter.withLinkRouter)(SideButtonInner);

package/lib/cjs/Pagination/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     goToLabel: 'Go to page number',
     currentLabel: '(current)',

package/lib/cjs/Pagination/usePagination.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.usePagination = usePagination;
 var _constants = require("./constants");
 /**
  * Handles configurable truncating of pagination items.
@@ -79,5 +79,4 @@ function usePagination(_ref) {
     nextItemProps: getItemProps(activeItemIndex + 1),
     previousItemProps: getItemProps(activeItemIndex - 1)
   };
-}
-var _default = exports.default = usePagination;
+}

package/lib/cjs/Portal/Portal.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Portal = void 0;
 var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -50,7 +50,7 @@ const Portal = _ref => {
   if (!portalContainer || !isWebClient) return null;
   return /*#__PURE__*/_reactDom.default.createPortal(children, portalContainer);
 };
+exports.Portal = Portal;
 Portal.propTypes = {
   children: _propTypes.default.node.isRequired
-};
-var _default = exports.default = Portal;
+};

package/lib/cjs/Portal/Portal.native.js

@@ -3,6 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _portal = require("@gorhom/portal");
-var _default = exports.default = _portal.Portal;
+Object.defineProperty(exports, "Portal", {
+  enumerable: true,
+  get: function () {
+    return _portal.Portal;
+  }
+});
+var _portal = require("@gorhom/portal");