@telus-uds/components-base 1.8.0 → 1.8.3

package/__tests__/utils/useSpacingScale.test.jsx

@@ -1,273 +0,0 @@
-import React from 'react'
-import { renderHook } from '@testing-library/react-hooks'
-import { useSpacingScale } from '../../src/utils'
-import Theme from '../../__fixtures__/Theme'
-import Viewport from '../../__fixtures__/Viewport'
-
-describe('useSpacingScale', () => {
-  // values from testTheme.js
-  const expectedDefaultScale = [0, 4, 8, 16, 24, 32, 36]
-  const expectedCompactScale = [0, 2, 4, 6, 8, 10, 12]
-  const expectedResponsiveScale = {
-    xs: [0, 1, 2, 3, 4, 5, 6],
-    sm: [0, 3, 4, 5, 6, 7, 8],
-    md: [0, 3, 4, 5, 6, 7, 8],
-    lg: [0, 7, 8, 9, 10, 11, 12],
-    xl: [0, 7, 8, 9, 10, 11, 12]
-  }
-
-  const wrapper = ({ children, viewport }) => (
-    <Viewport viewport={viewport}>
-      <Theme>{children}</Theme>
-    </Viewport>
-  )
-
-  it.each(expectedDefaultScale.map((item, index) => [item, index]))(
-    'returns the expected size index %# from the theme spacing scale',
-    (expectedSize, index) => {
-      const { result } = renderHook(() => useSpacingScale(index), {
-        wrapper
-      })
-      expect(result.current).toBe(expectedSize)
-    }
-  )
-  it.each(expectedCompactScale.map((item, index) => [item, index]))(
-    'returns the expected size index %# from the theme spacing scale in a variant',
-    (expectedSize, index) => {
-      const { result } = renderHook(
-        () => useSpacingScale({ space: index, options: { variant: { compact: true } } }),
-        {
-          wrapper
-        }
-      )
-      expect(result.current).toBe(expectedSize)
-    }
-  )
-  it.each(Object.entries(expectedResponsiveScale))(
-    'returns appropriate sizes from a responsive theme variant at %p viewport',
-    (viewport, expectedValues) => {
-      const { result, rerender } = renderHook(({ spacingValue }) => useSpacingScale(spacingValue), {
-        wrapper
-      })
-      expectedValues.forEach((expectedSize, index) => {
-        rerender({
-          viewport,
-          spacingValue: { space: index, options: { variant: { responsive: true } } }
-        })
-        expect(result.current).toBe(expectedSize)
-      })
-    }
-  )
-
-  it('returns the 0 index when passed a nullish spacing value', () => {
-    const { result, rerender } = renderHook((spacingValue) => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    // implicit undefined
-    expect(result.current).toBe(expectedDefaultScale[0])
-    // explicit undefined
-    rerender(undefined)
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender(null)
-    expect(result.current).toBe(expectedDefaultScale[0])
-
-    // confim this test isn't a false positive misuing rerender etc
-    rerender(1)
-    expect(result.current).toBe(expectedDefaultScale[1])
-  })
-  it('returns the 0 index when passed a nullish spacing value in a variant', () => {
-    const { result, rerender } = renderHook((spacingValue) => useSpacingScale(spacingValue), {
-      wrapper,
-      initialProps: { options: { variant: { compact: true } } }
-    })
-    // implicit undefined
-    expect(result.current).toBe(expectedCompactScale[0])
-    // explicit undefined
-    rerender({ space: undefined, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[0])
-    rerender({ space: null, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[0])
-
-    // confim this test isn't a false positive misuing rerender etc
-    rerender({ space: 1, options: { variant: { compact: true } } })
-    expect(result.current).toBe(expectedCompactScale[1])
-  })
-
-  it('returns the highest index when passed an out-of-bounds spacing index', () => {
-    const { result } = renderHook(() => useSpacingScale(99), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedDefaultScale[expectedDefaultScale.length - 1])
-  })
-  it('returns the highest index when passed an out-of-bounds spacing index in a variant', () => {
-    const { result } = renderHook(
-      () => useSpacingScale({ space: 99, options: { variant: { compact: true } } }),
-      {
-        wrapper
-      }
-    )
-    expect(result.current).toBe(expectedCompactScale[expectedDefaultScale.length - 1])
-  })
-
-  it('returns viewport indexes that explicitly match current viewport', () => {
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[2])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[5])
-  })
-  it('returns viewport indexes that explicitly match current viewport in a variant', () => {
-    const spacingValue = {
-      xs: 1,
-      sm: 2,
-      md: 3,
-      lg: 4,
-      xl: 5,
-      options: { variant: { compact: true } }
-    }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[2])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[5])
-  })
-
-  it('returns viewport indexes that implicitly match current viewport', () => {
-    const spacingValue = { xs: 1, md: 3 }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[1])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[3])
-  })
-  it('returns viewport indexes that implicitly match current viewport in a variant', () => {
-    const spacingValue = { xs: 1, md: 3, options: { variant: { compact: true } } }
-    const { rerender, result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[1])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedCompactScale[3])
-  })
-
-  it('chooses smallest provided viewport index if viewport is unavailable', () => {
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5 }
-    const { result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: null, spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[1])
-  })
-  it('chooses 0 index if current viewport matches no provided index', () => {
-    const spacingValue = { lg: 4 }
-    const { result, rerender } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[0])
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(expectedDefaultScale[4])
-  })
-
-  it('subtracts a provided value from a spacing scale value', () => {
-    const spacingValue = { viewport: 'xs', space: 2, options: { subtract: 3 } }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedDefaultScale[2] - 3)
-  })
-  it('subtracts a provided value from a spacing scale value in a variant', () => {
-    const spacingValue = {
-      space: 4,
-      options: { subtract: 3, variant: { compact: true } }
-    }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(expectedCompactScale[4] - 3)
-  })
-  it('returns 0 if a subtraction would result in a negative number', () => {
-    const spacingValue = { space: 2, options: { subtract: 999 } }
-    const { result } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { spacingValue }
-    })
-    expect(result.current).toBe(0)
-  })
-
-  it('gives an exact amount if `size` option is passed', () => {
-    const size = 123456
-    const spacingValue = { xs: 1, sm: 2, md: 3, lg: 4, xl: 5, options: { size } }
-    const compactSpacingValue = { ...spacingValue, options: { size, variant: { compact: true } } }
-    const { result, rerender } = renderHook((args) => useSpacingScale(args.spacingValue), {
-      wrapper,
-      initialProps: { viewport: 'xs', spacingValue }
-    })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'sm', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'md', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'lg', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xl', spacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xs', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'sm', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'md', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'lg', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-    rerender({ viewport: 'xl', spacingValue: compactSpacingValue })
-    expect(result.current).toBe(size)
-  })
-  it('subtracts from size if `subtract` and `size` options are provided', () => {
-    const size = 123456
-    const subtract = 12345
-    const spacingValue = { options: { size, subtract } }
-    const { result } = renderHook(() => useSpacingScale(spacingValue), {
-      wrapper
-    })
-    expect(result.current).toBe(size - subtract)
-  })
-})

package/__tests__/utils/useUniqueId.test.js

@@ -1,31 +0,0 @@
-import { renderHook } from '@testing-library/react-hooks'
-import useUniqueId from '../../lib/utils/useUniqueId'
-
-describe('useUniqueId hook', () => {
-  it('returns the same id for each re-render, but a different id for a new instance', () => {
-    const { result, rerender } = renderHook(() => useUniqueId('prefix'))
-
-    expect(result.current).toBe('prefix-1')
-
-    rerender()
-
-    expect(result.current).toBe('prefix-1')
-
-    // has to be done within the same test case, as we can't ensure order in which tests are being run in parallel
-    const { result: result2, rerender: rerender2 } = renderHook(() => useUniqueId('prefix'))
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-
-    // ensure that instances' rerendering doesn't affect one another
-    rerender2()
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-
-    rerender()
-
-    expect(result.current).toBe('prefix-1')
-    expect(result2.current).toBe('prefix-2')
-  })
-})

package/babel.config.js

@@ -1,35 +0,0 @@
-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/generate-component-docs.js

@@ -1,72 +0,0 @@
-const fs = require('fs')
-const schema = require('@telus-uds/system-theme-tokens')
-const allExports = require('./src')
-
-const { a11yProps } = allExports
-const a11yPropTypes = Object.keys(a11yProps.types)
-
-const parseComponentDocs = (name, generated) => {
-  const { description } = generated // TODO parse markdown and split by heading
-  const props = {} // store derived prop data
-  const attributes = {
-    // any other computed attributes
-    acceptsRNA11yProps: a11yPropTypes.every((key) => key in generated.props)
-  }
-
-  Object.entries(generated.props).forEach(([propName, prop]) => {
-    if (prop.description?.includes('@ignore')) {
-      return // remove ignored props
-    }
-    if (attributes.acceptsRNA11yProps && a11yPropTypes.includes(propName)) {
-      return // remove a11y props if all supported (there are 30+, instead we have the above attribute to show this)
-    }
-
-    const out = { ...prop }
-
-    // check if this prop references the tokens schema;
-    // this regex extracts unquoted parameter strings from function
-    // calls like `getTokensPropType('ChevronLink', 'Link')` with the result
-    // being an array: `['ChevronLink', 'Link']`
-    const tokensProp = out.type?.raw?.match(/(?<=getTokensPropType\(.*)(\w+)+(?=.*\))/gs)
-
-    // if so, try and read the schema from the base components
-    if (tokensProp && tokensProp.length > 0) {
-      let raw = {}
-
-      tokensProp.forEach((componentName) => {
-        if (!schema.components[componentName]) {
-          // this would be a run-time error in the base components
-          throw new Error(
-            `Unknown schema component reference: ${componentName} from component: ${name}`
-          )
-        }
-        raw = { ...raw, ...schema.components[componentName] }
-      })
-      out.type = { ...out.type, raw }
-    }
-    props[propName] = out
-  })
-
-  return { docs: { description, props, attributes } }
-}
-
-const components = {}
-
-Object.entries(allExports).forEach(([name, exp]) => {
-  // fail fast with meaningful error on typos, missing exports, etc
-  if (!exp) throw new Error(`components-base export "${name}" is ${exp} (typeof ${typeof exp})`)
-
-  if (exp.__docgenInfo) {
-    // populated by babel-plugin-react-docgen
-    components[name] = parseComponentDocs(name, exp.__docgenInfo)
-
-    // check for second-level components e.g List.Item (can only be on a component)
-    Object.entries(exp).forEach(([subComponentName, prop]) => {
-      if (prop.__docgenInfo) {
-        components[name][subComponentName] = parseComponentDocs(subComponentName, prop.__docgenInfo)
-      }
-    })
-  }
-}, {})
-
-fs.writeFileSync('./component-docs.json', JSON.stringify({ schema, components }, null, 2))

package/jest.config.js

@@ -1,32 +0,0 @@
-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,
-  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', { cwd: __dirname }]
-  },
-  setupFilesAfterEnv: [
-    '@testing-library/jest-native/extend-expect',
-    // Fail tests that use console.error or console.warn
-    '<rootDir>/../../jest-no-console'
-  ],
-  moduleNameMapper: {
-    '.+\\.(otf|svg|png|jpg)$': 'identity-obj-proxy'
-  },
-  transformIgnorePatterns: [
-    'node_modules/(?!(jest-)?react-native|@react-native|@react-native-community|@react-native-picker)'
-  ],
-  // Count everything in src when calculating coverage
-  collectCoverageFrom: ['src/**/*.{js,jsx}']
-}

package/lib-module/A11yInfoProvider/index.js

@@ -1,62 +0,0 @@
-import React, { createContext, useContext, useEffect, useState } 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__*/createContext(false);
-const ReducedMotionContext = /*#__PURE__*/createContext(false);
-
-const A11yInfoProvider = ({
-  children
-}) => {
-  const [reduceMotionEnabled, setReduceMotionEnabled] = useState(false);
-  const [screenReaderEnabled, setScreenReaderEnabled] = useState(false);
-  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 () => {};
-    }
-
-    AccessibilityInfo.addEventListener('reduceMotionChanged', setReduceMotionEnabled);
-    AccessibilityInfo.addEventListener('screenReaderChanged', setScreenReaderEnabled);
-
-    const setInitialA11yInfo = async () => {
-      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.OS !== 'web' && !!initialScreenReaderEnabled); // RNW does support isReduceMotionEnabled looking for 'prefers-reduced-motion' state
-
-      setReduceMotionEnabled(!!initialReduceMotionEnabled);
-    };
-
-    if (AccessibilityInfo.isReduceMotionEnabled && AccessibilityInfo.isScreenReaderEnabled) {
-      setInitialA11yInfo();
-    }
-
-    return () => {
-      AccessibilityInfo.removeEventListener('reduceMotionChanged', setReduceMotionEnabled);
-      AccessibilityInfo.removeEventListener('screenReaderChanged', setScreenReaderEnabled);
-    };
-  }, []);
-  return /*#__PURE__*/_jsx(ReducedMotionContext.Provider, {
-    value: reduceMotionEnabled,
-    children: /*#__PURE__*/_jsx(ScreenReaderContext.Provider, {
-      value: screenReaderEnabled,
-      children: children
-    })
-  });
-};
-
-A11yInfoProvider.propTypes = {
-  children: PropTypes.node.isRequired
-};
-export default A11yInfoProvider;
-export const useA11yInfo = () => {
-  const screenReaderEnabled = useContext(ScreenReaderContext);
-  const reduceMotionEnabled = useContext(ReducedMotionContext);
-  return {
-    reduceMotionEnabled,
-    screenReaderEnabled
-  };
-};

package/lib-module/A11yText/index.js

@@ -1,55 +0,0 @@
-import React, { forwardRef } 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.
- *
- * 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__*/forwardRef(({
-  text,
-  heading,
-  ...rest
-}, ref) => {
-  const selectedProps = selectProps({
-    // On iOS, needs `accessible` to be true to be focusable without non-a11y content.
-    // 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.OS === 'ios',
-    accessibilityLabel: text,
-    accessibilityRole: heading ? 'header' : 'text',
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(View, {
-    style: styles.invisible,
-    ref: ref,
-    ...selectedProps
-  });
-});
-A11yText.displayName = 'A11yText';
-A11yText.propTypes = { ...selectedSystemPropTypes,
-  text: PropTypes.string.isRequired,
-  heading: PropTypes.bool
-};
-const styles = StyleSheet.create({
-  invisible: {
-    // Without width or height it is not shown
-    minHeight: 1,
-    minWidth: 1,
-    // Ensures it doesn't occupy space
-    // position: 'absolute' causes it to be read first in its container
-    marginEnd: -1,
-    marginBottom: -1,
-    // Ensures it is in the correct position on Native
-    top: -1
-  }
-});
-export default A11yText;

package/lib-module/ActivityIndicator/Spinner.js

@@ -1,76 +0,0 @@
-import React, { forwardRef } from 'react';
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const SVG_RADIUS = 20;
-const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
-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: `${DURATION}ms`,
-  fill: 'freeze',
-  repeatCount: 'indefinite'
-};
-const bezierProps = {
-  calcMode: 'spline',
-  keyTimes: '0; 0.5; 1',
-  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__*/forwardRef(({
-  size,
-  color,
-  thickness,
-  label
-}, ref) => {
-  const {
-    reduceMotionEnabled
-  } = useA11yInfo();
-  return /*#__PURE__*/_jsx("svg", {
-    ref: ref,
-    width: `${size}px`,
-    height: `${size}px`,
-    viewBox: "0 0 48 48",
-    "aria-valuetext": label,
-    role: "progressbar",
-    "aria-busy": true,
-    children: /*#__PURE__*/_jsxs("g", {
-      children: [reduceMotionEnabled ? null : /*#__PURE__*/_jsx("animateTransform", {
-        attributeName: "transform",
-        type: "rotate",
-        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
-        ...animationProps
-      }), /*#__PURE__*/_jsx("circle", {
-        fill: "none",
-        stroke: color,
-        strokeWidth: thickness * 48 / size,
-        strokeLinecap: "round",
-        cx: "24",
-        cy: "24",
-        r: "20",
-        strokeDasharray: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
-        strokeDashoffset: 0,
-        children: reduceMotionEnabled ? null : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("animate", {
-            attributeName: "stroke-dashoffset",
-            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
-            ...animationProps,
-            ...bezierProps
-          }), /*#__PURE__*/_jsx("animate", {
-            attributeName: "stroke-dasharray",
-            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
-            ...animationProps,
-            ...bezierProps
-          })]
-        })
-      })]
-    })
-  });
-});
-Spinner.displayName = 'Spinner';
-Spinner.propTypes = propTypes;
-export default Spinner;