@razorpay/blade 10.23.4 → 11.0.0

package/build/lib/web/development/components/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport clamp from '~utils/lodashButBetter/clamp';\nimport { FormLabel } from '~components/Form';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography/Text';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { ColorContrastTypes, Feedback } from '~tokens/theme/theme';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport type { AccessibilityProps } from '~utils/makeAccessible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\ntype ProgressBarCommonProps = {\n  /**\n   * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.\n   */\n  accessibilityLabel?: string;\n  /**\n   * Sets the contrast for the progress bar\n   * @default 'low'\n   */\n  contrast?: ColorContrastTypes;\n  /**\n   * Sets the intent of the progress bar which changes the feedback color.\n   */\n  intent?: Feedback;\n  /**\n   * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.\n   */\n  label?: string;\n  /**\n   * Sets the size of the progress bar.\n   * @default 'small'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * Sets the progress value of the progress bar.\n   * @default 'small'\n   */\n  value?: number;\n  /**\n   * Sets the minimum value for the progress bar.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Sets the maximum value for the progress bar.\n   * @default 100\n   */\n  max?: number;\n} & TestID &\n  StyledPropsBlade;\n\ntype ProgressBarVariant = 'progress' | 'meter';\n\ntype ProgressBarProgressProps = ProgressBarCommonProps & {\n  /**\n   * Sets the variant to be rendered for the progress bar.\n   * @default 'progress'\n   */\n  variant?: Extract<ProgressBarVariant, 'progress'>;\n  /**\n   * Sets whether the progress bar is in an indeterminate state.\n   * @default false\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n   * @default true\n   */\n  showPercentage?: boolean;\n};\n\ntype ProgressBarMeterProps = ProgressBarCommonProps & {\n  /**\n   * Sets the variant to be rendered for thr progress bar.\n   * @default 'progress'\n   */\n  variant?: Extract<ProgressBarVariant, 'meter'>;\n  /**\n   * Sets whether the progress bar is in an indeterminate state.\n   * @default false\n   */\n  isIndeterminate?: undefined;\n  /**\n   * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n   * @default false\n   */\n  showPercentage?: undefined;\n};\n\ntype ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;\n\nconst progressBarHeight: Record<NonNullable<ProgressBarCommonProps['size']>, 2 | 4> = {\n  small: size[2],\n  medium: size[4],\n};\n\nconst ProgressBar = ({\n  accessibilityLabel,\n  contrast = 'low',\n  intent,\n  isIndeterminate = false,\n  label,\n  showPercentage = true,\n  size = 'small',\n  value = 0,\n  variant = 'progress',\n  min = 0,\n  max = 100,\n  testID,\n  ...styledProps\n}: ProgressBarProps): ReactElement => {\n  const { theme } = useTheme();\n  const id = useId(variant);\n\n  if (__DEV__) {\n    if (variant === 'meter' && isIndeterminate) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Cannot set 'isIndeterminate' when 'variant' is 'meter'.`,\n      });\n    }\n  }\n\n  const unfilledBackgroundColor = theme.colors.brand.gray.a100[`${contrast}Contrast`];\n  const filledBackgroundColor = intent\n    ? theme.colors.feedback.background[intent].highContrast\n    : theme.colors.brand.primary[500];\n  const hasLabel = label && label.trim()?.length > 0;\n  const isMeter = variant === 'meter';\n  const progressValue = clamp(value, min, max);\n  const percentageProgressValue = Math.floor(((progressValue - min) * 100) / (max - min));\n  const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;\n  const accessibilityProps: Pick<\n    AccessibilityProps,\n    'role' | 'label' | 'valueMax' | 'valueNow' | 'valueMin' | 'valueText'\n  > = {\n    role: 'progressbar',\n    label: accessibilityLabel ?? label,\n    valueNow: percentageProgressValue,\n    valueText: `${percentageProgressValue}%`,\n    valueMin: min,\n    valueMax: max,\n  };\n\n  if (isMeter) {\n    accessibilityProps.role = 'meter';\n    accessibilityProps.valueNow = progressValue;\n    accessibilityProps.valueText = `${progressValue}`;\n  }\n\n  if (isIndeterminate) {\n    accessibilityProps.valueNow = undefined;\n    accessibilityProps.valueMin = undefined;\n    accessibilityProps.valueMax = undefined;\n    accessibilityProps.valueText = undefined;\n  }\n\n  return (\n    <BaseBox\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.ProgressBar, testID })}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n        <BaseBox\n          display=\"flex\"\n          flexDirection=\"row\"\n          justifyContent={hasLabel ? 'space-between' : 'flex-end'}\n        >\n          {hasLabel ? (\n            <FormLabel as=\"label\" htmlFor={id} contrast={contrast}>\n              {label}\n            </FormLabel>\n          ) : null}\n          {shouldShowPercentage ? (\n            <BaseBox marginBottom=\"spacing.2\">\n              <Text\n                type=\"subdued\"\n                variant=\"body\"\n                contrast={contrast}\n                size=\"small\"\n              >{`${percentageProgressValue}%`}</Text>\n            </BaseBox>\n          ) : null}\n        </BaseBox>\n        <BaseBox\n          id={id}\n          {...makeAccessible({\n            role: accessibilityProps.role,\n            label: accessibilityProps.label,\n            valueNow: accessibilityProps.valueNow,\n            valueText: accessibilityProps.valueText,\n            valueMin: accessibilityProps.valueMin,\n            valueMax: accessibilityProps.valueMax,\n          })}\n        >\n          <BaseBox\n            backgroundColor={unfilledBackgroundColor}\n            height={makeSize(progressBarHeight[size])}\n            overflow=\"hidden\"\n            position=\"relative\"\n          >\n            <ProgressBarFilled\n              backgroundColor={filledBackgroundColor}\n              progress={percentageProgressValue}\n              fillMotionDuration=\"duration.2xgentle\"\n              pulseMotionDuration=\"duration.2xgentle\"\n              indeterminateMotionDuration=\"duration.2xgentle\"\n              pulseMotionDelay=\"delay.long\"\n              motionEasing=\"easing.standard.revealing\"\n              variant={variant}\n              isIndeterminate={isIndeterminate}\n            />\n          </BaseBox>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","ProgressBar","_ref","_label$trim","accessibilityLabel","_ref$contrast","contrast","intent","_ref$isIndeterminate","isIndeterminate","label","_ref$showPercentage","showPercentage","_ref$size","_ref$value","value","_ref$variant","variant","_ref$min","min","_ref$max","max","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","id","useId","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","brand","gray","a100","concat","filledBackgroundColor","feedback","background","highContrast","primary","hasLabel","trim","length","isMeter","progressValue","clamp","percentageProgressValue","Math","floor","shouldShowPercentage","accessibilityProps","role","valueNow","valueText","valueMin","valueMax","undefined","_jsx","BaseBox","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","children","_jsxs","display","flexDirection","width","justifyContent","FormLabel","as","htmlFor","marginBottom","Text","type","makeAccessible","backgroundColor","height","makeSize","overflow","position","ProgressBarFilled","progress","fillMotionDuration","pulseMotionDuration","indeterminateMotionDuration","pulseMotionDelay","motionEasing"],"mappings":"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"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport clamp from '~utils/lodashButBetter/clamp';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { Text } from '~components/Typography/Text';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { useId } from '~utils/useId';\nimport { useTheme } from '~components/BladeProvider';\nimport type { BaseBoxProps } from '~components/Box/BaseBox';\nimport BaseBox from '~components/Box/BaseBox';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport { size } from '~tokens/global';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport type { AccessibilityProps } from '~utils/makeAccessible';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { throwBladeError } from '~utils/logger';\n\ntype ProgressBarCommonProps = {\n  /**\n   * Sets aria-label to help users know what the progress bar is for. Default value is the same as the `label` passed.\n   */\n  accessibilityLabel?: string;\n  /**\n   * Sets the color of the progress bar which changes the feedback color.\n   */\n  color?: FeedbackColors;\n  /**\n   * Sets the label to be rendered for the progress bar. This value will also be used as default for `accessibilityLabel`.\n   */\n  label?: string;\n  /**\n   * Sets the size of the progress bar.\n   * @default 'small'\n   */\n  size?: 'small' | 'medium';\n  /**\n   * Sets the progress value of the progress bar.\n   * @default 'small'\n   */\n  value?: number;\n  /**\n   * Sets the minimum value for the progress bar.\n   * @default 0\n   */\n  min?: number;\n  /**\n   * Sets the maximum value for the progress bar.\n   * @default 100\n   */\n  max?: number;\n} & TestID &\n  StyledPropsBlade;\n\ntype ProgressBarVariant = 'progress' | 'meter';\n\ntype ProgressBarProgressProps = ProgressBarCommonProps & {\n  /**\n   * Sets the variant to be rendered for the progress bar.\n   * @default 'progress'\n   */\n  variant?: Extract<ProgressBarVariant, 'progress'>;\n  /**\n   * Sets whether the progress bar is in an indeterminate state.\n   * @default false\n   */\n  isIndeterminate?: boolean;\n  /**\n   * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n   * @default true\n   */\n  showPercentage?: boolean;\n};\n\ntype ProgressBarMeterProps = ProgressBarCommonProps & {\n  /**\n   * Sets the variant to be rendered for thr progress bar.\n   * @default 'progress'\n   */\n  variant?: Extract<ProgressBarVariant, 'meter'>;\n  /**\n   * Sets whether the progress bar is in an indeterminate state.\n   * @default false\n   */\n  isIndeterminate?: undefined;\n  /**\n   * Sets whether or not to show the progress percentage for the progress bar. Percentage is hidden by default for the `meter` variant.\n   * @default false\n   */\n  showPercentage?: undefined;\n};\n\ntype ProgressBarProps = ProgressBarProgressProps | ProgressBarMeterProps;\n\nconst progressBarHeight: Record<NonNullable<ProgressBarCommonProps['size']>, 2 | 4> = {\n  small: size[2],\n  medium: size[4],\n};\n\nconst ProgressBar = ({\n  accessibilityLabel,\n  color,\n  isIndeterminate = false,\n  label,\n  showPercentage = true,\n  size = 'small',\n  value = 0,\n  variant = 'progress',\n  min = 0,\n  max = 100,\n  testID,\n  ...styledProps\n}: ProgressBarProps): ReactElement => {\n  const { theme } = useTheme();\n  const id = useId(variant);\n\n  if (__DEV__) {\n    if (variant === 'meter' && isIndeterminate) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Cannot set 'isIndeterminate' when 'variant' is 'meter'.`,\n      });\n    }\n  }\n\n  const unfilledBackgroundColor = theme.colors.feedback.background.neutral\n    .subtle as BaseBoxProps['backgroundColor'];\n  const filledBackgroundColor = color\n    ? theme.colors.feedback.background[color].intense\n    : theme.colors.surface.background.primary.intense;\n  const hasLabel = label && label.trim()?.length > 0;\n  const isMeter = variant === 'meter';\n  const progressValue = clamp(value, min, max);\n  const percentageProgressValue = Math.floor(((progressValue - min) * 100) / (max - min));\n  const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;\n  const accessibilityProps: Pick<\n    AccessibilityProps,\n    'role' | 'label' | 'valueMax' | 'valueNow' | 'valueMin' | 'valueText'\n  > = {\n    role: 'progressbar',\n    label: accessibilityLabel ?? label,\n    valueNow: percentageProgressValue,\n    valueText: `${percentageProgressValue}%`,\n    valueMin: min,\n    valueMax: max,\n  };\n\n  if (isMeter) {\n    accessibilityProps.role = 'meter';\n    accessibilityProps.valueNow = progressValue;\n    accessibilityProps.valueText = `${progressValue}`;\n  }\n\n  if (isIndeterminate) {\n    accessibilityProps.valueNow = undefined;\n    accessibilityProps.valueMin = undefined;\n    accessibilityProps.valueMax = undefined;\n    accessibilityProps.valueText = undefined;\n  }\n\n  return (\n    <BaseBox\n      {...getStyledProps(styledProps)}\n      {...metaAttribute({ name: MetaConstants.ProgressBar, testID })}\n    >\n      <BaseBox display=\"flex\" flexDirection=\"column\" width=\"100%\">\n        <BaseBox\n          display=\"flex\"\n          flexDirection=\"row\"\n          justifyContent={hasLabel ? 'space-between' : 'flex-end'}\n        >\n          {hasLabel ? (\n            <Text as=\"label\" variant=\"body\" size=\"small\" color=\"surface.text.gray.subtle\">\n              {label}\n            </Text>\n          ) : null}\n          {shouldShowPercentage ? (\n            <BaseBox marginBottom=\"spacing.2\">\n              <Text\n                variant=\"body\"\n                size=\"small\"\n                color=\"surface.text.gray.subtle\"\n              >{`${percentageProgressValue}%`}</Text>\n            </BaseBox>\n          ) : null}\n        </BaseBox>\n        <BaseBox\n          id={id}\n          {...makeAccessible({\n            role: accessibilityProps.role,\n            label: accessibilityProps.label,\n            valueNow: accessibilityProps.valueNow,\n            valueText: accessibilityProps.valueText,\n            valueMin: accessibilityProps.valueMin,\n            valueMax: accessibilityProps.valueMax,\n          })}\n        >\n          <BaseBox\n            backgroundColor={unfilledBackgroundColor}\n            height={makeSize(progressBarHeight[size])}\n            overflow=\"hidden\"\n            position=\"relative\"\n          >\n            <ProgressBarFilled\n              backgroundColor={filledBackgroundColor}\n              progress={percentageProgressValue}\n              fillMotionDuration=\"duration.2xgentle\"\n              pulseMotionDuration=\"duration.2xgentle\"\n              indeterminateMotionDuration=\"duration.2xgentle\"\n              pulseMotionDelay=\"delay.long\"\n              motionEasing=\"easing.standard.revealing\"\n              variant={variant}\n              isIndeterminate={isIndeterminate}\n            />\n          </BaseBox>\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","ProgressBar","_ref","_label$trim","accessibilityLabel","color","_ref$isIndeterminate","isIndeterminate","label","_ref$showPercentage","showPercentage","_ref$size","_ref$value","value","_ref$variant","variant","_ref$min","min","_ref$max","max","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","theme","id","useId","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","feedback","background","neutral","subtle","filledBackgroundColor","intense","surface","primary","hasLabel","trim","length","isMeter","progressValue","clamp","percentageProgressValue","Math","floor","shouldShowPercentage","accessibilityProps","role","valueNow","valueText","concat","valueMin","valueMax","undefined","_jsx","BaseBox","_objectSpread","getStyledProps","metaAttribute","name","MetaConstants","children","_jsxs","display","flexDirection","width","justifyContent","Text","as","marginBottom","makeAccessible","backgroundColor","height","makeSize","overflow","position","ProgressBarFilled","progress","fillMotionDuration","pulseMotionDuration","indeterminateMotionDuration","pulseMotionDelay","motionEasing"],"mappings":"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"}

package/build/lib/web/development/components/Radio/Radio.js

@@ -114,6 +114,7 @@ var _Radio = function _Radio(_ref, ref) {
         }), showHelpText && /*#__PURE__*/jsx(BaseBox, {
           marginLeft: isSmall ? 'spacing.6' : 'spacing.7',
           children: /*#__PURE__*/jsx(SelectorSupportText, {
+            isNegative: true,
             id: ids === null || ids === void 0 ? void 0 : ids.helpTextId,
             children: helpText
           })

package/build/lib/web/development/components/Radio/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-shadow */\nimport React from 'react';\nimport type { OnChange } from './useRadio';\nimport { useRadio } from './useRadio';\nimport { RadioIcon } from './RadioIcon/RadioIcon';\nimport { useRadioGroupContext } from './RadioGroup/RadioContext';\nimport { radioHoverTokens } from './radioTokens';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorTitle } from '~components/Form/Selector/SelectorTitle';\nimport { SelectorSupportText } from '~components/Form/Selector/SelectorSupportText';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { BladeElementRef, StringChildrenType, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { throwBladeError } from '~utils/logger';\n\ntype RadioProps = {\n  /**\n   * Sets the label text of the Radio\n   */\n  children?: StringChildrenType;\n  /**\n   * Help text for the Radio\n   */\n  helpText?: string;\n  /**\n   * The value to be used in the Radio input.\n   * This is the value that will be returned on form submission.\n   */\n  value: string;\n  /**\n   * If `true`, the Radio will be disabled\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Size of the radios\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium';\n} & TestID &\n  StyledPropsBlade;\n\nconst _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (\n  { value, children, helpText, isDisabled, size = 'medium', testID, ...styledProps },\n  ref,\n) => {\n  const groupProps = useRadioGroupContext();\n  const isInsideGroup = !isEmpty(groupProps);\n\n  if (__DEV__) {\n    if (!isInsideGroup) {\n      throwBladeError({\n        moduleName: 'Radio',\n        message: 'Cannot use <Radio /> outside of <RadioGroup />',\n      });\n    }\n  }\n\n  const isChecked = groupProps?.state?.isChecked(value);\n  const defaultChecked =\n    groupProps?.defaultValue === undefined ? undefined : groupProps?.defaultValue === value;\n  const validationState = groupProps?.validationState;\n  const hasError = validationState === 'error';\n  const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n  const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';\n  const name = groupProps?.name;\n  const showHelpText = !hasError && helpText;\n  const isReactNative = getPlatformType() === 'react-native';\n  const _size = groupProps.size ?? size;\n  const isSmall = _size === 'small';\n\n  const handleChange: OnChange = ({ isChecked, value }) => {\n    if (isChecked) {\n      groupProps?.state?.setValue(value!);\n    } else {\n      groupProps?.state?.removeValue();\n    }\n  };\n\n  const { state, ids, inputProps } = useRadio({\n    defaultChecked,\n    isChecked,\n    hasError,\n    isDisabled: _isDisabled,\n    isRequired: _isRequired,\n    name,\n    value,\n    onChange: handleChange,\n  });\n\n  return (\n    <BaseBox {...getStyledProps(styledProps)}>\n      <SelectorLabel\n        componentName={MetaConstants.RadioLabel}\n        inputProps={isReactNative ? inputProps : {}}\n        testID={testID}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"column\">\n          <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n            <SelectorInput\n              hoverTokens={radioHoverTokens}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              hasError={hasError}\n              inputProps={inputProps}\n              ref={ref}\n            />\n            <RadioIcon\n              size={_size}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              isNegative={hasError}\n            />\n            {children ? (\n              <SelectorTitle size={_size} isDisabled={_isDisabled}>\n                {children}\n              </SelectorTitle>\n            ) : null}\n          </BaseBox>\n          {showHelpText && (\n            <BaseBox marginLeft={isSmall ? 'spacing.6' : 'spacing.7'}>\n              <SelectorSupportText id={ids?.helpTextId}>{helpText}</SelectorSupportText>\n            </BaseBox>\n          )}\n        </BaseBox>\n      </SelectorLabel>\n    </BaseBox>\n  );\n};\n\nconst Radio = assignWithoutSideEffects(React.forwardRef(_Radio), { displayName: 'Radio' });\n\nexport type { RadioProps };\nexport { Radio };\n"],"names":["_Radio","_ref","ref","_groupProps$state","_groupProps$size","value","children","helpText","isDisabled","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","groupProps","useRadioGroupContext","isInsideGroup","isEmpty","throwBladeError","moduleName","message","isChecked","state","defaultChecked","defaultValue","undefined","validationState","hasError","_isDisabled","_isRequired","isRequired","necessityIndicator","name","showHelpText","isReactNative","getPlatformType","_size","isSmall","handleChange","_ref2","_groupProps$state2","setValue","_groupProps$state3","removeValue","_useRadio","useRadio","onChange","ids","inputProps","_jsx","BaseBox","_objectSpread","getStyledProps","SelectorLabel","componentName","MetaConstants","RadioLabel","_jsxs","display","flexDirection","alignItems","SelectorInput","hoverTokens","radioHoverTokens","RadioIcon","isNegative","SelectorTitle","marginLeft","SelectorSupportText","id","helpTextId","Radio","assignWithoutSideEffects","React","forwardRef","displayName"],"mappings":"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"}
+{"version":3,"file":"Radio.js","sources":["../../../../../../src/components/Radio/Radio.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-shadow */\nimport React from 'react';\nimport type { OnChange } from './useRadio';\nimport { useRadio } from './useRadio';\nimport { RadioIcon } from './RadioIcon/RadioIcon';\nimport { useRadioGroupContext } from './RadioGroup/RadioContext';\nimport { radioHoverTokens } from './radioTokens';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport { SelectorLabel } from '~components/Form/Selector/SelectorLabel';\nimport BaseBox from '~components/Box/BaseBox';\nimport { SelectorTitle } from '~components/Form/Selector/SelectorTitle';\nimport { SelectorSupportText } from '~components/Form/Selector/SelectorSupportText';\nimport { SelectorInput } from '~components/Form/Selector/SelectorInput';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport type { BladeElementRef, StringChildrenType, TestID } from '~utils/types';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { throwBladeError } from '~utils/logger';\n\ntype RadioProps = {\n  /**\n   * Sets the label text of the Radio\n   */\n  children?: StringChildrenType;\n  /**\n   * Help text for the Radio\n   */\n  helpText?: string;\n  /**\n   * The value to be used in the Radio input.\n   * This is the value that will be returned on form submission.\n   */\n  value: string;\n  /**\n   * If `true`, the Radio will be disabled\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n  /**\n   * Size of the radios\n   *\n   * @default \"medium\"\n   */\n  size?: 'small' | 'medium';\n} & TestID &\n  StyledPropsBlade;\n\nconst _Radio: React.ForwardRefRenderFunction<BladeElementRef, RadioProps> = (\n  { value, children, helpText, isDisabled, size = 'medium', testID, ...styledProps },\n  ref,\n) => {\n  const groupProps = useRadioGroupContext();\n  const isInsideGroup = !isEmpty(groupProps);\n\n  if (__DEV__) {\n    if (!isInsideGroup) {\n      throwBladeError({\n        moduleName: 'Radio',\n        message: 'Cannot use <Radio /> outside of <RadioGroup />',\n      });\n    }\n  }\n\n  const isChecked = groupProps?.state?.isChecked(value);\n  const defaultChecked =\n    groupProps?.defaultValue === undefined ? undefined : groupProps?.defaultValue === value;\n  const validationState = groupProps?.validationState;\n  const hasError = validationState === 'error';\n  const _isDisabled = isDisabled ?? groupProps?.isDisabled;\n  const _isRequired = groupProps?.isRequired || groupProps?.necessityIndicator === 'required';\n  const name = groupProps?.name;\n  const showHelpText = !hasError && helpText;\n  const isReactNative = getPlatformType() === 'react-native';\n  const _size = groupProps.size ?? size;\n  const isSmall = _size === 'small';\n\n  const handleChange: OnChange = ({ isChecked, value }) => {\n    if (isChecked) {\n      groupProps?.state?.setValue(value!);\n    } else {\n      groupProps?.state?.removeValue();\n    }\n  };\n\n  const { state, ids, inputProps } = useRadio({\n    defaultChecked,\n    isChecked,\n    hasError,\n    isDisabled: _isDisabled,\n    isRequired: _isRequired,\n    name,\n    value,\n    onChange: handleChange,\n  });\n\n  return (\n    <BaseBox {...getStyledProps(styledProps)}>\n      <SelectorLabel\n        componentName={MetaConstants.RadioLabel}\n        inputProps={isReactNative ? inputProps : {}}\n        testID={testID}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"column\">\n          <BaseBox display=\"flex\" alignItems=\"center\" flexDirection=\"row\">\n            <SelectorInput\n              hoverTokens={radioHoverTokens}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              hasError={hasError}\n              inputProps={inputProps}\n              ref={ref}\n            />\n            <RadioIcon\n              size={_size}\n              isChecked={state.isChecked}\n              isDisabled={_isDisabled}\n              isNegative={hasError}\n            />\n            {children ? (\n              <SelectorTitle size={_size} isDisabled={_isDisabled}>\n                {children}\n              </SelectorTitle>\n            ) : null}\n          </BaseBox>\n          {showHelpText && (\n            <BaseBox marginLeft={isSmall ? 'spacing.6' : 'spacing.7'}>\n              <SelectorSupportText isNegative={true} id={ids?.helpTextId}>\n                {helpText}\n              </SelectorSupportText>\n            </BaseBox>\n          )}\n        </BaseBox>\n      </SelectorLabel>\n    </BaseBox>\n  );\n};\n\nconst Radio = assignWithoutSideEffects(React.forwardRef(_Radio), { displayName: 'Radio' });\n\nexport type { RadioProps };\nexport { Radio };\n"],"names":["_Radio","_ref","ref","_groupProps$state","_groupProps$size","value","children","helpText","isDisabled","_ref$size","size","testID","styledProps","_objectWithoutProperties","_excluded","groupProps","useRadioGroupContext","isInsideGroup","isEmpty","throwBladeError","moduleName","message","isChecked","state","defaultChecked","defaultValue","undefined","validationState","hasError","_isDisabled","_isRequired","isRequired","necessityIndicator","name","showHelpText","isReactNative","getPlatformType","_size","isSmall","handleChange","_ref2","_groupProps$state2","setValue","_groupProps$state3","removeValue","_useRadio","useRadio","onChange","ids","inputProps","_jsx","BaseBox","_objectSpread","getStyledProps","SelectorLabel","componentName","MetaConstants","RadioLabel","_jsxs","display","flexDirection","alignItems","SelectorInput","hoverTokens","radioHoverTokens","RadioIcon","isNegative","SelectorTitle","marginLeft","SelectorSupportText","id","helpTextId","Radio","assignWithoutSideEffects","React","forwardRef","displayName"],"mappings":"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"}

package/build/lib/web/development/components/Radio/RadioIcon/RadioIcon.js

@@ -52,7 +52,8 @@ var RadioIcon = function RadioIcon(_ref2) {
   var variant = 'default';
   if (isDisabled) variant = 'disabled';
   if (isNegative) variant = 'negative';
-  var dotColor = getIn(theme, radioIconColors.variants[variant].dot[state]);
+  var dotColorToken = radioIconColors.variants[variant].dot[state];
+  var dotColor = getIn(theme, dotColorToken);
   return /*#__PURE__*/jsx(RadioIconWrapper, _objectSpread(_objectSpread({
     size: size,
     isDisabled: isDisabled,

package/build/lib/web/development/components/Radio/RadioIcon/RadioIcon.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIcon.js","sources":["../../../../../../../src/components/Radio/RadioIcon/RadioIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioProps } from '../Radio';\nimport { RadioIconWrapper } from './RadioIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\n\nexport type RadioIconProps = {\n  isDisabled?: boolean;\n  isNegative?: boolean;\n  isChecked?: boolean;\n} & Required<Pick<RadioProps, 'size'>>;\n\nconst CheckedIcon = ({ color, size }: { color: string; size: RadioIconProps['size'] }) => {\n  const width = radioSizes.icon[size].width;\n  const height = radioSizes.icon[size].height;\n  const radius = radioSizes.icon[size].dotRadius;\n  const viewBox = `0 0 ${width} ${height}`;\n  const cx = `${width / 2}`;\n  const cy = `${height / 2}`;\n\n  return (\n    <Svg width={makeSpace(width)} height={makeSpace(height)} viewBox={viewBox} fill=\"none\">\n      <Circle cx={cx} cy={cy} r={`${radius}`} fill={color} />\n    </Svg>\n  );\n};\n\nconst RadioIcon = ({ isChecked, isDisabled, isNegative, size }: RadioIconProps) => {\n  const { theme } = useTheme();\n\n  const checked = Boolean(isChecked);\n  const state = checked ? 'checked' : 'unchecked';\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const dotColor = getIn(theme, radioIconColors.variants[variant].dot[state]);\n\n  return (\n    <RadioIconWrapper\n      size={size}\n      isDisabled={isDisabled}\n      isNegative={isNegative}\n      isChecked={checked}\n      {...metaAttribute({ name: 'radio-icon-wrapper' })}\n    >\n      <Fade show={checked} styles={{ position: 'absolute', display: 'flex' }}>\n        <CheckedIcon size={size} color={dotColor} />\n      </Fade>\n    </RadioIconWrapper>\n  );\n};\n\nexport { RadioIcon };\n"],"names":["CheckedIcon","_ref","color","size","width","radioSizes","icon","height","radius","dotRadius","viewBox","concat","cx","cy","_jsx","Svg","makeSpace","fill","children","Circle","r","RadioIcon","_ref2","isChecked","isDisabled","isNegative","_useTheme","useTheme","theme","checked","Boolean","state","variant","dotColor","getIn","radioIconColors","variants","dot","RadioIconWrapper","_objectSpread","metaAttribute","name","Fade","show","styles","position","display"],"mappings":"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"}
+{"version":3,"file":"RadioIcon.js","sources":["../../../../../../../src/components/Radio/RadioIcon/RadioIcon.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\nimport React from 'react';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioProps } from '../Radio';\nimport { RadioIconWrapper } from './RadioIconWrapper';\nimport { Fade } from './Fade';\nimport getIn from '~utils/lodashButBetter/get';\nimport { useTheme } from '~components/BladeProvider';\nimport Svg from '~components/Icons/_Svg';\nimport Circle from '~components/Icons/_Svg/Circle';\nimport { makeSpace } from '~utils/makeSpace';\nimport { metaAttribute } from '~utils/metaAttribute';\n\nexport type RadioIconProps = {\n  isDisabled?: boolean;\n  isNegative?: boolean;\n  isChecked?: boolean;\n} & Required<Pick<RadioProps, 'size'>>;\n\nconst CheckedIcon = ({ color, size }: { color: string; size: RadioIconProps['size'] }) => {\n  const width = radioSizes.icon[size].width;\n  const height = radioSizes.icon[size].height;\n  const radius = radioSizes.icon[size].dotRadius;\n  const viewBox = `0 0 ${width} ${height}`;\n  const cx = `${width / 2}`;\n  const cy = `${height / 2}`;\n\n  return (\n    <Svg width={makeSpace(width)} height={makeSpace(height)} viewBox={viewBox} fill=\"none\">\n      <Circle cx={cx} cy={cy} r={`${radius}`} fill={color} />\n    </Svg>\n  );\n};\n\nconst RadioIcon = ({ isChecked, isDisabled, isNegative, size }: RadioIconProps) => {\n  const { theme } = useTheme();\n\n  const checked = Boolean(isChecked);\n  const state = checked ? 'checked' : 'unchecked';\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const dotColorToken = radioIconColors.variants[variant].dot[state];\n  const dotColor = getIn(theme, dotColorToken);\n\n  return (\n    <RadioIconWrapper\n      size={size}\n      isDisabled={isDisabled}\n      isNegative={isNegative}\n      isChecked={checked}\n      {...metaAttribute({ name: 'radio-icon-wrapper' })}\n    >\n      <Fade show={checked} styles={{ position: 'absolute', display: 'flex' }}>\n        <CheckedIcon size={size} color={dotColor} />\n      </Fade>\n    </RadioIconWrapper>\n  );\n};\n\nexport { RadioIcon };\n"],"names":["CheckedIcon","_ref","color","size","width","radioSizes","icon","height","radius","dotRadius","viewBox","concat","cx","cy","_jsx","Svg","makeSpace","fill","children","Circle","r","RadioIcon","_ref2","isChecked","isDisabled","isNegative","_useTheme","useTheme","theme","checked","Boolean","state","variant","dotColorToken","radioIconColors","variants","dot","dotColor","getIn","RadioIconWrapper","_objectSpread","metaAttribute","name","Fade","show","styles","position","display"],"mappings":"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"}

package/build/lib/web/development/components/Radio/RadioIcon/RadioIconWrapperStyles.js

@@ -28,8 +28,8 @@ var getRadioIconWrapperStyles = function getRadioIconWrapperStyles(_ref) {
   var checked = isChecked ? 'checked' : 'unchecked';
   var background = radioIconColors.variants[variant].background[checked];
   var border = radioIconColors.variants[variant].border[checked];
-  var backgroundColor = background === 'transparent' ? background : getIn(theme, background);
-  var borderColor = border === 'transparent' ? border : getIn(theme, border);
+  var backgroundColor = getIn(theme, background);
+  var borderColor = getIn(theme, border);
   return _objectSpread({
     position: 'relative',
     display: 'flex',

package/build/lib/web/development/components/Radio/RadioIcon/RadioIconWrapperStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioIconWrapperStyles.js","sources":["../../../../../../../src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioIconProps } from './RadioIcon';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { castWebType, getPlatformType } from '~utils';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nexport type RadioRectProps = RadioIconProps;\n\nconst getRadioIconWrapperStyles = ({\n  theme,\n  isChecked,\n  isDisabled,\n  isNegative,\n  size,\n}: RadioRectProps & { theme: Theme }): CSSObject => {\n  const isReactNative = getPlatformType() === 'react-native';\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const checked = isChecked ? 'checked' : 'unchecked';\n  const background = radioIconColors.variants[variant].background[checked];\n  const border = radioIconColors.variants[variant].border[checked];\n  const backgroundColor = background === 'transparent' ? background : getIn(theme, background);\n  const borderColor = border === 'transparent' ? border : getIn(theme, border);\n\n  return {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: makeSpace(radioSizes.icon[size].width),\n    height: makeSpace(radioSizes.icon[size].height),\n    borderWidth: makeBorderSize(theme.border.width.thick),\n    borderStyle: 'solid',\n    margin: makeSpace(theme.spacing[1]),\n    borderRadius: makeSize(theme.border.radius.max),\n    backgroundColor,\n    borderColor,\n    ...(!isReactNative && {\n      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n      transitionTimingFunction: castWebType(theme.motion.easing.exit.attentive),\n    }),\n  };\n};\n\nexport { getRadioIconWrapperStyles };\n"],"names":["getRadioIconWrapperStyles","_ref","theme","isChecked","isDisabled","isNegative","size","isReactNative","getPlatformType","variant","checked","background","radioIconColors","variants","border","backgroundColor","getIn","borderColor","_objectSpread","position","display","alignItems","justifyContent","width","makeSpace","radioSizes","icon","height","borderWidth","makeBorderSize","thick","borderStyle","margin","spacing","borderRadius","makeSize","radius","max","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","exit","attentive"],"mappings":";;;;;;;;;;;;;;;;;AAaA,IAAMA,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAAC,IAAA,EAMqB;AAAA,EAAA,IALlDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,IAAI,GAAAL,IAAA,CAAJK,IAAI,CAAA;AAEJ,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;EAC1D,IAAIC,OAA4C,GAAG,SAAS,CAAA;AAC5D,EAAA,IAAIL,UAAU,EAAEK,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAIJ,UAAU,EAAEI,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAMC,OAAO,GAAGP,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AACnD,EAAA,IAAMQ,UAAU,GAAGC,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACE,UAAU,CAACD,OAAO,CAAC,CAAA;AACxE,EAAA,IAAMI,MAAM,GAAGF,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACK,MAAM,CAACJ,OAAO,CAAC,CAAA;AAChE,EAAA,IAAMK,eAAe,GAAGJ,UAAU,KAAK,aAAa,GAAGA,UAAU,GAAGK,KAAK,CAACd,KAAK,EAAES,UAAU,CAAC,CAAA;AAC5F,EAAA,IAAMM,WAAW,GAAGH,MAAM,KAAK,aAAa,GAAGA,MAAM,GAAGE,KAAK,CAACd,KAAK,EAAEY,MAAM,CAAC,CAAA;AAE5E,EAAA,OAAAI,aAAA,CAAA;AACEC,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;IACxBC,KAAK,EAAEC,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,IAAI,CAAC,CAACiB,KAAK,CAAC;IAC7CI,MAAM,EAAEH,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,IAAI,CAAC,CAACqB,MAAM,CAAC;IAC/CC,WAAW,EAAEC,cAAc,CAAC3B,KAAK,CAACY,MAAM,CAACS,KAAK,CAACO,KAAK,CAAC;AACrDC,IAAAA,WAAW,EAAE,OAAO;IACpBC,MAAM,EAAER,SAAS,CAACtB,KAAK,CAAC+B,OAAO,CAAC,CAAC,CAAC,CAAC;IACnCC,YAAY,EAAEC,QAAQ,CAACjC,KAAK,CAACY,MAAM,CAACsB,MAAM,CAACC,GAAG,CAAC;AAC/CtB,IAAAA,eAAe,EAAfA,eAAe;AACfE,IAAAA,WAAW,EAAXA,WAAAA;GACI,EAAA,CAACV,aAAa,IAAI;AACpB+B,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACtC,KAAK,CAACuC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC;IAC7EC,wBAAwB,EAAEL,WAAW,CAACrC,KAAK,CAACuC,MAAM,CAACI,MAAM,CAACC,IAAI,CAACC,SAAS,CAAA;GACzE,CAAA,CAAA;AAEL;;;;"}
+{"version":3,"file":"RadioIconWrapperStyles.js","sources":["../../../../../../../src/components/Radio/RadioIcon/RadioIconWrapperStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { radioIconColors, radioSizes } from '../radioTokens';\nimport type { RadioIconProps } from './RadioIcon';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { castWebType, getPlatformType } from '~utils';\nimport { makeSpace } from '~utils/makeSpace';\nimport { makeSize } from '~utils/makeSize';\nimport { makeBorderSize } from '~utils/makeBorderSize';\nimport { makeMotionTime } from '~utils/makeMotionTime';\n\nexport type RadioRectProps = RadioIconProps;\n\nconst getRadioIconWrapperStyles = ({\n  theme,\n  isChecked,\n  isDisabled,\n  isNegative,\n  size,\n}: RadioRectProps & { theme: Theme }): CSSObject => {\n  const isReactNative = getPlatformType() === 'react-native';\n  let variant: 'default' | 'disabled' | 'negative' = 'default';\n  if (isDisabled) variant = 'disabled';\n  if (isNegative) variant = 'negative';\n  const checked = isChecked ? 'checked' : 'unchecked';\n  const background = radioIconColors.variants[variant].background[checked];\n  const border = radioIconColors.variants[variant].border[checked];\n  const backgroundColor = getIn(theme, background);\n  const borderColor = getIn(theme, border);\n\n  return {\n    position: 'relative',\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    width: makeSpace(radioSizes.icon[size].width),\n    height: makeSpace(radioSizes.icon[size].height),\n    borderWidth: makeBorderSize(theme.border.width.thick),\n    borderStyle: 'solid',\n    margin: makeSpace(theme.spacing[1]),\n    borderRadius: makeSize(theme.border.radius.max),\n    backgroundColor,\n    borderColor,\n    ...(!isReactNative && {\n      transitionDuration: castWebType(makeMotionTime(theme.motion.duration.xquick)),\n      transitionTimingFunction: castWebType(theme.motion.easing.exit.attentive),\n    }),\n  };\n};\n\nexport { getRadioIconWrapperStyles };\n"],"names":["getRadioIconWrapperStyles","_ref","theme","isChecked","isDisabled","isNegative","size","isReactNative","getPlatformType","variant","checked","background","radioIconColors","variants","border","backgroundColor","getIn","borderColor","_objectSpread","position","display","alignItems","justifyContent","width","makeSpace","radioSizes","icon","height","borderWidth","makeBorderSize","thick","borderStyle","margin","spacing","borderRadius","makeSize","radius","max","transitionDuration","castWebType","makeMotionTime","motion","duration","xquick","transitionTimingFunction","easing","exit","attentive"],"mappings":";;;;;;;;;;;;;;;;;AAaA,IAAMA,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAAC,IAAA,EAMqB;AAAA,EAAA,IALlDC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,UAAU,GAAAH,IAAA,CAAVG,UAAU;IACVC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,IAAI,GAAAL,IAAA,CAAJK,IAAI,CAAA;AAEJ,EAAA,IAAMC,aAAa,GAAGC,eAAe,EAAE,KAAK,cAAc,CAAA;EAC1D,IAAIC,OAA4C,GAAG,SAAS,CAAA;AAC5D,EAAA,IAAIL,UAAU,EAAEK,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAIJ,UAAU,EAAEI,OAAO,GAAG,UAAU,CAAA;AACpC,EAAA,IAAMC,OAAO,GAAGP,SAAS,GAAG,SAAS,GAAG,WAAW,CAAA;AACnD,EAAA,IAAMQ,UAAU,GAAGC,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACE,UAAU,CAACD,OAAO,CAAC,CAAA;AACxE,EAAA,IAAMI,MAAM,GAAGF,eAAe,CAACC,QAAQ,CAACJ,OAAO,CAAC,CAACK,MAAM,CAACJ,OAAO,CAAC,CAAA;AAChE,EAAA,IAAMK,eAAe,GAAGC,KAAK,CAACd,KAAK,EAAES,UAAU,CAAC,CAAA;AAChD,EAAA,IAAMM,WAAW,GAAGD,KAAK,CAACd,KAAK,EAAEY,MAAM,CAAC,CAAA;AAExC,EAAA,OAAAI,aAAA,CAAA;AACEC,IAAAA,QAAQ,EAAE,UAAU;AACpBC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,UAAU,EAAE,QAAQ;AACpBC,IAAAA,cAAc,EAAE,QAAQ;IACxBC,KAAK,EAAEC,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,IAAI,CAAC,CAACiB,KAAK,CAAC;IAC7CI,MAAM,EAAEH,SAAS,CAACC,UAAU,CAACC,IAAI,CAACpB,IAAI,CAAC,CAACqB,MAAM,CAAC;IAC/CC,WAAW,EAAEC,cAAc,CAAC3B,KAAK,CAACY,MAAM,CAACS,KAAK,CAACO,KAAK,CAAC;AACrDC,IAAAA,WAAW,EAAE,OAAO;IACpBC,MAAM,EAAER,SAAS,CAACtB,KAAK,CAAC+B,OAAO,CAAC,CAAC,CAAC,CAAC;IACnCC,YAAY,EAAEC,QAAQ,CAACjC,KAAK,CAACY,MAAM,CAACsB,MAAM,CAACC,GAAG,CAAC;AAC/CtB,IAAAA,eAAe,EAAfA,eAAe;AACfE,IAAAA,WAAW,EAAXA,WAAAA;GACI,EAAA,CAACV,aAAa,IAAI;AACpB+B,IAAAA,kBAAkB,EAAEC,WAAW,CAACC,cAAc,CAACtC,KAAK,CAACuC,MAAM,CAACC,QAAQ,CAACC,MAAM,CAAC,CAAC;IAC7EC,wBAAwB,EAAEL,WAAW,CAACrC,KAAK,CAACuC,MAAM,CAACI,MAAM,CAACC,IAAI,CAACC,SAAS,CAAA;GACzE,CAAA,CAAA;AAEL;;;;"}

package/build/lib/web/development/components/Radio/radioTokens.js

@@ -31,44 +31,44 @@ var radioIconColors = {
   variants: {
     "default": {
       dot: {
-        checked: 'colors.brand.gray.200.lowContrast',
-        unchecked: 'colors.brand.gray.200.lowContrast'
+        checked: 'colors.interactive.icon.onPrimary.normal',
+        unchecked: 'colors.transparent'
       },
       border: {
-        checked: 'colors.brand.primary.500',
-        unchecked: 'colors.brand.gray.500.lowContrast'
+        checked: 'colors.interactive.border.primary.default',
+        unchecked: 'colors.interactive.border.gray.default'
       },
       background: {
-        checked: 'colors.brand.primary.500',
-        unchecked: 'transparent'
+        checked: 'colors.interactive.background.primary.default',
+        unchecked: 'colors.transparent'
       }
     },
     disabled: {
       dot: {
-        checked: 'colors.brand.gray.200.lowContrast',
-        unchecked: 'colors.brand.gray.200.lowContrast'
+        checked: 'colors.interactive.icon.onPrimary.normal',
+        unchecked: 'colors.interactive.icon.onPrimary.normal'
       },
       border: {
-        checked: 'transparent',
-        unchecked: 'colors.brand.gray.a100.lowContrast'
+        checked: 'colors.transparent',
+        unchecked: 'colors.interactive.border.gray.disabled'
       },
       background: {
-        checked: 'colors.brand.gray.a100.lowContrast',
-        unchecked: 'transparent'
+        checked: 'colors.interactive.background.primary.disabled',
+        unchecked: 'colors.transparent'
       }
     },
     negative: {
       dot: {
-        checked: 'colors.brand.gray.200.lowContrast',
-        unchecked: 'colors.brand.gray.200.lowContrast'
+        checked: 'colors.interactive.icon.onPrimary.normal',
+        unchecked: 'colors.transparent'
       },
       border: {
-        checked: 'colors.feedback.border.negative.highContrast',
-        unchecked: 'colors.feedback.border.negative.highContrast'
+        checked: 'colors.interactive.border.negative.default',
+        unchecked: 'colors.interactive.border.negative.default'
       },
       background: {
-        checked: 'colors.feedback.background.negative.highContrast',
-        unchecked: 'colors.feedback.background.negative.lowContrast'
+        checked: 'colors.interactive.background.negative.default',
+        unchecked: 'colors.transparent'
       }
     }
   }
@@ -76,12 +76,13 @@ var radioIconColors = {
 var radioHoverTokens = {
   "default": {
     background: {
-      checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.a50.lowContrast'
+      checked: 'colors.interactive.background.primary.highlighted',
+      unchecked: 'colors.interactive.background.gray.faded'
     },
     border: {
-      checked: 'colors.brand.primary.600',
-      unchecked: 'colors.brand.gray.500.lowContrast'
+      checked: 'colors.interactive.background.primary.highlighted',
+      // Intentionally not using border tokens here since we want to match the background color
+      unchecked: 'colors.interactive.border.gray.default'
     }
   }
 };

package/build/lib/web/development/components/Radio/radioTokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { DotNotationColorStringToken } from '~utils/types';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.2',\n        desktop: 'spacing.0',\n      },\n      medium: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.2',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n      dotRadius: size[2],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n      dotRadius: size[3],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationColorStringToken<Theme['colors']>}` | 'transparent';\ntype Variant = {\n  dot: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype RadioIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst radioIconColors: RadioIconColors = {\n  variants: {\n    default: {\n      dot: {\n        checked: 'colors.brand.gray.200.lowContrast',\n        unchecked: 'colors.brand.gray.200.lowContrast',\n      },\n      border: {\n        checked: 'colors.brand.primary.500',\n        unchecked: 'colors.brand.gray.500.lowContrast',\n      },\n      background: {\n        checked: 'colors.brand.primary.500',\n        unchecked: 'transparent',\n      },\n    },\n    disabled: {\n      dot: {\n        checked: 'colors.brand.gray.200.lowContrast',\n        unchecked: 'colors.brand.gray.200.lowContrast',\n      },\n      border: {\n        checked: 'transparent',\n        unchecked: 'colors.brand.gray.a100.lowContrast',\n      },\n      background: {\n        checked: 'colors.brand.gray.a100.lowContrast',\n        unchecked: 'transparent',\n      },\n    },\n    negative: {\n      dot: {\n        checked: 'colors.brand.gray.200.lowContrast',\n        unchecked: 'colors.brand.gray.200.lowContrast',\n      },\n      border: {\n        checked: 'colors.feedback.border.negative.highContrast',\n        unchecked: 'colors.feedback.border.negative.highContrast',\n      },\n      background: {\n        checked: 'colors.feedback.background.negative.highContrast',\n        unchecked: 'colors.feedback.background.negative.lowContrast',\n      },\n    },\n  },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.brand.primary.600',\n      unchecked: 'colors.brand.gray.a50.lowContrast',\n    },\n    border: {\n      checked: 'colors.brand.primary.600',\n      unchecked: 'colors.brand.gray.500.lowContrast',\n    },\n  },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","icon","width","size","height","dotRadius","radioIconColors","variants","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":";;;AAKA,IAAMA,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDE,EAAAA,IAAI,EAAE;AACJJ,IAAAA,KAAK,EAAE;AACLK,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;KAClB;AACDH,IAAAA,MAAM,EAAE;AACNE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;AACnB,KAAA;AACF,GAAA;AACF,EAAU;AA0BV,IAAMG,eAAgC,GAAG;AACvCC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,mCAAmC;AAC5CC,QAAAA,SAAS,EAAE,mCAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,0BAA0B;AACnCC,QAAAA,SAAS,EAAE,mCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,0BAA0B;AACnCC,QAAAA,SAAS,EAAE,aAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,mCAAmC;AAC5CC,QAAAA,SAAS,EAAE,mCAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,aAAa;AACtBC,QAAAA,SAAS,EAAE,oCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,oCAAoC;AAC7CC,QAAAA,SAAS,EAAE,aAAA;AACb,OAAA;KACD;AACDI,IAAAA,QAAQ,EAAE;AACRN,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,mCAAmC;AAC5CC,QAAAA,SAAS,EAAE,mCAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,8CAA8C;AACvDC,QAAAA,SAAS,EAAE,8CAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,kDAAkD;AAC3DC,QAAAA,SAAS,EAAE,iDAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMK,gBAA0C,GAAG;EACjD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVH,MAAAA,OAAO,EAAE,0BAA0B;AACnCC,MAAAA,SAAS,EAAE,mCAAA;KACZ;AACDC,IAAAA,MAAM,EAAE;AACNF,MAAAA,OAAO,EAAE,0BAA0B;AACnCC,MAAAA,SAAS,EAAE,mCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}
+{"version":3,"file":"radioTokens.js","sources":["../../../../../../src/components/Radio/radioTokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport type { SelectorInputHoverTokens } from '~components/Form/Selector/types';\nimport type { DotNotationToken } from '~utils/lodashButBetter/get';\nimport { size } from '~tokens/global';\n\nconst radioSizes = {\n  group: {\n    gap: {\n      small: {\n        mobile: 'spacing.2',\n        desktop: 'spacing.0',\n      },\n      medium: {\n        mobile: 'spacing.3',\n        desktop: 'spacing.2',\n      },\n    },\n  },\n  icon: {\n    small: {\n      width: size[12],\n      height: size[12],\n      dotRadius: size[2],\n    },\n    medium: {\n      width: size[16],\n      height: size[16],\n      dotRadius: size[3],\n    },\n  },\n} as const;\n\ntype ColorTokens = `colors.${DotNotationToken<Theme['colors']>}`;\ntype Variant = {\n  dot: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  border: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n  background: {\n    checked: ColorTokens;\n    unchecked: ColorTokens;\n  };\n};\n\ntype RadioIconColors = {\n  variants: {\n    default: Variant;\n    disabled: Variant;\n    negative: Variant;\n  };\n};\n\nconst radioIconColors: RadioIconColors = {\n  variants: {\n    default: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.primary.default',\n        unchecked: 'colors.interactive.border.gray.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n    disabled: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.interactive.icon.onPrimary.normal',\n      },\n      border: {\n        checked: 'colors.transparent',\n        unchecked: 'colors.interactive.border.gray.disabled',\n      },\n      background: {\n        checked: 'colors.interactive.background.primary.disabled',\n        unchecked: 'colors.transparent',\n      },\n    },\n    negative: {\n      dot: {\n        checked: 'colors.interactive.icon.onPrimary.normal',\n        unchecked: 'colors.transparent',\n      },\n      border: {\n        checked: 'colors.interactive.border.negative.default',\n        unchecked: 'colors.interactive.border.negative.default',\n      },\n      background: {\n        checked: 'colors.interactive.background.negative.default',\n        unchecked: 'colors.transparent',\n      },\n    },\n  },\n} as const;\n\nconst radioHoverTokens: SelectorInputHoverTokens = {\n  default: {\n    background: {\n      checked: 'colors.interactive.background.primary.highlighted',\n      unchecked: 'colors.interactive.background.gray.faded',\n    },\n    border: {\n      checked: 'colors.interactive.background.primary.highlighted', // Intentionally not using border tokens here since we want to match the background color\n      unchecked: 'colors.interactive.border.gray.default',\n    },\n  },\n};\n\nexport { radioSizes, radioIconColors, radioHoverTokens };\n"],"names":["radioSizes","group","gap","small","mobile","desktop","medium","icon","width","size","height","dotRadius","radioIconColors","variants","dot","checked","unchecked","border","background","disabled","negative","radioHoverTokens"],"mappings":";;;AAKA,IAAMA,UAAU,GAAG;AACjBC,EAAAA,KAAK,EAAE;AACLC,IAAAA,GAAG,EAAE;AACHC,MAAAA,KAAK,EAAE;AACLC,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;OACV;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,MAAM,EAAE,WAAW;AACnBC,QAAAA,OAAO,EAAE,WAAA;AACX,OAAA;AACF,KAAA;GACD;AACDE,EAAAA,IAAI,EAAE;AACJJ,IAAAA,KAAK,EAAE;AACLK,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;KAClB;AACDH,IAAAA,MAAM,EAAE;AACNE,MAAAA,KAAK,EAAEC,IAAI,CAAC,EAAE,CAAC;AACfC,MAAAA,MAAM,EAAED,IAAI,CAAC,EAAE,CAAC;MAChBE,SAAS,EAAEF,IAAI,CAAC,CAAC,CAAA;AACnB,KAAA;AACF,GAAA;AACF,EAAU;AA0BV,IAAMG,eAAgC,GAAG;AACvCC,EAAAA,QAAQ,EAAE;IACR,SAAS,EAAA;AACPC,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,2CAA2C;AACpDC,QAAAA,SAAS,EAAE,wCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,+CAA+C;AACxDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDG,IAAAA,QAAQ,EAAE;AACRL,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,0CAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,oBAAoB;AAC7BC,QAAAA,SAAS,EAAE,yCAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;KACD;AACDI,IAAAA,QAAQ,EAAE;AACRN,MAAAA,GAAG,EAAE;AACHC,QAAAA,OAAO,EAAE,0CAA0C;AACnDC,QAAAA,SAAS,EAAE,oBAAA;OACZ;AACDC,MAAAA,MAAM,EAAE;AACNF,QAAAA,OAAO,EAAE,4CAA4C;AACrDC,QAAAA,SAAS,EAAE,4CAAA;OACZ;AACDE,MAAAA,UAAU,EAAE;AACVH,QAAAA,OAAO,EAAE,gDAAgD;AACzDC,QAAAA,SAAS,EAAE,oBAAA;AACb,OAAA;AACF,KAAA;AACF,GAAA;AACF,EAAU;AAEV,IAAMK,gBAA0C,GAAG;EACjD,SAAS,EAAA;AACPH,IAAAA,UAAU,EAAE;AACVH,MAAAA,OAAO,EAAE,mDAAmD;AAC5DC,MAAAA,SAAS,EAAE,0CAAA;KACZ;AACDC,IAAAA,MAAM,EAAE;AACNF,MAAAA,OAAO,EAAE,mDAAmD;AAAE;AAC9DC,MAAAA,SAAS,EAAE,wCAAA;AACb,KAAA;AACF,GAAA;AACF;;;;"}

package/build/lib/web/development/components/Skeleton/PulseAnimation.web.js

@@ -8,9 +8,8 @@ import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js
 /* eslint-disable @typescript-eslint/restrict-plus-operands */
 
 var pulseKeyframes = function pulseKeyframes(_ref) {
-  var theme = _ref.theme,
-    contrast = _ref.contrast;
-  return keyframes(["0%{background-color:", ";}25%{background-color:", ";}100%{background-color:", ";}"], theme.colors.brand.gray.a100["".concat(contrast, "Contrast")], theme.colors.brand.gray.a100["".concat(contrast, "Contrast")], theme.colors.brand.gray.a50["".concat(contrast, "Contrast")]);
+  var theme = _ref.theme;
+  return keyframes(["0%{background-color:", ";}25%{background-color:", ";}100%{background-color:", ";}"], theme.colors.interactive.background.gray["default"], theme.colors.interactive.background.gray["default"], theme.colors.interactive.background.gray.highlighted);
 };
 var fadeInKeyframes = function fadeInKeyframes() {
   return keyframes(["0%{opacity:0;}100%{opacity:1;}"]);
@@ -19,8 +18,7 @@ var PulseAnimation = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "PulseAnimationweb__PulseAnimation",
   componentId: "sc-184soy3-0"
 })(function (_ref2) {
-  var theme = _ref2.theme,
-    contrast = _ref2.contrast;
+  var theme = _ref2.theme;
   // We need to delay the animation in between keyframes
   // Since we also offset the animation to have 300ms delay in 25% keyframe
   // https://css-tricks.com/css-keyframe-animation-delay-iterations/
@@ -29,8 +27,7 @@ var PulseAnimation = /*#__PURE__*/styled(BaseBox).withConfig({
   var totalDuration = castWebType(makeMotionTime(durationPulseOn + durationPluseOff));
   var duration = castWebType(makeMotionTime(theme.motion.duration['2xgentle']));
   var easing = castWebType(theme.motion.easing.standard.effective);
-  return css(["opacity:0;background-color:", ";animation-name:", ",", ";animation-duration:", ",", ";animation-delay:0ms,", ";animation-timing-function:", ",", ";animation-iteration-count:1,infinite;animation-direction:normal,alternate;animation-fill-mode:forwards;"], theme.colors.brand.gray.a100["".concat(contrast, "Contrast")], fadeInKeyframes(), pulseKeyframes({
-    contrast: contrast,
+  return css(["opacity:0;background-color:", ";animation-name:", ",", ";animation-duration:", ",", ";animation-delay:0ms,", ";animation-timing-function:", ",", ";animation-iteration-count:1,infinite;animation-direction:normal,alternate;animation-fill-mode:forwards;"], theme.colors.interactive.background.gray["default"], fadeInKeyframes(), pulseKeyframes({
     theme: theme
   }), duration, totalDuration, duration, easing, easing);
 });

package/build/lib/web/development/components/Skeleton/PulseAnimation.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"PulseAnimation.web.js","sources":["../../../../../../src/components/Skeleton/PulseAnimation.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport type { DefaultTheme, Keyframes } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime } from '~utils';\n\nconst pulseKeyframes = ({\n  theme,\n  contrast,\n}: {\n  theme: DefaultTheme;\n  contrast: 'low' | 'high';\n}): Keyframes => keyframes`\n  0% {\n    background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]};\n  }\n  25% {\n    background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]};\n  }\n  100% {\n    background-color: ${theme.colors.brand.gray.a50[`${contrast}Contrast`]};\n  }\n`;\n\nconst fadeInKeyframes = (): Keyframes => keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst PulseAnimation = styled(BaseBox)<{ contrast: 'low' | 'high' }>(({ theme, contrast }) => {\n  // We need to delay the animation in between keyframes\n  // Since we also offset the animation to have 300ms delay in 25% keyframe\n  // https://css-tricks.com/css-keyframe-animation-delay-iterations/\n  const durationPluseOff = theme.motion.duration.xmoderate;\n  const durationPulseOn = theme.motion.duration['2xgentle'];\n  const totalDuration = castWebType(makeMotionTime(durationPulseOn + durationPluseOff));\n  const duration = castWebType(makeMotionTime(theme.motion.duration['2xgentle']));\n  const easing = castWebType(theme.motion.easing.standard.effective);\n\n  return css`\n    opacity: 0;\n    background-color: ${theme.colors.brand.gray.a100[`${contrast}Contrast`]};\n    animation-name: ${fadeInKeyframes()}, ${pulseKeyframes({ contrast, theme })};\n    animation-duration: ${duration}, ${totalDuration};\n    animation-delay: 0ms, ${duration};\n    animation-timing-function: ${easing}, ${easing};\n    animation-iteration-count: 1, infinite;\n    animation-direction: normal, alternate;\n    animation-fill-mode: forwards;\n  `;\n});\n\nexport { PulseAnimation };\n"],"names":["pulseKeyframes","_ref","theme","contrast","keyframes","colors","brand","gray","a100","concat","a50","fadeInKeyframes","PulseAnimation","styled","BaseBox","withConfig","displayName","componentId","_ref2","durationPluseOff","motion","duration","xmoderate","durationPulseOn","totalDuration","castWebType","makeMotionTime","easing","standard","effective","css"],"mappings":";;;;;;;AAAA;;AAMA,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAClBC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ,CAAA;EAAA,OAIOC,SAAS,wFAEFF,KAAK,CAACG,MAAM,CAACC,KAAK,CAACC,IAAI,CAACC,IAAI,CAAAC,EAAAA,CAAAA,MAAA,CAAIN,QAAQ,EAAA,UAAA,CAAA,CAAW,EAGnDD,KAAK,CAACG,MAAM,CAACC,KAAK,CAACC,IAAI,CAACC,IAAI,CAAAC,EAAAA,CAAAA,MAAA,CAAIN,QAAQ,EAAA,UAAA,CAAA,CAAW,EAGnDD,KAAK,CAACG,MAAM,CAACC,KAAK,CAACC,IAAI,CAACG,GAAG,CAAAD,EAAAA,CAAAA,MAAA,CAAIN,QAAQ,EAAW,UAAA,CAAA,CAAA,CAAA,CAAA;AAAA,CAEzE,CAAA;AAED,IAAMQ,eAAe,GAAG,SAAlBA,eAAeA,GAAA;AAAA,EAAA,OAAoBP,SAAS,CAAA,CAAA,gCAAA,CAAA,CAAA,CAAA;AAAA,CAOjD,CAAA;AAED,IAAMQ,cAAc,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAA+B,CAAA,CAAA,UAAAC,KAAA,EAAyB;AAAA,EAAA,IAAtBhB,KAAK,GAAAgB,KAAA,CAALhB,KAAK;IAAEC,QAAQ,GAAAe,KAAA,CAARf,QAAQ,CAAA;AACrF;AACA;AACA;EACA,IAAMgB,gBAAgB,GAAGjB,KAAK,CAACkB,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA;EACxD,IAAMC,eAAe,GAAGrB,KAAK,CAACkB,MAAM,CAACC,QAAQ,CAAC,UAAU,CAAC,CAAA;EACzD,IAAMG,aAAa,GAAGC,WAAW,CAACC,cAAc,CAACH,eAAe,GAAGJ,gBAAgB,CAAC,CAAC,CAAA;AACrF,EAAA,IAAME,QAAQ,GAAGI,WAAW,CAACC,cAAc,CAACxB,KAAK,CAACkB,MAAM,CAACC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;AAC/E,EAAA,IAAMM,MAAM,GAAGF,WAAW,CAACvB,KAAK,CAACkB,MAAM,CAACO,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAC,CAAA;EAElE,OAAOC,GAAG,iQAEY5B,KAAK,CAACG,MAAM,CAACC,KAAK,CAACC,IAAI,CAACC,IAAI,IAAAC,MAAA,CAAIN,QAAQ,EAAW,UAAA,CAAA,CAAA,EACrDQ,eAAe,EAAE,EAAKX,cAAc,CAAC;AAAEG,IAAAA,QAAQ,EAARA,QAAQ;AAAED,IAAAA,KAAK,EAALA,KAAAA;GAAO,CAAC,EACrDmB,QAAQ,EAAKG,aAAa,EACxBH,QAAQ,EACHM,MAAM,EAAKA,MAAM,CAAA,CAAA;AAKlD,CAAC;;;;"}
+{"version":3,"file":"PulseAnimation.web.js","sources":["../../../../../../src/components/Skeleton/PulseAnimation.web.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/restrict-plus-operands */\nimport type { DefaultTheme, Keyframes } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType, makeMotionTime } from '~utils';\n\nconst pulseKeyframes = ({ theme }: { theme: DefaultTheme }): Keyframes => keyframes`\n  0% {\n    background-color: ${theme.colors.interactive.background.gray.default};\n  }\n  25% {\n    background-color: ${theme.colors.interactive.background.gray.default};\n  }\n  100% {\n    background-color: ${theme.colors.interactive.background.gray.highlighted};\n  }\n`;\n\nconst fadeInKeyframes = (): Keyframes => keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst PulseAnimation = styled(BaseBox)(({ theme }) => {\n  // We need to delay the animation in between keyframes\n  // Since we also offset the animation to have 300ms delay in 25% keyframe\n  // https://css-tricks.com/css-keyframe-animation-delay-iterations/\n  const durationPluseOff = theme.motion.duration.xmoderate;\n  const durationPulseOn = theme.motion.duration['2xgentle'];\n  const totalDuration = castWebType(makeMotionTime(durationPulseOn + durationPluseOff));\n  const duration = castWebType(makeMotionTime(theme.motion.duration['2xgentle']));\n  const easing = castWebType(theme.motion.easing.standard.effective);\n\n  return css`\n    opacity: 0;\n    background-color: ${theme.colors.interactive.background.gray.default};\n    animation-name: ${fadeInKeyframes()}, ${pulseKeyframes({ theme })};\n    animation-duration: ${duration}, ${totalDuration};\n    animation-delay: 0ms, ${duration};\n    animation-timing-function: ${easing}, ${easing};\n    animation-iteration-count: 1, infinite;\n    animation-direction: normal, alternate;\n    animation-fill-mode: forwards;\n  `;\n});\n\nexport { PulseAnimation };\n"],"names":["pulseKeyframes","_ref","theme","keyframes","colors","interactive","background","gray","highlighted","fadeInKeyframes","PulseAnimation","styled","BaseBox","withConfig","displayName","componentId","_ref2","durationPluseOff","motion","duration","xmoderate","durationPulseOn","totalDuration","castWebType","makeMotionTime","easing","standard","effective","css"],"mappings":";;;;;;;AAAA;;AAMA,IAAMA,cAAc,GAAG,SAAjBA,cAAcA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAMC,KAAK,GAAAD,IAAA,CAALC,KAAK,CAAA;AAAA,EAAA,OAA2CC,SAAS,CAAA,CAAA,sBAAA,EAAA,yBAAA,EAAA,0BAAA,EAAA,IAAA,CAAA,EAE3DD,KAAK,CAACE,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,CAAA,SAAA,CAAQ,EAGhDL,KAAK,CAACE,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,CAAA,SAAA,CAAQ,EAGhDL,KAAK,CAACE,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,CAACC,WAAW,CAAA,CAAA;AAAA,CAE3E,CAAA;AAED,IAAMC,eAAe,GAAG,SAAlBA,eAAeA,GAAA;AAAA,EAAA,OAAoBN,SAAS,CAAA,CAAA,gCAAA,CAAA,CAAA,CAAA;AAAA,CAOjD,CAAA;AAED,IAAMO,cAAc,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,mCAAA;EAAAC,WAAA,EAAA,cAAA;AAAA,CAAC,CAAA,CAAA,UAAAC,KAAA,EAAe;AAAA,EAAA,IAAZd,KAAK,GAAAc,KAAA,CAALd,KAAK,CAAA;AAC7C;AACA;AACA;EACA,IAAMe,gBAAgB,GAAGf,KAAK,CAACgB,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAA;EACxD,IAAMC,eAAe,GAAGnB,KAAK,CAACgB,MAAM,CAACC,QAAQ,CAAC,UAAU,CAAC,CAAA;EACzD,IAAMG,aAAa,GAAGC,WAAW,CAACC,cAAc,CAACH,eAAe,GAAGJ,gBAAgB,CAAC,CAAC,CAAA;AACrF,EAAA,IAAME,QAAQ,GAAGI,WAAW,CAACC,cAAc,CAACtB,KAAK,CAACgB,MAAM,CAACC,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;AAC/E,EAAA,IAAMM,MAAM,GAAGF,WAAW,CAACrB,KAAK,CAACgB,MAAM,CAACO,MAAM,CAACC,QAAQ,CAACC,SAAS,CAAC,CAAA;AAElE,EAAA,OAAOC,GAAG,CAEY1B,CAAAA,6BAAAA,EAAAA,kBAAAA,EAAAA,GAAAA,EAAAA,sBAAAA,EAAAA,GAAAA,EAAAA,uBAAAA,EAAAA,6BAAAA,EAAAA,GAAAA,EAAAA,0GAAAA,CAAAA,EAAAA,KAAK,CAACE,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,IAAI,WAAQ,EAClDE,eAAe,EAAE,EAAKT,cAAc,CAAC;AAAEE,IAAAA,KAAK,EAALA,KAAAA;GAAO,CAAC,EAC3CiB,QAAQ,EAAKG,aAAa,EACxBH,QAAQ,EACHM,MAAM,EAAKA,MAAM,CAAA,CAAA;AAKlD,CAAC;;;;"}

package/build/lib/web/development/components/Skeleton/Skeleton.js

@@ -10,13 +10,11 @@ import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 
-var _excluded = ["contrast", "width", "maxWidth", "minWidth", "height", "maxHeight", "minHeight", "borderRadius", "flexWrap", "flexDirection", "flexGrow", "flexShrink", "flexBasis", "alignItems", "alignContent", "alignSelf", "justifyItems", "justifyContent", "justifySelf", "placeSelf", "placeItems", "order", "testID"];
+var _excluded = ["width", "maxWidth", "minWidth", "height", "maxHeight", "minHeight", "borderRadius", "flexWrap", "flexDirection", "flexGrow", "flexShrink", "flexBasis", "alignItems", "alignContent", "alignSelf", "justifyItems", "justifyContent", "justifySelf", "placeSelf", "placeItems", "order", "testID"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Skeleton = function Skeleton(_ref) {
-  var _ref$contrast = _ref.contrast,
-    contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast,
-    width = _ref.width,
+  var width = _ref.width,
     maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
     height = _ref.height,
@@ -60,8 +58,7 @@ var Skeleton = function Skeleton(_ref) {
     justifySelf: justifySelf,
     placeSelf: placeSelf,
     placeItems: placeItems,
-    order: order,
-    contrast: contrast
+    order: order
   }, getStyledProps(props)), makeAccessible({
     hidden: true
   })), metaAttribute({

package/build/lib/web/development/components/Skeleton/Skeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.js","sources":["../../../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { PulseAnimation } from './PulseAnimation';\nimport type { SkeletonProps } from './types';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst Skeleton = ({\n  contrast = 'low',\n  width,\n  maxWidth,\n  minWidth,\n  height,\n  maxHeight,\n  minHeight,\n  borderRadius,\n  flexWrap,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexBasis,\n  alignItems,\n  alignContent,\n  alignSelf,\n  justifyItems,\n  justifyContent,\n  justifySelf,\n  placeSelf,\n  placeItems,\n  order,\n  testID,\n  ...props\n}: SkeletonProps): React.ReactElement => {\n  return (\n    <PulseAnimation\n      width={width}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      height={height}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      borderRadius={borderRadius}\n      flexWrap={flexWrap}\n      flexDirection={flexDirection}\n      flexGrow={flexGrow}\n      flexShrink={flexShrink}\n      flexBasis={flexBasis}\n      alignItems={alignItems}\n      alignContent={alignContent}\n      alignSelf={alignSelf}\n      justifyItems={justifyItems}\n      justifyContent={justifyContent}\n      justifySelf={justifySelf}\n      placeSelf={placeSelf}\n      placeItems={placeItems}\n      order={order}\n      contrast={contrast}\n      {...getStyledProps(props)}\n      {...makeAccessible({ hidden: true })}\n      {...metaAttribute({ name: MetaConstants.Skeleton, testID })}\n    />\n  );\n};\n\nexport { Skeleton };\n"],"names":["Skeleton","_ref","_ref$contrast","contrast","width","maxWidth","minWidth","height","maxHeight","minHeight","borderRadius","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","testID","props","_objectWithoutProperties","_excluded","_jsx","PulseAnimation","_objectSpread","getStyledProps","makeAccessible","hidden","metaAttribute","name","MetaConstants"],"mappings":";;;;;;;;;;;;;;;AAOA,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAyB2B;AAAA,EAAA,IAAAC,aAAA,GAAAD,IAAA,CAxBvCE,QAAQ;AAARA,IAAAA,QAAQ,GAAAD,aAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,aAAA;IAChBE,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,QAAQ,GAAAJ,IAAA,CAARI,QAAQ;IACRC,QAAQ,GAAAL,IAAA,CAARK,QAAQ;IACRC,MAAM,GAAAN,IAAA,CAANM,MAAM;IACNC,SAAS,GAAAP,IAAA,CAATO,SAAS;IACTC,SAAS,GAAAR,IAAA,CAATQ,SAAS;IACTC,YAAY,GAAAT,IAAA,CAAZS,YAAY;IACZC,QAAQ,GAAAV,IAAA,CAARU,QAAQ;IACRC,aAAa,GAAAX,IAAA,CAAbW,aAAa;IACbC,QAAQ,GAAAZ,IAAA,CAARY,QAAQ;IACRC,UAAU,GAAAb,IAAA,CAAVa,UAAU;IACVC,SAAS,GAAAd,IAAA,CAATc,SAAS;IACTC,UAAU,GAAAf,IAAA,CAAVe,UAAU;IACVC,YAAY,GAAAhB,IAAA,CAAZgB,YAAY;IACZC,SAAS,GAAAjB,IAAA,CAATiB,SAAS;IACTC,YAAY,GAAAlB,IAAA,CAAZkB,YAAY;IACZC,cAAc,GAAAnB,IAAA,CAAdmB,cAAc;IACdC,WAAW,GAAApB,IAAA,CAAXoB,WAAW;IACXC,SAAS,GAAArB,IAAA,CAATqB,SAAS;IACTC,UAAU,GAAAtB,IAAA,CAAVsB,UAAU;IACVC,KAAK,GAAAvB,IAAA,CAALuB,KAAK;IACLC,MAAM,GAAAxB,IAAA,CAANwB,MAAM;AACHC,IAAAA,KAAK,GAAAC,wBAAA,CAAA1B,IAAA,EAAA2B,SAAA,CAAA,CAAA;EAER,oBACEC,GAAA,CAACC,cAAc,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACb3B,IAAAA,KAAK,EAAEA,KAAM;AACbE,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,SAAS,EAAEA,SAAU;AACrBD,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,KAAK,EAAEA,KAAM;AACbrB,IAAAA,QAAQ,EAAEA,QAAAA;AAAS,GAAA,EACf6B,cAAc,CAACN,KAAK,CAAC,CAAA,EACrBO,cAAc,CAAC;AAAEC,IAAAA,MAAM,EAAE,IAAA;GAAM,CAAC,CAChCC,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACrC,QAAQ;AAAEyB,IAAAA,MAAM,EAANA,MAAAA;GAAQ,CAAC,CAC5D,CAAC,CAAA;AAEN;;;;"}
+{"version":3,"file":"Skeleton.js","sources":["../../../../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-unnecessary-type-assertion */\nimport { PulseAnimation } from './PulseAnimation';\nimport type { SkeletonProps } from './types';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\n\nconst Skeleton = ({\n  width,\n  maxWidth,\n  minWidth,\n  height,\n  maxHeight,\n  minHeight,\n  borderRadius,\n  flexWrap,\n  flexDirection,\n  flexGrow,\n  flexShrink,\n  flexBasis,\n  alignItems,\n  alignContent,\n  alignSelf,\n  justifyItems,\n  justifyContent,\n  justifySelf,\n  placeSelf,\n  placeItems,\n  order,\n  testID,\n  ...props\n}: SkeletonProps): React.ReactElement => {\n  return (\n    <PulseAnimation\n      width={width}\n      minWidth={minWidth}\n      maxWidth={maxWidth}\n      height={height}\n      minHeight={minHeight}\n      maxHeight={maxHeight}\n      borderRadius={borderRadius}\n      flexWrap={flexWrap}\n      flexDirection={flexDirection}\n      flexGrow={flexGrow}\n      flexShrink={flexShrink}\n      flexBasis={flexBasis}\n      alignItems={alignItems}\n      alignContent={alignContent}\n      alignSelf={alignSelf}\n      justifyItems={justifyItems}\n      justifyContent={justifyContent}\n      justifySelf={justifySelf}\n      placeSelf={placeSelf}\n      placeItems={placeItems}\n      order={order}\n      {...getStyledProps(props)}\n      {...makeAccessible({ hidden: true })}\n      {...metaAttribute({ name: MetaConstants.Skeleton, testID })}\n    />\n  );\n};\n\nexport { Skeleton };\n"],"names":["Skeleton","_ref","width","maxWidth","minWidth","height","maxHeight","minHeight","borderRadius","flexWrap","flexDirection","flexGrow","flexShrink","flexBasis","alignItems","alignContent","alignSelf","justifyItems","justifyContent","justifySelf","placeSelf","placeItems","order","testID","props","_objectWithoutProperties","_excluded","_jsx","PulseAnimation","_objectSpread","getStyledProps","makeAccessible","hidden","metaAttribute","name","MetaConstants"],"mappings":";;;;;;;;;;;;;;;AAOA,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAwB2B;AAAA,EAAA,IAvBvCC,KAAK,GAAAD,IAAA,CAALC,KAAK;IACLC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,MAAM,GAAAJ,IAAA,CAANI,MAAM;IACNC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACTC,SAAS,GAAAN,IAAA,CAATM,SAAS;IACTC,YAAY,GAAAP,IAAA,CAAZO,YAAY;IACZC,QAAQ,GAAAR,IAAA,CAARQ,QAAQ;IACRC,aAAa,GAAAT,IAAA,CAAbS,aAAa;IACbC,QAAQ,GAAAV,IAAA,CAARU,QAAQ;IACRC,UAAU,GAAAX,IAAA,CAAVW,UAAU;IACVC,SAAS,GAAAZ,IAAA,CAATY,SAAS;IACTC,UAAU,GAAAb,IAAA,CAAVa,UAAU;IACVC,YAAY,GAAAd,IAAA,CAAZc,YAAY;IACZC,SAAS,GAAAf,IAAA,CAATe,SAAS;IACTC,YAAY,GAAAhB,IAAA,CAAZgB,YAAY;IACZC,cAAc,GAAAjB,IAAA,CAAdiB,cAAc;IACdC,WAAW,GAAAlB,IAAA,CAAXkB,WAAW;IACXC,SAAS,GAAAnB,IAAA,CAATmB,SAAS;IACTC,UAAU,GAAApB,IAAA,CAAVoB,UAAU;IACVC,KAAK,GAAArB,IAAA,CAALqB,KAAK;IACLC,MAAM,GAAAtB,IAAA,CAANsB,MAAM;AACHC,IAAAA,KAAK,GAAAC,wBAAA,CAAAxB,IAAA,EAAAyB,SAAA,CAAA,CAAA;EAER,oBACEC,GAAA,CAACC,cAAc,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACb3B,IAAAA,KAAK,EAAEA,KAAM;AACbE,IAAAA,QAAQ,EAAEA,QAAS;AACnBD,IAAAA,QAAQ,EAAEA,QAAS;AACnBE,IAAAA,MAAM,EAAEA,MAAO;AACfE,IAAAA,SAAS,EAAEA,SAAU;AACrBD,IAAAA,SAAS,EAAEA,SAAU;AACrBE,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,YAAY,EAAEA,YAAa;AAC3BC,IAAAA,cAAc,EAAEA,cAAe;AAC/BC,IAAAA,WAAW,EAAEA,WAAY;AACzBC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,KAAK,EAAEA,KAAAA;AAAM,GAAA,EACTQ,cAAc,CAACN,KAAK,CAAC,CAAA,EACrBO,cAAc,CAAC;AAAEC,IAAAA,MAAM,EAAE,IAAA;GAAM,CAAC,CAChCC,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACnC,QAAQ;AAAEuB,IAAAA,MAAM,EAANA,MAAAA;GAAQ,CAAC,CAC5D,CAAC,CAAA;AAEN;;;;"}

package/build/lib/web/development/components/Spinner/BaseSpinner/BaseSpinner.js

@@ -22,30 +22,27 @@ import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
 import { Text } from '../../Typography/Text/Text.js';
 
-var _excluded = ["label", "labelPosition", "accessibilityLabel", "contrast", "color", "size", "testID"];
+var _excluded = ["label", "labelPosition", "accessibilityLabel", "color", "size", "testID"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var getColor = function getColor(_ref) {
-  var contrast = _ref.contrast,
-    color = _ref.color,
+  var color = _ref.color,
     theme = _ref.theme;
-  if (contrast === 'high' || color && color === 'white') {
-    return getIn(theme.colors, 'static.white');
+  if (color && color === 'white') {
+    return getIn(theme.colors, 'surface.background.gray.intense');
   }
-  if (color && color !== 'default') {
-    return getIn(theme.colors, "feedback.".concat(color, ".action.icon.primary.disabled.lowContrast"));
+  if (color && color !== 'primary') {
+    return getIn(theme.colors, "feedback.background.".concat(color, ".intense"));
   }
-  return getIn(theme.colors, 'brand.gray.700.lowContrast');
+  return getIn(theme.colors, 'surface.background.primary.intense');
 };
 var BaseSpinner = function BaseSpinner(_ref2) {
   var label = _ref2.label,
     _ref2$labelPosition = _ref2.labelPosition,
     labelPosition = _ref2$labelPosition === void 0 ? 'right' : _ref2$labelPosition,
     accessibilityLabel = _ref2.accessibilityLabel,
-    _ref2$contrast = _ref2.contrast,
-    contrast = _ref2$contrast === void 0 ? 'low' : _ref2$contrast,
     _ref2$color = _ref2.color,
-    color = _ref2$color === void 0 ? 'default' : _ref2$color,
+    color = _ref2$color === void 0 ? 'neutral' : _ref2$color,
     _ref2$size = _ref2.size,
     size = _ref2$size === void 0 ? 'medium' : _ref2$size,
     testID = _ref2.testID,
@@ -68,7 +65,6 @@ var BaseSpinner = function BaseSpinner(_ref2) {
         children: /*#__PURE__*/jsx(SpinnerIcon, {
           dimensions: makeSize(dimensions[size]),
           color: getColor({
-            contrast: contrast,
             color: color,
             theme: theme
           })
@@ -79,9 +75,8 @@ var BaseSpinner = function BaseSpinner(_ref2) {
         children: /*#__PURE__*/jsx(Text, {
           variant: "body",
           weight: "regular",
-          type: "subdued",
           size: "small",
-          contrast: contrast,
+          color: "surface.text.gray.muted",
           children: label
         })
       }) : null]

package/build/lib/web/development/components/Spinner/BaseSpinner/BaseSpinner.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseSpinner.js","sources":["../../../../../../../src/components/Spinner/BaseSpinner/BaseSpinner.tsx"],"sourcesContent":["import React from 'react';\nimport { dimensions } from './spinnerTokens';\nimport SpinnerIcon from './SpinnerIcon';\nimport { SpinningBox } from './SpinningBox';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { useTheme } from '~components/BladeProvider';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { ColorContrastTypes, Feedback } from '~tokens/theme/theme';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype BaseSpinnerProps = {\n  /**\n   * Sets the color of the spinner.\n   *\n   * @default 'default'\n   */\n  color?: 'default' | 'white' | Feedback;\n  /**\n   * Sets the label of the spinner.\n   *\n   * @default 'right'\n   */\n  label?: string;\n  /**\n   * Sets the label of the spinner.\n   *\n   */\n  labelPosition?: 'right' | 'bottom';\n  /**\n   * This is deprecated in favor of the `color` prop.\n   *\n   * @deprecated Use `color=\"white\"` for high contrast and `color=\"default\"` for low contrast\n   * @default 'low'\n   */\n  contrast?: ColorContrastTypes;\n  /**\n   * Sets the size of the spinner.\n   *\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large' | 'xlarge';\n  /**\n   * Sets the aria-label for web & accessibilityLabel react-native.\n   *\n   */\n  accessibilityLabel: string;\n} & TestID &\n  StyledPropsBlade;\n\nconst getColor = ({\n  contrast,\n  color,\n  theme,\n}: {\n  contrast: NonNullable<BaseSpinnerProps['contrast']>;\n  color: BaseSpinnerProps['color'];\n  theme: Theme;\n}): string => {\n  if (contrast === 'high' || (color && color === 'white')) {\n    return getIn(theme.colors, 'static.white');\n  }\n  if (color && color !== 'default') {\n    return getIn(theme.colors, `feedback.${color}.action.icon.primary.disabled.lowContrast`);\n  }\n  return getIn(theme.colors, 'brand.gray.700.lowContrast');\n};\n\nconst BaseSpinner = ({\n  label,\n  labelPosition = 'right',\n  accessibilityLabel,\n  contrast = 'low',\n  color = 'default',\n  size = 'medium',\n  testID,\n  ...styledProps\n}: BaseSpinnerProps): React.ReactElement => {\n  const { theme } = useTheme();\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.Spinner, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        flexDirection={labelPosition === 'right' ? 'row' : 'column'}\n        {...makeAccessible({\n          label: accessibilityLabel,\n          role: 'progressbar',\n        })}\n      >\n        <SpinningBox>\n          <SpinnerIcon\n            dimensions={makeSize(dimensions[size])}\n            color={getColor({ contrast, color, theme })}\n          />\n        </SpinningBox>\n        {label && label.trim().length > 0 ? (\n          <BaseBox\n            marginLeft={labelPosition === 'right' ? 'spacing.3' : 'spacing.0'}\n            marginTop={labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0'}\n          >\n            <Text variant=\"body\" weight=\"regular\" type=\"subdued\" size=\"small\" contrast={contrast}>\n              {label}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { BaseSpinnerProps };\nexport { BaseSpinner };\n"],"names":["getColor","_ref","contrast","color","theme","getIn","colors","concat","BaseSpinner","_ref2","label","_ref2$labelPosition","labelPosition","accessibilityLabel","_ref2$contrast","_ref2$color","_ref2$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","Spinner","getStyledProps","children","_jsxs","display","alignItems","flexDirection","makeAccessible","role","SpinningBox","SpinnerIcon","dimensions","makeSize","trim","length","marginLeft","marginTop","Text","variant","weight","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAwDA,IAAMA,QAAQ,GAAG,SAAXA,QAAQA,CAAAC,IAAA,EAQA;AAAA,EAAA,IAPZC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,KAAK,GAAAH,IAAA,CAALG,KAAK,CAAA;EAML,IAAIF,QAAQ,KAAK,MAAM,IAAKC,KAAK,IAAIA,KAAK,KAAK,OAAQ,EAAE;AACvD,IAAA,OAAOE,KAAK,CAACD,KAAK,CAACE,MAAM,EAAE,cAAc,CAAC,CAAA;AAC5C,GAAA;AACA,EAAA,IAAIH,KAAK,IAAIA,KAAK,KAAK,SAAS,EAAE;IAChC,OAAOE,KAAK,CAACD,KAAK,CAACE,MAAM,cAAAC,MAAA,CAAcJ,KAAK,EAAA,2CAAA,CAA2C,CAAC,CAAA;AAC1F,GAAA;AACA,EAAA,OAAOE,KAAK,CAACD,KAAK,CAACE,MAAM,EAAE,4BAA4B,CAAC,CAAA;AAC1D,CAAC,CAAA;AAED,IAAME,WAAW,GAAG,SAAdA,WAAWA,CAAAC,KAAA,EAS2B;AAAA,EAAA,IAR1CC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAAC,mBAAA,GAAAF,KAAA,CACLG,aAAa;AAAbA,IAAAA,aAAa,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,mBAAA;IACvBE,kBAAkB,GAAAJ,KAAA,CAAlBI,kBAAkB;IAAAC,cAAA,GAAAL,KAAA,CAClBP,QAAQ;AAARA,IAAAA,QAAQ,GAAAY,cAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,cAAA;IAAAC,WAAA,GAAAN,KAAA,CAChBN,KAAK;AAALA,IAAAA,KAAK,GAAAY,WAAA,KAAG,KAAA,CAAA,GAAA,SAAS,GAAAA,WAAA;IAAAC,UAAA,GAAAP,KAAA,CACjBQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,UAAA;IACfE,MAAM,GAAAT,KAAA,CAANS,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAAX,KAAA,EAAAY,SAAA,CAAA,CAAA;AAEd,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBnB,KAAK,GAAAkB,SAAA,CAALlB,KAAK,CAAA;EACb,oBACEoB,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CACFC,EAAAA,EAAAA,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACC,OAAO;AAAEZ,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EACtDa,cAAc,CAACZ,WAAW,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAa,IAAAA,QAAA,eAE/BC,IAAA,CAACR,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACNQ,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,UAAU,EAAC,QAAQ;AACnBC,MAAAA,aAAa,EAAExB,aAAa,KAAK,OAAO,GAAG,KAAK,GAAG,QAAA;AAAS,KAAA,EACxDyB,cAAc,CAAC;AACjB3B,MAAAA,KAAK,EAAEG,kBAAkB;AACzByB,MAAAA,IAAI,EAAE,aAAA;AACR,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;MAAAN,QAAA,EAAA,cAEFR,GAAA,CAACe,WAAW,EAAA;QAAAP,QAAA,eACVR,GAAA,CAACgB,WAAW,EAAA;AACVC,UAAAA,UAAU,EAAEC,QAAQ,CAACD,UAAU,CAACxB,IAAI,CAAC,CAAE;UACvCd,KAAK,EAAEH,QAAQ,CAAC;AAAEE,YAAAA,QAAQ,EAARA,QAAQ;AAAEC,YAAAA,KAAK,EAALA,KAAK;AAAEC,YAAAA,KAAK,EAALA,KAAAA;WAAO,CAAA;SAC3C,CAAA;AAAC,OACS,CAAC,EACbM,KAAK,IAAIA,KAAK,CAACiC,IAAI,EAAE,CAACC,MAAM,GAAG,CAAC,gBAC/BpB,GAAA,CAACC,OAAO,EAAA;AACNoB,QAAAA,UAAU,EAAEjC,aAAa,KAAK,OAAO,GAAG,WAAW,GAAG,WAAY;AAClEkC,QAAAA,SAAS,EAAElC,aAAa,KAAK,QAAQ,GAAG,WAAW,GAAG,WAAY;QAAAoB,QAAA,eAElER,GAAA,CAACuB,IAAI,EAAA;AAACC,UAAAA,OAAO,EAAC,MAAM;AAACC,UAAAA,MAAM,EAAC,SAAS;AAACC,UAAAA,IAAI,EAAC,SAAS;AAACjC,UAAAA,IAAI,EAAC,OAAO;AAACf,UAAAA,QAAQ,EAAEA,QAAS;AAAA8B,UAAAA,QAAA,EAClFtB,KAAAA;SACG,CAAA;OACC,CAAC,GACR,IAAI,CAAA;KACD,CAAA,CAAA;AAAC,GAAA,CACH,CAAC,CAAA;AAEd;;;;"}
+{"version":3,"file":"BaseSpinner.js","sources":["../../../../../../../src/components/Spinner/BaseSpinner/BaseSpinner.tsx"],"sourcesContent":["import React from 'react';\nimport { dimensions } from './spinnerTokens';\nimport SpinnerIcon from './SpinnerIcon';\nimport { SpinningBox } from './SpinningBox';\nimport getIn from '~utils/lodashButBetter/get';\nimport type { Theme } from '~components/BladeProvider';\nimport { useTheme } from '~components/BladeProvider';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { FeedbackColors } from '~tokens/theme/theme';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport type { TestID } from '~utils/types';\nimport { makeSize } from '~utils/makeSize';\nimport { makeAccessible } from '~utils/makeAccessible';\n\ntype BaseSpinnerProps = {\n  /**\n   * Sets the color of the spinner.\n   *\n   * @default 'default'\n   */\n  color?: 'primary' | 'white' | FeedbackColors;\n  /**\n   * Sets the label of the spinner.\n   *\n   * @default 'right'\n   */\n  label?: string;\n  /**\n   * Sets the label of the spinner.\n   *\n   */\n  labelPosition?: 'right' | 'bottom';\n  /**\n   * Sets the size of the spinner.\n   *\n   * @default 'medium'\n   */\n  size?: 'medium' | 'large' | 'xlarge';\n  /**\n   * Sets the aria-label for web & accessibilityLabel react-native.\n   *\n   */\n  accessibilityLabel: string;\n} & TestID &\n  StyledPropsBlade;\n\nconst getColor = ({ color, theme }: { color: BaseSpinnerProps['color']; theme: Theme }): string => {\n  if (color && color === 'white') {\n    return getIn(theme.colors, 'surface.background.gray.intense');\n  }\n  if (color && color !== 'primary') {\n    return getIn(theme.colors, `feedback.background.${color}.intense`);\n  }\n  return getIn(theme.colors, 'surface.background.primary.intense');\n};\n\nconst BaseSpinner = ({\n  label,\n  labelPosition = 'right',\n  accessibilityLabel,\n  color = 'neutral',\n  size = 'medium',\n  testID,\n  ...styledProps\n}: BaseSpinnerProps): React.ReactElement => {\n  const { theme } = useTheme();\n  return (\n    <BaseBox\n      {...metaAttribute({ name: MetaConstants.Spinner, testID })}\n      {...getStyledProps(styledProps)}\n    >\n      <BaseBox\n        display=\"flex\"\n        alignItems=\"center\"\n        flexDirection={labelPosition === 'right' ? 'row' : 'column'}\n        {...makeAccessible({\n          label: accessibilityLabel,\n          role: 'progressbar',\n        })}\n      >\n        <SpinningBox>\n          <SpinnerIcon dimensions={makeSize(dimensions[size])} color={getColor({ color, theme })} />\n        </SpinningBox>\n        {label && label.trim().length > 0 ? (\n          <BaseBox\n            marginLeft={labelPosition === 'right' ? 'spacing.3' : 'spacing.0'}\n            marginTop={labelPosition === 'bottom' ? 'spacing.3' : 'spacing.0'}\n          >\n            <Text variant=\"body\" weight=\"regular\" size=\"small\" color=\"surface.text.gray.muted\">\n              {label}\n            </Text>\n          </BaseBox>\n        ) : null}\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { BaseSpinnerProps };\nexport { BaseSpinner };\n"],"names":["getColor","_ref","color","theme","getIn","colors","concat","BaseSpinner","_ref2","label","_ref2$labelPosition","labelPosition","accessibilityLabel","_ref2$color","_ref2$size","size","testID","styledProps","_objectWithoutProperties","_excluded","_useTheme","useTheme","_jsx","BaseBox","_objectSpread","metaAttribute","name","MetaConstants","Spinner","getStyledProps","children","_jsxs","display","alignItems","flexDirection","makeAccessible","role","SpinningBox","SpinnerIcon","dimensions","makeSize","trim","length","marginLeft","marginTop","Text","variant","weight"],"mappings":"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"}

package/build/lib/web/development/components/Spinner/Spinner/Spinner.js

@@ -4,7 +4,7 @@ import '../BaseSpinner/index.js';
 import { jsx } from 'react/jsx-runtime';
 import { BaseSpinner } from '../BaseSpinner/BaseSpinner.js';
 
-var _excluded = ["label", "labelPosition", "accessibilityLabel", "color", "contrast", "size", "testID"];
+var _excluded = ["label", "labelPosition", "accessibilityLabel", "color", "size", "testID"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Spinner = function Spinner(_ref) {
@@ -13,9 +13,7 @@ var Spinner = function Spinner(_ref) {
     labelPosition = _ref.labelPosition,
     accessibilityLabel = _ref.accessibilityLabel,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color,
-    _ref$contrast = _ref.contrast,
-    contrast = _ref$contrast === void 0 ? 'low' : _ref$contrast,
+    color = _ref$color === void 0 ? 'neutral' : _ref$color,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'medium' : _ref$size,
     testID = _ref.testID,
@@ -24,7 +22,6 @@ var Spinner = function Spinner(_ref) {
     label: label,
     labelPosition: labelPosition,
     accessibilityLabel: (_ref2 = accessibilityLabel !== null && accessibilityLabel !== void 0 ? accessibilityLabel : label) !== null && _ref2 !== void 0 ? _ref2 : 'Loading',
-    contrast: contrast,
     color: color,
     size: size,
     testID: testID