@telus-uds/components-base 1.19.0 → 1.19.1

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -0,0 +1,314 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = require("../Button");
+
+var _Checkbox = require("../Checkbox");
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _Link = require("../Link");
+
+var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
+
+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 {
+  Col,
+  Row
+} = _FlexGrid.default;
+
+const selectSubTitleTokens = _ref => {
+  let {
+    subtitleColor
+  } = _ref;
+  return {
+    color: subtitleColor
+  };
+};
+
+const selectDividerToknes = _ref2 => {
+  let {
+    dividerColor,
+    width,
+    decorative = true,
+    weight = 'thin'
+  } = _ref2;
+  return {
+    color: dividerColor,
+    width,
+    decorative,
+    weight
+  };
+};
+
+const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    label,
+    subtitle,
+    id = label,
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues,
+    onChange,
+    copy = 'en',
+    readOnly = false,
+    inactive = false,
+    rowLimit = 12,
+    ...rest
+  } = _ref3;
+  const {
+    currentValues,
+    setValues
+  } = (0, _utils.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonDropdown', tokens, variant);
+  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
+
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
+
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [checkedIds, setCheckedIds] = (0, _react.useState)(currentValues ?? []);
+  const colSize = items.length > rowLimit ? 2 : 1;
+  const isSelected = currentValues.length > 0;
+  const uniqueFields = ['id', 'label'];
+
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error(`MultiSelectFilter items must have unique ${uniqueFields.join(', ')}`);
+  } // Pass an object of relevant component state as first argument for any passed-in press handlers
+
+
+  const pressHandlers = (0, _utils.getPressHandlersWithArgs)(rest, [{
+    id,
+    label,
+    currentValues
+  }]);
+
+  const handleChange = event => {
+    if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
+    setIsOpen(!isOpen);
+  };
+
+  const onApply = e => {
+    setValues(e);
+    setIsOpen(false);
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
+      variant: {
+        width: colSize > 1 ? 'size576' : 's'
+      },
+      onClose: () => setIsOpen(false),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+          variant: {
+            size: 'h4'
+          },
+          children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
+        })
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+          space: 5
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: {
+              size: 'h5'
+            },
+            tokens: selectSubTitleTokens(themeTokens),
+            children: subtitle
+          })
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+        scroll: true,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+          distribute: "between",
+          children: [...Array(colSize).keys()].map(i => /*#__PURE__*/(0, _jsxRuntime.jsxs)(Col, {
+            xs: 12 / colSize,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.CheckboxGroup, {
+              items: items.slice(i * rowLimit, (i + 1) * rowLimit),
+              checkedIds: checkedIds,
+              onChange: e => setCheckedIds(e, i)
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+              size: 4
+            })]
+          }, i))
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+        variant: selectDividerToknes({ ...themeTokens,
+          width: 'full'
+        }),
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          direction: "row",
+          space: 3,
+          tokens: {
+            alignItems: 'center'
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
+            onPress: () => onApply(checkedIds),
+            variant: {
+              size: 'small',
+              priority: 'high'
+            },
+            children: getCopy('applyButtonLabel')
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
+              onPress: () => setCheckedIds([]),
+              children: getCopy('clearButtonLabel')
+            })
+          })]
+        })
+      })]
+    })]
+  });
+});
+MultiSelectFilter.displayName = 'MultiSelectFilter';
+MultiSelectFilter.propTypes = {
+  /**
+   * The text displayed to the user in a ButtonDropdown.
+   */
+  label: _propTypes.default.string.isRequired,
+
+  /**
+   * The text for the subtitle
+   */
+  subtitle: _propTypes.default.string,
+
+  /**
+   * An optional unique string may be provided to identify the ButtonDropdown.
+   * If not provided, the label is used.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Sets the variant for ButtonDropdown element.
+   */
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Sets the tokens for ButtonDropdown element.
+   */
+  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+
+  /**
+   * The options a user may select.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    /**
+     * The text displayed to the user with a checkbox, describing this option.
+     */
+    label: _propTypes.default.string.isRequired,
+
+    /**
+     * An optional unique string may be provided to identify this option.
+     * If not provided, the label is used.
+     */
+    id: _propTypes.default.string
+  })),
+
+  /**
+   * If the selected item(s) in the checkbox group(s) are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the MultiSelectFilter a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * If `values` is not passed, making the MultiSelectFilter an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * If provided, sets a maximum number of items a user may select at once.
+   */
+  maxValues: _propTypes.default.number,
+
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * Select English or French copy for the accessible label.
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
+  /**
+   * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
+   */
+  readOnly: _propTypes.default.string,
+
+  /**
+   * If true, the MultiSelectFilter cannot be interacted with, ButtonDropdown is
+   * set as `disabled` and if the theme supports `inactive` appearances rules, these
+   * are applied.
+   */
+  inactive: _propTypes.default.string,
+
+  /**
+   * Sets the maximum number of items in one column. If number of items are more
+   * than the `rowLimit`, they will be rendered in 2 columns.
+   */
+  rowLimit: _propTypes.default.number
+};
+var _default = MultiSelectFilter;
+exports.default = _default;

package/lib/MultiSelectFilter/dictionary.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    filterByLabel: 'Filter by %{filterCategory}:',
+    applyButtonLabel: 'Apply',
+    clearButtonLabel: 'Clear'
+  },
+  fr: {
+    filterByLabel: 'Filtrer par %{filterCategory}:',
+    applyButtonLabel: 'Appliquer',
+    clearButtonLabel: 'Effacer'
+  }
+};
+exports.default = _default;

package/lib/MultiSelectFilter/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _MultiSelectFilter = _interopRequireDefault(require("./MultiSelectFilter"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _MultiSelectFilter.default;
+exports.default = _default;

package/lib/Pagination/PageButton.js

@@ -54,8 +54,8 @@ const PageButton = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     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,

package/lib/Pagination/Pagination.js

@@ -110,11 +110,9 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     LinkRouter: LinkRouter,
     linkRouterProps: linkRouterProps
   }), ...items.map((_child, itemIndex) => {
-    var _itemProps$LinkRouter;
-
-    const buttonLabel = "".concat(itemIndex + 1);
+    const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
-    const ItemLinkRouter = (_itemProps$LinkRouter = itemProps.LinkRouter) !== null && _itemProps$LinkRouter !== void 0 ? _itemProps$LinkRouter : LinkRouter;
+    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
     const itemLinkRouterProps = { ...linkRouterProps,
       ...itemProps.linkRouterProps
     };
@@ -151,7 +149,7 @@ const Pagination = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     ...selectProps(rest),
     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(_ref3 => {
+    .map((element, index) => [element, `page-${index + 1}`]).filter(_ref3 => {
       let [element] = _ref3;
       return element !== null;
     }).map(_ref4 => {

package/lib/Pagination/usePagination.js

@@ -21,7 +21,7 @@ function usePagination(_ref) {
   );
 
   const getItemProps = index => {
-    var _items$index$props, _items$index;
+    var _items$index;
 
     const {
       onPress,
@@ -29,7 +29,7 @@ function usePagination(_ref) {
       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/ProgressBar.js

@@ -43,7 +43,7 @@ const selectBarStyles = (_ref, percentage) => {
     borderRadius,
     outlineWidth,
     outlineColor,
-    width: "".concat(percentage, "%")
+    width: `${percentage}%`
   };
 };
 /**
@@ -104,7 +104,7 @@ const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
       min: 0,
       max: 100,
       now: percentage,
-      text: "".concat(percentage, "%")
+      text: `${percentage}%`
     },
     ...rest
   });
@@ -112,7 +112,7 @@ const ProgressBar = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...selectedProps,
-    children: children !== null && children !== void 0 ? children : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
+    children: children ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProgressBarBackground.default, {
       variant: variant
     })
   }) : null;

package/lib/Progress/ProgressBarBackground.js

@@ -21,8 +21,8 @@ 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; }
 
-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 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)((_ref, ref) => {
   let {
     variant
@@ -40,7 +40,7 @@ const ProgressBarBackground = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) =>
   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
   });

package/lib/QuickLinksFeature/QuickLinksFeature.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StackView = require("../StackView");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+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; }
+
+// pass through and type relevant system props - add more sets for interactive components
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+const isQuickListItem = element => {
+  var _element$type, _element$type2;
+
+  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
+  return Boolean(elementName.match(/QuickLinksFeatureItem/));
+};
+/**
+ * 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`
+ */
+
+
+const QuickLinksFeature = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    tag = 'ul',
+    children,
+    ...rest
+  } = _ref;
+  const {
+    stackGap,
+    stackJustify,
+    stackSpace
+  } = (0, _ThemeProvider.useThemeTokens)('QuickLinksFeature', tokens, variant);
+
+  const items = _react.Children.map(children, child => {
+    if (isQuickListItem(child)) {
+      return /*#__PURE__*/(0, _react.cloneElement)(child, child.props);
+    }
+
+    return null;
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ref: ref,
+    ...selectProps(rest),
+    children: items
+  });
+});
+QuickLinksFeature.displayName = 'QuickLinksFeature';
+QuickLinksFeature.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('QuickLinksFeature'),
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Default wrapper tag, by default it's "ul"
+   */
+  tag: _propTypes.default.string,
+
+  /**
+   * QuickLinksFeature.Item component
+   */
+  children: _propTypes.default.node
+};
+var _default = QuickLinksFeature;
+exports.default = _default;