@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/Pagination/SideButton.js

@@ -10,11 +10,12 @@ import dictionary from './dictionary';
 import useCopy from '../utils/useCopy';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const selectIconTokens = ({
-  color,
-  iconSize,
-  iconDisplace
-}, direction) => {
+const selectIconTokens = (_ref, direction) => {
+  let {
+    color,
+    iconSize,
+    iconDisplace
+  } = _ref;
   return {
     color,
     size: iconSize,
@@ -26,15 +27,16 @@ const directionToSide = {
   previous: 'left',
   next: 'right'
 };
-const SideButton = /*#__PURE__*/forwardRef(({
-  direction = 'previous',
-  onPress,
-  href,
-  copy,
-  variant,
-  tokens,
-  ...props
-}, ref) => {
+const SideButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    direction = 'previous',
+    onPress,
+    href,
+    copy,
+    variant,
+    tokens,
+    ...props
+  } = _ref2;
   const viewport = useViewport();
   const buttonVariant = {
     direction,
@@ -74,10 +76,11 @@ const SideButton = /*#__PURE__*/forwardRef(({
     ref: ref,
     ...buttonProps,
     tokens: getButtonTokens,
-    children: ({
-      textStyles,
-      ...buttonState
-    }) => {
+    children: _ref3 => {
+      let {
+        textStyles,
+        ...buttonState
+      } = _ref3;
       const iconProps = {
         tokens: getIconTokens(buttonState)
       };

package/lib-module/Pagination/usePagination.js

@@ -5,15 +5,16 @@
  * @param {React.Element[]} items
  * @param {number} truncateAbove
  */
-function usePagination({
-  items,
-  truncateAbove
-}) {
+function usePagination(_ref) {
+  let {
+    items,
+    truncateAbove
+  } = _ref;
   const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
   );
 
   const getItemProps = index => {
-    var _items$index;
+    var _items$index$props, _items$index;
 
     const {
       onPress,
@@ -21,7 +22,7 @@ function usePagination({
       hrefAttrs,
       variant,
       tokens
-    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
+    } = (_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 : {};
     return {
       onPress,
       href,

package/lib-module/Progress/Progress.js

@@ -6,19 +6,22 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectProgressStyles = ({
-  backgroundColor,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  height
-}) => ({
-  backgroundColor,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  height
-});
+const selectProgressStyles = _ref => {
+  let {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    height
+  } = _ref;
+  return {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderRadius,
+    height
+  };
+};
 /**
  * The `Progress` is a container for displaying one or several `ProgressBar`s.
  *
@@ -50,12 +53,13 @@ const selectProgressStyles = ({
  */
 
 
-const Progress = /*#__PURE__*/forwardRef(({
-  children,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const Progress = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
   const themeTokens = useThemeTokens('Progress', tokens, variant);
   return /*#__PURE__*/_jsx(View, {
     ref: ref,

package/lib-module/Progress/ProgressBar.js

@@ -9,18 +9,21 @@ import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectBarStyles = ({
-  backgroundColor,
-  borderRadius,
-  outlineWidth,
-  outlineColor
-}, percentage) => ({
-  backgroundColor,
-  borderRadius,
-  outlineWidth,
-  outlineColor,
-  width: `${percentage}%`
-});
+const selectBarStyles = (_ref, percentage) => {
+  let {
+    backgroundColor,
+    borderRadius,
+    outlineWidth,
+    outlineColor
+  } = _ref;
+  return {
+    backgroundColor,
+    borderRadius,
+    outlineWidth,
+    outlineColor,
+    width: "".concat(percentage, "%")
+  };
+};
 /**
  * The `ProgressBar` is a visual representation of linear progression.
  * It provides simple but important information at a quick glance.
@@ -57,13 +60,14 @@ const selectBarStyles = ({
  */
 
 
-const ProgressBar = /*#__PURE__*/forwardRef(({
-  children = null,
-  percentage = 0,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const ProgressBar = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children = null,
+    percentage = 0,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
   const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
 
   if (percentage < 0) {
@@ -78,7 +82,7 @@ const ProgressBar = /*#__PURE__*/forwardRef(({
       min: 0,
       max: 100,
       now: percentage,
-      text: `${percentage}%`
+      text: "".concat(percentage, "%")
     },
     ...rest
   });
@@ -86,7 +90,7 @@ const ProgressBar = /*#__PURE__*/forwardRef(({
     ref: ref,
     style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
     ...selectedProps,
-    children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
+    children: children !== null && children !== void 0 ? children : /*#__PURE__*/_jsx(ProgressBarBackground, {
       variant: variant
     })
   }) : null;

package/lib-module/Progress/ProgressBarBackground.js

@@ -3,11 +3,12 @@ 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='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__*/forwardRef(({
-  variant
-}, ref) => {
+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__*/forwardRef((_ref, ref) => {
+  let {
+    variant
+  } = _ref;
   let source = null;
 
   if (variant !== null && variant !== void 0 && variant.inactive) {
@@ -21,7 +22,7 @@ const ProgressBarBackground = /*#__PURE__*/forwardRef(({
   return /*#__PURE__*/_jsx(ImageBackground, {
     ref: ref,
     source: {
-      uri: `data:image/svg+xml,${source}`
+      uri: "data:image/svg+xml,".concat(source)
     },
     style: staticStyles.imageBackground
   });

package/lib-module/Radio/Radio.js

@@ -13,56 +13,65 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, viewProps]);
 
-const selectContainerStyles = ({
-  containerBackgroundColor,
-  containerBorderRadius,
-  containerOpacity,
-  containerPaddingBottom,
-  containerPaddingLeft,
-  containerPaddingRight,
-  containerPaddingTop,
-  containerShadow
-}) => ({
-  backgroundColor: containerBackgroundColor,
-  borderRadius: containerBorderRadius,
-  opacity: containerOpacity,
-  paddingBottom: containerPaddingBottom,
-  paddingLeft: containerPaddingLeft,
-  paddingRight: containerPaddingRight,
-  paddingTop: containerPaddingTop,
-  ...applyShadowToken(containerShadow)
-});
+const selectContainerStyles = _ref => {
+  let {
+    containerBackgroundColor,
+    containerBorderRadius,
+    containerOpacity,
+    containerPaddingBottom,
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop,
+    containerShadow
+  } = _ref;
+  return {
+    backgroundColor: containerBackgroundColor,
+    borderRadius: containerBorderRadius,
+    opacity: containerOpacity,
+    paddingBottom: containerPaddingBottom,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop,
+    ...applyShadowToken(containerShadow)
+  };
+};
 
-const selectDescriptionStyles = ({
-  containerPaddingLeft = 0,
-  descriptionFontSize,
-  descriptionLineHeight,
-  descriptionMarginLeft,
-  inputSize,
-  labelMarginLeft = 0
-}) => ({
-  marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
-  ...applyTextStyles({
-    fontSize: descriptionFontSize,
-    lineHeight: descriptionLineHeight
-  })
-});
+const selectDescriptionStyles = _ref2 => {
+  let {
+    containerPaddingLeft = 0,
+    descriptionFontSize,
+    descriptionLineHeight,
+    descriptionMarginLeft,
+    inputSize,
+    labelMarginLeft = 0
+  } = _ref2;
+  return {
+    marginLeft: descriptionMarginLeft !== null && descriptionMarginLeft !== void 0 ? descriptionMarginLeft : containerPaddingLeft + inputSize + labelMarginLeft,
+    ...applyTextStyles({
+      fontSize: descriptionFontSize,
+      lineHeight: descriptionLineHeight
+    })
+  };
+};
 
-const selectLabelStyles = ({
-  labelColor,
-  labelFontName,
-  labelFontSize,
-  labelFontWeight,
-  labelMarginLeft,
-  labelLineHeight
-}) => applyTextStyles({
-  color: labelColor,
-  fontName: labelFontName,
-  fontWeight: labelFontWeight,
-  fontSize: labelFontSize,
-  lineHeight: labelLineHeight,
-  marginLeft: labelMarginLeft
-});
+const selectLabelStyles = _ref3 => {
+  let {
+    labelColor,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelMarginLeft,
+    labelLineHeight
+  } = _ref3;
+  return applyTextStyles({
+    color: labelColor,
+    fontName: labelFontName,
+    fontWeight: labelFontWeight,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    marginLeft: labelMarginLeft
+  });
+};
 /**
  * Basic Radio component.
  *
@@ -97,21 +106,22 @@ const selectLabelStyles = ({
  */
 
 
-const Radio = /*#__PURE__*/forwardRef(({
-  checked,
-  defaultChecked,
-  description,
-  error = false,
-  id,
-  inactive,
-  label,
-  name: inputName,
-  onChange,
-  tokens,
-  value,
-  variant,
-  ...rest
-}, ref) => {
+const Radio = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    description,
+    error = false,
+    id,
+    inactive,
+    label,
+    name: inputName,
+    onChange,
+    tokens,
+    value,
+    variant,
+    ...rest
+  } = _ref4;
   const {
     currentValue: isChecked,
     setValue: setIsChecked,
@@ -140,7 +150,7 @@ const Radio = /*#__PURE__*/forwardRef(({
   };
 
   const uniqueId = useUniqueId('radio');
-  const inputId = id ?? uniqueId;
+  const inputId = id !== null && id !== void 0 ? id : uniqueId;
   return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     disabled: inactive,
@@ -152,11 +162,12 @@ const Radio = /*#__PURE__*/forwardRef(({
       disabled: inactive
     },
     ...selectProps(rest),
-    children: ({
-      focused: focus,
-      hovered: hover,
-      pressed
-    }) => {
+    children: _ref5 => {
+      let {
+        focused: focus,
+        hovered: hover,
+        pressed
+      } = _ref5;
       const stateTokens = getTokens({
         focus,
         hover,

package/lib-module/Radio/RadioButton.js

@@ -16,69 +16,79 @@ export const selectRadioButtonTokens = (themeTokens, prefix) => selectTokens(tok
 
 const getBorderRadius = inputSize => inputSize / 2;
 
-const selectCheckedStyles = ({
-  checkedBackgroundColor,
-  checkedSize
-}) => ({
-  backgroundColor: checkedBackgroundColor,
-  borderRadius: checkedSize / 2,
-  height: checkedSize,
-  width: checkedSize
-});
+const selectCheckedStyles = _ref => {
+  let {
+    checkedBackgroundColor,
+    checkedSize
+  } = _ref;
+  return {
+    backgroundColor: checkedBackgroundColor,
+    borderRadius: checkedSize / 2,
+    height: checkedSize,
+    width: checkedSize
+  };
+};
 
-const selectInputStyles = ({
-  inputBackgroundColor,
-  inputBorderColor,
-  inputBorderWidth,
-  inputOutlineColor,
-  inputOutlineWidth,
-  inputSize
-}) => ({
-  borderColor: inputBorderColor,
-  borderRadius: getBorderRadius(inputSize),
-  borderWidth: inputBorderWidth,
-  backgroundColor: inputBackgroundColor,
-  height: inputSize,
-  width: inputSize,
-  ...Platform.select({
-    web: {
-      outlineStyle: 'solid',
-      outlineColor: inputOutlineColor,
-      outlineWidth: inputOutlineWidth
-    }
-  })
-});
+const selectInputStyles = _ref2 => {
+  let {
+    inputBackgroundColor,
+    inputBorderColor,
+    inputBorderWidth,
+    inputOutlineColor,
+    inputOutlineWidth,
+    inputSize
+  } = _ref2;
+  return {
+    borderColor: inputBorderColor,
+    borderRadius: getBorderRadius(inputSize),
+    borderWidth: inputBorderWidth,
+    backgroundColor: inputBackgroundColor,
+    height: inputSize,
+    width: inputSize,
+    ...Platform.select({
+      web: {
+        outlineStyle: 'solid',
+        outlineColor: inputOutlineColor,
+        outlineWidth: inputOutlineWidth
+      }
+    })
+  };
+};
 
-const selectOuterBorderStyles = ({
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  inputSize
-}) => ({ ...applyOuterBorder({
+const selectOuterBorderStyles = _ref3 => {
+  let {
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
-    borderRadius: getBorderRadius(inputSize)
-  })
-});
+    inputSize
+  } = _ref3;
+  return { ...applyOuterBorder({
+      outerBorderColor,
+      outerBorderWidth,
+      outerBorderGap,
+      borderRadius: getBorderRadius(inputSize)
+    })
+  };
+};
 /**
  * The visual toggle of a radio input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with.
  */
 
 
-const RadioButton = /*#__PURE__*/forwardRef(({
-  isChecked,
-  tokens,
-  inactive,
-  defaultChecked,
-  inputId,
-  isControlled,
-  handleChange,
-  name: inputName,
-  value,
-  ...rest
-}, ref) => {
+const RadioButton = /*#__PURE__*/forwardRef((_ref4, ref) => {
+  let {
+    isChecked,
+    tokens,
+    inactive,
+    defaultChecked,
+    inputId,
+    isControlled,
+    handleChange,
+    name: inputName,
+    value,
+    ...rest
+  } = _ref4;
   const themeTokens = validateThemeTokens(resolveThemeTokens(tokens, {
     checked: isChecked
   }), getTokensSetPropType(tokenKeys), 'RadioButton');

package/lib-module/Radio/RadioGroup.js

@@ -59,25 +59,26 @@ const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, f
  * ```
  */
 
-const RadioGroup = /*#__PURE__*/forwardRef(({
-  copy = 'en',
-  tokens,
-  radioTokens,
-  variant,
-  items = [],
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  initialCheckedId,
-  checkedId,
-  onChange,
-  readOnly,
-  name: inputGroupName,
-  inactive,
-  ...rest
-}, ref) => {
+const RadioGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    copy = 'en',
+    tokens,
+    radioTokens,
+    variant,
+    items = [],
+    legend,
+    tooltip,
+    hint,
+    validation,
+    feedback,
+    initialCheckedId,
+    checkedId,
+    onChange,
+    readOnly,
+    name: inputGroupName,
+    inactive,
+    ...rest
+  } = _ref;
   const viewport = useViewport();
   const {
     space,
@@ -97,17 +98,18 @@ const RadioGroup = /*#__PURE__*/forwardRef(({
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`RadioGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("RadioGroup items must have unique ".concat(uniqueFields.join(', ')));
   }
 
-  const radios = items.map(({
-    label,
-    id,
-    onChange: itemOnChange,
-    ref: itemRef,
-    ...itemRest
-  }, index) => {
-    const radioId = id || `Radio[${index}]`;
+  const radios = items.map((_ref2, index) => {
+    let {
+      label,
+      id,
+      onChange: itemOnChange,
+      ref: itemRef,
+      ...itemRest
+    } = _ref2;
+    const radioId = id || "Radio[".concat(index, "]");
     const isChecked = currentValue === radioId;
 
     const handleChange = (newCheckedState, event) => {

package/lib-module/Radio/RadioInput.js

@@ -5,16 +5,18 @@ import PropTypes from 'prop-types';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const RadioInput = /*#__PURE__*/forwardRef(({
-  checked,
-  defaultChecked,
-  disabled,
-  id,
-  isControlled,
-  name,
-  onChange,
-  value
-}, ref) => {
+const RadioInput = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    disabled,
+    id,
+    isControlled,
+    name,
+    onChange,
+    value
+  } = _ref;
+
   const handleClick = event => {
     // Cancel the click dispatched via the label tag, since it's already wrapped
     // in <Pressable>