@telus-uds/components-base 1.97.0 → 1.97.1

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 31 Oct 2024 05:02:44 GMT and should not be manually modified.
+<!-- This log was last generated on Fri, 22 Nov 2024 23:40:08 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 1.97.1
+
+Fri, 22 Nov 2024 23:40:08 GMT
+
+### Patches
+
+- Bump @telus-uds/system-constants to v2.0.0
+- Bump @telus-uds/system-theme-tokens to v3.0.0
+
 ## 1.97.0
 
-Thu, 31 Oct 2024 05:02:44 GMT
+Thu, 31 Oct 2024 05:09:12 GMT
 
 ### Minor changes
 

package/babel.config.cjs

@@ -0,0 +1,35 @@
+module.exports = (api) => {
+  // configuration for jest
+  if (api.env('test')) {
+    return {
+      presets: ['module:metro-react-native-babel-preset']
+    }
+  }
+
+  // Default to CJS for docs generators etc; build as ESM modules when requested.
+  const isModule = api.env('module')
+
+  return {
+    presets: [
+      ['@babel/preset-react', { runtime: 'automatic' }],
+      [
+        '@babel/preset-env',
+        {
+          // `false` in babel env options means preserve ESM import / export syntax
+          // https://babeljs.io/docs/en/babel-preset-env#modules
+          modules: isModule ? false : 'cjs'
+        }
+      ]
+    ],
+    plugins: [
+      [
+        'react-native-web',
+        {
+          // Use the build of React Native Web that matches our build. ESM prefered, for treeshaking etc.
+          // Be careful not to have both RNW builds in an app as init will run twice, shuffling styles.
+          commonjs: !isModule
+        }
+      ]
+    ]
+  }
+}

package/{jest.config-android.js → jest.config-android.cjs}

@@ -1,4 +1,4 @@
-const defaultConfig = require('./jest.config')
+const defaultConfig = require('./jest.config.cjs')
 
 const config = { ...defaultConfig }
 

package/{jest.config-ios.js → jest.config-ios.cjs}

@@ -1,4 +1,4 @@
-const defaultConfig = require('./jest.config')
+const defaultConfig = require('./jest.config.cjs')
 
 const config = { ...defaultConfig }
 

package/{jest.config-web.js → jest.config-web.cjs}

@@ -1,4 +1,4 @@
-const defaultConfig = require('./jest.config')
+const defaultConfig = require('./jest.config.cjs')
 
 const config = { ...defaultConfig }
 

package/jest.config.cjs

@@ -0,0 +1,40 @@
+const preset = require('react-native/jest-preset')
+const name = require('./package.json').name.split('@telus-uds/').pop()
+
+// cherry-pick the bits of the preset we want to avoid it overriding the fix we have on L14
+module.exports = {
+  haste: preset.haste,
+  displayName: {
+    name,
+    color: 'blue'
+  },
+  setupFiles: [...preset.setupFiles, '<rootDir>/jest.setup.js'],
+  transform: {
+    // Use babel-jest instead of react-native/jest/preprocessor.js so that the coverage report is correct as per:
+    //  https://github.com/facebook/react-native/issues/20404#issuecomment-593392763
+    //  https://kulshekhar.github.io/ts-jest/docs/guides/react-native/#jest-config
+    // __dirname here tells babel to look in components-base for babel root when running from monorepo root
+    '\\.(js|jsx)$': [
+      'babel-jest',
+      {
+        plugins: [['@babel/plugin-transform-private-methods', { loose: true }]],
+        cwd: __dirname
+      }
+    ]
+  },
+  setupFilesAfterEnv: [
+    '@testing-library/jest-native/extend-expect',
+    // Fail tests that use console.error or console.warn
+    '<rootDir>/../../jest-no-console.cjs'
+  ],
+  cacheDirectory: '.cache/jest-cache-react-17',
+  moduleNameMapper: {
+    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
+  },
+  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
+  collectCoverageFrom: ['src/**/*.{js,jsx}']
+}

package/lib/A11yInfoProvider/index.js

@@ -1,71 +1,65 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import AccessibilityInfo from "react-native-web/dist/exports/AccessibilityInfo";
+import Platform from "react-native-web/dist/exports/Platform";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ScreenReaderContext = /*#__PURE__*/React.createContext(false);
+const ReducedMotionContext = /*#__PURE__*/React.createContext(false);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useA11yInfo = exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _AccessibilityInfo = _interopRequireDefault(require("react-native-web/dist/cjs/exports/AccessibilityInfo"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const ScreenReaderContext = /*#__PURE__*/_react.default.createContext(false);
-const ReducedMotionContext = /*#__PURE__*/_react.default.createContext(false);
-const A11yInfoProvider = _ref => {
+// eslint-disable-next-line no-unused-vars
+const A11yInfoProvider = /*#__PURE__*/React.forwardRef((_ref, _) => {
   let {
     children
   } = _ref;
-  const [reduceMotionEnabled, setReduceMotionEnabled] = _react.default.useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = _react.default.useState(false);
-  _react.default.useEffect(() => {
+  const [reduceMotionEnabled, setReduceMotionEnabled] = React.useState(false);
+  const [screenReaderEnabled, setScreenReaderEnabled] = React.useState(false);
+  React.useEffect(() => {
     if (process.env.NODE_ENV === 'test') {
       // On Jest these effects do nothing but can cause `act` state change warnings
       // and "...after the Jest environment has been torn down" errors, so skip them.
       return () => {};
     }
-    const motionSubscription = _AccessibilityInfo.default.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
+    const motionSubscription = AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
     const setInitialA11yInfo = async () => {
-      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([_AccessibilityInfo.default.isReduceMotionEnabled(), _AccessibilityInfo.default.isScreenReaderEnabled()]);
+      const [initialReduceMotionEnabled, initialScreenReaderEnabled] = await Promise.all([AccessibilityInfo.isReduceMotionEnabled(), AccessibilityInfo.isScreenReaderEnabled()]);
 
       // Browsers can't detect screen readers; in RNW isScreenReaderEnabled() is always `true`
       // https://github.com/necolas/react-native-web/blob/master/packages/react-native-web/src/exports/AccessibilityInfo/index.js#L14
-      setScreenReaderEnabled(_Platform.default.OS !== 'web' && !!initialScreenReaderEnabled);
+      setScreenReaderEnabled(Platform.OS !== 'web' && !!initialScreenReaderEnabled);
 
       // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
       setReduceMotionEnabled(!!initialReduceMotionEnabled);
     };
-    if (_AccessibilityInfo.default.isReduceMotionEnabled && _AccessibilityInfo.default.isScreenReaderEnabled) {
+    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
       setInitialA11yInfo();
     }
     return () => {
       // From react-native 0.65, AccessibilityInfo.removeEventListener is deprecated for `remove` on addEventListener return value
       if (typeof (motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove) === 'function') {
-        motionSubscription === null || motionSubscription === void 0 ? void 0 : motionSubscription.remove();
-      } else if (typeof _AccessibilityInfo.default.removeEventListener === 'function') {
-        _AccessibilityInfo.default.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
+        motionSubscription === null || motionSubscription === void 0 || motionSubscription.remove();
+      } else if (typeof AccessibilityInfo.removeEventListener === 'function') {
+        AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
       }
     };
   }, []);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReducedMotionContext.Provider, {
+  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
     value: reduceMotionEnabled,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ScreenReaderContext.Provider, {
+    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
       value: screenReaderEnabled,
       children: children
     })
   });
-};
+});
+A11yInfoProvider.displayName = 'A11yInfoProvider';
 A11yInfoProvider.propTypes = {
-  children: _propTypes.default.node.isRequired
+  children: PropTypes.node.isRequired
 };
-var _default = A11yInfoProvider;
-exports.default = _default;
-const useA11yInfo = () => {
-  const screenReaderEnabled = _react.default.useContext(ScreenReaderContext);
-  const reduceMotionEnabled = _react.default.useContext(ReducedMotionContext);
+export default A11yInfoProvider;
+export const useA11yInfo = () => {
+  const screenReaderEnabled = React.useContext(ScreenReaderContext);
+  const reduceMotionEnabled = React.useContext(ReducedMotionContext);
   return {
     reduceMotionEnabled,
     screenReaderEnabled
   };
-};
-exports.useA11yInfo = useA11yInfo;
+};

package/lib/A11yText/index.js

@@ -1,18 +1,11 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _props = require("../utils/props");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_props.a11yProps, _props.viewProps]);
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { a11yProps, selectSystemProps, viewProps } from '../utils/props';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
 /**
  * A11yText is a zero-size invisible element that adds text to be read by screen readers.
@@ -20,7 +13,7 @@ const [selectProps, selectedSystemPropTypes] = (0, _props.selectSystemProps)([_p
  * It should be used to add selectable screen-reader-only text to the main document flow,
  * as a sibling to blocks of text like paragraphs and interactive elements like buttons.
  */
-const A11yText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const A11yText = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     text,
     heading,
@@ -32,12 +25,12 @@ const A11yText = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     // On Web, `accessible` causes RNW to set attributes that may make the element be treated as a group.
     // On Android, may cause this to be skipped when with `<Text>` siblings in an `accessible` View,
     // see https://github.com/facebook/react-native/issues/30851#issuecomment-790165489
-    accessible: _Platform.default.OS === 'ios',
+    accessible: Platform.OS === 'ios',
     accessibilityLabel: text,
     accessibilityRole: heading ? 'header' : role,
     ...rest
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+  return /*#__PURE__*/_jsx(View, {
     style: styles.invisible,
     ref: ref,
     ...selectedProps
@@ -49,17 +42,17 @@ A11yText.propTypes = {
   /**
    * Text to be read by screen readers
    */
-  text: _propTypes.default.string.isRequired,
+  text: PropTypes.string.isRequired,
   /**
    * Whether text should be rendered as a heading
    */
-  heading: _propTypes.default.bool,
+  heading: PropTypes.bool,
   /**
    * Role of the element
    */
-  role: _propTypes.default.string
+  role: PropTypes.string
 };
-const styles = _StyleSheet.default.create({
+const styles = StyleSheet.create({
   invisible: {
     // Without width or height it is not shown
     minHeight: 1,
@@ -72,5 +65,4 @@ const styles = _StyleSheet.default.create({
     top: -1
   }
 });
-var _default = A11yText;
-exports.default = _default;
+export default A11yText;

package/lib/ActionCard/ActionCard.js

@@ -1,22 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _Icon = _interopRequireDefault(require("../Icon"));
-var _Card = _interopRequireDefault(require("../Card"));
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps, _utils.viewProps]);
+import React from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import PropTypes from 'prop-types';
+import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, clickProps, hrefAttrsProp, linkProps } from '../utils';
+import Icon from '../Icon';
+import Card from '../Card';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
 const selectCardStyles = styles => ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
   if (styles[key]) acc[key] = styles[key];
   return acc;
@@ -93,7 +86,7 @@ const selectTitleTextStyles = _ref5 => {
     titleFontWeight,
     titleLineHeight
   } = _ref5;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     fontColor: titleFontColor,
     fontName: titleFontName,
     fontSize: titleFontSize,
@@ -123,7 +116,7 @@ const selectContentTextStyles = _ref7 => {
     contentFontWeight,
     contentLineHeight
   } = _ref7;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return applyTextStyles({
     fontColor: contentFontColor,
     fontName: contentFontName,
     fontSize: contentFontSize,
@@ -193,7 +186,7 @@ const ACTION_ICON_ANIMATION_DURATION = 100;
  *   </ActionCard>
  * )
  */
-const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
+const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
   let {
     icon,
     title,
@@ -205,78 +198,78 @@ const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
     variant,
     ...rest
   } = _ref11;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ActionCard', tokens, variant);
-  const actionIconAnimation = _react.default.useRef(new _Animated.default.Value(0)).current;
+  const themeTokens = useThemeTokens('ActionCard', tokens, variant);
+  const actionIconAnimation = React.useRef(new Animated.Value(0)).current;
   const {
     onPress,
     ...props
-  } = _utils.clickProps.toPressProps(rest);
+  } = clickProps.toPressProps(rest);
   const {
     hrefAttrs,
     rawRest
-  } = _utils.hrefAttrsProp.bundle(props);
+  } = hrefAttrsProp.bundle(props);
   const selectedProps = selectProps({
     accessibilityRole,
     href,
-    onPress: _utils.linkProps.handleHref({
+    onPress: linkProps.handleHref({
       href,
       onPress
     }),
     hrefAttrs,
     ...rawRest
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.default, {
+  return /*#__PURE__*/_jsx(Card, {
     ref: ref,
     interactiveCard: {
       body: pressableState => {
         const animate = pressableState.pressed || pressableState.hover || pressableState.focus;
-        _Animated.default.timing(actionIconAnimation, {
+        Animated.timing(actionIconAnimation, {
           toValue: animate ? themeTokens.actionIconTranslate : 0,
           duration: ACTION_ICON_ANIMATION_DURATION,
           useNativeDriver: false
         }).start();
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        return /*#__PURE__*/_jsxs(View, {
           style: staticStyles.container,
-          children: [icon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          children: [icon && /*#__PURE__*/_jsx(View, {
             style: selectIconStyles(themeTokens),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+            children: /*#__PURE__*/_jsx(Icon, {
               ...selectIconProps({
                 icon,
                 ...themeTokens
               })
             })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          }), /*#__PURE__*/_jsxs(View, {
             style: staticStyles.content,
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+            children: [/*#__PURE__*/_jsxs(View, {
               style: staticStyles.header,
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+              children: [/*#__PURE__*/_jsx(View, {
                 style: [selectTitleStyles(themeTokens), staticStyles.title],
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Text.default, {
-                  children: [(0, _utils.wrapStringsInText)(title, {
+                children: /*#__PURE__*/_jsxs(Text, {
+                  children: [wrapStringsInText(title, {
                     style: selectTitleTextStyles(themeTokens)
-                  }), themeTokens.statusIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+                  }), themeTokens.statusIcon && /*#__PURE__*/_jsx(View, {
                     style: staticStyles.statusIcon,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                    children: /*#__PURE__*/_jsx(Icon, {
                       ...selectStatusIconProps(themeTokens)
                     })
                   })]
                 })
-              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+              }), /*#__PURE__*/_jsx(View, {
                 style: staticStyles.icons,
-                children: direction && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+                children: direction && /*#__PURE__*/_jsx(Animated.View, {
                   style: [selectActionIconStyles(themeTokens), {
                     transform: [{
                       translateX: actionIconAnimation
                     }]
                   }],
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                  children: /*#__PURE__*/_jsx(Icon, {
                     ...selectActionIconProps(themeTokens)
                   })
                 })
               })]
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            }), /*#__PURE__*/_jsx(View, {
               style: [staticStyles.body, selectContentStyles(themeTokens)],
-              children: typeof children === 'string' ? (0, _utils.wrapStringsInText)(children, {
+              children: typeof children === 'string' ? wrapStringsInText(children, {
                 style: selectContentTextStyles(themeTokens)
               }) : children
             })]
@@ -292,34 +285,34 @@ const ActionCard = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
 ActionCard.displayName = 'ActionCard';
 ActionCard.propTypes = {
   ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('ActionCard'),
-  variant: _utils.variantProp.propType,
+  tokens: getTokensPropType('ActionCard'),
+  variant: variantProp.propType,
   /**
    * Icon for the ActionCard
    */
-  icon: _propTypes.default.elementType,
+  icon: PropTypes.elementType,
   /**
    * Title for the ActionCard
    */
-  title: _propTypes.default.string,
+  title: PropTypes.string,
   /**
    * Children for the ActionCard
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.elementType]),
+  children: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
   /**
    * href for the ActionCard
    */
-  href: _propTypes.default.string,
+  href: PropTypes.string,
   /**
    * Enable or disable the direction of the ActionCard
    */
-  direction: _propTypes.default.bool,
+  direction: PropTypes.bool,
   /**
    * AccesibilityRole for the ActionCard
    */
-  accessibilityRole: _propTypes.default.string
+  accessibilityRole: PropTypes.string
 };
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   body: {
     flexDirection: 'column'
   },
@@ -346,5 +339,4 @@ const staticStyles = _StyleSheet.default.create({
     marginLeft: 4
   }
 });
-var _default = ActionCard;
-exports.default = _default;
+export default ActionCard;

package/lib/ActionCard/index.js

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

package/lib/ActivityIndicator/Spinner.js

@@ -1,32 +1,25 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _shared = require("./shared");
-var _A11yInfoProvider = require("../A11yInfoProvider");
-var _jsxRuntime = require("react/jsx-runtime");
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+import React from 'react';
+import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
+import { useA11yInfo } from '../A11yInfoProvider';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 const SVG_RADIUS = 20;
 const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
-const MIN_SVG_LENGTH = _shared.MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
-const MAX_SVG_LENGTH = (1 - _shared.MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
+const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
+const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
 const animationProps = {
   begin: '0s',
-  dur: `${_shared.DURATION}ms`,
+  dur: `${DURATION}ms`,
   fill: 'freeze',
   repeatCount: 'indefinite'
 };
 const bezierProps = {
   calcMode: 'spline',
   keyTimes: '0; 0.5; 1',
-  keySplines: `${_shared.BEZIER.join(', ')} ; ${_shared.BEZIER.join(', ')}`
+  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
 };
 // We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
 // It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     size,
     color,
@@ -36,9 +29,9 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   } = _ref;
   const {
     reduceMotionEnabled
-  } = (0, _A11yInfoProvider.useA11yInfo)();
+  } = useA11yInfo();
   const reduceMotion = reduceMotionEnabled || isStatic;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+  return /*#__PURE__*/_jsx("svg", {
     ref: ref,
     width: `${size}px`,
     height: `${size}px`,
@@ -46,13 +39,13 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     "aria-valuetext": label,
     role: "progressbar",
     "aria-busy": true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
-      children: [reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsx)("animateTransform", {
+    children: /*#__PURE__*/_jsxs("g", {
+      children: [reduceMotion ? null : /*#__PURE__*/_jsx("animateTransform", {
         attributeName: "transform",
         type: "rotate",
-        values: `-180 24 24;${360 + _shared.MIN_STROKE_ANGLE - 180} 24 24`,
+        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
         ...animationProps
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("circle", {
+      }), /*#__PURE__*/_jsx("circle", {
         fill: "none",
         stroke: color,
         strokeWidth: thickness * 48 / size,
@@ -63,13 +56,13 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
         strokeDashoffset: 0,
         vectorEffect: "non-scaling-stroke",
-        children: reduceMotion ? null : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+        children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dashoffset",
             values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
             ...animationProps,
             ...bezierProps
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("animate", {
+          }), /*#__PURE__*/_jsx("animate", {
             attributeName: "stroke-dasharray",
             values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
             ...animationProps,
@@ -81,6 +74,5 @@ const Spinner = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   });
 });
 Spinner.displayName = 'Spinner';
-Spinner.propTypes = _shared.propTypes;
-var _default = Spinner;
-exports.default = _default;
+Spinner.propTypes = propTypes;
+export default Spinner;