@razorpay/blade 11.11.1 → 11.13.0

package/build/lib/web/development/components/Input/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sources":["../../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef } from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leadingIcon` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n} & StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    ...styledProps\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRef>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton) {\n      return (\n        <IconButton\n          size=\"medium\"\n          icon={CloseIcon}\n          onClick={() => {\n            if (isEmpty(value) && textInputRef.current) {\n              // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n              if (isReactNative(textInputRef.current)) {\n                textInputRef.current.clear();\n                textInputRef.current.focus();\n              } else if (textInputRef.current instanceof HTMLInputElement) {\n                textInputRef.current.value = '';\n                textInputRef.current.focus();\n              }\n            }\n            // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n            onClearButtonClick?.();\n            textInputRef?.current?.focus();\n            setShouldShowClearButton(false);\n          }}\n          isDisabled={isDisabled}\n          accessibilityLabel=\"Clear Input Content\"\n        />\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={onFocus}\n      onBlur={onBlur}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={leadingIcon ?? icon}\n      prefix={prefix}\n      trailingInteractionElement={renderInteractionElement()}\n      trailingIcon={trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={maxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","_ref$type","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","_ref$size","size","leadingIcon","trailingIcon","styledProps","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","color","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseInput","_objectSpread","id","componentName","MetaConstants","TextInput","hideLabelText","_ref2","length","trailingInteractionElement","trailingFooterSlot","_value$length","BaseBox","marginTop","hintMarginTop","marginRight","children","CharacterCounter","currentCount","maxCount","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HA;AACA;AACA,IAAMA,aAAa,GAAG,SAAhBA,aAAaA,CAAIC,aAAkB,EAA4C;AACnF,EAAA,OAAOC,eAAe,EAAE,KAAK,cAAc,CAAA;AAC7C,CAAC,CAAA;AAED,IAAMC,UAA2E,GAAG,SAA9EA,UAA2EA,CAAAC,IAAA,EAuC/EC,GAAG,EACc;AAAA,EAAA,IAtCfC,KAAK,GAAAF,IAAA,CAALE,KAAK;IACLC,kBAAkB,GAAAH,IAAA,CAAlBG,kBAAkB;IAAAC,kBAAA,GAAAJ,IAAA,CAClBK,aAAa;AAAbA,IAAAA,aAAa,GAAAD,kBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,kBAAA;IACrBE,WAAW,GAAAN,IAAA,CAAXM,WAAW;IAAAC,SAAA,GAAAP,IAAA,CACXQ,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,MAAM,GAAAA,SAAA;IACbE,YAAY,GAAAT,IAAA,CAAZS,YAAY;IACZC,IAAI,GAAAV,IAAA,CAAJU,IAAI;IACJC,KAAK,GAAAX,IAAA,CAALW,KAAK;IACLC,aAAa,GAAAZ,IAAA,CAAbY,aAAa;IACbC,SAAQ,GAAAb,IAAA,CAARa,QAAQ;IACRC,OAAO,GAAAd,IAAA,CAAPc,OAAO;IACPC,OAAO,GAAAf,IAAA,CAAPe,OAAO;IACPC,MAAM,GAAAhB,IAAA,CAANgB,MAAM;IACNC,QAAQ,GAAAjB,IAAA,CAARiB,QAAQ;IACRC,UAAU,GAAAlB,IAAA,CAAVkB,UAAU;IACVC,kBAAkB,GAAAnB,IAAA,CAAlBmB,kBAAkB;IAClBC,eAAe,GAAApB,IAAA,CAAfoB,eAAe;IACfC,SAAS,GAAArB,IAAA,CAATqB,SAAS;IACTC,QAAQ,GAAAtB,IAAA,CAARsB,QAAQ;IACRC,WAAW,GAAAvB,IAAA,CAAXuB,WAAW;IACXC,UAAU,GAAAxB,IAAA,CAAVwB,UAAU;IACVC,IAAI,GAAAzB,IAAA,CAAJyB,IAAI;IACJC,MAAM,GAAA1B,IAAA,CAAN0B,MAAM;IACNC,eAAe,GAAA3B,IAAA,CAAf2B,eAAe;IACfC,kBAAkB,GAAA5B,IAAA,CAAlB4B,kBAAkB;IAClBC,SAAS,GAAA7B,IAAA,CAAT6B,SAAS;IACTC,MAAM,GAAA9B,IAAA,CAAN8B,MAAM;IACNC,SAAS,GAAA/B,IAAA,CAAT+B,SAAS;IACTC,qBAAqB,GAAAhC,IAAA,CAArBgC,qBAAqB;IACrBC,0BAA0B,GAAAjC,IAAA,CAA1BiC,0BAA0B;IAC1BC,cAAc,GAAAlC,IAAA,CAAdkC,cAAc;IACdC,MAAM,GAAAnC,IAAA,CAANmC,MAAM;IAAAC,SAAA,GAAApC,IAAA,CACNqC,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,QAAQ,GAAAA,SAAA;IACfE,WAAW,GAAAtC,IAAA,CAAXsC,WAAW;IACXC,YAAY,GAAAvC,IAAA,CAAZuC,YAAY;AACTC,IAAAA,WAAW,GAAAC,wBAAA,CAAAzC,IAAA,EAAA0C,SAAA,CAAA,CAAA;AAIhB,EAAA,IAAMC,YAAY,GAAGC,cAAK,CAACC,MAAM,CAAkB,IAAI,CAAC,CAAA;AACxD,EAAA,IAAMC,SAAS,GAAGC,YAAY,CAAC9C,GAAG,EAAE0C,YAAY,CAAC,CAAA;AACjD,EAAA,IAAAK,SAAA,GAA0DC,QAAQ,CAAC,KAAK,CAAC;IAAAC,UAAA,GAAAC,cAAA,CAAAH,SAAA,EAAA,CAAA,CAAA;AAAlEI,IAAAA,qBAAqB,GAAAF,UAAA,CAAA,CAAA,CAAA;AAAEG,IAAAA,wBAAwB,GAAAH,UAAA,CAAA,CAAA,CAAA,CAAA;EAEtDN,cAAK,CAACU,SAAS,CAAC,YAAM;AACpBD,IAAAA,wBAAwB,CAACE,OAAO,CAAC5B,eAAe,KAAKlB,YAAY,KAAA,IAAA,IAAZA,YAAY,KAAA,KAAA,CAAA,GAAZA,YAAY,GAAIE,KAAK,CAAC,CAAC,CAAC,CAAA;GAC9E,EAAE,CAACgB,eAAe,EAAElB,YAAY,EAAEE,KAAK,CAAC,CAAC,CAAA;AAE1C,EAAA,IAAM6C,wBAAwB,GAAG,SAA3BA,wBAAwBA,GAAoB;AAChD,IAAA,IAAI3B,SAAS,EAAE;MACb,oBAAO4B,GAAA,CAACC,OAAO,EAAA;AAACvD,QAAAA,kBAAkB,EAAC,iBAAiB;AAACwD,QAAAA,KAAK,EAAC,SAAA;AAAS,OAAE,CAAC,CAAA;AACzE,KAAA;AAEA,IAAA,IAAIP,qBAAqB,EAAE;MACzB,oBACEK,GAAA,CAACG,UAAU,EAAA;AACTvB,QAAAA,IAAI,EAAC,QAAQ;AACbZ,QAAAA,IAAI,EAAEoC,SAAU;QAChB/C,OAAO,EAAE,SAAAA,OAAAA,GAAM;AAAA,UAAA,IAAAgD,qBAAA,CAAA;UACb,IAAIC,OAAO,CAACpD,KAAK,CAAC,IAAIgC,YAAY,CAACqB,OAAO,EAAE;AAC1C;AACA,YAAA,IAAIpE,aAAa,CAAC+C,YAAY,CAACqB,OAAO,CAAC,EAAE;AACvCrB,cAAAA,YAAY,CAACqB,OAAO,CAACC,KAAK,EAAE,CAAA;AAC5BtB,cAAAA,YAAY,CAACqB,OAAO,CAACE,KAAK,EAAE,CAAA;AAC9B,aAAC,MAAM,IAAIvB,YAAY,CAACqB,OAAO,YAAYG,gBAAgB,EAAE;AAC3DxB,cAAAA,YAAY,CAACqB,OAAO,CAACrD,KAAK,GAAG,EAAE,CAAA;AAC/BgC,cAAAA,YAAY,CAACqB,OAAO,CAACE,KAAK,EAAE,CAAA;AAC9B,aAAA;AACF,WAAA;AACA;AACAtC,UAAAA,kBAAkB,KAAlBA,IAAAA,IAAAA,kBAAkB,KAAlBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,kBAAkB,EAAI,CAAA;AACtBe,UAAAA,YAAY,KAAZA,IAAAA,IAAAA,YAAY,KAAAmB,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,CAAAA,qBAAA,GAAZnB,YAAY,CAAEqB,OAAO,MAAA,IAAA,IAAAF,qBAAA,KAArBA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,qBAAA,CAAuBI,KAAK,EAAE,CAAA;UAC9Bb,wBAAwB,CAAC,KAAK,CAAC,CAAA;SAC/B;AACFnC,QAAAA,UAAU,EAAEA,UAAW;AACvBf,QAAAA,kBAAkB,EAAC,qBAAA;AAAqB,OACzC,CAAC,CAAA;AAEN,KAAA;AAEA,IAAA,OAAO,IAAI,CAAA;GACZ,CAAA;AAED,EAAA,oBACEsD,GAAA,CAACW,SAAS,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACRC,IAAAA,EAAE,EAAC,WAAW;IACdC,aAAa,EAAEC,aAAa,CAACC,SAAU;AACvCxE,IAAAA,GAAG,EAAE6C,SAAU;AACf5C,IAAAA,KAAK,EAAEA,KAAgB;AACvBC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCuE,IAAAA,aAAa,EAAE,CAACnB,OAAO,CAACrD,KAAK,CAAE;AAC/BG,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,WAAW,EAAEA,WAAY;AACzBG,IAAAA,YAAY,EAAEA,YAAa;AAC3BE,IAAAA,KAAK,EAAEA,KAAM;AACbD,IAAAA,IAAI,EAAEA,IAAK;AACXE,IAAAA,aAAa,EAAEA,aAAc;AAC7BC,IAAAA,QAAQ,EAAE,SAAAA,QAAA8D,CAAAA,KAAA,EAAqB;AAAA,MAAA,IAAlBjE,IAAI,GAAAiE,KAAA,CAAJjE,IAAI;QAAEC,KAAK,GAAAgE,KAAA,CAALhE,KAAK,CAAA;MACtB,IAAIgB,eAAe,IAAIhB,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,IAAAA,KAAK,CAAEiE,MAAM,EAAE;AACpC;QACAvB,wBAAwB,CAAC,IAAI,CAAC,CAAA;AAChC,OAAA;MAEA,IAAID,qBAAqB,IAAI,EAACzC,KAAK,KAAA,IAAA,IAALA,KAAK,KAALA,KAAAA,CAAAA,IAAAA,KAAK,CAAEiE,MAAM,CAAE,EAAA;AAC3C;QACAvB,wBAAwB,CAAC,KAAK,CAAC,CAAA;AACjC,OAAA;AAEAxC,MAAAA,SAAQ,KAARA,IAAAA,IAAAA,SAAQ,KAARA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,SAAQ,CAAG;AAAEH,QAAAA,IAAI,EAAJA,IAAI;AAAEC,QAAAA,KAAK,EAALA,KAAAA;AAAM,OAAC,CAAC,CAAA;KAC3B;AACFG,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,OAAO,EAAEA,OAAQ;AACjBC,IAAAA,MAAM,EAAEA,MAAO;AACfC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,UAAU,EAAEA,UAAW;AACvBC,IAAAA,kBAAkB,EAAEA,kBAAmB;AACvCK,IAAAA,UAAU,EAAEA,UAAW;AACvBc,IAAAA,WAAW,EAAEA,WAAW,KAAA,IAAA,IAAXA,WAAW,KAAXA,KAAAA,CAAAA,GAAAA,WAAW,GAAIb,IAAK;AACjCC,IAAAA,MAAM,EAAEA,MAAO;IACfmD,0BAA0B,EAAErB,wBAAwB,EAAG;AACvDjB,IAAAA,YAAY,EAAEA,YAAa;AAC3BT,IAAAA,MAAM,EAAEA,MAAO;AACfV,IAAAA,eAAe,EAAEA,eAAgB;AACjCC,IAAAA,SAAS,EAAEA,SAAU;AACrBC,IAAAA,QAAQ,EAAEA,QAAS;AACnBC,IAAAA,WAAW,EAAEA,WAAY;AACzBuD,IAAAA,kBAAkB,EAAE,SAAAA,kBAACnE,CAAAA,KAAK,EAAK;AAAA,MAAA,IAAAoE,aAAA,CAAA;AAC7B,MAAA,OAAOnE,aAAa,gBAClB6C,GAAA,CAACuB,OAAO,EAAA;AAACC,QAAAA,SAAS,EAAEC,aAAa,CAAC7C,IAAI,CAAE;AAAC8C,QAAAA,WAAW,EAAC,WAAW;QAAAC,QAAA,eAC9D3B,GAAA,CAAC4B,gBAAgB,EAAA;AACfC,UAAAA,YAAY,EAAAP,CAAAA,aAAA,GAAEpE,KAAK,aAALA,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAALA,KAAK,CAAEiE,MAAM,MAAAG,IAAAA,IAAAA,aAAA,KAAAA,KAAAA,CAAAA,GAAAA,aAAA,GAAI,CAAE;AACjCQ,UAAAA,QAAQ,EAAE3E,aAAc;AACxByB,UAAAA,IAAI,EAAEA,IAAAA;SACP,CAAA;OACM,CAAC,GACR,IAAI,CAAA;AACV,KAAA;AACA;AAAA;AACAN,IAAAA,SAAS,EAAEA,SAAU;AACrBI,IAAAA,MAAM,EAAEA,MAAAA;AAAO,GAAA,EACXqD,+BAA+B,CAAC;AAClChF,IAAAA,IAAI,EAAJA,IAAI;AACJwB,IAAAA,qBAAqB,EAArBA,qBAAqB;AACrBC,IAAAA,0BAA0B,EAA1BA,0BAA0B;AAC1BC,IAAAA,cAAc,EAAdA,cAAAA;AACF,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AACFG,IAAAA,IAAI,EAAEA,IAAAA;GACFG,EAAAA,WAAW,CAChB,CAAC,CAAA;AAEN,CAAC,CAAA;AAEKiC,IAAAA,SAAS,gBAAGgB,wBAAwB,eAAC7C,cAAK,CAAC8C,UAAU,CAAC3F,UAAU,CAAC,EAAE;AACvE4F,EAAAA,WAAW,EAAE,WAAA;AACf,CAAC;;;;"}
+{"version":3,"file":"TextInput.js","sources":["../../../../../../../src/components/Input/TextInput/TextInput.tsx"],"sourcesContent":["import React, { useState } from 'react';\nimport type { ReactElement, ReactNode } from 'react';\nimport type { TextInput as TextInputReactNative } from 'react-native';\nimport type { BaseInputProps } from '../BaseInput';\nimport { BaseInput } from '../BaseInput';\nimport { getKeyboardAndAutocompleteProps } from '../BaseInput/utils';\nimport type { TaggedInputProps } from '../BaseInput/useTaggedInput';\nimport { useTaggedInput } from '../BaseInput/useTaggedInput';\nimport isEmpty from '~utils/lodashButBetter/isEmpty';\nimport type { IconComponent } from '~components/Icons';\nimport { CloseIcon } from '~components/Icons';\nimport { IconButton } from '~components/Button/IconButton';\nimport type { StyledPropsBlade } from '~components/Box/styledProps';\nimport { MetaConstants } from '~utils/metaAttribute';\nimport { CharacterCounter } from '~components/Form/CharacterCounter';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Spinner } from '~components/Spinner';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getPlatformType } from '~utils';\nimport { useMergeRefs } from '~utils/useMergeRefs';\nimport type { BladeElementRef, BladeElementRefWithValue } from '~utils/types';\nimport { hintMarginTop } from '~components/Form/formTokens';\n\n// Users should use PasswordInput for input type password\ntype Type = Exclude<BaseInputProps['type'], 'password'>;\n\ntype TextInputCommonProps = Pick<\n  BaseInputProps,\n  | 'label'\n  | 'accessibilityLabel'\n  | 'labelPosition'\n  | 'necessityIndicator'\n  | 'validationState'\n  | 'helpText'\n  | 'errorText'\n  | 'successText'\n  | 'placeholder'\n  | 'defaultValue'\n  | 'name'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'value'\n  | 'isDisabled'\n  | 'isRequired'\n  | 'prefix'\n  | 'suffix'\n  | 'maxCharacters'\n  | 'autoFocus'\n  | 'keyboardReturnKeyType'\n  | 'autoCompleteSuggestionType'\n  | 'onSubmit'\n  | 'autoCapitalize'\n  | 'testID'\n  | 'onClick'\n  | 'size'\n  | 'leadingIcon'\n  | 'trailingButton'\n  | 'trailingIcon'\n> & {\n  /**\n   * Decides whether to render a clear icon button\n   */\n  showClearButton?: boolean;\n\n  /**\n   * Event handler to handle the onClick event for clear button. Used when `showClearButton` is `true`\n   */\n  onClearButtonClick?: () => void;\n\n  /**\n   * Decides whether to show a loading spinner for the input field.\n   */\n  isLoading?: boolean;\n\n  /**\n   * Icon that will be rendered at the beginning of the input field\n   * @deprecated Use `leadingIcon` instead. This prop will be removed in the next major version.\n   */\n  icon?: IconComponent;\n  /**\n   * Type of Input Field to be rendered. Use `PasswordInput` for type `password`\n   *\n   *\n   * **Note on number type**\n   *\n   * `type=\"number\"` internally uses `inputMode=\"numeric\"` instead of HTML's `type=\"number\"` which also allows text characters.\n   * If you have a usecase where you only want to support number input, you can handle it on validations end.\n   *\n   * Check out [Why the GOV.UK Design System team changed the input type for numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) for reasoning\n   *\n   * @default text\n   */\n  type?: Type;\n} & TaggedInputProps &\n  StyledPropsBlade;\n\n/*\n  Mandatory accessibilityLabel prop when label is not provided\n*/\ntype TextInputPropsWithA11yLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label?: undefined;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel: string;\n};\n\n/*\n  Optional accessibilityLabel prop when label is provided\n*/\ntype TextInputPropsWithLabel = {\n  /**\n   * Label to be shown for the input field\n   */\n  label: string;\n  /**\n   * Accessibility label for the input\n   */\n  accessibilityLabel?: string;\n};\n\ntype TextInputProps = (TextInputPropsWithA11yLabel | TextInputPropsWithLabel) &\n  TextInputCommonProps;\n\n// need to do this to tell TS to infer type as TextInput of React Native and make it believe that `ref.current.clear()` exists\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst isReactNative = (_textInputRef: any): _textInputRef is TextInputReactNative => {\n  return getPlatformType() === 'react-native';\n};\n\nconst _TextInput: React.ForwardRefRenderFunction<BladeElementRef, TextInputProps> = (\n  {\n    label,\n    accessibilityLabel,\n    labelPosition = 'top',\n    placeholder,\n    type = 'text',\n    defaultValue,\n    name,\n    value,\n    maxCharacters,\n    onChange,\n    onClick,\n    onFocus,\n    onBlur,\n    onSubmit,\n    isDisabled,\n    necessityIndicator,\n    validationState,\n    errorText,\n    helpText,\n    successText,\n    isRequired,\n    icon,\n    prefix,\n    showClearButton,\n    onClearButtonClick,\n    isLoading,\n    suffix,\n    autoFocus,\n    keyboardReturnKeyType,\n    autoCompleteSuggestionType,\n    autoCapitalize,\n    testID,\n    size = 'medium',\n    leadingIcon,\n    trailingIcon,\n    isTaggedInput,\n    tags,\n    onTagChange,\n    ...styledProps\n  },\n  ref,\n): ReactElement => {\n  const textInputRef = React.useRef<BladeElementRefWithValue>(null);\n  const mergedRef = useMergeRefs(ref, textInputRef);\n  const [shouldShowClearButton, setShouldShowClearButton] = useState(false);\n  const [isInputFocussed, setIsInputFocussed] = useState(autoFocus ?? false);\n  const {\n    activeTagIndex,\n    setActiveTagIndex,\n    getTags,\n    handleTaggedInputKeydown,\n    handleTaggedInputChange,\n    handleTagsClear,\n  } = useTaggedInput({\n    isTaggedInput,\n    tags,\n    onTagChange,\n    isDisabled,\n    onChange,\n    name,\n    value,\n    inputRef: textInputRef,\n  });\n\n  React.useEffect(() => {\n    setShouldShowClearButton(Boolean(showClearButton && (defaultValue ?? value)));\n  }, [showClearButton, defaultValue, value]);\n\n  const renderInteractionElement = (): ReactNode => {\n    if (isLoading) {\n      return <Spinner accessibilityLabel=\"Loading Content\" color=\"primary\" />;\n    }\n\n    if (shouldShowClearButton) {\n      return (\n        <IconButton\n          size=\"medium\"\n          icon={CloseIcon}\n          onClick={() => {\n            if (isEmpty(value) && textInputRef.current) {\n              // when the input field is uncontrolled take the ref and clear the input and then call the onClearButtonClick function\n              if (isReactNative(textInputRef.current)) {\n                textInputRef.current.clear();\n                textInputRef.current.focus();\n              } else if (textInputRef.current instanceof HTMLInputElement) {\n                textInputRef.current.value = '';\n                textInputRef.current.focus();\n              }\n            }\n            handleTagsClear();\n            // if the input field is controlled just call the click handler and the value change shall be left upto the consumer\n            onClearButtonClick?.();\n            textInputRef?.current?.focus();\n            setShouldShowClearButton(false);\n          }}\n          isDisabled={isDisabled}\n          accessibilityLabel=\"Clear Input Content\"\n        />\n      );\n    }\n\n    return null;\n  };\n\n  return (\n    <BaseInput\n      id=\"textinput\"\n      componentName={MetaConstants.TextInput}\n      ref={mergedRef}\n      label={label as string}\n      accessibilityLabel={accessibilityLabel}\n      hideLabelText={!Boolean(label)}\n      labelPosition={labelPosition}\n      placeholder={placeholder}\n      defaultValue={defaultValue}\n      value={value}\n      name={name}\n      maxCharacters={maxCharacters}\n      isDropdownTrigger={isTaggedInput}\n      tags={isTaggedInput ? getTags({ size }) : undefined}\n      showAllTags={isInputFocussed}\n      maxTagRows=\"single\"\n      activeTagIndex={activeTagIndex}\n      setActiveTagIndex={setActiveTagIndex}\n      onChange={({ name, value }) => {\n        if (showClearButton && value?.length) {\n          // show the clear button when the user starts typing in\n          setShouldShowClearButton(true);\n        }\n\n        if (shouldShowClearButton && !value?.length) {\n          // hide the clear button when the input field is empty\n          setShouldShowClearButton(false);\n        }\n\n        handleTaggedInputChange({ name, value });\n        onChange?.({ name, value });\n      }}\n      onClick={onClick}\n      onFocus={(e) => {\n        setIsInputFocussed(true);\n        onFocus?.(e);\n      }}\n      onBlur={(e) => {\n        setIsInputFocussed(false);\n        onBlur?.(e);\n      }}\n      onKeyDown={(e) => {\n        handleTaggedInputKeydown(e);\n      }}\n      onSubmit={onSubmit}\n      isDisabled={isDisabled}\n      necessityIndicator={necessityIndicator}\n      isRequired={isRequired}\n      leadingIcon={leadingIcon ?? icon}\n      prefix={prefix}\n      trailingInteractionElement={renderInteractionElement()}\n      trailingIcon={trailingIcon}\n      suffix={suffix}\n      validationState={validationState}\n      errorText={errorText}\n      helpText={helpText}\n      successText={successText}\n      trailingFooterSlot={(value) => {\n        return maxCharacters ? (\n          <BaseBox marginTop={hintMarginTop[size]} marginRight=\"spacing.1\">\n            <CharacterCounter\n              currentCount={value?.length ?? 0}\n              maxCount={maxCharacters}\n              size={size}\n            />\n          </BaseBox>\n        ) : null;\n      }}\n      // eslint-disable-next-line jsx-a11y/no-autofocus\n      autoFocus={autoFocus}\n      testID={testID}\n      {...getKeyboardAndAutocompleteProps({\n        type,\n        keyboardReturnKeyType,\n        autoCompleteSuggestionType,\n        autoCapitalize,\n      })}\n      size={size}\n      {...styledProps}\n    />\n  );\n};\n\nconst TextInput = assignWithoutSideEffects(React.forwardRef(_TextInput), {\n  displayName: 'TextInput',\n});\n\nexport type { TextInputProps };\nexport { TextInput };\n"],"names":["isReactNative","_textInputRef","getPlatformType","_TextInput","_ref","ref","label","accessibilityLabel","_ref$labelPosition","labelPosition","placeholder","_ref$type","type","defaultValue","name","value","maxCharacters","onChange","onClick","onFocus","onBlur","onSubmit","isDisabled","necessityIndicator","validationState","errorText","helpText","successText","isRequired","icon","prefix","showClearButton","onClearButtonClick","isLoading","suffix","autoFocus","keyboardReturnKeyType","autoCompleteSuggestionType","autoCapitalize","testID","_ref$size","size","leadingIcon","trailingIcon","isTaggedInput","tags","onTagChange","styledProps","_objectWithoutProperties","_excluded","textInputRef","React","useRef","mergedRef","useMergeRefs","_useState","useState","_useState2","_slicedToArray","shouldShowClearButton","setShouldShowClearButton","_useState3","_useState4","isInputFocussed","setIsInputFocussed","_useTaggedInput","useTaggedInput","inputRef","activeTagIndex","setActiveTagIndex","getTags","handleTaggedInputKeydown","handleTaggedInputChange","handleTagsClear","useEffect","Boolean","renderInteractionElement","_jsx","Spinner","color","IconButton","CloseIcon","_textInputRef$current","isEmpty","current","clear","focus","HTMLInputElement","BaseInput","_objectSpread","id","componentName","MetaConstants","TextInput","hideLabelText","isDropdownTrigger","undefined","showAllTags","maxTagRows","_ref2","length","e","onKeyDown","trailingInteractionElement","trailingFooterSlot","_value$length","BaseBox","marginTop","hintMarginTop","marginRight","children","CharacterCounter","currentCount","maxCount","getKeyboardAndAutocompleteProps","assignWithoutSideEffects","forwardRef","displayName"],"mappings":"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"}

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

@@ -0,0 +1,140 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import styled, { keyframes, css } from 'styled-components';
+import 'react';
+import { pulseAnimation, getCircularProgressSVGTokens, circularProgressSizeTokens } from './progressBarTokens.js';
+import { CircularProgressLabel } from './CircularProgressLabel.js';
+import getIn from '../../utils/lodashButBetter/get.js';
+import '../Box/BaseBox/index.js';
+import '../../utils/index.js';
+import '../../utils/makeMotionTime/index.web.js';
+import '../Typography/index.js';
+import '../Icons/_Svg/index.js';
+import getBaseTextStyles from '../Typography/BaseText/getBaseTextStyles.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { getTextProps } from '../Typography/Text/Text.js';
+import { castWebType } from '../../utils/platform/castUtils.js';
+import { makeMotionTime } from '../../utils/makeMotionTime/makeMotionTime.web.js';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import Svg from '../Icons/_Svg/Svg/Svg.web.js';
+import Circle from '../Icons/_Svg/Circle/Circle.web.js';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var pulseKeyframes = /*#__PURE__*/keyframes(["0%{opacity:100;}50%{opacity:0.65;}100%{opacity:100;}"]);
+var getPulseAnimationStyles = function getPulseAnimationStyles(_ref) {
+  var duration = _ref.duration,
+    easing = _ref.easing,
+    progressPercent = _ref.progressPercent,
+    isMeter = _ref.isMeter;
+  if (isMeter || progressPercent === 100) {
+    return css(["height:100%;width:100%;transition:stroke-dashoffset ", " ", ";"], duration, easing);
+  }
+  return css(["height:100%;width:100%;opacity:", ";background-color:", ";transition:stroke-dashoffset ", " ", ";animation:", " ", " ", " infinite;"], pulseAnimation.opacityInitial, pulseAnimation.backgroundColor, duration, easing, pulseKeyframes, duration, easing);
+};
+var StyledSVGText = /*#__PURE__*/styled.text.withConfig({
+  displayName: "CircularProgressBarweb__StyledSVGText",
+  componentId: "h4xj3g-0"
+})(function (_ref2) {
+  var theme = _ref2.theme,
+    size = _ref2.size,
+    weight = _ref2.weight;
+  return getBaseTextStyles(_objectSpread({
+    theme: theme
+  }, getTextProps({
+    variant: 'body',
+    size: size,
+    weight: weight
+  })));
+});
+var DeterminatePulseAnimation = /*#__PURE__*/styled.circle.withConfig({
+  displayName: "CircularProgressBarweb__DeterminatePulseAnimation",
+  componentId: "h4xj3g-1"
+})(function (_ref3) {
+  var theme = _ref3.theme,
+    pulseMotionDuration = _ref3.pulseMotionDuration,
+    motionEasing = _ref3.motionEasing,
+    progressPercent = _ref3.progressPercent,
+    isMeter = _ref3.isMeter;
+  var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
+  var easing = castWebType(getIn(theme.motion, motionEasing));
+  return getPulseAnimationStyles({
+    duration: duration,
+    easing: easing,
+    progressPercent: progressPercent,
+    isMeter: isMeter
+  });
+});
+var CircularProgressBarFilled = function CircularProgressBarFilled(_ref4) {
+  var progressPercent = _ref4.progressPercent,
+    fillColor = _ref4.fillColor,
+    backgroundColor = _ref4.backgroundColor,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 'small' : _ref4$size,
+    label = _ref4.label,
+    _ref4$showPercentage = _ref4.showPercentage,
+    showPercentage = _ref4$showPercentage === void 0 ? true : _ref4$showPercentage,
+    isMeter = _ref4.isMeter;
+  var _getCircularProgressS = getCircularProgressSVGTokens({
+      size: size,
+      progressPercent: progressPercent
+    }),
+    sqSize = _getCircularProgressS.sqSize,
+    strokeWidth = _getCircularProgressS.strokeWidth,
+    radius = _getCircularProgressS.radius,
+    viewBox = _getCircularProgressS.viewBox,
+    dashArray = _getCircularProgressS.dashArray,
+    dashOffset = _getCircularProgressS.dashOffset;
+  return /*#__PURE__*/jsxs(BaseBox, {
+    width: "fit-content",
+    textAlign: "center",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    children: [/*#__PURE__*/jsxs(Svg, {
+      width: String(sqSize),
+      height: String(sqSize),
+      viewBox: viewBox,
+      children: [/*#__PURE__*/jsx(Circle, {
+        fill: "none",
+        stroke: backgroundColor,
+        cx: String(sqSize / 2),
+        cy: String(sqSize / 2),
+        r: String(radius),
+        strokeWidth: "".concat(strokeWidth, "px")
+      }), /*#__PURE__*/jsx(DeterminatePulseAnimation, {
+        progressPercent: progressPercent,
+        isMeter: isMeter,
+        fill: "none",
+        stroke: fillColor,
+        cx: sqSize / 2,
+        cy: sqSize / 2,
+        r: radius,
+        strokeWidth: "".concat(strokeWidth, "px")
+        // Start progress marker at 12 O'Clock
+        ,
+        transform: "rotate(-90 ".concat(sqSize / 2, " ").concat(sqSize / 2, ")"),
+        strokeDasharray: dashArray,
+        strokeDashoffset: dashOffset,
+        pulseMotionDuration: "duration.2xgentle",
+        pulseMotionDelay: "delay.long",
+        motionEasing: "easing.standard.revealing"
+      }), showPercentage && size !== 'small' && /*#__PURE__*/jsxs(StyledSVGText, {
+        size: circularProgressSizeTokens[size].percentTextSize,
+        weight: "semibold",
+        x: "50%",
+        y: "50%",
+        textAnchor: "middle",
+        dy: ".4em",
+        children: [progressPercent, "%"]
+      })]
+    }), /*#__PURE__*/jsx(CircularProgressLabel, {
+      progressPercent: progressPercent,
+      size: size,
+      label: label,
+      showPercentage: showPercentage
+    })]
+  });
+};
+
+export { CircularProgressBarFilled };
+//# sourceMappingURL=CircularProgressBar.web.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressBar.web.js","sources":["../../../../../../src/components/ProgressBar/CircularProgressBar.web.tsx"],"sourcesContent":["import type { FlattenSimpleInterpolation } from 'styled-components';\nimport styled, { css, keyframes } from 'styled-components';\nimport React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport {\n  pulseAnimation,\n  circularProgressSizeTokens,\n  getCircularProgressSVGTokens,\n} from './progressBarTokens';\nimport { CircularProgressLabel } from './CircularProgressLabel';\nimport getIn from '~utils/lodashButBetter/get';\nimport BaseBox from '~components/Box/BaseBox';\nimport { castWebType } from '~utils';\nimport { makeMotionTime } from '~utils/makeMotionTime';\nimport type { TextProps } from '~components/Typography';\nimport { getTextProps } from '~components/Typography';\nimport { Svg, Circle } from '~components/Icons/_Svg';\nimport getBaseTextStyles from '~components/Typography/BaseText/getBaseTextStyles';\n\nconst pulseKeyframes = keyframes`\n  0% {\n    opacity: 100;\n  }\n  50% {\n    opacity: 0.65;\n  }\n  100% {\n    opacity: 100;\n  }\n`;\n\nconst getPulseAnimationStyles = ({\n  duration,\n  easing,\n  progressPercent,\n  isMeter,\n}: {\n  duration: string;\n  easing: string;\n  progressPercent: number;\n  isMeter: boolean;\n}): FlattenSimpleInterpolation => {\n  if (isMeter || progressPercent === 100) {\n    return css`\n      height: 100%;\n      width: 100%;\n      transition: stroke-dashoffset ${duration} ${easing};\n    `;\n  }\n\n  return css`\n    height: 100%;\n    width: 100%;\n    opacity: ${pulseAnimation.opacityInitial};\n    background-color: ${pulseAnimation.backgroundColor};\n    transition: stroke-dashoffset ${duration} ${easing};\n    animation: ${pulseKeyframes} ${duration} ${easing} infinite;\n  `;\n};\n\nconst StyledSVGText = styled.text<Pick<TextProps<{ variant: 'body' }>, 'size' | 'weight'>>(\n  ({ theme, size, weight }) => {\n    return getBaseTextStyles({\n      theme,\n      ...getTextProps({ variant: 'body', size, weight }),\n    });\n  },\n);\n\nconst DeterminatePulseAnimation = styled.circle<\n  Pick<\n    CircularProgressBarFilledProps,\n    'pulseMotionDuration' | 'pulseMotionDelay' | 'motionEasing' | 'progressPercent' | 'isMeter'\n  >\n>(({ theme, pulseMotionDuration, motionEasing, progressPercent, isMeter }) => {\n  const duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));\n  const easing = castWebType(getIn(theme.motion, motionEasing));\n\n  return getPulseAnimationStyles({\n    duration,\n    easing,\n    progressPercent,\n    isMeter,\n  });\n});\n\nconst CircularProgressBarFilled = ({\n  progressPercent,\n  fillColor,\n  backgroundColor,\n  size = 'small',\n  label,\n  showPercentage = true,\n  isMeter,\n}: CircularProgressBarFilledProps): React.ReactElement => {\n  const {\n    sqSize,\n    strokeWidth,\n    radius,\n    viewBox,\n    dashArray,\n    dashOffset,\n  } = getCircularProgressSVGTokens({ size, progressPercent });\n\n  return (\n    <BaseBox\n      width=\"fit-content\"\n      textAlign=\"center\"\n      display=\"flex\"\n      flexDirection=\"column\"\n      alignItems=\"center\"\n    >\n      <Svg width={String(sqSize)} height={String(sqSize)} viewBox={viewBox}>\n        <Circle\n          fill=\"none\"\n          stroke={backgroundColor}\n          cx={String(sqSize / 2)}\n          cy={String(sqSize / 2)}\n          r={String(radius)}\n          strokeWidth={`${strokeWidth}px`}\n        />\n\n        <DeterminatePulseAnimation\n          progressPercent={progressPercent}\n          isMeter={isMeter}\n          fill=\"none\"\n          stroke={fillColor}\n          cx={sqSize / 2}\n          cy={sqSize / 2}\n          r={radius}\n          strokeWidth={`${strokeWidth}px`}\n          // Start progress marker at 12 O'Clock\n          transform={`rotate(-90 ${sqSize / 2} ${sqSize / 2})`}\n          strokeDasharray={dashArray}\n          strokeDashoffset={dashOffset}\n          pulseMotionDuration=\"duration.2xgentle\"\n          pulseMotionDelay=\"delay.long\"\n          motionEasing=\"easing.standard.revealing\"\n        />\n        {showPercentage && size !== 'small' && (\n          <StyledSVGText\n            size={circularProgressSizeTokens[size].percentTextSize}\n            weight=\"semibold\"\n            x=\"50%\"\n            y=\"50%\"\n            textAnchor=\"middle\"\n            dy=\".4em\"\n          >\n            {progressPercent}%\n          </StyledSVGText>\n        )}\n      </Svg>\n\n      <CircularProgressLabel\n        progressPercent={progressPercent}\n        size={size}\n        label={label}\n        showPercentage={showPercentage}\n      />\n    </BaseBox>\n  );\n};\n\nexport { CircularProgressBarFilled };\n"],"names":["pulseKeyframes","keyframes","getPulseAnimationStyles","_ref","duration","easing","progressPercent","isMeter","css","pulseAnimation","opacityInitial","backgroundColor","StyledSVGText","styled","text","withConfig","displayName","componentId","_ref2","theme","size","weight","getBaseTextStyles","_objectSpread","getTextProps","variant","DeterminatePulseAnimation","circle","_ref3","pulseMotionDuration","motionEasing","castWebType","makeMotionTime","getIn","motion","CircularProgressBarFilled","_ref4","fillColor","_ref4$size","label","_ref4$showPercentage","showPercentage","_getCircularProgressS","getCircularProgressSVGTokens","sqSize","strokeWidth","radius","viewBox","dashArray","dashOffset","_jsxs","BaseBox","width","textAlign","display","flexDirection","alignItems","children","Svg","String","height","_jsx","Circle","fill","stroke","cx","cy","r","concat","transform","strokeDasharray","strokeDashoffset","pulseMotionDelay","circularProgressSizeTokens","percentTextSize","x","y","textAnchor","dy","CircularProgressLabel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBA,IAAMA,cAAc,gBAAGC,SAAS,CAU/B,CAAA,sDAAA,CAAA,CAAA,CAAA;AAED,IAAMC,uBAAuB,GAAG,SAA1BA,uBAAuBA,CAAAC,IAAA,EAUK;AAAA,EAAA,IAThCC,QAAQ,GAAAD,IAAA,CAARC,QAAQ;IACRC,MAAM,GAAAF,IAAA,CAANE,MAAM;IACNC,eAAe,GAAAH,IAAA,CAAfG,eAAe;IACfC,OAAO,GAAAJ,IAAA,CAAPI,OAAO,CAAA;AAOP,EAAA,IAAIA,OAAO,IAAID,eAAe,KAAK,GAAG,EAAE;AACtC,IAAA,OAAOE,GAAG,CAAA,CAAA,sDAAA,EAAA,GAAA,EAAA,GAAA,CAAA,EAGwBJ,QAAQ,EAAIC,MAAM,CAAA,CAAA;AAEtD,GAAA;AAEA,EAAA,OAAOG,GAAG,CAGGC,CAAAA,iCAAAA,EAAAA,oBAAAA,EAAAA,gCAAAA,EAAAA,GAAAA,EAAAA,aAAAA,EAAAA,GAAAA,EAAAA,GAAAA,EAAAA,YAAAA,CAAAA,EAAAA,cAAc,CAACC,cAAc,EACpBD,cAAc,CAACE,eAAe,EAClBP,QAAQ,EAAIC,MAAM,EACrCL,cAAc,EAAII,QAAQ,EAAIC,MAAM,CAAA,CAAA;AAErD,CAAC,CAAA;AAED,IAAMO,aAAa,gBAAGC,MAAM,CAACC,IAAI,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,uCAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAC/B,CAAA,CAAA,UAAAC,KAAA,EAA6B;AAAA,EAAA,IAA1BC,KAAK,GAAAD,KAAA,CAALC,KAAK;IAAEC,IAAI,GAAAF,KAAA,CAAJE,IAAI;IAAEC,MAAM,GAAAH,KAAA,CAANG,MAAM,CAAA;EACpB,OAAOC,iBAAiB,CAAAC,aAAA,CAAA;AACtBJ,IAAAA,KAAK,EAALA,KAAAA;AAAK,GAAA,EACFK,YAAY,CAAC;AAAEC,IAAAA,OAAO,EAAE,MAAM;AAAEL,IAAAA,IAAI,EAAJA,IAAI;AAAEC,IAAAA,MAAM,EAANA,MAAAA;GAAQ,CAAC,CACnD,CAAC,CAAA;AACJ,CAAC,CACF,CAAA;AAED,IAAMK,yBAAyB,gBAAGb,MAAM,CAACc,MAAM,CAAAZ,UAAA,CAAA;EAAAC,WAAA,EAAA,mDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAK7C,CAAA,CAAA,UAAAW,KAAA,EAA4E;AAAA,EAAA,IAAzET,KAAK,GAAAS,KAAA,CAALT,KAAK;IAAEU,mBAAmB,GAAAD,KAAA,CAAnBC,mBAAmB;IAAEC,YAAY,GAAAF,KAAA,CAAZE,YAAY;IAAExB,eAAe,GAAAsB,KAAA,CAAftB,eAAe;IAAEC,OAAO,GAAAqB,KAAA,CAAPrB,OAAO,CAAA;AACrE,EAAA,IAAMH,QAAQ,GAAG2B,WAAW,CAACC,cAAc,CAACC,KAAK,CAACd,KAAK,CAACe,MAAM,EAAEL,mBAAmB,CAAC,CAAC,CAAC,CAAA;AACtF,EAAA,IAAMxB,MAAM,GAAG0B,WAAW,CAACE,KAAK,CAACd,KAAK,CAACe,MAAM,EAAEJ,YAAY,CAAC,CAAC,CAAA;AAE7D,EAAA,OAAO5B,uBAAuB,CAAC;AAC7BE,IAAAA,QAAQ,EAARA,QAAQ;AACRC,IAAAA,MAAM,EAANA,MAAM;AACNC,IAAAA,eAAe,EAAfA,eAAe;AACfC,IAAAA,OAAO,EAAPA,OAAAA;AACF,GAAC,CAAC,CAAA;AACJ,CAAC,CAAC,CAAA;AAEF,IAAM4B,yBAAyB,GAAG,SAA5BA,yBAAyBA,CAAAC,KAAA,EAQ2B;AAAA,EAAA,IAPxD9B,eAAe,GAAA8B,KAAA,CAAf9B,eAAe;IACf+B,SAAS,GAAAD,KAAA,CAATC,SAAS;IACT1B,eAAe,GAAAyB,KAAA,CAAfzB,eAAe;IAAA2B,UAAA,GAAAF,KAAA,CACfhB,IAAI;AAAJA,IAAAA,IAAI,GAAAkB,UAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,UAAA;IACdC,KAAK,GAAAH,KAAA,CAALG,KAAK;IAAAC,oBAAA,GAAAJ,KAAA,CACLK,cAAc;AAAdA,IAAAA,cAAc,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,oBAAA;IACrBjC,OAAO,GAAA6B,KAAA,CAAP7B,OAAO,CAAA;EAEP,IAAAmC,qBAAA,GAOIC,4BAA4B,CAAC;AAAEvB,MAAAA,IAAI,EAAJA,IAAI;AAAEd,MAAAA,eAAe,EAAfA,eAAAA;AAAgB,KAAC,CAAC;IANzDsC,MAAM,GAAAF,qBAAA,CAANE,MAAM;IACNC,WAAW,GAAAH,qBAAA,CAAXG,WAAW;IACXC,MAAM,GAAAJ,qBAAA,CAANI,MAAM;IACNC,OAAO,GAAAL,qBAAA,CAAPK,OAAO;IACPC,SAAS,GAAAN,qBAAA,CAATM,SAAS;IACTC,UAAU,GAAAP,qBAAA,CAAVO,UAAU,CAAA;EAGZ,oBACEC,IAAA,CAACC,OAAO,EAAA;AACNC,IAAAA,KAAK,EAAC,aAAa;AACnBC,IAAAA,SAAS,EAAC,QAAQ;AAClBC,IAAAA,OAAO,EAAC,MAAM;AACdC,IAAAA,aAAa,EAAC,QAAQ;AACtBC,IAAAA,UAAU,EAAC,QAAQ;IAAAC,QAAA,EAAA,cAEnBP,IAAA,CAACQ,GAAG,EAAA;AAACN,MAAAA,KAAK,EAAEO,MAAM,CAACf,MAAM,CAAE;AAACgB,MAAAA,MAAM,EAAED,MAAM,CAACf,MAAM,CAAE;AAACG,MAAAA,OAAO,EAAEA,OAAQ;MAAAU,QAAA,EAAA,cACnEI,GAAA,CAACC,MAAM,EAAA;AACLC,QAAAA,IAAI,EAAC,MAAM;AACXC,QAAAA,MAAM,EAAErD,eAAgB;AACxBsD,QAAAA,EAAE,EAAEN,MAAM,CAACf,MAAM,GAAG,CAAC,CAAE;AACvBsB,QAAAA,EAAE,EAAEP,MAAM,CAACf,MAAM,GAAG,CAAC,CAAE;AACvBuB,QAAAA,CAAC,EAAER,MAAM,CAACb,MAAM,CAAE;QAClBD,WAAW,EAAA,EAAA,CAAAuB,MAAA,CAAKvB,WAAW,EAAA,IAAA,CAAA;AAAK,OACjC,CAAC,eAEFgB,GAAA,CAACnC,yBAAyB,EAAA;AACxBpB,QAAAA,eAAe,EAAEA,eAAgB;AACjCC,QAAAA,OAAO,EAAEA,OAAQ;AACjBwD,QAAAA,IAAI,EAAC,MAAM;AACXC,QAAAA,MAAM,EAAE3B,SAAU;QAClB4B,EAAE,EAAErB,MAAM,GAAG,CAAE;QACfsB,EAAE,EAAEtB,MAAM,GAAG,CAAE;AACfuB,QAAAA,CAAC,EAAErB,MAAO;QACVD,WAAW,EAAA,EAAA,CAAAuB,MAAA,CAAKvB,WAAW,EAAA,IAAA,CAAA;AAC3B;AAAA;AACAwB,QAAAA,SAAS,EAAAD,aAAAA,CAAAA,MAAA,CAAgBxB,MAAM,GAAG,CAAC,EAAAwB,GAAAA,CAAAA,CAAAA,MAAA,CAAIxB,MAAM,GAAG,CAAC,EAAI,GAAA,CAAA;AACrD0B,QAAAA,eAAe,EAAEtB,SAAU;AAC3BuB,QAAAA,gBAAgB,EAAEtB,UAAW;AAC7BpB,QAAAA,mBAAmB,EAAC,mBAAmB;AACvC2C,QAAAA,gBAAgB,EAAC,YAAY;AAC7B1C,QAAAA,YAAY,EAAC,2BAAA;OACd,CAAC,EACDW,cAAc,IAAIrB,IAAI,KAAK,OAAO,iBACjC8B,IAAA,CAACtC,aAAa,EAAA;AACZQ,QAAAA,IAAI,EAAEqD,0BAA0B,CAACrD,IAAI,CAAC,CAACsD,eAAgB;AACvDrD,QAAAA,MAAM,EAAC,UAAU;AACjBsD,QAAAA,CAAC,EAAC,KAAK;AACPC,QAAAA,CAAC,EAAC,KAAK;AACPC,QAAAA,UAAU,EAAC,QAAQ;AACnBC,QAAAA,EAAE,EAAC,MAAM;QAAArB,QAAA,EAAA,CAERnD,eAAe,EAAC,GACnB,CAAA;AAAA,OAAe,CAChB,CAAA;AAAA,KACE,CAAC,eAENuD,GAAA,CAACkB,qBAAqB,EAAA;AACpBzE,MAAAA,eAAe,EAAEA,eAAgB;AACjCc,MAAAA,IAAI,EAAEA,IAAK;AACXmB,MAAAA,KAAK,EAAEA,KAAM;AACbE,MAAAA,cAAc,EAAEA,cAAAA;AAAe,KAChC,CAAC,CAAA;AAAA,GACK,CAAC,CAAA;AAEd;;;;"}

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

@@ -0,0 +1,38 @@
+import 'react';
+import '../Box/BaseBox/index.js';
+import '../Typography/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
+import { Text } from '../Typography/Text/Text.js';
+
+var CircularProgressLabel = function CircularProgressLabel(_ref) {
+  var _label$trim;
+  var progressPercent = _ref.progressPercent,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'small' : _ref$size,
+    label = _ref.label,
+    _ref$showPercentage = _ref.showPercentage,
+    showPercentage = _ref$showPercentage === void 0 ? true : _ref$showPercentage;
+  var hasLabel = label && ((_label$trim = label.trim()) === null || _label$trim === void 0 ? void 0 : _label$trim.length) > 0;
+  return /*#__PURE__*/jsxs(BaseBox, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    children: [hasLabel && /*#__PURE__*/jsx(Text, {
+      marginTop: "spacing.3",
+      variant: "body",
+      weight: "regular",
+      size: "small",
+      children: label
+    }), showPercentage && size === 'small' && /*#__PURE__*/jsxs(Text, {
+      marginTop: hasLabel ? 'spacing.0' : 'spacing.3',
+      variant: "body",
+      weight: "semibold",
+      size: "small",
+      children: [progressPercent, "%"]
+    })]
+  });
+};
+
+export { CircularProgressLabel };
+//# sourceMappingURL=CircularProgressLabel.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CircularProgressLabel.js","sources":["../../../../../../src/components/ProgressBar/CircularProgressLabel.tsx"],"sourcesContent":["import React from 'react';\nimport type { CircularProgressBarFilledProps } from './types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\n\nconst CircularProgressLabel = ({\n  progressPercent,\n  size = 'small',\n  label,\n  showPercentage = true,\n}: Pick<\n  CircularProgressBarFilledProps,\n  'progressPercent' | 'size' | 'label' | 'showPercentage'\n>): React.ReactElement => {\n  const hasLabel = label && label.trim()?.length > 0;\n\n  return (\n    <BaseBox display=\"flex\" flexDirection=\"column\" alignItems=\"center\">\n      {hasLabel && (\n        <Text marginTop=\"spacing.3\" variant=\"body\" weight=\"regular\" size=\"small\">\n          {label}\n        </Text>\n      )}\n\n      {showPercentage && size === 'small' && (\n        <Text\n          marginTop={hasLabel ? 'spacing.0' : 'spacing.3'}\n          variant=\"body\"\n          weight=\"semibold\"\n          size=\"small\"\n        >\n          {progressPercent}%\n        </Text>\n      )}\n    </BaseBox>\n  );\n};\n\nexport { CircularProgressLabel };\n"],"names":["CircularProgressLabel","_ref","_label$trim","progressPercent","_ref$size","size","label","_ref$showPercentage","showPercentage","hasLabel","trim","length","_jsxs","BaseBox","display","flexDirection","alignItems","children","_jsx","Text","marginTop","variant","weight"],"mappings":";;;;;;;AAKA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAAC,IAAA,EAQD;AAAA,EAAA,IAAAC,WAAA,CAAA;AAAA,EAAA,IAPxBC,eAAe,GAAAF,IAAA,CAAfE,eAAe;IAAAC,SAAA,GAAAH,IAAA,CACfI,IAAI;AAAJA,IAAAA,IAAI,GAAAD,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IACdE,KAAK,GAAAL,IAAA,CAALK,KAAK;IAAAC,mBAAA,GAAAN,IAAA,CACLO,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA,CAAA;AAKrB,EAAA,IAAME,QAAQ,GAAGH,KAAK,IAAI,CAAAJ,CAAAA,WAAA,GAAAI,KAAK,CAACI,IAAI,EAAE,cAAAR,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,WAAA,CAAcS,MAAM,IAAG,CAAC,CAAA;EAElD,oBACEC,IAAA,CAACC,OAAO,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,aAAa,EAAC,QAAQ;AAACC,IAAAA,UAAU,EAAC,QAAQ;AAAAC,IAAAA,QAAA,EAC/DR,CAAAA,QAAQ,iBACPS,GAAA,CAACC,IAAI,EAAA;AAACC,MAAAA,SAAS,EAAC,WAAW;AAACC,MAAAA,OAAO,EAAC,MAAM;AAACC,MAAAA,MAAM,EAAC,SAAS;AAACjB,MAAAA,IAAI,EAAC,OAAO;AAAAY,MAAAA,QAAA,EACrEX,KAAAA;KACG,CACP,EAEAE,cAAc,IAAIH,IAAI,KAAK,OAAO,iBACjCO,IAAA,CAACO,IAAI,EAAA;AACHC,MAAAA,SAAS,EAAEX,QAAQ,GAAG,WAAW,GAAG,WAAY;AAChDY,MAAAA,OAAO,EAAC,MAAM;AACdC,MAAAA,MAAM,EAAC,UAAU;AACjBjB,MAAAA,IAAI,EAAC,OAAO;MAAAY,QAAA,EAAA,CAEXd,eAAe,EAAC,GACnB,CAAA;AAAA,KAAM,CACP,CAAA;AAAA,GACM,CAAC,CAAA;AAEd;;;;"}

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

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { ProgressBarFilled } from './ProgressBarFilled.web.js';
+import { CircularProgressBarFilled } from './CircularProgressBar.web.js';
 import clamp from '../../utils/lodashButBetter/clamp.js';
 import '../../utils/metaAttribute/index.js';
 import '../Typography/Text/index.js';
@@ -24,17 +25,20 @@ import { Text } from '../Typography/Text/Text.js';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 
-var _excluded = ["accessibilityLabel", "color", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
+var _excluded = ["accessibilityLabel", "color", "type", "isIndeterminate", "label", "showPercentage", "size", "value", "variant", "min", "max", "testID"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var progressBarHeight = {
   small: size[2],
-  medium: size[4]
+  medium: size[4],
+  // Large size isn't available when variant is 'linear'
+  large: size[0]
 };
 var ProgressBar = function ProgressBar(_ref) {
   var _label$trim;
   var accessibilityLabel = _ref.accessibilityLabel,
     color = _ref.color,
+    type = _ref.type,
     _ref$isIndeterminate = _ref.isIndeterminate,
     isIndeterminate = _ref$isIndeterminate === void 0 ? false : _ref$isIndeterminate,
     label = _ref.label,
@@ -54,19 +58,40 @@ var ProgressBar = function ProgressBar(_ref) {
     styledProps = _objectWithoutProperties(_ref, _excluded);
   var _useTheme = useTheme(),
     theme = _useTheme.theme;
-  var id = useId(variant);
+  var progressType = !type && (variant === 'meter' || variant === 'progress') ? variant : type;
+  var progressVariant = variant === 'meter' || variant === 'progress' ? 'linear' : variant;
+  var id = useId("".concat(progressType, "-").concat(progressVariant));
   if (true) {
-    if (variant === 'meter' && isIndeterminate) {
+    if (progressType === 'meter' && isIndeterminate) {
       throwBladeError({
         moduleName: 'ProgressBar',
-        message: "Cannot set 'isIndeterminate' when 'variant' is 'meter'."
+        message: "Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'."
+      });
+    }
+    if (progressVariant === 'circular' && isIndeterminate) {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "Cannot set 'isIndeterminate' when 'variant' is 'circular'."
+      });
+    }
+    if (progressVariant === 'linear' && size === 'large') {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "Large size isn't available when 'variant' is 'linear'."
+      });
+    }
+    if (type && (variant === 'progress' || variant === 'meter')) {
+      throwBladeError({
+        moduleName: 'ProgressBar',
+        message: "variant can only be 'linear' or 'circular' when 'type=".concat(type, "'.")
       });
     }
   }
   var unfilledBackgroundColor = theme.colors.feedback.background.neutral.subtle;
   var filledBackgroundColor = color ? theme.colors.feedback.background[color].intense : theme.colors.surface.background.primary.intense;
   var hasLabel = label && ((_label$trim = label.trim()) === null || _label$trim === void 0 ? void 0 : _label$trim.length) > 0;
-  var isMeter = variant === 'meter';
+  var isMeter = progressType === 'meter';
+  var isCircular = progressVariant === 'circular';
   var progressValue = clamp(value, min, max);
   var percentageProgressValue = Math.floor((progressValue - min) * 100 / (max - min));
   var shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;
@@ -97,7 +122,7 @@ var ProgressBar = function ProgressBar(_ref) {
       display: "flex",
       flexDirection: "column",
       width: "100%",
-      children: [/*#__PURE__*/jsxs(BaseBox, {
+      children: [!isCircular ? /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         flexDirection: "row",
         justifyContent: hasLabel ? 'space-between' : 'flex-end',
@@ -116,7 +141,7 @@ var ProgressBar = function ProgressBar(_ref) {
             children: "".concat(percentageProgressValue, "%")
           })
         }) : null]
-      }), /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+      }) : null, /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
         id: id
       }, makeAccessible({
         role: accessibilityProps.role,
@@ -126,7 +151,19 @@ var ProgressBar = function ProgressBar(_ref) {
         valueMin: accessibilityProps.valueMin,
         valueMax: accessibilityProps.valueMax
       })), {}, {
-        children: /*#__PURE__*/jsx(BaseBox, {
+        children: isCircular ? /*#__PURE__*/jsx(CircularProgressBarFilled, {
+          size: size,
+          label: label,
+          progressPercent: percentageProgressValue,
+          isMeter: isMeter,
+          showPercentage: shouldShowPercentage,
+          backgroundColor: unfilledBackgroundColor,
+          fillColor: filledBackgroundColor,
+          pulseMotionDuration: "duration.2xgentle",
+          fillMotionDuration: "duration.2xgentle",
+          pulseMotionDelay: "delay.long",
+          motionEasing: "easing.standard.revealing"
+        }) : /*#__PURE__*/jsx(BaseBox, {
           backgroundColor: unfilledBackgroundColor,
           height: makeSize(progressBarHeight[size]),
           overflow: "hidden",
@@ -139,7 +176,7 @@ var ProgressBar = function ProgressBar(_ref) {
             indeterminateMotionDuration: "duration.2xgentle",
             pulseMotionDelay: "delay.long",
             motionEasing: "easing.standard.revealing",
-            variant: variant,
+            type: progressType,
             isIndeterminate: isIndeterminate
           })
         })

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 { 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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"}
+{"version":3,"file":"ProgressBar.js","sources":["../../../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import type { ReactElement } from 'react';\nimport { ProgressBarFilled } from './ProgressBarFilled';\nimport { CircularProgressBarFilled } from './CircularProgressBar';\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 type of the progress bar.\n   * @default 'progress'\n   */\n  type?: 'meter' | 'progress';\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   * Note: 'large' size isn't available when the variant is 'linear'.\n   * @default 'small'\n   */\n  size?: 'small' | 'medium' | 'large';\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' | 'linear' | 'circular';\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' | 'linear' | 'circular'>;\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' | 'linear' | 'circular'>;\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<ProgressBarProps['size']>, 2 | 4 | 0> = {\n  small: size[2],\n  medium: size[4],\n  // Large size isn't available when variant is 'linear'\n  large: size[0],\n};\n\nconst ProgressBar = ({\n  accessibilityLabel,\n  color,\n  type,\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 progressType = !type && (variant === 'meter' || variant === 'progress') ? variant : type;\n  const progressVariant = variant === 'meter' || variant === 'progress' ? 'linear' : variant;\n  const id = useId(`${progressType}-${progressVariant}`);\n\n  if (__DEV__) {\n    if (progressType === 'meter' && isIndeterminate) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Cannot set 'isIndeterminate' when 'type' or 'variant' is 'meter'.`,\n      });\n    }\n\n    if (progressVariant === 'circular' && isIndeterminate) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Cannot set 'isIndeterminate' when 'variant' is 'circular'.`,\n      });\n    }\n\n    if (progressVariant === 'linear' && size === 'large') {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `Large size isn't available when 'variant' is 'linear'.`,\n      });\n    }\n\n    if (type && (variant === 'progress' || variant === 'meter')) {\n      throwBladeError({\n        moduleName: 'ProgressBar',\n        message: `variant can only be 'linear' or 'circular' when 'type=${type}'.`,\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 = progressType === 'meter';\n  const isCircular = progressVariant === 'circular';\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        {!isCircular ? (\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        ) : null}\n\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          {isCircular ? (\n            <CircularProgressBarFilled\n              size={size}\n              label={label}\n              progressPercent={percentageProgressValue}\n              isMeter={isMeter}\n              showPercentage={shouldShowPercentage}\n              backgroundColor={unfilledBackgroundColor as string}\n              fillColor={filledBackgroundColor}\n              pulseMotionDuration=\"duration.2xgentle\"\n              fillMotionDuration=\"duration.2xgentle\"\n              pulseMotionDelay=\"delay.long\"\n              motionEasing=\"easing.standard.revealing\"\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                type={progressType}\n                isIndeterminate={isIndeterminate}\n              />\n            </BaseBox>\n          )}\n        </BaseBox>\n      </BaseBox>\n    </BaseBox>\n  );\n};\n\nexport type { ProgressBarProps, ProgressBarVariant };\nexport { ProgressBar };\n"],"names":["progressBarHeight","small","size","medium","large","ProgressBar","_ref","_label$trim","accessibilityLabel","color","type","_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","progressType","progressVariant","id","useId","concat","throwBladeError","moduleName","message","unfilledBackgroundColor","colors","feedback","background","neutral","subtle","filledBackgroundColor","intense","surface","primary","hasLabel","trim","length","isMeter","isCircular","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","Text","as","marginBottom","makeAccessible","CircularProgressBarFilled","progressPercent","backgroundColor","fillColor","pulseMotionDuration","fillMotionDuration","pulseMotionDelay","motionEasing","height","makeSize","overflow","position","ProgressBarFilled","progress","indeterminateMotionDuration"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsGA,IAAMA,iBAA2E,GAAG;AAClFC,EAAAA,KAAK,EAAEC,IAAI,CAAC,CAAC,CAAC;AACdC,EAAAA,MAAM,EAAED,IAAI,CAAC,CAAC,CAAC;AACf;EACAE,KAAK,EAAEF,IAAI,CAAC,CAAC,CAAA;AACf,CAAC,CAAA;AAED,IAAMG,WAAW,GAAG,SAAdA,WAAWA,CAAAC,IAAA,EAcqB;AAAA,EAAA,IAAAC,WAAA,CAAA;AAAA,EAAA,IAbpCC,kBAAkB,GAAAF,IAAA,CAAlBE,kBAAkB;IAClBC,KAAK,GAAAH,IAAA,CAALG,KAAK;IACLC,IAAI,GAAAJ,IAAA,CAAJI,IAAI;IAAAC,oBAAA,GAAAL,IAAA,CACJM,eAAe;AAAfA,IAAAA,eAAe,GAAAD,oBAAA,KAAG,KAAA,CAAA,GAAA,KAAK,GAAAA,oBAAA;IACvBE,KAAK,GAAAP,IAAA,CAALO,KAAK;IAAAC,mBAAA,GAAAR,IAAA,CACLS,cAAc;AAAdA,IAAAA,cAAc,GAAAD,mBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,mBAAA;IAAAE,SAAA,GAAAV,IAAA,CACrBJ,IAAI;AAAJA,IAAAA,IAAI,GAAAc,SAAA,KAAG,KAAA,CAAA,GAAA,OAAO,GAAAA,SAAA;IAAAC,UAAA,GAAAX,IAAA,CACdY,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,UAAA;IAAAE,YAAA,GAAAb,IAAA,CACTc,OAAO;AAAPA,IAAAA,OAAO,GAAAD,YAAA,KAAG,KAAA,CAAA,GAAA,UAAU,GAAAA,YAAA;IAAAE,QAAA,GAAAf,IAAA,CACpBgB,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,CAAC,GAAAA,QAAA;IAAAE,QAAA,GAAAjB,IAAA,CACPkB,GAAG;AAAHA,IAAAA,GAAG,GAAAD,QAAA,KAAG,KAAA,CAAA,GAAA,GAAG,GAAAA,QAAA;IACTE,MAAM,GAAAnB,IAAA,CAANmB,MAAM;AACHC,IAAAA,WAAW,GAAAC,wBAAA,CAAArB,IAAA,EAAAsB,SAAA,CAAA,CAAA;AAEd,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,YAAY,GAAG,CAACtB,IAAI,KAAKU,OAAO,KAAK,OAAO,IAAIA,OAAO,KAAK,UAAU,CAAC,GAAGA,OAAO,GAAGV,IAAI,CAAA;AAC9F,EAAA,IAAMuB,eAAe,GAAGb,OAAO,KAAK,OAAO,IAAIA,OAAO,KAAK,UAAU,GAAG,QAAQ,GAAGA,OAAO,CAAA;AAC1F,EAAA,IAAMc,EAAE,GAAGC,KAAK,CAAA,EAAA,CAAAC,MAAA,CAAIJ,YAAY,EAAA,GAAA,CAAA,CAAAI,MAAA,CAAIH,eAAe,CAAE,CAAC,CAAA;AAEtD,EAAA,IAAI,IAAO,EAAE;AACX,IAAA,IAAID,YAAY,KAAK,OAAO,IAAIpB,eAAe,EAAE;AAC/CyB,MAAAA,eAAe,CAAC;AACdC,QAAAA,UAAU,EAAE,aAAa;QACzBC,OAAO,EAAA,mEAAA;AACT,OAAC,CAAC,CAAA;AACJ,KAAA;AAEA,IAAA,IAAIN,eAAe,KAAK,UAAU,IAAIrB,eAAe,EAAE;AACrDyB,MAAAA,eAAe,CAAC;AACdC,QAAAA,UAAU,EAAE,aAAa;QACzBC,OAAO,EAAA,4DAAA;AACT,OAAC,CAAC,CAAA;AACJ,KAAA;AAEA,IAAA,IAAIN,eAAe,KAAK,QAAQ,IAAI/B,IAAI,KAAK,OAAO,EAAE;AACpDmC,MAAAA,eAAe,CAAC;AACdC,QAAAA,UAAU,EAAE,aAAa;QACzBC,OAAO,EAAA,wDAAA;AACT,OAAC,CAAC,CAAA;AACJ,KAAA;IAEA,IAAI7B,IAAI,KAAKU,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,OAAO,CAAC,EAAE;AAC3DiB,MAAAA,eAAe,CAAC;AACdC,QAAAA,UAAU,EAAE,aAAa;QACzBC,OAAO,EAAA,wDAAA,CAAAH,MAAA,CAA2D1B,IAAI,EAAA,IAAA,CAAA;AACxE,OAAC,CAAC,CAAA;AACJ,KAAA;AACF,GAAA;AAEA,EAAA,IAAM8B,uBAAuB,GAAGT,KAAK,CAACU,MAAM,CAACC,QAAQ,CAACC,UAAU,CAACC,OAAO,CACrEC,MAAyC,CAAA;EAC5C,IAAMC,qBAAqB,GAAGrC,KAAK,GAC/BsB,KAAK,CAACU,MAAM,CAACC,QAAQ,CAACC,UAAU,CAAClC,KAAK,CAAC,CAACsC,OAAO,GAC/ChB,KAAK,CAACU,MAAM,CAACO,OAAO,CAACL,UAAU,CAACM,OAAO,CAACF,OAAO,CAAA;AACnD,EAAA,IAAMG,QAAQ,GAAGrC,KAAK,IAAI,CAAAN,CAAAA,WAAA,GAAAM,KAAK,CAACsC,IAAI,EAAE,cAAA5C,WAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAZA,WAAA,CAAc6C,MAAM,IAAG,CAAC,CAAA;AAClD,EAAA,IAAMC,OAAO,GAAGrB,YAAY,KAAK,OAAO,CAAA;AACxC,EAAA,IAAMsB,UAAU,GAAGrB,eAAe,KAAK,UAAU,CAAA;EACjD,IAAMsB,aAAa,GAAGC,KAAK,CAACtC,KAAK,EAAEI,GAAG,EAAEE,GAAG,CAAC,CAAA;AAC5C,EAAA,IAAMiC,uBAAuB,GAAGC,IAAI,CAACC,KAAK,CAAE,CAACJ,aAAa,GAAGjC,GAAG,IAAI,GAAG,IAAKE,GAAG,GAAGF,GAAG,CAAC,CAAC,CAAA;EACvF,IAAMsC,oBAAoB,GAAG7C,cAAc,IAAI,CAACsC,OAAO,IAAI,CAACzC,eAAe,CAAA;AAC3E,EAAA,IAAMiD,kBAGL,GAAG;AACFC,IAAAA,IAAI,EAAE,aAAa;AACnBjD,IAAAA,KAAK,EAAEL,kBAAkB,KAAA,IAAA,IAAlBA,kBAAkB,KAAlBA,KAAAA,CAAAA,GAAAA,kBAAkB,GAAIK,KAAK;AAClCkD,IAAAA,QAAQ,EAAEN,uBAAuB;AACjCO,IAAAA,SAAS,EAAA5B,EAAAA,CAAAA,MAAA,CAAKqB,uBAAuB,EAAG,GAAA,CAAA;AACxCQ,IAAAA,QAAQ,EAAE3C,GAAG;AACb4C,IAAAA,QAAQ,EAAE1C,GAAAA;GACX,CAAA;AAED,EAAA,IAAI6B,OAAO,EAAE;IACXQ,kBAAkB,CAACC,IAAI,GAAG,OAAO,CAAA;IACjCD,kBAAkB,CAACE,QAAQ,GAAGR,aAAa,CAAA;AAC3CM,IAAAA,kBAAkB,CAACG,SAAS,GAAA,EAAA,CAAA5B,MAAA,CAAMmB,aAAa,CAAE,CAAA;AACnD,GAAA;AAEA,EAAA,IAAI3C,eAAe,EAAE;IACnBiD,kBAAkB,CAACE,QAAQ,GAAGI,SAAS,CAAA;IACvCN,kBAAkB,CAACI,QAAQ,GAAGE,SAAS,CAAA;IACvCN,kBAAkB,CAACK,QAAQ,GAAGC,SAAS,CAAA;IACvCN,kBAAkB,CAACG,SAAS,GAAGG,SAAS,CAAA;AAC1C,GAAA;AAEA,EAAA,oBACEC,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA,EAAA,EACFC,cAAc,CAAC7C,WAAW,CAAC,CAAA,EAC3B8C,aAAa,CAAC;IAAEC,IAAI,EAAEC,aAAa,CAACrE,WAAW;AAAEoB,IAAAA,MAAM,EAANA,MAAAA;AAAO,GAAC,CAAC,CAAA,EAAA,EAAA,EAAA;IAAAkD,QAAA,eAE9DC,IAAA,CAACP,OAAO,EAAA;AAACQ,MAAAA,OAAO,EAAC,MAAM;AAACC,MAAAA,aAAa,EAAC,QAAQ;AAACC,MAAAA,KAAK,EAAC,MAAM;AAAAJ,MAAAA,QAAA,GACxD,CAACrB,UAAU,gBACVsB,IAAA,CAACP,OAAO,EAAA;AACNQ,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,aAAa,EAAC,KAAK;AACnBE,QAAAA,cAAc,EAAE9B,QAAQ,GAAG,eAAe,GAAG,UAAW;AAAAyB,QAAAA,QAAA,EAEvDzB,CAAAA,QAAQ,gBACPkB,GAAA,CAACa,IAAI,EAAA;AAACC,UAAAA,EAAE,EAAC,OAAO;AAAC9D,UAAAA,OAAO,EAAC,MAAM;AAAClB,UAAAA,IAAI,EAAC,OAAO;AAACO,UAAAA,KAAK,EAAC,0BAA0B;AAAAkE,UAAAA,QAAA,EAC1E9D,KAAAA;SACG,CAAC,GACL,IAAI,EACP+C,oBAAoB,gBACnBQ,GAAA,CAACC,OAAO,EAAA;AAACc,UAAAA,YAAY,EAAC,WAAW;UAAAR,QAAA,eAC/BP,GAAA,CAACa,IAAI,EAAA;AACH7D,YAAAA,OAAO,EAAC,MAAM;AACdlB,YAAAA,IAAI,EAAC,OAAO;AACZO,YAAAA,KAAK,EAAC,0BAA0B;YAAAkE,QAAA,EAAA,EAAA,CAAAvC,MAAA,CAC7BqB,uBAAuB,EAAA,GAAA,CAAA;WAAU,CAAA;SAC/B,CAAC,GACR,IAAI,CAAA;OACD,CAAC,GACR,IAAI,eAERW,GAAA,CAACC,OAAO,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACNpC,QAAAA,EAAE,EAAEA,EAAAA;AAAG,OAAA,EACHkD,cAAc,CAAC;QACjBtB,IAAI,EAAED,kBAAkB,CAACC,IAAI;QAC7BjD,KAAK,EAAEgD,kBAAkB,CAAChD,KAAK;QAC/BkD,QAAQ,EAAEF,kBAAkB,CAACE,QAAQ;QACrCC,SAAS,EAAEH,kBAAkB,CAACG,SAAS;QACvCC,QAAQ,EAAEJ,kBAAkB,CAACI,QAAQ;QACrCC,QAAQ,EAAEL,kBAAkB,CAACK,QAAAA;AAC/B,OAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAS,QAAAA,QAAA,EAEDrB,UAAU,gBACTc,GAAA,CAACiB,yBAAyB,EAAA;AACxBnF,UAAAA,IAAI,EAAEA,IAAK;AACXW,UAAAA,KAAK,EAAEA,KAAM;AACbyE,UAAAA,eAAe,EAAE7B,uBAAwB;AACzCJ,UAAAA,OAAO,EAAEA,OAAQ;AACjBtC,UAAAA,cAAc,EAAE6C,oBAAqB;AACrC2B,UAAAA,eAAe,EAAE/C,uBAAkC;AACnDgD,UAAAA,SAAS,EAAE1C,qBAAsB;AACjC2C,UAAAA,mBAAmB,EAAC,mBAAmB;AACvCC,UAAAA,kBAAkB,EAAC,mBAAmB;AACtCC,UAAAA,gBAAgB,EAAC,YAAY;AAC7BC,UAAAA,YAAY,EAAC,2BAAA;AAA2B,SACzC,CAAC,gBAEFxB,GAAA,CAACC,OAAO,EAAA;AACNkB,UAAAA,eAAe,EAAE/C,uBAAwB;AACzCqD,UAAAA,MAAM,EAAEC,QAAQ,CAAC9F,iBAAiB,CAACE,IAAI,CAAC,CAAE;AAC1C6F,UAAAA,QAAQ,EAAC,QAAQ;AACjBC,UAAAA,QAAQ,EAAC,UAAU;UAAArB,QAAA,eAEnBP,GAAA,CAAC6B,iBAAiB,EAAA;AAChBV,YAAAA,eAAe,EAAEzC,qBAAsB;AACvCoD,YAAAA,QAAQ,EAAEzC,uBAAwB;AAClCiC,YAAAA,kBAAkB,EAAC,mBAAmB;AACtCD,YAAAA,mBAAmB,EAAC,mBAAmB;AACvCU,YAAAA,2BAA2B,EAAC,mBAAmB;AAC/CR,YAAAA,gBAAgB,EAAC,YAAY;AAC7BC,YAAAA,YAAY,EAAC,2BAA2B;AACxClF,YAAAA,IAAI,EAAEsB,YAAa;AACnBpB,YAAAA,eAAe,EAAEA,eAAAA;WAClB,CAAA;SACM,CAAA;AACV,OAAA,CACM,CAAC,CAAA;KACH,CAAA;AAAC,GAAA,CACH,CAAC,CAAA;AAEd;;;;"}

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

@@ -46,11 +46,11 @@ var IndeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithIndeterminateAnimat
     pulseMotionDuration = _ref4.pulseMotionDuration,
     pulseMotionDelay = _ref4.pulseMotionDelay,
     motionEasing = _ref4.motionEasing,
-    variant = _ref4.variant;
+    type = _ref4.type;
   var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
   var easing = castWebType(getIn(theme.motion, motionEasing));
   var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
-  return variant === 'progress' ? getPulseAnimationStyles({
+  return type === 'progress' ? getPulseAnimationStyles({
     duration: duration,
     easing: easing,
     delay: delay
@@ -89,11 +89,11 @@ var DeterminatePulseAnimation = /*#__PURE__*/styled(BoxWithProgressFillTransitio
     pulseMotionDuration = _ref7.pulseMotionDuration,
     pulseMotionDelay = _ref7.pulseMotionDelay,
     motionEasing = _ref7.motionEasing,
-    variant = _ref7.variant;
+    type = _ref7.type;
   var duration = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDuration)));
   var easing = castWebType(getIn(theme.motion, motionEasing));
   var delay = castWebType(makeMotionTime(getIn(theme.motion, pulseMotionDelay)));
-  return variant === 'progress' ? getPulseAnimationStyles({
+  return type === 'progress' ? getPulseAnimationStyles({
     duration: duration,
     easing: easing,
     delay: delay
@@ -107,7 +107,7 @@ var ProgressBarFilled = function ProgressBarFilled(_ref8) {
     pulseMotionDelay = _ref8.pulseMotionDelay,
     pulseMotionDuration = _ref8.pulseMotionDuration,
     indeterminateMotionDuration = _ref8.indeterminateMotionDuration,
-    variant = _ref8.variant,
+    type = _ref8.type,
     isIndeterminate = _ref8.isIndeterminate;
   var ProgressBarFilledContainer = isIndeterminate ? IndeterminateFilledContainer : DeterminateFilledContainer;
   var ProgressBarPulseAnimation = isIndeterminate ? IndeterminatePulseAnimation : DeterminatePulseAnimation;
@@ -119,7 +119,7 @@ var ProgressBarFilled = function ProgressBarFilled(_ref8) {
     children: /*#__PURE__*/jsx(ProgressBarPulseAnimation, {
       fillMotionDuration: fillMotionDuration,
       motionEasing: motionEasing,
-      variant: variant,
+      type: type,
       pulseMotionDelay: pulseMotionDelay,
       pulseMotionDuration: pulseMotionDuration
     })