@fluentui/react-label 9.0.0-beta.1 → 9.0.0-beta.5

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,48 +1,39 @@
-import { __assign } from "tslib";
 import { getNativeElementProps } from '@fluentui/react-utilities';
 import { resolveShorthand } from '@fluentui/react-utilities';
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-
-export var 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 var useLabel = function (props, ref) {
-  var _a = props.disabled,
-      disabled = _a === void 0 ? false : _a,
-      _b = props.required,
-      required = _b === void 0 ? false : _b,
-      _c = props.strong,
-      strong = _c === void 0 ? false : _c,
-      _d = props.size,
-      size = _d === void 0 ? 'medium' : _d;
+export const useLabel_unstable = (props, ref) => {
+  const {
+    disabled = false,
+    required = false,
+    strong = false,
+    size = 'medium'
+  } = props;
   return {
-    disabled: disabled,
-    required: resolveShorthand(required === false ? null : required, {
-      required: !!required,
+    disabled,
+    required: resolveShorthand(required === true ? '*' : required || undefined, {
       defaultProps: {
-        children: '*'
+        'aria-hidden': 'true'
       }
     }),
-    strong: strong,
-    size: size,
+    strong,
+    size,
     components: {
       root: 'label',
       required: 'span'
     },
-    root: getNativeElementProps('label', __assign({
-      ref: ref
-    }, props))
+    root: getNativeElementProps('label', {
+      ref,
+      ...props
+    })
   };
 };
 //# sourceMappingURL=useLabel.js.map

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,IAAM,mBAAmB,GAA4B,CAAC,MAAD,EAAS,UAAT,CAArD;AAEP;;;;;;;;AAQG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAA+C;AAC7D,MAAA,EAAA,GAAwE,KAAK,CAA7D,QAAhB;AAAA,MAAA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAhB;AAAA,MAAkB,EAAA,GAAsD,KAAK,CAA3C,QAAlC;AAAA,MAAkB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlC;AAAA,MAAoC,EAAA,GAAoC,KAAK,CAA3B,MAAlD;AAAA,MAAoC,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlD;AAAA,MAAoD,EAAA,GAAoB,KAAK,CAAV,IAAnE;AAAA,MAAoD,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAnE;AACR,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;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;AAAZ;AAFiD,KAAvC,CAFrB;AAML,IAAA,MAAM,EAAA,MAND;AAOL,IAAA,IAAI,EAAA,IAPC;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAQ,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAAR;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,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvC,EAAkD;AAC1E,MAAA,YAAY,EAAE;AAAE,uBAAe;AAAjB;AAD4D,KAAlD,CAFrB;AAKL,IAAA,MALK;AAML,IAAA,IANK;AAOL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KAPP;AAQL,IAAA,IAAI,EAAE,qBAAqB,CAAC,OAAD,EAAU;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAAV;AARtB,GAAP;AAUD,CAZM","sourceRoot":""}

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

@@ -1,5 +1,6 @@
 import type { LabelState } from './Label.types';
+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,9 +1,11 @@
-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
  */
 
-var useStyles = /*#__PURE__*/__styles({
+const useStyles = /*#__PURE__*/__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "sj55zd": "f19n0e5"
@@ -39,9 +41,9 @@ var useStyles = /*#__PURE__*/__styles({
  */
 
 
-export var useLabelStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
+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);
 
   if (state.required) {
     state.required.className = mergeClasses(styles.required, state.required.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;;AAEG;;AACH,IAAM,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,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,YAAY,CACjC,MAAM,CAAC,IAD0B,EAEjC,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFQ,EAGjC,MAAM,CAAC,KAAK,CAAC,IAAP,CAH2B,EAIjC,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJU,EAKjC,KAAK,CAAC,IAAN,CAAW,SALsB,CAAnC;;AAQA,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,CAfM","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/Label.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./components/Label/index"), exports);
 //# sourceMappingURL=Label.js.map

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

@@ -5,22 +5,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Label = void 0;
 
-var React = /*#__PURE__*/require("react");
+const React = /*#__PURE__*/require("react");
 
-var useLabel_1 = /*#__PURE__*/require("./useLabel");
+const useLabel_1 = /*#__PURE__*/require("./useLabel");
 
-var renderLabel_1 = /*#__PURE__*/require("./renderLabel");
+const renderLabel_1 = /*#__PURE__*/require("./renderLabel");
 
-var useLabelStyles_1 = /*#__PURE__*/require("./useLabelStyles");
+const useLabelStyles_1 = /*#__PURE__*/require("./useLabelStyles");
 /**
  * A label component provides a title or name to a component.
  */
 
 
-exports.Label = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var state = useLabel_1.useLabel(props, ref);
-  useLabelStyles_1.useLabelStyles(state);
-  return renderLabel_1.renderLabel(state);
+exports.Label = /*#__PURE__*/React.forwardRef((props, ref) => {
+  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,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;;AACA,IAAA,aAAA,gBAAA,OAAA,CAAA,eAAA,CAAA;;AACA,IAAA,gBAAA,gBAAA,OAAA,CAAA,kBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAyC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AAChF,MAAM,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,9 +1,5 @@
-import type { ComponentProps, ComponentState, IntrinsicShorthandProps, ObjectShorthandProps } from '@fluentui/react-utilities';
-import * as React from 'react';
-/**
- * Label Props
- */
-export declare type LabelCommons = {
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+declare type LabelCommons = {
     /**
      * Renders the label as disabled
      * @defaultvalue false
@@ -21,18 +17,22 @@ export declare type LabelCommons = {
     strong: boolean;
 };
 export declare type LabelSlots = {
-    root: IntrinsicShorthandProps<'label'>;
-    required?: IntrinsicShorthandProps<'span'>;
+    root: Slot<'label'>;
+    required?: Slot<'span'>;
 };
 /**
  * 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 | Slot<'span'>;
 };
+export {};

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

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Label"), exports);
 

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;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const React = /*#__PURE__*/require("react");
 
-var React = /*#__PURE__*/require("react");
-
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var useLabel_1 = /*#__PURE__*/require("./useLabel");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * Render the final JSX of Label
  */
 
 
-var renderLabel = function (state) {
-  var _a = react_utilities_1.getSlots(state, useLabel_1.labelShorthandProps),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), state.root.children, React.createElement(slots.required, tslib_1.__assign({}, slotProps.required)));
+const renderLabel_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state);
+  return React.createElement(slots.root, { ...slotProps.root
+  }, state.root.children, slots.required && 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,IAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,IAAA,UAAA,gBAAA,OAAA,CAAA,YAAA,CAAA;AAGA;;AAEG;;;AACI,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,iBAAA,CAAA,QAAA,CAAqB,KAArB,EAA4B,UAAA,CAAA,mBAA5B,CAAvB;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,SACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,IAAN,CAAW,QADd,EAEE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,OAAA,CAAA,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,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,EAEG,KAAK,CAAC,QAAN,IAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,EAAA,GAAK,SAAS,CAAC;AAAf,GAAf,CAFrB,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,58 +3,48 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLabel = exports.labelShorthandProps = void 0;
+exports.useLabel_unstable = void 0;
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 
-var react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
-var react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Array of all shorthand properties listed in LabelShorthandProps
- * {@docCatergory Label}
- */
-
-
-exports.labelShorthandProps = ['root', 'required'];
+const react_utilities_2 = /*#__PURE__*/require("@fluentui/react-utilities");
 /**
  * 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
  */
 
-var useLabel = function (props, ref) {
-  var _a = props.disabled,
-      disabled = _a === void 0 ? false : _a,
-      _b = props.required,
-      required = _b === void 0 ? false : _b,
-      _c = props.strong,
-      strong = _c === void 0 ? false : _c,
-      _d = props.size,
-      size = _d === void 0 ? 'medium' : _d;
+
+const useLabel_unstable = (props, ref) => {
+  const {
+    disabled = false,
+    required = false,
+    strong = false,
+    size = 'medium'
+  } = props;
   return {
-    disabled: disabled,
-    required: react_utilities_2.resolveShorthand(required === false ? null : required, {
-      required: !!required,
+    disabled,
+    required: react_utilities_2.resolveShorthand(required === true ? '*' : required || undefined, {
       defaultProps: {
-        children: '*'
+        'aria-hidden': 'true'
       }
     }),
-    strong: strong,
-    size: size,
+    strong,
+    size,
     components: {
       root: 'label',
       required: 'span'
     },
-    root: react_utilities_1.getNativeElementProps('label', tslib_1.__assign({
-      ref: ref
-    }, props))
+    root: react_utilities_1.getNativeElementProps('label', {
+      ref,
+      ...props
+    })
   };
 };
 
-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,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,IAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAEA;;;AAGG;;;AACU,OAAA,CAAA,mBAAA,GAA+C,CAAC,MAAD,EAAS,UAAT,CAA/C;AAEb;;;;;;;;AAQG;;AACI,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAA+C;AAC7D,MAAA,EAAA,GAAwE,KAAK,CAA7D,QAAhB;AAAA,MAAA,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAhB;AAAA,MAAkB,EAAA,GAAsD,KAAK,CAA3C,QAAlC;AAAA,MAAkB,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlC;AAAA,MAAoC,EAAA,GAAoC,KAAK,CAA3B,MAAlD;AAAA,MAAoC,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAlD;AAAA,MAAoD,EAAA,GAAoB,KAAK,CAAV,IAAnE;AAAA,MAAoD,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAnE;AACR,SAAO;AACL,IAAA,QAAQ,EAAA,QADH;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;AAAZ;AAFiD,KAAvD,CAFL;AAML,IAAA,MAAM,EAAA,MAND;AAOL,IAAA,IAAI,EAAA,IAPC;AAQL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KARP;AASL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA6B,OAAA,CAAA,QAAA,CAAA;AAAI,MAAA,GAAG,EAAA;AAAP,KAAA,EAAY,KAAZ,CAA7B;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,IAAb,GAAoB,GAApB,GAA0B,QAAQ,IAAI,SAAvD,EAAkE;AAC1E,MAAA,YAAY,EAAE;AAAE,uBAAe;AAAjB;AAD4D,KAAlE,CAFL;AAKL,IAAA,MALK;AAML,IAAA,IANK;AAOL,IAAA,UAAU,EAAE;AAAE,MAAA,IAAI,EAAE,OAAR;AAAiB,MAAA,QAAQ,EAAE;AAA3B,KAPP;AAQL,IAAA,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,OAAtB,EAA+B;AAAE,MAAA,GAAF;AAAO,SAAG;AAAV,KAA/B;AARD,GAAP;AAUD,CAZM;;AAAM,OAAA,CAAA,iBAAA,GAAiB,iBAAjB","sourceRoot":""}

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

@@ -1,5 +1,6 @@
 import type { LabelState } from './Label.types';
+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,15 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useLabelStyles = void 0;
+exports.useLabelStyles_unstable = exports.labelClassName = void 0;
 
-var 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
  */
 
-
-var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
+const useStyles = /*#__PURE__*/react_1.__styles({
   "root": {
     "Bahqtrf": "fk6fouc",
     "sj55zd": "f19n0e5"
@@ -47,16 +50,16 @@ var useStyles = /*#__PURE__*/react_make_styles_1.__styles({
  */
 
 
-var useLabelStyles = function (state) {
-  var styles = useStyles();
-  state.root.className = react_make_styles_1.mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.root.className);
+const useLabelStyles_unstable = state => {
+  const styles = useStyles();
+  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,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;AAGA;;AAEG;;;AACH,IAAM,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,IAAM,cAAc,GAAG,UAAC,KAAD,EAAkB;AAC9C,MAAM,MAAM,GAAG,SAAS,EAAxB;AACA,EAAA,KAAK,CAAC,IAAN,CAAW,SAAX,GAAuB,mBAAA,CAAA,YAAA,CACrB,MAAM,CAAC,IADc,EAErB,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFJ,EAGrB,MAAM,CAAC,KAAK,CAAC,IAAP,CAHe,EAIrB,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJF,EAKrB,KAAK,CAAC,IAAN,CAAW,SALU,CAAvB;;AAQA,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,CAfM;;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/lib-commonjs/index.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var tslib_1 = /*#__PURE__*/require("tslib");
+const tslib_1 = /*#__PURE__*/require("tslib");
 
 tslib_1.__exportStar(require("./Label"), exports);
 //# sourceMappingURL=index.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fluentui/react-label",
-  "version": "9.0.0-beta.1",
-  "description": "Label component for FluentUI library.",
+  "version": "9.0.0-beta.5",
+  "description": "Fluent UI React Label component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
@@ -19,17 +19,16 @@
     "just": "just-scripts",
     "lint": "just-scripts lint",
     "start": "yarn storybook",
-    "test": "jest",
+    "test": "jest --passWithNoTests",
     "docs": "api-extractor run --config=config/api-extractor.local.json --local",
-    "build:local": "tsc -p . --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output dist/packages/react-label/src && yarn docs",
-    "storybook": "start-storybook"
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../scripts/typescript/normalize-import --output ./dist/packages/react-label/src && yarn docs",
+    "storybook": "node ../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
   },
   "devDependencies": {
-    "@fluentui/babel-make-styles": "9.0.0-beta.1",
     "@fluentui/eslint-plugin": "*",
-    "@fluentui/jest-serializer-make-styles": "9.0.0-beta.1",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-make-styles": "9.0.0-beta.1",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.1",
     "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
@@ -43,8 +42,8 @@
     "react-test-renderer": "^16.3.0"
   },
   "dependencies": {
-    "@fluentui/react-make-styles": "9.0.0-beta.1",
-    "@fluentui/react-utilities": "9.0.0-beta.1",
+    "@fluentui/react-utilities": "9.0.0-rc.1",
+    "@griffel/react": "1.0.0",
     "tslib": "^2.1.0"
   },
   "peerDependencies": {
@@ -54,7 +53,6 @@
     "react-dom": ">=16.8.0 <18.0.0"
   },
   "beachball": {
-    "tag": "beta",
     "disallowedChangeTypes": [
       "major",
       "minor",

package/lib/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import type { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;

package/lib/common/isConformant.js

@@ -1,11 +0,0 @@
-import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
-import makeStylesTests from '@fluentui/react-conformance-make-styles';
-export function isConformant(testInfo) {
-  var defaultOptions = {
-    asPropHandlesRef: true,
-    componentPath: module.parent.filename.replace('.test', ''),
-    extraTests: makeStylesTests
-  };
-  baseIsConformant(defaultOptions, testInfo);
-}
-//# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAiD,6BAAjD;AAEA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE;AAH+C,GAA7D;AAMA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

package/lib-commonjs/common/isConformant.d.ts

@@ -1,4 +0,0 @@
-import type { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
-    componentPath?: string;
-}): void;

package/lib-commonjs/common/isConformant.js

@@ -1,22 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isConformant = void 0;
-
-var react_conformance_1 = /*#__PURE__*/require("@fluentui/react-conformance");
-
-var react_conformance_make_styles_1 = /*#__PURE__*/require("@fluentui/react-conformance-make-styles");
-
-function isConformant(testInfo) {
-  var defaultOptions = {
-    asPropHandlesRef: true,
-    componentPath: module.parent.filename.replace('.test', ''),
-    extraTests: react_conformance_make_styles_1.default
-  };
-  react_conformance_1.isConformant(defaultOptions, testInfo);
-}
-
-exports.isConformant = isConformant;
-//# sourceMappingURL=isConformant.js.map

package/lib-commonjs/common/isConformant.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAEA,IAAA,+BAAA,gBAAA,OAAA,CAAA,yCAAA,CAAA;;AAEA,SAAgB,YAAhB,CACE,QADF,EAC2F;AAEzF,MAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE,+BAAA,CAAA;AAH+C,GAA7D;AAMA,EAAA,mBAAA,CAAA,YAAA,CAAiB,cAAjB,EAAiC,QAAjC;AACD;;AAVD,OAAA,CAAA,YAAA,GAAA,YAAA","sourceRoot":""}