@fluentui/react-label 9.0.0-alpha.4 → 9.0.0-alpha.43

package/dist/react-label.d.ts

@@ -1,42 +1,75 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import { ComponentState } from '@fluentui/react-utilities';
+import { ComponentPropsCompat } from '@fluentui/react-utilities';
+import type { ComponentStateCompat } from '@fluentui/react-utilities';
+import { ObjectShorthandPropsCompat } from '@fluentui/react-utilities';
 import * as React_2 from 'react';
+import type { ShorthandPropsCompat } from '@fluentui/react-utilities';
 
 /**
  * A label component provides a title or name to a component.
  */
-export declare const Label: React_2.ForwardRefExoticComponent<LabelProps & React_2.RefAttributes<HTMLElement>>;
+export declare const Label: React_2.ForwardRefExoticComponent<ComponentPropsCompat & React_2.LabelHTMLAttributes<HTMLLabelElement> & {
+    disabled?: boolean | undefined;
+    required?: string | number | boolean | React_2.ReactElement<any, string | ((props: any) => React_2.ReactElement<any, string | any | (new (props: any) => React_2.Component<any, any, any>)> | null) | (new (props: any) => React_2.Component<any, any, any>)> | React_2.ReactNodeArray | React_2.ReactPortal | ObjectShorthandPropsCompat<ComponentPropsCompat> | null | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    strong?: boolean | undefined;
+} & React_2.RefAttributes<HTMLElement>>;
 
 /**
  * Names of LabelProps that have a default value in useLabel
  */
-export declare type LabelDefaultedProps = never;
+export declare type LabelDefaultedProps = 'size';
 
 /**
  * Label Props
  */
-export declare interface LabelProps extends ComponentProps, React_2.HTMLAttributes<HTMLElement> {
-}
+export declare type LabelProps = ComponentPropsCompat & React_2.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * Renders the label as disabled
+     * @defaultvalue false
+     */
+    disabled?: boolean;
+    /**
+     * 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 | ShorthandPropsCompat<ComponentPropsCompat>;
+    /**
+     * A label supports different sizes.
+     * @defaultvalue 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * A label supports semibold/strong fontweight.
+     * @defaultvalue false
+     */
+    strong?: boolean;
+};
 
 /**
  * Names of the shorthand properties in LabelProps
  */
-export declare type LabelShorthandProps = never;
+export declare type LabelShorthandProps = 'required';
 
 /**
  * Array of all shorthand properties listed in LabelShorthandProps
+ * {@docCatergory Label}
  */
 export declare const labelShorthandProps: LabelShorthandProps[];
 
 /**
  * State used in rendering Label
  */
-export declare interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
+export declare type LabelState = ComponentStateCompat<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
     /**
      * Ref to the root element
      */
     ref: React_2.Ref<HTMLElement>;
-}
+    /**
+     * The required prop resolved to a slot object
+     */
+    required?: ObjectShorthandPropsCompat<ComponentPropsCompat>;
+};
 
 /**
  * Render the final JSX of Label

package/lib/Label.js.map

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

package/lib/common/isConformant.d.ts

@@ -1,4 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
+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,9 +1,11 @@
 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', ''),
-    };
-    baseIsConformant(defaultOptions, 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 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAuB,MAAM,6BAA6B,CAAC;AAEpG,MAAM,UAAU,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"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/components/Label/Label.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
-import { LabelProps } from './Label.types';
 /**
  * A label component provides a title or name to a component.
  */
-export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
+export declare const Label: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.LabelHTMLAttributes<HTMLLabelElement> & {
+    disabled?: boolean | undefined;
+    required?: string | number | boolean | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ObjectShorthandPropsCompat<import("@fluentui/react-utilities").ComponentPropsCompat> | null | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    strong?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;

package/lib/components/Label/Label.js

@@ -5,10 +5,11 @@ import { useLabelStyles } from './useLabelStyles';
 /**
  * A label component provides a title or name to a component.
  */
-export var Label = React.forwardRef(function (props, ref) {
-    var state = useLabel(props, ref);
-    useLabelStyles(state);
-    return renderLabel(state);
+
+export var Label = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var state = useLabel(props, ref);
+  useLabelStyles(state);
+  return renderLabel(state);
 });
 Label.displayName = 'Label';
 //# sourceMappingURL=Label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["components/Label/Label.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAEtC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD;;GAEG;AACH,MAAM,CAAC,IAAM,KAAK,GAAG,KAAK,CAAC,UAAU,CAA0B,UAAC,KAAK,EAAE,GAAG;IACxE,IAAM,KAAK,GAAG,QAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEnC,cAAc,CAAC,KAAK,CAAC,CAAC;IACtB,OAAO,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,KAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useLabel } from './useLabel';\nimport { LabelProps } from './Label.types';\nimport { renderLabel } from './renderLabel';\nimport { useLabelStyles } from './useLabelStyles';\n\n/**\n * A label component provides a title or name to a component.\n */\nexport const Label = React.forwardRef<HTMLElement, LabelProps>((props, ref) => {\n  const state = useLabel(props, ref);\n\n  useLabelStyles(state);\n  return renderLabel(state);\n});\n\nLabel.displayName = 'Label';\n"]}
+{"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;AAGA;;AAEG;;AACH,OAAO,IAAM,KAAK,gBAAG,KAAK,CAAC,UAAN,CAA0C,UAAC,KAAD,EAAQ,GAAR,EAAW;AACxE,MAAM,KAAK,GAAG,QAAQ,CAAC,KAAD,EAAQ,GAAR,CAAtB;AAEA,EAAA,cAAc,CAAC,KAAD,CAAd;AACA,SAAO,WAAW,CAAC,KAAD,CAAlB;AACD,CALoB,CAAd;AAOP,KAAK,CAAC,WAAN,GAAoB,OAApB","sourceRoot":""}

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

@@ -1,24 +1,49 @@
 import * as React from 'react';
-import { ComponentProps, ComponentState } from '@fluentui/react-utilities';
+import type { ComponentPropsCompat, ComponentStateCompat, ObjectShorthandPropsCompat, ShorthandPropsCompat } from '@fluentui/react-utilities';
 /**
  * Label Props
  */
-export interface LabelProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-}
+export declare type LabelProps = ComponentPropsCompat & React.LabelHTMLAttributes<HTMLLabelElement> & {
+    /**
+     * Renders the label as disabled
+     * @defaultvalue false
+     */
+    disabled?: boolean;
+    /**
+     * 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 | ShorthandPropsCompat<ComponentPropsCompat>;
+    /**
+     * A label supports different sizes.
+     * @defaultvalue 'medium'
+     */
+    size?: 'small' | 'medium' | 'large';
+    /**
+     * A label supports semibold/strong fontweight.
+     * @defaultvalue false
+     */
+    strong?: boolean;
+};
 /**
  * Names of the shorthand properties in LabelProps
  */
-export declare type LabelShorthandProps = never;
+export declare type LabelShorthandProps = 'required';
 /**
  * Names of LabelProps that have a default value in useLabel
  */
-export declare type LabelDefaultedProps = never;
+export declare type LabelDefaultedProps = 'size';
 /**
  * State used in rendering Label
  */
-export interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {
+export declare type LabelState = ComponentStateCompat<LabelProps, LabelShorthandProps, LabelDefaultedProps> & {
     /**
      * Ref to the root element
      */
     ref: React.Ref<HTMLElement>;
-}
+    /**
+     * The required prop resolved to a slot object
+     */
+    required?: ObjectShorthandPropsCompat<ComponentPropsCompat>;
+};

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

@@ -1 +1 @@
-{"version":3,"file":"Label.types.js","sourceRoot":"../src/","sources":["components/Label/Label.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ComponentState } from '@fluentui/react-utilities';\n\n/**\n * Label Props\n */\nexport interface LabelProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {\n  /*\n   * TODO Add props and slots here\n   * Any slot property should be listed in the labelShorthandProps array below\n   * Any property that has a default value should be listed in LabelDefaultedProps as e.g. 'size' | 'icon'\n   */\n}\n\n/**\n * Names of the shorthand properties in LabelProps\n */\nexport type LabelShorthandProps = never; // TODO add shorthand property names\n\n/**\n * Names of LabelProps that have a default value in useLabel\n */\nexport type LabelDefaultedProps = never; // TODO add names of properties with default values\n\n/**\n * State used in rendering Label\n */\nexport interface LabelState extends ComponentState<LabelProps, LabelShorthandProps, LabelDefaultedProps> {\n  /**\n   * Ref to the root element\n   */\n  ref: React.Ref<HTMLElement>;\n}\n"]}
+{"version":3,"file":"Label.types.js","sourceRoot":"","sources":["../../../src/components/Label/Label.types.ts"],"names":[],"mappings":""}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC","sourcesContent":["export * from './Label';\nexport * from './Label.types';\nexport * from './renderLabel';\nexport * from './useLabel';\nexport * from './useLabelStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Label/index.ts"],"names":[],"mappings":"AAAA,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC"}

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

@@ -1,4 +1,4 @@
-import { LabelState } from './Label.types';
+import type { LabelState } from './Label.types';
 /**
  * Render the final JSX of Label
  */

package/lib/components/Label/renderLabel.js

@@ -1,12 +1,16 @@
 import { __assign } from "tslib";
 import * as React from 'react';
-import { getSlots } from '@fluentui/react-utilities';
+import { getSlotsCompat } from '@fluentui/react-utilities';
 import { labelShorthandProps } from './useLabel';
 /**
  * Render the final JSX of Label
  */
+
 export var renderLabel = function (state) {
-    var _a = getSlots(state, labelShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    return (React.createElement(slots.root, __assign({}, slotProps.root), state.children));
+  var _a = getSlotsCompat(state, labelShorthandProps),
+      slots = _a.slots,
+      slotProps = _a.slotProps;
+
+  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), state.children, state.required && /*#__PURE__*/React.createElement(slots.required, __assign({}, slotProps.required)));
 };
 //# sourceMappingURL=renderLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderLabel.js","sourceRoot":"../src/","sources":["components/Label/renderLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEjD;;GAEG;AACH,MAAM,CAAC,IAAM,WAAW,GAAG,UAAC,KAAiB;IACrC,IAAA,KAAuB,QAAQ,CAAC,KAAK,EAAE,mBAAmB,CAAC,EAAzD,KAAK,WAAA,EAAE,SAAS,eAAyC,CAAC;IAElE,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,GAE3B,KAAK,CAAC,QAAQ,CACJ,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { LabelState } from './Label.types';\nimport { labelShorthandProps } from './useLabel';\n\n/**\n * Render the final JSX of Label\n */\nexport const renderLabel = (state: LabelState) => {\n  const { slots, slotProps } = getSlots(state, labelShorthandProps);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {/* TODO Add additional slots in the appropriate place */}\n      {state.children}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"sources":["../../../src/components/Label/renderLabel.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,cAAT,QAA+B,2BAA/B;AACA,SAAS,mBAAT,QAAoC,YAApC;AAGA;;AAEG;;AACH,OAAO,IAAM,WAAW,GAAG,UAAC,KAAD,EAAkB;AACrC,MAAA,EAAA,GAAuB,cAAc,CAAC,KAAD,EAAQ,mBAAR,CAArC;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AAEN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,KAAK,CAAC,QADT,EAEG,KAAK,CAAC,QAAN,iBAAkB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,QAAP,EAAe,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,QAAf,CAAf,CAFrB,CADF;AAMD,CATM","sourceRoot":""}

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

@@ -1,7 +1,8 @@
 import * as React from 'react';
-import { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
+import type { LabelProps, LabelShorthandProps, LabelState } from './Label.types';
 /**
  * Array of all shorthand properties listed in LabelShorthandProps
+ * {@docCatergory Label}
  */
 export declare const labelShorthandProps: LabelShorthandProps[];
 /**

package/lib/components/Label/useLabel.js

@@ -1,11 +1,14 @@
+import { __assign } from "tslib";
 import { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';
 /**
  * Array of all shorthand properties listed in LabelShorthandProps
+ * {@docCatergory Label}
  */
-export var labelShorthandProps = [
-/* TODO add shorthand property names */
-];
-var mergeProps = makeMergeProps({ deepMerge: labelShorthandProps });
+
+export var labelShorthandProps = ['required'];
+var mergeProps = /*#__PURE__*/makeMergeProps({
+  deepMerge: labelShorthandProps
+});
 /**
  * Create the state required to render Label.
  *
@@ -16,10 +19,42 @@ var mergeProps = makeMergeProps({ deepMerge: labelShorthandProps });
  * @param ref - reference to root HTMLElement of Label
  * @param defaultProps - (optional) default prop values provided by the implementing type
  */
+
 export var useLabel = function (props, ref, defaultProps) {
-    var state = mergeProps({
-        ref: ref,
-    }, defaultProps && resolveShorthandProps(defaultProps, labelShorthandProps), resolveShorthandProps(props, labelShorthandProps));
-    return state;
+  var state = mergeProps({
+    ref: ref,
+    as: 'label',
+    size: 'medium',
+    required: {
+      as: 'span'
+    }
+  }, defaultProps && resolveLabelShorthandProps(defaultProps), resolveLabelShorthandProps(props));
+  return state;
+};
+/**
+ * Label will first need to check if required is a boolean or shorthandprops,
+ * this allows for the required prop to handle both the default asterisk for required
+ * or a custom required text.
+ */
+
+var resolveLabelShorthandProps = function (props) {
+  var propsNormalized;
+
+  if (props.required === true) {
+    propsNormalized = __assign(__assign({}, props), {
+      required: {
+        children: '*'
+      }
+    });
+  } else if (props.required === false) {
+    propsNormalized = __assign(__assign({}, props), {
+      required: undefined
+    });
+  } else {
+    // TypeScript needs a nudge to figure out that props.required won't be a boolean here
+    propsNormalized = props;
+  }
+
+  return resolveShorthandProps(propsNormalized, labelShorthandProps);
 };
 //# sourceMappingURL=useLabel.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useLabel.js","sourceRoot":"../src/","sources":["components/Label/useLabel.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC;AAGlF;;GAEG;AACH,MAAM,CAAC,IAAM,mBAAmB,GAA0B;AACxD,uCAAuC;CACxC,CAAC;AAEF,IAAM,UAAU,GAAG,cAAc,CAAa,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC,CAAC;AAElF;;;;;;;;;GASG;AACH,MAAM,CAAC,IAAM,QAAQ,GAAG,UAAC,KAAiB,EAAE,GAA2B,EAAE,YAAyB;IAChG,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,KAAA;KACJ,EACD,YAAY,IAAI,qBAAqB,CAAC,YAAY,EAAE,mBAAmB,CAAC,EACxE,qBAAqB,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAClD,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps } from '@fluentui/react-utilities';\nimport { LabelProps, LabelShorthandProps, LabelState } from './Label.types';\n\n/**\n * Array of all shorthand properties listed in LabelShorthandProps\n */\nexport const labelShorthandProps: LabelShorthandProps[] = [\n  /* TODO add shorthand property names */\n];\n\nconst mergeProps = makeMergeProps<LabelState>({ deepMerge: labelShorthandProps });\n\n/**\n * Create the state required to render Label.\n *\n * The returned state can be modified with hooks such as useLabelStyles,\n * before being passed to renderLabel.\n *\n * @param props - props from this instance of Label\n * @param ref - reference to root HTMLElement of Label\n * @param defaultProps - (optional) default prop values provided by the implementing type\n */\nexport const useLabel = (props: LabelProps, ref: React.Ref<HTMLElement>, defaultProps?: LabelProps): LabelState => {\n  const state = mergeProps(\n    {\n      ref,\n    },\n    defaultProps && resolveShorthandProps(defaultProps, labelShorthandProps),\n    resolveShorthandProps(props, labelShorthandProps),\n  );\n\n  return state;\n};\n"]}
+{"version":3,"sources":["../../../src/components/Label/useLabel.tsx"],"names":[],"mappings":";AACA,SAAS,cAAT,EAAyB,qBAAzB,QAAsD,2BAAtD;AAGA;;;AAGG;;AACH,OAAO,IAAM,mBAAmB,GAA0B,CAAC,UAAD,CAAnD;AAEP,IAAM,UAAU,gBAAG,cAAc,CAAa;AAAE,EAAA,SAAS,EAAE;AAAb,CAAb,CAAjC;AAEA;;;;;;;;;AASG;;AACH,OAAO,IAAM,QAAQ,GAAG,UAAC,KAAD,EAAoB,GAApB,EAAiD,YAAjD,EAA0E;AAChG,MAAM,KAAK,GAAG,UAAU,CACtB;AACE,IAAA,GAAG,EAAA,GADL;AAEE,IAAA,EAAE,EAAE,OAFN;AAGE,IAAA,IAAI,EAAE,QAHR;AAIE,IAAA,QAAQ,EAAE;AACR,MAAA,EAAE,EAAE;AADI;AAJZ,GADsB,EAStB,YAAY,IAAI,0BAA0B,CAAC,YAAD,CATpB,EAUtB,0BAA0B,CAAC,KAAD,CAVJ,CAAxB;AAaA,SAAO,KAAP;AACD,CAfM;AAiBP;;;;AAIG;;AACH,IAAM,0BAA0B,GAAG,UAAC,KAAD,EAAkB;AACnD,MAAI,eAAJ;;AACA,MAAI,KAAK,CAAC,QAAN,KAAmB,IAAvB,EAA6B;AAC3B,IAAA,eAAe,GAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAA,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAE,QAAA,QAAQ,EAAE;AAAZ;AAAZ,KAAb,CAAf;AACD,GAFD,MAEO,IAAI,KAAK,CAAC,QAAN,KAAmB,KAAvB,EAA8B;AACnC,IAAA,eAAe,GAAA,QAAA,CAAA,QAAA,CAAA,EAAA,EAAQ,KAAR,CAAA,EAAa;AAAE,MAAA,QAAQ,EAAE;AAAZ,KAAb,CAAf;AACD,GAFM,MAEA;AACL;AACA,IAAA,eAAe,GAAG,KAAlB;AACD;;AAED,SAAO,qBAAqB,CAAC,eAAD,EAAkB,mBAAlB,CAA5B;AACD,CAZD","sourceRoot":""}

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

@@ -1,4 +1,4 @@
-import { LabelState } from './Label.types';
+import type { LabelState } from './Label.types';
 /**
  * Apply styling to the Label slots based on the state
  */

package/lib/components/Label/useLabelStyles.js

@@ -1,20 +1,52 @@
-import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
+import { __styles, mergeClasses } from '@fluentui/react-make-styles';
 /**
- * Styles for the root slot
+ * Styles for the label
  */
-var useStyles = makeStyles({
-    root: function (theme) { return ({
-    // TODO Add default styles for the root element
-    }); },
+
+var useStyles = /*#__PURE__*/__styles({
+  "root": {
+    "Bahqtrf": "f1kx028l",
+    "sj55zd": "f16th3vw"
+  },
+  "disabled": {
+    "sj55zd": "f1eu23ty"
+  },
+  "required": {
+    "sj55zd": "f1pp183j",
+    "uwmqm3": ["fycuoez", "f8wuabp"]
+  },
+  "small": {
+    "Be2twd7": "ft25vac",
+    "Bg96gwp": "f6u047o"
+  },
+  "medium": {
+    "Be2twd7": "flcnb0",
+    "Bg96gwp": "f1syuwty"
+  },
+  "large": {
+    "Be2twd7": "f1y5x3qd",
+    "Bg96gwp": "f1r32vcg",
+    "Bhrd7zp": "fss2gpl"
+  },
+  "strong": {
+    "Bhrd7zp": "fss2gpl"
+  }
+}, {
+  "d": [".f1kx028l{font-family:var(--global-type-fontFamilies-base);}", ".f16th3vw{color:var(--alias-color-neutral-neutralForeground1);}", ".f1eu23ty{color:var(--alias-color-neutral-neutralForegroundDisabled);}", ".f1pp183j{color:var(--alias-color-red-foreground3);}", ".fycuoez{padding-left:4px;}", ".f8wuabp{padding-right:4px;}", ".ft25vac{font-size:var(--global-type-fontSizes-base-200);}", ".f6u047o{line-height:var(--global-type-lineHeights-base-200);}", ".flcnb0{font-size:var(--global-type-fontSizes-base-300);}", ".f1syuwty{line-height:var(--global-type-lineHeights-base-300);}", ".f1y5x3qd{font-size:var(--global-type-fontSizes-base-400);}", ".f1r32vcg{line-height:var(--global-type-lineHeights-base-400);}", ".fss2gpl{font-weight:var(--global-type-fontWeights-semibold);}"]
 });
 /**
  * Apply styling to the Label slots based on the state
  */
+
+
 export var useLabelStyles = function (state) {
-    var styles = useStyles();
-    state.className = mergeClasses(styles.root, state.className);
-    // TODO Add class names to slots, for example:
-    // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);
-    return state;
+  var styles = useStyles();
+  state.className = mergeClasses(styles.root, state.disabled && styles.disabled, styles[state.size], state.strong && styles.strong, state.className);
+
+  if (state.required) {
+    state.required.className = mergeClasses(styles.required, state.required.className);
+  }
+
+  return state;
 };
 //# sourceMappingURL=useLabelStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useLabelStyles.js","sourceRoot":"../src/","sources":["components/Label/useLabelStyles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,6BAA6B,CAAC;AAGvE;;GAEG;AACH,IAAM,SAAS,GAAG,UAAU,CAAC;IAC3B,IAAI,EAAE,UAAA,KAAK,IAAI,OAAA,CAAC;IACd,+CAA+C;KAChD,CAAC,EAFa,CAEb;CAGH,CAAC,CAAC;AAEH;;GAEG;AACH,MAAM,CAAC,IAAM,cAAc,GAAG,UAAC,KAAiB;IAC9C,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;IAC3B,KAAK,CAAC,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAE7D,8CAA8C;IAC9C,gFAAgF;IAEhF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';\nimport { LabelState } from './Label.types';\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: theme => ({\n    // TODO Add default styles for the root element\n  }),\n\n  // TODO add additional classes for different states and/or slots\n});\n\n/**\n * Apply styling to the Label slots based on the state\n */\nexport const useLabelStyles = (state: LabelState): LabelState => {\n  const styles = useStyles();\n  state.className = mergeClasses(styles.root, state.className);\n\n  // TODO Add class names to slots, for example:\n  // state.mySlot.className = mergeClasses(styles.mySlot, state.mySlot.className);\n\n  return state;\n};\n"]}
+{"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,SAAN,GAAkB,YAAY,CAC5B,MAAM,CAAC,IADqB,EAE5B,KAAK,CAAC,QAAN,IAAkB,MAAM,CAAC,QAFG,EAG5B,MAAM,CAAC,KAAK,CAAC,IAAP,CAHsB,EAI5B,KAAK,CAAC,MAAN,IAAgB,MAAM,CAAC,MAJK,EAK5B,KAAK,CAAC,SALsB,CAA9B;;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":""}

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAEA,cAAc,SAAS,CAAC","sourcesContent":["// TODO: replace with real exports\nexport {};\nexport * from './Label';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,SAAS,CAAC"}

package/lib/tsdoc-metadata.json

@@ -5,7 +5,7 @@
   "toolPackages": [
     {
       "packageName": "@microsoft/api-extractor",
-      "packageVersion": "7.13.0"
+      "packageVersion": "7.18.1"
     }
   ]
 }

package/lib-commonjs/Label.js

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

package/lib-commonjs/Label.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["Label.ts"],"names":[],"mappings":";;;AAAA,mEAAyC","sourcesContent":["export * from './components/Label/index';\n"]}
+{"version":3,"sources":["../src/Label.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourceRoot":""}

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

@@ -1,4 +1,4 @@
-import { IsConformantOptions } from '@fluentui/react-conformance';
+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,13 +1,22 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.isConformant = void 0;
-var react_conformance_1 = require("@fluentui/react-conformance");
+
+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', ''),
-    };
-    react_conformance_1.isConformant(defaultOptions, 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 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":";;;AAAA,iEAAoG;AAEpG,SAAgB,YAAY,CAC1B,QAAyF;IAEzF,IAAM,cAAc,GAAyC;QAC3D,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gCAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC;AATD,oCASC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant<TProps = {}>(\n  testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & { componentPath?: string },\n) {\n  const defaultOptions: Partial<IsConformantOptions<TProps>> = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"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":""}

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

@@ -1,6 +1,10 @@
 import * as React from 'react';
-import { LabelProps } from './Label.types';
 /**
  * A label component provides a title or name to a component.
  */
-export declare const Label: React.ForwardRefExoticComponent<LabelProps & React.RefAttributes<HTMLElement>>;
+export declare const Label: React.ForwardRefExoticComponent<import("@fluentui/react-utilities").ComponentPropsCompat & React.LabelHTMLAttributes<HTMLLabelElement> & {
+    disabled?: boolean | undefined;
+    required?: string | number | boolean | React.ReactElement<any, string | ((props: any) => React.ReactElement<any, string | any | (new (props: any) => React.Component<any, any, any>)> | null) | (new (props: any) => React.Component<any, any, any>)> | React.ReactNodeArray | React.ReactPortal | import("@fluentui/react-utilities").ObjectShorthandPropsCompat<import("@fluentui/react-utilities").ComponentPropsCompat> | null | undefined;
+    size?: "small" | "medium" | "large" | undefined;
+    strong?: boolean | undefined;
+} & React.RefAttributes<HTMLElement>>;

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

@@ -1,17 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 exports.Label = void 0;
-var React = require("react");
-var useLabel_1 = require("./useLabel");
-var renderLabel_1 = require("./renderLabel");
-var useLabelStyles_1 = require("./useLabelStyles");
+
+var React = /*#__PURE__*/require("react");
+
+var useLabel_1 = /*#__PURE__*/require("./useLabel");
+
+var renderLabel_1 = /*#__PURE__*/require("./renderLabel");
+
+var useLabelStyles_1 = /*#__PURE__*/require("./useLabelStyles");
 /**
  * A label component provides a title or name to a component.
  */
-exports.Label = 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(function (props, ref) {
+  var state = useLabel_1.useLabel(props, ref);
+  useLabelStyles_1.useLabelStyles(state);
+  return renderLabel_1.renderLabel(state);
 });
 exports.Label.displayName = 'Label';
 //# sourceMappingURL=Label.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Label.js","sourceRoot":"../src/","sources":["components/Label/Label.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,uCAAsC;AAEtC,6CAA4C;AAC5C,mDAAkD;AAElD;;GAEG;AACU,QAAA,KAAK,GAAG,KAAK,CAAC,UAAU,CAA0B,UAAC,KAAK,EAAE,GAAG;IACxE,IAAM,KAAK,GAAG,mBAAQ,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAEnC,+BAAc,CAAC,KAAK,CAAC,CAAC;IACtB,OAAO,yBAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,CAAC,CAAC,CAAC;AAEH,aAAK,CAAC,WAAW,GAAG,OAAO,CAAC","sourcesContent":["import * as React from 'react';\nimport { useLabel } from './useLabel';\nimport { LabelProps } from './Label.types';\nimport { renderLabel } from './renderLabel';\nimport { useLabelStyles } from './useLabelStyles';\n\n/**\n * A label component provides a title or name to a component.\n */\nexport const Label = React.forwardRef<HTMLElement, LabelProps>((props, ref) => {\n  const state = useLabel(props, ref);\n\n  useLabelStyles(state);\n  return renderLabel(state);\n});\n\nLabel.displayName = 'Label';\n"]}
+{"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;AAGA;;AAEG;;;AACU,OAAA,CAAA,KAAA,gBAAQ,KAAK,CAAC,UAAN,CAA0C,UAAC,KAAD,EAAQ,GAAR,EAAW;AACxE,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,CALoB,CAAR;AAOb,OAAA,CAAA,KAAA,CAAM,WAAN,GAAoB,OAApB","sourceRoot":""}