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

package/lib/List/ListItem.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"));
 
@@ -25,6 +25,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,
@@ -92,7 +96,7 @@ const selectDividerStyles = ({
  */
 
 
-const ListItem = ({
+const ListItem = /*#__PURE__*/(0, _react.forwardRef)(({
   tokens,
   variant,
   icon,
@@ -101,7 +105,7 @@ const ListItem = ({
   showDivider,
   children,
   isLastItem
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('List', tokens, variant);
   const itemStyles = selectItemStyles(themeTokens);
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
@@ -133,6 +137,7 @@ const ListItem = ({
     }
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.wrap,
       children: children
     });
   };
@@ -168,10 +173,8 @@ const ListItem = ({
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: [sideItemContainerStyles, areChildrenStrings() ? staticStyles.centeredIcons : undefined],
         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,11 +189,13 @@ 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: {
@@ -198,6 +203,9 @@ const staticStyles = _StyleSheet.default.create({
   },
   centeredIcons: {
     justifyContent: 'center'
+  },
+  wrap: {
+    flex: 1
   }
 });
 

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,27 @@ 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.displayName = 'PageButton';
 PageButton.propTypes = {
+  // Spreading any props into a secondary component accessed like Pagination.PageButton
+  // crashes a Docusaurus props table, but only in production, not in development
+  onPress: _propTypes.default.func,
+  href: _propTypes.default.string,
+  // If the above is fixed, the above can be replaced with this which includes full a11y etc:
+  // ...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.

package/lib/Progress/ProgressBar.js

@@ -5,10 +5,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
@@ -25,6 +27,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 selectBarStyles = ({
   backgroundColor,
   borderRadius,
@@ -35,7 +41,7 @@ const selectBarStyles = ({
   borderRadius,
   outlineWidth,
   outlineColor,
-  width: "".concat(percentage, "%")
+  width: `${percentage}%`
 });
 /**
  * The `ProgressBar` is a visual representation of linear progression.
@@ -73,13 +79,13 @@ const selectBarStyles = ({
  */
 
 
-const ProgressBar = ({
+const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)(({
   children = null,
   percentage = 0,
   tokens,
   variant,
   ...rest
-}) => {
+}, ref) => {
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProgressBar', tokens, variant);
 
   if (percentage < 0) {
@@ -94,19 +100,20 @@ const ProgressBar = ({
       min: 0,
       max: 100,
       now: percentage,
-      text: "".concat(percentage, "%")
+      text: `${percentage}%`
     },
     ..._propTypes2.a11yProps.select(rest)
   };
   return percentage > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...accessibilityProps,
-    children: children !== null && children !== void 0 ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
+    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
       variant: variant
     })
   }) : null;
-};
-
+});
+ProgressBar.displayName = 'ProgressBar';
 ProgressBar.propTypes = {
   /**
    * Optional children that can be used to customize the progress bar filling.
@@ -139,8 +146,12 @@ exports.default = _default;
 const staticStyles = _StyleSheet.default.create({
   bar: {
     height: '100%',
-    outlineStyle: 'solid',
     overflow: 'hidden',
-    position: 'absolute'
+    position: 'absolute',
+    ..._Platform.default.select({
+      web: {
+        outlineStyle: 'solid'
+      }
+    })
   }
 });

package/lib/Progress/ProgressBarBackground.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
 
@@ -17,12 +17,15 @@ var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const inactiveBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E";
-const negativeBackground = "%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E";
+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); }
 
-const ProgressBarBackground = ({
+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 inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
+const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
+const ProgressBarBackground = /*#__PURE__*/(0, _react.forwardRef)(({
   variant
-}) => {
+}, ref) => {
   let source = null;
 
   if (variant !== null && variant !== void 0 && variant.inactive) {
@@ -34,13 +37,14 @@ const ProgressBarBackground = ({
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+    ref: ref,
     source: {
-      uri: "data:image/svg+xml,".concat(source)
+      uri: `data:image/svg+xml,${source}`
     },
     style: staticStyles.imageBackground
   });
-};
-
+});
+ProgressBarBackground.displayName = 'ProgressBarBackground';
 ProgressBarBackground.propTypes = {
   /**
    * Progress bar variant.