@telus-uds/components-web 4.19.0 → 5.0.0-alpha.0

package/lib/cjs/QuantitySelector/QuantitySelector.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.QuantitySelector = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _utils = require("../utils");
 var _styles = require("./styles");
-var _dictionary = _interopRequireDefault(require("./dictionary"));
-var _SideButton = _interopRequireDefault(require("./SideButton"));
+var _dictionary = require("./dictionary");
+var _QuantitySelectorSideButton = require("./QuantitySelectorSideButton");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
@@ -20,7 +20,7 @@ const isNumber = value => {
   return typeof value === 'number' && !isNaN(value);
 };
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _utils.htmlAttrs]);
-const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const QuantitySelector = exports.QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     id = 'quantity-selector',
     minNumber,
@@ -32,7 +32,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     hintPosition = 'inline',
     tooltip,
     onChange,
-    dictionary = _dictionary.default,
+    dictionary = _dictionary.dictionary,
     accessibilityLabel,
     copy = 'en',
     variant = {
@@ -159,7 +159,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         children: renderTextInput()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: flexOrder(0),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuantitySelectorSideButton.QuantitySelectorSideButton, {
           isEnabled: isDecreaseEnabled,
           onPress: () => updateNumber(number - 1),
           onDoubleClick: () => updateNumber(number - 1),
@@ -174,7 +174,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         style: flexOrder(2),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_QuantitySelectorSideButton.QuantitySelectorSideButton, {
           isEnabled: isIncreaseEnabled,
           onPress: () => updateNumber(number + 1),
           onDoubleClick: () => updateNumber(number + 1),
@@ -283,5 +283,4 @@ QuantitySelector.propTypes = {
    * If true, the quantity selector will be disabled
    */
   inactive: _propTypes.default.bool
-};
-var _default = exports.default = QuantitySelector;
+};

package/lib/cjs/QuantitySelector/{SideButton.js → QuantitySelectorSideButton.js}

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.QuantitySelectorSideButton = void 0;
 var _componentsBase = require("@telus-uds/components-base");
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const QuantitySelectorSideButton = exports.QuantitySelectorSideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     isEnabled = true,
     onPress = () => {},
@@ -64,8 +64,8 @@ const SideButton = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     ref: ref
   });
 });
-SideButton.displayName = 'QuantitySelectorSideButton';
-SideButton.propTypes = {
+QuantitySelectorSideButton.displayName = 'QuantitySelectorSideButton';
+QuantitySelectorSideButton.propTypes = {
   isEnabled: _propTypes.default.bool,
   onPress: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,
@@ -73,5 +73,4 @@ SideButton.propTypes = {
   accessibilityDisabled: _propTypes.default.bool,
   tokens: (0, _componentsBase.getTokensPropType)('QuantitySelectorSideButton'),
   variant: _propTypes.default.object
-};
-var _default = exports.default = SideButton;
+};

package/lib/cjs/QuantitySelector/dictionary.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
-var _default = exports.default = {
+exports.dictionary = void 0;
+const dictionary = exports.dictionary = {
   en: {
     accessibility: {
       a11yLabel: 'Quantity selector',

package/lib/cjs/ResponsiveImage/ResponsiveImage.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.ResponsiveImage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -22,7 +22,7 @@ const staticStyles = {
 /**
  * Provide different image sources for different screen sizes.
  */
-const ResponsiveImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const ResponsiveImage = exports.ResponsiveImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     xsSrc,
     smSrc,
@@ -103,5 +103,4 @@ ResponsiveImage.propTypes = {
    * The dataSet prop allows to pass data-* attributes element to the component.
    */
   dataSet: _propTypes.default.object
-};
-var _default = exports.default = ResponsiveImage;
+};

package/lib/cjs/Ribbon/Ribbon.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Ribbon = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -37,90 +37,88 @@ const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-186270k-1"
 })(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], _ref4 => {
   let {
-    backgroundColor
+    $backgroundColor
   } = _ref4;
-  return backgroundColor;
+  return $backgroundColor;
 }, _ref5 => {
   let {
-    padding
+    $padding
   } = _ref5;
-  return `${padding}`;
+  return `${$padding}`;
 }, _ref6 => {
   let {
-    borderRadius
+    $borderRadius
   } = _ref6;
-  return borderRadius;
+  return $borderRadius;
 }, _ref7 => {
   let {
-    boxShadow,
-    shouldWrap
+    $boxShadow
   } = _ref7;
-  return shouldWrap && boxShadow;
+  return $boxShadow;
 }, _ref8 => {
   let {
-    borderRadiusBottomLeft
+    $borderRadiusBottomLeft
   } = _ref8;
-  return borderRadiusBottomLeft;
+  return $borderRadiusBottomLeft;
 }, _ref9 => {
   let {
-    borderRadiusBottomRight
+    $borderRadiusBottomRight
   } = _ref9;
-  return borderRadiusBottomRight;
+  return $borderRadiusBottomRight;
 });
 const RibbonCurve = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
-})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;overflow:hidden;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref0 => {
   let {
-    curveBackgroundColor
+    $curveBackgroundColor
+  } = _ref0;
+  return $curveBackgroundColor;
+}, _ref1 => {
+  let {
+    $curveWidth
+  } = _ref1;
+  return $curveWidth;
+}, _ref10 => {
+  let {
+    $curveHeight
   } = _ref10;
-  return curveBackgroundColor;
+  return $curveHeight;
 }, _ref11 => {
   let {
-    curveWidth
+    $curveMarginTop
   } = _ref11;
-  return curveWidth;
+  return $curveMarginTop;
 }, _ref12 => {
   let {
-    curveHeight
+    $curveAfterRadius
   } = _ref12;
-  return curveHeight;
+  return $curveAfterRadius;
 }, _ref13 => {
   let {
-    curveMarginTop
+    $curveAfterHeight
   } = _ref13;
-  return curveMarginTop;
+  return $curveAfterHeight;
 }, _ref14 => {
   let {
-    curveAfterRadius
+    $curveAfterBackgroundColor
   } = _ref14;
-  return curveAfterRadius;
+  return $curveAfterBackgroundColor;
 }, _ref15 => {
   let {
-    curveAfterHeight
+    $curveAfterWidth
   } = _ref15;
-  return curveAfterHeight;
-}, _ref16 => {
-  let {
-    curveAfterBackgroundColor
-  } = _ref16;
-  return curveAfterBackgroundColor;
-}, _ref17 => {
-  let {
-    curveAfterWidth
-  } = _ref17;
-  return curveAfterWidth;
+  return $curveAfterWidth;
 });
-const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
+const Ribbon = exports.Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref16, ref) => {
   let {
     children,
     tokens,
-    wrap: shouldWrap = false,
     left,
     top,
     variant = {},
     ...rest
-  } = _ref18;
+  } = _ref16;
   const {
     backgroundColor,
     borderRadius,
@@ -150,8 +148,7 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
     fontSize,
     lineHeight
   } = (0, _componentsBase.useThemeTokens)('Ribbon', tokens, {
-    ...variant,
-    wrap: shouldWrap
+    ...variant
   });
   let background = backgroundColor;
   if (gradient) {
@@ -170,13 +167,12 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
     ref: ref,
     ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonContainer, {
-      shouldWrap: shouldWrap,
-      backgroundColor: background,
-      padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
-      borderRadius: `${borderRadius}px`,
-      boxShadow: `${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`,
-      borderRadiusBottomLeft: `${borderRadiusBottomLeft}px`,
-      borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
+      $backgroundColor: background,
+      $padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
+      $borderRadius: `${borderRadius}px`,
+      $boxShadow: `${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`,
+      $borderRadiusBottomLeft: `${borderRadiusBottomLeft}px`,
+      $borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
           bold: true,
@@ -191,17 +187,17 @@ const Ribbon = /*#__PURE__*/_react.default.forwardRef((_ref18, ref) => {
         },
         children: children
       })
-    }), shouldWrap && /*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonCurve, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonCurve, {
       "data-testid": "ribbon-curve",
-      backgroundColor: backgroundColor,
-      curveMarginTop: `${curveMarginTop}px`,
-      curveWidth: `${curveWidth}px`,
-      curveHeight: `${curveHeight}px`,
-      curveBackgroundColor: curveBackgroundColor,
-      curveAfterRadius: `${curveAfterRadius}px`,
-      curveAfterWidth: `${curveAfterWidth}px`,
-      curveAfterHeight: `${curveAfterHeight}px`,
-      curveAfterBackgroundColor: curveAfterBackgroundColor
+      $backgroundColor: backgroundColor,
+      $curveMarginTop: `${curveMarginTop}px`,
+      $curveWidth: `${curveWidth}px`,
+      $curveHeight: `${curveHeight}px`,
+      $curveBackgroundColor: curveBackgroundColor,
+      $curveAfterRadius: `${curveAfterRadius}px`,
+      $curveAfterWidth: `${curveAfterWidth}px`,
+      $curveAfterHeight: `${curveAfterHeight}px`,
+      $curveAfterBackgroundColor: curveAfterBackgroundColor
     })]
   });
 });
@@ -210,13 +206,8 @@ Ribbon.propTypes = {
   ...selectedSystemPropTypes,
   tokens: (0, _componentsBase.getTokensPropType)('Ribbon'),
   children: _propTypes.default.node,
-  /** show/hide the ribbon fold
-   * @deprecated please don't rely on `wrap` to turn off the wrapping (use `Badge` instead) as it will be removed in the future
-   */
-  wrap: _propTypes.default.bool,
   /** sets the left offset (triggers absolute positioning) */
   left: _propTypes.default.number,
   /** sets the top offset (triggers absolute positioning) */
   top: _propTypes.default.number
-};
-var _default = exports.default = Ribbon;
+};

package/lib/cjs/SkeletonProvider/SkeletonImage.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SkeletonImage = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SkeletonImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const SkeletonImage = exports.SkeletonImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     rounded,
     imgHeight,
@@ -41,5 +41,4 @@ SkeletonImage.propTypes = {
   sizePixels: _componentsBase.Skeleton.propTypes?.sizePixels,
   show: _propTypes.default.bool.isRequired,
   children: _propTypes.default.node
-};
-var _default = exports.default = SkeletonImage;
+};

package/lib/cjs/SkeletonProvider/SkeletonProvider.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SkeletonProvider = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
-var _Image = _interopRequireDefault(require("../Image"));
-var _SkeletonTypography = _interopRequireDefault(require("./SkeletonTypography"));
-var _SkeletonImage = _interopRequireDefault(require("./SkeletonImage"));
+var _Image = require("../Image/Image");
+var _SkeletonTypography = require("./SkeletonTypography");
+var _SkeletonImage = require("./SkeletonImage");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const SkeletonProvider = _ref => {
@@ -29,20 +29,20 @@ const SkeletonProvider = _ref => {
       const {
         children: elementChildren
       } = childElement.props;
-      const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
+      const mappedChildren = _react.default.Children.map(elementChildren, mapChild);
       childElement = /*#__PURE__*/_react.default.cloneElement(childElement, {
         children: mappedChildren
       });
     }
     if (childElement.type === _componentsBase.Typography) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonTypography.default, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonTypography.SkeletonTypography, {
         ...childElement.props.skeleton,
         show: show,
         children: childElement
       });
     }
-    if (childElement.type === _Image.default) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonImage.default, {
+    if (childElement.type === _Image.Image) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonImage.SkeletonImage, {
         ...childElement.props.skeleton,
         imgHeight: childElement.props.height,
         rounded: childElement.props.rounded,
@@ -56,8 +56,8 @@ const SkeletonProvider = _ref => {
     children: _react.default.Children.map(children, mapChild)
   });
 };
+exports.SkeletonProvider = SkeletonProvider;
 SkeletonProvider.propTypes = {
   show: _propTypes.default.bool.isRequired,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]).isRequired
-};
-var _default = exports.default = SkeletonProvider;
+};

package/lib/cjs/SkeletonProvider/SkeletonTypography.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.SkeletonTypography = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const SkeletonTypography = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const SkeletonTypography = exports.SkeletonTypography = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     show,
     size,
@@ -40,5 +40,4 @@ SkeletonTypography.propTypes = {
   sizePixels: _componentsBase.Skeleton.propTypes?.sizePixels,
   characters: _componentsBase.Skeleton.propTypes?.characters,
   lines: _componentsBase.Skeleton.propTypes?.lines
-};
-var _default = exports.default = SkeletonTypography;
+};

package/lib/cjs/Span/Span.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Span = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
@@ -17,9 +17,9 @@ const StyledSpan = /*#__PURE__*/_styledComponents.default.span.withConfig({
   componentId: "components-web__sc-o7sihn-0"
 })(["", "};"], _ref => {
   let {
-    flex
+    $flex
   } = _ref;
-  return flex ? 'display: inline-flex' : '';
+  return $flex ? 'display: inline-flex' : '';
 });
 
 /**
@@ -28,7 +28,7 @@ const StyledSpan = /*#__PURE__*/_styledComponents.default.span.withConfig({
  * Span may be used in cases where an inline span or direct access to HTML attributes is required.
  * In most cases, `Typography` should be used for text, or Paragraph for body text.
  */
-const Span = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const Span = exports.Span = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     children,
     variant,
@@ -40,7 +40,7 @@ const Span = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   const style = (0, _utils.useTypographyTheme)(variant, tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSpan, {
     "data-testid": testID,
-    flex: flex,
+    $flex: flex,
     style: style,
     ref: ref,
     ...selectProps(rest),
@@ -75,5 +75,4 @@ Span.propTypes = {
     size: _propTypes.default.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
     weight: _propTypes.default.oneOf(['semibold', 'bold'])
   })
-};
-var _default = exports.default = Span;
+};

package/lib/cjs/Spinner/Spinner.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Spinner = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _componentsBase = require("@telus-uds/components-base");
 var _portal = require("@gorhom/portal");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _SpinnerContent = _interopRequireDefault(require("./SpinnerContent"));
+var _SpinnerContent = require("./SpinnerContent");
 var _utils = require("../utils");
 var _constants = require("./constants");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -20,19 +20,19 @@ const SpinnerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-116rqck-0"
 })(_ref => {
   let {
-    inline,
-    fullScreen,
-    overlay
+    $inline,
+    $fullScreen,
+    $overlay
   } = _ref;
   return {
     position: 'relative',
-    ...(inline && {
-      display: overlay ? 'inline-block' : 'block',
+    ...($inline && {
+      display: $overlay ? 'inline-block' : 'block',
       ...(0, _utils.media)().from('md').css({
         display: 'inline-block'
       })
     }),
-    ...(fullScreen && {
+    ...($fullScreen && {
       top: '50%',
       transform: 'translateY(-50%)'
     })
@@ -55,7 +55,7 @@ const FullscreenOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig(
   componentId: "components-web__sc-116rqck-2"
 })(_ref2 => {
   let {
-    fullScreenOverLayBackground
+    $fullScreenOverLayBackground
   } = _ref2;
   return {
     position: 'fixed',
@@ -64,7 +64,7 @@ const FullscreenOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig(
     top: 0,
     left: 0,
     zIndex: _constants.BACKDROP_Z_INDEX,
-    backgroundColor: fullScreenOverLayBackground
+    backgroundColor: $fullScreenOverLayBackground
   };
 });
 const OpaqueContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
@@ -72,10 +72,10 @@ const OpaqueContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   componentId: "components-web__sc-116rqck-3"
 })(_ref3 => {
   let {
-    show = true
+    $show = true
   } = _ref3;
   return {
-    ...(show && {
+    ...($show && {
       opacity: _constants.BACKDROP_OPACITY
     })
   };
@@ -95,7 +95,7 @@ const recursiveMap = (children, fn) => _react.default.Children.map(children, chi
 /**
  * Loading indicator.
  */
-const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+const Spinner = exports.Spinner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   let {
     children,
     fullScreen = false,
@@ -122,18 +122,18 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   // Overlay spinner with persistChildrenState enabled
   if (children && persistChildrenState) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpinnerContainer, {
-      inline: inline,
+      $inline: inline,
       "aria-live": "assertive",
-      overlay: true,
+      $overlay: true,
       ...selectProps(rest),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(OpaqueContainer, {
-        show: show,
+        $show: show,
         ...(show ? {
-          inert: 'true',
+          inert: true,
           'aria-hidden': 'true'
         } : {}),
         children: children
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentOverlay, {}), show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentOverlay, {}), show && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.SpinnerContent, {
         label: label,
         labelPosition: labelPosition,
         overlay: true,
@@ -152,13 +152,13 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   if (fullScreen) {
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullscreenOverlay, {
-        fullScreenOverLayBackground: fullScreenOverLayBackground,
+        $fullScreenOverLayBackground: fullScreenOverLayBackground,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, {
-          inline: inline,
-          fullScreen: fullScreen,
+          $inline: inline,
+          $fullScreen: fullScreen,
           "aria-live": "assertive",
           ...selectProps(rest),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.SpinnerContent, {
             label: label,
             labelPosition: labelPosition,
             overlay: true,
@@ -175,11 +175,11 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   // Overlay spinner
   if (children && !persistChildrenState) {
     return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpinnerContainer, {
-      inline: inline,
+      $inline: inline,
       "aria-live": "assertive",
-      overlay: true,
+      $overlay: true,
       ...selectProps(rest),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.SpinnerContent, {
         label: label,
         labelPosition: labelPosition,
         overlay: true,
@@ -188,7 +188,8 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
         sizeVariant: sizeVariant,
         isStatic: isStatic
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(OpaqueContainer, {
-        inert: "true",
+        $show: show,
+        inert: true,
         children: recursiveMap(children, c => {
           if (c) {
             return /*#__PURE__*/_react.default.cloneElement(c, {
@@ -206,7 +207,7 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, {
     ref: ref,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.SpinnerContent, {
       label: label,
       labelPosition: labelPosition,
       size: size,
@@ -262,5 +263,4 @@ Spinner.propTypes = {
    * Use this when overlaying stateful components such as Micro Frontends (MFEs).
    */
   persistChildrenState: _propTypes.default.bool
-};
-var _default = exports.default = Spinner;
+};