@telus-uds/components-base 1.18.1 → 1.19.1

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/SideButton.js

@@ -34,10 +34,12 @@ 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; }
 
 // We need to drop the icon here since it gets rendered via children and not
-// `ButtonBase` in order to tap into the state of the button
+// `ButtonBase` in order to tap into the state of the button; `displayLabel` flag
+// is also not needed
 const selectButtonTokens = _ref => {
   let {
     icon: _,
+    displayLabel: __,
     ...rest
   } = _ref;
   return (0, _utils.selectTokens)('Button', rest);
@@ -82,7 +84,8 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     copy
   });
   const {
-    icon
+    icon,
+    displayLabel
   } = getTokens(tokens, buttonVariant);
 
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
@@ -90,7 +93,6 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
 
   const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  const showLabel = viewport !== 'sm' && viewport !== 'xs';
   const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
   const accessibilityRole = href !== undefined ? 'link' : 'button';
 
@@ -124,7 +126,7 @@ const SideButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         space: 1,
         iconPosition: directionToSide[direction],
         iconProps: iconProps,
-        children: showLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        children: displayLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
           style: textStyles,
           children: label
         })

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;

package/lib/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 _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.linkProps]);
+
+const selectImageStyle = imageDimension => ({
+  width: imageDimension,
+  height: imageDimension,
+  ..._Platform.default.select({
+    // TODO: https://github.com/telus/universal-design-system/issues/487
+    web: {
+      transition: 'width 200ms, height 200ms'
+    }
+  })
+});
+
+const selectContainerStyle = _ref => {
+  let {
+    contentMaxDimension,
+    textAlign
+  } = _ref;
+  return {
+    textAlign,
+    width: contentMaxDimension,
+    overflow: 'hidden'
+  };
+};
+
+const selectImageContainerStyle = contentMaxDimension => ({
+  width: contentMaxDimension,
+  height: contentMaxDimension,
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+/**
+ * Component export along with QuickLinksFeature to be used as children
+ *
+ * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
+ */
+
+
+const QuickLinksFeatureItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    imageAccessibilityLabel,
+    imageSource,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('QuickLinksFeatureItem', tokens, variant);
+  const [hover, setHover] = (0, _react.useState)(false);
+  const {
+    contentDirection,
+    contentSpace,
+    contentAlignItems,
+    contentMaxDimension,
+    imageDimension,
+    textAlign
+  } = getTokens({
+    viewport,
+    hover
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
+    ref: ref,
+    tokens: state => {
+      setHover(state.hover);
+      return getTokens(state);
+    },
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectContainerStyle({
+        contentMaxDimension,
+        textAlign
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackWrap, {
+        direction: contentDirection,
+        space: contentSpace,
+        tokens: {
+          alignItems: contentAlignItems
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectImageContainerStyle(contentMaxDimension),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+            accessibilityIgnoresInvertColors: true,
+            imageAccessibilityLabel: imageAccessibilityLabel,
+            source: imageSource,
+            style: selectImageStyle(imageDimension)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          children: children
+        })]
+      })
+    })
+  });
+});
+QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
+QuickLinksFeatureItem.propTypes = { ..._utils.withLinkRouter.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('QuickLinksFeatureItem'),
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Text which will be rendered within the Link
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * Image accessibility label
+   */
+  imageAccessibilityLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * Image node or Image url
+   */
+  imageSource: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+};
+
+var _default = (0, _utils.withLinkRouter)(QuickLinksFeatureItem);
+
+exports.default = _default;

package/lib/QuickLinksFeature/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));
+
+var _QuickLinksFeatureItem = _interopRequireDefault(require("./QuickLinksFeatureItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_QuickLinksFeature.default.Item = _QuickLinksFeatureItem.default;
+var _default = _QuickLinksFeature.default;
+exports.default = _default;

package/lib/Radio/Radio.js

@@ -70,7 +70,7 @@ const selectDescriptionStyles = _ref2 => {
     labelMarginLeft = 0
   } = _ref2;
   return {
-    marginLeft: descriptionMarginLeft !== null && descriptionMarginLeft !== void 0 ? descriptionMarginLeft : containerPaddingLeft + inputSize + labelMarginLeft,
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
     ...(0, _ThemeProvider.applyTextStyles)({
       fontSize: descriptionFontSize,
       lineHeight: descriptionLineHeight
@@ -174,7 +174,7 @@ const Radio = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   };
 
   const uniqueId = (0, _utils.useUniqueId)('radio');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const selectedProps = selectProps({
     accessibilityRole: 'radio',
     accessibilityState: {

package/lib/Radio/RadioGroup.js

@@ -122,7 +122,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("RadioGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   const radios = items.map((_ref2, index) => {
@@ -133,7 +133,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       ref: itemRef,
       ...itemRest
     } = _ref2;
-    const radioId = id || "Radio[".concat(index, "]");
+    const radioId = id || `Radio[${index}]`;
     const isChecked = currentValue === radioId;
 
     const handleChange = (newCheckedState, event) => {

package/lib/RadioCard/RadioCard.js

@@ -102,7 +102,7 @@ const RadioCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
 
   const uniqueId = (0, _utils.useUniqueId)('RadioCard');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('RadioCard', tokens, variant);
 
   const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));

package/lib/RadioCard/RadioCardGroup.js

@@ -127,7 +127,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("RadioCardGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`RadioCardGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
@@ -155,7 +155,7 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           onChange: itemOnChange,
           ...itemRest
         } = _ref2;
-        const cardId = id || "RadioCard[".concat(index, "]");
+        const cardId = id || `RadioCard[${index}]`;
 
         const handleChange = (newCheckedState, event) => {
           if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);

package/lib/Responsive/Responsive.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _systemConstants = require("@telus-uds/system-constants");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Responsive conditionally renders children based on whether the viewport matches the provided
+ * min and max viewports.
+ *
+ * In SSR, like other viewport utilities, it treats the viewport as `xs` both in SSR itself and
+ * during first hydration on the client side; then if the viewport is not `xs`, it re-renders
+ * after hydration. This may cause a layout shift on devices other than the narrowest.
+ */
+const Responsive = _ref => {
+  let {
+    min = 'xs',
+    max,
+    children
+  } = _ref;
+  // Start returning children at the 'min' viewport or greater
+  const byViewports = {
+    [min]: children
+  };
+
+  if (max && max !== 'xl') {
+    // Stop returning children at the viewport one above 'max' or greater
+    const maxIndex = _systemConstants.viewports.keys.indexOf(max);
+
+    const maxPlusOne = maxIndex >= 0 ? _systemConstants.viewports.keys[maxIndex + 1] : null;
+    if (maxPlusOne) byViewports[maxPlusOne] = null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: (0, _utils.useResponsiveProp)(byViewports, null)
+  });
+};
+
+Responsive.propTypes = {
+  min: _propTypes.default.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
+  max: _propTypes.default.oneOf(['sm', 'md', 'lg', 'xl']),
+  children: _propTypes.default.node.isRequired
+};
+var _default = Responsive;
+exports.default = _default;

package/lib/Responsive/index.js

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