@telus-uds/components-base 3.18.0 → 3.19.0

package/CHANGELOG.md

@@ -1,9 +1,25 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 16 Sep 2025 21:19:36 GMT and should not be manually modified.
+This log was last generated on Fri, 03 Oct 2025 20:34:06 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 3.19.0
+
+Fri, 03 Oct 2025 20:34:06 GMT
+
+### Minor changes
+
+- `Carousel`: add swipe functionality to MD viewport (guillermo.peitzner@telus.com)
+- `MultiSelectFilter`: add documentation for JSX usage in `subtitle` prop (oscar.palencia@telus.com)
+- `StepTracker`: add style bar variant (guillermo.peitzner@telus.com)
+- Bump @telus-uds/system-theme-tokens to v4.15.0
+
+### Patches
+
+- `TabBar`: fix item token management (guillermo.peitzner@telus.com)
+- `Box`: fix background image contain position (guillermo.peitzner@telus.com)
+
 ## 3.18.0
 
 Tue, 16 Sep 2025 21:19:36 GMT

package/jest.config.cjs

@@ -29,12 +29,20 @@ module.exports = {
   ],
   cacheDirectory: '.cache/jest-cache-react-17',
   moduleNameMapper: {
-    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
+    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy',
+    '^@telus-uds/system-constants$': '<rootDir>/../system-constants/src',
+    '^@telus-uds/system-theme-tokens$': '<rootDir>/../system-theme-tokens/src'
   },
   testMatch: [`<rootDir>/__tests__/**/*.test.js?(x)`],
   transformIgnorePatterns: [
     'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|react-native-web|@react-native-picker)'
   ],
-  // Count everything in src when calculating coverage
+  // Count everything in src when calculating coverage,
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/packages/palette-allium/build/'
+    // '/@telus-uds/palette-allium',
+    // '/@telus-uds/palette-allium/build/rn/icons/, /@telus-uds/palette-allium/build/web/icons/'
+  ],
   collectCoverageFrom: ['src/**/*.{js,jsx}']
 }

package/lib/cjs/Box/Box.js

@@ -14,9 +14,11 @@ var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _ThemeProvider = require("../ThemeProvider");
 var _utils = require("../utils");
-var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+var _backgroundImageStylesMap = _interopRequireWildcard(require("./backgroundImageStylesMap"));
 var _ViewportProvider = require("../ViewportProvider");
 var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
@@ -75,39 +77,51 @@ const setBackgroundImage = _ref2 => {
     backgroundImageResizeMode,
     backgroundImagePosition,
     backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
+    content,
+    testID
   } = _ref2;
-  if (backgroundImageResizeMode === 'contain') {
-    const containedViewStyle = {
-      ...staticStyles.containedView,
-      width: backgroundImageWidth,
-      height: backgroundImageHeight,
-      ..._backgroundImageStylesMap.default[`${backgroundImagePosition}-${backgroundImageAlign}`]
-    };
+  const backgroundImageTestID = testID ? `${testID}-background-image` : undefined;
+  if (backgroundImageResizeMode === 'contain' && backgroundImagePosition && backgroundImageAlign) {
+    const positionKey = `${backgroundImagePosition}-${backgroundImageAlign}`;
+    if (_Platform.default.OS === 'web') {
+      const backgroundPosition = _backgroundImageStylesMap.backgroundPositions[positionKey] || 'center center';
+      const backgroundImageStyle = {
+        backgroundImage: `url(${src})`,
+        backgroundSize: 'contain',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition
+      };
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.imageBackground, backgroundImageStyle],
+        "aria-label": alt,
+        testID: backgroundImageTestID,
+        children: content
+      });
+    }
+    const positionStyles = _backgroundImageStylesMap.default[positionKey] || {};
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: staticStyles.containedContainer,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: containedViewStyle,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
-          source: {
-            uri: src
-          },
-          alt: alt,
-          style: staticStyles.containedImage,
-          accessibilityIgnoresInvertColors: true
-        })
-      }), content]
+      style: staticStyles.containContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+        source: src,
+        resizeMode: backgroundImageResizeMode,
+        style: [staticStyles.containImage, positionStyles],
+        accessible: true,
+        accessibilityLabel: alt,
+        accessibilityIgnoresInvertColors: true,
+        testID: backgroundImageTestID
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.contentOverlay,
+        children: content
+      })]
     });
   }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
-    source: {
-      uri: src
-    },
-    alt: alt,
-    style: staticStyles.backgroundImageContainer,
+    source: src,
     resizeMode: backgroundImageResizeMode,
+    style: staticStyles.imageBackground,
+    accessible: true,
+    accessibilityLabel: alt,
+    testID: backgroundImageTestID,
     children: content
   });
 };
@@ -264,31 +278,61 @@ const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     align = ''
   } = backgroundImage || {};
   const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
-  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position, 'none');
-  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align, 'stretch');
-  const [backgroundImageWidth, setBackgroundImageWidth] = _react.default.useState(0);
-  const [backgroundImageHeight, setBackgroundImageHeight] = _react.default.useState(0);
-  if (backgroundImage) content = setBackgroundImage({
-    src,
-    alt,
-    backgroundImageResizeMode,
-    backgroundImagePosition,
-    backgroundImageAlign,
-    backgroundImageWidth,
-    backgroundImageHeight,
-    content
-  });
-  _react.default.useEffect(() => {
-    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
-      _Image.default.getSize(src, (width, height) => {
-        // Only update the state if the size has changed
-        if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
-          setBackgroundImageWidth(width);
-          setBackgroundImageHeight(height);
-        }
+  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position);
+  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align);
+  const imageSourceViewport = (0, _utils.formatImageSource)((0, _utils.useResponsiveProp)(src));
+  if (backgroundImage && src) {
+    const {
+      paddingTop,
+      paddingBottom,
+      paddingLeft,
+      paddingRight,
+      ...containerStyle
+    } = boxStyles;
+    const hasPadding = paddingTop || paddingBottom || paddingLeft || paddingRight;
+    const paddedContent = hasPadding ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: {
+        paddingTop,
+        paddingBottom,
+        paddingLeft,
+        paddingRight
+      },
+      children: children
+    }) : children;
+    content = setBackgroundImage({
+      src: imageSourceViewport,
+      alt,
+      backgroundImageResizeMode,
+      backgroundImagePosition,
+      backgroundImageAlign,
+      content: paddedContent,
+      testID
+    });
+    const dataSetValue = boxMediaIds ? {
+      media: boxMediaIds,
+      ...dataSet
+    } : dataSet;
+    if (scroll) {
+      const scrollProps = typeof scroll === 'object' ? scroll : {};
+      scrollProps.contentContainerStyle = [containerStyle, scrollProps.contentContainerStyle];
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+        ...scrollProps,
+        ...props,
+        testID: testID,
+        dataSet: dataSetValue,
+        ref: ref,
+        children: content
       });
     }
-  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      ...props,
+      style: containerStyle,
+      testID: testID,
+      dataSet: dataSetValue,
+      ref: ref,
+      children: content
+    });
+  }
   const dataSetValue = boxMediaIds ? {
     media: boxMediaIds,
     ...dataSet
@@ -401,10 +445,12 @@ Box.propTypes = {
   */
   customGradient: _propTypes.default.func,
   /**
-   * Use this prop to add a background image to the box.
+   * Apply background image to the box.
    */
   backgroundImage: _propTypes.default.shape({
-    src: _propTypes.default.string.isRequired,
+    // The image src is either a URI string or a number (when a local image src is bundled in IOS or Android app)
+    // src is an object when used responsively to provide different image sources for different screen sizes
+    src: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.object]).isRequired,
     alt: _propTypes.default.string,
     resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
     position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
@@ -413,18 +459,24 @@ Box.propTypes = {
 };
 var _default = exports.default = Box;
 const staticStyles = _StyleSheet.default.create({
-  backgroundImageContainer: {
-    flex: 1
+  imageBackground: {
+    width: '100%',
+    height: '100%'
   },
-  containedContainer: {
-    flex: 1,
-    overflow: 'hidden'
+  contentOverlay: {
+    position: 'relative',
+    width: '100%',
+    height: '100%',
+    zIndex: 1
   },
-  containedView: {
-    zIndex: -1,
-    position: 'absolute'
+  containContainer: {
+    width: '100%',
+    height: '100%',
+    overflow: 'hidden',
+    position: 'relative'
   },
-  containedImage: {
+  containImage: {
+    position: 'absolute',
     width: '100%',
     height: '100%'
   }

package/lib/cjs/Box/backgroundImageStylesMap.js

@@ -3,15 +3,20 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.default = exports.backgroundPositions = void 0;
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const webStyles = {
   'top-start': {
-    top: 0
+    top: 0,
+    left: 0
   },
   'top-center': {
-    left: 0,
-    right: 0,
-    marginHorizontal: 'auto'
+    top: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
   },
   'top-end': {
     top: 0,
@@ -22,60 +27,160 @@ var _default = exports.default = {
     right: 0
   },
   'left-start': {
-    top: 0
+    top: 0,
+    left: 0
   },
   'left-center': {
-    top: 0,
+    top: '50%',
+    left: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'right-center': {
+    top: '50%',
+    right: 0,
+    transform: [{
+      translateY: '-50%'
+    }]
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    bottom: 0,
+    left: '50%',
+    transform: [{
+      translateX: '-50%'
+    }]
+  },
+  'bottom-end': {
     bottom: 0,
-    marginVertical: 'auto'
+    right: 0
+  },
+  'right-end': {
+    bottom: 0,
+    right: 0
   },
-  'none-start': {
+  'top-stretch': {
+    top: 0,
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
     top: 0,
     bottom: 0,
-    marginVertical: 'auto'
+    left: 0,
+    height: '100%'
   },
-  'none-center': {
+  'right-stretch': {
     top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
     bottom: 0,
     left: 0,
     right: 0,
-    margin: 'auto'
+    width: '100%'
+  }
+};
+const webBackgroundPositions = {
+  'top-start': 'left top',
+  'top-center': 'center top',
+  'top-end': 'right top',
+  'bottom-start': 'left bottom',
+  'bottom-center': 'center bottom',
+  'bottom-end': 'right bottom',
+  'left-center': 'left center',
+  'right-center': 'right center'
+};
+const nativeStyles = {
+  'top-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
   },
-  'right-center': {
+  'top-center': {
+    top: 0,
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
+  },
+  'top-end': {
     top: 0,
-    bottom: 0,
     right: 0,
-    marginVertical: 'auto'
+    width: 150,
+    height: 200
   },
-  'none-end': {
+  'right-start': {
     top: 0,
-    bottom: 0,
     right: 0,
-    marginVertical: 'auto'
+    width: 150,
+    height: 200
+  },
+  'left-start': {
+    top: 0,
+    left: 0,
+    width: 150,
+    height: 200
+  },
+  'left-center': {
+    left: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
+  },
+  'right-center': {
+    right: 0,
+    top: '50%',
+    marginTop: -100,
+    width: 150,
+    height: 200
   },
   'bottom-start': {
     bottom: 0,
-    left: 0
+    left: 0,
+    width: 150,
+    height: 200
   },
   'left-end': {
     bottom: 0,
-    left: 0
+    left: 0,
+    width: 150,
+    height: 200
   },
   'bottom-center': {
-    left: 0,
-    right: 0,
     bottom: 0,
-    marginHorizontal: 'auto'
+    left: '50%',
+    marginLeft: -75,
+    width: 150,
+    height: 200
   },
   'bottom-end': {
+    bottom: 0,
     right: 0,
-    bottom: 0
+    width: 150,
+    height: 200
   },
   'right-end': {
+    bottom: 0,
     right: 0,
-    bottom: 0
+    width: 150,
+    height: 200
   },
   'top-stretch': {
+    top: 0,
     left: 0,
     right: 0,
     width: '100%'
@@ -83,6 +188,7 @@ var _default = exports.default = {
   'left-stretch': {
     top: 0,
     bottom: 0,
+    left: 0,
     height: '100%'
   },
   'right-stretch': {
@@ -92,9 +198,11 @@ var _default = exports.default = {
     height: '100%'
   },
   'bottom-stretch': {
+    bottom: 0,
     left: 0,
     right: 0,
-    bottom: 0,
     width: '100%'
   }
-};
+};
+const backgroundPositions = exports.backgroundPositions = _Platform.default.OS === 'web' ? webBackgroundPositions : {};
+var _default = exports.default = _Platform.default.OS === 'web' ? webStyles : nativeStyles;

package/lib/cjs/Carousel/Carousel.js

@@ -724,7 +724,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
       return false;
     }
     if (_Platform.default.OS === 'web') {
-      return !!(viewport === 'xs' || viewport === 'sm');
+      return !!(viewport === 'xs' || viewport === 'sm' || viewport === 'md' && (0, _utils.isTouchDevice)());
     }
     return true;
   }, [viewport, totalItems]);

package/lib/cjs/MultiSelectFilter/MultiSelectFilter.js

@@ -489,9 +489,9 @@ MultiSelectFilter.propTypes = {
    */
   label: _propTypes.default.string.isRequired,
   /**
-   * The text for the subtitle
+   * The text for the subtitle. Can also be JSX.
    */
-  subtitle: _propTypes.default.string,
+  subtitle: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/lib/cjs/StepTracker/Step.js

@@ -157,6 +157,13 @@ const getStepTestID = (isCompleted, isCurrent) => {
   }
   return testID;
 };
+const selectBarContainerStyles = (themeTokens, isCompleted, isCurrent) => ({
+  backgroundColor: isCompleted ? themeTokens.barCompletedBackgroundColor : themeTokens.barBackgroundColor,
+  height: themeTokens.barHeight,
+  ...(isCurrent && {
+    backgroundColor: themeTokens.barCurrentBackgroundColor
+  })
+});
 
 /**
  * A single step of a StepTracker.
@@ -169,6 +176,7 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     stepCount = 0,
     stepIndex = 0,
     tokens,
+    isBarVariant,
     ...rest
   } = _ref8;
   const {
@@ -197,7 +205,10 @@ const Step = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     accessibilityCurrent: status === stepIndex,
     ref: ref,
     ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: [isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectBarContainerStyles(themeTokens, isCompleted, isCurrent),
+      testID: getStepTestID(isCompleted, isCurrent)
+    }), !isBarVariant && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       direction: "row",
       space: 0,
       tokens: {

package/lib/cjs/StepTracker/StepTracker.js

@@ -19,6 +19,7 @@ var _Step = _interopRequireDefault(require("./Step"));
 var _dictionary = _interopRequireDefault(require("./dictionary"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const STYLE_BAR_VARIANT = 'bar';
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 const selectContainerStyles = _ref => {
   let {
@@ -59,6 +60,14 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
     themeOptions
   });
 };
+const selectStepsContainerStyles = _ref4 => {
+  let {
+    barGap
+  } = _ref4;
+  return {
+    gap: barGap
+  };
+};
 
 /**
  * StepTracker component shows the current position in a sequence of steps.
@@ -92,7 +101,7 @@ const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
  * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
  *
  */
-const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
   let {
     current = 0,
     copy = 'en',
@@ -101,7 +110,8 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     tokens,
     variant,
     ...rest
-  } = _ref4;
+  } = _ref5;
+  const isBarVariant = variant?.style === STYLE_BAR_VARIANT;
   const viewport = (0, _ViewportProvider.useViewport)();
   const {
     showStepTrackerLabel,
@@ -147,7 +157,7 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
       space: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: staticStyles.stepsContainer,
+        style: [staticStyles.stepsContainer, selectStepsContainerStyles(themeTokens)],
         accessibilityRole: stepsContainerAccessibilityRole,
         children: steps.map((label, index) => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
@@ -158,7 +168,8 @@ const StepTracker = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
             stepCount: steps.length,
             tokens: themeTokens,
             accessibilityRole: stepAccessibilityRole,
-            accessibilityCurrent: current === index && _Platform.default.OS === 'web' && 'step'
+            accessibilityCurrent: current === index && _Platform.default.OS === 'web' && 'step',
+            isBarVariant: isBarVariant
           }, label);
         })
       }), showStepTrackerLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/cjs/TabBar/TabBar.js

@@ -91,7 +91,8 @@ const TabBar = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         iconActive: item.iconActive,
         onPress: () => handlePress(item.id),
         id: `tab-item-${index}`,
-        accessibilityRole: "tablist"
+        accessibilityRole: "tablist",
+        tokens: item.tokens
       }, item.id))
     })
   });
@@ -105,7 +106,8 @@ TabBar.propTypes = {
     icon: _propTypes.default.node,
     iconActive: _propTypes.default.node,
     label: _propTypes.default.string.isRequired,
-    href: _propTypes.default.string
+    href: _propTypes.default.string,
+    tokens: (0, _utils.getTokensPropType)('TabBarItem')
   })).isRequired,
   /** Id of the initially selected item. */
   initiallySelectedItem: _propTypes.default.number,

package/lib/cjs/TabBar/index.js

@@ -5,5 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _TabBar = _interopRequireDefault(require("./TabBar"));
+var _TabBarItem = _interopRequireDefault(require("./TabBarItem"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_TabBar.default.Item = _TabBarItem.default;
 var _default = exports.default = _TabBar.default;

package/lib/cjs/Tooltip/Backdrop.js

@@ -21,7 +21,7 @@ function createPortalNode(nodeId) {
   left: ${window.scrollX}px; 
   right: 0; 
   bottom: 0; 
-  z-index: 9999; 
+  z-index: 100000; 
   pointer-events: none;
   `;
   document.body.appendChild(node);