@telus-uds/components-base 1.19.0 → 1.19.1

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

@@ -145,7 +145,7 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
 
   const a11yLabelText = accessibilityLabel || getCopy('accessibilityLabel'); // Placeholder is optional and may be unset by passing an empty string
 
-  const placeholderText = placeholder !== null && placeholder !== void 0 ? placeholder : a11yLabelText;
+  const placeholderText = placeholder ?? a11yLabelText;
   const {
     nativeID,
     testID,

package/lib/Select/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = exports.ANDROID_HORIZONTAL_PADDING_OFFSET = exports.ANDROID_HEIGHT_OFFSET = exports.ANDROID_DEFAULT_PADDING = void 0;
+// Because Android
+const ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = 5;
+exports.ANDROID_VALIDATION_ICON_CONTAINER_OFFSET = ANDROID_VALIDATION_ICON_CONTAINER_OFFSET;
+const ANDROID_HEIGHT_OFFSET = 12;
+exports.ANDROID_HEIGHT_OFFSET = ANDROID_HEIGHT_OFFSET;
+const ANDROID_HORIZONTAL_PADDING_OFFSET = 8;
+exports.ANDROID_HORIZONTAL_PADDING_OFFSET = ANDROID_HORIZONTAL_PADDING_OFFSET;
+const ANDROID_DEFAULT_PADDING = 0;
+exports.ANDROID_DEFAULT_PADDING = ANDROID_DEFAULT_PADDING;

package/lib/SideNav/SideNav.js

@@ -82,7 +82,7 @@ const SideNav = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
       const renderItem = (item, index, groupId) => {
         const {
-          itemId = "item-".concat(index),
+          itemId = `item-${index}`,
           onPress
         } = item.props;
 
@@ -110,7 +110,7 @@ const SideNav = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
         if (child.type === _ItemsGroup.default) {
           const {
-            groupId = "group-".concat(index)
+            groupId = `group-${index}`
           } = child.props;
           const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
 

package/lib/Skeleton/Skeleton.js

@@ -150,7 +150,7 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
       testID: "skeleton",
       style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
-    }, "skeleton-".concat(index + 1));
+    }, `skeleton-${index + 1}`);
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {

package/lib/Skeleton/skeletonWebAnimation.js

@@ -8,7 +8,7 @@ exports.default = void 0;
 var _skeleton = require("./skeleton.constant");
 
 var _default = {
-  animationDuration: "".concat(_skeleton.ANIMATION_DURATION, "ms"),
+  animationDuration: `${_skeleton.ANIMATION_DURATION}ms`,
   animationTimingFunction: 'ease-in-out',
   animationDelay: '0.5s',
   animationIterationCount: 'infinite',

package/lib/StackView/StackWrap.js

@@ -42,14 +42,12 @@ const exampleGapValue = '1px';
  */
 
 const StackWrap = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
-  var _props$gap;
-
   const [canUseCSSGap, setCanUseCSSGap] = (0, _react.useState)(false);
   const {
     space
   } = props; // Don't apply separate gap if `null` or `undefined`, so can be unset in Storybook etc
 
-  const gap = (_props$gap = props.gap) !== null && _props$gap !== void 0 ? _props$gap : space;
+  const gap = props.gap ?? space;
   const gapEqualsSpace = gap === space; // If possible, use the cleaner implementation that applies CSS `gap` styles to the container,
   // preserving direct parent-child relationships between the container and each item, which
   // can result in clearer descriptions on some screen readers (e.g. radio "X of Y" on MacOS).

package/lib/StackView/getStackedContent.js

@@ -65,7 +65,7 @@ const getStackedContent = (children, _ref) => {
   const validChildren = _react.Children.toArray(topLevelChildren).filter(Boolean);
 
   const content = validChildren.reduce((newChildren, child, index) => {
-    const boxID = "Stack-Box-".concat(index);
+    const boxID = `Stack-Box-${index}`;
     const item = box ?
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
@@ -75,7 +75,7 @@ const getStackedContent = (children, _ref) => {
       testID: boxID
     }, child) : child;
     if (!index || !space && !divider) return [...newChildren, item];
-    const testID = "Stack-".concat(divider ? 'Divider' : 'Spacer', "-").concat(index);
+    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
     const commonProps = {
       testID,
       key: testID,

package/lib/Tabs/Tabs.js

@@ -59,8 +59,6 @@ const getDefaultTabItemAccessibilityRole = parentRole => {
 
 
 const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
-  var _restProps$accessibil;
-
   let {
     tokens,
     itemTokens,
@@ -98,7 +96,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     if (hashId) setTimeout(setValue(hashId, event), 500);
   }, [items, setValue]), isPositioningReady);
   const restProps = selectProps(rest);
-  const parentAccessibilityRole = (_restProps$accessibil = restProps.accessibilityRole) !== null && _restProps$accessibil !== void 0 ? _restProps$accessibil : 'tablist';
+  const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
   const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
     ref: ref,
@@ -123,7 +121,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           linkRouterProps: itemLinkRouterProps,
           ...itemRest
         } = _ref3;
-        const itemId = id !== null && id !== void 0 ? id : label;
+        const itemId = id ?? label;
         const isSelected = Boolean(currentValue && currentValue === itemId);
 
         const handlePress = event => {

package/lib/Tags/Tags.js

@@ -135,7 +135,7 @@ const Tags = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("Tags items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`Tags items must have unique ${uniqueFields.join(', ')}`);
   }
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {

package/lib/TextInput/dictionary.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    clearButtonAccessibilityLabel: 'Clear',
+    showPasswordAccessibilityLabel: 'Show Password',
+    hidePasswordAccessibilityLabel: 'Hide Password'
+  },
+  fr: {
+    clearButtonAccessibilityLabel: 'Effacer',
+    showPasswordAccessibilityLabel: 'montrer le mot de passe',
+    hidePasswordAccessibilityLabel: 'masquer le mot de passe'
+  }
+};
+exports.default = _default;

package/lib/ThemeProvider/utils/styles.js

@@ -42,7 +42,7 @@ function applyTextStyles(_ref) {
 
   if (fontSize) {
     // If relative font sizes are needed, catch and calculate them here
-    styles.fontSize = _Platform.default.OS === 'web' && !forceAbsoluteFontSizing ? "".concat(fontSize / _systemConstants.fontBasePixels, "rem") : fontSize;
+    styles.fontSize = _Platform.default.OS === 'web' && !forceAbsoluteFontSizing ? `${fontSize / _systemConstants.fontBasePixels}rem` : fontSize;
   }
 
   if (typeof lineHeight === 'number') {
@@ -58,7 +58,7 @@ function applyTextStyles(_ref) {
   if (fontName) {
     // Don't set undefined font families. May need some validation here that the font is available.
     // Android doesn't recognise font weights natively so apply custom font weights via `fontFamily`.
-    styles.fontFamily = "".concat(fontName).concat(fontWeight).concat(fontStyle);
+    styles.fontFamily = `${fontName}${fontWeight}${fontStyle}`;
   } else if (fontWeight) {
     // If using system default font, apply the font weight directly.
     // Font weight support in Android is limited to 'bold' or anything else === 'normal'.
@@ -108,7 +108,7 @@ function applyWebShadow(_ref2) {
   } = _ref2;
   const insetString = inset ? 'inset ' : '';
   const boxShadow = {
-    boxShadow: "".concat(insetString).concat(offsetX, "px ").concat(offsetY, "px ").concat(blur, "px ").concat(spread, "px ").concat(color)
+    boxShadow: `${insetString}${offsetX}px ${offsetY}px ${blur}px ${spread}px ${color}`
   };
   return boxShadow;
 }

package/lib/ThemeProvider/utils/theme-tokens.js

@@ -28,19 +28,19 @@ const getComponentTheme = (theme, componentName) => {
   // Give clear and understandable error messages for common dev errors, for example,
   // typo in component name, missing export or accessing old version of theme
   if (!theme) {
-    throw new Error("Called useTheme's getStyle on \"".concat(componentName, "\" with no theme provided"));
+    throw new Error(`Called useTheme's getStyle on "${componentName}" with no theme provided`);
   }
 
   const themeName = ((_theme$metadata = theme.metadata) === null || _theme$metadata === void 0 ? void 0 : _theme$metadata.name) || '';
 
   if (!theme.components) {
-    throw new Error("Theme \"".concat(themeName, "\" has no components defined (looking for \"").concat(componentName, "\")"));
+    throw new Error(`Theme "${themeName}" has no components defined (looking for "${componentName}")`);
   }
 
   const componentTheme = theme.components[componentName];
 
   if (!componentTheme) {
-    throw new Error("Theme \"".concat(themeName, "\" does not have styles for component \"").concat(componentName, "\""));
+    throw new Error(`Theme "${themeName}" does not have styles for component "${componentName}"`);
   }
 
   return componentTheme;
@@ -49,11 +49,9 @@ const getComponentTheme = (theme, componentName) => {
 exports.getComponentTheme = getComponentTheme;
 
 const doesThemeConditionApply = (_ref, appearances) => {
-  var _appearances$key;
-
   let [key, value] = _ref;
   // use null rather than undefined so we can serialise the value in themes
-  const appearanceValue = (_appearances$key = appearances[key]) !== null && _appearances$key !== void 0 ? _appearances$key : null;
+  const appearanceValue = appearances[key] ?? null;
   return Array.isArray(value) ? value.includes(appearanceValue) : value === appearanceValue;
 };
 
@@ -194,7 +192,11 @@ const validateThemeTokensVersion = theme => {
   const actualThemeTokensVersion = theme === null || theme === void 0 ? void 0 : (_theme$metadata2 = theme.metadata) === null || _theme$metadata2 === void 0 ? void 0 : _theme$metadata2.themeTokensVersion;
 
   if (!(0, _satisfies.default)(actualThemeTokensVersion, expectedThemeTokensVersion)) {
-    throw new Error("Invalid UDS token schema version detected.\n\nThe UDS base components ".concat(_package.default.name, " v").concat(_package.default.version, " are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ").concat(expectedThemeTokensVersion, ". The current theme was built with @telus-uds/system-theme-tokens v").concat(actualThemeTokensVersion, ".\n\nIf you see this error than most likely you have attempted to install ").concat(_package.default.name, " and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md"));
+    throw new Error(`Invalid UDS token schema version detected.
+
+The UDS base components ${_package.default.name} v${_package.default.version} are only compatible with UDS themes that are built with @telus-uds/system-theme-tokens version that is semver compatible with ${expectedThemeTokensVersion}. The current theme was built with @telus-uds/system-theme-tokens v${actualThemeTokensVersion}.
+
+If you see this error than most likely you have attempted to install ${_package.default.name} and a UDS theme manually because you are building a multi-brand application. If you are building a single brand application, consider installing the brand specific design system package such as @telus-uds/ds-allium. For more information, see https://github.com/telus/universal-design-system/blob/main/docs/docs/multi-brand-usage.md`);
   }
 };
 

package/lib/Timeline/Timeline.js

@@ -159,7 +159,7 @@ const Timeline = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
           style: selectItemContentStyles(themeTokens, index + 1 === children.length),
           children: child
         })]
-      }, "timeline-".concat(index, "-").concat(child.displayName));
+      }, `timeline-${index}-${child.displayName}`);
     })
   });
 });

package/lib/ToggleSwitch/ToggleSwitch.js

@@ -160,7 +160,7 @@ const ToggleSwitch = /*#__PURE__*/(0, _react.forwardRef)((_ref7, ref) => {
   const getButtonTokens = buttonState => selectButtonTokens(getTokens(buttonState));
 
   const uniqueId = (0, _utils.useUniqueId)('toggleSwitch');
-  const inputId = id !== null && id !== void 0 ? id : uniqueId;
+  const inputId = id ?? uniqueId;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
     space: 2,
     direction: "row",

package/lib/ToggleSwitch/ToggleSwitchGroup.js

@@ -87,7 +87,7 @@ const ToggleSwitchGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const uniqueFields = ['id', 'label'];
 
   if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
-    throw new Error("ToggleSwitchGroup items must have unique ".concat(uniqueFields.join(', ')));
+    throw new Error(`ToggleSwitchGroup items must have unique ${uniqueFields.join(', ')}`);
   }
 
   const toggleSwitches = items.map((_ref2, index) => {

package/lib/Tooltip/Backdrop.js

@@ -19,7 +19,15 @@ function createPortalNode(nodeId) {
   // this way the backdrop stays in place when scrolling the window - that's why we need to
   // position it at the scroll position when rendering
 
-  node.style.cssText = "\n  position: absolute; \n  top: ".concat(window.scrollY, "px;\n  left: ").concat(window.scrollX, "px; \n  right: 0; \n  bottom: 0; \n  z-index: 9999; \n  pointer-events: none;\n  ");
+  node.style.cssText = `
+  position: absolute; 
+  top: ${window.scrollY}px;
+  left: ${window.scrollX}px; 
+  right: 0; 
+  bottom: 0; 
+  z-index: 9999; 
+  pointer-events: none;
+  `;
   document.body.appendChild(node);
   return node;
 }
@@ -40,7 +48,7 @@ function Backdrop(_ref) {
   } = _ref;
   const [portalNode, setPortalNode] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
-    const nodeId = "tooltip-backdrop-".concat(Date.now());
+    const nodeId = `tooltip-backdrop-${Date.now()}`;
     const node = createPortalNode(nodeId);
     setPortalNode(node);
     return () => {