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

package/lib/cjs/Progress/ProgressBar.js

@@ -3,20 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ProgressBar = 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 _ProgressBarBackground = require("./ProgressBarBackground");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+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 _constants = require("./constants");
-var _ProgressContext = _interopRequireDefault(require("./ProgressContext"));
+var _ProgressContext = require("./ProgressContext");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectBarStyles = _ref => {
   let {
     themeTokens,
@@ -36,7 +41,7 @@ const selectBarStyles = _ref => {
     borderRadius,
     outlineWidth,
     outlineColor,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...(0, _styles.applyShadowToken)(shadow),
     width: `${calculatedPercentage}%`,
     left: `${barPosition}%`,
     ...(layers ? {
@@ -80,7 +85,7 @@ const selectBarStyles = _ref => {
  * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
  *
  */
-const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const ProgressBar = exports.ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children = null,
     percentage = 0,
@@ -94,7 +99,7 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   } = _ref2;
   const {
     layers
-  } = _react.default.useContext(_ProgressContext.default);
+  } = _react.default.useContext(_ProgressContext.ProgressContext);
   const {
     items,
     current
@@ -109,7 +114,7 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       barPosition = calculatedPercentage * (items - 1);
     }
   }
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ProgressBar', tokens, variant);
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('ProgressBar', tokens, variant);
   if (percentage < _constants.MIN_PERCENT_VALUE) {
     throw new Error('ProgressBar: `percentage` must be a positive number');
   } else if (percentage > _constants.MAX_PERCENT_VALUE) {
@@ -134,7 +139,7 @@ const ProgressBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
       layers
     })],
     ...selectedProps,
-    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
+    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.ProgressBarBackground, {
       variant: variant
     })
   }) : null;
@@ -157,11 +162,11 @@ ProgressBar.propTypes = {
   /**
    * Progress bar tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('ProgressBar'),
+  tokens: (0, _tokens.getTokensPropType)('ProgressBar'),
   /**
    * Progress bar variant.
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Using the offset object, the `items` will determine the total number of items.
    * The `current` will determine the current position of the progress bar.
@@ -171,7 +176,6 @@ ProgressBar.propTypes = {
     current: _propTypes.default.number
   })
 };
-var _default = exports.default = ProgressBar;
 const staticStyles = _StyleSheet.default.create({
   bar: {
     height: '100%',

package/lib/cjs/Progress/ProgressBarBackground.js

@@ -3,17 +3,17 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ProgressBarBackground = 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 _constants = require("./constants");
-var _utils = require("../utils");
+var _variantProp = require("../utils/props/variantProp");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 = exports.ProgressBarBackground = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     variant
   } = _ref;
@@ -39,9 +39,8 @@ ProgressBarBackground.propTypes = {
   /**
    * Progress bar variant.
    */
-  variant: _utils.variantProp.propType
+  variant: _variantProp.variantProp.propType
 };
-var _default = exports.default = ProgressBarBackground;
 const staticStyles = _StyleSheet.default.create({
   imageBackground: {
     height: '100%'

package/lib/cjs/Progress/ProgressContext.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ProgressContext = void 0;
 var _react = require("react");
-const ProgressContext = /*#__PURE__*/(0, _react.createContext)({
+const ProgressContext = exports.ProgressContext = /*#__PURE__*/(0, _react.createContext)({
   layers: false
-});
-var _default = exports.default = ProgressContext;
+});

package/lib/cjs/QuickLinks/QuickLinks.js

@@ -3,15 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.QuickLinks = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
-var _utils = require("../utils");
-var _List = _interopRequireDefault(require("../List"));
-var _StackWrap = _interopRequireDefault(require("../StackView/StackWrap"));
-var _QuickLinksCard = _interopRequireDefault(require("./QuickLinksCard"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _List = require("../List/List");
+var _StackWrap = require("../StackView/StackWrap");
+var _QuickLinksCard = require("./QuickLinksCard");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -19,7 +20,8 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *  - If the theme returns `list` token as true, it renders an ordered list based on List
  *  - If the theme returns `button` token as true and `list` as false, it renders a wrapping horizontal bar of buttons
  *  - If the theme returns `card` token as true, it wraps the above with a `Card`.
- */const QuickLinks = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const QuickLinks = exports.QuickLinks = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -29,7 +31,7 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     tag = 'ul',
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     dividers,
     list,
@@ -37,17 +39,17 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     stackSpace,
     stackGap,
     stackJustify
-  } = (0, _ThemeProvider.useThemeTokens)('QuickLinks', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('QuickLinks', tokens, variant, {
     viewport
   });
-  const content = list && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.default, {
+  const content = list && /*#__PURE__*/(0, _jsxRuntime.jsx)(_List.List, {
     ref: ref,
     tokens: listTokens,
     showDivider: dividers,
     tag: tag,
     ...rest,
     children: children
-  }) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.default, {
+  }) || /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.StackWrap, {
     space: stackSpace,
     gap: stackGap,
     tokens: {
@@ -57,27 +59,26 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
     ...rest,
     children: children
   });
-  return card ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuickLinksCard.default, {
+  return card ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuickLinksCard.QuickLinksCard, {
     tokens: cardTokens,
     children: content
   }) : content;
 });
 QuickLinks.displayName = 'QuickLinks';
 QuickLinks.propTypes = {
-  tokens: (0, _utils.getTokensPropType)('QuickLinks'),
+  tokens: (0, _tokens.getTokensPropType)('QuickLinks'),
   /**
    * Custom tokens override for `Card`
    */
-  cardTokens: (0, _utils.getTokensPropType)('Card'),
+  cardTokens: (0, _tokens.getTokensPropType)('Card'),
   /**
    * Custom tokens override for `QuickLinksList`
    */
-  listTokens: (0, _utils.getTokensPropType)('QuickLinksList'),
+  listTokens: (0, _tokens.getTokensPropType)('QuickLinksList'),
   /**
    * The HTML tag to render the list as
    */
   tag: _propTypes.default.string,
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   children: _propTypes.default.node
-};
-var _default = exports.default = QuickLinks;
+};

package/lib/cjs/QuickLinks/QuickLinksCard.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.QuickLinksCard = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _CardBase = _interopRequireDefault(require("../Card/CardBase"));
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _CardBase = require("../Card/CardBase");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
@@ -16,23 +17,23 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
  *
  * Restyled Card with identical behaviour to Card, but themed according to the
  * QuickLinksCard theme rather than the Card theme.
- */const QuickLinksList = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const QuickLinksCard = exports.QuickLinksCard = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
     children
   } = _ref;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('QuickLinksCard', tokens, variant);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.default, {
+  const themeTokens = (0, _useThemeTokens.useThemeTokens)('QuickLinksCard', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CardBase.CardBase, {
     tokens: themeTokens,
     ref: ref,
     children: children
   });
 });
-QuickLinksList.displayName = 'QuickLinksList';
-QuickLinksList.propTypes = {
-  tokens: (0, _utils.getTokensPropType)('QuickLinksCard'),
-  variant: _utils.variantProp.propType,
+QuickLinksCard.displayName = 'QuickLinksCard';
+QuickLinksCard.propTypes = {
+  tokens: (0, _tokens.getTokensPropType)('QuickLinksCard'),
+  variant: _variantProp.variantProp.propType,
   children: _propTypes.default.node
-};
-var _default = exports.default = QuickLinksList;
+};

package/lib/cjs/QuickLinks/QuickLinksItem.js

@@ -3,54 +3,59 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.QuickLinksItemBase = exports.QuickLinksItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _PressableListItemBase = _interopRequireDefault(require("../List/PressableListItemBase"));
-var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _PressableListItemBase = require("../List/PressableListItemBase");
+var _ButtonBase = require("../Button/ButtonBase");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
- * Public component exported as QuickLinks.Item, for use as children of QuickLinks.
+ * Public component exported as QuickLinksItem, for use as children of QuickLinks.
  *
  * Receives props injected by QuickLinks and renders the appropriate child component.
- */const QuickLinksItem = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */const QuickLinksItemBase = exports.QuickLinksItemBase = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
     children,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     list
-  } = (0, _ThemeProvider.useThemeTokens)('QuickLinks', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('QuickLinks', tokens, variant, {
     viewport
   });
   const themeName = list ? 'QuickLinksList' : 'QuickLinksButton';
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)(themeName, tokens, variant);
-  return list ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableListItemBase.default, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)(themeName, tokens, variant);
+  return list ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PressableListItemBase.PressableListItemBase, {
     ref: ref,
     tokens: getTokens,
     ...rest,
     children: children
-  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+  }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.ButtonBase, {
     ref: ref,
     tokens: getTokens,
     ...rest,
     children: children
   });
 });
-QuickLinksItem.displayName = 'QuickLinksItem';
-QuickLinksItem.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
-  ..._PressableListItemBase.default.propTypes,
-  ..._ButtonBase.default.propTypes,
-  tokens: (0, _utils.getTokensPropType)('QuickLinksList', 'QuickLinksButton'),
-  variant: _utils.variantProp.propType,
+QuickLinksItemBase.displayName = 'QuickLinksItem';
+QuickLinksItemBase.propTypes = {
+  ..._withLinkRouter.withLinkRouter.propTypes,
+  ..._PressableListItemBase.PressableListItemBase.propTypes,
+  ..._ButtonBase.ButtonBase.propTypes,
+  tokens: (0, _tokens.getTokensPropType)('QuickLinksList', 'QuickLinksButton'),
+  variant: _variantProp.variantProp.propType,
   children: _propTypes.default.node
 };
-var _default = exports.default = (0, _utils.withLinkRouter)(QuickLinksItem);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+const QuickLinksItem = exports.QuickLinksItem = (0, _withLinkRouter.withLinkRouter)(QuickLinksItemBase);

package/lib/cjs/QuickLinksFeature/QuickLinksFeature.js

@@ -3,17 +3,21 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.QuickLinksFeature = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _StackView = require("../StackView");
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _StackWrap = require("../StackView/StackWrap");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+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 _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // pass through and type relevant system props - add more sets for interactive components
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const isQuickListItem = element => {
   const elementName = element?.type?.displayName || element?.type?.name;
   return Boolean(elementName.match(/QuickLinksFeatureItem/));
@@ -21,9 +25,9 @@ const isQuickListItem = element => {
 
 /**
  * QuickLinksFeature renders a list of interactive items.
- *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
+ *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeatureItem`
  */
-const QuickLinksFeature = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const QuickLinksFeature = exports.QuickLinksFeature = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     variant,
@@ -31,12 +35,12 @@ const QuickLinksFeature = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     children,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     stackGap,
     stackJustify,
     stackSpace
-  } = (0, _ThemeProvider.useThemeTokens)('QuickLinksFeature', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('QuickLinksFeature', tokens, variant, {
     viewport
   });
   const items = _react.default.Children.map(children, child => {
@@ -45,7 +49,7 @@ const QuickLinksFeature = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
     }
     return null;
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.StackWrap, {
     space: stackSpace,
     gap: stackGap,
     tokens: {
@@ -60,15 +64,14 @@ const QuickLinksFeature = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 QuickLinksFeature.displayName = 'QuickLinksFeature';
 QuickLinksFeature.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('QuickLinksFeature'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('QuickLinksFeature'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Default wrapper tag, by default it's "ul"
    */
   tag: _propTypes.default.string,
   /**
-   * QuickLinksFeature.Item component
+   * QuickLinksFeatureItem component
    */
   children: _propTypes.default.node
-};
-var _default = exports.default = QuickLinksFeature;
+};

package/lib/cjs/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -3,22 +3,28 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.QuickLinksFeatureItemBase = exports.QuickLinksFeatureItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _utils = require("../utils");
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _Link = require("../Link");
-var _StackView = require("../StackView");
+var _tokens = require("../utils/props/tokens");
+var _variantProp = require("../utils/props/variantProp");
+var _withLinkRouter = require("../utils/withLinkRouter");
+var _a11yProps = require("../utils/props/a11yProps");
+var _linkProps = require("../utils/props/linkProps");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _useViewport = require("../ViewportProvider/useViewport");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _Link = require("../Link/Link");
+var _StackWrap = require("../StackView/StackWrap");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 // pass through and type relevant system props - add more sets for interactive components
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _linkProps.linkProps]);
 const selectImageStyle = imageDimension => ({
   width: imageDimension,
   height: imageDimension,
@@ -61,7 +67,7 @@ const selectLinkToken = _ref2 => {
  *
  * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
  */
-const QuickLinksFeatureItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const QuickLinksFeatureItemBase = exports.QuickLinksFeatureItemBase = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -70,8 +76,8 @@ const QuickLinksFeatureItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref
     imageSource,
     ...rest
   } = _ref3;
-  const viewport = (0, _ViewportProvider.useViewport)();
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('QuickLinksFeatureItem', tokens, variant);
+  const viewport = (0, _useViewport.useViewport)();
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('QuickLinksFeatureItem', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
     ref: ref,
     ...selectProps(rest),
@@ -98,7 +104,7 @@ const QuickLinksFeatureItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref
         focus
       });
       const textStyle = {
-        ...(0, _ThemeProvider.applyTextStyles)(themeTokens),
+        ...(0, _styles.applyTextStyles)(themeTokens),
         textDecorationLine: textLine
       };
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
@@ -106,7 +112,7 @@ const QuickLinksFeatureItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref
           ...themeTokens,
           contentMaxDimension
         }),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.StackWrap, {
           direction: contentDirection,
           space: contentSpace,
           gap: gap,
@@ -130,12 +136,12 @@ const QuickLinksFeatureItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref
     }
   });
 });
-QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
-QuickLinksFeatureItem.propTypes = {
-  ..._utils.withLinkRouter.propTypes,
+QuickLinksFeatureItemBase.displayName = 'QuickLinksFeatureItem';
+QuickLinksFeatureItemBase.propTypes = {
+  ..._withLinkRouter.withLinkRouter.propTypes,
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('QuickLinksFeatureItem'),
-  variant: _utils.variantProp.propType,
+  tokens: (0, _tokens.getTokensPropType)('QuickLinksFeatureItem'),
+  variant: _variantProp.variantProp.propType,
   /**
    * Text which will be rendered within the Link
    */
@@ -149,4 +155,7 @@ QuickLinksFeatureItem.propTypes = {
    */
   imageSource: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
 };
-var _default = exports.default = (0, _utils.withLinkRouter)(QuickLinksFeatureItem);
+
+// Export unwrapped component for react-docgen to extract info for docsite
+
+const QuickLinksFeatureItem = exports.QuickLinksFeatureItem = (0, _withLinkRouter.withLinkRouter)(QuickLinksFeatureItemBase);