@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/ActivityIndicator/Spinner.js

@@ -10,30 +10,31 @@ const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
 const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: `${DURATION}ms`,
+  dur: "".concat(DURATION, "ms"),
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
+  keySplines: "".concat(BEZIER.join(', '), " ; ").concat(BEZIER.join(', '))
 }; // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
 
-const Spinner = /*#__PURE__*/forwardRef(({
-  size,
-  color,
-  thickness,
-  label
-}, ref) => {
+const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    thickness,
+    label
+  } = _ref;
   const {
     reduceMotionEnabled
   } = useA11yInfo();
   return /*#__PURE__*/_jsx("svg", {
     ref: ref,
-    width: `${size}px`,
-    height: `${size}px`,
+    width: "".concat(size, "px"),
+    height: "".concat(size, "px"),
     viewBox: "0 0 48 48",
     "aria-valuetext": label,
     role: "progressbar",
@@ -42,7 +43,7 @@ const Spinner = /*#__PURE__*/forwardRef(({
       children: [reduceMotionEnabled ? null : /*#__PURE__*/_jsx("animateTransform", {
         attributeName: "transform",
         type: "rotate",
-        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
+        values: "-180 24 24;".concat(360 + MIN_STROKE_ANGLE - 180, " 24 24"),
         ...animationProps
       }), /*#__PURE__*/_jsx("circle", {
         fill: "none",
@@ -57,12 +58,12 @@ const Spinner = /*#__PURE__*/forwardRef(({
         children: reduceMotionEnabled ? null : /*#__PURE__*/_jsxs(_Fragment, {
           children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",
-            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
+            values: "0;-10;".concat(MIN_SVG_LENGTH - SVG_CIRCUMFERENCE),
             ...animationProps,
             ...bezierProps
           }), /*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dasharray",
-            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
+            values: "".concat(MIN_SVG_LENGTH, ", 200;").concat(MAX_SVG_LENGTH, ", 200;").concat(MIN_SVG_LENGTH, ", 200"),
             ...animationProps,
             ...bezierProps
           })]

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -8,12 +8,13 @@ import { useA11yInfo } from '../A11yInfoProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ea = MIN_EMPTY_ANGLE / 2;
 const sa = MIN_STROKE_ANGLE / 2;
-const Spinner = /*#__PURE__*/forwardRef(({
-  size,
-  color,
-  thickness,
-  label
-}, ref) => {
+const Spinner = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    size,
+    color,
+    thickness,
+    label
+  } = _ref;
   const {
     current: timer
   } = React.useRef(new Animated.Value(0));
@@ -66,7 +67,7 @@ const Spinner = /*#__PURE__*/forwardRef(({
           }
 
           const direction = index ? -1 : +1;
-          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
+          return "".concat(direction * (180 - (sa + ea)) * easing(progress) + rotation, "deg");
         });
         const layerStyle = {
           width: size,
@@ -81,7 +82,7 @@ const Spinner = /*#__PURE__*/forwardRef(({
           layerStyle.transform = [{
             rotate: timer.interpolate({
               inputRange: [0, 1],
-              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
+              outputRange: ["".concat(0 + ea + sa, "deg"), "".concat(2 * 360 + ea + sa, "deg")]
             })
           }];
           viewportStyle.transform = [{

package/lib-module/ActivityIndicator/index.js

@@ -10,11 +10,12 @@ import Spinner from './Spinner';
 
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const ActivityIndicator = ({
-  variant,
-  tokens,
-  label
-}) => {
+const ActivityIndicator = _ref => {
+  let {
+    variant,
+    tokens,
+    label
+  } = _ref;
   const {
     size,
     color,

package/lib-module/BaseProvider/index.js

@@ -7,17 +7,20 @@ import ViewportProvider from '../ViewportProvider';
 import ThemeProvider from '../ThemeProvider';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const BaseProvider = ({
-  defaultTheme,
-  children
-}) => /*#__PURE__*/_jsx(A11yInfoProvider, {
-  children: /*#__PURE__*/_jsx(ViewportProvider, {
-    children: /*#__PURE__*/_jsx(ThemeProvider, {
-      defaultTheme: defaultTheme,
-      children: children
+const BaseProvider = _ref => {
+  let {
+    defaultTheme,
+    children
+  } = _ref;
+  return /*#__PURE__*/_jsx(A11yInfoProvider, {
+    children: /*#__PURE__*/_jsx(ViewportProvider, {
+      children: /*#__PURE__*/_jsx(ThemeProvider, {
+        defaultTheme: defaultTheme,
+        children: children
+      })
     })
-  })
-});
+  });
+};
 
 BaseProvider.propTypes = {
   defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,

package/lib-module/Box/Box.js

@@ -93,25 +93,26 @@ const selectBoxStyles = tokens => {
  */
 
 
-const Box = /*#__PURE__*/forwardRef(({
-  space,
-  horizontal = space,
-  vertical = space,
-  top = vertical,
-  bottom = vertical,
-  left = horizontal,
-  right = horizontal,
-  flex,
-  children,
-  variant,
-  tokens,
-  scroll,
-  tag,
-  accessibilityRole,
-  testID,
-  dataSet,
-  ...rest
-}, ref) => {
+const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    space,
+    horizontal = space,
+    vertical = space,
+    top = vertical,
+    bottom = vertical,
+    left = horizontal,
+    right = horizontal,
+    flex,
+    children,
+    variant,
+    tokens,
+    scroll,
+    tag,
+    accessibilityRole,
+    testID,
+    dataSet,
+    ...rest
+  } = _ref;
   const props = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };

package/lib-module/Button/Button.js

@@ -4,12 +4,13 @@ import buttonPropTypes, { textAndA11yText } from './propTypes';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import { a11yProps } from '../utils/props';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Button = /*#__PURE__*/forwardRef(({
-  accessibilityRole = 'button',
-  tokens,
-  variant,
-  ...props
-}, ref) => {
+const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    accessibilityRole = 'button',
+    tokens,
+    variant,
+    ...props
+  } = _ref;
   const getTokens = useThemeTokensCallback('Button', tokens, variant);
   return /*#__PURE__*/_jsx(ButtonBase, { ...props,
     tokens: getTokens,

package/lib-module/Button/ButtonBase.js

@@ -10,36 +10,43 @@ import { a11yProps, clickProps, focusHandlerProps, getCursorStyle, linkProps, re
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, linkProps, viewProps]);
 
-const getOuterBorderOffset = ({
-  outerBorderGap = 0,
-  outerBorderWidth = 0
-}) => outerBorderGap + outerBorderWidth;
-
-const selectOuterContainerStyles = ({
-  alignSelf,
-  opacity,
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBackgroundColor
-}) => ({
-  alignSelf,
-  backgroundColor: outerBackgroundColor,
-  opacity,
-  ...applyOuterBorder({
-    outerBorderGap,
-    outerBorderWidth,
+const getOuterBorderOffset = _ref => {
+  let {
+    outerBorderGap = 0,
+    outerBorderWidth = 0
+  } = _ref;
+  return outerBorderGap + outerBorderWidth;
+};
+
+const selectOuterContainerStyles = _ref2 => {
+  let {
+    alignSelf,
+    opacity,
     outerBorderColor,
-    borderRadius
-  })
-});
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius,
+    outerBackgroundColor
+  } = _ref2;
+  return {
+    alignSelf,
+    backgroundColor: outerBackgroundColor,
+    opacity,
+    ...applyOuterBorder({
+      outerBorderGap,
+      outerBorderWidth,
+      outerBorderColor,
+      borderRadius
+    })
+  };
+};
 
-const selectOuterWidthStyles = ({
-  outerBorderGap,
-  outerBorderWidth,
-  width
-}) => {
+const selectOuterWidthStyles = _ref3 => {
+  let {
+    outerBorderGap,
+    outerBorderWidth,
+    width
+  } = _ref3;
   // The inner container's bounding box is the bounding box of the button overall
   // so this many device pixels will sit outside of the overall bounding box
   const outerBorderOffset = getOuterBorderOffset({
@@ -68,7 +75,7 @@ const selectOuterWidthStyles = ({
 
 
   if (Platform.OS === 'web') {
-    widthStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
+    widthStyles.width = "calc(".concat(width, " + ").concat(outerBorderOffset * 2, "px)");
     return widthStyles;
   } // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
 
@@ -84,16 +91,18 @@ const selectOuterWidthStyles = ({
   return widthStyles;
 };
 
-const selectInnerContainerStyles = ({
-  backgroundColor,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow,
-  borderWidth,
-  minWidth
-}) => {
+const selectInnerContainerStyles = _ref4 => {
+  let {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    shadow,
+    borderWidth,
+    minWidth
+  } = _ref4;
+
   // Subtract border width from padding so overall button width/height doesn't
   // jump around if the border width changes (avoiding NaN and negative padding)
   const offsetBorder = value => typeof value === 'number' && typeof borderWidth === 'number' ? Math.max(0, value - borderWidth) : value;
@@ -109,39 +118,46 @@ const selectInnerContainerStyles = ({
   };
 };
 
-const selectBorderStyles = ({
-  borderColor,
-  borderWidth,
-  borderRadius
-}) => ({
-  borderColor,
-  borderWidth,
-  borderRadius
-});
+const selectBorderStyles = _ref5 => {
+  let {
+    borderColor,
+    borderWidth,
+    borderRadius
+  } = _ref5;
+  return {
+    borderColor,
+    borderWidth,
+    borderRadius
+  };
+};
 
-const selectTextStyles = ({
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  fontWeight,
-  textAlign
-}) => applyTextStyles({
-  fontSize,
-  color,
-  lineHeight,
-  fontName,
-  fontWeight,
-  textAlign
-});
+const selectTextStyles = _ref6 => {
+  let {
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    fontWeight,
+    textAlign
+  } = _ref6;
+  return applyTextStyles({
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    fontWeight,
+    textAlign
+  });
+};
 
-const selectWebOnlyStyles = (inactive, themeTokens, {
-  accessibilityRole
-}) => {
+const selectWebOnlyStyles = (inactive, themeTokens, _ref7) => {
+  let {
+    accessibilityRole
+  } = _ref7;
   return Platform.select({
     web: {
       // if it would overflow the container, wraps instead
-      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      maxWidth: "calc(100% + ".concat(getOuterBorderOffset(themeTokens) * 2, "px)"),
       outline: 'none',
       // removes the default browser :focus outline
       ...getCursorStyle(inactive, accessibilityRole)
@@ -150,18 +166,19 @@ const selectWebOnlyStyles = (inactive, themeTokens, {
   });
 };
 
-const ButtonBase = /*#__PURE__*/forwardRef(({
-  id,
-  href,
-  hrefAttrs,
-  children,
-  tokens = {},
-  disabled = false,
-  // alias for inactive
-  inactive = disabled,
-  selected = false,
-  ...rawRest
-}, ref) => {
+const ButtonBase = /*#__PURE__*/forwardRef((_ref8, ref) => {
+  let {
+    id,
+    href,
+    hrefAttrs,
+    children,
+    tokens = {},
+    disabled = false,
+    // alias for inactive
+    inactive = disabled,
+    selected = false,
+    ...rawRest
+  } = _ref8;
   const {
     onPress,
     ...rest

package/lib-module/Button/ButtonGroup.js

@@ -12,30 +12,31 @@ import { getPressHandlersWithArgs } from '../utils/pressability';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const [selectItemProps, selectedItemPropTypes] = selectSystemProps([a11yProps, focusHandlerProps, pressProps, viewProps]);
-const ButtonGroup = /*#__PURE__*/forwardRef(({
-  variant,
-  tokens,
-  items = [],
-  values,
-  initialValues,
-  maxValues = 1,
-  onChange,
-  readOnly = false,
-  inactive = false,
-  legend,
-  tooltip,
-  hint,
-  validation,
-  feedback,
-  name: inputGroupName,
-  copy,
-  accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
-  : Platform.select({
-    web: 'group',
-    default: 'none'
-  }),
-  ...rest
-}, ref) => {
+const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    variant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues = 1,
+    onChange,
+    readOnly = false,
+    inactive = false,
+    legend,
+    tooltip,
+    hint,
+    validation,
+    feedback,
+    name: inputGroupName,
+    copy,
+    accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+    : Platform.select({
+      web: 'group',
+      default: 'none'
+    }),
+    ...rest
+  } = _ref;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('ButtonGroup', tokens, variant, {
     viewport
@@ -65,7 +66,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
   const uniqueFields = ['id', 'label'];
 
   if (!containUniqueFields(items, uniqueFields)) {
-    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
+    throw new Error("ButtonGroup items must have unique ".concat(uniqueFields.join(', ')));
   } // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
 
 
@@ -89,13 +90,14 @@ const ButtonGroup = /*#__PURE__*/forwardRef(({
       direction: direction,
       tokens: stackTokens,
       ref: ref,
-      children: items.map(({
-        label,
-        id = label,
-        accessibilityLabel,
-        ref: itemRef,
-        ...itemRest
-      }, index) => {
+      children: items.map((_ref2, index) => {
+        let {
+          label,
+          id = label,
+          accessibilityLabel,
+          ref: itemRef,
+          ...itemRest
+        } = _ref2;
         const isSelected = currentValues.includes(id); // Pass an object of relevant component state as first argument for any passed-in press handlers
 
         const pressHandlers = getPressHandlersWithArgs(rest, [{

package/lib-module/Button/ButtonLink.js

@@ -9,13 +9,14 @@ import { useThemeTokensCallback } from '../ThemeProvider';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const ButtonLink = /*#__PURE__*/forwardRef(({
-  accessibilityRole = 'link',
-  tokens,
-  variant,
-  dataSet,
-  ...props
-}, ref) => {
+const ButtonLink = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    accessibilityRole = 'link',
+    tokens,
+    variant,
+    dataSet,
+    ...props
+  } = _ref;
   const {
     hrefAttrs,
     rest

package/lib-module/Card/Card.js

@@ -56,13 +56,14 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * depending on what you are trying to achieve.
  */
 
-const Card = ({
-  children,
-  tokens,
-  variant,
-  dataSet,
-  ...rest
-}) => {
+const Card = _ref => {
+  let {
+    children,
+    tokens,
+    variant,
+    dataSet,
+    ...rest
+  } = _ref;
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Card', tokens, variant, {
     viewport

package/lib-module/Card/CardBase.js

@@ -7,43 +7,47 @@ import { a11yProps, viewProps, selectSystemProps } from '../utils/props';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]); // Ensure explicit selection of tokens
 
-const selectStyles = ({
-  flex,
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  minWidth,
-  shadow
-}) => ({
-  flex,
-  backgroundColor,
-  borderColor,
-  borderRadius,
-  borderWidth,
-  paddingBottom,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  minWidth,
-  ...applyShadowToken(shadow)
-});
+const selectStyles = _ref => {
+  let {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    minWidth,
+    shadow
+  } = _ref;
+  return {
+    flex,
+    backgroundColor,
+    borderColor,
+    borderRadius,
+    borderWidth,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    minWidth,
+    ...applyShadowToken(shadow)
+  };
+};
 /**
  * A themeless base component for Card which components can apply theme tokens to. Not
  * intended to be used in apps or sites directly: build themed components on top of this.
  */
 
 
-const CardBase = /*#__PURE__*/forwardRef(({
-  children,
-  tokens,
-  dataSet,
-  ...rest
-}, ref) => {
+const CardBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    children,
+    tokens,
+    dataSet,
+    ...rest
+  } = _ref2;
   const cardStyle = selectStyles(typeof tokens === 'function' ? tokens() : tokens);
   const props = selectProps(rest);
   return /*#__PURE__*/_jsx(View, {