@fluentui/react-label 0.0.0-nightly07d9ed6d1b20211221.1 → 0.0.0-nightly0bc161458e20220126.1

package/CHANGELOG.json

@@ -2,46 +2,64 @@
   "name": "@fluentui/react-label",
   "entries": [
     {
-      "date": "Tue, 21 Dec 2021 04:16:43 GMT",
-      "tag": "@fluentui/react-label_v0.0.0-nightly07d9ed6d1b20211221.1",
-      "version": "0.0.0-nightly07d9ed6d1b20211221.1",
+      "date": "Wed, 26 Jan 2022 04:16:46 GMT",
+      "tag": "@fluentui/react-label_v0.0.0-nightly0bc161458e20220126.1",
+      "version": "0.0.0-nightly0bc161458e20220126.1",
       "comments": {
         "prerelease": [
           {
             "author": "email not defined",
             "package": "@fluentui/react-label",
-            "commit": "6e6f95bef032550f051ca8b80e4674e69f9edaa8",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c",
             "comment": "Release nightly v9"
           },
           {
-            "author": "beachball",
+            "author": "behowell@microsoft.com",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/react-make-styles to v0.0.0-nightly07d9ed6d1b20211221.1",
-            "commit": "6e6f95bef032550f051ca8b80e4674e69f9edaa8"
+            "commit": "317209bb5cd57c40f35bc42060acb7e3cce5ec95",
+            "comment": "BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet"
           },
           {
-            "author": "beachball",
+            "author": "Humberto.Morimoto@microsoft.com",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly07d9ed6d1b20211221.1",
-            "commit": "6e6f95bef032550f051ca8b80e4674e69f9edaa8"
+            "commit": "00a5d945904c896a0664de6ba72c145a255f0848",
+            "comment": "Updating use of tokens.fontWeight now that we don't need to use casting."
           },
           {
-            "author": "beachball",
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-label",
+            "commit": "742c191b7f2ea28505e49304117c090f9f36386c",
+            "comment": "Replace make-styles packages with griffel equivalents."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-label",
+            "commit": "0bc161458eae5ae8d387172430496ce9829b1bb1",
+            "comment": "Using ComponentSlotProps instead of ObjectShorthandProps."
+          },
+          {
+            "author": "Humberto.Morimoto@microsoft.com",
+            "package": "@fluentui/react-label",
+            "commit": "a052fbc9204600669d32b0ac346032d2cd8d9204",
+            "comment": "react-label: Replacing use of functions in makeStyles with direct use of tokens."
+          },
+          {
+            "author": "behowell@microsoft.com",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/babel-make-styles to v0.0.0-nightly07d9ed6d1b20211221.1",
-            "commit": "6e6f95bef032550f051ca8b80e4674e69f9edaa8"
+            "commit": "7cc28ed8320b00f42d91c63882f10316db2205c5",
+            "comment": "Remove component's shorthandProps array"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly07d9ed6d1b20211221.1",
-            "commit": "6e6f95bef032550f051ca8b80e4674e69f9edaa8"
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly0bc161458e20220126.1",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c"
           },
           {
             "author": "beachball",
             "package": "@fluentui/react-label",
-            "comment": "Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly07d9ed6d1b20211221.1",
-            "commit": "6e6f95bef032550f051ca8b80e4674e69f9edaa8"
+            "comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly0bc161458e20220126.1",
+            "commit": "68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c"
           }
         ],
         "none": [
@@ -50,6 +68,24 @@
             "package": "@fluentui/react-label",
             "commit": "084a7183511bae60a43e57fbd57979349c4736a4",
             "comment": "Migrate package to use solution tsconfigs"
+          },
+          {
+            "author": "olfedias@microsoft.com",
+            "package": "@fluentui/react-label",
+            "commit": "c061e98be4b4a718c72a144a1f60bb5515824612",
+            "comment": "remove inline-style-expand-shorthand from tsconfigs"
+          },
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/react-label",
+            "commit": "8dfa712156b70414205b87b5b6d099367b0c297d",
+            "comment": "chore: use storybook runner for all vNext packages"
+          },
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/react-label",
+            "commit": "d892c7f79c543b6008634ecd669b75b5108cad46",
+            "comment": "Relocate comment about props to the correct type, and update spec to accurately reflect props"
           }
         ]
       }

package/CHANGELOG.md

@@ -1,22 +1,25 @@
 # Change Log - @fluentui/react-label
 
-This log was last generated on Tue, 21 Dec 2021 04:16:43 GMT and should not be manually modified.
+This log was last generated on Wed, 26 Jan 2022 04:16:46 GMT and should not be manually modified.
 
 <!-- Start content -->
 
-## [0.0.0-nightly07d9ed6d1b20211221.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightly07d9ed6d1b20211221.1)
+## [0.0.0-nightly0bc161458e20220126.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v0.0.0-nightly0bc161458e20220126.1)
 
-Tue, 21 Dec 2021 04:16:43 GMT 
-[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.4..@fluentui/react-label_v0.0.0-nightly07d9ed6d1b20211221.1)
+Wed, 26 Jan 2022 04:16:46 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-label_v9.0.0-beta.4..@fluentui/react-label_v0.0.0-nightly0bc161458e20220126.1)
 
 ### Changes
 
-- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/6e6f95bef032550f051ca8b80e4674e69f9edaa8) by email not defined)
-- Bump @fluentui/react-make-styles to v0.0.0-nightly07d9ed6d1b20211221.1 ([commit](https://github.com/microsoft/fluentui/commit/6e6f95bef032550f051ca8b80e4674e69f9edaa8) by beachball)
-- Bump @fluentui/react-utilities to v0.0.0-nightly07d9ed6d1b20211221.1 ([commit](https://github.com/microsoft/fluentui/commit/6e6f95bef032550f051ca8b80e4674e69f9edaa8) by beachball)
-- Bump @fluentui/babel-make-styles to v0.0.0-nightly07d9ed6d1b20211221.1 ([commit](https://github.com/microsoft/fluentui/commit/6e6f95bef032550f051ca8b80e4674e69f9edaa8) by beachball)
-- Bump @fluentui/jest-serializer-make-styles to v0.0.0-nightly07d9ed6d1b20211221.1 ([commit](https://github.com/microsoft/fluentui/commit/6e6f95bef032550f051ca8b80e4674e69f9edaa8) by beachball)
-- Bump @fluentui/react-conformance-make-styles to v0.0.0-nightly07d9ed6d1b20211221.1 ([commit](https://github.com/microsoft/fluentui/commit/6e6f95bef032550f051ca8b80e4674e69f9edaa8) by beachball)
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by email not defined)
+- BREAKING: Rename component hooks add the suffix _unstable, as their API has not been finalized yet ([PR #21365](https://github.com/microsoft/fluentui/pull/21365) by behowell@microsoft.com)
+- Updating use of tokens.fontWeight now that we don't need to use casting. ([PR #21217](https://github.com/microsoft/fluentui/pull/21217) by Humberto.Morimoto@microsoft.com)
+- Replace make-styles packages with griffel equivalents. ([PR #21430](https://github.com/microsoft/fluentui/pull/21430) by olfedias@microsoft.com)
+- Using ComponentSlotProps instead of ObjectShorthandProps. ([PR #20890](https://github.com/microsoft/fluentui/pull/20890) by Humberto.Morimoto@microsoft.com)
+- react-label: Replacing use of functions in makeStyles with direct use of tokens. ([PR #21046](https://github.com/microsoft/fluentui/pull/21046) by Humberto.Morimoto@microsoft.com)
+- Remove component's shorthandProps array ([PR #21134](https://github.com/microsoft/fluentui/pull/21134) by behowell@microsoft.com)
+- Bump @fluentui/react-utilities to v0.0.0-nightly0bc161458e20220126.1 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by beachball)
+- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly0bc161458e20220126.1 ([commit](https://github.com/microsoft/fluentui/commit/68e7ec86018b052c1f95cc84d4a0a2fbe361eb7c) by beachball)
 
 ## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-label_v9.0.0-beta.4)
 

package/Spec.md

@@ -75,55 +75,48 @@ The Label component should be simple as shown below. It will just need the text
 ## API
 
 ```ts
-/**
- * Label Props
- */
-export type LabelProps = ComponentProps &
-  React.LabelHTMLAttributes<HTMLElement> & {
-    /**
-     * Renders the label as disabled
-     * @defaultvalue false
-     */
-    disabled?: boolean;
-
-    /**
-     * Whether the associated form field is required or not. If true it will be an asterisk, otherwise it will be what is provided.
-     * @defaultvalue false
-     */
-    required?: boolean | ShorthandProps<ComponentProps>;
+export type LabelCommons = {
+  /**
+   * Renders the label as disabled
+   * @defaultvalue false
+   */
+  disabled: boolean;
 
-    /**
-     * A label supports different font sizes, see tokens for reference.
-     * @defaultvalue 'medium'
-     */
-    size?: 'small' | 'medium' | 'large';
+  /**
+   * A label supports different sizes.
+   * @defaultvalue 'medium'
+   */
+  size: 'small' | 'medium' | 'large';
 
-    /**
-     * A label supports semibold/strong fontweight. When size is set to large, label strong will be set by default.
-     * @defaultvalue false
-     */
-    strong?: boolean;
-  };
+  /**
+   * A label supports semibold/strong fontweight.
+   * @defaultvalue false
+   */
+  strong: boolean;
+};
 
-/**
- * Names of the shorthand properties in LabelProps
- */
-export type LabelShorthandProps = 'required';
+export type LabelSlots = {
+  root: IntrinsicShorthandProps<'label'>;
+  required?: IntrinsicShorthandProps<'span'>;
+};
 
 /**
- * Names of LabelProps that have a default value in useLabel
+ * State used in rendering Label
  */
-export type LabelDefaultedProps = never;
+export type LabelState = ComponentState<LabelSlots> & LabelCommons;
 
 /**
- * State used in rendering Label
+ * Label Props
  */
-export type LabelState = ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
-  /**
-   * Ref to the root element
-   */
-  ref: React.Ref<HTMLElement>;
-};
+export type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> &
+  Partial<LabelCommons> & {
+    /**
+     * Displays and indicator that the label is for a required field. The required prop can be set to true to display
+     * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
+     * @defaultvalue false
+     */
+    required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
+  };
 ```
 
 ## Structure

package/dist/react-label.d.ts

@@ -2,7 +2,6 @@ import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
-import type { ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
 
 /**
@@ -12,9 +11,6 @@ export declare const Label: ForwardRefComponent<LabelProps>;
 
 export declare const labelClassName = "fui-Label";
 
-/**
- * Label Props
- */
 export declare type LabelCommons = {
     /**
      * Renders the label as disabled
@@ -33,21 +29,18 @@ export declare type LabelCommons = {
     strong: boolean;
 };
 
+/**
+ * Label Props
+ */
 export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
     /**
      * Displays and indicator that the label is for a required field. The required prop can be set to true to display
      * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
      * @defaultvalue false
      */
-    required?: boolean | ObjectShorthandProps<React_2.HTMLAttributes<HTMLElement>> | React_2.ReactNode;
+    required?: boolean | IntrinsicShorthandProps<'span'> | React_2.ReactNode;
 };
 
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export declare const labelShorthandProps: Array<keyof LabelSlots>;
-
 export declare type LabelSlots = {
     root: IntrinsicShorthandProps<'label'>;
     required?: IntrinsicShorthandProps<'span'>;
@@ -61,22 +54,22 @@ export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
 /**
  * Render the final JSX of Label
  */
-export declare const renderLabel: (state: LabelState) => JSX.Element;
+export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;
 
 /**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
  */
-export declare const useLabel: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
+export declare const useLabel_unstable: (props: LabelProps, ref: React_2.Ref<HTMLElement>) => LabelState;
 
 /**
  * Apply styling to the Label slots based on the state
  */
-export declare const useLabelStyles: (state: LabelState) => LabelState;
+export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;
 
 export { }

package/lib/components/Label/Label.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { useLabel } from './useLabel';
-import { renderLabel } from './renderLabel';
-import { useLabelStyles } from './useLabelStyles';
+import { useLabel_unstable } from './useLabel';
+import { renderLabel_unstable } from './renderLabel';
+import { useLabelStyles_unstable } from './useLabelStyles';
 /**
  * A label component provides a title or name to a component.
  */
 
 export const Label = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useLabel(props, ref);
-  useLabelStyles(state);
-  return renderLabel(state);
+  const state = useLabel_unstable(props, ref);
+  useLabelStyles_unstable(state);
+  return renderLabel_unstable(state);
 });
 Label.displayName = 'Label';
 //# sourceMappingURL=Label.js.map

package/lib/components/Label/Label.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,YAAzB;AACA,SAAS,WAAT,QAA4B,eAA5B;AACA,SAAS,cAAT,QAA+B,kBAA/B;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AAEA,EAAA,cAAc,CAAC,KAAD,CAAd;AACA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,iBAAT,QAAkC,YAAlC;AACA,SAAS,oBAAT,QAAqC,eAArC;AACA,SAAS,uBAAT,QAAwC,kBAAxC;AAIA;;AAEG;;AACH,OAAO,MAAM,KAAK,gBAAoC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,iBAAiB,CAAC,KAAD,EAAQ,GAAR,CAA/B;AAEA,EAAA,uBAAuB,CAAC,KAAD,CAAvB;AACA,SAAO,oBAAoB,CAAC,KAAD,CAA3B;AACD,CALqD,CAA/C;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}

package/lib/components/Label/Label.types.d.ts

@@ -1,8 +1,5 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React from 'react';
-/**
- * Label Props
- */
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 export declare type LabelCommons = {
     /**
      * Renders the label as disabled
@@ -28,11 +25,14 @@ export declare type LabelSlots = {
  * State used in rendering Label
  */
 export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
+/**
+ * Label Props
+ */
 export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
     /**
      * Displays and indicator that the label is for a required field. The required prop can be set to true to display
      * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
      * @defaultvalue false
      */
-    required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
+    required?: boolean | IntrinsicShorthandProps<'span'> | React.ReactNode;
 };

package/lib/components/Label/renderLabel.d.ts

@@ -2,4 +2,4 @@ import type { LabelState } from './Label.types';
 /**
  * Render the final JSX of Label
  */
-export declare const renderLabel: (state: LabelState) => JSX.Element;
+export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;

package/lib/components/Label/renderLabel.js

@@ -1,15 +1,14 @@
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { labelShorthandProps } from './useLabel';
 /**
  * Render the final JSX of Label
  */
 
-export const renderLabel = state => {
+export const renderLabel_unstable = state => {
   const {
     slots,
     slotProps
-  } = getSlots(state, labelShorthandProps);
+  } = getSlots(state);
   return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
   }, state.root.children, /*#__PURE__*/React.createElement(slots.required, { ...slotProps.required
   }));

package/lib/components/Label/renderLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AACA,SAAS,mBAAT,QAAoC,YAApC;AAGA;;AAEG;;AACH,OAAO,MAAM,WAAW,GAAI,KAAD,IAAsB;AAC/C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,EAAoB,mBAApB,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAFF,CADF;AAMD,CATM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAa,KAAb,CAArC;AAEA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,eAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAFF,CADF;AAMD,CATM","sourceRoot":""}

package/lib/components/Label/useLabel.d.ts

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import type { LabelProps, LabelSlots, LabelState } from './Label.types';
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export declare const labelShorthandProps: Array<keyof LabelSlots>;
+import type { LabelProps, LabelState } from './Label.types';
 /**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
  */
-export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
+export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;

package/lib/components/Label/useLabel.js

@@ -1,22 +1,16 @@
 import { getNativeElementProps } from '@fluentui/react-utilities';
 import { resolveShorthand } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-
-export const labelShorthandProps = ['root', 'required'];
 /**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
  */
 
-export const useLabel = (props, ref) => {
+export const useLabel_unstable = (props, ref) => {
   const {
     disabled = false,
     required = false,

package/lib/components/Label/useLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;AAGG;;AACH,OAAO,MAAM,mBAAmB,GAA4B,CAAC,MAAD,EAAS,UAAT,CAArD;AAEP;;;;;;;;AAQG;;AACH,OAAO,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AACrF,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7B,EAAuC;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,GAAZ;AAAiB,uBAAe;AAAhC;AAFiD,KAAvC,CAFrB;AAML,IAAA,MANK;AAOL,IAAA,IAPK;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAU;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAV;AATtB,GAAP;AAWD,CAbM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":"AACA,SAAS,qBAAT,QAAsC,2BAAtC;AAEA,SAAS,gBAAT,QAAiC,2BAAjC;AAEA;;;;;;;;AAQG;;AACH,OAAO,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,gBAAgB,CAAC,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7B,EAAuC;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,GAAZ;AAAiB,uBAAe;AAAhC;AAFiD,KAAvC,CAFrB;AAML,IAAA,MANK;AAOL,IAAA,IAPK;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAU;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAV;AATtB,GAAP;AAWD,CAbM","sourceRoot":""}

package/lib/components/Label/useLabelStyles.d.ts

@@ -3,4 +3,4 @@ export declare const labelClassName = "fui-Label";
 /**
  * Apply styling to the Label slots based on the state
  */
-export declare const useLabelStyles: (state: LabelState) => LabelState;
+export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;

package/lib/components/Label/useLabelStyles.js

@@ -1,4 +1,5 @@
-import { __styles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
 export const labelClassName = 'fui-Label';
 /**
  * Styles for the label
@@ -40,7 +41,7 @@ const useStyles = /*#__PURE__*/__styles({
  */
 
 
-export const useLabelStyles = state => {
+export const useLabelStyles_unstable = state => {
   const styles = useStyles();
   state.root.className = mergeClasses(labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
 

package/lib/components/Label/useLabelStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,6BAAzC;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACH,OAAO,MAAM,cAAc,GAAI,KAAD,IAAkC;AAC9D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHQ,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALU,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,QAAR,EAAkB,KAAK,CAAC,QAAN,CAAe,SAAjC,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,mBAAqB,YAArB,QAAyC,gBAAzC;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAGA,OAAO,MAAM,cAAc,GAAG,WAAvB;AAEP;;AAEG;;AACH,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACH,OAAO,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,cADiC,EAEjC,MAAM,CAAC,IAF0B,EAGjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHQ,EAIjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAJ2B,EAKjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALU,EAMjC,KAAK,CAAC,IAAN,CAAW,SANsB,CAAnC;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,YAAY,CAAC,MAAM,CAAC,QAAR,EAAkB,KAAK,CAAC,QAAN,CAAe,SAAjC,CAAvC;AACD;;AAED,SAAO,KAAP;AACD,CAhBM","sourceRoot":""}

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

@@ -18,9 +18,9 @@ const useLabelStyles_1 = /*#__PURE__*/require("./useLabelStyles");
 
 
 exports.Label = /*#__PURE__*/React.forwardRef((props, ref) => {
-  const state = useLabel_1.useLabel(props, ref);
-  useLabelStyles_1.useLabelStyles(state);
-  return renderLabel_1.renderLabel(state);
+  const state = useLabel_1.useLabel_unstable(props, ref);
+  useLabelStyles_1.useLabelStyles_unstable(state);
+  return renderLabel_1.renderLabel_unstable(state);
 });
 exports.Label.displayName = 'Label';
 //# sourceMappingURL=Label.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,QAAA,CAAS,KAAT,EAAgB,GAAhB,CAAd;AAEA,EAAA,gBAAA,CAAA,cAAA,CAAe,KAAf;AACA,SAAO,aAAA,CAAA,WAAA,CAAY,KAAZ,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/Label.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACpF,QAAM,KAAK,GAAG,UAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,CAAd;AAEA,EAAA,gBAAA,CAAA,uBAAA,CAAwB,KAAxB;AACA,SAAO,aAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CALqD,CAAzC;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}

package/lib-commonjs/components/Label/Label.types.d.ts

@@ -1,8 +1,5 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
 import * as React from 'react';
-/**
- * Label Props
- */
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
 export declare type LabelCommons = {
     /**
      * Renders the label as disabled
@@ -28,11 +25,14 @@ export declare type LabelSlots = {
  * State used in rendering Label
  */
 export declare type LabelState = ComponentState<LabelSlots> & LabelCommons;
+/**
+ * Label Props
+ */
 export declare type LabelProps = Omit<ComponentProps<LabelSlots>, 'required'> & Partial<LabelCommons> & {
     /**
      * Displays and indicator that the label is for a required field. The required prop can be set to true to display
      * an asterisk (*). Or it can be set to a string or jsx content to display a different indicator.
      * @defaultvalue false
      */
-    required?: boolean | ObjectShorthandProps<React.HTMLAttributes<HTMLElement>> | React.ReactNode;
+    required?: boolean | IntrinsicShorthandProps<'span'> | React.ReactNode;
 };

package/lib-commonjs/components/Label/renderLabel.d.ts

@@ -2,4 +2,4 @@ import type { LabelState } from './Label.types';
 /**
  * Render the final JSX of Label
  */
-export declare const renderLabel: (state: LabelState) => JSX.Element;
+export declare const renderLabel_unstable: (state: LabelState) => JSX.Element;

package/lib-commonjs/components/Label/renderLabel.js

@@ -3,27 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderLabel = void 0;
+exports.renderLabel_unstable = void 0;
 
 const React = /*#__PURE__*/require("react");
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-const useLabel_1 = /*#__PURE__*/require("./useLabel");
 /**
  * Render the final JSX of Label
  */
 
 
-const renderLabel = state => {
+const renderLabel_unstable = state => {
   const {
     slots,
     slotProps
-  } = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps);
+  } = react_utilities_1.getSlots(state);
   return React.createElement(slots.root, { ...slotProps.root
   }, state.root.children, React.createElement(slots.required, { ...slotProps.required
   }));
 };
 
-exports.renderLabel = renderLabel;
+exports.renderLabel_unstable = renderLabel_unstable;
 //# sourceMappingURL=renderLabel.js.map

package/lib-commonjs/components/Label/renderLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,WAAW,GAAI,KAAD,IAAsB;AAC/C,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,EAA4B,UAAA,CAAA,mBAA5B,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,WAAA,GAAW,WAAX","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAAI,KAAD,IAAsB;AACxD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,CAA7B;AAEA,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAFF,CADF;AAMD,CATM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourceRoot":""}

package/lib-commonjs/components/Label/useLabel.d.ts

@@ -1,17 +1,12 @@
 import * as React from 'react';
-import type { LabelProps, LabelSlots, LabelState } from './Label.types';
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-export declare const labelShorthandProps: Array<keyof LabelSlots>;
+import type { LabelProps, LabelState } from './Label.types';
 /**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
  */
-export declare const useLabel: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;
+export declare const useLabel_unstable: (props: LabelProps, ref: React.Ref<HTMLElement>) => LabelState;

package/lib-commonjs/components/Label/useLabel.js

@@ -3,29 +3,23 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLabel = exports.labelShorthandProps = void 0;
+exports.useLabel_unstable = void 0;
 
 const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
 const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-
-
-exports.labelShorthandProps = ['root', 'required'];
 /**
  * Create the state required to render Label.
  *
- * The returned state can be modified with hooks such as useLabelStyles,
- * before being passed to renderLabel.
+ * The returned state can be modified with hooks such as useLabelStyles_unstable,
+ * before being passed to renderLabel_unstable.
  *
  * @param props - props from this instance of Label
  * @param ref - reference to root HTMLElement of Label
  */
 
-const useLabel = (props, ref) => {
+
+const useLabel_unstable = (props, ref) => {
   const {
     disabled = false,
     required = false,
@@ -54,5 +48,5 @@ const useLabel = (props, ref) => {
   };
 };
 
-exports.useLabel = useLabel;
+exports.useLabel_unstable = useLabel_unstable;
 //# sourceMappingURL=useLabel.js.map

package/lib-commonjs/components/Label/useLabel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,mBAAA,GAA+C,CAAC,MAAD,EAAS,UAAT,CAA/C;AAEb;;;;;;;;AAQG;;AACI,MAAM,QAAQ,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AACrF,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7C,EAAuD;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,GAAZ;AAAiB,uBAAe;AAAhC;AAFiD,KAAvD,CAFL;AAML,IAAA,MANK;AAOL,IAAA,IAPK;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA+B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA/B;AATD,GAAP;AAWD,CAbM;;AAAM,OAAA,CAAA,QAAA,GAAQ,QAAR","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;;;;;;AAQG;;;AACI,MAAM,iBAAiB,GAAG,CAAC,KAAD,EAAoB,GAApB,KAA+D;AAC9F,QAAM;AAAE,IAAA,QAAQ,GAAG,KAAb;AAAoB,IAAA,QAAQ,GAAG,KAA/B;AAAsC,IAAA,MAAM,GAAG,KAA/C;AAAsD,IAAA,IAAI,GAAG;AAA7D,MAA0E,KAAhF;AACA,SAAO;AACL,IAAA,QADK;AAEL,IAAA,QAAQ,EAAE,iBAAA,CAAA,gBAAA,CAAiB,QAAQ,KAAK,KAAb,GAAqB,IAArB,GAA4B,QAA7C,EAAuD;AAC/D,MAAA,QAAQ,EAAE,CAAC,CAAC,QADmD;AAE/D,MAAA,YAAY,EAAE;AAAE,QAAA,QAAQ,EAAE,GAAZ;AAAiB,uBAAe;AAAhC;AAFiD,KAAvD,CAFL;AAML,IAAA,MANK;AAOL,IAAA,IAPK;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA+B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA/B;AATD,GAAP;AAWD,CAbM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}

package/lib-commonjs/components/Label/useLabelStyles.d.ts

@@ -3,4 +3,4 @@ export declare const labelClassName = "fui-Label";
 /**
  * Apply styling to the Label slots based on the state
  */
-export declare const useLabelStyles: (state: LabelState) => LabelState;
+export declare const useLabelStyles_unstable: (state: LabelState) => LabelState;

package/lib-commonjs/components/Label/useLabelStyles.js

@@ -3,16 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLabelStyles = exports.labelClassName = void 0;
+exports.useLabelStyles_unstable = exports.labelClassName = void 0;
 
-const react_make_styles_1 = /*#__PURE__*/require("@fluentui/react-make-styles");
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
 
 exports.labelClassName = 'fui-Label';
 /**
  * Styles for the label
  */
 
-const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "sj55zd": "f19n0e5"
@@ -48,16 +50,16 @@ const useStyles = /*#__PURE__*/react_make_styles_1.__styles({
  */
 
 
-const useLabelStyles = state => {
+const useLabelStyles_unstable = state => {
   const styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(exports.labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
+  state.root.className = react_1.mergeClasses(exports.labelClassName, styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
 
   if (state.required) {
-    state.required.className = react_make_styles_1.mergeClasses(styles.required, state.required.className);
+    state.required.className = react_1.mergeClasses(styles.required, state.required.className);
   }
 
   return state;
 };
 
-exports.useLabelStyles = useLabelStyles;
+exports.useLabelStyles_unstable = useLabelStyles_unstable;
 //# sourceMappingURL=useLabelStyles.js.map

package/lib-commonjs/components/Label/useLabelStyles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,mBAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACI,MAAM,cAAc,GAAI,KAAD,IAAkC;AAC9D,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHJ,EAIrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAJe,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,mBAAA,CAAA,YAAA,CAAa,MAAM,CAAC,QAApB,EAA8B,KAAK,CAAC,QAAN,CAAe,SAA7C,CAA3B;AACD;;AAED,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,cAAA,GAAc,cAAd","sourceRoot":""}
+{"version":3,"sources":["../../../src/components/Label/useLabelStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGa,OAAA,CAAA,cAAA,GAAiB,WAAjB;AAEb;;AAEG;;AACH,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAoCA;;AAEG;;;AACI,MAAM,uBAAuB,GAAI,KAAD,IAAkC;AACvE,QAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,OAAA,CAAA,YAAA,CACrB,OAAA,CAAA,cADqB,EAErB,MAAM,CAAC,IAFc,EAGrB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAHJ,EAIrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAJe,EAKrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MALF,EAMrB,KAAK,CAAC,IAAN,CAAW,SANU,CAAvB;;AASA,MAAI,KAAK,CAAC,QAAV,EAAoB;AAClB,IAAA,KAAK,CAAC,QAAN,CAAe,SAAf,GAA2B,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,QAApB,EAA8B,KAAK,CAAC,QAAN,CAAe,SAA7C,CAA3B;AACD;;AAED,SAAO,KAAP;AACD,CAhBM;;AAAM,OAAA,CAAA,uBAAA,GAAuB,uBAAvB","sourceRoot":""}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-label",
-  "version": "0.0.0-nightly07d9ed6d1b20211221.1",
+  "version": "0.0.0-nightly0bc161458e20220126.1",
   "description": "Label component for FluentUI library.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -22,15 +22,13 @@
     "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
     "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-label/src && yarn docs",
-    "storybook": "start-storybook",
+    "storybook": "node ../../scripts/storybook/runner",
     "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "0.0.0-nightly07d9ed6d1b20211221.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "0.0.0-nightly07d9ed6d1b20211221.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "0.0.0-nightly07d9ed6d1b20211221.1",
+    "@fluentui/react-conformance-griffel": "0.0.0-nightly0bc161458e20220126.1",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -44,8 +42,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "0.0.0-nightly07d9ed6d1b20211221.1",
-    "@fluentui/react-utilities": "0.0.0-nightly07d9ed6d1b20211221.1",
+    "@fluentui/react-utilities": "0.0.0-nightly0bc161458e20220126.1",
+    "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {