@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/ProductCard/ProductCard.js

@@ -1,232 +0,0 @@
-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 } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps, a11yProps]);
-const selectProductCardTokens = _ref => {
-  let {
-    borderStyle,
-    borderColor,
-    borderWidth,
-    borderRadius,
-    paddingHorizontal,
-    paddingVertical
-  } = _ref;
-  return {
-    borderStyle,
-    borderColor,
-    borderWidth,
-    borderRadius,
-    paddingHorizontal,
-    paddingVertical
-  };
-};
-const ProductCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  var _getCopy;
-  let {
-    copy = 'en',
-    dictionary = defaultDictionary,
-    image = {
-      src: '',
-      alt: ''
-    },
-    cardId,
-    isSelected,
-    onSelect,
-    tokens,
-    ...rest
-  } = _ref2;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('ProductCard', tokens, {
-    viewport
-  });
-  const getCopy = useCopy({
-    copy,
-    dictionary
-  });
-  const {
-    currentValue,
-    setValue
-  } = useInputValue();
-  const hasClicked = isSelected || currentValue;
-  const handlePress = event => {
-    if (cardId) {
-      onSelect(cardId);
-    } else {
-      setValue(!currentValue, event);
-    }
-  };
-  const renderButton = hasClicked ? /*#__PURE__*/_jsx(Box, {
-    vertical: 1,
-    children: /*#__PURE__*/_jsxs(StackView, {
-      space: 2,
-      direction: "row",
-      children: [/*#__PURE__*/_jsx(Icon, {
-        icon: themeTokens.selectedButtonIcon,
-        variant: {
-          color: 'success'
-        }
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: {
-          size: 'h4'
-        },
-        tokens: {
-          fontWeight: 400
-        },
-        children: getCopy('selectedButtonLabel')
-      })]
-    })
-  }) : /*#__PURE__*/_jsx(Button, {
-    onPress: handlePress,
-    variant: {
-      purpose: 'primary',
-      size: 'small',
-      width: 'full'
-    },
-    children: getCopy('buttonLabel')
-  });
-  return /*#__PURE__*/_jsxs(View, {
-    ...selectProps(rest),
-    style: [selectProductCardTokens(themeTokens), staticStyles.container],
-    ref: ref,
-    children: [image !== null && image !== void 0 && image.src ? /*#__PURE__*/_jsx(View, {
-      style: staticStyles.imageContainer,
-      children: /*#__PURE__*/_jsx(Image, {
-        source: image.src,
-        style: staticStyles.image,
-        alt: image.alt,
-        accessibilityLabel: image.alt,
-        resizeMethod: "resize",
-        accessibilityIgnoresInvertColors: true
-      })
-    }) : null, /*#__PURE__*/_jsx(View, {
-      style: staticStyles.textContainer,
-      children: /*#__PURE__*/_jsx(Box, {
-        left: 3,
-        children: /*#__PURE__*/_jsxs(StackView, {
-          space: 1,
-          children: [getCopy('badgeText') ? /*#__PURE__*/_jsx(Badge, {
-            variant: {
-              outline: true,
-              purpose: 'editorial'
-            },
-            children: getCopy('badgeText')
-          }) : null, /*#__PURE__*/_jsx(Typography, {
-            variant: {
-              size: 'h6'
-            },
-            children: getCopy('brandName')
-          }), /*#__PURE__*/_jsx(Typography, {
-            variant: {
-              size: 'h4',
-              colour: 'brand'
-            },
-            tokens: {
-              fontWeight: 400
-            },
-            children: getCopy('productName')
-          }), /*#__PURE__*/_jsxs(StackView, {
-            space: 3,
-            divider: true,
-            direction: "row",
-            children: [/*#__PURE__*/_jsx(PriceLockup, {
-              ...getCopy('primaryPrice'),
-              size: "small",
-              ratePosition: "bottom"
-            }), (_getCopy = getCopy('secondaryPrice')) !== null && _getCopy !== void 0 && _getCopy.price ? /*#__PURE__*/_jsx(PriceLockup, {
-              ...getCopy('secondaryPrice'),
-              size: "small",
-              ratePosition: "bottom"
-            }) : null]
-          }), /*#__PURE__*/_jsx(Box, {
-            top: 2,
-            children: /*#__PURE__*/_jsxs(StackView, {
-              space: 2,
-              children: [/*#__PURE__*/_jsx(Typography, {
-                variant: {
-                  size: 'h6'
-                },
-                tokens: {
-                  fontWeight: 500
-                },
-                children: getCopy('term')
-              }), getCopy('buttonLabel') ? /*#__PURE__*/_jsx(Box, {
-                top: 1,
-                children: renderButton
-              }) : null]
-            })
-          })]
-        })
-      })
-    })]
-  });
-});
-ProductCard.displayName = 'ProductCard';
-
-// If a language dictionary entry is provided, it must contain every key
-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.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.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
-  /**
-   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
-   */
-  dictionary: PropTypes.shape({
-    en: dictionaryContentShape,
-    fr: dictionaryContentShape
-  }),
-  tokens: getTokensPropType('ProductCard')
-};
-export default ProductCard;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    flex: 1
-  },
-  imageContainer: {
-    width: '30%',
-    minWidth: 96,
-    maxWidth: 96
-  },
-  image: {
-    resizeMode: 'contain',
-    width: '100%',
-    height: undefined,
-    // This is to maintain the aspect ratio
-    aspectRatio: 0.8
-  },
-  textContainer: {
-    width: '70%'
-  }
-});

package/lib-module/ProductCard/dictionary.js

@@ -1,38 +0,0 @@
-export default {
-  en: {
-    badgeText: '',
-    brandName: 'Brand name',
-    productName: 'Product name',
-    primaryPrice: {
-      price: '00',
-      signDirection: 'left',
-      rateText: '/month'
-    },
-    secondaryPrice: {
-      price: '',
-      signDirection: 'left',
-      rateText: 'Upfront'
-    },
-    term: '24 months | 0% APR Bring-it-Back applied',
-    buttonLabel: 'Select this phone',
-    selectedButtonLabel: 'Selected phone'
-  },
-  fr: {
-    badgeText: '',
-    brandName: 'Brand name',
-    productName: 'Product name',
-    primaryPrice: {
-      price: '00',
-      signDirection: 'right',
-      rateText: '/mois'
-    },
-    secondaryPrice: {
-      price: '',
-      signDirection: 'right',
-      rateText: "d'acompte"
-    },
-    term: '24 mois | TAP de 0% | avec Option retour',
-    buttonLabel: 'Sélectionner ce téléphone',
-    selectedButtonLabel: 'Téléphone sélectionné'
-  }
-};

package/lib-module/ProductCard/index.js

@@ -1,2 +0,0 @@
-import ProductCard from './ProductCard';
-export default ProductCard;

package/lib-module/ProductCardGroup/ProductCardGroup.js

@@ -1,70 +0,0 @@
-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.useState([]);
-  const handleSelect = id => {
-    const isAlreadySelected = selectedCardIds.includes(id);
-    let updatedSelectedCardIds;
-    if (isAlreadySelected) {
-      updatedSelectedCardIds = selectedCardIds.filter(cardId => cardId !== id);
-    } else if (maxSelection && selectedCardIds.length >= maxSelection) {
-      updatedSelectedCardIds = selectedCardIds.filter((_, index) => index !== 0).concat(id);
-    } else {
-      updatedSelectedCardIds = [...selectedCardIds, id];
-    }
-    setSelectedCardIds(updatedSelectedCardIds);
-  };
-  return /*#__PURE__*/_jsx(View, {
-    ...selectProps(rest),
-    ref: ref,
-    children: /*#__PURE__*/_jsx(StackWrap, {
-      direction: {
-        xs: 'column',
-        lg: 'row'
-      },
-      space: 4,
-      children: productCards.map((cardProperties, index) => {
-        const cardId = cardProperties.id || index;
-        return /*#__PURE__*/_jsx(View, {
-          children: /*#__PURE__*/_jsx(ProductCard, {
-            cardId: cardId,
-            isSelected: selectedCardIds.includes(cardId),
-            onSelect: handleSelect,
-            ...cardProperties
-          }, cardId)
-        }, cardId);
-      })
-    })
-  });
-});
-ProductCardGroup.displayName = 'ProductCardGroup';
-ProductCardGroup.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * 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.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.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    image: PropTypes.object,
-    dictionary: PropTypes.object
-  })).isRequired
-};
-export default ProductCardGroup;

package/lib-module/ProductCardGroup/index.js

@@ -1,2 +0,0 @@
-import ProductCardGroup from './ProductCardGroup';
-export default ProductCardGroup;

package/lib-module/Progress/Progress.js

@@ -1,88 +0,0 @@
-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,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    height,
-    shadow
-  } = _ref;
-  return {
-    backgroundColor,
-    borderWidth,
-    borderColor,
-    borderRadius,
-    height,
-    ...applyShadowToken(shadow)
-  };
-};
-
-/**
- * The `Progress` is a container for displaying one or several `ProgressBar`s.
- *
- * ## Props
- *
- * - Use `children` prop to pass one or multiple `ProgressBar`s. Note that in case of stacked progress bars
- *   each next will be displayed on top of the previous one.
- *
- * ## Tokens
- *
- * - Use the following tokens to customize the appearance:
- *   - `backgroundColor` for the background color of the progress container,
- *   - `borderColor` to control the color of the border,
- *   - `borderRadius` for the rounded corners,
- *   - `borderWidth` to change the border width.
- *   - `height` to control the height of the progress bars displayed within the progress bar container.
- *   - `shadow` to apply a box shadow to the progress bar container.
- *
- * ## Variants
- *
- * - Use the `size` variant to control the height of your progress bars:  passing `'mini'` will make your
- *   progress bar container narrower.
- *
- * ## Usability and A11y guidelines
- *
- * `Progress` component accepts the standard accessibility properties, however it's more important to make sure
- * its children (instances of `ProgressBar`) receive the accessibility properties specific to the `progressbar`
- * role.
- *
- */
-const Progress = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    tokens,
-    variant,
-    ...rest
-  } = _ref2;
-  const themeTokens = useThemeTokens('Progress', tokens, variant);
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: selectProgressStyles(themeTokens),
-    ...selectProps(rest),
-    children: children
-  });
-});
-Progress.displayName = 'Progress';
-Progress.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Use the `children` prop to supply one or several `ProgressBar`s.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Progress tokens.
-   */
-  tokens: getTokensPropType('Progress'),
-  /**
-   * Progress variant.
-   */
-  variant: variantProp.propType
-};
-export default Progress;

package/lib-module/Progress/ProgressBar.js

@@ -1,133 +0,0 @@
-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,
-    borderRadius,
-    outlineWidth,
-    outlineColor,
-    shadow
-  } = _ref;
-  return {
-    backgroundColor,
-    borderRadius,
-    outlineWidth,
-    outlineColor,
-    ...applyShadowToken(shadow),
-    width: `${percentage}%`
-  };
-};
-
-/**
- * The `ProgressBar` is a visual representation of linear progression.
- * It provides simple but important information at a quick glance.
- *
- * ## Props
- *
- * - Use `percentage` prop to indicate completion
- *
- * ## Tokens
- *
- * - Use the following tokens to customize the appearance:
- *   - `backgroundColor` for the background color of the progress bar,
- *   - `borderRadius` for the rounded corners,
- *   - `outlineColor` to control the color of the border (outline),
- *   - `outlineWidth` to change the outline width.
- *   - `shadow` to apply a box shadow to the progress bar.
- *
- * ## Variants
- *
- * - Use the following variants to render specific types of progress bars:
- *   - `negative`: set to `true` if you wish to use the negative theming for progress bar filling,
- *   - `inactive`: set to `true` if you wish to style the progress bar as inactive.
- *
- * ## Usability and A11y guidelines
- *
- * `ProgressBar` component accepts all the standard accessibility properties including the ones that
- * are specific to the `progressbar` role. By default the following props are used:
- *
- * - `accessibilityRole` (`role`): `progressbar`,
- * - `accessibilityValue.min` (`aria-valuemin`): `0`,
- * - `accessibilityValue.max` (`aria-valuemax`): `100`,
- * - `accessibilityValue.now` (`aria-valuenow`): `percentage`,
- * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
- *
- */
-const ProgressBar = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children = null,
-    percentage = 0,
-    tokens,
-    variant,
-    ...rest
-  } = _ref2;
-  const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
-  if (percentage < 0) {
-    throw new Error('ProgressBar: `percentage` must be a positive number');
-  } else if (percentage > 100) {
-    throw new Error('ProgressBar: `percentage` cannot exceed 100');
-  }
-  const selectedProps = selectProps({
-    accessibilityRole: 'progressbar',
-    accessibilityValue: {
-      min: 0,
-      max: 100,
-      now: percentage,
-      text: `${percentage}%`
-    },
-    ...rest
-  });
-  return percentage > 0 ? /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
-    ...selectedProps,
-    children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
-      variant: variant
-    })
-  }) : null;
-});
-ProgressBar.displayName = 'ProgressBar';
-ProgressBar.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Optional children that can be used to customize the progress bar filling.
-   */
-  children: PropTypes.node,
-  /**
-   * Accessibility label for the progress bar.
-   */
-  accessibilityLabel: PropTypes.string.isRequired,
-  /**
-   * Percentage of completion.
-   */
-  percentage: PropTypes.number,
-  /**
-   * Progress bar tokens.
-   */
-  tokens: getTokensPropType('ProgressBar'),
-  /**
-   * Progress bar variant.
-   */
-  variant: variantProp.propType
-};
-export default ProgressBar;
-const staticStyles = StyleSheet.create({
-  bar: {
-    height: '100%',
-    overflow: 'hidden',
-    position: 'absolute',
-    ...Platform.select({
-      web: {
-        outlineStyle: 'solid'
-      }
-    })
-  }
-});

package/lib-module/Progress/ProgressBarBackground.js

@@ -1,40 +0,0 @@
-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.forwardRef((_ref, ref) => {
-  let {
-    variant
-  } = _ref;
-  let source = null;
-  if (variant !== null && variant !== void 0 && variant.inactive) {
-    source = inactiveBackground;
-  } else if (variant !== null && variant !== void 0 && variant.negative) {
-    source = negativeBackground;
-  } else {
-    return null;
-  }
-  return /*#__PURE__*/_jsx(ImageBackground, {
-    ref: ref,
-    source: {
-      uri: `data:image/svg+xml,${source}`
-    },
-    style: staticStyles.imageBackground
-  });
-});
-ProgressBarBackground.displayName = 'ProgressBarBackground';
-ProgressBarBackground.propTypes = {
-  /**
-   * Progress bar variant.
-   */
-  variant: variantProp.propType
-};
-export default ProgressBarBackground;
-const staticStyles = StyleSheet.create({
-  imageBackground: {
-    height: '100%'
-  }
-});

package/lib-module/Progress/index.js

@@ -1,4 +0,0 @@
-import Progress from './Progress';
-import ProgressBar from './ProgressBar';
-Progress.Bar = ProgressBar;
-export default Progress;

package/lib-module/QuickLinks/QuickLinks.js

@@ -1,78 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { getTokensPropType, variantProp } from '../utils';
-import List from '../List';
-import StackWrap from '../StackView/StackWrap';
-import QuickLinksCard from './QuickLinksCard';
-
-/**
- * QuickLinks renders a list of interactive items. How it renders these items depends on theme options:
- *  - 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`.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const QuickLinks = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    variant,
-    listTokens,
-    cardTokens,
-    children,
-    tag = 'ul',
-    ...rest
-  } = _ref;
-  const viewport = useViewport();
-  const {
-    dividers,
-    list,
-    card,
-    stackSpace,
-    stackGap,
-    stackJustify
-  } = useThemeTokens('QuickLinks', tokens, variant, {
-    viewport
-  });
-  const content = list && /*#__PURE__*/_jsx(List, {
-    ref: ref,
-    tokens: listTokens,
-    showDivider: dividers,
-    tag: tag,
-    ...rest,
-    children: children
-  }) || /*#__PURE__*/_jsx(StackWrap, {
-    space: stackSpace,
-    gap: stackGap,
-    tokens: {
-      justifyContent: stackJustify
-    },
-    tag: tag,
-    ...rest,
-    children: children
-  });
-  return card ? /*#__PURE__*/_jsx(QuickLinksCard, {
-    tokens: cardTokens,
-    children: content
-  }) : content;
-});
-QuickLinks.displayName = 'QuickLinks';
-QuickLinks.propTypes = {
-  tokens: getTokensPropType('QuickLinks'),
-  /**
-   * Custom tokens override for `Card`
-   */
-  cardTokens: getTokensPropType('Card'),
-  /**
-   * Custom tokens override for `QuickLinksList`
-   */
-  listTokens: getTokensPropType('QuickLinksList'),
-  /**
-   * The HTML tag to render the list as
-   */
-  tag: PropTypes.string,
-  variant: variantProp.propType,
-  children: PropTypes.node
-};
-export default QuickLinks;