@dynatrace/strato-components 1.6.2 → 1.7.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (216) hide show
  1. package/buttons/button/Button.css +16 -16
  2. package/buttons/button/Button.js +1 -1
  3. package/buttons/button/Button.sty.d.ts +1 -1
  4. package/buttons/button/Button.sty.js +4 -4
  5. package/buttons/intent-button/IntentButton.js +1 -1
  6. package/content/progress/ProgressBar.css +71 -71
  7. package/content/progress/ProgressBar.sty.d.ts +2 -2
  8. package/content/progress/ProgressBar.sty.js +5 -5
  9. package/content/progress/ProgressBarIcon.css +2 -2
  10. package/content/progress/ProgressBarIcon.sty.js +1 -1
  11. package/content/progress/ProgressBarLabel.css +3 -3
  12. package/content/progress/ProgressBarLabel.sty.js +1 -1
  13. package/content/progress/ProgressBarValue.css +5 -5
  14. package/content/progress/ProgressBarValue.sty.js +1 -1
  15. package/content/progress/ProgressCircle.css +40 -40
  16. package/content/progress/ProgressCircle.sty.js +5 -5
  17. package/content/skeleton/Skeleton.css +6 -6
  18. package/content/skeleton/Skeleton.sty.js +1 -1
  19. package/core/index.d.ts +0 -4
  20. package/core/index.js +0 -8
  21. package/core/styles/focusRing.css +66 -66
  22. package/core/styles/focusRing.sty.d.ts +2 -2
  23. package/core/styles/focusRing.sty.js +2 -2
  24. package/core/utils/colorUtils.css +60 -60
  25. package/core/utils/colorUtils.sty.d.ts +3 -3
  26. package/core/utils/colorUtils.sty.js +2 -2
  27. package/core/utils/isBrowser.js +1 -1
  28. package/esm/buttons/button/Button.css +16 -16
  29. package/esm/buttons/button/Button.js +1 -1
  30. package/esm/buttons/button/Button.js.map +2 -2
  31. package/esm/buttons/button/Button.sty.js +4 -4
  32. package/esm/buttons/button/Button.sty.js.map +1 -1
  33. package/esm/buttons/intent-button/IntentButton.js +1 -1
  34. package/esm/buttons/intent-button/IntentButton.js.map +1 -1
  35. package/esm/content/progress/ProgressBar.css +71 -71
  36. package/esm/content/progress/ProgressBar.js.map +2 -2
  37. package/esm/content/progress/ProgressBar.sty.js +5 -5
  38. package/esm/content/progress/ProgressBar.sty.js.map +1 -1
  39. package/esm/content/progress/ProgressBarIcon.css +2 -2
  40. package/esm/content/progress/ProgressBarIcon.js.map +2 -2
  41. package/esm/content/progress/ProgressBarIcon.sty.js +1 -1
  42. package/esm/content/progress/ProgressBarIcon.sty.js.map +1 -1
  43. package/esm/content/progress/ProgressBarLabel.css +3 -3
  44. package/esm/content/progress/ProgressBarLabel.js.map +2 -2
  45. package/esm/content/progress/ProgressBarLabel.sty.js +1 -1
  46. package/esm/content/progress/ProgressBarLabel.sty.js.map +1 -1
  47. package/esm/content/progress/ProgressBarValue.css +5 -5
  48. package/esm/content/progress/ProgressBarValue.js.map +2 -2
  49. package/esm/content/progress/ProgressBarValue.sty.js +1 -1
  50. package/esm/content/progress/ProgressBarValue.sty.js.map +1 -1
  51. package/esm/content/progress/ProgressCircle.css +40 -40
  52. package/esm/content/progress/ProgressCircle.js.map +2 -2
  53. package/esm/content/progress/ProgressCircle.sty.js +5 -5
  54. package/esm/content/progress/ProgressCircle.sty.js.map +1 -1
  55. package/esm/content/progress/contexts/SharedProgressBarPropsContext.js.map +2 -2
  56. package/esm/content/skeleton/Skeleton.css +6 -6
  57. package/esm/content/skeleton/Skeleton.sty.js +1 -1
  58. package/esm/content/skeleton/Skeleton.sty.js.map +1 -1
  59. package/esm/core/index.js +0 -8
  60. package/esm/core/index.js.map +2 -2
  61. package/esm/core/styles/focusRing.css +66 -66
  62. package/esm/core/styles/focusRing.sty.js +2 -2
  63. package/esm/core/styles/focusRing.sty.js.map +1 -1
  64. package/esm/core/utils/colorUtils.css +60 -60
  65. package/esm/core/utils/colorUtils.sty.js +2 -2
  66. package/esm/core/utils/colorUtils.sty.js.map +1 -1
  67. package/esm/core/utils/isBrowser.js +1 -1
  68. package/esm/core/utils/isBrowser.js.map +1 -1
  69. package/esm/core/utils/merge-props.js.map +2 -2
  70. package/esm/layouts/container/Container.css +4 -4
  71. package/esm/layouts/container/Container.sty.js +1 -1
  72. package/esm/layouts/container/Container.sty.js.map +1 -1
  73. package/esm/layouts/divider/Divider.css +6 -6
  74. package/esm/layouts/divider/Divider.sty.js +1 -1
  75. package/esm/layouts/divider/Divider.sty.js.map +1 -1
  76. package/esm/layouts/surface/Surface.css +39 -39
  77. package/esm/layouts/surface/Surface.sty.js +2 -2
  78. package/esm/layouts/surface/Surface.sty.js.map +1 -1
  79. package/esm/layouts/surface/variables.sty.js +1 -1
  80. package/esm/layouts/surface/variables.sty.js.map +1 -1
  81. package/esm/styles/colorUtils.css +60 -60
  82. package/esm/styles/colorUtils.sty.js +2 -2
  83. package/esm/styles/colorUtils.sty.js.map +1 -1
  84. package/esm/styles/container.css +47 -47
  85. package/esm/styles/container.sty.js +2 -2
  86. package/esm/styles/container.sty.js.map +1 -1
  87. package/esm/styles/ellipsis.css +1 -1
  88. package/esm/styles/ellipsis.sty.js +1 -1
  89. package/esm/styles/ellipsis.sty.js.map +1 -1
  90. package/esm/styles/field.css +153 -153
  91. package/esm/styles/field.sty.js +2 -2
  92. package/esm/styles/field.sty.js.map +1 -1
  93. package/esm/styles/sprinkles.css +262 -262
  94. package/esm/styles/sprinkles.sty.js +1 -1
  95. package/esm/styles/sprinkles.sty.js.map +1 -1
  96. package/esm/styles/textStyle.css +8 -8
  97. package/esm/styles/textStyle.sty.js +1 -1
  98. package/esm/styles/textStyle.sty.js.map +1 -1
  99. package/esm/typography/block-quote/Blockquote.css +2 -2
  100. package/esm/typography/block-quote/Blockquote.sty.js +1 -1
  101. package/esm/typography/block-quote/Blockquote.sty.js.map +1 -1
  102. package/esm/typography/code/Code.css +1 -1
  103. package/esm/typography/code/Code.sty.js +1 -1
  104. package/esm/typography/code/Code.sty.js.map +1 -1
  105. package/esm/typography/emphasis/Emphasis.css +1 -1
  106. package/esm/typography/emphasis/Emphasis.sty.js +1 -1
  107. package/esm/typography/emphasis/Emphasis.sty.js.map +1 -1
  108. package/esm/typography/external-link/ExternalLink.css +6 -6
  109. package/esm/typography/external-link/ExternalLink.sty.js +1 -1
  110. package/esm/typography/external-link/ExternalLink.sty.js.map +1 -1
  111. package/esm/typography/heading/Heading.css +7 -7
  112. package/esm/typography/heading/Heading.sty.js +1 -1
  113. package/esm/typography/heading/Heading.sty.js.map +1 -1
  114. package/esm/typography/highlight/Highlight.css +5 -1
  115. package/esm/typography/highlight/Highlight.js +7 -16
  116. package/esm/typography/highlight/Highlight.js.map +2 -2
  117. package/esm/typography/highlight/Highlight.sty.js +4 -2
  118. package/esm/typography/highlight/Highlight.sty.js.map +2 -2
  119. package/esm/typography/index.js.map +1 -1
  120. package/esm/typography/link/Link.css +4 -4
  121. package/esm/typography/link/Link.sty.js +1 -1
  122. package/esm/typography/link/Link.sty.js.map +1 -1
  123. package/esm/typography/list/List.css +4 -4
  124. package/esm/typography/list/List.sty.js +2 -2
  125. package/esm/typography/list/List.sty.js.map +1 -1
  126. package/esm/typography/paragraph/Paragraph.css +3 -3
  127. package/esm/typography/paragraph/Paragraph.sty.js +1 -1
  128. package/esm/typography/paragraph/Paragraph.sty.js.map +1 -1
  129. package/esm/typography/strikethrough/Strikethrough.css +1 -1
  130. package/esm/typography/strikethrough/Strikethrough.sty.js +1 -1
  131. package/esm/typography/strikethrough/Strikethrough.sty.js.map +1 -1
  132. package/esm/typography/strong/Strong.css +1 -1
  133. package/esm/typography/strong/Strong.sty.js +1 -1
  134. package/esm/typography/strong/Strong.sty.js.map +1 -1
  135. package/esm/typography/text/Text.css +3 -3
  136. package/esm/typography/text/Text.sty.js +1 -1
  137. package/esm/typography/text/Text.sty.js.map +1 -1
  138. package/esm/typography/text-ellipsis/TextEllipsis.css +6 -6
  139. package/esm/typography/text-ellipsis/TextEllipsis.js +1 -9
  140. package/esm/typography/text-ellipsis/TextEllipsis.js.map +2 -2
  141. package/esm/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
  142. package/esm/typography/text-ellipsis/TextEllipsis.sty.js.map +1 -1
  143. package/esm/typography/utils.js +16 -4
  144. package/esm/typography/utils.js.map +2 -2
  145. package/layouts/container/Container.css +4 -4
  146. package/layouts/container/Container.sty.js +1 -1
  147. package/layouts/divider/Divider.css +6 -6
  148. package/layouts/divider/Divider.sty.js +1 -1
  149. package/layouts/surface/Surface.css +39 -39
  150. package/layouts/surface/Surface.sty.js +2 -2
  151. package/layouts/surface/variables.sty.d.ts +1 -1
  152. package/layouts/surface/variables.sty.js +1 -1
  153. package/package.json +3 -3
  154. package/styles/colorUtils.css +60 -60
  155. package/styles/colorUtils.sty.d.ts +3 -3
  156. package/styles/colorUtils.sty.js +2 -2
  157. package/styles/container.css +47 -47
  158. package/styles/container.sty.d.ts +3 -3
  159. package/styles/container.sty.js +2 -2
  160. package/styles/ellipsis.css +1 -1
  161. package/styles/ellipsis.sty.js +1 -1
  162. package/styles/field.css +153 -153
  163. package/styles/field.sty.d.ts +4 -4
  164. package/styles/field.sty.js +2 -2
  165. package/styles/sprinkles.css +262 -262
  166. package/styles/sprinkles.sty.js +1 -1
  167. package/styles/textStyle.css +8 -8
  168. package/styles/textStyle.sty.js +1 -1
  169. package/typography/block-quote/Blockquote.css +2 -2
  170. package/typography/block-quote/Blockquote.sty.js +1 -1
  171. package/typography/code/Code.css +1 -1
  172. package/typography/code/Code.sty.js +1 -1
  173. package/typography/emphasis/Emphasis.css +1 -1
  174. package/typography/emphasis/Emphasis.sty.js +1 -1
  175. package/typography/external-link/ExternalLink.css +6 -6
  176. package/typography/external-link/ExternalLink.sty.js +1 -1
  177. package/typography/heading/Heading.css +7 -7
  178. package/typography/heading/Heading.sty.js +1 -1
  179. package/typography/highlight/Highlight.css +5 -1
  180. package/typography/highlight/Highlight.js +7 -16
  181. package/typography/highlight/Highlight.sty.d.ts +2 -1
  182. package/typography/highlight/Highlight.sty.js +4 -2
  183. package/typography/index.d.ts +1 -1
  184. package/typography/link/Link.css +4 -4
  185. package/typography/link/Link.sty.js +1 -1
  186. package/typography/list/List.css +4 -4
  187. package/typography/list/List.sty.js +2 -2
  188. package/typography/paragraph/Paragraph.css +3 -3
  189. package/typography/paragraph/Paragraph.sty.js +1 -1
  190. package/typography/strikethrough/Strikethrough.css +1 -1
  191. package/typography/strikethrough/Strikethrough.sty.js +1 -1
  192. package/typography/strong/Strong.css +1 -1
  193. package/typography/strong/Strong.sty.js +1 -1
  194. package/typography/text/Text.css +3 -3
  195. package/typography/text/Text.sty.js +1 -1
  196. package/typography/text-ellipsis/TextEllipsis.css +6 -6
  197. package/typography/text-ellipsis/TextEllipsis.d.ts +2 -2
  198. package/typography/text-ellipsis/TextEllipsis.js +1 -9
  199. package/typography/text-ellipsis/TextEllipsis.sty.js +2 -2
  200. package/typography/utils.js +16 -4
  201. package/core/hooks/useId.d.ts +0 -12
  202. package/core/hooks/useId.js +0 -33
  203. package/core/utils/_is-string-children.d.ts +0 -6
  204. package/core/utils/_is-string-children.js +0 -35
  205. package/core/utils/seed-random.d.ts +0 -5
  206. package/core/utils/seed-random.js +0 -35
  207. package/core/utils/uuidv4.d.ts +0 -5
  208. package/core/utils/uuidv4.js +0 -32
  209. package/esm/core/hooks/useId.js +0 -14
  210. package/esm/core/hooks/useId.js.map +0 -7
  211. package/esm/core/utils/_is-string-children.js +0 -16
  212. package/esm/core/utils/_is-string-children.js.map +0 -7
  213. package/esm/core/utils/seed-random.js +0 -16
  214. package/esm/core/utils/seed-random.js.map +0 -7
  215. package/esm/core/utils/uuidv4.js +0 -13
  216. package/esm/core/utils/uuidv4.js.map +0 -7
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/buttons/intent-button/IntentButton.tsx"],
4
- "sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { OpenWithIcon } from '@dynatrace/strato-icons';\nimport { type IntentPayload } from '@dynatrace-sdk/navigation';\n\nimport { useIntentButton } from './useIntentButton.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { Button, type ButtonOwnProps } from '../button/Button.js';\n\n//#region Typings\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface IntentButtonPropsBase\n extends Omit<ButtonOwnProps, 'loading' | 'type'>,\n AriaLabelingProps,\n DOMProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** Intent payload passed between apps.*/\n payload: IntentPayload;\n\n /** Intended for setting a custom button label. When nothing is set, no label is shown. */\n children?: ReactNode;\n}\n\n/**\n * Merge own props with ID props.\n * Props for recommending an app to receive the intent. Either both properties or none of them needs to be specified.\n * @public\n */\nexport type IntentButtonProps = IntentButtonPropsBase &\n (\n | {\n appId?: never;\n intentId?: never;\n }\n | {\n /**\n * ID of the app that will be launched to handle the intent.\n */\n appId: string;\n\n /**\n * ID of the action that will be passed to the app.\n */\n intentId: string;\n }\n );\n\n//#endregion\n\n/**\n * The `IntentButton` is a dedicated button component for sending\n * {@link https://developer.dynatrace.com/develop/intents/ | intents}.\n * It takes care of opening the intent dialog. An `IntentButton` only works\n * in the AppShell context.\n * @public\n */\nexport const IntentButton = /* @__PURE__ */ forwardRef<\n HTMLAnchorElement,\n IntentButtonProps\n>((props, forwardedRef) => {\n const intl = useIntl();\n const {\n children,\n payload,\n appId,\n intentId,\n disabled,\n onClick: onClickProp,\n 'aria-label': ariaLabelProp,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n // eslint-disable-next-line deprecation/deprecation\n readOnly,\n ...remainingProps\n }: IntentButtonProps = props;\n\n let label = children;\n if (typeof label === 'string') {\n label = label.trim();\n }\n\n const ariaLabel =\n ariaLabelProp ||\n intl.formatMessage({\n description: 'Intent button open label',\n defaultMessage: 'Open with',\n id: 'JQOGuaGgqJObmSY1',\n });\n\n const intentButtonProps = useIntentButton(\n payload,\n appId,\n intentId,\n onClickProp,\n );\n\n // polymorph it back to a button in case it's disabled.\n // Keep the button focusable if disabled for better screen reader support.\n if (disabled) {\n return (\n <Button\n disabled\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line deprecated-jsx-props/deprecated-props\n readOnly={readOnly}\n {...remainingProps}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n }\n\n return (\n <Button\n as=\"a\"\n ref={forwardedRef}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel ?? label}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line deprecated-jsx-props/deprecated-props\n readOnly={readOnly}\n {...remainingProps}\n {...intentButtonProps}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n});\n\n(IntentButton as typeof IntentButton & { displayName: string }).displayName =\n 'IntentButton';\n"],
4
+ "sourcesContent": ["import { forwardRef, type ReactNode } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { OpenWithIcon } from '@dynatrace/strato-icons';\nimport { type IntentPayload } from '@dynatrace-sdk/navigation';\n\nimport { useIntentButton } from './useIntentButton.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { Button, type ButtonOwnProps } from '../button/Button.js';\n\n//#region Typings\n/**\n * Accepted properties for the Button.\n * @public\n */\nexport interface IntentButtonPropsBase\n extends Omit<ButtonOwnProps, 'loading' | 'type'>,\n AriaLabelingProps,\n DOMProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /** Intent payload passed between apps.*/\n payload: IntentPayload;\n\n /** Intended for setting a custom button label. When nothing is set, no label is shown. */\n children?: ReactNode;\n}\n\n/**\n * Merge own props with ID props.\n * Props for recommending an app to receive the intent. Either both properties or none of them needs to be specified.\n * @public\n */\nexport type IntentButtonProps = IntentButtonPropsBase &\n (\n | {\n appId?: never;\n intentId?: never;\n }\n | {\n /**\n * ID of the app that will be launched to handle the intent.\n */\n appId: string;\n\n /**\n * ID of the action that will be passed to the app.\n */\n intentId: string;\n }\n );\n\n//#endregion\n\n/**\n * The `IntentButton` is a dedicated button component for sending\n * {@link https://developer.dynatrace.com/develop/intents/ | intents}.\n * It takes care of opening the intent dialog. An `IntentButton` only works\n * in the AppShell context.\n * @public\n */\nexport const IntentButton = /* @__PURE__ */ forwardRef<\n HTMLAnchorElement,\n IntentButtonProps\n>((props, forwardedRef) => {\n const intl = useIntl();\n const {\n children,\n payload,\n appId,\n intentId,\n disabled,\n onClick: onClickProp,\n 'aria-label': ariaLabelProp,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly,\n ...remainingProps\n }: IntentButtonProps = props;\n\n let label = children;\n if (typeof label === 'string') {\n label = label.trim();\n }\n\n const ariaLabel =\n ariaLabelProp ||\n intl.formatMessage({\n description: 'Intent button open label',\n defaultMessage: 'Open with',\n id: 'JQOGuaGgqJObmSY1',\n });\n\n const intentButtonProps = useIntentButton(\n payload,\n appId,\n intentId,\n onClickProp,\n );\n\n // polymorph it back to a button in case it's disabled.\n // Keep the button focusable if disabled for better screen reader support.\n if (disabled) {\n return (\n <Button\n disabled\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly={readOnly}\n {...remainingProps}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n }\n\n return (\n <Button\n as=\"a\"\n ref={forwardedRef}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n aria-label={ariaLabel ?? label}\n className={consumerClassName}\n style={consumerStyle}\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n readOnly={readOnly}\n {...remainingProps}\n {...intentButtonProps}\n >\n {label}\n <Button.Suffix>\n <OpenWithIcon />\n </Button.Suffix>\n </Button>\n );\n});\n\n(IntentButton as typeof IntentButton & { displayName: string }).displayName =\n 'IntentButton';\n"],
5
5
  "mappings": "AAiHM,SAcI,KAdJ;AAjHN,SAAS,kBAAkC;AAC3C,SAAS,eAAe;AAExB,SAAS,oBAAoB;AAG7B,SAAS,uBAAuB;AAMhC,SAAS,cAAmC;AAsDrC,MAAM,eAA+B,2BAG1C,CAAC,OAAO,iBAAiB;AACzB,QAAM,OAAO,QAAQ;AACrB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,cAAc;AAAA,IACd,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,mBAAmB;AAAA,IACnB,oBAAoB;AAAA;AAAA,IAEpB;AAAA,IACA,GAAG;AAAA,EACL,IAAuB;AAEvB,MAAI,QAAQ;AACZ,MAAI,OAAO,UAAU,UAAU;AAC7B,YAAQ,MAAM,KAAK;AAAA,EACrB;AAEA,QAAM,YACJ,iBACA,KAAK,cAAc;AAAA,IACjB,aAAa;AAAA,IACb,gBAAgB;AAAA,IAChB,IAAI;AAAA,EACN,CAAC;AAEH,QAAM,oBAAoB;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF;AAIA,MAAI,UAAU;AACZ,WACE;AAAA,MAAC;AAAA;AAAA,QACC,UAAQ;AAAA,QACR,eAAa;AAAA,QACb,mBAAiB;AAAA,QACjB,oBAAkB;AAAA,QAClB,cAAY;AAAA,QACZ,WAAW;AAAA,QACX,OAAO;AAAA,QAEP;AAAA,QACC,GAAG;AAAA,QAEH;AAAA;AAAA,UACD,oBAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,KAAK;AAAA,MACL,eAAa;AAAA,MACb,mBAAiB;AAAA,MACjB,oBAAkB;AAAA,MAClB,cAAY,aAAa;AAAA,MACzB,WAAW;AAAA,MACX,OAAO;AAAA,MAEP;AAAA,MACC,GAAG;AAAA,MACH,GAAG;AAAA,MAEH;AAAA;AAAA,QACD,oBAAC,OAAO,QAAP,EACC,8BAAC,gBAAa,GAChB;AAAA;AAAA;AAAA,EACF;AAEJ,CAAC;AAEA,aAA+D,cAC9D;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,4 @@
1
- @keyframes _13n9uwh0-1-6-2 {
1
+ @keyframes _13n9uwh0-1-7-3 {
2
2
  0% {
3
3
  transform: translateX(-100%) scaleX(0);
4
4
  }
@@ -6,92 +6,92 @@
6
6
  transform: translateX(100%) scaleX(1.5);
7
7
  }
8
8
  }
9
- ._13n9uwh5-1-6-2 {
10
- color: var(--_13n9uwh1-1-6-2);
11
- }
12
- ._13n9uwhd-1-6-2 {
13
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
14
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
15
- --_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
16
- --_13n9uwh3-1-6-2: var(--dt-colors-border-primary-accent, #454cc9);
17
- }
18
- ._13n9uwhe-1-6-2 {
19
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
20
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
21
- --_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
22
- --_13n9uwh3-1-6-2: var(--dt-colors-border-success-accent, #2c6360);
23
- }
24
- ._13n9uwhf-1-6-2 {
25
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
26
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
27
- --_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
28
- --_13n9uwh3-1-6-2: var(--dt-colors-border-warning-accent, #805100);
29
- }
30
- ._13n9uwhg-1-6-2 {
31
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
32
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
33
- --_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
34
- --_13n9uwh3-1-6-2: var(--dt-colors-border-critical-accent, #b80031);
35
- }
36
- ._13n9uwhh-1-6-2 {
37
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
38
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-subdued, #545587);
39
- --_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
40
- --_13n9uwh3-1-6-2: var(--dt-colors-border-neutral-accent, #545587);
9
+ ._13n9uwh5-1-7-3 {
10
+ color: var(--_13n9uwh1-1-7-3);
11
+ }
12
+ ._13n9uwhd-1-7-3 {
13
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-default, #2b2a58);
14
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-subdued, #545587);
15
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
16
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-primary-accent, #454cc9);
17
+ }
18
+ ._13n9uwhe-1-7-3 {
19
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-default, #2b2a58);
20
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-subdued, #545587);
21
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
22
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-success-accent, #2c6360);
23
+ }
24
+ ._13n9uwhf-1-7-3 {
25
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-default, #2b2a58);
26
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-subdued, #545587);
27
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
28
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-warning-accent, #805100);
29
+ }
30
+ ._13n9uwhg-1-7-3 {
31
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-default, #2b2a58);
32
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-subdued, #545587);
33
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
34
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-critical-accent, #b80031);
35
+ }
36
+ ._13n9uwhh-1-7-3 {
37
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-default, #2b2a58);
38
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-subdued, #545587);
39
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
40
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-neutral-accent, #545587);
41
41
  color: var(--dt-colors-text-neutral-default, #2b2a58);
42
42
  }
43
- ._13n9uwhi-1-6-2 {
44
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
45
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
46
- --_13n9uwh2-1-6-2: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
47
- --_13n9uwh3-1-6-2: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
48
- }
49
- ._13n9uwhj-1-6-2 {
50
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
51
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
52
- --_13n9uwh2-1-6-2: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
53
- --_13n9uwh3-1-6-2: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
54
- }
55
- ._13n9uwhk-1-6-2 {
56
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
57
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
58
- --_13n9uwh2-1-6-2: var(--dt-colors-border-warning-on-accent-disabled, #27202533);
59
- --_13n9uwh3-1-6-2: var(--dt-colors-border-warning-on-accent-default, #272025);
60
- }
61
- ._13n9uwhl-1-6-2 {
62
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
63
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
64
- --_13n9uwh2-1-6-2: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
65
- --_13n9uwh3-1-6-2: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
66
- }
67
- ._13n9uwhm-1-6-2 {
68
- --_13n9uwh1-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
69
- --_13n9uwh4-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
70
- --_13n9uwh2-1-6-2: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
71
- --_13n9uwh3-1-6-2: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
72
- }
73
- ._13n9uwhn-1-6-2 {
43
+ ._13n9uwhi-1-7-3 {
44
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
45
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
46
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-primary-on-accent-disabled, #f4f4fb33);
47
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
48
+ }
49
+ ._13n9uwhj-1-7-3 {
50
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
51
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
52
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-success-on-accent-disabled, #f1f4f433);
53
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
54
+ }
55
+ ._13n9uwhk-1-7-3 {
56
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
57
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
58
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-warning-on-accent-disabled, #27202533);
59
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-warning-on-accent-default, #272025);
60
+ }
61
+ ._13n9uwhl-1-7-3 {
62
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
63
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
64
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-critical-on-accent-disabled, #f9f1f333);
65
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
66
+ }
67
+ ._13n9uwhm-1-7-3 {
68
+ --_13n9uwh1-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
69
+ --_13n9uwh4-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
70
+ --_13n9uwh2-1-7-3: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
71
+ --_13n9uwh3-1-7-3: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
72
+ }
73
+ ._13n9uwhn-1-7-3 {
74
74
  width: 100%;
75
75
  border-radius: var(--dt-borders-radius-container-subdued, 8px);
76
76
  overflow: hidden;
77
77
  position: relative;
78
- background: var(--_13n9uwh2-1-6-2);
78
+ background: var(--_13n9uwh2-1-7-3);
79
79
  }
80
- ._13n9uwho-1-6-2 {
80
+ ._13n9uwho-1-7-3 {
81
81
  height: 6px;
82
82
  }
83
- ._13n9uwhp-1-6-2 {
83
+ ._13n9uwhp-1-7-3 {
84
84
  height: 8px;
85
85
  }
86
- ._13n9uwhq-1-6-2 {
86
+ ._13n9uwhq-1-7-3 {
87
87
  height: 100%;
88
88
  transition-duration: var(--dt-timings-fast-default, 170ms);
89
89
  transition-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
90
- background-color: var(--_13n9uwh3-1-6-2);
90
+ background-color: var(--_13n9uwh3-1-7-3);
91
91
  }
92
- ._13n9uwhr-1-6-2 {
92
+ ._13n9uwhr-1-7-3 {
93
93
  width: 100%;
94
- animation-name: _13n9uwh0-1-6-2;
94
+ animation-name: _13n9uwh0-1-7-3;
95
95
  animation-duration: var(--dt-timings-slow-gentle, 800ms);
96
96
  animation-timing-function: var(--dt-easings-fast-in-slow-out, cubic-bezier(0.4, 0, 0.2, 1));
97
97
  animation-iteration-count: infinite;
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBar.tsx"],
4
- "sourcesContent": ["/* eslint-disable deprecation/deprecation */\n\nimport clsx from 'clsx';\nimport {\n type CSSProperties,\n forwardRef,\n useId,\n type ReactNode,\n Children,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { SharedProgressBarPropsContext } from './contexts/SharedProgressBarPropsContext.js';\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport {\n progressBarFillCSS,\n progressCSS,\n progressRoot,\n} from './ProgressBar.sty.js';\nimport { ProgressBarIcon } from './ProgressBarIcon.js';\nimport { ProgressBarLabel } from './ProgressBarLabel.js';\nimport { ProgressBarValue } from './ProgressBarValue.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { useContainerColoring } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\n\n/**\n * Accepted properties for ProgressBar.\n * @public\n */\nexport interface ProgressBarProps\n extends WithChildren,\n DOMProps,\n AriaLabelingProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * The current value.\n * @defaultValue 'indeterminate'\n */\n value?: number | 'indeterminate';\n /**\n * The minimum allowed value.\n * @defaultValue 0\n */\n min?: number;\n /**\n * The maximum allowed value.\n * @defaultValue 100\n */\n max?: number;\n /**\n * Controls the density of the rendering.\n * @defaultValue 'default'\n */\n density?: 'default' | 'condensed';\n /**\n * Controls the color of the progress.\n * @defaultValue 'primary' or a container's color.\n */\n color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n /**\n * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n * By default, the value will be given as a percentage. If the value is not a percentage, you should provide aria-valuetext.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n * @defaultValue the value of the progress as percentage.\n */\n 'aria-valuetext'?: string;\n}\n\ntype ProgressBarSlots = {\n value?: ReactNode;\n label?: ReactNode;\n icon?: ReactNode;\n};\n\nfunction getProgressBarSlots(children: ReactNode) {\n const slots: ProgressBarSlots = {\n value: null,\n label: null,\n icon: null,\n };\n\n Children.forEach(children, (child) => {\n if (isElement(child)) {\n switch (child.type) {\n case ProgressBarLabel:\n slots.label = child;\n break;\n case ProgressBarIcon:\n slots.icon = child;\n break;\n case ProgressBarValue:\n default:\n slots.value = child;\n break;\n }\n } else {\n if (!slots.value) {\n slots.value = child;\n }\n }\n });\n\n return slots;\n}\n\nconst _ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n (props, forwardedRef) => {\n const {\n value: originalValue,\n max = 100,\n min = 0,\n density = 'default',\n color,\n children,\n id: propId,\n 'aria-valuetext': ariaValuetext,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n }: ProgressBarProps = props;\n\n const containerColoring = useContainerColoring();\n\n // for the color in the ProgressCircle the fallback logic is a bit different - usually\n // the fallback from the container is \"neutral\" - but in the case of the progress circle the default\n // fallback color is \"primary\"\n const fallbackColor = containerColoring.default\n ? 'primary'\n : containerColoring.color;\n\n const derivedColor = color ?? fallbackColor;\n const onAccent = containerColoring.variant === 'accent';\n\n const slots = getProgressBarSlots(children);\n const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n originalValue,\n min,\n max,\n ariaValuetext,\n );\n const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n const generatedId = useId();\n const id = propId ?? generatedId;\n\n if (\n !slots.label &&\n !ariaLabelingProps['aria-label'] &&\n !ariaLabelingProps['aria-labelledby']\n ) {\n process.env.NODE_ENV === 'development' &&\n // eslint-disable-next-line no-console\n console.warn(\n 'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n );\n }\n\n const progressStyles: CSSProperties = {};\n if (!isIndeterminate && value !== undefined) {\n const percentage = (value - min) / (max - min);\n progressStyles['width'] = `${Math.round(percentage * 100)}%`;\n }\n\n return (\n <SharedProgressBarPropsContext.Provider value={{ id, density }}>\n <Flex\n flexDirection=\"column\"\n gap={6}\n width=\"100%\"\n className={clsx(\n containerColorsCSS({\n color: derivedColor,\n variant: containerColoring.variant,\n }),\n\n progressRoot({\n onAccent,\n color: derivedColor,\n }),\n consumerClassName,\n )}\n style={consumerStyle}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n ref={forwardedRef}\n {...forwardProps}\n >\n <Flex justifyContent=\"space-between\" gap={8}>\n {density === 'condensed' ? (\n <Flex\n justifyContent=\"space-between\"\n alignItems=\"flex-end\"\n flex={1}\n gap={16}\n minWidth={0}\n >\n {slots.label}\n {slots.value}\n </Flex>\n ) : (\n slots.label\n )}\n {slots.icon}\n </Flex>\n <div\n className={progressCSS({\n size: density,\n })}\n id={id}\n {...progressAriaProps}\n {...ariaLabelingProps}\n >\n <div\n className={clsx(\n progressBarFillCSS({\n indeterminate: isIndeterminate,\n }),\n )}\n style={progressStyles}\n />\n </div>\n {density === 'default' && slots.value}\n </Flex>\n </SharedProgressBarPropsContext.Provider>\n );\n },\n);\n\n(_ProgressBar as typeof _ProgressBar & { displayName: string }).displayName =\n 'ProgressBar';\n\n/**\n * Use the `ProgressBar` component to show your users that a system operation such as downloading, uploading, or processing is progressing.\n * The `ProgressBar` can be used to visualize determinate or indeterminate progress.\n * @public\n */\nexport const ProgressBar = Object.assign(_ProgressBar, {\n Value: ProgressBarValue,\n Label: ProgressBarLabel,\n Icon: ProgressBarIcon,\n});\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport {\n type CSSProperties,\n forwardRef,\n useId,\n type ReactNode,\n Children,\n} from 'react';\nimport { isElement } from 'react-is';\n\nimport { SharedProgressBarPropsContext } from './contexts/SharedProgressBarPropsContext.js';\nimport { useProgressAriaProps } from './hooks/useProgressAriaProps.js';\nimport {\n progressBarFillCSS,\n progressCSS,\n progressRoot,\n} from './ProgressBar.sty.js';\nimport { ProgressBarIcon } from './ProgressBarIcon.js';\nimport { ProgressBarLabel } from './ProgressBarLabel.js';\nimport { ProgressBarValue } from './ProgressBarValue.js';\nimport { useAriaLabelingProps } from '../../core/hooks/useAriaLabelingProps.js';\nimport { useSafeForwardProps } from '../../core/hooks/useSafeForwardProps.js';\nimport { type AriaLabelingProps } from '../../core/types/a11y-props.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type DOMProps } from '../../core/types/dom.js';\nimport { type MaskingProps } from '../../core/types/masking-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { useContainerColoring } from '../../layouts/container/Container.js';\nimport { Flex } from '../../layouts/flex/Flex.js';\nimport { containerColorsCSS } from '../../styles/container.sty.js';\n\n/**\n * Accepted properties for ProgressBar.\n * @public\n */\nexport interface ProgressBarProps\n extends WithChildren,\n DOMProps,\n AriaLabelingProps,\n StylingProps,\n DataTestId,\n MaskingProps {\n /**\n * The current value.\n * @defaultValue 'indeterminate'\n */\n value?: number | 'indeterminate';\n /**\n * The minimum allowed value.\n * @defaultValue 0\n */\n min?: number;\n /**\n * The maximum allowed value.\n * @defaultValue 100\n */\n max?: number;\n /**\n * Controls the density of the rendering.\n * @defaultValue 'default'\n */\n density?: 'default' | 'condensed';\n /**\n * Controls the color of the progress.\n * @defaultValue 'primary' or a container's color.\n */\n color?: 'neutral' | 'primary' | 'success' | 'warning' | 'critical';\n /**\n * The aria-valuetext attribute defines the human-readable text alternative of aria-valuenow for a range widget.\n * By default, the value will be given as a percentage. If the value is not a percentage, you should provide aria-valuetext.\n * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-valuetext\n * @defaultValue the value of the progress as percentage.\n */\n 'aria-valuetext'?: string;\n}\n\ntype ProgressBarSlots = {\n value?: ReactNode;\n label?: ReactNode;\n icon?: ReactNode;\n};\n\nfunction getProgressBarSlots(children: ReactNode) {\n const slots: ProgressBarSlots = {\n value: null,\n label: null,\n icon: null,\n };\n\n Children.forEach(children, (child) => {\n if (isElement(child)) {\n switch (child.type) {\n case ProgressBarLabel:\n slots.label = child;\n break;\n case ProgressBarIcon:\n slots.icon = child;\n break;\n case ProgressBarValue:\n default:\n slots.value = child;\n break;\n }\n } else {\n if (!slots.value) {\n slots.value = child;\n }\n }\n });\n\n return slots;\n}\n\nconst _ProgressBar = forwardRef<HTMLDivElement, ProgressBarProps>(\n (props, forwardedRef) => {\n const {\n value: originalValue,\n max = 100,\n min = 0,\n density = 'default',\n color,\n children,\n id: propId,\n 'aria-valuetext': ariaValuetext,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n 'data-dtrum-mask': dataDtrumMask,\n 'data-dtrum-allow': dataDtrumAllow,\n ...remainingProps\n }: ProgressBarProps = props;\n\n const containerColoring = useContainerColoring();\n\n // for the color in the ProgressCircle the fallback logic is a bit different - usually\n // the fallback from the container is \"neutral\" - but in the case of the progress circle the default\n // fallback color is \"primary\"\n const fallbackColor = containerColoring.default\n ? 'primary'\n : containerColoring.color;\n\n const derivedColor = color ?? fallbackColor;\n const onAccent = containerColoring.variant === 'accent';\n\n const slots = getProgressBarSlots(children);\n const { value, isIndeterminate, progressAriaProps } = useProgressAriaProps(\n originalValue,\n min,\n max,\n ariaValuetext,\n );\n const ariaLabelingProps = useAriaLabelingProps(remainingProps);\n const forwardProps = useSafeForwardProps(remainingProps, ariaLabelingProps);\n\n const generatedId = useId();\n const id = propId ?? generatedId;\n\n if (\n !slots.label &&\n !ariaLabelingProps['aria-label'] &&\n !ariaLabelingProps['aria-labelledby']\n ) {\n process.env.NODE_ENV === 'development' &&\n // eslint-disable-next-line no-console\n console.warn(\n 'If no label is provided please make sure to provide an aria label on your progressCircle element.',\n );\n }\n\n const progressStyles: CSSProperties = {};\n if (!isIndeterminate && value !== undefined) {\n const percentage = (value - min) / (max - min);\n progressStyles['width'] = `${Math.round(percentage * 100)}%`;\n }\n\n return (\n <SharedProgressBarPropsContext.Provider value={{ id, density }}>\n <Flex\n flexDirection=\"column\"\n gap={6}\n width=\"100%\"\n className={clsx(\n containerColorsCSS({\n color: derivedColor,\n variant: containerColoring.variant,\n }),\n\n progressRoot({\n onAccent,\n color: derivedColor,\n }),\n consumerClassName,\n )}\n style={consumerStyle}\n data-testid={dataTestId}\n data-dtrum-mask={dataDtrumMask}\n data-dtrum-allow={dataDtrumAllow}\n ref={forwardedRef}\n {...forwardProps}\n >\n <Flex justifyContent=\"space-between\" gap={8}>\n {density === 'condensed' ? (\n <Flex\n justifyContent=\"space-between\"\n alignItems=\"flex-end\"\n flex={1}\n gap={16}\n minWidth={0}\n >\n {slots.label}\n {slots.value}\n </Flex>\n ) : (\n slots.label\n )}\n {slots.icon}\n </Flex>\n <div\n className={progressCSS({\n size: density,\n })}\n id={id}\n {...progressAriaProps}\n {...ariaLabelingProps}\n >\n <div\n className={clsx(\n progressBarFillCSS({\n indeterminate: isIndeterminate,\n }),\n )}\n style={progressStyles}\n />\n </div>\n {density === 'default' && slots.value}\n </Flex>\n </SharedProgressBarPropsContext.Provider>\n );\n },\n);\n\n(_ProgressBar as typeof _ProgressBar & { displayName: string }).displayName =\n 'ProgressBar';\n\n/**\n * Use the `ProgressBar` component to show your users that a system operation such as downloading, uploading, or processing is progressing.\n * The `ProgressBar` can be used to visualize determinate or indeterminate progress.\n * @public\n */\nexport const ProgressBar = Object.assign(_ProgressBar, {\n Value: ProgressBarValue,\n Label: ProgressBarLabel,\n Icon: ProgressBarIcon,\n});\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
@@ -1,10 +1,10 @@
1
1
  import "./ProgressBar.css";
2
2
  import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
3
- var progressBarFillCSS = _7a468({ defaultClassName: "_13n9uwhq-1-6-2", variantClassNames: { indeterminate: { true: "_13n9uwhr-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
4
- var progressCSS = _7a468({ defaultClassName: "_13n9uwhn-1-6-2", variantClassNames: { size: { condensed: "_13n9uwho-1-6-2", "default": "_13n9uwhp-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
5
- var progressIndicatorColorVar = "var(--_13n9uwh3-1-6-2)";
6
- var progressRoot = _7a468({ defaultClassName: "_13n9uwh5-1-6-2", variantClassNames: { color: { primary: "_13n9uwh6-1-6-2", success: "_13n9uwh7-1-6-2", warning: "_13n9uwh8-1-6-2", critical: "_13n9uwh9-1-6-2", neutral: "_13n9uwha-1-6-2" }, onAccent: { true: "_13n9uwhb-1-6-2", false: "_13n9uwhc-1-6-2" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-1-6-2"], [{ color: "success", onAccent: false }, "_13n9uwhe-1-6-2"], [{ color: "warning", onAccent: false }, "_13n9uwhf-1-6-2"], [{ color: "critical", onAccent: false }, "_13n9uwhg-1-6-2"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-1-6-2"], [{ color: "primary", onAccent: true }, "_13n9uwhi-1-6-2"], [{ color: "success", onAccent: true }, "_13n9uwhj-1-6-2"], [{ color: "warning", onAccent: true }, "_13n9uwhk-1-6-2"], [{ color: "critical", onAccent: true }, "_13n9uwhl-1-6-2"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-1-6-2"]] });
7
- var progressValueColorVar = "var(--_13n9uwh4-1-6-2)";
3
+ var progressBarFillCSS = _7a468({ defaultClassName: "_13n9uwhq-1-7-3", variantClassNames: { indeterminate: { true: "_13n9uwhr-1-7-3" } }, defaultVariants: {}, compoundVariants: [] });
4
+ var progressCSS = _7a468({ defaultClassName: "_13n9uwhn-1-7-3", variantClassNames: { size: { condensed: "_13n9uwho-1-7-3", "default": "_13n9uwhp-1-7-3" } }, defaultVariants: {}, compoundVariants: [] });
5
+ var progressIndicatorColorVar = "var(--_13n9uwh3-1-7-3)";
6
+ var progressRoot = _7a468({ defaultClassName: "_13n9uwh5-1-7-3", variantClassNames: { color: { primary: "_13n9uwh6-1-7-3", success: "_13n9uwh7-1-7-3", warning: "_13n9uwh8-1-7-3", critical: "_13n9uwh9-1-7-3", neutral: "_13n9uwha-1-7-3" }, onAccent: { true: "_13n9uwhb-1-7-3", false: "_13n9uwhc-1-7-3" } }, defaultVariants: {}, compoundVariants: [[{ color: "primary", onAccent: false }, "_13n9uwhd-1-7-3"], [{ color: "success", onAccent: false }, "_13n9uwhe-1-7-3"], [{ color: "warning", onAccent: false }, "_13n9uwhf-1-7-3"], [{ color: "critical", onAccent: false }, "_13n9uwhg-1-7-3"], [{ color: "neutral", onAccent: false }, "_13n9uwhh-1-7-3"], [{ color: "primary", onAccent: true }, "_13n9uwhi-1-7-3"], [{ color: "success", onAccent: true }, "_13n9uwhj-1-7-3"], [{ color: "warning", onAccent: true }, "_13n9uwhk-1-7-3"], [{ color: "critical", onAccent: true }, "_13n9uwhl-1-7-3"], [{ color: "neutral", onAccent: true }, "_13n9uwhm-1-7-3"]] });
7
+ var progressValueColorVar = "var(--_13n9uwh4-1-7-3)";
8
8
  export {
9
9
  progressBarFillCSS,
10
10
  progressCSS,
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBar.css.ts"],
4
- "sourcesContent": ["import './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'_13n9uwhq-1-6-2',variantClassNames:{indeterminate:{true:'_13n9uwhr-1-6-2'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({defaultClassName:'_13n9uwhn-1-6-2',variantClassNames:{size:{condensed:'_13n9uwho-1-6-2','default':'_13n9uwhp-1-6-2'}},defaultVariants:{},compoundVariants:[]});\nexport var progressIndicatorColorVar = 'var(--_13n9uwh3-1-6-2)';\nexport var progressRoot = _7a468({defaultClassName:'_13n9uwh5-1-6-2',variantClassNames:{color:{primary:'_13n9uwh6-1-6-2',success:'_13n9uwh7-1-6-2',warning:'_13n9uwh8-1-6-2',critical:'_13n9uwh9-1-6-2',neutral:'_13n9uwha-1-6-2'},onAccent:{true:'_13n9uwhb-1-6-2',false:'_13n9uwhc-1-6-2'}},defaultVariants:{},compoundVariants:[[{color:'primary',onAccent:false},'_13n9uwhd-1-6-2'],[{color:'success',onAccent:false},'_13n9uwhe-1-6-2'],[{color:'warning',onAccent:false},'_13n9uwhf-1-6-2'],[{color:'critical',onAccent:false},'_13n9uwhg-1-6-2'],[{color:'neutral',onAccent:false},'_13n9uwhh-1-6-2'],[{color:'primary',onAccent:true},'_13n9uwhi-1-6-2'],[{color:'success',onAccent:true},'_13n9uwhj-1-6-2'],[{color:'warning',onAccent:true},'_13n9uwhk-1-6-2'],[{color:'critical',onAccent:true},'_13n9uwhl-1-6-2'],[{color:'neutral',onAccent:true},'_13n9uwhm-1-6-2']]});\nexport var progressValueColorVar = 'var(--_13n9uwh4-1-6-2)';"],
4
+ "sourcesContent": ["import './ProgressBar.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarFillCSS = _7a468({defaultClassName:'_13n9uwhq-1-7-3',variantClassNames:{indeterminate:{true:'_13n9uwhr-1-7-3'}},defaultVariants:{},compoundVariants:[]});\nexport var progressCSS = _7a468({defaultClassName:'_13n9uwhn-1-7-3',variantClassNames:{size:{condensed:'_13n9uwho-1-7-3','default':'_13n9uwhp-1-7-3'}},defaultVariants:{},compoundVariants:[]});\nexport var progressIndicatorColorVar = 'var(--_13n9uwh3-1-7-3)';\nexport var progressRoot = _7a468({defaultClassName:'_13n9uwh5-1-7-3',variantClassNames:{color:{primary:'_13n9uwh6-1-7-3',success:'_13n9uwh7-1-7-3',warning:'_13n9uwh8-1-7-3',critical:'_13n9uwh9-1-7-3',neutral:'_13n9uwha-1-7-3'},onAccent:{true:'_13n9uwhb-1-7-3',false:'_13n9uwhc-1-7-3'}},defaultVariants:{},compoundVariants:[[{color:'primary',onAccent:false},'_13n9uwhd-1-7-3'],[{color:'success',onAccent:false},'_13n9uwhe-1-7-3'],[{color:'warning',onAccent:false},'_13n9uwhf-1-7-3'],[{color:'critical',onAccent:false},'_13n9uwhg-1-7-3'],[{color:'neutral',onAccent:false},'_13n9uwhh-1-7-3'],[{color:'primary',onAccent:true},'_13n9uwhi-1-7-3'],[{color:'success',onAccent:true},'_13n9uwhj-1-7-3'],[{color:'warning',onAccent:true},'_13n9uwhk-1-7-3'],[{color:'critical',onAccent:true},'_13n9uwhl-1-7-3'],[{color:'neutral',onAccent:true},'_13n9uwhm-1-7-3']]});\nexport var progressValueColorVar = 'var(--_13n9uwh4-1-7-3)';"],
5
5
  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,qBAAqB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,eAAc,EAAC,MAAK,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACtK,IAAI,cAAc,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;AACvL,IAAI,4BAA4B;AAChC,IAAI,eAAe,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,OAAM,EAAC,SAAQ,mBAAkB,SAAQ,mBAAkB,SAAQ,mBAAkB,UAAS,mBAAkB,SAAQ,kBAAiB,GAAE,UAAS,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,MAAK,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,YAAW,UAAS,KAAI,GAAE,iBAAiB,GAAE,CAAC,EAAC,OAAM,WAAU,UAAS,KAAI,GAAE,iBAAiB,CAAC,EAAC,CAAC;AAC50B,IAAI,wBAAwB;",
6
6
  "names": []
7
7
  }
@@ -1,5 +1,5 @@
1
- ._szm9t40-1-6-2 {
1
+ ._szm9t40-1-7-3 {
2
2
  display: flex;
3
3
  margin-left: auto;
4
- color: var(--_13n9uwh3-1-6-2);
4
+ color: var(--_13n9uwh3-1-7-3);
5
5
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBarIcon.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { progressBarIconContainerCSS } from './ProgressBarIcon.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\n\n/**\n * Accepted properties for ProgressBarIcon.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarIconProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * The ProgressBarIcon subcomponent is rendered inside the ProgressBar component.\n * @public\n */\nexport const ProgressBarIcon = forwardRef<HTMLDivElement, ProgressBarIconProps>(\n (props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarIconProps = props;\n return (\n <div\n data-testid={dataTestId}\n ref={forwardedRef}\n className={clsx(consumerClassName, progressBarIconContainerCSS)}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </div>\n );\n },\n);\n\n(\n ProgressBarIcon as typeof ProgressBarIcon & { displayName: string }\n).displayName = 'ProgressBar.Icon';\n"],
5
- "mappings": "AAgCM;AAhCN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,mCAAmC;AAmBrC,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA0B;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW,KAAK,mBAAmB,2BAA2B;AAAA,QAC9D,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAGE,gBACA,cAAc;",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { progressBarIconContainerCSS } from './ProgressBarIcon.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\n\n/**\n * Accepted properties for ProgressBarIcon.\n * @public\n */\nexport interface ProgressBarIconProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * The ProgressBarIcon subcomponent is rendered inside the ProgressBar component.\n * @public\n */\nexport const ProgressBarIcon = forwardRef<HTMLDivElement, ProgressBarIconProps>(\n (props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarIconProps = props;\n return (\n <div\n data-testid={dataTestId}\n ref={forwardedRef}\n className={clsx(consumerClassName, progressBarIconContainerCSS)}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </div>\n );\n },\n);\n\n(\n ProgressBarIcon as typeof ProgressBarIcon & { displayName: string }\n).displayName = 'ProgressBar.Icon';\n"],
5
+ "mappings": "AA+BM;AA/BN,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,mCAAmC;AAkBrC,MAAM,kBAAkB;AAAA,EAC7B,CAAC,OAAO,iBAAiB;AACvB,UAAM;AAAA,MACJ;AAAA,MACA,WAAW;AAAA,MACX,OAAO;AAAA,MACP,eAAe;AAAA,MACf,GAAG;AAAA,IACL,IAA0B;AAC1B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,eAAa;AAAA,QACb,KAAK;AAAA,QACL,WAAW,KAAK,mBAAmB,2BAA2B;AAAA,QAC9D,OAAO;AAAA,QACN,GAAG;AAAA,QAEH;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAGE,gBACA,cAAc;",
6
6
  "names": []
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import "./ProgressBar.css";
2
2
  import "./ProgressBarIcon.css";
3
- var progressBarIconContainerCSS = "_szm9t40-1-6-2";
3
+ var progressBarIconContainerCSS = "_szm9t40-1-7-3";
4
4
  export {
5
5
  progressBarIconContainerCSS
6
6
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBarIcon.css.ts"],
4
- "sourcesContent": ["import './ProgressBar.css';\nimport './ProgressBarIcon.css';\nexport var progressBarIconContainerCSS = '_szm9t40-1-6-2';"],
4
+ "sourcesContent": ["import './ProgressBar.css';\nimport './ProgressBarIcon.css';\nexport var progressBarIconContainerCSS = '_szm9t40-1-7-3';"],
5
5
  "mappings": "AAAA,OAAO;AACP,OAAO;AACA,IAAI,8BAA8B;",
6
6
  "names": []
7
7
  }
@@ -1,9 +1,9 @@
1
- ._1ceb8vp0-1-6-2 {
1
+ ._1ceb8vp0-1-7-3 {
2
2
  color: currentColor;
3
3
  }
4
- ._1ceb8vp2-1-6-2 {
4
+ ._1ceb8vp2-1-7-3 {
5
5
  word-break: break-word;
6
6
  }
7
- ._1ceb8vp3-1-6-2 {
7
+ ._1ceb8vp3-1-7-3 {
8
8
  word-break: break-word;
9
9
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBarLabel.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarLabelCSS } from './ProgressBarLabel.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { ellipsisCSS } from '../../styles/ellipsis.sty.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressBarLabel.\n * @public\n */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarLabelProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * ProgressBarLabel sub-component is rendered inside ProgressBar component.\n * @public\n */\nexport const ProgressBarLabel = forwardRef<\n HTMLLabelElement,\n ProgressBarLabelProps\n>((props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarLabelProps = props;\n\n const { id, density } = useSharedProgressBarPropsContext();\n\n const childIsText = canReceiveDefaultTextFormat(children);\n\n return (\n <label\n data-testid={dataTestId}\n ref={forwardedRef}\n htmlFor={id}\n className={clsx(\n {\n [ellipsisCSS]: density === 'condensed' && childIsText,\n },\n consumerClassName,\n progressBarLabelCSS({ size: density, childIsText }),\n textStyleCSS({ textStyle: 'base' }),\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </label>\n );\n});\n\n(\n ProgressBarLabel as typeof ProgressBarLabel & { displayName: string }\n).displayName = 'ProgressBar.Label';\n"],
5
- "mappings": "AA2CI;AA3CJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,wCAAwC;AACjD,SAAS,2BAA2B;AAIpC,SAAS,mCAAmC;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAgBtB,MAAM,mBAAmB,WAG9B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAA2B;AAE3B,QAAM,EAAE,IAAI,QAAQ,IAAI,iCAAiC;AAEzD,QAAM,cAAc,4BAA4B,QAAQ;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,UACE,CAAC,WAAW,GAAG,YAAY,eAAe;AAAA,QAC5C;AAAA,QACA;AAAA,QACA,oBAAoB,EAAE,MAAM,SAAS,YAAY,CAAC;AAAA,QAClD,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,MACpC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAGC,iBACA,cAAc;",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\n\nimport { useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarLabelCSS } from './ProgressBarLabel.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { ellipsisCSS } from '../../styles/ellipsis.sty.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressBarLabel.\n * @public\n */\nexport interface ProgressBarLabelProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * ProgressBarLabel sub-component is rendered inside ProgressBar component.\n * @public\n */\nexport const ProgressBarLabel = forwardRef<\n HTMLLabelElement,\n ProgressBarLabelProps\n>((props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarLabelProps = props;\n\n const { id, density } = useSharedProgressBarPropsContext();\n\n const childIsText = canReceiveDefaultTextFormat(children);\n\n return (\n <label\n data-testid={dataTestId}\n ref={forwardedRef}\n htmlFor={id}\n className={clsx(\n {\n [ellipsisCSS]: density === 'condensed' && childIsText,\n },\n consumerClassName,\n progressBarLabelCSS({ size: density, childIsText }),\n textStyleCSS({ textStyle: 'base' }),\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children}\n </label>\n );\n});\n\n(\n ProgressBarLabel as typeof ProgressBarLabel & { displayName: string }\n).displayName = 'ProgressBar.Label';\n"],
5
+ "mappings": "AA0CI;AA1CJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAE3B,SAAS,wCAAwC;AACjD,SAAS,2BAA2B;AAIpC,SAAS,mCAAmC;AAC5C,SAAS,mBAAmB;AAC5B,SAAS,oBAAoB;AAetB,MAAM,mBAAmB,WAG9B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAA2B;AAE3B,QAAM,EAAE,IAAI,QAAQ,IAAI,iCAAiC;AAEzD,QAAM,cAAc,4BAA4B,QAAQ;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAW;AAAA,QACT;AAAA,UACE,CAAC,WAAW,GAAG,YAAY,eAAe;AAAA,QAC5C;AAAA,QACA;AAAA,QACA,oBAAoB,EAAE,MAAM,SAAS,YAAY,CAAC;AAAA,QAClD,aAAa,EAAE,WAAW,OAAO,CAAC;AAAA,MACpC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAGC,iBACA,cAAc;",
6
6
  "names": []
7
7
  }
@@ -1,6 +1,6 @@
1
1
  import "./ProgressBarLabel.css";
2
2
  import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
3
- var progressBarLabelCSS = _7a468({ defaultClassName: "_1ceb8vp0-1-6-2", variantClassNames: { size: { condensed: "_1ceb8vp1-1-6-2", "default": "_1ceb8vp2-1-6-2" }, childIsText: { false: "_1ceb8vp3-1-6-2" } }, defaultVariants: {}, compoundVariants: [] });
3
+ var progressBarLabelCSS = _7a468({ defaultClassName: "_1ceb8vp0-1-7-3", variantClassNames: { size: { condensed: "_1ceb8vp1-1-7-3", "default": "_1ceb8vp2-1-7-3" }, childIsText: { false: "_1ceb8vp3-1-7-3" } }, defaultVariants: {}, compoundVariants: [] });
4
4
  export {
5
5
  progressBarLabelCSS
6
6
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBarLabel.css.ts"],
4
- "sourcesContent": ["import './ProgressBarLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarLabelCSS = _7a468({defaultClassName:'_1ceb8vp0-1-6-2',variantClassNames:{size:{condensed:'_1ceb8vp1-1-6-2','default':'_1ceb8vp2-1-6-2'},childIsText:{false:'_1ceb8vp3-1-6-2'}},defaultVariants:{},compoundVariants:[]});"],
4
+ "sourcesContent": ["import './ProgressBarLabel.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarLabelCSS = _7a468({defaultClassName:'_1ceb8vp0-1-7-3',variantClassNames:{size:{condensed:'_1ceb8vp1-1-7-3','default':'_1ceb8vp2-1-7-3'},childIsText:{false:'_1ceb8vp3-1-7-3'}},defaultVariants:{},compoundVariants:[]});"],
5
5
  "mappings": "AAAA,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,aAAY,EAAC,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,EAAC,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,13 +1,13 @@
1
- ._1ri4i7o0-1-6-2 {
2
- color: var(--_13n9uwh4-1-6-2);
1
+ ._1ri4i7o0-1-7-3 {
2
+ color: var(--_13n9uwh4-1-7-3);
3
3
  }
4
- ._1ri4i7o2-1-6-2 {
4
+ ._1ri4i7o2-1-7-3 {
5
5
  word-break: break-word;
6
6
  }
7
- ._1ri4i7o4-1-6-2 {
7
+ ._1ri4i7o4-1-7-3 {
8
8
  word-break: break-word;
9
9
  }
10
- ._1ri4i7o5-1-6-2 {
10
+ ._1ri4i7o5-1-7-3 {
11
11
  margin-left: auto;
12
12
  align-self: center;
13
13
  }
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBarValue.tsx"],
4
- "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarValueCSS } from './ProgressBarValue.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressBarValue.\n * @public\n * */\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface ProgressBarValueProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * ProgressBarValue sub-component is rendered inside ProgressBar component.\n * @public\n */\nexport const ProgressBarValue = forwardRef<\n HTMLDivElement,\n ProgressBarValueProps\n>((props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarValueProps = props;\n const intl = useIntl();\n\n const progressBarDefaultLabel = intl.formatMessage({\n defaultMessage: 'Loading',\n id: '3J6qHQEUwDxvZuIl',\n description: 'Default label for the progress-bar.',\n });\n\n const { density } = useSharedProgressBarPropsContext();\n\n const childIsText = canReceiveDefaultTextFormat(children);\n\n return (\n <div\n data-testid={dataTestId}\n ref={forwardedRef}\n className={clsx(\n consumerClassName,\n progressBarValueCSS({ size: density, childIsText }),\n textStyleCSS({ textStyle: 'small' }),\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children || progressBarDefaultLabel}\n </div>\n );\n});\n\n(\n ProgressBarValue as typeof ProgressBarValue & { displayName: string }\n).displayName = 'ProgressBar.Value';\n"],
5
- "mappings": "AAkDI;AAlDJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,SAAS,wCAAwC;AACjD,SAAS,2BAA2B;AAIpC,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAgBtB,MAAM,mBAAmB,WAG9B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAA2B;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,0BAA0B,KAAK,cAAc;AAAA,IACjD,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,EAAE,QAAQ,IAAI,iCAAiC;AAErD,QAAM,cAAc,4BAA4B,QAAQ;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,oBAAoB,EAAE,MAAM,SAAS,YAAY,CAAC;AAAA,QAClD,aAAa,EAAE,WAAW,QAAQ,CAAC;AAAA,MACrC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ,CAAC;AAGC,iBACA,cAAc;",
4
+ "sourcesContent": ["import clsx from 'clsx';\nimport { forwardRef } from 'react';\nimport { useIntl } from 'react-intl';\n\nimport { useSharedProgressBarPropsContext } from './hooks/useProgressBarPropsContext.js';\nimport { progressBarValueCSS } from './ProgressBarValue.sty.js';\nimport { type DataTestId } from '../../core/types/data-props.js';\nimport { type StylingProps } from '../../core/types/styling-props.js';\nimport { type WithChildren } from '../../core/types/with-children.js';\nimport { canReceiveDefaultTextFormat } from '../../core/utils/can-receive-default-text-format.js';\nimport { textStyleCSS } from '../../styles/textStyle.sty.js';\n\n/**\n * Accepted properties for ProgressBarValue.\n * @public\n * */\nexport interface ProgressBarValueProps\n extends WithChildren,\n StylingProps,\n DataTestId {}\n\n/**\n * ProgressBarValue sub-component is rendered inside ProgressBar component.\n * @public\n */\nexport const ProgressBarValue = forwardRef<\n HTMLDivElement,\n ProgressBarValueProps\n>((props, forwardedRef) => {\n const {\n children,\n className: consumerClassName,\n style: consumerStyle,\n 'data-testid': dataTestId,\n ...remainingProps\n }: ProgressBarValueProps = props;\n const intl = useIntl();\n\n const progressBarDefaultLabel = intl.formatMessage({\n defaultMessage: 'Loading',\n id: '3J6qHQEUwDxvZuIl',\n description: 'Default label for the progress-bar.',\n });\n\n const { density } = useSharedProgressBarPropsContext();\n\n const childIsText = canReceiveDefaultTextFormat(children);\n\n return (\n <div\n data-testid={dataTestId}\n ref={forwardedRef}\n className={clsx(\n consumerClassName,\n progressBarValueCSS({ size: density, childIsText }),\n textStyleCSS({ textStyle: 'small' }),\n )}\n style={consumerStyle}\n {...remainingProps}\n >\n {children || progressBarDefaultLabel}\n </div>\n );\n});\n\n(\n ProgressBarValue as typeof ProgressBarValue & { displayName: string }\n).displayName = 'ProgressBar.Value';\n"],
5
+ "mappings": "AAiDI;AAjDJ,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AAExB,SAAS,wCAAwC;AACjD,SAAS,2BAA2B;AAIpC,SAAS,mCAAmC;AAC5C,SAAS,oBAAoB;AAetB,MAAM,mBAAmB,WAG9B,CAAC,OAAO,iBAAiB;AACzB,QAAM;AAAA,IACJ;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,eAAe;AAAA,IACf,GAAG;AAAA,EACL,IAA2B;AAC3B,QAAM,OAAO,QAAQ;AAErB,QAAM,0BAA0B,KAAK,cAAc;AAAA,IACjD,gBAAgB;AAAA,IAChB,IAAI;AAAA,IACJ,aAAa;AAAA,EACf,CAAC;AAED,QAAM,EAAE,QAAQ,IAAI,iCAAiC;AAErD,QAAM,cAAc,4BAA4B,QAAQ;AAExD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAa;AAAA,MACb,KAAK;AAAA,MACL,WAAW;AAAA,QACT;AAAA,QACA,oBAAoB,EAAE,MAAM,SAAS,YAAY,CAAC;AAAA,QAClD,aAAa,EAAE,WAAW,QAAQ,CAAC;AAAA,MACrC;AAAA,MACA,OAAO;AAAA,MACN,GAAG;AAAA,MAEH,sBAAY;AAAA;AAAA,EACf;AAEJ,CAAC;AAGC,iBACA,cAAc;",
6
6
  "names": []
7
7
  }
@@ -2,7 +2,7 @@ import "./ProgressBar.css";
2
2
  import "../../styles/ellipsis.css";
3
3
  import "./ProgressBarValue.css";
4
4
  import { createRuntimeFn as _7a468 } from "@vanilla-extract/recipes/createRuntimeFn";
5
- var progressBarValueCSS = _7a468({ defaultClassName: "_1ri4i7o0-1-6-2", variantClassNames: { size: { condensed: "_1ri4i7o1-1-6-2", "default": "_1ri4i7o2-1-6-2" }, childIsText: { true: "_1ri4i7o3-1-6-2", false: "_1ri4i7o4-1-6-2" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-1-6-2 _oqqp1n0-1-6-2"]] });
5
+ var progressBarValueCSS = _7a468({ defaultClassName: "_1ri4i7o0-1-7-3", variantClassNames: { size: { condensed: "_1ri4i7o1-1-7-3", "default": "_1ri4i7o2-1-7-3" }, childIsText: { true: "_1ri4i7o3-1-7-3", false: "_1ri4i7o4-1-7-3" } }, defaultVariants: {}, compoundVariants: [[{ size: "condensed", childIsText: true }, "_1ri4i7o5-1-7-3 _oqqp1n0-1-7-3"]] });
6
6
  export {
7
7
  progressBarValueCSS
8
8
  };
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/content/progress/ProgressBarValue.css.ts"],
4
- "sourcesContent": ["import './ProgressBar.css';\nimport '../../styles/ellipsis.css';\nimport './ProgressBarValue.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarValueCSS = _7a468({defaultClassName:'_1ri4i7o0-1-6-2',variantClassNames:{size:{condensed:'_1ri4i7o1-1-6-2','default':'_1ri4i7o2-1-6-2'},childIsText:{true:'_1ri4i7o3-1-6-2',false:'_1ri4i7o4-1-6-2'}},defaultVariants:{},compoundVariants:[[{size:'condensed',childIsText:true},'_1ri4i7o5-1-6-2 _oqqp1n0-1-6-2']]});"],
4
+ "sourcesContent": ["import './ProgressBar.css';\nimport '../../styles/ellipsis.css';\nimport './ProgressBarValue.css';\nimport { createRuntimeFn as _7a468 } from '@vanilla-extract/recipes/createRuntimeFn';\nexport var progressBarValueCSS = _7a468({defaultClassName:'_1ri4i7o0-1-7-3',variantClassNames:{size:{condensed:'_1ri4i7o1-1-7-3','default':'_1ri4i7o2-1-7-3'},childIsText:{true:'_1ri4i7o3-1-7-3',false:'_1ri4i7o4-1-7-3'}},defaultVariants:{},compoundVariants:[[{size:'condensed',childIsText:true},'_1ri4i7o5-1-7-3 _oqqp1n0-1-7-3']]});"],
5
5
  "mappings": "AAAA,OAAO;AACP,OAAO;AACP,OAAO;AACP,SAAS,mBAAmB,cAAc;AACnC,IAAI,sBAAsB,OAAO,EAAC,kBAAiB,mBAAkB,mBAAkB,EAAC,MAAK,EAAC,WAAU,mBAAkB,WAAU,kBAAiB,GAAE,aAAY,EAAC,MAAK,mBAAkB,OAAM,kBAAiB,EAAC,GAAE,iBAAgB,CAAC,GAAE,kBAAiB,CAAC,CAAC,EAAC,MAAK,aAAY,aAAY,KAAI,GAAE,gCAAgC,CAAC,EAAC,CAAC;",
6
6
  "names": []
7
7
  }
@@ -1,4 +1,4 @@
1
- @keyframes _kvldjh3-1-6-2 {
1
+ @keyframes _kvldjh3-1-7-3 {
2
2
  0% {
3
3
  transform: rotate(0deg);
4
4
  }
@@ -6,79 +6,79 @@
6
6
  transform: rotate(360deg);
7
7
  }
8
8
  }
9
- ._kvldjh4-1-6-2 {
9
+ ._kvldjh4-1-7-3 {
10
10
  display: inline-block;
11
11
  }
12
- ._kvldjh5-1-6-2 {
12
+ ._kvldjh5-1-7-3 {
13
13
  display: block;
14
14
  transform: rotate(-90deg);
15
15
  }
16
- ._kvldjh6-1-6-2 {
17
- stroke: var(--_kvldjh2-1-6-2);
16
+ ._kvldjh6-1-7-3 {
17
+ stroke: var(--_kvldjh2-1-7-3);
18
18
  transform-origin: center;
19
19
  }
20
- ._kvldjh7-1-6-2 {
20
+ ._kvldjh7-1-7-3 {
21
21
  stroke-dasharray: 90 360;
22
22
  transform-origin: 50% 50%;
23
- animation-name: _kvldjh3-1-6-2;
23
+ animation-name: _kvldjh3-1-7-3;
24
24
  animation-duration: var(--dt-timings-slow-gentle, 800ms);
25
25
  animation-timing-function: cubic-bezier(0.5, 0.15, 0.5, 0.8);
26
26
  animation-iteration-count: infinite;
27
27
  }
28
- ._kvldjh8-1-6-2 {
28
+ ._kvldjh8-1-7-3 {
29
29
  animation-duration: var(--dt-timings-fast-moderate, 200ms);
30
30
  transition-property: stroke-dashoffset;
31
31
  }
32
- ._kvldjh9-1-6-2 {
33
- stroke: var(--_kvldjh1-1-6-2);
32
+ ._kvldjh9-1-7-3 {
33
+ stroke: var(--_kvldjh1-1-7-3);
34
34
  }
35
- ._kvldjha-1-6-2 {
35
+ ._kvldjha-1-7-3 {
36
36
  display: flex;
37
37
  flex-direction: column;
38
38
  align-items: center;
39
- color: var(--_kvldjh0-1-6-2);
39
+ color: var(--_kvldjh0-1-7-3);
40
40
  }
41
- ._kvldjhb-1-6-2 {
41
+ ._kvldjhb-1-7-3 {
42
42
  gap: var(--dt-spacings-size-8, 8px);
43
43
  }
44
- ._kvldjhc-1-6-2 {
44
+ ._kvldjhc-1-7-3 {
45
45
  gap: var(--dt-spacings-size-12, 12px);
46
46
  }
47
- ._kvldjhd-1-6-2 {
48
- --_kvldjh2-1-6-2: var(--dt-colors-border-critical-accent, #b80031);
47
+ ._kvldjhd-1-7-3 {
48
+ --_kvldjh2-1-7-3: var(--dt-colors-border-critical-accent, #b80031);
49
49
  }
50
- ._kvldjhe-1-6-2 {
51
- --_kvldjh2-1-6-2: var(--dt-colors-border-neutral-accent, #545587);
50
+ ._kvldjhe-1-7-3 {
51
+ --_kvldjh2-1-7-3: var(--dt-colors-border-neutral-accent, #545587);
52
52
  }
53
- ._kvldjhf-1-6-2 {
54
- --_kvldjh2-1-6-2: var(--dt-colors-border-primary-accent, #454cc9);
53
+ ._kvldjhf-1-7-3 {
54
+ --_kvldjh2-1-7-3: var(--dt-colors-border-primary-accent, #454cc9);
55
55
  }
56
- ._kvldjhg-1-6-2 {
57
- --_kvldjh2-1-6-2: var(--dt-colors-border-success-accent, #2c6360);
56
+ ._kvldjhg-1-7-3 {
57
+ --_kvldjh2-1-7-3: var(--dt-colors-border-success-accent, #2c6360);
58
58
  }
59
- ._kvldjhh-1-6-2 {
60
- --_kvldjh2-1-6-2: var(--dt-colors-border-warning-accent, #805100);
59
+ ._kvldjhh-1-7-3 {
60
+ --_kvldjh2-1-7-3: var(--dt-colors-border-warning-accent, #805100);
61
61
  }
62
- ._kvldjhi-1-6-2 {
63
- --_kvldjh0-1-6-2: var(--dt-colors-text-neutral-default, #2b2a58);
64
- --_kvldjh1-1-6-2: var(--dt-colors-border-neutral-default, #d2d3e1);
62
+ ._kvldjhi-1-7-3 {
63
+ --_kvldjh0-1-7-3: var(--dt-colors-text-neutral-default, #2b2a58);
64
+ --_kvldjh1-1-7-3: var(--dt-colors-border-neutral-default, #d2d3e1);
65
65
  }
66
- ._kvldjhj-1-6-2 {
67
- --_kvldjh0-1-6-2: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
68
- --_kvldjh1-1-6-2: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
66
+ ._kvldjhj-1-7-3 {
67
+ --_kvldjh0-1-7-3: var(--dt-colors-text-neutral-on-accent-default, #f3f3f6);
68
+ --_kvldjh1-1-7-3: var(--dt-colors-border-neutral-on-accent-disabled, #f3f3f633);
69
69
  }
70
- ._kvldjhk-1-6-2 {
71
- --_kvldjh2-1-6-2: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
70
+ ._kvldjhk-1-7-3 {
71
+ --_kvldjh2-1-7-3: var(--dt-colors-border-primary-on-accent-default, #f4f4fb);
72
72
  }
73
- ._kvldjhl-1-6-2 {
74
- --_kvldjh2-1-6-2: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
73
+ ._kvldjhl-1-7-3 {
74
+ --_kvldjh2-1-7-3: var(--dt-colors-border-success-on-accent-default, #f1f4f4);
75
75
  }
76
- ._kvldjhm-1-6-2 {
77
- --_kvldjh2-1-6-2: var(--dt-colors-border-warning-on-accent-default, #272025);
76
+ ._kvldjhm-1-7-3 {
77
+ --_kvldjh2-1-7-3: var(--dt-colors-border-warning-on-accent-default, #272025);
78
78
  }
79
- ._kvldjhn-1-6-2 {
80
- --_kvldjh2-1-6-2: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
79
+ ._kvldjhn-1-7-3 {
80
+ --_kvldjh2-1-7-3: var(--dt-colors-border-critical-on-accent-default, #f9f1f3);
81
81
  }
82
- ._kvldjho-1-6-2 {
83
- --_kvldjh2-1-6-2: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
82
+ ._kvldjho-1-7-3 {
83
+ --_kvldjh2-1-7-3: var(--dt-colors-border-neutral-on-accent-default, #f3f3f6);
84
84
  }