@telus-uds/components-base 0.0.2-prerelease.9 → 1.1.0

package/lib/Link/TextButton.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -19,12 +19,16 @@ var _TextButton$propTypes;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 /**
  * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
  * Link but has the accessibility role of a `Button`. It should be used for actions that
  * take place on the current page, or for navigation within an app.
  */
-const TextButton = ({
+const TextButton = /*#__PURE__*/(0, _react.forwardRef)(({
   onPress,
   children,
   variant,
@@ -33,17 +37,18 @@ const TextButton = ({
   // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
   accessibilityRole = 'button',
   ...linkProps
-}) => {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
     onPress: onPress,
     accessibilityRole: accessibilityRole,
     tokens: getTokens,
+    ref: ref,
     ...linkProps,
     children: children
   });
-};
-
+});
+TextButton.displayName = 'TextButton';
 TextButton.propTypes = { ..._LinkBase.default.propTypes,
   onPress: _propTypes.default.func.isRequired
 }; // Remove incompatible Link prop (if this build includes propTypes)

package/lib/List/List.js

@@ -28,16 +28,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 /**
- * A Unordered List component has a child a ListItem that
+ * An unordered List component has a child a ListItem that
  * allows icon, dividers and customized typography
  */
-const List = ({
+const List = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   showDivider,
   tokens,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const accessibilityRole = _Platform.default.select({
     web: 'list',
     default: 'none'
@@ -59,13 +59,13 @@ const List = ({
   });
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     accessibilityRole: accessibilityRole,
     ...a11y,
     children: items
   });
-};
-
-List.Item = _ListItem.default;
+});
+List.displayName = 'List';
 List.propTypes = { ..._propTypes2.a11yProps.types,
   tokens: (0, _utils.getTokensPropType)('List'),
   variant: _utils.variantProp.propType,

package/lib/List/ListItem.js

@@ -5,14 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -25,6 +23,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 const selectBulletStyles = ({
   itemBulletWidth,
   itemBulletHeight,
@@ -53,6 +55,12 @@ const selectItemIconTokens = ({
   color: itemIconColor
 });
 
+const selectCommonIconStyles = ({
+  iconMarginTop
+}) => ({
+  marginTop: iconMarginTop
+});
+
 const selectSideItemContainerStyles = ({
   listGutter
 }) => ({
@@ -92,7 +100,7 @@ const selectDividerStyles = ({
  */
 
 
-const ListItem = ({
+const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   icon,
@@ -101,7 +109,7 @@ const ListItem = ({
   showDivider,
   children,
   isLastItem
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
   const itemStyles = selectItemStyles(themeTokens);
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
@@ -109,6 +117,7 @@ const ListItem = ({
   const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
   const itemBulletStyles = selectBulletStyles(themeTokens);
   const iconTokens = selectItemIconTokens(themeTokens);
+  const commonIconStyles = selectCommonIconStyles(themeTokens);
   const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
 
   const accessibilityRole = _Platform.default.select({
@@ -116,26 +125,12 @@ const ListItem = ({
     default: 'item'
   });
 
-  const areChildrenStrings = () => {
-    if (Array.isArray(children)) {
-      return children.every(child => typeof child === 'string');
-    }
-
-    return typeof children === 'string';
-  };
-
-  const renderItem = () => {
-    if (areChildrenStrings()) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
-        style: itemStyles,
-        children: children
-      });
-    }
-
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-      children: children
-    });
-  };
+  const renderItem = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.wrap,
+    children: (0, _utils.wrapStringsInText)(children, {
+      style: itemStyles
+    })
+  });
   /**
    * Function responsible returning styling, in case the item is the last shouldn't
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
@@ -166,12 +161,10 @@ const ListItem = ({
 
     if (icon) {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: [sideItemContainerStyles, areChildrenStrings() ? staticStyles.centeredIcons : undefined],
+        style: [sideItemContainerStyles, commonIconStyles],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
-          tokens: { ...iconTokens,
-            size: iconSize || iconTokens.size,
-            color: iconColor || iconTokens.color
-          }
+          size: iconSize || iconTokens.size,
+          color: iconColor || iconTokens.color
         })
       });
     }
@@ -186,18 +179,20 @@ const ListItem = ({
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
     style: [staticStyles.itemContainer, getContainerStyle()],
     accessibilityRole: accessibilityRole,
     children: [renderMarker(), renderItem()]
   });
-};
+});
+ListItem.displayName = 'ListItem';
 
 const staticStyles = _StyleSheet.default.create({
   itemContainer: {
     flexDirection: 'row'
   },
-  centeredIcons: {
-    justifyContent: 'center'
+  wrap: {
+    flex: 1
   }
 });
 

package/lib/List/index.js

@@ -3,11 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ListBase", {
+  enumerable: true,
+  get: function () {
+    return _List.default;
+  }
+});
+Object.defineProperty(exports, "ListItem", {
+  enumerable: true,
+  get: function () {
+    return _ListItem.default;
+  }
+});
 exports.default = void 0;
 
 var _List = _interopRequireDefault(require("./List"));
 
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+_List.default.Item = _ListItem.default;
 var _default = _List.default;
 exports.default = _default;

package/lib/Modal/Modal.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
@@ -33,6 +33,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 const selectContainerStyles = ({
   containerPaddingLeft,
   containerPaddingRight,
@@ -108,7 +112,7 @@ const selectCloseIconProps = ({
  */
 
 
-const Modal = ({
+const Modal = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   isOpen,
   onClose,
@@ -116,7 +120,7 @@ const Modal = ({
   tokens,
   variant,
   copy
-}) => {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
     viewport,
@@ -153,6 +157,7 @@ const Modal = ({
         pointerEvents: "box-none" // don't capture backdrop press events
         ,
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          ref: ref,
           style: [staticStyles.modal, selectModalStyles(themeTokens)],
           onKeyUp: handleKeyUp,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -175,8 +180,8 @@ const Modal = ({
       })]
     })
   });
-};
-
+});
+Modal.displayName = 'Modal';
 Modal.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
   copy: _utils.copyPropTypes,

package/lib/Notification/Notification.js

@@ -77,7 +77,7 @@ const selectDismissButtonContainerStyles = ({
  * - Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
  * - When showing multiple notifications, show them in order of importance from top to bottom
  * - Use variants to visually show the type of message contained within the Notification.
- * The icon and colour will indicate meaning and importance
+ * - The icon and colour will indicate meaning and importance
  *
  * ### Variants
  * - Use `variant.style` to set the visual style of the notification
@@ -118,14 +118,14 @@ const selectDismissButtonContainerStyles = ({
  */
 
 
-const Notification = ({
+const Notification = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   system,
   dismissible,
   copy = 'en',
   tokens,
   variant
-}) => {
+}, ref) => {
   const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
     system
@@ -153,6 +153,7 @@ const Notification = ({
 
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    ref: ref,
     style: [staticStyles.container, selectContainerStyles(themeTokens)],
     children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: selectIconContainerStyles(themeTokens),
@@ -175,12 +176,27 @@ const Notification = ({
       })
     })]
   });
-};
-
+});
+Notification.displayName = 'Notification';
 Notification.propTypes = {
+  /**
+   * Content of the `Notification`.
+   */
   children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
+
+  /**
+   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
+   */
   system: _propTypes.default.bool,
+
+  /**
+   * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
+   */
   dismissible: _propTypes.default.bool,
+
+  /**
+   * Select english or french copy for the accessible label of the dismiss button.
+   */
   copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
     dismiss: _propTypes.default.string
   })]),

package/lib/Pagination/PageButton.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,7 +23,11 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function PageButton({
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
+const PageButton = /*#__PURE__*/(0, _react.forwardRef)(({
   label,
   onPress,
   href,
@@ -32,7 +36,7 @@ function PageButton({
   variant,
   tokens,
   ...props
-}) {
+}, ref) => {
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationPageButton', tokens, variant);
   const getCopy = (0, _useCopy.default)({
     dictionary: _dictionary.default,
@@ -49,8 +53,8 @@ function PageButton({
     key: 'active-item'
   } : {};
   const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const activeLabel = isActive ? " ".concat(getCopy('currentLabel')) : '';
-  const accessibilityLabel = "".concat(getCopy('goToLabel'), " ").concat(label).concat(activeLabel);
+  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
+  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
 
   const {
     hrefAttrs,
@@ -65,20 +69,21 @@ function PageButton({
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...buttonProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    ...buttonProps,
     tokens: getButtonTokens,
     ...activeProps,
     children: label
   });
-}
-
-PageButton.propTypes = {
+});
+PageButton.displayName = 'PageButton';
+PageButton.propTypes = { ..._utils.linkProps.types,
   label: _propTypes.default.string,
   isActive: _propTypes.default.bool,
   copy: _utils.copyPropTypes,
   variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('PaginationPageButton'),
-  ..._utils.linkProps.types
+  tokens: (0, _utils.getTokensPropType)('PaginationPageButton')
 };
 var _default = PageButton;
 exports.default = _default;

package/lib/Pagination/Pagination.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
@@ -31,6 +31,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 const selectTextStyles = ({
   color,
   fontName,
@@ -45,14 +49,14 @@ const selectTextStyles = ({
   lineHeight
 });
 
-function Pagination({
+const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   copy = 'en',
   variant,
   tokens,
   sideButtonVariant,
   sideButtonTokens
-}) {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     truncateAbove,
@@ -91,7 +95,7 @@ function Pagination({
     variant: sideButtonVariant,
     tokens: sideButtonTokens
   }), ...items.map((child, itemIndex) => {
-    const buttonLabel = "".concat(itemIndex + 1);
+    const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
 
     if (shouldRenderButton(itemIndex)) {
@@ -118,14 +122,15 @@ function Pagination({
   })];
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.container,
+    ref: ref,
     children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, "page-".concat(index + 1)]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+    .map((element, index) => [element, `page-${index + 1}`]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
       right: gap,
       children: element
     }, key))
   });
-}
-
+});
+_PageButton.default.displayName = 'PageButton';
 Pagination.PageButton = _PageButton.default;
 Pagination.propTypes = {
   children: (0, _utils.componentPropType)('PageButton'),

package/lib/Pagination/SideButton.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 
@@ -29,6 +29,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 const selectIconTokens = ({
   color,
   iconSize,
@@ -45,8 +49,7 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-
-function SideButton({
+const SideButton = /*#__PURE__*/(0, _react.forwardRef)(({
   direction = 'previous',
   onPress,
   href,
@@ -54,7 +57,7 @@ function SideButton({
   variant,
   tokens,
   ...props
-}) {
+}, ref) => {
   const viewport = (0, _ViewportProvider.useViewport)();
   const buttonVariant = {
     direction,
@@ -92,7 +95,9 @@ function SideButton({
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...buttonProps,
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    ...buttonProps,
     tokens: getButtonTokens,
     children: ({
       textStyles,
@@ -113,8 +118,8 @@ function SideButton({
       });
     }
   });
-}
-
+});
+SideButton.displayName = 'SideButton';
 SideButton.propTypes = {
   direction: _propTypes.default.oneOf(['previous', 'next']),
   copy: _utils.copyPropTypes,

package/lib/Pagination/usePagination.js

@@ -20,7 +20,7 @@ function usePagination({
   );
 
   const getItemProps = index => {
-    var _items$index$props, _items$index;
+    var _items$index;
 
     const {
       onPress,
@@ -28,7 +28,7 @@ function usePagination({
       hrefAttrs,
       variant,
       tokens
-    } = (_items$index$props = (_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) !== null && _items$index$props !== void 0 ? _items$index$props : {};
+    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
     return {
       onPress,
       href,

package/lib/Progress/Progress.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -21,6 +21,10 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+
 const selectProgressStyles = ({
   backgroundColor,
   borderWidth,
@@ -65,20 +69,21 @@ const selectProgressStyles = ({
  */
 
 
-const Progress = ({
+const Progress = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   tokens,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Progress', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: selectProgressStyles(themeTokens),
     ..._propTypes2.a11yProps.select(rest),
     children: children
   });
-};
-
+});
+Progress.displayName = 'Progress';
 Progress.propTypes = {
   /**
    * Use the `children` prop to supply one or several `ProgressBar`s.