@telus-uds/components-base 1.96.0 → 1.97.1

package/lib/ProductCard/ProductCard.js

@@ -1,28 +1,21 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _utils = require("../utils");
-var _Badge = _interopRequireDefault(require("../Badge"));
-var _PriceLockup = _interopRequireDefault(require("../PriceLockup"));
-var _Typography = _interopRequireDefault(require("../Typography"));
-var _Button = require("../Button");
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _Box = _interopRequireDefault(require("../Box"));
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import Image from "react-native-web/dist/exports/Image";
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import defaultDictionary from './dictionary';
+import { selectSystemProps, getTokensPropType, htmlAttrs, viewProps, useInputValue, useCopy, a11yProps } from '../utils';
+import Badge from '../Badge';
+import PriceLockup from '../PriceLockup';
+import Typography from '../Typography';
+import { Button } from '../Button';
+import StackView from '../StackView';
+import Box from '../Box';
+import Icon from '../Icon';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
 const selectProductCardTokens = _ref => {
   let {
     borderStyle,
@@ -41,11 +34,11 @@ const selectProductCardTokens = _ref => {
     paddingVertical
   };
 };
-const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   var _getCopy;
   let {
     copy = 'en',
-    dictionary = _dictionary.default,
+    dictionary = defaultDictionary,
     image = {
       src: '',
       alt: ''
@@ -56,18 +49,18 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     tokens,
     ...rest
   } = _ref2;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProductCard', tokens, {
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('ProductCard', tokens, {
     viewport
   });
-  const getCopy = (0, _utils.useCopy)({
+  const getCopy = useCopy({
     copy,
     dictionary
   });
   const {
     currentValue,
     setValue
-  } = (0, _utils.useInputValue)();
+  } = useInputValue();
   const hasClicked = isSelected || currentValue;
   const handlePress = event => {
     if (cardId) {
@@ -76,17 +69,17 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       setValue(!currentValue, event);
     }
   };
-  const renderButton = hasClicked ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+  const renderButton = hasClicked ? /*#__PURE__*/_jsx(Box, {
     vertical: 1,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: /*#__PURE__*/_jsxs(StackView, {
       space: 2,
       direction: "row",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+      children: [/*#__PURE__*/_jsx(Icon, {
         icon: themeTokens.selectedButtonIcon,
         variant: {
           color: 'success'
         }
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+      }), /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: 'h4'
         },
@@ -96,7 +89,7 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         children: getCopy('selectedButtonLabel')
       })]
     })
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+  }) : /*#__PURE__*/_jsx(Button, {
     onPress: handlePress,
     variant: {
       purpose: 'primary',
@@ -105,13 +98,13 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     },
     children: getCopy('buttonLabel')
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+  return /*#__PURE__*/_jsxs(View, {
     ...selectProps(rest),
     style: [selectProductCardTokens(themeTokens), staticStyles.container],
     ref: ref,
-    children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/_jsx(View, {
       style: staticStyles.imageContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      children: /*#__PURE__*/_jsx(Image, {
         source: image.src,
         style: staticStyles.image,
         alt: image.alt,
@@ -119,24 +112,24 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         resizeMethod: "resize",
         accessibilityIgnoresInvertColors: true
       })
-    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    }) : null, /*#__PURE__*/_jsx(View, {
       style: staticStyles.textContainer,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      children: /*#__PURE__*/_jsx(Box, {
         left: 3,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        children: /*#__PURE__*/_jsxs(StackView, {
           space: 1,
-          children: [getCopy('badgeText') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
+          children: [getCopy('badgeText') ? /*#__PURE__*/_jsx(Badge, {
             variant: {
               outline: true,
               purpose: 'editorial'
             },
             children: getCopy('badgeText')
-          }) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          }) : null, /*#__PURE__*/_jsx(Typography, {
             variant: {
               size: 'h6'
             },
             children: getCopy('brandName')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          }), /*#__PURE__*/_jsx(Typography, {
             variant: {
               size: 'h4',
               colour: 'brand'
@@ -145,24 +138,24 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
               fontWeight: 400
             },
             children: getCopy('productName')
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          }), /*#__PURE__*/_jsxs(StackView, {
             space: 3,
             divider: true,
             direction: "row",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.default, {
+            children: [/*#__PURE__*/_jsx(PriceLockup, {
               ...getCopy('primaryPrice'),
               size: "small",
               ratePosition: "bottom"
-            }), (_getCopy = getCopy('secondaryPrice')) !== null && _getCopy !== void 0 && _getCopy.price ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PriceLockup.default, {
+            }), (_getCopy = getCopy('secondaryPrice')) !== null && _getCopy !== void 0 && _getCopy.price ? /*#__PURE__*/_jsx(PriceLockup, {
               ...getCopy('secondaryPrice'),
               size: "small",
               ratePosition: "bottom"
             }) : null]
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+          }), /*#__PURE__*/_jsx(Box, {
             top: 2,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+            children: /*#__PURE__*/_jsxs(StackView, {
               space: 2,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+              children: [/*#__PURE__*/_jsx(Typography, {
                 variant: {
                   size: 'h6'
                 },
@@ -170,7 +163,7 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
                   fontWeight: 500
                 },
                 children: getCopy('term')
-              }), getCopy('buttonLabel') ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+              }), getCopy('buttonLabel') ? /*#__PURE__*/_jsx(Box, {
                 top: 1,
                 children: renderButton
               }) : null]
@@ -184,39 +177,38 @@ const ProductCard = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 ProductCard.displayName = 'ProductCard';
 
 // If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = _propTypes.default.shape({
-  badgeText: _propTypes.default.string,
-  brandName: _propTypes.default.string.isRequired,
-  productName: _propTypes.default.string.isRequired,
-  primaryPrice: _propTypes.default.object.isRequired,
-  secondaryPrice: _propTypes.default.object,
-  term: _propTypes.default.string.isRequired,
-  buttonLabel: _propTypes.default.string.isRequired,
-  selectedButtonLabel: _propTypes.default.string.isRequired
+const dictionaryContentShape = PropTypes.shape({
+  badgeText: PropTypes.string,
+  brandName: PropTypes.string.isRequired,
+  productName: PropTypes.string.isRequired,
+  primaryPrice: PropTypes.object.isRequired,
+  secondaryPrice: PropTypes.object,
+  term: PropTypes.string.isRequired,
+  buttonLabel: PropTypes.string.isRequired,
+  selectedButtonLabel: PropTypes.string.isRequired
 });
 ProductCard.propTypes = {
   ...selectedSystemPropTypes,
-  image: _propTypes.default.shape({
-    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
-    alt: _propTypes.default.string
+  image: PropTypes.shape({
+    src: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+    alt: PropTypes.string
   }),
   /**
    * Select English or French copy for the place holder labels.
    * You may also pass in a custom dictionary object.
    */
-  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr'])]),
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
   /**
    * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
    */
-  dictionary: _propTypes.default.shape({
+  dictionary: PropTypes.shape({
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
-  tokens: (0, _utils.getTokensPropType)('ProductCard')
+  tokens: getTokensPropType('ProductCard')
 };
-var _default = ProductCard;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default ProductCard;
+const staticStyles = StyleSheet.create({
   container: {
     flexDirection: 'row',
     flex: 1

package/lib/ProductCard/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     badgeText: '',
     brandName: 'Brand name',
@@ -41,5 +35,4 @@ var _default = {
     buttonLabel: 'Sélectionner ce téléphone',
     selectedButtonLabel: 'Téléphone sélectionné'
   }
-};
-exports.default = _default;
+};

package/lib/ProductCard/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ProductCard = _interopRequireDefault(require("./ProductCard"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ProductCard.default;
-exports.default = _default;
+import ProductCard from './ProductCard';
+export default ProductCard;

package/lib/ProductCardGroup/ProductCardGroup.js

@@ -1,25 +1,18 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _utils = require("../utils");
-var _ProductCard = _interopRequireDefault(require("../ProductCard"));
-var _StackView = require("../StackView");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.htmlAttrs, _utils.viewProps, _utils.a11yProps]);
-const ProductCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { selectSystemProps, htmlAttrs, viewProps, a11yProps } from '../utils';
+import ProductCard from '../ProductCard';
+import { StackWrap } from '../StackView';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
+const ProductCardGroup = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     productCards,
     maxSelection = 1,
     ...rest
   } = _ref;
-  const [selectedCardIds, setSelectedCardIds] = _react.default.useState([]);
+  const [selectedCardIds, setSelectedCardIds] = React.useState([]);
   const handleSelect = id => {
     const isAlreadySelected = selectedCardIds.includes(id);
     let updatedSelectedCardIds;
@@ -32,10 +25,10 @@ const ProductCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     }
     setSelectedCardIds(updatedSelectedCardIds);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     ...selectProps(rest),
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    children: /*#__PURE__*/_jsx(StackWrap, {
       direction: {
         xs: 'column',
         lg: 'row'
@@ -43,8 +36,8 @@ const ProductCardGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       space: 4,
       children: productCards.map((cardProperties, index) => {
         const cardId = cardProperties.id || index;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProductCard.default, {
+        return /*#__PURE__*/_jsx(View, {
+          children: /*#__PURE__*/_jsx(ProductCard, {
             cardId: cardId,
             isSelected: selectedCardIds.includes(cardId),
             onSelect: handleSelect,
@@ -62,17 +55,16 @@ ProductCardGroup.propTypes = {
    * The maximum number of ProductCards a user may select at once. Defaults to 1.
    * To have no limit and allow any number of selections, pass `null`.
    */
-  maxSelection: _propTypes.default.number,
+  maxSelection: PropTypes.number,
   /**
    * Props to be passed to the `ProductCard` component.
    * id is required for each card.
    * You may also pass in a custom dictionary object.
    */
-  productCards: _propTypes.default.arrayOf(_propTypes.default.shape({
-    id: _propTypes.default.string.isRequired,
-    image: _propTypes.default.object,
-    dictionary: _propTypes.default.object
+  productCards: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    image: PropTypes.object,
+    dictionary: PropTypes.object
   })).isRequired
 };
-var _default = ProductCardGroup;
-exports.default = _default;
+export default ProductCardGroup;

package/lib/ProductCardGroup/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _ProductCardGroup = _interopRequireDefault(require("./ProductCardGroup"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _ProductCardGroup.default;
-exports.default = _default;
+import ProductCardGroup from './ProductCardGroup';
+export default ProductCardGroup;

package/lib/Progress/Progress.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectProgressStyles = _ref => {
   let {
     backgroundColor,
@@ -27,7 +20,7 @@ const selectProgressStyles = _ref => {
     borderColor,
     borderRadius,
     height,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...applyShadowToken(shadow)
   };
 };
 
@@ -61,15 +54,15 @@ const selectProgressStyles = _ref => {
  * role.
  *
  */
-const Progress = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     tokens,
     variant,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Progress', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  const themeTokens = useThemeTokens('Progress', tokens, variant);
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: selectProgressStyles(themeTokens),
     ...selectProps(rest),
@@ -82,15 +75,14 @@ Progress.propTypes = {
   /**
    * Use the `children` prop to supply one or several `ProgressBar`s.
    */
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * Progress tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Progress'),
+  tokens: getTokensPropType('Progress'),
   /**
    * Progress variant.
    */
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = Progress;
-exports.default = _default;
+export default Progress;

package/lib/Progress/ProgressBar.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(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"));
-var _ProgressBarBackground = _interopRequireDefault(require("./ProgressBarBackground"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+import React from 'react';
+import PropTypes from 'prop-types';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import ProgressBarBackground from './ProgressBarBackground';
+import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const selectBarStyles = (_ref, percentage) => {
   let {
     backgroundColor,
@@ -28,7 +21,7 @@ const selectBarStyles = (_ref, percentage) => {
     borderRadius,
     outlineWidth,
     outlineColor,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...applyShadowToken(shadow),
     width: `${percentage}%`
   };
 };
@@ -68,7 +61,7 @@ const selectBarStyles = (_ref, percentage) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children = null,
     percentage = 0,
@@ -76,7 +69,7 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     variant,
     ...rest
   } = _ref2;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProgressBar', tokens, variant);
+  const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
   if (percentage < 0) {
     throw new Error('ProgressBar: `percentage` must be a positive number');
   } else if (percentage > 100) {
@@ -92,11 +85,11 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     },
     ...rest
   });
-  return percentage > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return percentage > 0 ? /*#__PURE__*/_jsx(View, {
     ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...selectedProps,
-    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
+    children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
       variant: variant
     })
   }) : null;
@@ -107,32 +100,31 @@ ProgressBar.propTypes = {
   /**
    * Optional children that can be used to customize the progress bar filling.
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * Accessibility label for the progress bar.
    */
-  accessibilityLabel: _propTypes.default.string.isRequired,
+  accessibilityLabel: PropTypes.string.isRequired,
   /**
    * Percentage of completion.
    */
-  percentage: _propTypes.default.number,
+  percentage: PropTypes.number,
   /**
    * Progress bar tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('ProgressBar'),
+  tokens: getTokensPropType('ProgressBar'),
   /**
    * Progress bar variant.
    */
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = ProgressBar;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default ProgressBar;
+const staticStyles = StyleSheet.create({
   bar: {
     height: '100%',
     overflow: 'hidden',
     position: 'absolute',
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         outlineStyle: 'solid'
       }

package/lib/Progress/ProgressBarBackground.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { variantProp } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='inactive' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='rgba(0, 0, 0, 0.4)' stroke='rgba(0, 0, 0, 0.4)' 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("%23inactive");'%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='negative' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='rgba(255, 255, 255, 0)'%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='1' shape-rendering='auto' stroke='rgba(255, 255, 255, 0.4)' 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("%23negative");'%3E%3C/path%3E%3C/svg%3E`;
-const ProgressBarBackground = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ProgressBarBackground = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;
@@ -24,7 +17,7 @@ const ProgressBarBackground = /*#__PURE__*/_react.default.forwardRef((_ref, ref)
   } else {
     return null;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+  return /*#__PURE__*/_jsx(ImageBackground, {
     ref: ref,
     source: {
       uri: `data:image/svg+xml,${source}`
@@ -37,11 +30,10 @@ ProgressBarBackground.propTypes = {
   /**
    * Progress bar variant.
    */
-  variant: _utils.variantProp.propType
+  variant: variantProp.propType
 };
-var _default = ProgressBarBackground;
-exports.default = _default;
-const staticStyles = _StyleSheet.default.create({
+export default ProgressBarBackground;
+const staticStyles = StyleSheet.create({
   imageBackground: {
     height: '100%'
   }

package/lib/Progress/index.js

@@ -1,12 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Progress = _interopRequireDefault(require("./Progress"));
-var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-_Progress.default.Bar = _ProgressBar.default;
-var _default = _Progress.default;
-exports.default = _default;
+import Progress from './Progress';
+import ProgressBar from './ProgressBar';
+Progress.Bar = ProgressBar;
+export default Progress;