@telus-uds/components-web 2.44.0 → 3.0.1

package/lib/SkeletonProvider/SkeletonImage.js

@@ -1,16 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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");
 var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const SkeletonImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Skeleton } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonImage = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     rounded,
     imgHeight,
@@ -25,7 +18,7 @@ const SkeletonImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     return children;
   }
   const shape = rounded !== 'circle' ? 'box' : rounded;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
+  return /*#__PURE__*/_jsx(Skeleton, {
     size: size,
     sizePixels: sizePixels,
     sizeIndex: sizeIndex,
@@ -35,13 +28,12 @@ const SkeletonImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 });
 SkeletonImage.displayName = 'SkeletonImage';
 SkeletonImage.propTypes = {
-  imgHeight: _propTypes.default.number,
-  rounded: _propTypes.default.oneOf(['circle', 'corners']),
-  size: (_Skeleton$propTypes = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
-  sizeIndex: (_Skeleton$propTypes2 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
-  sizePixels: (_Skeleton$propTypes3 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
-  show: _propTypes.default.bool.isRequired,
-  children: _propTypes.default.node
+  imgHeight: PropTypes.number,
+  rounded: PropTypes.oneOf(['circle', 'corners']),
+  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
+  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
+  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.node
 };
-var _default = SkeletonImage;
-exports.default = _default;
+export default SkeletonImage;

package/lib/SkeletonProvider/SkeletonProvider.js

@@ -1,17 +1,10 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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 _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Typography } from '@telus-uds/components-base';
+import Image from '../Image';
+import SkeletonTypography from './SkeletonTypography';
+import SkeletonImage from './SkeletonImage';
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 const SkeletonProvider = _ref => {
   let {
     children,
@@ -30,19 +23,19 @@ const SkeletonProvider = _ref => {
         children: elementChildren
       } = childElement.props;
       const mappedChildren = Array.isArray(elementChildren) ? elementChildren.map(mapChild) : mapChild(elementChildren);
-      childElement = /*#__PURE__*/_react.default.cloneElement(childElement, {
+      childElement = /*#__PURE__*/React.cloneElement(childElement, {
         children: mappedChildren
       });
     }
-    if (childElement.type === _componentsBase.Typography) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonTypography.default, {
+    if (childElement.type === Typography) {
+      return /*#__PURE__*/_jsx(SkeletonTypography, {
         ...childElement.props.skeleton,
         show: show,
         children: childElement
       });
     }
-    if (childElement.type === _Image.default) {
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkeletonImage.default, {
+    if (childElement.type === Image) {
+      return /*#__PURE__*/_jsx(SkeletonImage, {
         ...childElement.props.skeleton,
         imgHeight: childElement.props.height,
         rounded: childElement.props.rounded,
@@ -52,13 +45,12 @@ const SkeletonProvider = _ref => {
     }
     return childElement;
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-    children: _react.default.Children.map(children, mapChild)
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: React.Children.map(children, mapChild)
   });
 };
 SkeletonProvider.propTypes = {
-  show: _propTypes.default.bool.isRequired,
-  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]).isRequired
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]).isRequired
 };
-var _default = SkeletonProvider;
-exports.default = _default;
+export default SkeletonProvider;

package/lib/SkeletonProvider/SkeletonTypography.js

@@ -1,16 +1,9 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = 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");
 var _Skeleton$propTypes, _Skeleton$propTypes2, _Skeleton$propTypes3, _Skeleton$propTypes4, _Skeleton$propTypes5;
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const SkeletonTypography = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Skeleton } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+const SkeletonTypography = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     show,
     size,
@@ -23,7 +16,7 @@ const SkeletonTypography = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
   if (!show) {
     return children;
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Skeleton, {
+  return /*#__PURE__*/_jsx(Skeleton, {
     size: size,
     sizeIndex: sizeIndex,
     sizePixels: sizePixels,
@@ -34,13 +27,12 @@ const SkeletonTypography = /*#__PURE__*/_react.default.forwardRef((_ref, ref) =>
 });
 SkeletonTypography.displayName = 'SkeletonTypography';
 SkeletonTypography.propTypes = {
-  show: _propTypes.default.bool.isRequired,
-  children: _propTypes.default.node,
-  size: (_Skeleton$propTypes = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
-  sizeIndex: (_Skeleton$propTypes2 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
-  sizePixels: (_Skeleton$propTypes3 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
-  characters: (_Skeleton$propTypes4 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes4 === void 0 ? void 0 : _Skeleton$propTypes4.characters,
-  lines: (_Skeleton$propTypes5 = _componentsBase.Skeleton.propTypes) === null || _Skeleton$propTypes5 === void 0 ? void 0 : _Skeleton$propTypes5.lines
+  show: PropTypes.bool.isRequired,
+  children: PropTypes.node,
+  size: (_Skeleton$propTypes = Skeleton.propTypes) === null || _Skeleton$propTypes === void 0 ? void 0 : _Skeleton$propTypes.size,
+  sizeIndex: (_Skeleton$propTypes2 = Skeleton.propTypes) === null || _Skeleton$propTypes2 === void 0 ? void 0 : _Skeleton$propTypes2.sizeIndex,
+  sizePixels: (_Skeleton$propTypes3 = Skeleton.propTypes) === null || _Skeleton$propTypes3 === void 0 ? void 0 : _Skeleton$propTypes3.sizePixels,
+  characters: (_Skeleton$propTypes4 = Skeleton.propTypes) === null || _Skeleton$propTypes4 === void 0 ? void 0 : _Skeleton$propTypes4.characters,
+  lines: (_Skeleton$propTypes5 = Skeleton.propTypes) === null || _Skeleton$propTypes5 === void 0 ? void 0 : _Skeleton$propTypes5.lines
 };
-var _default = SkeletonTypography;
-exports.default = _default;
+export default SkeletonTypography;

package/lib/SkeletonProvider/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _SkeletonProvider = _interopRequireDefault(require("./SkeletonProvider"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _SkeletonProvider.default;
-exports.default = _default;
+import SkeletonProvider from './SkeletonProvider';
+export default SkeletonProvider;

package/lib/Span/Span.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _utils = require("../utils");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const StyledSpan = /*#__PURE__*/_styledComponents.default.span.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { getTokensPropType, selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs, useTypographyTheme } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const StyledSpan = /*#__PURE__*/styled.span.withConfig({
   displayName: "Span__StyledSpan",
   componentId: "components-web__sc-o7sihn-0"
 })(["", "};"], _ref => {
@@ -28,7 +21,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 = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     variant,
@@ -37,8 +30,8 @@ const Span = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     flex,
     ...rest
   } = _ref2;
-  const style = (0, _utils.useTypographyTheme)(variant, tokens);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledSpan, {
+  const style = useTypographyTheme(variant, tokens);
+  return /*#__PURE__*/_jsx(StyledSpan, {
     "data-testid": testID,
     flex: flex,
     style: style,
@@ -50,31 +43,30 @@ const Span = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
 Span.displayName = 'Span';
 Span.propTypes = {
   ...selectedSystemPropTypes,
-  children: _propTypes.default.node.isRequired,
+  children: PropTypes.node.isRequired,
   /**
    * Adds `data-testid` attribute for testing
    */
-  testID: _propTypes.default.string,
+  testID: PropTypes.string,
   /**
    * Sets display to inline-flex so that children are laid out using the flex model.
    * Use this if the span contains children that expect to be inside a flex container.
    */
-  flex: _propTypes.default.bool,
+  flex: PropTypes.bool,
   /**
    * Span takes the same tokens overrides as Typography
    */
-  tokens: (0, _componentsBase.getTokensPropType)('Typography'),
+  tokens: getTokensPropType('Typography'),
   /**
    * Span can take any of Typography's theme variants
    */
-  variant: _propTypes.default.exact({
-    bold: _propTypes.default.bool,
-    colour: _propTypes.default.oneOf(['secondary', 'tertiary']),
-    compact: _propTypes.default.bool,
-    inverse: _propTypes.default.bool,
-    size: _propTypes.default.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
-    weight: _propTypes.default.oneOf(['semibold', 'bold'])
+  variant: PropTypes.exact({
+    bold: PropTypes.bool,
+    colour: PropTypes.oneOf(['secondary', 'tertiary']),
+    compact: PropTypes.bool,
+    inverse: PropTypes.bool,
+    size: PropTypes.oneOf(['micro', 'small', 'large', 'eyebrow', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'display1', 'display2']),
+    weight: PropTypes.oneOf(['semibold', 'bold'])
   })
 };
-var _default = Span;
-exports.default = _default;
+export default Span;

package/lib/Span/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Span = _interopRequireDefault(require("./Span"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Span.default;
-exports.default = _default;
+import Span from './Span';
+export default Span;

package/lib/Spinner/Spinner.js

@@ -1,21 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _portal = require("@gorhom/portal");
-var _SpinnerContent = _interopRequireDefault(require("./SpinnerContent"));
-var _utils = require("../utils");
-var _constants = require("./constants");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const SpinnerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { selectSystemProps, useScrollBlocking, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
+import { Portal } from '@gorhom/portal';
+import SpinnerContent from './SpinnerContent';
+import { htmlAttrs, media } from '../utils';
+import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const SpinnerContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spinner__SpinnerContainer",
   componentId: "components-web__sc-116rqck-0"
 })(_ref => {
@@ -27,7 +20,7 @@ const SpinnerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     position: 'relative',
     ...(inline && {
       display: 'block',
-      ...(0, _utils.media)().from('md').css({
+      ...media().from('md').css({
         display: 'inline-block'
       })
     }),
@@ -37,16 +30,16 @@ const SpinnerContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     })
   };
 });
-const ContentOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const ContentOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spinner__ContentOverlay",
   componentId: "components-web__sc-116rqck-1"
 })({
   position: 'absolute',
   width: '100%',
   height: '100%',
-  zIndex: _constants.BACKDROP_Z_INDEX
+  zIndex: BACKDROP_Z_INDEX
 });
-const FullscreenOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const FullscreenOverlay = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spinner__FullscreenOverlay",
   componentId: "components-web__sc-116rqck-2"
 })(_ref2 => {
@@ -59,22 +52,22 @@ const FullscreenOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig(
     height: '100vh',
     top: 0,
     left: 0,
-    zIndex: _constants.BACKDROP_Z_INDEX,
+    zIndex: BACKDROP_Z_INDEX,
     backgroundColor: fullScreenOverLayBackground
   };
 });
-const OpaqueContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+const OpaqueContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Spinner__OpaqueContainer",
   componentId: "components-web__sc-116rqck-3"
 })({
-  opacity: _constants.BACKDROP_OPACITY
+  opacity: BACKDROP_OPACITY
 });
-const recursiveMap = (children, fn) => _react.default.Children.map(children, child => {
-  if (! /*#__PURE__*/_react.default.isValidElement(child)) {
+const recursiveMap = (children, fn) => React.Children.map(children, child => {
+  if (! /*#__PURE__*/React.isValidElement(child)) {
     return child;
   }
   if (child.props.children) {
-    return fn( /*#__PURE__*/_react.default.cloneElement(child, {
+    return fn(/*#__PURE__*/React.cloneElement(child, {
       children: recursiveMap(child.props.children, fn)
     }));
   }
@@ -84,7 +77,7 @@ const recursiveMap = (children, fn) => _react.default.Children.map(children, chi
 /**
  * Loading indicator.
  */
-const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const Spinner = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
     fullScreen = false,
@@ -101,26 +94,26 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     fullScreenOverLayBackground,
     size,
     thickness
-  } = (0, _componentsBase.useThemeTokens)('Spinner', tokens, variant);
+  } = useThemeTokens('Spinner', tokens, variant);
   const {
     size: sizeVariant = 'large'
   } = variant;
-  (0, _componentsBase.useScrollBlocking)([fullScreen, show]);
+  useScrollBlocking([fullScreen, show]);
   if (!show) {
     return children ?? null;
   }
 
   // Full screen spinner
   if (fullScreen) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(FullscreenOverlay, {
+    return /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(FullscreenOverlay, {
         fullScreenOverLayBackground: fullScreenOverLayBackground,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, {
+        children: /*#__PURE__*/_jsx(SpinnerContainer, {
           inline: inline,
           fullScreen: fullScreen,
           "aria-live": "assertive",
           ...selectProps(rest),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+          children: /*#__PURE__*/_jsx(SpinnerContent, {
             label: label,
             labelPosition: labelPosition,
             overlay: true,
@@ -136,11 +129,11 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 
   // Overlay spinner
   if (children) {
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(SpinnerContainer, {
+    return /*#__PURE__*/_jsxs(SpinnerContainer, {
       inline: inline,
       "aria-live": "assertive",
       ...selectProps(rest),
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+      children: [/*#__PURE__*/_jsx(SpinnerContent, {
         label: label,
         labelPosition: labelPosition,
         overlay: true,
@@ -148,11 +141,11 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
         thickness: thickness,
         sizeVariant: sizeVariant,
         isStatic: isStatic
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentOverlay, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(OpaqueContainer, {
+      }), /*#__PURE__*/_jsx(ContentOverlay, {}), /*#__PURE__*/_jsx(OpaqueContainer, {
         inert: "true",
         children: recursiveMap(children, c => {
           if (c) {
-            return /*#__PURE__*/_react.default.cloneElement(c, {
+            return /*#__PURE__*/React.cloneElement(c, {
               tabIndex: '-1',
               'aria-hidden': 'true'
             });
@@ -164,10 +157,10 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   }
 
   // Standalone spinner
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpinnerContainer, {
+  return /*#__PURE__*/_jsx(SpinnerContainer, {
     ref: ref,
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_SpinnerContent.default, {
+    children: /*#__PURE__*/_jsx(SpinnerContent, {
       label: label,
       labelPosition: labelPosition,
       size: size,
@@ -180,27 +173,27 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
 Spinner.displayName = 'Spinner';
 Spinner.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _componentsBase.getTokensPropType)('Spinner'),
+  tokens: getTokensPropType('Spinner'),
   /**
    * Content to be overlaid while the spinner is active. Can be text, any HTML element,
    * or any component.
    */
-  children: _propTypes.default.node,
+  children: PropTypes.node,
   /**
    * Enables body locking.
    */
-  fullScreen: _propTypes.default.bool,
+  fullScreen: PropTypes.bool,
   /**
    * Set the inline prop to true if the Spinner should only cover its children; if
    * the Spinner should cover the full width of its parent regardless of the size of
    * its children, inline should be set to false
    */
-  inline: _propTypes.default.bool,
+  inline: PropTypes.bool,
   /**
    * Communicates a message to assistive technology while visible. This same message
    * will appear underneath the spinner when its `size` is `large`.
    */
-  label: _propTypes.default.string.isRequired,
+  label: PropTypes.string.isRequired,
   /**
    * The size of the spinner
    */
@@ -208,15 +201,14 @@ Spinner.propTypes = {
   /**
    * Whether or not to render the spinner.
    */
-  show: _propTypes.default.bool,
+  show: PropTypes.bool,
   /**
    * If true, it should render a static spinner
    */
-  isStatic: _propTypes.default.bool,
+  isStatic: PropTypes.bool,
   /**
    * Determine where the label of the spinner should be placed, left, right, bottom or top.
    */
-  labelPosition: _propTypes.default.string
+  labelPosition: PropTypes.string
 };
-var _default = Spinner;
-exports.default = _default;
+export default Spinner;

package/lib/Spinner/SpinnerContent.js

@@ -1,19 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _componentsBase = require("@telus-uds/components-base");
-var _utils = require("../utils");
-var _constants = require("./constants");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { ActivityIndicator, StackView, Typography, selectSystemProps } from '@telus-uds/components-base';
+import { htmlAttrs } from '../utils';
+import { BACKDROP_Z_INDEX, LARGE } from './constants';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const Container = /*#__PURE__*/styled.div.withConfig({
   displayName: "SpinnerContent__Container",
   componentId: "components-web__sc-1c8bd8e-0"
 })(_ref => {
@@ -29,11 +22,11 @@ const Container = /*#__PURE__*/_styledComponents.default.div.withConfig({
       top: '50%',
       left: '50%',
       transform: 'translate(-50%, -50%)',
-      zIndex: _constants.BACKDROP_Z_INDEX
+      zIndex: BACKDROP_Z_INDEX
     })
   };
 });
-const SpinnerContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const SpinnerContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     label,
     labelPosition,
@@ -50,16 +43,16 @@ const SpinnerContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
     left: 'row-reverse',
     right: 'row'
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Container, {
+  return /*#__PURE__*/_jsx(Container, {
     overlay: overlay,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    children: /*#__PURE__*/_jsxs(StackView, {
       space: 3,
       tokens: {
         alignItems: 'center'
       },
       direction: labelMapping[labelPosition],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ActivityIndicator, {
+      children: [/*#__PURE__*/_jsx(ActivityIndicator, {
         label: label,
         tokens: {
           size,
@@ -67,7 +60,7 @@ const SpinnerContent = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
         },
         isStatic: isStatic,
         ...selectProps(rest)
-      }), sizeVariant === _constants.LARGE && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+      }), sizeVariant === LARGE && /*#__PURE__*/_jsx(Typography, {
         children: label
       })]
     })
@@ -79,23 +72,22 @@ SpinnerContent.propTypes = {
   /**
    * Communicates a message to assistive technology while visible. This same message will appear underneath the spinner when its `size` is `large`.
    */
-  label: _propTypes.default.string.isRequired,
+  label: PropTypes.string.isRequired,
   /**
    * Whether the container has to have an overlay styling.
    */
-  overlay: _propTypes.default.bool,
+  overlay: PropTypes.bool,
   /**
    * Size (width and height) of the spinner.
    */
-  size: _propTypes.default.number,
+  size: PropTypes.number,
   /**
    * The size of the spinner
    */
-  sizeVariant: _propTypes.default.oneOf(['large', 'small']),
+  sizeVariant: PropTypes.oneOf(['large', 'small']),
   /**
    * If true, it should render a static spinner
    */
-  isStatic: _propTypes.default.bool
+  isStatic: PropTypes.bool
 };
-var _default = SpinnerContent;
-exports.default = _default;
+export default SpinnerContent;

package/lib/Spinner/constants.js

@@ -1,14 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SMALL = exports.LARGE = exports.BACKDROP_Z_INDEX = exports.BACKDROP_OPACITY = void 0;
-const BACKDROP_OPACITY = 0.06;
-exports.BACKDROP_OPACITY = BACKDROP_OPACITY;
-const BACKDROP_Z_INDEX = 1400;
-exports.BACKDROP_Z_INDEX = BACKDROP_Z_INDEX;
-const LARGE = 'large';
-exports.LARGE = LARGE;
-const SMALL = 'small';
-exports.SMALL = SMALL;
+export const BACKDROP_OPACITY = 0.06;
+export const BACKDROP_Z_INDEX = 1400;
+export const LARGE = 'large';
+export const SMALL = 'small';

package/lib/Spinner/index.js

@@ -1,10 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _Spinner = _interopRequireDefault(require("./Spinner"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-var _default = _Spinner.default;
-exports.default = _default;
+import Spinner from './Spinner';
+export default Spinner;