@fluentui/react-progress 9.0.0-alpha.7 → 9.0.0-alpha.8

package/CHANGELOG.json

@@ -2,7 +2,58 @@
   "name": "@fluentui/react-progress",
   "entries": [
     {
-      "date": "Mon, 05 Dec 2022 18:25:26 GMT",
+      "date": "Tue, 20 Dec 2022 14:55:51 GMT",
+      "tag": "@fluentui/react-progress_v9.0.0-alpha.8",
+      "version": "9.0.0-alpha.8",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-progress",
+            "commit": "fdd8d8fb759a143e8f3d6792960ca10b197c3b23",
+            "comment": "chore: Change name to ProgressBar"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-progress",
+            "commit": "25bc50c2fda3b80ce3f57245ce589db69e11f296",
+            "comment": "fix: Add @noflip to animation styles to prevent extra from css being generated"
+          },
+          {
+            "author": "ololubek@microsoft.com",
+            "package": "@fluentui/react-progress",
+            "commit": "9e3f40f8ca67016590ced1a18aa16d9c02b3b5c6",
+            "comment": "(chore): remove deprecated exports from ProgressBar"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-field to v9.0.0-alpha.11",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-shared-contexts to v9.1.3",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-theme to v9.1.4",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-progress",
+            "comment": "Bump @fluentui/react-utilities to v9.3.0",
+            "commit": "e7530bc179fd0e303448083c76a4af41a0e15322"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 05 Dec 2022 18:29:28 GMT",
       "tag": "@fluentui/react-progress_v9.0.0-alpha.7",
       "version": "9.0.0-alpha.7",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,27 @@
 # Change Log - @fluentui/react-progress
 
-This log was last generated on Mon, 05 Dec 2022 18:25:26 GMT and should not be manually modified.
+This log was last generated on Tue, 20 Dec 2022 14:55:51 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.0.0-alpha.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.8)
+
+Tue, 20 Dec 2022 14:55:51 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.7..@fluentui/react-progress_v9.0.0-alpha.8)
+
+### Changes
+
+- chore: Change name to ProgressBar ([PR #25929](https://github.com/microsoft/fluentui/pull/25929) by ololubek@microsoft.com)
+- fix: Add @noflip to animation styles to prevent extra from css being generated ([PR #26029](https://github.com/microsoft/fluentui/pull/26029) by ololubek@microsoft.com)
+- (chore): remove deprecated exports from ProgressBar ([PR #26027](https://github.com/microsoft/fluentui/pull/26027) by ololubek@microsoft.com)
+- Bump @fluentui/react-field to v9.0.0-alpha.11 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-shared-contexts to v9.1.3 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-theme to v9.1.4 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+- Bump @fluentui/react-utilities to v9.3.0 ([PR #26047](https://github.com/microsoft/fluentui/pull/26047) by beachball)
+
 ## [9.0.0-alpha.7](https://github.com/microsoft/fluentui/tree/@fluentui/react-progress_v9.0.0-alpha.7)
 
-Mon, 05 Dec 2022 18:25:26 GMT 
+Mon, 05 Dec 2022 18:29:28 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-progress_v9.0.0-alpha.6..@fluentui/react-progress_v9.0.0-alpha.7)
 
 ### Changes

package/README.md

@@ -8,29 +8,29 @@ These are not production-ready components and **should never be used in product*
 
 ## Usage
 
-To import `Progress`:
+To import `ProgressBar`:
 
 ```js
-import { Progress } from '@fluentui/react-progress';
+import { ProgressBar } from '@fluentui/react-progress';
 ```
 
 Once the Progress component graduates to a production release, the component will be available at:
 
 ```js
-import { Progress } from '@fluentui/react-components';
+import { ProgressBar } from '@fluentui/react-components';
 ```
 
 ### Examples
 
 ```jsx
-const ProgressExample = () => {
-  return <Progress thickness="large" value={0.5} />;
+const ProgressBarExample = () => {
+  return <ProgressBar thickness="large" value={0.5} />;
 };
 ```
 
 #### Using ProgressField
 
-The `ProgressField` component is a wrapper around the `Progress` component that allows the user to add a `label`, `hint`, `validationMessage`, and `validationState` to the `Progress` component. You can pass these props, as well as the regular `Progress` props to a `ProgressField` component.
+The `ProgressField` component is a wrapper around the `ProgressBar` component that allows the user to add a `label`, `hint`, `validationMessage`, and `validationState` to the `ProgressBar` component. You can pass these props, as well as the regular `ProgressBar` props to a `ProgressField` component.
 
 To import `ProgressField`:
 
@@ -42,7 +42,7 @@ import { ProgressField } from '@fluentui/react-field';
 const ProgressFieldExample = () => {
   return (
     <ProgressField
-      label="Determinate Progress"
+      label="Determinate ProgressBar"
       hint="This is a determinate Progress with description"
       value={0.5}
       validationState="warning"

package/dist/index.d.ts

@@ -11,22 +11,16 @@ import type { Slot } from '@fluentui/react-utilities';
 import { SlotClassNames } from '@fluentui/react-utilities';
 
 /**
- * A progress bar shows the progression of a task.
+ * A ProgressBar bar shows the progression of a task.
  */
-export declare const Progress: ForwardRefComponent<ProgressProps>;
+export declare const ProgressBar: ForwardRefComponent<ProgressBarProps>;
 
-export declare const progressClassNames: SlotClassNames<ProgressSlots>;
-
-export declare const ProgressField_unstable: ForwardRefComponent<ProgressFieldProps_unstable>;
-
-export declare const progressFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
-
-export declare type ProgressFieldProps_unstable = FieldProps<typeof Progress>;
+export declare const progressBarClassNames: SlotClassNames<ProgressBarSlots>;
 
 /**
- * Progress Props
+ * ProgressBar Props
  */
-export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'> & {
+export declare type ProgressBarProps = Omit<ComponentProps<ProgressBarSlots>, 'size'> & {
     /**
      * The shape of the bar and track.
      * @default 'rounded'
@@ -36,61 +30,67 @@ export declare type ProgressProps = Omit<ComponentProps<ProgressSlots>, 'size'>
      * A decimal number between `0` and `1` (or between `0` and `max` if given),
      * which specifies how much of the task has been completed.
      *
-     * If `undefined` (default), the Progress will display an **indeterminate** state.
+     * If `undefined` (default), the ProgressBar will display an **indeterminate** state.
      */
     value?: number;
     /**
      * The maximum value, which indicates the task is complete.
-     * The progress bar will be full when `value` equals `max`.
+     * The ProgressBar bar will be full when `value` equals `max`.
      * @default 1
      */
     max?: number;
     /**
-     * The thickness of the Progress bar
+     * The thickness of the ProgressBar bar
      * @default 'medium'
      */
     thickness?: 'medium' | 'large';
     /**
-     * The status of the progress bar. Changes the color of the bar.
+     * The status of the ProgressBar bar. Changes the color of the bar.
      */
     validationState?: 'success' | 'warning' | 'error';
 };
 
-export declare type ProgressSlots = {
+export declare type ProgressBarSlots = {
     /**
-     * The track behind the progress bar
+     * The track behind the ProgressBar bar
      */
     root: NonNullable<Slot<'div'>>;
     /**
-     * The filled portion of the progress bar. Animated in the indeterminate state, when no value is provided.
+     * The filled portion of the ProgressBar bar. Animated in the indeterminate state, when no value is provided.
      */
     bar?: NonNullable<Slot<'div'>>;
 };
 
 /**
- * State used in rendering Progress
+ * State used in rendering ProgressBar
  */
-export declare type ProgressState = ComponentState<ProgressSlots> & Required<Pick<ProgressProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressProps, 'value' | 'validationState'>;
+export declare type ProgressBarState = ComponentState<ProgressBarSlots> & Required<Pick<ProgressBarProps, 'max' | 'shape' | 'thickness'>> & Pick<ProgressBarProps, 'value' | 'validationState'>;
+
+export declare const ProgressField_unstable: ForwardRefComponent<ProgressFieldProps_unstable>;
+
+export declare const progressFieldClassNames: SlotClassNames<FieldSlots<FieldControl>>;
+
+export declare type ProgressFieldProps_unstable = FieldProps<typeof ProgressBar>;
 
 /**
- * Render the final JSX of Progress
+ * Render the final JSX of ProgressBar
  */
-export declare const renderProgress_unstable: (state: ProgressState) => JSX.Element;
+export declare const renderProgressBar_unstable: (state: ProgressBarState) => JSX.Element;
 
 /**
- * Create the state required to render Progress.
+ * Create the state required to render ProgressBar.
  *
- * The returned state can be modified with hooks such as useProgressStyles_unstable,
- * before being passed to renderProgress_unstable.
+ * The returned state can be modified with hooks such as useProgressBarStyles_unstable,
+ * before being passed to renderProgressBar_unstable.
  *
- * @param props - props from this instance of Progress
- * @param ref - reference to root HTMLElement of Progress
+ * @param props - props from this instance of ProgressBar
+ * @param ref - reference to root HTMLElement of ProgressBar
  */
-export declare const useProgress_unstable: (props: ProgressProps, ref: React_2.Ref<HTMLElement>) => ProgressState;
+export declare const useProgressBar_unstable: (props: ProgressBarProps, ref: React_2.Ref<HTMLElement>) => ProgressBarState;
 
 /**
- * Apply styling to the Progress slots based on the state
+ * Apply styling to the ProgressBar slots based on the state
  */
-export declare const useProgressStyles_unstable: (state: ProgressState) => ProgressState;
+export declare const useProgressBarStyles_unstable: (state: ProgressBarState) => ProgressBarState;
 
 export { }

package/lib/ProgressBar.js

@@ -0,0 +1,2 @@
+export * from './components/ProgressBar/index';
+//# sourceMappingURL=ProgressBar.js.map

package/lib/ProgressBar.js.map

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

package/lib/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { useProgressBar_unstable } from './useProgressBar';
+import { renderProgressBar_unstable } from './renderProgressBar';
+import { useProgressBarStyles_unstable } from './useProgressBarStyles';
+/**
+ * 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);
+  return renderProgressBar_unstable(state);
+});
+ProgressBar.displayName = 'ProgressBar';
+//# sourceMappingURL=ProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AACA,SAAS,0BAAT,QAA2C,qBAA3C;AACA,SAAS,6BAAT,QAA8C,wBAA9C;AAIA;;AAEG;;AACH,OAAO,MAAM,WAAW,gBAA0C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,uBAAuB,CAAC,KAAD,EAAQ,GAAR,CAArC;EAEA,6BAA6B,CAAC,KAAD,CAA7B;EACA,OAAO,0BAA0B,CAAC,KAAD,CAAjC;AACD,CALiE,CAA3D;AAOP,WAAW,CAAC,WAAZ,GAA0B,aAA1B","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"],"sourceRoot":"../src/"}

package/lib/components/ProgressBar/ProgressBar.types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=ProgressBar.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ProgressBar.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"","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' | 'rectangular';\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   */\n  validationState?: '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' | 'validationState'>;\n"]}

package/lib/components/ProgressBar/index.js

@@ -0,0 +1,6 @@
+export * from './ProgressBar';
+export * from './ProgressBar.types';
+export * from './renderProgressBar';
+export * from './useProgressBar';
+export * from './useProgressBarStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,kBAAkB,CAAC;AACjC,cAAc,wBAAwB,CAAC","sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"]}

package/lib/components/{Progress/renderProgress.js → ProgressBar/renderProgressBar.js}

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
- * Render the final JSX of Progress
+ * Render the final JSX of ProgressBar
  */
 
-export const renderProgress_unstable = state => {
+export const renderProgressBar_unstable = state => {
   const {
     slots,
     slotProps
@@ -13,4 +13,4 @@ export const renderProgress_unstable = state => {
   }, slots.bar && /*#__PURE__*/React.createElement(slots.bar, { ...slotProps.bar
   }));
 };
-//# sourceMappingURL=renderProgress.js.map
+//# sourceMappingURL=renderProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/renderProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,0BAA0B,GAAI,KAAD,IAA4B;EACpE,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAmB,KAAnB,CAArC;EACA,oBAAO,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EAAiC,KAAK,CAAC,GAAN,iBAAa,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,GAAP,EAAU,EAAA,GAAK,SAAS,CAAC;EAAf,CAAV,CAA9C,CAAP;AACD,CAHM","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"],"sourceRoot":"../src/"}

package/lib/components/{Progress/useProgress.js → ProgressBar/useProgressBar.js}

@@ -1,15 +1,15 @@
 import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
 /**
- * Create the state required to render Progress.
+ * Create the state required to render ProgressBar.
  *
- * The returned state can be modified with hooks such as useProgressStyles_unstable,
- * before being passed to renderProgress_unstable.
+ * The returned state can be modified with hooks such as useProgressBarStyles_unstable,
+ * before being passed to renderProgressBar_unstable.
  *
- * @param props - props from this instance of Progress
- * @param ref - reference to root HTMLElement of Progress
+ * @param props - props from this instance of ProgressBar
+ * @param ref - reference to root HTMLElement of ProgressBar
  */
 
-export const useProgress_unstable = (props, ref) => {
+export const useProgressBar_unstable = (props, ref) => {
   // Props
   const {
     max = 1.0,
@@ -44,4 +44,4 @@ export const useProgress_unstable = (props, ref) => {
   };
   return state;
 };
-//# sourceMappingURL=useProgress.js.map
+//# sourceMappingURL=useProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBar.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,QAAwD,2BAAxD;AAGA;;;;;;;;AAQG;;AACH,OAAO,MAAM,uBAAuB,GAAG,CAAC,KAAD,EAA0B,GAA1B,KAA2E;EAChH;EACA,MAAM;IAAE,GAAG,GAAG,GAAR;IAAa,KAAK,GAAG,SAArB;IAAgC,SAAS,GAAG,QAA5C;IAAsD,eAAtD;IAAuE;EAAvE,IAAiF,KAAvF;EAEA,MAAM,IAAI,GAAG,qBAAqB,CAAC,KAAD,EAAQ;IACxC,GADwC;IAExC,IAAI,EAAE,aAFkC;IAGxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,CAAtB,GAA0B,SAHH;IAIxC,iBAAiB,KAAK,KAAK,SAAV,GAAsB,GAAtB,GAA4B,SAJL;IAKxC,iBAAiB,KALuB;IAMxC,GAAG;EANqC,CAAR,CAAlC;EASA,MAAM,GAAG,GAAG,gBAAgB,CAAC,KAAK,CAAC,GAAP,EAAY;IACtC,QAAQ,EAAE;EAD4B,CAAZ,CAA5B;EAIA,MAAM,KAAK,GAAqB;IAC9B,GAD8B;IAE9B,KAF8B;IAG9B,SAH8B;IAI9B,KAJ8B;IAK9B,eAL8B;IAM9B,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,GAAG,EAAE;IAFK,CANkB;IAU9B,IAV8B;IAW9B;EAX8B,CAAhC;EAcA,OAAO,KAAP;AACD,CAhCM","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 { max = 1.0, shape = 'rounded', thickness = 'medium', validationState, 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    max,\n    shape,\n    thickness,\n    value,\n    validationState,\n    components: {\n      root: 'div',\n      bar: 'div',\n    },\n    root,\n    bar,\n  };\n\n  return state;\n};\n"],"sourceRoot":"../src/"}

package/lib/components/{Progress/useProgressStyles.js → ProgressBar/useProgressBarStyles.js}

@@ -1,9 +1,9 @@
 import { __styles, mergeClasses, shorthands } from '@griffel/react';
 import { tokens } from '@fluentui/react-theme';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
-export const progressClassNames = {
-  root: 'fui-Progress',
-  bar: 'fui-Progress__bar'
+export const progressBarClassNames = {
+  root: 'fui-ProgressBar',
+  bar: 'fui-ProgressBar__bar'
 }; // If the percentComplete is near 0, don't animate it.
 // This prevents animations on reset to 0 scenarios.
 
@@ -12,20 +12,20 @@ const barThicknessValues = {
   medium: '2px',
   large: '4px'
 };
-const indeterminateProgress = {
+const indeterminateProgressBar = {
   '0%': {
-    left: '0%'
+    left: '0% /* @noflip */'
   },
   '100%': {
-    left: '100%'
+    left: '100% /* @noflip */'
   }
 };
-const indeterminateProgressRTL = {
+const indeterminateProgressBarRTL = {
   '100%': {
-    right: '-100%'
+    right: '-100% /* @noflip */'
   },
   '0%': {
-    right: '100%'
+    right: '100% /* @noflip */'
   }
 };
 /**
@@ -72,7 +72,7 @@ const useRootStyles = /*#__PURE__*/__styles({
   }]]
 });
 /**
- * Styles for the progress bar
+ * Styles for the ProgressBar bar
  */
 
 
@@ -100,14 +100,14 @@ const useBarStyles = /*#__PURE__*/__styles({
     "B2u0y6b": "fa0wk36",
     "qhf8xq": "f10pi13n",
     "Bcmaq0h": ["fpo0yib", "f1u5hf6c"],
-    "Bv12yb3": ["f1wk4z0g", "f1f62nrt"],
+    "Bv12yb3": "f1h4fm7e",
     "vin17d": "f1a27w2r",
     "w3vfg9": "f1cpbl36",
     "Gqtpxc": "f4akx1t",
     "B3vm3ge": "f18p5put"
   },
   "rtl": {
-    "Bv12yb3": ["fw97ye2", "fqbve9y"]
+    "Bv12yb3": "fjhwsai"
   },
   "error": {
     "De3pzq": "fdl5y0r"
@@ -119,7 +119,7 @@ const useBarStyles = /*#__PURE__*/__styles({
     "De3pzq": "flxk52p"
   }
 }, {
-  "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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    );}", ".f1wk4z0g{-webkit-animation-name:fgj6rna;animation-name:fgj6rna;}", ".f1f62nrt{-webkit-animation-name:fknt0w3;animation-name:fknt0w3;}", ".f1a27w2r{-webkit-animation-duration:3s;animation-duration:3s;}", ".f1cpbl36{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;}", ".fw97ye2{-webkit-animation-name:f869nhd;animation-name:f869nhd;}", ".fqbve9y{-webkit-animation-name:f1gy5aix;animation-name:f1gy5aix;}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
+  "d": [".ftywsgz{background-color:var(--colorCompoundBrandBackground);}", ".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    );}", ".f1h4fm7e{-webkit-animation-name:fd3k50f;animation-name:fd3k50f;}", ".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;}", ".fdl5y0r{background-color:var(--colorPaletteRedBackground3);}", ".f1s438gw{background-color:var(--colorPaletteDarkOrangeBackground3);}", ".flxk52p{background-color:var(--colorPaletteGreenBackground3);}"],
   "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;}}", {
@@ -127,14 +127,14 @@ const useBarStyles = /*#__PURE__*/__styles({
   }], ["@media screen and (prefers-reduced-motion: reduce){.f18p5put{-webkit-animation-iteration-count:1;animation-iteration-count:1;}}", {
     "m": "screen and (prefers-reduced-motion: reduce)"
   }]],
-  "k": ["@-webkit-keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@keyframes fgj6rna{0%{left:0%;}100%{left:100%;}}", "@keyframes fknt0w3{0%{right:0%;}100%{right:100%;}}", "@-webkit-keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@-webkit-keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}", "@keyframes f869nhd{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1gy5aix{100%{left:-100%;}0%{left:100%;}}"]
+  "k": ["@-webkit-keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@keyframes fd3k50f{0%{left:0%;}100%{left:100%;}}", "@-webkit-keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}", "@keyframes f1kx06uz{100%{right:-100%;}0%{right:100%;}}"]
 });
 /**
- * Apply styling to the Progress slots based on the state
+ * Apply styling to the ProgressBar slots based on the state
  */
 
 
-export const useProgressStyles_unstable = state => {
+export const useProgressBarStyles_unstable = state => {
   const {
     max,
     shape,
@@ -147,10 +147,10 @@ export const useProgressStyles_unstable = state => {
   const {
     dir
   } = useFluent();
-  state.root.className = mergeClasses(progressClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
+  state.root.className = mergeClasses(progressBarClassNames.root, rootStyles.root, rootStyles[shape], rootStyles[thickness], state.root.className);
 
   if (state.bar) {
-    state.bar.className = mergeClasses(progressClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
+    state.bar.className = mergeClasses(progressBarClassNames.bar, barStyles.base, value === undefined && barStyles.indeterminate, value === undefined && dir === 'rtl' && barStyles.rtl, barStyles[thickness], value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate, validationState && barStyles[validationState], state.bar.className);
   }
 
   if (state.bar && value !== undefined) {
@@ -162,4 +162,4 @@ export const useProgressStyles_unstable = state => {
 
   return state;
 };
-//# sourceMappingURL=useProgressStyles.js.map
+//# sourceMappingURL=useProgressBarStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/useProgressBarStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,EAAmC,UAAnC,QAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AACA,SAAS,kBAAkB,IAAI,SAA/B,QAAgD,iCAAhD;AAIA,OAAO,MAAM,qBAAqB,GAAqC;EACrE,IAAI,EAAE,iBAD+D;EAErE,GAAG,EAAE;AAFgE,CAAhE,C,CAKP;AACA;;AACA,MAAM,cAAc,GAAG,IAAvB;AAEA,MAAM,kBAAkB,GAAG;EACzB,MAAM,EAAE,KADiB;EAEzB,KAAK,EAAE;AAFkB,CAA3B;AAKA,MAAM,wBAAwB,GAAG;EAC/B,MAAM;IACJ,IAAI,EAAE;EADF,CADyB;EAI/B,QAAQ;IACN,IAAI,EAAE;EADA;AAJuB,CAAjC;AAQA,MAAM,2BAA2B,GAAG;EAClC,QAAQ;IACN,KAAK,EAAE;EADD,CAD0B;EAIlC,MAAM;IACJ,KAAK,EAAE;EADH;AAJ4B,CAApC;AASA;;AAEG;;AACH,MAAM,aAAa,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;AAAA,EAAtB;AAyBA;;AAEG;;;AACH,MAAM,YAAY,gBAAG;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;EAAA;AAAA;EAAA;EAAA;IAAA;EAAA;IAAA;EAAA;IAAA;EAAA;EAAA;AAAA,EAArB;AAqDA;;AAEG;;;AACH,OAAO,MAAM,6BAA6B,GAAI,KAAD,IAA8C;EACzF,MAAM;IAAE,GAAF;IAAO,KAAP;IAAc,SAAd;IAAyB,eAAzB;IAA0C;EAA1C,IAAoD,KAA1D;EACA,MAAM,UAAU,GAAG,aAAa,EAAhC;EACA,MAAM,SAAS,GAAG,YAAY,EAA9B;EACA,MAAM;IAAE;EAAF,IAAU,SAAS,EAAzB;EAEA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,qBAAqB,CAAC,IADW,EAEjC,UAAU,CAAC,IAFsB,EAGjC,UAAU,CAAC,KAAD,CAHuB,EAIjC,UAAU,CAAC,SAAD,CAJuB,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;EAQA,IAAI,KAAK,CAAC,GAAV,EAAe;IACb,KAAK,CAAC,GAAN,CAAU,SAAV,GAAsB,YAAY,CAChC,qBAAqB,CAAC,GADU,EAEhC,SAAS,CAAC,IAFsB,EAGhC,KAAK,KAAK,SAAV,IAAuB,SAAS,CAAC,aAHD,EAIhC,KAAK,KAAK,SAAV,IAAuB,GAAG,KAAK,KAA/B,IAAwC,SAAS,CAAC,GAJlB,EAKhC,SAAS,CAAC,SAAD,CALuB,EAMhC,KAAK,KAAK,SAAV,IAAuB,KAAK,GAAG,cAA/B,IAAiD,SAAS,CAAC,kBAN3B,EAOhC,eAAe,IAAI,SAAS,CAAC,eAAD,CAPI,EAQhC,KAAK,CAAC,GAAN,CAAU,SARsB,CAAlC;EAUD;;EAED,IAAI,KAAK,CAAC,GAAN,IAAa,KAAK,KAAK,SAA3B,EAAsC;IACpC,KAAK,CAAC,GAAN,CAAU,KAAV,GAAkB;MAChB,KAAK,EAAE,IAAI,CAAC,GAAL,CAAS,GAAT,EAAc,IAAI,CAAC,GAAL,CAAS,CAAT,EAAa,KAAK,GAAG,GAAT,GAAgB,GAA5B,CAAd,IAAkD,GADzC;MAEhB,GAAG,KAAK,CAAC,GAAN,CAAU;IAFG,CAAlB;EAID;;EAED,OAAO,KAAP;AACD,CAnCM","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: '0% /* @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  rectangular: {\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    backgroundColor: tokens.colorCompoundBrandBackground,\n\n    '@media screen and (forced-colors: active)': {\n      backgroundColor: 'Highlight',\n    },\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  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 { max, shape, thickness, validationState, 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      value === undefined && barStyles.indeterminate,\n      value === undefined && dir === 'rtl' && barStyles.rtl,\n      barStyles[thickness],\n      value !== undefined && value > ZERO_THRESHOLD && barStyles.nonZeroDeterminate,\n      validationState && barStyles[validationState],\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"],"sourceRoot":"../src/"}

package/lib/components/ProgressField/ProgressField.js

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '@fluentui/react-field';
-import { Progress } from '../../Progress';
+import { ProgressBar } from '../../ProgressBar';
 export const progressFieldClassNames = /*#__PURE__*/getFieldClassNames('ProgressField');
 export const ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
   const state = useField_unstable(props, ref, {
-    component: Progress,
+    component: ProgressBar,
     classNames: progressFieldClassNames,
     labelConnection: 'aria-labelledby',
     ariaInvalidOnError: false

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,QAAT,QAAyB,gBAAzB;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAC1C,SAAS,EAAE,QAD+B;IAE1C,UAAU,EAAE,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAAb,CAA/B;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAVqE,CAA/D;AAYP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { Progress } from '../../Progress';\n\nexport type ProgressFieldProps = FieldProps<typeof Progress>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, {\n    component: Progress,\n    classNames: progressFieldClassNames,\n    labelConnection: 'aria-labelledby',\n    ariaInvalidOnError: false,\n  });\n  state.control.validationState = state.validationState;\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AAEA,SACE,kBADF,EAEE,oBAFF,EAGE,uBAHF,EAIE,iBAJF,QAKO,uBALP;AAOA,SAAS,WAAT,QAA4B,mBAA5B;AAIA,OAAO,MAAM,uBAAuB,gBAAG,kBAAkB,CAAC,eAAD,CAAlD;AAEP,OAAO,MAAM,aAAa,gBAA4C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,EAAa;IAC1C,SAAS,EAAE,WAD+B;IAE1C,UAAU,EAAE,uBAF8B;IAG1C,eAAe,EAAE,iBAHyB;IAI1C,kBAAkB,EAAE;EAJsB,CAAb,CAA/B;EAMA,KAAK,CAAC,OAAN,CAAc,eAAd,GAAgC,KAAK,CAAC,eAAtC;EACA,uBAAuB,CAAC,KAAD,CAAvB;EACA,OAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CAVqE,CAA/D;AAYP,aAAa,CAAC,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport type { FieldProps } from '@fluentui/react-field';\nimport {\n  getFieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from '@fluentui/react-field';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { ProgressBar } from '../../ProgressBar';\n\nexport type ProgressFieldProps = FieldProps<typeof ProgressBar>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, {\n    component: ProgressBar,\n    classNames: progressFieldClassNames,\n    labelConnection: 'aria-labelledby',\n    ariaInvalidOnError: false,\n  });\n  state.control.validationState = state.validationState;\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":"../src/"}

package/lib/index.js

@@ -1,3 +1,3 @@
-export { Progress, progressClassNames, renderProgress_unstable, useProgress_unstable, useProgressStyles_unstable } from './Progress';
+export { ProgressBar, progressBarClassNames, renderProgressBar_unstable, useProgressBar_unstable, useProgressBarStyles_unstable } from './ProgressBar';
 export { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":"AAAA,SACE,QADF,EAEE,kBAFF,EAGE,uBAHF,EAIE,oBAJF,EAKE,0BALF,QAMO,YANP;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","sourcesContent":["export {\n  Progress,\n  progressClassNames,\n  renderProgress_unstable,\n  useProgress_unstable,\n  useProgressStyles_unstable,\n} from './Progress';\nexport type { ProgressProps, ProgressSlots, ProgressState } from './Progress';\n\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-progress/src/index.ts"],"names":[],"mappings":"AAAA,SACE,WADF,EAEE,qBAFF,EAGE,0BAHF,EAIE,uBAJF,EAKE,6BALF,QAMO,eANP;AASA,SAAS,aAAa,IAAI,sBAA1B,EAAkD,uBAAlD,QAAiF,iBAAjF","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\nexport { ProgressField as ProgressField_unstable, progressFieldClassNames } from './ProgressField';\nexport type { ProgressFieldProps as ProgressFieldProps_unstable } from './ProgressField';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/{Progress.js → ProgressBar.js}

@@ -6,5 +6,5 @@ Object.defineProperty(exports, "__esModule", {
 
 const tslib_1 = /*#__PURE__*/require("tslib");
 
-tslib_1.__exportStar(require("./components/Progress/index"), exports);
-//# sourceMappingURL=Progress.js.map
+tslib_1.__exportStar(require("./components/ProgressBar/index"), exports);
+//# sourceMappingURL=ProgressBar.js.map

package/lib-commonjs/ProgressBar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-progress/src/ProgressBar.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,gCAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/ProgressBar/index';\n"],"sourceRoot":"../src/"}

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressBar = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const useProgressBar_1 = /*#__PURE__*/require("./useProgressBar");
+
+const renderProgressBar_1 = /*#__PURE__*/require("./renderProgressBar");
+
+const useProgressBarStyles_1 = /*#__PURE__*/require("./useProgressBarStyles");
+/**
+ * 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);
+  return renderProgressBar_1.renderProgressBar_unstable(state);
+});
+exports.ProgressBar.displayName = 'ProgressBar';
+//# sourceMappingURL=ProgressBar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,qBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,gBAAA,CAAA,uBAAA,CAAwB,KAAxB,EAA+B,GAA/B,CAAd;EAEA,sBAAA,CAAA,6BAAA,CAA8B,KAA9B;EACA,OAAO,mBAAA,CAAA,0BAAA,CAA2B,KAA3B,CAAP;AACD,CALiE,CAArD;AAOb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","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"],"sourceRoot":"../src/"}

package/lib-commonjs/components/{Progress/Progress.types.js → ProgressBar/ProgressBar.types.js}

@@ -3,4 +3,4 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-//# sourceMappingURL=Progress.types.js.map
+//# sourceMappingURL=ProgressBar.types.js.map

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["packages/react-components/react-progress/src/components/ProgressBar/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,qBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,wBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './ProgressBar';\nexport * from './ProgressBar.types';\nexport * from './renderProgressBar';\nexport * from './useProgressBar';\nexport * from './useProgressBarStyles';\n"],"sourceRoot":"../src/"}