@fluentui/react-progress 9.0.0 → 9.1.0

package/CHANGELOG.json

@@ -2,7 +2,60 @@
   "name": "@fluentui/react-progress",
   "entries": [
     {
-      "date": "Wed, 22 Feb 2023 23:04:47 GMT",
+      "date": "Wed, 08 Mar 2023 17:39:07 GMT",
+      "tag": "@fluentui/react-progress_v9.1.0",
+      "version": "9.1.0",
+      "comments": {
+        "minor": [
+          {
+            "author": "gcox@microsoft.com",
+            "package": "@fluentui/react-progress",
+            "commit": "34cb9409ea7ac1bb0d88c80312b15b09325e96b3",
+            "comment": "feat: custom styles"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.22",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-utilities to v9.6.1",
+            "commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
+          }
+        ],
+        "patch": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-progress",
+            "commit": "72b29a2530140bdb11e097d7d7b36f06c66f10fb",
+            "comment": "fix: Align WHCM styles with figma and fix documentation typo."
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-progress",
+            "commit": "efb2274e37c0237f3a10a4630b2696a9880f6398",
+            "comment": "fix: Add error checking for incorrect values of max and value props"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-progress",
+            "commit": "f2c7257775bf2d17c3f9dc6eae0b834a988f8793",
+            "comment": "fix: Update ProgressBar styling to have width when display is set to flex"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 22 Feb 2023 23:06:06 GMT",
       "tag": "@fluentui/react-progress_v9.0.0",
       "version": "9.0.0",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/react-progress
 
-This log was last generated on Wed, 22 Feb 2023 23:04:47 GMT and should not be manually modified.
+This log was last generated on Wed, 08 Mar 2023 17:39:07 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.1.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.1.0)
+
+Wed, 08 Mar 2023 17:39:07 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0..@fluentui/react-progress_v9.1.0)
+
+### Minor changes
+
+- feat: custom styles ([PR #27082](https://github.com/microsoft/fluentui/pull/27082) by gcox@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.22 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
+
+### Patches
+
+- fix: Align WHCM styles with figma and fix documentation typo. ([PR #27038](https://github.com/microsoft/fluentui/pull/27038) by ololubek@microsoft.com)
+- fix: Add error checking for incorrect values of max and value props ([PR #27029](https://github.com/microsoft/fluentui/pull/27029) by ololubek@microsoft.com)
+- fix: Update ProgressBar styling to have width when display is set to flex ([PR #27101](https://github.com/microsoft/fluentui/pull/27101) by ololubek@microsoft.com)
+
 ## [9.0.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0)
 
-Wed, 22 Feb 2023 23:04:47 GMT 
+Wed, 22 Feb 2023 23:06:06 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.19..@fluentui/react-progress_v9.0.0)
 
 ### Minor changes

package/lib/components/ProgressBar/ProgressBar.js

@@ -2,12 +2,17 @@ import * as React from 'react';
 import { useProgressBar_unstable } from './useProgressBar';
 import { renderProgressBar_unstable } from './renderProgressBar';
 import { useProgressBarStyles_unstable } from './useProgressBarStyles';
+import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
 /**
  * A ProgressBar bar shows the progression of a task.
  */
 export const ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useProgressBar_unstable(props, ref);
   useProgressBarStyles_unstable(state);
+  const {
+    useProgressBarStyles_unstable: useCustomStyles
+  } = useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderProgressBar_unstable(state);
 });
 ProgressBar.displayName = 'ProgressBar';

package/lib/components/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAItE;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CJ,KAAK,CAACK,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGP,uBAAuB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAEjDJ,6BAA6B,CAACK,KAAK,CAAC;EACpC,OAAON,0BAA0B,CAACM,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACK,WAAW,GAAG,aAAa","names":["React","useProgressBar_unstable","renderProgressBar_unstable","useProgressBarStyles_unstable","ProgressBar","forwardRef","props","ref","state","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}
+{"version":3,"names":["React","useProgressBar_unstable","renderProgressBar_unstable","useProgressBarStyles_unstable","useCustomStyleHooks_unstable","ProgressBar","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n\n  const { useProgressBarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,uBAAuB,QAAQ,kBAAkB;AAC1D,SAASC,0BAA0B,QAAQ,qBAAqB;AAChE,SAASC,6BAA6B,QAAQ,wBAAwB;AAGtE,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,WAAW,gBAA0CL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGR,uBAAuB,CAACM,KAAK,EAAEC,GAAG,CAAC;EAEjDL,6BAA6B,CAACM,KAAK,CAAC;EAEpC,MAAM;IAAEN,6BAA6B,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACzFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOP,0BAA0B,CAACO,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFJ,WAAW,CAACM,WAAW,GAAG,aAAa"}

package/lib/components/ProgressBar/renderProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAC9D,oBAAOH,oBAACI,KAAK,CAACE,IAAI;IAAA,GAAKD,SAAS,CAACC;EAAI,GAAGF,KAAK,CAACG,GAAG,iBAAIP,oBAACI,KAAK,CAACG,GAAG;IAAA,GAAKF,SAAS,CAACE;EAAG,EAAI,CAAc;AACrG,CAAC","names":["React","getSlots","renderProgressBar_unstable","state","slots","slotProps","root","bar"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n  const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n  return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"]}
+{"version":3,"names":["React","getSlots","renderProgressBar_unstable","state","slots","slotProps","createElement","root","bar"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n  const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n  return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAmBE,KAAK,CAAC;EAC9D,oBAAOH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAAGH,KAAK,CAACI,GAAG,iBAAIR,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACI,GAAG;IAAA,GAAKH,SAAS,CAACG;EAAG,EAAI,CAAc;AACrG,CAAC"}

package/lib/components/ProgressBar/useProgressBar.js

@@ -1,4 +1,5 @@
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import { clampValue, clampMax } from '../../utils/index';
 /**
  * Create the state required to render ProgressBar.
  *
@@ -9,14 +10,15 @@ import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utiliti
  * @param ref - reference to root HTMLElement of ProgressBar
  */
 export const useProgressBar_unstable = (props, ref) => {
+  var _a;
   // Props
   const {
     color = 'brand',
-    max = 1.0,
     shape = 'rounded',
-    thickness = 'medium',
-    value
+    thickness = 'medium'
   } = props;
+  const max = clampMax((_a = props.max) !== null && _a !== void 0 ? _a : 1);
+  const value = clampValue(props.value, max);
   const root = getNativeElementProps('div', {
     ref,
     role: 'progressbar',

package/lib/components/ProgressBar/useProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AAGnF;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGV,qBAAqB,CAAC,KAAK,EAAE;IACxCI,GAAG;IACHO,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEF,KAAK,KAAKG,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEH,KAAK,KAAKG,SAAS,GAAGN,GAAG,GAAGM,SAAS;IACtD,eAAe,EAAEH,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMU,GAAG,GAAGZ,gBAAgB,CAACE,KAAK,CAACU,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BV,KAAK;IACLC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLO,UAAU,EAAE;MACVN,IAAI,EAAE,KAAK;MACXG,GAAG,EAAE;KACN;IACDH,IAAI;IACJG;GACD;EAED,OAAOE,KAAK;AACd,CAAC","names":["getNativeElementProps","resolveShorthand","useProgressBar_unstable","props","ref","color","max","shape","thickness","value","root","role","undefined","bar","required","state","components"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  // Props\n  const { color = 'brand', max = 1.0, shape = 'rounded', thickness = 'medium', value } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-valuemin': value !== undefined ? 0 : undefined,\n    'aria-valuemax': value !== undefined ? max : undefined,\n    'aria-valuenow': value,\n    ...props,\n  });\n\n  const bar = resolveShorthand(props.bar, {\n    required: true,\n  });\n\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"]}
+{"version":3,"names":["getNativeElementProps","resolveShorthand","clampValue","clampMax","useProgressBar_unstable","props","ref","color","shape","thickness","max","_a","value","root","role","undefined","bar","required","state","components"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  // Props\n  const { color = 'brand', shape = 'rounded', thickness = 'medium' } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-valuemin': value !== undefined ? 0 : undefined,\n    'aria-valuemax': value !== undefined ? max : undefined,\n    'aria-valuenow': value,\n    ...props,\n  });\n\n  const bar = resolveShorthand(props.bar, {\n    required: true,\n  });\n\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,QAAQ,2BAA2B;AACnF,SAASC,UAAU,EAAEC,QAAQ,QAAQ,mBAAmB;AAGxD;;;;;;;;;AASA,OAAO,MAAMC,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;;EAChH;EACA,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG;EAAQ,CAAE,GAAGJ,KAAK;EAC1E,MAAMK,GAAG,GAAGP,QAAQ,CAAC,CAAAQ,EAAA,GAAAN,KAAK,CAACK,GAAG,cAAAC,EAAA,cAAAA,EAAA,GAAI,CAAC,CAAC;EACpC,MAAMC,KAAK,GAAGV,UAAU,CAACG,KAAK,CAACO,KAAK,EAAEF,GAAG,CAAC;EAE1C,MAAMG,IAAI,GAAGb,qBAAqB,CAAC,KAAK,EAAE;IACxCM,GAAG;IACHQ,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEF,KAAK,KAAKG,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEH,KAAK,KAAKG,SAAS,GAAGL,GAAG,GAAGK,SAAS;IACtD,eAAe,EAAEH,KAAK;IACtB,GAAGP;GACJ,CAAC;EAEF,MAAMW,GAAG,GAAGf,gBAAgB,CAACI,KAAK,CAACW,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BX,KAAK;IACLG,GAAG;IACHF,KAAK;IACLC,SAAS;IACTG,KAAK;IACLO,UAAU,EAAE;MACVN,IAAI,EAAE,KAAK;MACXG,GAAG,EAAE;KACN;IACDH,IAAI;IACJG;GACD;EAED,OAAOE,KAAK;AACd,CAAC"}

package/lib/components/ProgressBar/useProgressBarStyles.js

@@ -35,12 +35,10 @@ const useRootStyles = /*#__PURE__*/__styles({
   root: {
     mc9l5x: "ftgm304",
     De3pzq: "f18f03hv",
-    Bdqf98w: "fhb5wj7",
+    a9b677: "fly5x3f",
     B68tc82: "f1p9o1ba",
     Bmxbyg5: "f1sil6mw",
-    I5kgcl: "fs8b23g",
-    tu2nte: "f1mcb20s",
-    y0r1ed: "fek7wd8"
+    Bpep1pd: "fu42dvn"
   },
   rounded: {
     Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
@@ -61,12 +59,8 @@ const useRootStyles = /*#__PURE__*/__styles({
     Bqenvij: "f6ywr7j"
   }
 }, {
-  d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
-  m: [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
-    m: "screen and (forced-colors: active)"
-  }], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
-    m: "screen and (forced-colors: active)"
-  }], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
+  d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fly5x3f{width:100%;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
+  m: [["@media screen and (forced-colors: active){.fu42dvn{background-color:CanvasText;}}", {
     m: "screen and (forced-colors: active)"
   }]]
 });
@@ -75,16 +69,12 @@ const useRootStyles = /*#__PURE__*/__styles({
  */
 const useBarStyles = /*#__PURE__*/__styles({
   base: {
+    Bpep1pd: "f1neahkh",
     Bbmb7ep: ["f1d9uwra", "fzibvwi"],
     Beyfa6y: ["fzibvwi", "f1d9uwra"],
     B7oj6ja: ["fuoumxm", "f1vtqnvc"],
-    Btl43ni: ["f1vtqnvc", "fuoumxm"]
-  },
-  medium: {
-    Bqenvij: "f4t8t6x"
-  },
-  large: {
-    Bqenvij: "f6ywr7j"
+    Btl43ni: ["f1vtqnvc", "fuoumxm"],
+    Bqenvij: "f1l02sjl"
   },
   nonZeroDeterminate: {
     Bmy1vo4: "fjt6zfz",
@@ -105,8 +95,7 @@ const useBarStyles = /*#__PURE__*/__styles({
     Bv12yb3: "fjhwsai"
   },
   brand: {
-    De3pzq: "ftywsgz",
-    Bpep1pd: "f1neahkh"
+    De3pzq: "ftywsgz"
   },
   error: {
     De3pzq: "fdl5y0r"
@@ -118,15 +107,15 @@ const useBarStyles = /*#__PURE__*/__styles({
     De3pzq: "flxk52p"
   }
 }, {
-  d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
-  k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"],
-  m: [["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+  m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
+    m: "screen and (forced-colors: active)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
-    m: "screen and (forced-colors: active)"
-  }]]
+  }]],
+  d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1l02sjl{height:100%;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
+  k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
 });
 /**
  * Apply styling to the ProgressBar slots based on the state
@@ -146,7 +135,7 @@ export const useProgressBarStyles_unstable = state => {
   } = useFluent();
   state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
   if (state.bar) {
-    state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
+    state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
   }
   if (state.bar && value !== undefined) {
     state.bar.style = {

package/lib/components/ProgressBar/useProgressBarStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","useBarStyles","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","className","base","brand","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-100% /* @noflip */',\n  },\n  '100%': {\n    left: '100% /* @noflip */',\n  },\n};\nconst indeterminateProgressBarRTL = {\n  '100%': {\n    right: '-100% /* @noflip */',\n  },\n  '0%': {\n    right: '100% /* @noflip */',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    justifySelf: 'stretch',\n    ...shorthands.overflow('hidden'),\n\n    '@media screen and (forced-colors: active)': {\n      ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n    },\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    ...shorthands.borderRadius('inherit'),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms',\n      animationIterationCount: '1',\n    },\n  },\n\n  rtl: {\n    animationName: indeterminateProgressBarRTL,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n  const { dir } = useFluent();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      barStyles[thickness],\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","useFluent_unstable","useFluent","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpep1pd","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","square","Bqenvij","d","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","w3vfg9","Gqtpxc","B3vm3ge","rtl","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","className","undefined","style","width","Math","min"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-100% /* @noflip */',\n  },\n  '100%': {\n    left: '100% /* @noflip */',\n  },\n};\nconst indeterminateProgressBarRTL = {\n  '100%': {\n    right: '-100% /* @noflip */',\n  },\n  '0%': {\n    right: '100% /* @noflip */',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    ...shorthands.overflow('hidden'),\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    ...shorthands.borderRadius('inherit'),\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms',\n      animationIterationCount: '1',\n    },\n  },\n\n  rtl: {\n    animationName: indeterminateProgressBarRTL,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n  const { dir } = useFluent();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib/components/ProgressField/ProgressField.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,WAAW,EAAEC,qBAAqB,QAA0B,mBAAmB;AAIxF;AACA,OAAO,MAAMC,uBAAuB,gBAAGJ,4BAA4B,CAACG,qBAAqB,CAACE,IAAI,CAAC;AAC/F;AACA,OAAO,MAAMC,aAAa,gBAA4CL,mBAAmB,CAACC,WAAW,EAAE;EACrGK,WAAW,EAAE,eAAe;EAC5BC,QAAQ,EAAGC,KAAyB,KAAM;IACxC,GAAGA,KAAK;IACRC,OAAO,EAAE;MAAE,GAAGD,KAAK,CAACC,OAAO;MAAEC,eAAe,EAAEF,KAAK,CAACE;IAAe;GACpE;CACF,CAAC","names":["getDeprecatedFieldClassNames","makeDeprecatedField","ProgressBar","progressBarClassNames","progressFieldClassNames","root","ProgressField","displayName","mapProps","props","control","validationState"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar, progressBarClassNames, ProgressBarProps } from '../../ProgressBar';\n\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport type ProgressFieldProps = DeprecatedFieldProps<ProgressBarProps>;\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const progressFieldClassNames = getDeprecatedFieldClassNames(progressBarClassNames.root);\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = makeDeprecatedField(ProgressBar, {\n  displayName: 'ProgressField',\n  mapProps: (props: ProgressFieldProps) => ({\n    ...props,\n    control: { ...props.control, validationState: props.validationState },\n  }),\n});\n"]}
+{"version":3,"names":["getDeprecatedFieldClassNames","makeDeprecatedField","ProgressBar","progressBarClassNames","progressFieldClassNames","root","ProgressField","displayName","mapProps","props","control","validationState"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar, progressBarClassNames, ProgressBarProps } from '../../ProgressBar';\n\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport type ProgressFieldProps = DeprecatedFieldProps<ProgressBarProps>;\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const progressFieldClassNames = getDeprecatedFieldClassNames(progressBarClassNames.root);\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = makeDeprecatedField(ProgressBar, {\n  displayName: 'ProgressField',\n  mapProps: (props: ProgressFieldProps) => ({\n    ...props,\n    control: { ...props.control, validationState: props.validationState },\n  }),\n});\n"],"mappings":"AAAA;AACA,SAA+BA,4BAA4B,EAAEC,mBAAmB,QAAQ,uBAAuB;AAE/G,SAASC,WAAW,EAAEC,qBAAqB,QAA0B,mBAAmB;AAIxF;AACA,OAAO,MAAMC,uBAAuB,gBAAGJ,4BAA4B,CAACG,qBAAqB,CAACE,IAAI,CAAC;AAC/F;AACA,OAAO,MAAMC,aAAa,gBAA4CL,mBAAmB,CAACC,WAAW,EAAE;EACrGK,WAAW,EAAE,eAAe;EAC5BC,QAAQ,EAAGC,KAAyB,KAAM;IACxC,GAAGA,KAAK;IACRC,OAAO,EAAE;MAAE,GAAGD,KAAK,CAACC,OAAO;MAAEC,eAAe,EAAEF,KAAK,CAACE;IAAe;GACpE;CACF,CAAC"}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,QACxB,eAAe;AAGtB;AACA,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB","names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","ProgressField","ProgressField_unstable","progressFieldClassNames"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"]}
+{"version":3,"names":["ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","ProgressField","ProgressField_unstable","progressFieldClassNames"],"sources":["../src/packages/react-components/react-progress/src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"mappings":"AAAA,SACEA,WAAW,EACXC,qBAAqB,EACrBC,0BAA0B,EAC1BC,uBAAuB,EACvBC,6BAA6B,QACxB,eAAe;AAGtB;AACA,SAASC,aAAa,IAAIC,sBAAsB,EAAEC,uBAAuB,QAAQ,iBAAiB"}

package/lib/utils/clampMax.js

@@ -0,0 +1,11 @@
+export const clampMax = max => {
+  const internalMax = max <= 0 ? 1 : max;
+  if (process.env.NODE_ENV !== 'production') {
+    if (max <= 0) {
+      // eslint-disable-next-line no-console
+      console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);
+    }
+  }
+  return internalMax;
+};
+//# sourceMappingURL=clampMax.js.map

package/lib/utils/clampMax.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampMax","max","internalMax","process","env","NODE_ENV","console","error"],"sources":["../src/packages/react-components/react-progress/src/utils/clampMax.ts"],"sourcesContent":["export const clampMax = (max: number): number => {\n  const internalMax = max <= 0 ? 1 : max;\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (max <= 0) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);\n    }\n  }\n  return internalMax;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,QAAQ,GAAIC,GAAW,IAAY;EAC9C,MAAMC,WAAW,GAAGD,GAAG,IAAI,CAAC,GAAG,CAAC,GAAGA,GAAG;EAEtC,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIJ,GAAG,IAAI,CAAC,EAAE;MACZ;MACAK,OAAO,CAACC,KAAK,CAAC,wDAAwDN,GAAG,EAAE,CAAC;;;EAGhF,OAAOC,WAAW;AACpB,CAAC"}

package/lib/utils/clampValue.js

@@ -0,0 +1,18 @@
+export const clampValue = (value, max) => {
+  if (value === undefined) {
+    return value;
+  }
+  const internalValue = value < 0 ? 0 : value > max ? max : value;
+  if (process.env.NODE_ENV !== 'production') {
+    if (value < 0) {
+      // eslint-disable-next-line no-console
+      console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);
+    }
+    if (value > max) {
+      // eslint-disable-next-line no-console
+      console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);
+    }
+  }
+  return internalValue;
+};
+//# sourceMappingURL=clampValue.js.map

package/lib/utils/clampValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampValue","value","max","undefined","internalValue","process","env","NODE_ENV","console","error"],"sources":["../src/packages/react-components/react-progress/src/utils/clampValue.ts"],"sourcesContent":["export const clampValue = (value: number | undefined, max: number): number | undefined => {\n  if (value === undefined) {\n    return value;\n  }\n  const internalValue = value < 0 ? 0 : value > max ? max : value;\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (value < 0) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);\n    }\n    if (value > max) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);\n    }\n  }\n  return internalValue;\n};\n"],"mappings":"AAAA,OAAO,MAAMA,UAAU,GAAGA,CAACC,KAAyB,EAAEC,GAAW,KAAwB;EACvF,IAAID,KAAK,KAAKE,SAAS,EAAE;IACvB,OAAOF,KAAK;;EAEd,MAAMG,aAAa,GAAGH,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGA,KAAK,GAAGC,GAAG,GAAGA,GAAG,GAAGD,KAAK;EAE/D,IAAII,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIN,KAAK,GAAG,CAAC,EAAE;MACb;MACAO,OAAO,CAACC,KAAK,CAAC,2EAA2ER,KAAK,EAAE,CAAC;;IAEnG,IAAIA,KAAK,GAAGC,GAAG,EAAE;MACf;MACAM,OAAO,CAACC,KAAK,CAAC,yEAAyER,KAAK,UAAUC,GAAG,EAAE,CAAC;;;EAGhH,OAAOE,aAAa;AACtB,CAAC"}

package/lib/utils/index.js

@@ -0,0 +1,3 @@
+export * from './clampMax';
+export * from './clampValue';
+//# sourceMappingURL=index.js.map

package/lib/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC","sourcesContent":["export * from './clampMax';\nexport * from './clampValue';\n"]}

package/lib-amd/components/ProgressBar/ProgressBar.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "react", "./useProgressBar", "./renderProgressBar", "./useProgressBarStyles"], function (require, exports, React, useProgressBar_1, renderProgressBar_1, useProgressBarStyles_1) {
+define(["require", "exports", "react", "./useProgressBar", "./renderProgressBar", "./useProgressBarStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, useProgressBar_1, renderProgressBar_1, useProgressBarStyles_1, react_shared_contexts_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.ProgressBar = void 0;
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./useProgressBar", "./renderProgressBar"
     exports.ProgressBar = React.forwardRef(function (props, ref) {
         var state = useProgressBar_1.useProgressBar_unstable(props, ref);
         useProgressBarStyles_1.useProgressBarStyles_unstable(state);
+        var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useProgressBarStyles_unstable;
+        useCustomStyles(state);
         return renderProgressBar_1.renderProgressBar_unstable(state);
     });
     exports.ProgressBar.displayName = 'ProgressBar';

package/lib-amd/components/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QACrC,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}
+{"version":3,"file":"ProgressBar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;IAQA;;OAEG;IACU,QAAA,WAAW,GAA0C,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QAC5F,IAAM,KAAK,GAAG,wCAAuB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAElD,oDAA6B,CAAC,KAAK,CAAC,CAAC;QAE7B,IAA+B,eAAe,GAAK,oDAA4B,EAAE,8BAAnC,CAAoC;QAC1F,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,OAAO,8CAA0B,CAAC,KAAK,CAAC,CAAC;IAC3C,CAAC,CAAC,CAAC;IAEH,mBAAW,CAAC,WAAW,GAAG,aAAa,CAAC","sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n\n  const { useProgressBarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}

package/lib-amd/components/ProgressBar/useProgressBar.js

@@ -1,4 +1,4 @@
-define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
+define(["require", "exports", "tslib", "@fluentui/react-utilities", "../../utils/index"], function (require, exports, tslib_1, react_utilities_1, index_1) {
     "use strict";
     Object.defineProperty(exports, "__esModule", { value: true });
     exports.useProgressBar_unstable = void 0;
@@ -12,8 +12,11 @@ define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (r
      * @param ref - reference to root HTMLElement of ProgressBar
      */
     var useProgressBar_unstable = function (props, ref) {
+        var _a;
         // Props
-        var _a = props.color, color = _a === void 0 ? 'brand' : _a, _b = props.max, max = _b === void 0 ? 1.0 : _b, _c = props.shape, shape = _c === void 0 ? 'rounded' : _c, _d = props.thickness, thickness = _d === void 0 ? 'medium' : _d, value = props.value;
+        var _b = props.color, color = _b === void 0 ? 'brand' : _b, _c = props.shape, shape = _c === void 0 ? 'rounded' : _c, _d = props.thickness, thickness = _d === void 0 ? 'medium' : _d;
+        var max = index_1.clampMax((_a = props.max) !== null && _a !== void 0 ? _a : 1);
+        var value = index_1.clampValue(props.value, max);
         var root = react_utilities_1.getNativeElementProps('div', tslib_1.__assign({ ref: ref, role: 'progressbar', 'aria-valuemin': value !== undefined ? 0 : undefined, 'aria-valuemax': value !== undefined ? max : undefined, 'aria-valuenow': value }, props));
         var bar = react_utilities_1.resolveShorthand(props.bar, {
             required: true,

package/lib-amd/components/ProgressBar/useProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProgressBar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":";;;;IAIA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;QAC1F,QAAQ;QACA,IAAA,KAA+E,KAAK,MAArE,EAAf,KAAK,mBAAG,OAAO,KAAA,EAAE,KAA8D,KAAK,IAA1D,EAAT,GAAG,mBAAG,GAAG,KAAA,EAAE,KAAmD,KAAK,MAAvC,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAE,KAAgC,KAAK,UAAjB,EAApB,SAAS,mBAAG,QAAQ,KAAA,EAAE,KAAK,GAAK,KAAK,MAAV,CAAW;QAE7F,IAAM,IAAI,GAAG,uCAAqB,CAAC,KAAK,qBACtC,GAAG,KAAA,EACH,IAAI,EAAE,aAAa,EACnB,eAAe,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACpD,eAAe,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EACtD,eAAe,EAAE,KAAK,IACnB,KAAK,EACR,CAAC;QAEH,IAAM,GAAG,GAAG,kCAAgB,CAAC,KAAK,CAAC,GAAG,EAAE;YACtC,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QAEH,IAAM,KAAK,GAAqB;YAC9B,KAAK,OAAA;YACL,GAAG,KAAA;YACH,KAAK,OAAA;YACL,SAAS,WAAA;YACT,KAAK,OAAA;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE,KAAK;aACX;YACD,IAAI,MAAA;YACJ,GAAG,KAAA;SACJ,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAhCW,QAAA,uBAAuB,2BAgClC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  // Props\n  const { color = 'brand', max = 1.0, shape = 'rounded', thickness = 'medium', value } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-valuemin': value !== undefined ? 0 : undefined,\n    'aria-valuemax': value !== undefined ? max : undefined,\n    'aria-valuenow': value,\n    ...props,\n  });\n\n  const bar = resolveShorthand(props.bar, {\n    required: true,\n  });\n\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"]}
+{"version":3,"file":"useProgressBar.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":";;;;IAKA;;;;;;;;OAQG;IACI,IAAM,uBAAuB,GAAG,UAAC,KAAuB,EAAE,GAA2B;;QAC1F,QAAQ;QACA,IAAA,KAA6D,KAAK,MAAnD,EAAf,KAAK,mBAAG,OAAO,KAAA,EAAE,KAA4C,KAAK,MAAhC,EAAjB,KAAK,mBAAG,SAAS,KAAA,EAAE,KAAyB,KAAK,UAAV,EAApB,SAAS,mBAAG,QAAQ,KAAA,CAAW;QAC3E,IAAM,GAAG,GAAG,gBAAQ,CAAC,MAAA,KAAK,CAAC,GAAG,mCAAI,CAAC,CAAC,CAAC;QACrC,IAAM,KAAK,GAAG,kBAAU,CAAC,KAAK,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE3C,IAAM,IAAI,GAAG,uCAAqB,CAAC,KAAK,qBACtC,GAAG,KAAA,EACH,IAAI,EAAE,aAAa,EACnB,eAAe,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACpD,eAAe,EAAE,KAAK,KAAK,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,EACtD,eAAe,EAAE,KAAK,IACnB,KAAK,EACR,CAAC;QAEH,IAAM,GAAG,GAAG,kCAAgB,CAAC,KAAK,CAAC,GAAG,EAAE;YACtC,QAAQ,EAAE,IAAI;SACf,CAAC,CAAC;QAEH,IAAM,KAAK,GAAqB;YAC9B,KAAK,OAAA;YACL,GAAG,KAAA;YACH,KAAK,OAAA;YACL,SAAS,WAAA;YACT,KAAK,OAAA;YACL,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,GAAG,EAAE,KAAK;aACX;YACD,IAAI,MAAA;YACJ,GAAG,KAAA;SACJ,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAlCW,QAAA,uBAAuB,2BAkClC","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  // Props\n  const { color = 'brand', shape = 'rounded', thickness = 'medium' } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-valuemin': value !== undefined ? 0 : undefined,\n    'aria-valuemax': value !== undefined ? max : undefined,\n    'aria-valuenow': value,\n    ...props,\n  });\n\n  const bar = resolveShorthand(props.bar, {\n    required: true,\n  });\n\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"]}

package/lib-amd/components/ProgressBar/useProgressBarStyles.js

@@ -33,7 +33,9 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
      * Styles for the root slot
      */
     var useRootStyles = react_1.makeStyles({
-        root: tslib_1.__assign(tslib_1.__assign({ display: 'block', backgroundColor: react_theme_1.tokens.colorNeutralBackground6, justifySelf: 'stretch' }, react_1.shorthands.overflow('hidden')), { '@media screen and (forced-colors: active)': tslib_1.__assign({}, react_1.shorthands.borderBottom('1px', 'solid', 'CanvasText')) }),
+        root: tslib_1.__assign(tslib_1.__assign({ display: 'block', backgroundColor: react_theme_1.tokens.colorNeutralBackground6, width: '100%' }, react_1.shorthands.overflow('hidden')), { '@media screen and (forced-colors: active)': {
+                backgroundColor: 'CanvasText',
+            } }),
         rounded: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusMedium)),
         square: tslib_1.__assign({}, react_1.shorthands.borderRadius(react_theme_1.tokens.borderRadiusNone)),
         medium: {
@@ -47,13 +49,9 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
      * Styles for the ProgressBar bar
      */
     var useBarStyles = react_1.makeStyles({
-        base: tslib_1.__assign({}, react_1.shorthands.borderRadius('inherit')),
-        medium: {
-            height: barThicknessValues.medium,
-        },
-        large: {
-            height: barThicknessValues.large,
-        },
+        base: tslib_1.__assign(tslib_1.__assign({ '@media screen and (forced-colors: active)': {
+                backgroundColor: 'Highlight',
+            } }, react_1.shorthands.borderRadius('inherit')), { height: '100%' }),
         nonZeroDeterminate: {
             transitionProperty: 'width',
             transitionDuration: '0.3s',
@@ -76,9 +74,6 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         },
         brand: {
             backgroundColor: react_theme_1.tokens.colorCompoundBrandBackground,
-            '@media screen and (forced-colors: active)': {
-                backgroundColor: 'Highlight',
-            },
         },
         error: {
             backgroundColor: react_theme_1.tokens.colorPaletteRedBackground3,
@@ -100,7 +95,7 @@ define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"
         var dir = react_shared_contexts_1.useFluent_unstable().dir;
         state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
         if (state.bar) {
-            state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
+            state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
         }
         if (state.bar && value !== undefined) {
             state.bar.style = tslib_1.__assign({ width: Math.min(100, Math.max(0, (value / max) * 100)) + '%' }, state.bar.style);

package/lib-amd/components/ProgressBar/useProgressBarStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"useProgressBarStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-100% /* @noflip */',\n  },\n  '100%': {\n    left: '100% /* @noflip */',\n  },\n};\nconst indeterminateProgressBarRTL = {\n  '100%': {\n    right: '-100% /* @noflip */',\n  },\n  '0%': {\n    right: '100% /* @noflip */',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    justifySelf: 'stretch',\n    ...shorthands.overflow('hidden'),\n\n    '@media screen and (forced-colors: active)': {\n      ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n    },\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    ...shorthands.borderRadius('inherit'),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms',\n      animationIterationCount: '1',\n    },\n  },\n\n  rtl: {\n    animationName: indeterminateProgressBarRTL,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n  const { dir } = useFluent();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      barStyles[thickness],\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"]}
+{"version":3,"file":"useProgressBarStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-100% /* @noflip */',\n  },\n  '100%': {\n    left: '100% /* @noflip */',\n  },\n};\nconst indeterminateProgressBarRTL = {\n  '100%': {\n    right: '-100% /* @noflip */',\n  },\n  '0%': {\n    right: '100% /* @noflip */',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    ...shorthands.overflow('hidden'),\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    ...shorthands.borderRadius('inherit'),\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms',\n      animationIterationCount: '1',\n    },\n  },\n\n  rtl: {\n    animationName: indeterminateProgressBarRTL,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n  const { dir } = useFluent();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"]}

package/lib-amd/utils/clampMax.js

@@ -0,0 +1,17 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.clampMax = void 0;
+    var clampMax = function (max) {
+        var internalMax = max <= 0 ? 1 : max;
+        if (process.env.NODE_ENV !== 'production') {
+            if (max <= 0) {
+                // eslint-disable-next-line no-console
+                console.error("The prop 'max' must be greater than 0. Received max: " + max);
+            }
+        }
+        return internalMax;
+    };
+    exports.clampMax = clampMax;
+});
+//# sourceMappingURL=clampMax.js.map

package/lib-amd/utils/clampMax.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clampMax.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-progress/src/utils/clampMax.ts"],"names":[],"mappings":";;;;IAAO,IAAM,QAAQ,GAAG,UAAC,GAAW;QAClC,IAAM,WAAW,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC;QAEvC,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YACzC,IAAI,GAAG,IAAI,CAAC,EAAE;gBACZ,sCAAsC;gBACtC,OAAO,CAAC,KAAK,CAAC,0DAAwD,GAAK,CAAC,CAAC;aAC9E;SACF;QACD,OAAO,WAAW,CAAC;IACrB,CAAC,CAAC;IAVW,QAAA,QAAQ,YAUnB","sourcesContent":["export const clampMax = (max: number): number => {\n  const internalMax = max <= 0 ? 1 : max;\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (max <= 0) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);\n    }\n  }\n  return internalMax;\n};\n"]}

package/lib-amd/utils/clampValue.js

@@ -0,0 +1,24 @@
+define(["require", "exports"], function (require, exports) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.clampValue = void 0;
+    var clampValue = function (value, max) {
+        if (value === undefined) {
+            return value;
+        }
+        var internalValue = value < 0 ? 0 : value > max ? max : value;
+        if (process.env.NODE_ENV !== 'production') {
+            if (value < 0) {
+                // eslint-disable-next-line no-console
+                console.error("The prop 'value' must be greater than or equal to zero. Received value: " + value);
+            }
+            if (value > max) {
+                // eslint-disable-next-line no-console
+                console.error("The prop 'value' must be less than or equal to 'max'. Received value: " + value + ", max: " + max);
+            }
+        }
+        return internalValue;
+    };
+    exports.clampValue = clampValue;
+});
+//# sourceMappingURL=clampValue.js.map

package/lib-amd/utils/clampValue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clampValue.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-progress/src/utils/clampValue.ts"],"names":[],"mappings":";;;;IAAO,IAAM,UAAU,GAAG,UAAC,KAAyB,EAAE,GAAW;QAC/D,IAAI,KAAK,KAAK,SAAS,EAAE;YACvB,OAAO,KAAK,CAAC;SACd;QACD,IAAM,aAAa,GAAG,KAAK,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC;QAEhE,IAAI,OAAO,CAAC,GAAG,CAAC,QAAQ,KAAK,YAAY,EAAE;YACzC,IAAI,KAAK,GAAG,CAAC,EAAE;gBACb,sCAAsC;gBACtC,OAAO,CAAC,KAAK,CAAC,6EAA2E,KAAO,CAAC,CAAC;aACnG;YACD,IAAI,KAAK,GAAG,GAAG,EAAE;gBACf,sCAAsC;gBACtC,OAAO,CAAC,KAAK,CAAC,2EAAyE,KAAK,eAAU,GAAK,CAAC,CAAC;aAC9G;SACF;QACD,OAAO,aAAa,CAAC;IACvB,CAAC,CAAC;IAjBW,QAAA,UAAU,cAiBrB","sourcesContent":["export const clampValue = (value: number | undefined, max: number): number | undefined => {\n  if (value === undefined) {\n    return value;\n  }\n  const internalValue = value < 0 ? 0 : value > max ? max : value;\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (value < 0) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);\n    }\n    if (value > max) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);\n    }\n  }\n  return internalValue;\n};\n"]}

package/lib-amd/utils/index.js

@@ -0,0 +1,7 @@
+define(["require", "exports", "tslib", "./clampMax", "./clampValue"], function (require, exports, tslib_1, clampMax_1, clampValue_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    tslib_1.__exportStar(clampMax_1, exports);
+    tslib_1.__exportStar(clampValue_1, exports);
+});
+//# sourceMappingURL=index.js.map

package/lib-amd/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../packages/react-components/react-progress/src/utils/index.ts"],"names":[],"mappings":";;;IAAA,0CAA2B;IAC3B,4CAA6B","sourcesContent":["export * from './clampMax';\nexport * from './clampValue';\n"]}

package/lib-commonjs/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressBar.ts"],"sourcesContent":["export * from './components/ProgressBar/index';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-progress/src/ProgressBar.ts"],"sourcesContent":["export * from './components/ProgressBar/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,oCAAAC,OAAA"}

package/lib-commonjs/ProgressField.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/ProgressField.ts"],"sourcesContent":["export * from './components/ProgressField/index';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-progress/src/ProgressField.ts"],"sourcesContent":["export * from './components/ProgressField/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,sCAAAC,OAAA"}

package/lib-commonjs/components/ProgressBar/ProgressBar.js

@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
 const useProgressBar_1 = /*#__PURE__*/require("./useProgressBar");
 const renderProgressBar_1 = /*#__PURE__*/require("./renderProgressBar");
 const useProgressBarStyles_1 = /*#__PURE__*/require("./useProgressBarStyles");
+const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
 /**
  * A ProgressBar bar shows the progression of a task.
  */
 exports.ProgressBar = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useProgressBar_1.useProgressBar_unstable(props, ref);
   useProgressBarStyles_1.useProgressBarStyles_unstable(state);
+  const {
+    useProgressBarStyles_unstable: useCustomStyles
+  } = react_shared_contexts_1.useCustomStyleHooks_unstable();
+  useCustomStyles(state);
   return renderProgressBar_1.renderProgressBar_unstable(state);
 });
 exports.ProgressBar.displayName = 'ProgressBar';

package/lib-commonjs/components/ProgressBar/ProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,mBAAW,gBAA0CC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGC,wCAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDG,oDAA6B,CAACF,KAAK,CAAC;EACpC,OAAOG,8CAA0B,CAACH,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,mBAAW,CAACS,WAAW,GAAG,aAAa","names":["exports","React","forwardRef","props","ref","state","useProgressBar_1","useProgressBarStyles_1","renderProgressBar_1","displayName"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"]}
+{"version":3,"names":["React","require","useProgressBar_1","renderProgressBar_1","useProgressBarStyles_1","react_shared_contexts_1","exports","ProgressBar","forwardRef","props","ref","state","useProgressBar_unstable","useProgressBarStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderProgressBar_unstable","displayName"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { useProgressBar_unstable } from './useProgressBar';\nimport { renderProgressBar_unstable } from './renderProgressBar';\nimport { useProgressBarStyles_unstable } from './useProgressBarStyles';\nimport type { ProgressBarProps } from './ProgressBar.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A ProgressBar bar shows the progression of a task.\n */\nexport const ProgressBar: ForwardRefComponent<ProgressBarProps> = React.forwardRef((props, ref) => {\n  const state = useProgressBar_unstable(props, ref);\n\n  useProgressBarStyles_unstable(state);\n\n  const { useProgressBarStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n  useCustomStyles(state);\n\n  return renderProgressBar_unstable(state);\n});\n\nProgressBar.displayName = 'ProgressBar';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,gBAAA,gBAAAD,OAAA;AACA,MAAAE,mBAAA,gBAAAF,OAAA;AACA,MAAAG,sBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,WAAW,gBAA0CP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EAChG,MAAMC,KAAK,GAAGT,gBAAA,CAAAU,uBAAuB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAEjDN,sBAAA,CAAAS,6BAA6B,CAACF,KAAK,CAAC;EAEpC,MAAM;IAAEE,6BAA6B,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACzFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOR,mBAAA,CAAAa,0BAA0B,CAACL,KAAK,CAAC;AAC1C,CAAC,CAAC;AAEFL,OAAA,CAAAC,WAAW,CAACU,WAAW,GAAG,aAAa"}

package/lib-commonjs/components/ProgressBar/ProgressBar.types.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
+{"version":3,"names":[],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ProgressBarSlots = {\n  /**\n   * The track behind the ProgressBar bar\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.\n   */\n  bar?: NonNullable<Slot<'div'>>;\n};\n\n/**\n * ProgressBar Props\n */\nexport type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {\n  /**\n   * The shape of the bar and track.\n   * @default rounded\n   */\n  shape?: 'rounded' | 'square';\n  /**\n   * A decimal number between `0` and `1` (or between `0` and `max` if given),\n   * which specifies how much of the task has been completed.\n   *\n   * If `undefined` (default), the ProgressBar will display an **indeterminate** state.\n   */\n  value?: number;\n  /**\n   * The maximum value, which indicates the task is complete.\n   * The ProgressBar bar will be full when `value` equals `max`.\n   * @default 1\n   */\n  max?: number;\n  /**\n   * The thickness of the ProgressBar bar\n   * @default medium\n   */\n  thickness?: 'medium' | 'large';\n\n  /**\n   * The status of the ProgressBar bar. Changes the color of the bar.\n   * @default brand\n   */\n  color?: 'brand' | 'success' | 'warning' | 'error';\n};\n\n/**\n * State used in rendering ProgressBar\n */\nexport type ProgressBarState = ComponentState<ProgressBarSlots> &\n  Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> &\n  Pick<ProgressBarProps, 'value' | 'color'>;\n"],"mappings":""}

package/lib-commonjs/components/ProgressBar/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,mBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,yBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,sBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,4BAAAC,OAAA"}

package/lib-commonjs/components/ProgressBar/renderProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAmBH,KAAK,CAAC;EAC9D,OAAOI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAAGJ,KAAK,CAACK,GAAG,IAAIF,oBAACH,KAAK,CAACK,GAAG;IAAA,GAAKJ,SAAS,CAACI;EAAG,EAAI,CAAc;AACrG,CAAC;AAHYC,kCAA0B","names":["renderProgressBar_unstable","state","slots","slotProps","react_utilities_1","React","root","bar","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n  const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n  return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"]}
+{"version":3,"names":["React","require","react_utilities_1","renderProgressBar_unstable","state","slots","slotProps","getSlots","createElement","root","bar","exports"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\n\n/**\n * Render the final JSX of ProgressBar\n */\nexport const renderProgressBar_unstable = (state: ProgressBarState) => {\n  const { slots, slotProps } = getSlots<ProgressBarSlots>(state);\n  return <slots.root {...slotProps.root}>{slots.bar && <slots.bar {...slotProps.bar} />}</slots.root>;\n};\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,0BAA0B,GAAIC,KAAuB,IAAI;EACpE,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAmBH,KAAK,CAAC;EAC9D,OAAOJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAAGJ,KAAK,CAACK,GAAG,IAAIV,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACK,GAAG;IAAA,GAAKJ,SAAS,CAACI;EAAG,EAAI,CAAc;AACrG,CAAC;AAHYC,OAAA,CAAAR,0BAA0B,GAAAA,0BAAA"}

package/lib-commonjs/components/ProgressBar/useProgressBar.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useProgressBar_unstable = void 0;
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+const index_1 = /*#__PURE__*/require("../../utils/index");
 /**
  * Create the state required to render ProgressBar.
  *
@@ -15,14 +16,15 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
  * @param ref - reference to root HTMLElement of ProgressBar
  */
 const useProgressBar_unstable = (props, ref) => {
+  var _a;
   // Props
   const {
     color = 'brand',
-    max = 1.0,
     shape = 'rounded',
-    thickness = 'medium',
-    value
+    thickness = 'medium'
   } = props;
+  const max = index_1.clampMax((_a = props.max) !== null && _a !== void 0 ? _a : 1);
+  const value = index_1.clampValue(props.value, max);
   const root = react_utilities_1.getNativeElementProps('div', {
     ref,
     role: 'progressbar',

package/lib-commonjs/components/ProgressBar/useProgressBar.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;;;;;AASO,MAAMA,uBAAuB,GAAG,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;EAChH;EACA,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,GAAG,GAAG,GAAG;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG,QAAQ;IAAEC;EAAK,CAAE,GAAGN,KAAK;EAE5F,MAAMO,IAAI,GAAGC,uCAAqB,CAAC,KAAK,EAAE;IACxCP,GAAG;IACHQ,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEH,KAAK,KAAKI,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEJ,KAAK,KAAKI,SAAS,GAAGP,GAAG,GAAGO,SAAS;IACtD,eAAe,EAAEJ,KAAK;IACtB,GAAGN;GACJ,CAAC;EAEF,MAAMW,GAAG,GAAGH,kCAAgB,CAACR,KAAK,CAACW,GAAG,EAAE;IACtCC,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9BX,KAAK;IACLC,GAAG;IACHC,KAAK;IACLC,SAAS;IACTC,KAAK;IACLQ,UAAU,EAAE;MACVP,IAAI,EAAE,KAAK;MACXI,GAAG,EAAE;KACN;IACDJ,IAAI;IACJI;GACD;EAED,OAAOE,KAAK;AACd,CAAC;AAhCYE,+BAAuB","names":["useProgressBar_unstable","props","ref","color","max","shape","thickness","value","root","react_utilities_1","role","undefined","bar","required","state","components","exports"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  // Props\n  const { color = 'brand', max = 1.0, shape = 'rounded', thickness = 'medium', value } = props;\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-valuemin': value !== undefined ? 0 : undefined,\n    'aria-valuemax': value !== undefined ? max : undefined,\n    'aria-valuenow': value,\n    ...props,\n  });\n\n  const bar = resolveShorthand(props.bar, {\n    required: true,\n  });\n\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"]}
+{"version":3,"names":["react_utilities_1","require","index_1","useProgressBar_unstable","props","ref","color","shape","thickness","max","clampMax","_a","value","clampValue","root","getNativeElementProps","role","undefined","bar","resolveShorthand","required","state","components","exports"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';\nimport { clampValue, clampMax } from '../../utils/index';\nimport type { ProgressBarProps, ProgressBarState } from './ProgressBar.types';\n\n/**\n * Create the state required to render ProgressBar.\n *\n * The returned state can be modified with hooks such as useProgressBarStyles_unstable,\n * before being passed to renderProgressBar_unstable.\n *\n * @param props - props from this instance of ProgressBar\n * @param ref - reference to root HTMLElement of ProgressBar\n */\nexport const useProgressBar_unstable = (props: ProgressBarProps, ref: React.Ref<HTMLElement>): ProgressBarState => {\n  // Props\n  const { color = 'brand', shape = 'rounded', thickness = 'medium' } = props;\n  const max = clampMax(props.max ?? 1);\n  const value = clampValue(props.value, max);\n\n  const root = getNativeElementProps('div', {\n    ref,\n    role: 'progressbar',\n    'aria-valuemin': value !== undefined ? 0 : undefined,\n    'aria-valuemax': value !== undefined ? max : undefined,\n    'aria-valuenow': value,\n    ...props,\n  });\n\n  const bar = resolveShorthand(props.bar, {\n    required: true,\n  });\n\n  const state: ProgressBarState = {\n    color,\n    max,\n    shape,\n    thickness,\n    value,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AACA,MAAAC,OAAA,gBAAAD,OAAA;AAGA;;;;;;;;;AASO,MAAME,uBAAuB,GAAGA,CAACC,KAAuB,EAAEC,GAA2B,KAAsB;;EAChH;EACA,MAAM;IAAEC,KAAK,GAAG,OAAO;IAAEC,KAAK,GAAG,SAAS;IAAEC,SAAS,GAAG;EAAQ,CAAE,GAAGJ,KAAK;EAC1E,MAAMK,GAAG,GAAGP,OAAA,CAAAQ,QAAQ,CAAC,CAAAC,EAAA,GAAAP,KAAK,CAACK,GAAG,cAAAE,EAAA,cAAAA,EAAA,GAAI,CAAC,CAAC;EACpC,MAAMC,KAAK,GAAGV,OAAA,CAAAW,UAAU,CAACT,KAAK,CAACQ,KAAK,EAAEH,GAAG,CAAC;EAE1C,MAAMK,IAAI,GAAGd,iBAAA,CAAAe,qBAAqB,CAAC,KAAK,EAAE;IACxCV,GAAG;IACHW,IAAI,EAAE,aAAa;IACnB,eAAe,EAAEJ,KAAK,KAAKK,SAAS,GAAG,CAAC,GAAGA,SAAS;IACpD,eAAe,EAAEL,KAAK,KAAKK,SAAS,GAAGR,GAAG,GAAGQ,SAAS;IACtD,eAAe,EAAEL,KAAK;IACtB,GAAGR;GACJ,CAAC;EAEF,MAAMc,GAAG,GAAGlB,iBAAA,CAAAmB,gBAAgB,CAACf,KAAK,CAACc,GAAG,EAAE;IACtCE,QAAQ,EAAE;GACX,CAAC;EAEF,MAAMC,KAAK,GAAqB;IAC9Bf,KAAK;IACLG,GAAG;IACHF,KAAK;IACLC,SAAS;IACTI,KAAK;IACLU,UAAU,EAAE;MACVR,IAAI,EAAE,KAAK;MACXI,GAAG,EAAE;KACN;IACDJ,IAAI;IACJI;GACD;EAED,OAAOG,KAAK;AACd,CAAC;AAlCYE,OAAA,CAAApB,uBAAuB,GAAAA,uBAAA"}

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js

@@ -41,12 +41,10 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
   root: {
     mc9l5x: "ftgm304",
     De3pzq: "f18f03hv",
-    Bdqf98w: "fhb5wj7",
+    a9b677: "fly5x3f",
     B68tc82: "f1p9o1ba",
     Bmxbyg5: "f1sil6mw",
-    I5kgcl: "fs8b23g",
-    tu2nte: "f1mcb20s",
-    y0r1ed: "fek7wd8"
+    Bpep1pd: "fu42dvn"
   },
   rounded: {
     Bbmb7ep: ["f1aa9q02", "f16jpd5f"],
@@ -67,12 +65,8 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
     Bqenvij: "f6ywr7j"
   }
 }, {
-  d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fhb5wj7{justify-self:stretch;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
-  m: [["@media screen and (forced-colors: active){.fs8b23g{border-bottom-width:1px;}}", {
-    m: "screen and (forced-colors: active)"
-  }], ["@media screen and (forced-colors: active){.f1mcb20s{border-bottom-style:solid;}}", {
-    m: "screen and (forced-colors: active)"
-  }], ["@media screen and (forced-colors: active){.fek7wd8{border-bottom-color:CanvasText;}}", {
+  d: [".ftgm304{display:block;}", ".f18f03hv{background-color:var(--colorNeutralBackground6);}", ".fly5x3f{width:100%;}", ".f1p9o1ba{overflow-x:hidden;}", ".f1sil6mw{overflow-y:hidden;}", ".f1aa9q02{border-bottom-right-radius:var(--borderRadiusMedium);}", ".f16jpd5f{border-bottom-left-radius:var(--borderRadiusMedium);}", ".f1jar5jt{border-top-right-radius:var(--borderRadiusMedium);}", ".fyu767a{border-top-left-radius:var(--borderRadiusMedium);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}"],
+  m: [["@media screen and (forced-colors: active){.fu42dvn{background-color:CanvasText;}}", {
     m: "screen and (forced-colors: active)"
   }]]
 });
@@ -81,16 +75,12 @@ const useRootStyles = /*#__PURE__*/react_1.__styles({
  */
 const useBarStyles = /*#__PURE__*/react_1.__styles({
   base: {
+    Bpep1pd: "f1neahkh",
     Bbmb7ep: ["f1d9uwra", "fzibvwi"],
     Beyfa6y: ["fzibvwi", "f1d9uwra"],
     B7oj6ja: ["fuoumxm", "f1vtqnvc"],
-    Btl43ni: ["f1vtqnvc", "fuoumxm"]
-  },
-  medium: {
-    Bqenvij: "f4t8t6x"
-  },
-  large: {
-    Bqenvij: "f6ywr7j"
+    Btl43ni: ["f1vtqnvc", "fuoumxm"],
+    Bqenvij: "f1l02sjl"
   },
   nonZeroDeterminate: {
     Bmy1vo4: "fjt6zfz",
@@ -111,8 +101,7 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
     Bv12yb3: "fjhwsai"
   },
   brand: {
-    De3pzq: "ftywsgz",
-    Bpep1pd: "f1neahkh"
+    De3pzq: "ftywsgz"
   },
   error: {
     De3pzq: "fdl5y0r"
@@ -124,15 +113,15 @@ const useBarStyles = /*#__PURE__*/react_1.__styles({
     De3pzq: "flxk52p"
   }
 }, {
-  d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f4t8t6x{height:2px;}", ".f6ywr7j{height:4px;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
-  k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"],
-  m: [["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
+  m: [["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
+    m: "screen and (forced-colors: active)"
+  }], ["@media screen and (prefers-reduced-motion: reduce){.f4akx1t{-webkit-animation-duration:0.01ms;animation-duration:0.01ms;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
   }], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
     m: "screen and (prefers-reduced-motion: reduce)"
-  }], ["@media screen and (forced-colors: active){.f1neahkh{background-color:Highlight;}}", {
-    m: "screen and (forced-colors: active)"
-  }]]
+  }]],
+  d: [".f1d9uwra{border-bottom-right-radius:inherit;}", ".fzibvwi{border-bottom-left-radius:inherit;}", ".fuoumxm{border-top-right-radius:inherit;}", ".f1vtqnvc{border-top-left-radius:inherit;}", ".f1l02sjl{height:100%;}", ".fjt6zfz{transition-property:width;}", ".f1wofebd{transition-duration:0.3s;}", ".fv71qf3{transition-timing-function:ease;}", ".fa0wk36{max-width:33%;}", ".f10pi13n{position:relative;}", ".fpo0yib{background-image:linear-gradient(\n      to right,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1u5hf6c{background-image:linear-gradient(\n      to left,\n      var(--colorNeutralBackground6) 0%,\n      var(--colorTransparentBackground) 50%,\n      var(--colorNeutralBackground6) 100%\n    );}", ".f1jk3tlg{-webkit-animation-name:fzkbrka;animation-name:fzkbrka;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fjhwsai{-webkit-animation-name:f1kx06uz;animation-name:f1kx06uz;}", ".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
+  k: ["@-webkit-keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@keyframes fzkbrka{0%{left:-100%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
 });
 /**
  * Apply styling to the ProgressBar slots based on the state
@@ -152,7 +141,7 @@ const useProgressBarStyles_unstable = state => {
   } = react_shared_contexts_1.useFluent_unstable();
   state.root.className = react_1.mergeClasses(exports.progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
   if (state.bar) {
-    state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
+    state.bar.className = react_1.mergeClasses(exports.progressBarClassNames.bar, barStyles.base, barStyles.brand, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, color && value !== undefined && barStyles[color], state.bar.className);
   }
   if (state.bar && value !== undefined) {
     state.bar.style = {

package/lib-commonjs/components/ProgressBar/useProgressBarStyles.js.map

@@ -1 +1 @@
-{"version":3,"mappings":"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","names":["exports","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","react_1","useBarStyles","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","react_shared_contexts_1","className","base","brand","undefined","indeterminate","rtl","nonZeroDeterminate","style","width","Math","min"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-100% /* @noflip */',\n  },\n  '100%': {\n    left: '100% /* @noflip */',\n  },\n};\nconst indeterminateProgressBarRTL = {\n  '100%': {\n    right: '-100% /* @noflip */',\n  },\n  '0%': {\n    right: '100% /* @noflip */',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    justifySelf: 'stretch',\n    ...shorthands.overflow('hidden'),\n\n    '@media screen and (forced-colors: active)': {\n      ...shorthands.borderBottom('1px', 'solid', 'CanvasText'),\n    },\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    ...shorthands.borderRadius('inherit'),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms',\n      animationIterationCount: '1',\n    },\n  },\n\n  rtl: {\n    animationName: indeterminateProgressBarRTL,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n  const { dir } = useFluent();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      barStyles[thickness],\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"]}
+{"version":3,"names":["react_1","require","react_theme_1","react_shared_contexts_1","exports","progressBarClassNames","root","bar","ZERO_THRESHOLD","barThicknessValues","medium","large","indeterminateProgressBar","left","indeterminateProgressBarRTL","right","useRootStyles","__styles","mc9l5x","De3pzq","a9b677","B68tc82","Bmxbyg5","Bpep1pd","rounded","Bbmb7ep","Beyfa6y","B7oj6ja","Btl43ni","square","Bqenvij","d","m","useBarStyles","base","nonZeroDeterminate","Bmy1vo4","B3o57yi","Bkqvd7p","indeterminate","B2u0y6b","qhf8xq","Bcmaq0h","Bv12yb3","vin17d","w3vfg9","Gqtpxc","B3vm3ge","rtl","brand","error","warning","success","k","useProgressBarStyles_unstable","state","color","max","shape","thickness","value","rootStyles","barStyles","dir","useFluent_unstable","className","mergeClasses","undefined","style","width","Math","min"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"sourcesContent":["import { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport type { ProgressBarState, ProgressBarSlots } from './ProgressBar.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const progressBarClassNames: SlotClassNames<ProgressBarSlots> = {\n  root: 'fui-ProgressBar',\n  bar: 'fui-ProgressBar__bar',\n};\n\n// If the percentComplete is near 0, don't animate it.\n// This prevents animations on reset to 0 scenarios.\nconst ZERO_THRESHOLD = 0.01;\n\nconst barThicknessValues = {\n  medium: '2px',\n  large: '4px',\n};\n\nconst indeterminateProgressBar = {\n  '0%': {\n    left: '-100% /* @noflip */',\n  },\n  '100%': {\n    left: '100% /* @noflip */',\n  },\n};\nconst indeterminateProgressBarRTL = {\n  '100%': {\n    right: '-100% /* @noflip */',\n  },\n  '0%': {\n    right: '100% /* @noflip */',\n  },\n};\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  root: {\n    display: 'block',\n    backgroundColor: tokens.colorNeutralBackground6,\n    width: '100%',\n    ...shorthands.overflow('hidden'),\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'CanvasText',\n    },\n  },\n  rounded: {\n    ...shorthands.borderRadius(tokens.borderRadiusMedium),\n  },\n  square: {\n    ...shorthands.borderRadius(tokens.borderRadiusNone),\n  },\n  medium: {\n    height: barThicknessValues.medium,\n  },\n  large: {\n    height: barThicknessValues.large,\n  },\n});\n\n/**\n * Styles for the ProgressBar bar\n */\nconst useBarStyles = makeStyles({\n  base: {\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\n    ...shorthands.borderRadius('inherit'),\n    height: '100%',\n  },\n  nonZeroDeterminate: {\n    transitionProperty: 'width',\n    transitionDuration: '0.3s',\n    transitionTimingFunction: 'ease',\n  },\n  indeterminate: {\n    maxWidth: '33%',\n    position: 'relative',\n    backgroundImage: `linear-gradient(\n      to right,\n      ${tokens.colorNeutralBackground6} 0%,\n      ${tokens.colorTransparentBackground} 50%,\n      ${tokens.colorNeutralBackground6} 100%\n    )`,\n    animationName: indeterminateProgressBar,\n    animationDuration: '3s',\n    animationIterationCount: 'infinite',\n    '@media screen and (prefers-reduced-motion: reduce)': {\n      animationDuration: '0.01ms',\n      animationIterationCount: '1',\n    },\n  },\n\n  rtl: {\n    animationName: indeterminateProgressBarRTL,\n  },\n\n  brand: {\n    backgroundColor: tokens.colorCompoundBrandBackground,\n  },\n\n  error: {\n    backgroundColor: tokens.colorPaletteRedBackground3,\n  },\n  warning: {\n    backgroundColor: tokens.colorPaletteDarkOrangeBackground3,\n  },\n  success: {\n    backgroundColor: tokens.colorPaletteGreenBackground3,\n  },\n});\n\n/**\n * Apply styling to the ProgressBar slots based on the state\n */\nexport const useProgressBarStyles_unstable = (state: ProgressBarState): ProgressBarState => {\n  const { color, max, shape, thickness, value } = state;\n  const rootStyles = useRootStyles();\n  const barStyles = useBarStyles();\n  const { dir } = useFluent();\n\n  state.root.className = mergeClasses(\n    progressBarClassNames.root,\n    rootStyles.root,\n    rootStyles[shape],\n    rootStyles[thickness],\n    state.root.className,\n  );\n\n  if (state.bar) {\n    state.bar.className = mergeClasses(\n      progressBarClassNames.bar,\n      barStyles.base,\n      barStyles.brand,\n      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      color && value !== undefined && barStyles[color],\n      state.bar.className,\n    );\n  }\n\n  if (state.bar && value !== undefined) {\n    state.bar.style = {\n      width: Math.min(100, Math.max(0, (value / max) * 100)) + '%',\n      ...state.bar.style,\n    };\n  }\n\n  return state;\n};\n"],"mappings":"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"}

package/lib-commonjs/components/ProgressField/ProgressField.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACA;AAEA;AAIA;AACaA,+BAAuB,gBAAGC,0CAA4B,CAACC,mCAAqB,CAACC,IAAI,CAAC;AAC/F;AACaH,qBAAa,gBAA4CC,iCAAmB,CAACC,yBAAW,EAAE;EACrGE,WAAW,EAAE,eAAe;EAC5BC,QAAQ,EAAGC,KAAyB,KAAM;IACxC,GAAGA,KAAK;IACRC,OAAO,EAAE;MAAE,GAAGD,KAAK,CAACC,OAAO;MAAEC,eAAe,EAAEF,KAAK,CAACE;IAAe;GACpE;CACF,CAAC","names":["exports","react_field_1","ProgressBar_1","root","displayName","mapProps","props","control","validationState"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar, progressBarClassNames, ProgressBarProps } from '../../ProgressBar';\n\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport type ProgressFieldProps = DeprecatedFieldProps<ProgressBarProps>;\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const progressFieldClassNames = getDeprecatedFieldClassNames(progressBarClassNames.root);\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = makeDeprecatedField(ProgressBar, {\n  displayName: 'ProgressField',\n  mapProps: (props: ProgressFieldProps) => ({\n    ...props,\n    control: { ...props.control, validationState: props.validationState },\n  }),\n});\n"]}
+{"version":3,"names":["react_field_1","require","ProgressBar_1","exports","progressFieldClassNames","getDeprecatedFieldClassNames","progressBarClassNames","root","ProgressField","makeDeprecatedField","ProgressBar","displayName","mapProps","props","control","validationState"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport { DeprecatedFieldProps, getDeprecatedFieldClassNames, makeDeprecatedField } from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar, progressBarClassNames, ProgressBarProps } from '../../ProgressBar';\n\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport type ProgressFieldProps = DeprecatedFieldProps<ProgressBarProps>;\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const progressFieldClassNames = getDeprecatedFieldClassNames(progressBarClassNames.root);\n/** @deprecated Use Field with ProgressBar: `<Field><ProgressBar /></Field>` */\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = makeDeprecatedField(ProgressBar, {\n  displayName: 'ProgressField',\n  mapProps: (props: ProgressFieldProps) => ({\n    ...props,\n    control: { ...props.control, validationState: props.validationState },\n  }),\n});\n"],"mappings":";;;;;;AAAA;AACA,MAAAA,aAAA,gBAAAC,OAAA;AAEA,MAAAC,aAAA,gBAAAD,OAAA;AAIA;AACaE,OAAA,CAAAC,uBAAuB,gBAAGJ,aAAA,CAAAK,4BAA4B,CAACH,aAAA,CAAAI,qBAAqB,CAACC,IAAI,CAAC;AAC/F;AACaJ,OAAA,CAAAK,aAAa,gBAA4CR,aAAA,CAAAS,mBAAmB,CAACP,aAAA,CAAAQ,WAAW,EAAE;EACrGC,WAAW,EAAE,eAAe;EAC5BC,QAAQ,EAAGC,KAAyB,KAAM;IACxC,GAAGA,KAAK;IACRC,OAAO,EAAE;MAAE,GAAGD,KAAK,CAACC,OAAO;MAAEC,eAAe,EAAEF,KAAK,CAACE;IAAe;GACpE;CACF,CAAC"}

package/lib-commonjs/components/ProgressField/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressField/index.ts"],"sourcesContent":["export * from './ProgressField';\n"]}
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-progress/src/components/ProgressField/index.ts"],"sourcesContent":["export * from './ProgressField';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA"}

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,gCAAW;EAAA;AAAA;AACXF;EAAAC;EAAAC;IAAA,0CAAqB;EAAA;AAAA;AACrBF;EAAAC;EAAAC;IAAA,+CAA0B;EAAA;AAAA;AAC1BF;EAAAC;EAAAC;IAAA,4CAAuB;EAAA;AAAA;AACvBF;EAAAC;EAAAC;IAAA,kDAA6B;EAAA;AAAA;AAI/B;AACA;AAASF;EAAAC;EAAAC;IAAA,oCAAa;EAAA;AAAA;AAA4BF;EAAAC;EAAAC;IAAA,8CAAuB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"]}
+{"version":3,"names":["ProgressBar_1","require","Object","defineProperty","exports","enumerable","get","ProgressBar","progressBarClassNames","renderProgressBar_unstable","useProgressBar_unstable","useProgressBarStyles_unstable","ProgressField_1","ProgressField","progressFieldClassNames"],"sources":["../src/packages/react-components/react-progress/src/index.ts"],"sourcesContent":["export {\n  ProgressBar,\n  progressBarClassNames,\n  renderProgressBar_unstable,\n  useProgressBar_unstable,\n  useProgressBarStyles_unstable,\n} from './ProgressBar';\nexport type { ProgressBarProps, ProgressBarSlots, ProgressBarState } from './ProgressBar';\n\n// eslint-disable-next-line deprecation/deprecation\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAO,WAAW;EAAA;AAAA;AACXL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAQ,qBAAqB;EAAA;AAAA;AACrBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAS,0BAA0B;EAAA;AAAA;AAC1BP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAU,uBAAuB;EAAA;AAAA;AACvBR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,aAAA,CAAAW,6BAA6B;EAAA;AAAA;AAI/B;AACA,IAAAC,eAAA,gBAAAX,OAAA;AAASC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,eAAA,CAAAC,aAAa;EAAA;AAAA;AAA4BX,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAM,eAAA,CAAAE,uBAAuB;EAAA;AAAA"}

package/lib-commonjs/utils/clampMax.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clampMax = void 0;
+const clampMax = max => {
+  const internalMax = max <= 0 ? 1 : max;
+  if (process.env.NODE_ENV !== 'production') {
+    if (max <= 0) {
+      // eslint-disable-next-line no-console
+      console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);
+    }
+  }
+  return internalMax;
+};
+exports.clampMax = clampMax;
+//# sourceMappingURL=clampMax.js.map

package/lib-commonjs/utils/clampMax.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampMax","max","internalMax","process","env","NODE_ENV","console","error","exports"],"sources":["../src/packages/react-components/react-progress/src/utils/clampMax.ts"],"sourcesContent":["export const clampMax = (max: number): number => {\n  const internalMax = max <= 0 ? 1 : max;\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (max <= 0) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'max' must be greater than 0. Received max: ${max}`);\n    }\n  }\n  return internalMax;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,QAAQ,GAAIC,GAAW,IAAY;EAC9C,MAAMC,WAAW,GAAGD,GAAG,IAAI,CAAC,GAAG,CAAC,GAAGA,GAAG;EAEtC,IAAIE,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIJ,GAAG,IAAI,CAAC,EAAE;MACZ;MACAK,OAAO,CAACC,KAAK,CAAC,wDAAwDN,GAAG,EAAE,CAAC;;;EAGhF,OAAOC,WAAW;AACpB,CAAC;AAVYM,OAAA,CAAAR,QAAQ,GAAAA,QAAA"}

package/lib-commonjs/utils/clampValue.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.clampValue = void 0;
+const clampValue = (value, max) => {
+  if (value === undefined) {
+    return value;
+  }
+  const internalValue = value < 0 ? 0 : value > max ? max : value;
+  if (process.env.NODE_ENV !== 'production') {
+    if (value < 0) {
+      // eslint-disable-next-line no-console
+      console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);
+    }
+    if (value > max) {
+      // eslint-disable-next-line no-console
+      console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);
+    }
+  }
+  return internalValue;
+};
+exports.clampValue = clampValue;
+//# sourceMappingURL=clampValue.js.map

package/lib-commonjs/utils/clampValue.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["clampValue","value","max","undefined","internalValue","process","env","NODE_ENV","console","error","exports"],"sources":["../src/packages/react-components/react-progress/src/utils/clampValue.ts"],"sourcesContent":["export const clampValue = (value: number | undefined, max: number): number | undefined => {\n  if (value === undefined) {\n    return value;\n  }\n  const internalValue = value < 0 ? 0 : value > max ? max : value;\n\n  if (process.env.NODE_ENV !== 'production') {\n    if (value < 0) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'value' must be greater than or equal to zero. Received value: ${value}`);\n    }\n    if (value > max) {\n      // eslint-disable-next-line no-console\n      console.error(`The prop 'value' must be less than or equal to 'max'. Received value: ${value}, max: ${max}`);\n    }\n  }\n  return internalValue;\n};\n"],"mappings":";;;;;;AAAO,MAAMA,UAAU,GAAGA,CAACC,KAAyB,EAAEC,GAAW,KAAwB;EACvF,IAAID,KAAK,KAAKE,SAAS,EAAE;IACvB,OAAOF,KAAK;;EAEd,MAAMG,aAAa,GAAGH,KAAK,GAAG,CAAC,GAAG,CAAC,GAAGA,KAAK,GAAGC,GAAG,GAAGA,GAAG,GAAGD,KAAK;EAE/D,IAAII,OAAO,CAACC,GAAG,CAACC,QAAQ,KAAK,YAAY,EAAE;IACzC,IAAIN,KAAK,GAAG,CAAC,EAAE;MACb;MACAO,OAAO,CAACC,KAAK,CAAC,2EAA2ER,KAAK,EAAE,CAAC;;IAEnG,IAAIA,KAAK,GAAGC,GAAG,EAAE;MACf;MACAM,OAAO,CAACC,KAAK,CAAC,yEAAyER,KAAK,UAAUC,GAAG,EAAE,CAAC;;;EAGhH,OAAOE,aAAa;AACtB,CAAC;AAjBYM,OAAA,CAAAV,UAAU,GAAAA,UAAA"}

package/lib-commonjs/utils/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+const tslib_1 = /*#__PURE__*/require("tslib");
+tslib_1.__exportStar(require("./clampMax"), exports);
+tslib_1.__exportStar(require("./clampValue"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-progress/src/utils/index.ts"],"sourcesContent":["export * from './clampMax';\nexport * from './clampValue';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-progress",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "description": "Progress component for FluentUI v9",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -32,10 +32,10 @@
     "@fluentui/scripts-tasks": "*"
   },
   "dependencies": {
-    "@fluentui/react-field": "9.0.0-alpha.21",
-    "@fluentui/react-shared-contexts": "^9.2.0",
+    "@fluentui/react-field": "9.0.0-alpha.22",
+    "@fluentui/react-shared-contexts": "^9.3.0",
     "@fluentui/react-theme": "^9.1.5",
-    "@fluentui/react-utilities": "^9.6.0",
+    "@fluentui/react-utilities": "^9.6.1",
     "@griffel/react": "^1.5.2",
     "tslib": "^2.1.0"
   },