@telus-uds/components-base 1.8.1 → 1.8.4

package/lib-module/IconButton/IconButton.js

@@ -10,43 +10,49 @@ import Icon from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-const selectOuterStyle = ({
-  backgroundColor,
-  borderRadius,
-  outerBorderWidth,
-  outerBorderColor,
-  outerBorderGap,
-  shadow
-}) => [{
-  backgroundColor,
-  ...applyShadowToken(shadow),
-  ...applyOuterBorder({
+const selectOuterStyle = _ref => {
+  let {
+    backgroundColor,
     borderRadius,
     outerBorderWidth,
     outerBorderColor,
-    outerBorderGap
-  }),
-  ...Platform.select({
-    web: {
-      outline: 'none',
-      display: 'inline-flex'
-    }
-  })
-}, staticStyles.outer];
+    outerBorderGap,
+    shadow
+  } = _ref;
+  return [{
+    backgroundColor,
+    ...applyShadowToken(shadow),
+    ...applyOuterBorder({
+      borderRadius,
+      outerBorderWidth,
+      outerBorderColor,
+      outerBorderGap
+    }),
+    ...Platform.select({
+      web: {
+        outline: 'none',
+        display: 'inline-flex'
+      }
+    })
+  }, staticStyles.outer];
+};
 
-const selectInnerStyle = ({
-  borderColor,
-  borderWidth = 0,
-  borderRadius,
-  padding = 0
-}) => ({
-  // Inner borders animate with the icon and should be treated like a themable feature of the icon
-  borderColor,
-  borderRadius,
-  borderWidth,
-  padding: Math.max(0, padding - borderWidth) // Stable size as border changes
+const selectInnerStyle = _ref2 => {
+  let {
+    borderColor,
+    borderWidth = 0,
+    borderRadius,
+    padding = 0
+  } = _ref2;
+  return {
+    // Inner borders animate with the icon and should be treated like a themable feature of the icon
+    borderColor,
+    borderRadius,
+    borderWidth,
+    padding: Math.max(0, padding - borderWidth) // Stable size as border changes
 
-});
+  };
+};
 /**
  * A pressable themeless base component that handles pressable states and passes tokens
  * based on these to an outer border and a base Card component. Not intended to be used in
@@ -54,15 +60,16 @@ const selectInnerStyle = ({
  */
 
 
-const IconButton = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant,
-  icon: IconComponent,
-  href,
-  hrefAttrs,
-  accessibilityRole = href ? 'link' : 'button',
-  ...rawRest
-}, ref) => {
+const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    icon: IconComponent,
+    href,
+    hrefAttrs,
+    accessibilityRole = href ? 'link' : 'button',
+    ...rawRest
+  } = _ref3;
   const {
     onPress,
     ...rest

package/lib-module/InputLabel/InputLabel.js

@@ -14,38 +14,45 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
 
 const selectLabelStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
 
-const selectHintStyles = ({
-  hintColor,
-  hintFontName,
-  hintFontSize,
-  hintFontWeight,
-  hintLineHeight
-}) => applyTextStyles({
-  color: hintColor,
-  fontName: hintFontName,
-  fontSize: hintFontSize,
-  fontWeight: hintFontWeight,
-  lineHeight: hintLineHeight
-});
+const selectHintStyles = _ref => {
+  let {
+    hintColor,
+    hintFontName,
+    hintFontSize,
+    hintFontWeight,
+    hintLineHeight
+  } = _ref;
+  return applyTextStyles({
+    color: hintColor,
+    fontName: hintFontName,
+    fontSize: hintFontSize,
+    fontWeight: hintFontWeight,
+    lineHeight: hintLineHeight
+  });
+};
 
-const selectGapStyles = ({
-  gap
-}) => ({
-  marginRight: gap
-});
+const selectGapStyles = _ref2 => {
+  let {
+    gap
+  } = _ref2;
+  return {
+    marginRight: gap
+  };
+};
 
-const InputLabel = /*#__PURE__*/forwardRef(({
-  copy = 'en',
-  label,
-  forId,
-  hint,
-  hintPosition = 'inline',
-  hintId,
-  tooltip,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const InputLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    copy = 'en',
+    label,
+    forId,
+    hint,
+    hintPosition = 'inline',
+    hintId,
+    tooltip,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
   const themeTokens = useThemeTokens('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';

package/lib-module/InputLabel/LabelContent.js

@@ -1,15 +1,18 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/forwardRef(({
-  children,
-  forId
-}, ref) => /*#__PURE__*/_jsx("label", {
-  ref: ref,
-  htmlFor: forId,
-  style: staticStyles.inheritCursor,
-  children: children
-}));
+const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    forId
+  } = _ref;
+  return /*#__PURE__*/_jsx("label", {
+    ref: ref,
+    htmlFor: forId,
+    style: staticStyles.inheritCursor,
+    children: children
+  });
+});
 LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: PropTypes.string,

package/lib-module/InputLabel/LabelContent.native.js

@@ -3,12 +3,15 @@ import PropTypes from 'prop-types';
 import View from "react-native-web/dist/exports/View"; // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const LabelContent = /*#__PURE__*/forwardRef(({
-  children
-}, ref) => ref ? /*#__PURE__*/_jsx(View, {
-  ref: ref,
-  children: children
-}) : children);
+const LabelContent = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return ref ? /*#__PURE__*/_jsx(View, {
+    ref: ref,
+    children: children
+  }) : children;
+});
 LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: PropTypes.node

package/lib-module/InputSupports/InputSupports.js

@@ -7,16 +7,17 @@ import { useThemeTokens } from '../ThemeProvider';
 import useInputSupports from './useInputSupports';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-const InputSupports = /*#__PURE__*/forwardRef(({
-  children,
-  copy = 'en',
-  label,
-  hint,
-  hintPosition = 'inline',
-  feedback,
-  tooltip,
-  validation
-}, ref) => {
+const InputSupports = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    copy = 'en',
+    label,
+    hint,
+    hintPosition = 'inline',
+    feedback,
+    tooltip,
+    validation
+  } = _ref;
   const {
     space
   } = useThemeTokens('InputSupports');

package/lib-module/InputSupports/useInputSupports.js

@@ -2,12 +2,13 @@ import useUniqueId from '../utils/useUniqueId';
 
 const joinDefined = array => array.filter(item => item !== undefined).join(' ');
 
-const useInputSupports = ({
-  label,
-  feedback,
-  validation,
-  hint
-}) => {
+const useInputSupports = _ref => {
+  let {
+    label,
+    feedback,
+    validation,
+    hint
+  } = _ref;
   const hasValidationError = validation === 'error';
   const inputId = useUniqueId('input');
   const hintId = useUniqueId('input-hint');

package/lib-module/Link/ChevronLink.js

@@ -11,14 +11,15 @@ import LinkBase from './LinkBase';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const ChevronLink = /*#__PURE__*/forwardRef(({
-  direction = 'right',
-  children,
-  tokens,
-  variant,
-  dataSet,
-  ...linkProps
-}, ref) => {
+const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    direction = 'right',
+    children,
+    tokens,
+    variant,
+    dataSet,
+    ...linkProps
+  } = _ref;
   const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant);
 
   const applyChevronTokens = linkState => {

package/lib-module/Link/InlinePressable.js

@@ -17,16 +17,19 @@ import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 // eslint-disable-next-line react/prop-types
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const InlinePressable = /*#__PURE__*/forwardRef(({
-  children,
-  style,
-  ...props
-}, ref) => /*#__PURE__*/_jsx(Pressable, {
-  ref: ref,
-  style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
-  ...props,
-  children: pressState => typeof children === 'function' ? children(pressState) : children
-}));
+const InlinePressable = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Pressable, {
+    ref: ref,
+    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+    ...props,
+    children: pressState => typeof children === 'function' ? children(pressState) : children
+  });
+});
 InlinePressable.displayName = 'InlinePressable';
 const staticStyles = StyleSheet.create({
   inline: {

package/lib-module/Link/InlinePressable.native.js

@@ -9,16 +9,19 @@ import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWit
 
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const pressablePropsToTouchable = ({
-  unstable_pressDelay,
-  android_disableSound,
-  android_ripple,
-  // Unsupported, discard it
-  ...props
-}) => ({ ...props,
-  touchSoundDisabled: android_disableSound,
-  delayPressIn: unstable_pressDelay
-});
+const pressablePropsToTouchable = _ref => {
+  let {
+    unstable_pressDelay,
+    android_disableSound,
+    android_ripple,
+    // Unsupported, discard it
+    ...props
+  } = _ref;
+  return { ...props,
+    touchSoundDisabled: android_disableSound,
+    delayPressIn: unstable_pressDelay
+  };
+};
 /**
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
@@ -41,12 +44,13 @@ const pressablePropsToTouchable = ({
 // eslint-disable-next-line react/prop-types
 
 
-const InlinePressable = /*#__PURE__*/forwardRef(({
-  onPress,
-  children,
-  style,
-  ...rest
-}, ref) => {
+const InlinePressable = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    onPress,
+    children,
+    style,
+    ...rest
+  } = _ref2;
   const [isFocused, setIsFocused] = useState(false);
 
   const handleFocus = () => setIsFocused(true);

package/lib-module/Link/Link.js

@@ -2,15 +2,16 @@ import React, { forwardRef } from 'react';
 import { useThemeTokensCallback } from '../ThemeProvider';
 import LinkBase from './LinkBase';
 import { jsx as _jsx } from "react/jsx-runtime";
-const Link = /*#__PURE__*/forwardRef(({
-  href,
-  children,
-  accessibilityRole = 'link',
-  variant = {},
-  tokens,
-  dataSet,
-  ...linkProps
-}, ref) => {
+const Link = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    href,
+    children,
+    accessibilityRole = 'link',
+    variant = {},
+    tokens,
+    dataSet,
+    ...linkProps
+  } = _ref;
   const getTokens = useThemeTokensCallback('Link', tokens, variant);
   return /*#__PURE__*/_jsx(LinkBase, {
     href: href,

package/lib-module/Link/LinkBase.js

@@ -12,79 +12,95 @@ import { IconText, iconComponentPropTypes } from '../Icon';
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 
-const selectOuterBorderStyles = ({
-  outerBorderColor,
-  outerBorderWidth,
-  outerBorderGap,
-  borderRadius,
-  outerBorderOutline
-}) => // A view wrapper with a border on native messes up inline text alignment
-// so for now make focus styles strictly web-only
-Platform.OS === 'web' ? {
-  // Allow theme to define outline, or, turn off outline and use border if rounded corners required
-  outline: outerBorderOutline,
-  ...applyOuterBorder({
+const selectOuterBorderStyles = _ref => {
+  let {
     outerBorderColor,
     outerBorderWidth,
     outerBorderGap,
-    borderRadius
-  }),
-  // Stops focus ring stretching horizontally if parent has display: block
-  // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
-  display: 'inline-flex'
-} : {};
+    borderRadius,
+    outerBorderOutline
+  } = _ref;
+  return (// A view wrapper with a border on native messes up inline text alignment
+    // so for now make focus styles strictly web-only
+    Platform.OS === 'web' ? {
+      // Allow theme to define outline, or, turn off outline and use border if rounded corners required
+      outline: outerBorderOutline,
+      ...applyOuterBorder({
+        outerBorderColor,
+        outerBorderWidth,
+        outerBorderGap,
+        borderRadius
+      }),
+      // Stops focus ring stretching horizontally if parent has display: block
+      // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+      display: 'inline-flex'
+    } : {}
+  );
+};
 
-const selectTextStyles = ({
-  color
-}) => ({
-  color,
-  ...Platform.select({
-    web: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'color 200ms'
-    }
-  })
-});
+const selectTextStyles = _ref2 => {
+  let {
+    color
+  } = _ref2;
+  return {
+    color,
+    ...Platform.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  };
+};
 
-const selectBlockStyles = ({
-  blockFontWeight,
-  blockFontSize,
-  blockLineHeight,
-  blockFontName
-}) => applyTextStyles({
-  fontWeight: blockFontWeight,
-  fontSize: blockFontSize,
-  lineHeight: blockLineHeight,
-  fontName: blockFontName
-});
+const selectBlockStyles = _ref3 => {
+  let {
+    blockFontWeight,
+    blockFontSize,
+    blockLineHeight,
+    blockFontName
+  } = _ref3;
+  return applyTextStyles({
+    fontWeight: blockFontWeight,
+    fontSize: blockFontSize,
+    lineHeight: blockLineHeight,
+    fontName: blockFontName
+  });
+};
 
-const selectDecorationStyles = ({
-  color,
-  textLine,
-  textLineStyle
-}) => ({
-  color,
-  textDecorationLine: textLine,
-  textDecorationStyle: textLineStyle,
-  ...Platform.select({
-    web: {
-      // TODO: https://github.com/telus/universal-design-system/issues/487
-      transition: 'color 200ms'
-    }
-  })
-});
+const selectDecorationStyles = _ref4 => {
+  let {
+    color,
+    textLine,
+    textLineStyle
+  } = _ref4;
+  return {
+    color,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle,
+    ...Platform.select({
+      web: {
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        transition: 'color 200ms'
+      }
+    })
+  };
+};
 
-const selectIconTokens = ({
-  color,
-  iconSize,
-  iconTranslateX,
-  iconTranslateY
-}) => ({
-  color,
-  translateX: iconTranslateX,
-  translateY: iconTranslateY,
-  size: iconSize
-});
+const selectIconTokens = _ref5 => {
+  let {
+    color,
+    iconSize,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref5;
+  return {
+    color,
+    translateX: iconTranslateX,
+    translateY: iconTranslateY,
+    size: iconSize
+  };
+};
 /**
  * Renders a pressable text link, with optional icon. This is rendered as a block element
  * only (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.
@@ -109,17 +125,18 @@ const selectIconTokens = ({
  */
 
 
-const LinkBase = /*#__PURE__*/forwardRef(({
-  href,
-  icon,
-  iconPosition = icon ? 'left' : undefined,
-  iconProps,
-  variant,
-  tokens = {},
-  children,
-  accessibilityRole = 'link',
-  ...rawRest
-}, ref) => {
+const LinkBase = /*#__PURE__*/forwardRef((_ref6, ref) => {
+  let {
+    href,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps,
+    variant,
+    tokens = {},
+    children,
+    accessibilityRole = 'link',
+    ...rawRest
+  } = _ref6;
   const {
     onPress,
     ...props

package/lib-module/Link/TextButton.js

@@ -9,14 +9,15 @@ import LinkBase from './LinkBase';
  */
 
 import { jsx as _jsx } from "react/jsx-runtime";
-const TextButton = /*#__PURE__*/forwardRef(({
-  onPress,
-  children,
-  variant,
-  tokens,
-  accessibilityRole = 'button',
-  ...linkProps
-}, ref) => {
+const TextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    onPress,
+    children,
+    variant,
+    tokens,
+    accessibilityRole = 'button',
+    ...linkProps
+  } = _ref;
   const getTokens = useThemeTokensCallback('Link', tokens, variant);
   return /*#__PURE__*/_jsx(LinkBase, {
     onPress: onPress,