@fluentui/react-field 9.5.0 → 9.5.2

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @fluentui/react-field
 
-This log was last generated on Wed, 01 Apr 2026 15:50:20 GMT and should not be manually modified.
+This log was last generated on Tue, 26 May 2026 09:34:20 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [9.5.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.2)
+
+Tue, 26 May 2026 09:34:20 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.5.1..@fluentui/react-field_v9.5.2)
+
+### Patches
+
+- Bump @fluentui/react-context-selector to v9.2.17 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.3 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-label to v9.4.2 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+- Bump @fluentui/react-utilities to v9.26.4 ([PR #36246](https://github.com/microsoft/fluentui/pull/36246) by beachball)
+
+## [9.5.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.1)
+
+Thu, 23 Apr 2026 14:21:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.5.0..@fluentui/react-field_v9.5.1)
+
+### Patches
+
+- fix: add missing base hook export ([PR #35972](https://github.com/microsoft/fluentui/pull/35972) by dmytrokirpa@microsoft.com)
+- Bump @fluentui/react-context-selector to v9.2.16 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-jsx-runtime to v9.4.2 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-label to v9.4.1 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+- Bump @fluentui/react-utilities to v9.26.3 ([PR #36035](https://github.com/microsoft/fluentui/pull/36035) by beachball)
+
 ## [9.5.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.5.0)
 
-Wed, 01 Apr 2026 15:50:20 GMT 
+Wed, 01 Apr 2026 15:52:40 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.4.16..@fluentui/react-field_v9.5.0)
 
 ### Minor changes

package/dist/index.d.ts

@@ -1,14 +1,19 @@
 import type { ComponentProps } from '@fluentui/react-utilities';
 import type { ComponentState } from '@fluentui/react-utilities';
+import type { DistributiveOmit } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import { Label } from '@fluentui/react-label';
+import type { Label } from '@fluentui/react-label';
 import * as React_2 from 'react';
 import type { Slot } from '@fluentui/react-utilities';
 import type { SlotClassNames } from '@fluentui/react-utilities';
 
 export declare const Field: ForwardRefComponent<FieldProps>;
 
+export declare type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;
+
+export declare type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;
+
 export declare const fieldClassNames: SlotClassNames<FieldSlots>;
 
 export declare const FieldContextProvider: React_2.Provider<Readonly<Pick<FieldState, "required" | "size" | "orientation" | "validationState" | "generatedControlId"> & {
@@ -158,7 +163,7 @@ export declare type FieldState = ComponentState<Required<FieldSlots>> & Required
 /**
  * Render the final JSX of Field
  */
-export declare const renderField_unstable: (state: FieldState, contextValues: FieldContextValues) => JSXElement;
+export declare const renderField_unstable: (state: FieldBaseState, contextValues: FieldContextValues) => JSXElement;
 
 /**
  * Create the state required to render Field.
@@ -171,6 +176,15 @@ export declare const renderField_unstable: (state: FieldState, contextValues: Fi
  */
 export declare const useField_unstable: (props: FieldProps, ref: React_2.Ref<HTMLDivElement>) => FieldState;
 
+/**
+ * Base hook for Field component, which manages state related to validation, ARIA attributes,
+ * ID generation, and slot structure without design props.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the root
+ */
+export declare const useFieldBase_unstable: (props: FieldBaseProps, ref: React_2.Ref<HTMLDivElement>) => FieldBaseState;
+
 export declare const useFieldContext_unstable: () => FieldContextValue | undefined;
 
 /**

package/lib/Field.js

@@ -1 +1 @@
-export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './components/Field/index';
+export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable, useFieldBase_unstable } from './components/Field/index';

package/lib/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable"],"mappings":"AAQA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,QACZ,2BAA2B"}
+{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable"],"mappings":"AAUA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,2BAA2B"}

package/lib/components/Field/Field.types.js

@@ -1 +1 @@
-import * as React from 'react';
+export { };

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n   *\n   * For other controls, there are two options:\n   * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n   *    `<Field>{(props) => <MyInput {...props} />}</Field>`\n   * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n   *    `props = useFieldControlProps_unstable(props);`\n   */\n  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n   *     announced by screen readers.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n  Pick<FieldProps, 'children'> & {\n    /**\n     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n     */\n    generatedControlId: string;\n  };\n\nexport type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\n\nexport type FieldContextValue = Readonly<\n  Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n    /** The label's for prop. Undefined if there is no label. */\n    labelFor?: string;\n    /** The label's id prop. Undefined if there is no label. */\n    labelId?: string;\n    /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n    validationMessageId?: string;\n    /** The hint's id prop. Undefined if there is no hint. */\n    hintId?: string;\n  }\n>;\n\nexport type FieldContextValues = {\n  field: FieldContextValue;\n};\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}
+{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n   *\n   * For other controls, there are two options:\n   * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n   *    `<Field>{(props) => <MyInput {...props} />}</Field>`\n   * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n   *    `props = useFieldControlProps_unstable(props);`\n   */\n  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n   *     announced by screen readers.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n  Pick<FieldProps, 'children'> & {\n    /**\n     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n     */\n    generatedControlId: string;\n  };\n\nexport type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\n\nexport type FieldContextValue = Readonly<\n  Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n    /** The label's for prop. Undefined if there is no label. */\n    labelFor?: string;\n    /** The label's id prop. Undefined if there is no label. */\n    labelId?: string;\n    /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n    validationMessageId?: string;\n    /** The hint's id prop. Undefined if there is no hint. */\n    hintId?: string;\n  }\n>;\n\nexport type FieldContextValues = {\n  field: FieldContextValue;\n};\n"],"names":[],"mappings":"AAkIA,WAEE"}

package/lib/components/Field/index.js

@@ -1,4 +1,5 @@
 export { Field } from './Field';
 export { renderField_unstable } from './renderField';
-export { useField_unstable, useFieldBase_unstable } from './useField';
+export { useField_unstable } from './useField';
+export { useFieldBase_unstable } from './useFieldBase';
 export { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable, useFieldBase_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":"AAUA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}
+{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable } from './useField';\nexport { useFieldBase_unstable } from './useFieldBase';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":"AAUA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,eAAe,EAAEC,uBAAuB,QAAQ,0BAA0B"}

package/lib/components/Field/renderField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC;IACtDL,YAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,qBACE,KAACN;QAAqBO,KAAK,EAAEH,0BAAAA,oCAAAA,cAAeE,KAAK;kBAC/C,cAAA,MAACH,MAAMK,IAAI;;gBACRL,MAAMM,KAAK,kBAAI,KAACN,MAAMM,KAAK;gBAC3BJ;gBACAF,MAAMO,iBAAiB,kBACtB,MAACP,MAAMO,iBAAiB;;wBACrBP,MAAMQ,qBAAqB,kBAAI,KAACR,MAAMQ,qBAAqB;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,kBAAI,KAACT,MAAMS,IAAI;;;;AAIlC,EAAE"}
+{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldBaseState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldBaseState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAuBC;IAC1DL,YAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,qBACE,KAACN;QAAqBO,KAAK,EAAEH,0BAAAA,oCAAAA,cAAeE,KAAK;kBAC/C,cAAA,MAACH,MAAMK,IAAI;;gBACRL,MAAMM,KAAK,kBAAI,KAACN,MAAMM,KAAK;gBAC3BJ;gBACAF,MAAMO,iBAAiB,kBACtB,MAACP,MAAMO,iBAAiB;;wBACrBP,MAAMQ,qBAAqB,kBAAI,KAACR,MAAMQ,qBAAqB;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,kBAAI,KAACT,MAAMS,IAAI;;;;AAIlC,EAAE"}

package/lib/components/Field/useField.js

@@ -2,7 +2,8 @@
 import * as React from 'react';
 import { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';
 import { Label } from '@fluentui/react-label';
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+import { slot } from '@fluentui/react-utilities';
+import { useFieldBase_unstable } from './useFieldBase';
 const validationMessageIcons = {
     error: /*#__PURE__*/ React.createElement(DiamondDismiss12Filled, null),
     warning: /*#__PURE__*/ React.createElement(Warning12Filled, null),
@@ -46,65 +47,3 @@ const validationMessageIcons = {
         size
     };
 };
-/**
- * Base hook for Field component, which manages state related to validation, ARIA attributes,
- * ID generation, and slot structure without design props.
- *
- * @param props - Props passed to this field
- * @param ref - Ref to the root
- */ export const useFieldBase_unstable = (props, ref)=>{
-    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
-    const baseId = useId('field-');
-    const generatedControlId = baseId + '__control';
-    const root = slot.always(getIntrinsicElementProps('div', {
-        ...props,
-        ref
-    }, /*excludedPropNames:*/ [
-        'children'
-    ]), {
-        elementType: 'div'
-    });
-    const label = slot.optional(props.label, {
-        defaultProps: {
-            htmlFor: generatedControlId,
-            id: baseId + '__label',
-            required
-        },
-        elementType: 'label'
-    });
-    const validationMessage = slot.optional(props.validationMessage, {
-        defaultProps: {
-            id: baseId + '__validationMessage',
-            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
-        },
-        elementType: 'div'
-    });
-    const hint = slot.optional(props.hint, {
-        defaultProps: {
-            id: baseId + '__hint'
-        },
-        elementType: 'div'
-    });
-    const validationMessageIcon = slot.optional(props.validationMessageIcon, {
-        renderByDefault: false,
-        elementType: 'span'
-    });
-    return {
-        children,
-        generatedControlId,
-        required,
-        validationState,
-        components: {
-            root: 'div',
-            label: 'label',
-            validationMessage: 'div',
-            validationMessageIcon: 'span',
-            hint: 'div'
-        },
-        root,
-        label,
-        validationMessageIcon,
-        validationMessage,
-        hint
-    };
-};

package/lib/components/Field/useField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","getIntrinsicElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","useFieldBase_unstable","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children","required","validationMessage","baseId","generatedControlId","root","always","htmlFor","id","role","hint"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,wBAAwB;AACzG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACP;IACRQ,uBAAS,oBAACP;IACVQ,uBAAS,oBAACV;IACVW,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQC,sBAAsBF,YAAYH;IAEhD,MAAMM,cAAcd,sBAAsB,CAACY,MAAMG,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGH,KAAK;QACR,4DAA4D;QAC5DI,YAAY;YAAE,GAAGJ,MAAMI,UAAU;YAAEC,OAAOrB;QAAM;QAChDqB,OAAOlB,KAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;YAChCE,cAAc;gBAAET;gBAAM,GAAGE,MAAMK,KAAK;YAAC;YACrCG,aAAaxB;QACf;QACAyB,uBAAuBtB,KAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAX;QACAC;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMG,wBAAwB,CAACN,OAAuBC;IAC3D,MAAM,EAAEe,QAAQ,EAAEC,WAAW,KAAK,EAAET,kBAAkBR,MAAMkB,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGlB;IAErG,MAAMmB,SAAS5B,MAAM;IACrB,MAAM6B,qBAAqBD,SAAS;IAEpC,MAAME,OAAO7B,KAAK8B,MAAM,CAAChC,yBAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHY,aAAa;IACf;IACA,MAAMH,QAAQlB,KAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;QACvCE,cAAc;YAAEW,SAASH;YAAoBI,IAAIL,SAAS;YAAWF;QAAS;QAC9EJ,aAAa;IACf;IACA,MAAMK,oBAAoB1B,KAAKmB,QAAQ,CAACX,MAAMkB,iBAAiB,EAAE;QAC/DN,cAAc;YACZY,IAAIL,SAAS;YACbM,MAAMjB,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUV;QACjF;QACAe,aAAa;IACf;IACA,MAAMa,OAAOlC,KAAKmB,QAAQ,CAACX,MAAM0B,IAAI,EAAE;QAAEd,cAAc;YAAEY,IAAIL,SAAS;QAAS;QAAGN,aAAa;IAAM;IACrG,MAAMC,wBAAwBtB,KAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBF,aAAa;IACf;IAEA,OAAO;QACLG;QACAI;QACAH;QACAT;QACAC,YAAY;YAAEY,MAAM;YAAOX,OAAO;YAASQ,mBAAmB;YAAOJ,uBAAuB;YAAQY,MAAM;QAAM;QAChHL;QACAX;QACAI;QACAI;QACAQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\nimport { useFieldBase_unstable } from './useFieldBase';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","slot","useFieldBase_unstable","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,sBAAsB,EAAEC,eAAe,QAAQ,wBAAwB;AACzG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,IAAI,QAAQ,4BAA4B;AAEjD,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACN;IACRO,uBAAS,oBAACN;IACVO,uBAAS,oBAACT;IACVU,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQb,sBAAsBY,YAAYH;IAEhD,MAAMK,cAAcb,sBAAsB,CAACY,MAAME,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGF,KAAK;QACR,4DAA4D;QAC5DG,YAAY;YAAE,GAAGH,MAAMG,UAAU;YAAEC,OAAOnB;QAAM;QAChDmB,OAAOlB,KAAKmB,QAAQ,CAACV,MAAMS,KAAK,EAAE;YAChCE,cAAc;gBAAER;gBAAM,GAAGE,MAAMI,KAAK;YAAC;YACrCG,aAAatB;QACf;QACAuB,uBAAuBtB,KAAKmB,QAAQ,CAACV,MAAMa,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAV;QACAC;IACF;AACF,EAAE"}

package/lib/components/Field/useFieldBase.js

@@ -0,0 +1,63 @@
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+/**
+ * Base hook for Field component, which manages state related to validation, ARIA attributes,
+ * ID generation, and slot structure without design props.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the root
+ */ export const useFieldBase_unstable = (props, ref)=>{
+    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
+    const baseId = useId('field-');
+    const generatedControlId = baseId + '__control';
+    const root = slot.always(getIntrinsicElementProps('div', {
+        ...props,
+        ref
+    }, /*excludedPropNames:*/ [
+        'children'
+    ]), {
+        elementType: 'div'
+    });
+    const label = slot.optional(props.label, {
+        defaultProps: {
+            htmlFor: generatedControlId,
+            id: baseId + '__label',
+            required
+        },
+        elementType: 'label'
+    });
+    const validationMessage = slot.optional(props.validationMessage, {
+        defaultProps: {
+            id: baseId + '__validationMessage',
+            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
+        },
+        elementType: 'div'
+    });
+    const hint = slot.optional(props.hint, {
+        defaultProps: {
+            id: baseId + '__hint'
+        },
+        elementType: 'div'
+    });
+    const validationMessageIcon = slot.optional(props.validationMessageIcon, {
+        renderByDefault: false,
+        elementType: 'span'
+    });
+    return {
+        children,
+        generatedControlId,
+        required,
+        validationState,
+        components: {
+            root: 'div',
+            label: 'label',
+            validationMessage: 'div',
+            validationMessageIcon: 'span',
+            hint: 'div'
+        },
+        root,
+        label,
+        validationMessageIcon,
+        validationMessage,
+        hint
+    };
+};

package/lib/components/Field/useFieldBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/useFieldBase.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState } from './Field.types';\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["getIntrinsicElementProps","useId","slot","useFieldBase_unstable","props","ref","children","required","validationState","validationMessage","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","undefined","hint","validationMessageIcon","renderByDefault","components"],"mappings":"AAEA,SAASA,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF;;;;;;CAMC,GACD,OAAO,MAAMC,wBAAwB,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAEC,kBAAkBJ,MAAMK,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGL;IAErG,MAAMM,SAAST,MAAM;IACrB,MAAMU,qBAAqBD,SAAS;IAEpC,MAAME,OAAOV,KAAKW,MAAM,CAACb,yBAAyB,OAAO;QAAE,GAAGI,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHS,aAAa;IACf;IACA,MAAMC,QAAQb,KAAKc,QAAQ,CAACZ,MAAMW,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWH;QAAS;QAC9EO,aAAa;IACf;IACA,MAAML,oBAAoBP,KAAKc,QAAQ,CAACZ,MAAMK,iBAAiB,EAAE;QAC/DQ,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMZ,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUa;QACjF;QACAP,aAAa;IACf;IACA,MAAMQ,OAAOpB,KAAKc,QAAQ,CAACZ,MAAMkB,IAAI,EAAE;QAAEL,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMS,wBAAwBrB,KAAKc,QAAQ,CAACZ,MAAMmB,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBV,aAAa;IACf;IAEA,OAAO;QACLR;QACAK;QACAJ;QACAC;QACAiB,YAAY;YAAEb,MAAM;YAAOG,OAAO;YAASN,mBAAmB;YAAOc,uBAAuB;YAAQD,MAAM;QAAM;QAChHV;QACAG;QACAQ;QACAd;QACAa;IACF;AACF,EAAE"}

package/lib/components/Field/useFieldStyles.styles.js

@@ -99,22 +99,27 @@ export const useFieldStyles_unstable = state => {
   } = state;
   const horizontal = state.orientation === 'horizontal';
   const rootStyles = useRootStyles();
+  // eslint-disable-next-line react-hooks/immutability
   state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
   const labelStyles = useLabelStyles();
   if (state.label) {
+    // eslint-disable-next-line react-hooks/immutability
     state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
   }
   const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
   const validationMessageIconStyles = useValidationMessageIconStyles();
   if (state.validationMessageIcon) {
+    // eslint-disable-next-line react-hooks/immutability
     state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
   }
   const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
   const secondaryTextStyles = useSecondaryTextStyles();
   if (state.validationMessage) {
+    // eslint-disable-next-line react-hooks/immutability
     state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
   }
   if (state.hint) {
+    // eslint-disable-next-line react-hooks/immutability
     state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
   }
   return state;

package/lib/components/Field/useFieldStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","B2u0y6b","Bxyxcbc","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["useFieldStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n    root: `fui-Field`,\n    label: `fui-Field__label`,\n    validationMessage: `fui-Field__validationMessage`,\n    validationMessageIcon: `fui-Field__validationMessageIcon`,\n    hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid'\n    },\n    // In horizontal layout, the field is a grid with the label taking up the entire first column.\n    // The last row is slack space in case the label is taller than the rest of the content.\n    horizontal: {\n        gridTemplateColumns: '33% 1fr',\n        gridTemplateRows: 'auto auto auto 1fr'\n    },\n    // In horizontal layout without a label, replace the label's column with padding.\n    // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n    horizontalNoLabel: {\n        paddingLeft: '33%',\n        gridTemplateColumns: '1fr'\n    }\n});\nconst useLabelStyles = makeStyles({\n    base: {\n        maxWidth: 'max-content',\n        maxHeight: 'max-content'\n    },\n    vertical: {\n        paddingTop: tokens.spacingVerticalXXS,\n        paddingBottom: tokens.spacingVerticalXXS,\n        marginBottom: tokens.spacingVerticalXXS\n    },\n    verticalLarge: {\n        paddingTop: '1px',\n        paddingBottom: '1px',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    horizontal: {\n        paddingTop: tokens.spacingVerticalSNudge,\n        paddingBottom: tokens.spacingVerticalSNudge,\n        marginRight: tokens.spacingHorizontalM,\n        gridRowStart: '1',\n        gridRowEnd: '-1'\n    },\n    horizontalSmall: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS\n    },\n    horizontalLarge: {\n        // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n        paddingTop: '9px',\n        paddingBottom: '9px'\n    }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\n    },\n    withIcon: {\n        // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n        paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n    }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n    display: 'inline-block',\n    fontSize: iconSize,\n    // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n    marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n    marginRight: tokens.spacingHorizontalXS,\n    // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n    lineHeight: '0',\n    // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n    verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\n    },\n    warning: {\n        color: tokens.colorPaletteDarkOrangeForeground1\n    },\n    success: {\n        color: tokens.colorPaletteGreenForeground1\n    }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n    'use no memo';\n    const { validationState, size } = state;\n    const horizontal = state.orientation === 'horizontal';\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n    }\n    const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n    const validationMessageIconStyles = useValidationMessageIconStyles();\n    if (state.validationMessageIcon) {\n        state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n    }\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const secondaryTextStyles = useSecondaryTextStyles();\n    if (state.validationMessage) {\n        state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n    }\n    if (state.hint) {\n        state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","B2u0y6b","Bxyxcbc","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"sources":["useFieldStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n    root: `fui-Field`,\n    label: `fui-Field__label`,\n    validationMessage: `fui-Field__validationMessage`,\n    validationMessageIcon: `fui-Field__validationMessageIcon`,\n    hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid'\n    },\n    // In horizontal layout, the field is a grid with the label taking up the entire first column.\n    // The last row is slack space in case the label is taller than the rest of the content.\n    horizontal: {\n        gridTemplateColumns: '33% 1fr',\n        gridTemplateRows: 'auto auto auto 1fr'\n    },\n    // In horizontal layout without a label, replace the label's column with padding.\n    // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n    horizontalNoLabel: {\n        paddingLeft: '33%',\n        gridTemplateColumns: '1fr'\n    }\n});\nconst useLabelStyles = makeStyles({\n    base: {\n        maxWidth: 'max-content',\n        maxHeight: 'max-content'\n    },\n    vertical: {\n        paddingTop: tokens.spacingVerticalXXS,\n        paddingBottom: tokens.spacingVerticalXXS,\n        marginBottom: tokens.spacingVerticalXXS\n    },\n    verticalLarge: {\n        paddingTop: '1px',\n        paddingBottom: '1px',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    horizontal: {\n        paddingTop: tokens.spacingVerticalSNudge,\n        paddingBottom: tokens.spacingVerticalSNudge,\n        marginRight: tokens.spacingHorizontalM,\n        gridRowStart: '1',\n        gridRowEnd: '-1'\n    },\n    horizontalSmall: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS\n    },\n    horizontalLarge: {\n        // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n        paddingTop: '9px',\n        paddingBottom: '9px'\n    }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\n    },\n    withIcon: {\n        // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n        paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n    }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n    display: 'inline-block',\n    fontSize: iconSize,\n    // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n    marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n    marginRight: tokens.spacingHorizontalXS,\n    // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n    lineHeight: '0',\n    // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n    verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\n    },\n    warning: {\n        color: tokens.colorPaletteDarkOrangeForeground1\n    },\n    success: {\n        color: tokens.colorPaletteGreenForeground1\n    }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n    'use no memo';\n    const { validationState, size } = state;\n    const horizontal = state.orientation === 'horizontal';\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n    }\n    const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n    const validationMessageIconStyles = useValidationMessageIconStyles();\n    if (state.validationMessageIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n    }\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const secondaryTextStyles = useSecondaryTextStyles();\n    if (state.validationMessage) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n    }\n    if (state.hint) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n    }\n    return state;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/components/Field/useFieldStyles.styles.raw.js

@@ -105,22 +105,27 @@ const useValidationMessageIconStyles = makeStyles({
     const { validationState, size } = state;
     const horizontal = state.orientation === 'horizontal';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
     }
     const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
     const validationMessageIconStyles = useValidationMessageIconStyles();
     if (state.validationMessageIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
     }
     const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
     const secondaryTextStyles = useSecondaryTextStyles();
     if (state.validationMessage) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
     }
     if (state.hint) {
+        // eslint-disable-next-line react-hooks/immutability
         state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
     }
     return state;

package/lib/components/Field/useFieldStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n  root: `fui-Field`,\n  label: `fui-Field__label`,\n  validationMessage: `fui-Field__validationMessage`,\n  validationMessageIcon: `fui-Field__validationMessageIcon`,\n  hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'grid',\n  },\n\n  // In horizontal layout, the field is a grid with the label taking up the entire first column.\n  // The last row is slack space in case the label is taller than the rest of the content.\n  horizontal: {\n    gridTemplateColumns: '33% 1fr',\n    gridTemplateRows: 'auto auto auto 1fr',\n  },\n\n  // In horizontal layout without a label, replace the label's column with padding.\n  // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n  horizontalNoLabel: {\n    paddingLeft: '33%',\n    gridTemplateColumns: '1fr',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    maxWidth: 'max-content',\n    maxHeight: 'max-content',\n  },\n\n  vertical: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n\n  horizontalSmall: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontalLarge: {\n    // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n    // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n    paddingTop: '9px',\n    paddingBottom: '9px',\n  },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n  marginTop: tokens.spacingVerticalXXS,\n  color: tokens.colorNeutralForeground3,\n  ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n\n  withIcon: {\n    // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n    paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n  },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n  display: 'inline-block',\n  fontSize: iconSize,\n  // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n  marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n  marginRight: tokens.spacingHorizontalXS,\n  // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n  lineHeight: '0',\n  // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n  verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n  warning: {\n    color: tokens.colorPaletteDarkOrangeForeground1,\n  },\n  success: {\n    color: tokens.colorPaletteGreenForeground1,\n  },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState): FieldState => {\n  'use no memo';\n\n  const { validationState, size } = state;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    fieldClassNames.root,\n    rootStyles.base,\n    horizontal && rootStyles.horizontal,\n    horizontal && !state.label && rootStyles.horizontalNoLabel,\n    state.root.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      fieldClassNames.label,\n      labelStyles.base,\n      horizontal && labelStyles.horizontal,\n      horizontal && size === 'small' && labelStyles.horizontalSmall,\n      horizontal && size === 'large' && labelStyles.horizontalLarge,\n      !horizontal && labelStyles.vertical,\n      !horizontal && size === 'large' && labelStyles.verticalLarge,\n      state.label.className,\n    );\n  }\n\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    state.validationMessageIcon.className = mergeClasses(\n      fieldClassNames.validationMessageIcon,\n      validationMessageIconBaseClassName,\n      validationState !== 'none' && validationMessageIconStyles[validationState],\n      state.validationMessageIcon.className,\n    );\n  }\n\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    state.validationMessage.className = mergeClasses(\n      fieldClassNames.validationMessage,\n      secondaryTextBaseClassName,\n      validationState === 'error' && secondaryTextStyles.error,\n      !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n      state.validationMessage.className,\n    );\n  }\n\n  if (state.hint) {\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","display","horizontal","gridTemplateColumns","gridTemplateRows","horizontalNoLabel","paddingLeft","useLabelStyles","maxWidth","maxHeight","vertical","paddingTop","spacingVerticalXXS","paddingBottom","marginBottom","verticalLarge","spacingVerticalXS","spacingVerticalSNudge","marginRight","spacingHorizontalM","gridRowStart","gridRowEnd","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","marginTop","color","colorNeutralForeground3","caption1","useSecondaryTextStyles","error","colorPaletteRedForeground1","withIcon","spacingHorizontalXS","useValidationMessageIconBaseClassName","fontSize","marginLeft","lineHeight","verticalAlign","useValidationMessageIconStyles","warning","colorPaletteDarkOrangeForeground1","success","colorPaletteGreenForeground1","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"AAAA;AAEA,SAASA,MAAM,EAAEC,gBAAgB,QAAQ,wBAAwB;AAEjE,SAASC,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,OAAO,MAAMC,kBAA8C;IACzDC,MAAM,CAAC,SAAS,CAAC;IACjBC,OAAO,CAAC,gBAAgB,CAAC;IACzBC,mBAAmB,CAAC,4BAA4B,CAAC;IACjDC,uBAAuB,CAAC,gCAAgC,CAAC;IACzDC,MAAM,CAAC,eAAe,CAAC;AACzB,EAAE;AAEF,6CAA6C;AAC7C,MAAMC,WAAW;AAEjB;;CAEC,GACD,MAAMC,gBAAgBT,WAAW;IAC/BU,MAAM;QACJC,SAAS;IACX;IAEA,8FAA8F;IAC9F,wFAAwF;IACxFC,YAAY;QACVC,qBAAqB;QACrBC,kBAAkB;IACpB;IAEA,iFAAiF;IACjF,gHAAgH;IAChHC,mBAAmB;QACjBC,aAAa;QACbH,qBAAqB;IACvB;AACF;AAEA,MAAMI,iBAAiBjB,WAAW;IAChCU,MAAM;QACJQ,UAAU;QACVC,WAAW;IACb;IAEAC,UAAU;QACRC,YAAYxB,OAAOyB,kBAAkB;QACrCC,eAAe1B,OAAOyB,kBAAkB;QACxCE,cAAc3B,OAAOyB,kBAAkB;IACzC;IAEAG,eAAe;QACbJ,YAAY;QACZE,eAAe;QACfC,cAAc3B,OAAO6B,iBAAiB;IACxC;IAEAd,YAAY;QACVS,YAAYxB,OAAO8B,qBAAqB;QACxCJ,eAAe1B,OAAO8B,qBAAqB;QAC3CC,aAAa/B,OAAOgC,kBAAkB;QACtCC,cAAc;QACdC,YAAY;IACd;IAEAC,iBAAiB;QACfX,YAAYxB,OAAO6B,iBAAiB;QACpCH,eAAe1B,OAAO6B,iBAAiB;IACzC;IAEAO,iBAAiB;QACf,0GAA0G;QAC1G,+FAA+F;QAC/FZ,YAAY;QACZE,eAAe;IACjB;AACF;AAEA,MAAMW,gCAAgCnC,gBAAgB;IACpDoC,WAAWtC,OAAOyB,kBAAkB;IACpCc,OAAOvC,OAAOwC,uBAAuB;IACrC,GAAGvC,iBAAiBwC,QAAQ;AAC9B;AAEA,MAAMC,yBAAyBvC,WAAW;IACxCwC,OAAO;QACLJ,OAAOvC,OAAO4C,0BAA0B;IAC1C;IAEAC,UAAU;QACR,kGAAkG;QAClG1B,aAAa,CAAC,KAAK,EAAER,SAAS,GAAG,EAAEX,OAAO8C,mBAAmB,CAAC,CAAC,CAAC;IAClE;AACF;AAEA,MAAMC,wCAAwC7C,gBAAgB;IAC5DY,SAAS;IACTkC,UAAUrC;IACV,mGAAmG;IACnGsC,YAAY,CAAC,MAAM,EAAEtC,SAAS,GAAG,EAAEX,OAAO8C,mBAAmB,CAAC,CAAC,CAAC;IAChEf,aAAa/B,OAAO8C,mBAAmB;IACvC,0FAA0F;IAC1FI,YAAY;IACZ,uGAAuG;IACvGC,eAAe;AACjB;AAEA,MAAMC,iCAAiCjD,WAAW;IAChDwC,OAAO;QACLJ,OAAOvC,OAAO4C,0BAA0B;IAC1C;IACAS,SAAS;QACPd,OAAOvC,OAAOsD,iCAAiC;IACjD;IACAC,SAAS;QACPhB,OAAOvC,OAAOwD,4BAA4B;IAC5C;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,0BAA0B,CAACC;IACtC;IAEA,MAAM,EAAEC,eAAe,EAAEC,IAAI,EAAE,GAAGF;IAClC,MAAM3C,aAAa2C,MAAMG,WAAW,KAAK;IAEzC,MAAMC,aAAalD;IACnB8C,MAAMpD,IAAI,CAACyD,SAAS,GAAG3D,aACrBC,gBAAgBC,IAAI,EACpBwD,WAAWjD,IAAI,EACfE,cAAc+C,WAAW/C,UAAU,EACnCA,cAAc,CAAC2C,MAAMnD,KAAK,IAAIuD,WAAW5C,iBAAiB,EAC1DwC,MAAMpD,IAAI,CAACyD,SAAS;IAGtB,MAAMC,cAAc5C;IACpB,IAAIsC,MAAMnD,KAAK,EAAE;QACfmD,MAAMnD,KAAK,CAACwD,SAAS,GAAG3D,aACtBC,gBAAgBE,KAAK,EACrByD,YAAYnD,IAAI,EAChBE,cAAciD,YAAYjD,UAAU,EACpCA,cAAc6C,SAAS,WAAWI,YAAY7B,eAAe,EAC7DpB,cAAc6C,SAAS,WAAWI,YAAY5B,eAAe,EAC7D,CAACrB,cAAciD,YAAYzC,QAAQ,EACnC,CAACR,cAAc6C,SAAS,WAAWI,YAAYpC,aAAa,EAC5D8B,MAAMnD,KAAK,CAACwD,SAAS;IAEzB;IAEA,MAAME,qCAAqClB;IAC3C,MAAMmB,8BAA8Bd;IACpC,IAAIM,MAAMjD,qBAAqB,EAAE;QAC/BiD,MAAMjD,qBAAqB,CAACsD,SAAS,GAAG3D,aACtCC,gBAAgBI,qBAAqB,EACrCwD,oCACAN,oBAAoB,UAAUO,2BAA2B,CAACP,gBAAgB,EAC1ED,MAAMjD,qBAAqB,CAACsD,SAAS;IAEzC;IAEA,MAAMI,6BAA6B9B;IACnC,MAAM+B,sBAAsB1B;IAC5B,IAAIgB,MAAMlD,iBAAiB,EAAE;QAC3BkD,MAAMlD,iBAAiB,CAACuD,SAAS,GAAG3D,aAClCC,gBAAgBG,iBAAiB,EACjC2D,4BACAR,oBAAoB,WAAWS,oBAAoBzB,KAAK,EACxD,CAAC,CAACe,MAAMjD,qBAAqB,IAAI2D,oBAAoBvB,QAAQ,EAC7Da,MAAMlD,iBAAiB,CAACuD,SAAS;IAErC;IAEA,IAAIL,MAAMhD,IAAI,EAAE;QACdgD,MAAMhD,IAAI,CAACqD,SAAS,GAAG3D,aAAaC,gBAAgBK,IAAI,EAAEyD,4BAA4BT,MAAMhD,IAAI,CAACqD,SAAS;IAC5G;IAEA,OAAOL;AACT,EAAE"}
+{"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n  root: `fui-Field`,\n  label: `fui-Field__label`,\n  validationMessage: `fui-Field__validationMessage`,\n  validationMessageIcon: `fui-Field__validationMessageIcon`,\n  hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'grid',\n  },\n\n  // In horizontal layout, the field is a grid with the label taking up the entire first column.\n  // The last row is slack space in case the label is taller than the rest of the content.\n  horizontal: {\n    gridTemplateColumns: '33% 1fr',\n    gridTemplateRows: 'auto auto auto 1fr',\n  },\n\n  // In horizontal layout without a label, replace the label's column with padding.\n  // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n  horizontalNoLabel: {\n    paddingLeft: '33%',\n    gridTemplateColumns: '1fr',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    maxWidth: 'max-content',\n    maxHeight: 'max-content',\n  },\n\n  vertical: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n\n  horizontalSmall: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontalLarge: {\n    // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n    // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n    paddingTop: '9px',\n    paddingBottom: '9px',\n  },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n  marginTop: tokens.spacingVerticalXXS,\n  color: tokens.colorNeutralForeground3,\n  ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n\n  withIcon: {\n    // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n    paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n  },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n  display: 'inline-block',\n  fontSize: iconSize,\n  // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n  marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n  marginRight: tokens.spacingHorizontalXS,\n  // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n  lineHeight: '0',\n  // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n  verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n  warning: {\n    color: tokens.colorPaletteDarkOrangeForeground1,\n  },\n  success: {\n    color: tokens.colorPaletteGreenForeground1,\n  },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState): FieldState => {\n  'use no memo';\n\n  const { validationState, size } = state;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    fieldClassNames.root,\n    rootStyles.base,\n    horizontal && rootStyles.horizontal,\n    horizontal && !state.label && rootStyles.horizontalNoLabel,\n    state.root.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      fieldClassNames.label,\n      labelStyles.base,\n      horizontal && labelStyles.horizontal,\n      horizontal && size === 'small' && labelStyles.horizontalSmall,\n      horizontal && size === 'large' && labelStyles.horizontalLarge,\n      !horizontal && labelStyles.vertical,\n      !horizontal && size === 'large' && labelStyles.verticalLarge,\n      state.label.className,\n    );\n  }\n\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.validationMessageIcon.className = mergeClasses(\n      fieldClassNames.validationMessageIcon,\n      validationMessageIconBaseClassName,\n      validationState !== 'none' && validationMessageIconStyles[validationState],\n      state.validationMessageIcon.className,\n    );\n  }\n\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.validationMessage.className = mergeClasses(\n      fieldClassNames.validationMessage,\n      secondaryTextBaseClassName,\n      validationState === 'error' && secondaryTextStyles.error,\n      !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n      state.validationMessage.className,\n    );\n  }\n\n  if (state.hint) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","display","horizontal","gridTemplateColumns","gridTemplateRows","horizontalNoLabel","paddingLeft","useLabelStyles","maxWidth","maxHeight","vertical","paddingTop","spacingVerticalXXS","paddingBottom","marginBottom","verticalLarge","spacingVerticalXS","spacingVerticalSNudge","marginRight","spacingHorizontalM","gridRowStart","gridRowEnd","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","marginTop","color","colorNeutralForeground3","caption1","useSecondaryTextStyles","error","colorPaletteRedForeground1","withIcon","spacingHorizontalXS","useValidationMessageIconBaseClassName","fontSize","marginLeft","lineHeight","verticalAlign","useValidationMessageIconStyles","warning","colorPaletteDarkOrangeForeground1","success","colorPaletteGreenForeground1","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}

package/lib/index.js

@@ -1,4 +1,4 @@
-export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
+export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable, useFieldBase_unstable } from './Field';
 export { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';
  // Experimental APIs - will be uncommented in the experimental release branch
  // export { useFieldBase_unstable } from './Field';

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field';\nexport {\n  FieldContextProvider,\n  useFieldContext_unstable,\n  useFieldContextValues_unstable,\n  useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ,UAAU;AASnH,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './Field';\nexport {\n  FieldContextProvider,\n  useFieldContext_unstable,\n  useFieldContextValues_unstable,\n  useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":"AAAA,SACEA,KAAK,EACLC,eAAe,EACfC,oBAAoB,EACpBC,uBAAuB,EACvBC,iBAAiB,EACjBC,qBAAqB,QAChB,UAAU;AAWjB,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}

package/lib-commonjs/Field.js

@@ -18,6 +18,9 @@ _export(exports, {
     renderField_unstable: function() {
         return _index.renderField_unstable;
     },
+    useFieldBase_unstable: function() {
+        return _index.useFieldBase_unstable;
+    },
     useFieldStyles_unstable: function() {
         return _index.useFieldStyles_unstable;
     },

package/lib-commonjs/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable"],"mappings":";;;;;;;;;;;;eASEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eACpBC,8BAAuB;;;eACvBC,wBAAiB;;;uBACZ,2BAA2B"}
+{"version":3,"sources":["../src/Field.ts"],"sourcesContent":["export type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './components/Field/index';\nexport {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './components/Field/index';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable"],"mappings":";;;;;;;;;;;;eAWEA,YAAK;;;eACLC,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;;eAFrBF,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,2BAA2B"}

package/lib-commonjs/components/Field/Field.types.js

@@ -2,5 +2,3 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
-const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import * as React from 'react';\nimport { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n   *\n   * For other controls, there are two options:\n   * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n   *    `<Field>{(props) => <MyInput {...props} />}</Field>`\n   * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n   *    `props = useFieldControlProps_unstable(props);`\n   */\n  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n   *     announced by screen readers.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n  Pick<FieldProps, 'children'> & {\n    /**\n     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n     */\n    generatedControlId: string;\n  };\n\nexport type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\n\nexport type FieldContextValue = Readonly<\n  Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n    /** The label's for prop. Undefined if there is no label. */\n    labelFor?: string;\n    /** The label's id prop. Undefined if there is no label. */\n    labelId?: string;\n    /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n    validationMessageId?: string;\n    /** The hint's id prop. Undefined if there is no hint. */\n    hintId?: string;\n  }\n>;\n\nexport type FieldContextValues = {\n  field: FieldContextValue;\n};\n"],"names":["React"],"mappings":";;;;;iEAAuB,QAAQ"}
+{"version":3,"sources":["../src/components/Field/Field.types.ts"],"sourcesContent":["import type * as React from 'react';\nimport type { Label } from '@fluentui/react-label';\nimport type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\n\n/**\n * The props added to the control inside the Field.\n */\nexport type FieldControlProps = Pick<\n  React.HTMLAttributes<HTMLElement>,\n  'id' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid' | 'aria-required'\n>;\n\n/**\n * Slots of the Field component\n */\nexport type FieldSlots = {\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The label associated with the field.\n   */\n  label?: Slot<typeof Label>;\n\n  /**\n   * A message about the validation state. By default, this is an error message, but it can be a success, warning,\n   * or custom message by setting `validationState`.\n   */\n  validationMessage?: Slot<'div'>;\n\n  /**\n   * The icon associated with the `validationMessage`. This will only be displayed if `validationMessage` is set.\n   *\n   * The default depends on `validationState`:\n   * * error: `<ErrorCircle12Filled />`\n   * * warning: `<Warning12Filled />`\n   * * success: `<CheckmarkCircle12Filled />`\n   * * none: `null`\n   */\n  validationMessageIcon?: Slot<'span'>;\n\n  /**\n   * Additional hint text below the field.\n   */\n  hint?: Slot<'div'>;\n};\n\n/**\n * Field Props\n */\nexport type FieldProps = Omit<ComponentProps<FieldSlots>, 'children'> & {\n  /**\n   * The Field's child can be a single form control, or a render function that takes the props that should be spread on\n   * a form control.\n   *\n   * All form controls in this library can be used directly as children (such as `<Input>` or `<RadioGroup>`).\n   *\n   * For other controls, there are two options:\n   * 1. The child of Field can be a render function that is given the props that should be spread on the control.\n   *    `<Field>{(props) => <MyInput {...props} />}</Field>`\n   * 2. The control itself can merge props from field with useFieldControlProps_unstable().\n   *    `props = useFieldControlProps_unstable(props);`\n   */\n  children?: React.ReactNode | ((props: FieldControlProps) => React.ReactNode);\n\n  /**\n   * The orientation of the label relative to the field component.\n   * This only affects the label, and not the validationMessage or hint (which always appear below the field component).\n   *\n   * @default vertical\n   */\n  orientation?: 'vertical' | 'horizontal';\n\n  /**\n   * The `validationState` affects the display of the `validationMessage` and `validationMessageIcon`.\n   *\n   * * error: (default) The validation message has a red error icon and red text, with `role=\"alert\"` so it is\n   *     announced by screen readers. Additionally, the control inside the field has `aria-invalid` set, which adds a\n   *     red border to some field components (such as `Input`).\n   * * success: The validation message has a green checkmark icon and gray text.\n   * * warning: The validation message has a yellow exclamation icon and gray text, with `role=\"alert\"` so it is\n   *     announced by screen readers.\n   * * none: The validation message has no icon and gray text.\n   *\n   * @default error when validationMessage is set; none otherwise.\n   */\n  validationState?: 'error' | 'warning' | 'success' | 'none';\n\n  /**\n   * Marks the Field as required. If `true`, an asterisk will be appended to the label, and `aria-required` will be set\n   * on the Field's child.\n   */\n  required?: boolean;\n\n  /**\n   * The size of the Field's label.\n   *\n   * @default medium\n   */\n  size?: 'small' | 'medium' | 'large';\n};\n\n/**\n * State used in rendering Field\n */\nexport type FieldState = ComponentState<Required<FieldSlots>> &\n  Required<Pick<FieldProps, 'orientation' | 'required' | 'size' | 'validationState'>> &\n  Pick<FieldProps, 'children'> & {\n    /**\n     * The ID generated for the control inside the field, and the default value of label.htmlFor prop.\n     */\n    generatedControlId: string;\n  };\n\nexport type FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\n\nexport type FieldContextValue = Readonly<\n  Pick<FieldState, 'generatedControlId' | 'orientation' | 'required' | 'size' | 'validationState'> & {\n    /** The label's for prop. Undefined if there is no label. */\n    labelFor?: string;\n    /** The label's id prop. Undefined if there is no label. */\n    labelId?: string;\n    /** The validationMessage's id prop. Undefined if there is no validationMessage. */\n    validationMessageId?: string;\n    /** The hint's id prop. Undefined if there is no hint. */\n    hintId?: string;\n  }\n>;\n\nexport type FieldContextValues = {\n  field: FieldContextValue;\n};\n"],"names":[],"mappings":""}

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

@@ -19,7 +19,7 @@ _export(exports, {
         return _renderField.renderField_unstable;
     },
     useFieldBase_unstable: function() {
-        return _useField.useFieldBase_unstable;
+        return _useFieldBase.useFieldBase_unstable;
     },
     useFieldStyles_unstable: function() {
         return _useFieldStylesstyles.useFieldStyles_unstable;
@@ -31,4 +31,5 @@ _export(exports, {
 const _Field = require("./Field");
 const _renderField = require("./renderField");
 const _useField = require("./useField");
+const _useFieldBase = require("./useFieldBase");
 const _useFieldStylesstyles = require("./useFieldStyles.styles");

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

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable, useFieldBase_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":";;;;;;;;;;;;eAUSA,YAAK;;;eAGLI,qCAAe;;;eAFfH,iCAAoB;;;eACDE,+BAAqB;;;eACvBE,6CAAuB;;;eADxCH,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACI,aAAa;sCACb,0BAA0B"}
+{"version":3,"sources":["../src/components/Field/index.ts"],"sourcesContent":["export type {\n  FieldBaseProps,\n  FieldBaseState,\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field.types';\nexport { Field } from './Field';\nexport { renderField_unstable } from './renderField';\nexport { useField_unstable } from './useField';\nexport { useFieldBase_unstable } from './useFieldBase';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":";;;;;;;;;;;;eAUSA,YAAK;;;eAILI,qCAAe;;;eAHfH,iCAAoB;;;eAEpBE,mCAAqB;;;eACJE,6CAAuB;;;eAFxCH,2BAAiB;;;uBAFJ,UAAU;6BACK,gBAAgB;0BACnB,aAAa;8BACT,iBAAiB;sCACE,0BAA0B"}

package/lib-commonjs/components/Field/renderField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAWaG;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;uBAEG,uBAAuB;AAM3E,6BAA6B,CAACC,OAAmBC;QACtDL,2BAAAA,EAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,aAASJ,2BAAAA,EAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,OAAA,WAAA,OACE,eAAA,EAACN,2BAAAA,EAAAA;QAAqBO,KAAK,EAAEH,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeE,KAAK;kBAC/C,WAAA,OAAA,gBAAA,EAACH,MAAMK,IAAI,EAAA;;gBACRL,MAAMM,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACN,MAAMM,KAAK,EAAA,CAAA;gBAC3BJ;gBACAF,MAAMO,iBAAiB,IAAA,WAAA,OACtB,gBAAA,EAACP,MAAMO,iBAAiB,EAAA;;wBACrBP,MAAMQ,qBAAqB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,qBAAqB,EAAA,CAAA;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,IAAI,EAAA,CAAA;;;;AAIlC,EAAE"}
+{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldBaseState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldBaseState, contextValues: FieldContextValues): JSXElement => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAWaG;;;;;;4BAVb,iCAAiD;gCAErB,4BAA4B;uBAEG,uBAAuB;AAM3E,6BAA6B,CAACC,OAAuBC;QAC1DL,2BAAAA,EAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,aAASJ,2BAAAA,EAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,OAAA,WAAA,OACE,eAAA,EAACN,2BAAAA,EAAAA;QAAqBO,KAAK,EAAEH,kBAAAA,QAAAA,kBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,cAAeE,KAAK;kBAC/C,WAAA,OAAA,gBAAA,EAACH,MAAMK,IAAI,EAAA;;gBACRL,MAAMM,KAAK,IAAA,WAAA,GAAI,mBAAA,EAACN,MAAMM,KAAK,EAAA,CAAA;gBAC3BJ;gBACAF,MAAMO,iBAAiB,IAAA,WAAA,OACtB,gBAAA,EAACP,MAAMO,iBAAiB,EAAA;;wBACrBP,MAAMQ,qBAAqB,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,qBAAqB,EAAA,CAAA;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,IAAA,WAAA,OAAI,eAAA,EAACT,MAAMS,IAAI,EAAA,CAAA;;;;AAIlC,EAAE"}

package/lib-commonjs/components/Field/useField.js

@@ -3,17 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-function _export(target, all) {
-    for(var name in all)Object.defineProperty(target, name, {
-        enumerable: true,
-        get: all[name]
-    });
-}
-_export(exports, {
-    useFieldBase_unstable: function() {
-        return useFieldBase_unstable;
-    },
-    useField_unstable: function() {
+Object.defineProperty(exports, "useField_unstable", {
+    enumerable: true,
+    get: function() {
         return useField_unstable;
     }
 });
@@ -22,6 +14,7 @@ const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
 const _reacticons = require("@fluentui/react-icons");
 const _reactlabel = require("@fluentui/react-label");
 const _reactutilities = require("@fluentui/react-utilities");
+const _useFieldBase = require("./useFieldBase");
 const validationMessageIcons = {
     error: /*#__PURE__*/ _react.createElement(_reacticons.DiamondDismiss12Filled, null),
     warning: /*#__PURE__*/ _react.createElement(_reacticons.Warning12Filled, null),
@@ -30,7 +23,7 @@ const validationMessageIcons = {
 };
 const useField_unstable = (props, ref)=>{
     const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;
-    const state = useFieldBase_unstable(fieldProps, ref);
+    const state = (0, _useFieldBase.useFieldBase_unstable)(fieldProps, ref);
     const defaultIcon = validationMessageIcons[state.validationState];
     return {
         ...state,
@@ -57,59 +50,3 @@ const useField_unstable = (props, ref)=>{
         size
     };
 };
-const useFieldBase_unstable = (props, ref)=>{
-    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
-    const baseId = (0, _reactutilities.useId)('field-');
-    const generatedControlId = baseId + '__control';
-    const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
-        ...props,
-        ref
-    }, /*excludedPropNames:*/ [
-        'children'
-    ]), {
-        elementType: 'div'
-    });
-    const label = _reactutilities.slot.optional(props.label, {
-        defaultProps: {
-            htmlFor: generatedControlId,
-            id: baseId + '__label',
-            required
-        },
-        elementType: 'label'
-    });
-    const validationMessage = _reactutilities.slot.optional(props.validationMessage, {
-        defaultProps: {
-            id: baseId + '__validationMessage',
-            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
-        },
-        elementType: 'div'
-    });
-    const hint = _reactutilities.slot.optional(props.hint, {
-        defaultProps: {
-            id: baseId + '__hint'
-        },
-        elementType: 'div'
-    });
-    const validationMessageIcon = _reactutilities.slot.optional(props.validationMessageIcon, {
-        renderByDefault: false,
-        elementType: 'span'
-    });
-    return {
-        children,
-        generatedControlId,
-        required,
-        validationState,
-        components: {
-            root: 'div',
-            label: 'label',
-            validationMessage: 'div',
-            validationMessageIcon: 'span',
-            hint: 'div'
-        },
-        root,
-        label,
-        validationMessageIcon,
-        validationMessage,
-        hint
-    };
-};

package/lib-commonjs/components/Field/useField.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState, FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","getIntrinsicElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","useFieldBase_unstable","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children","required","validationMessage","baseId","generatedControlId","root","always","htmlFor","id","role","hint"],"mappings":"AAAA;;;;;;;;;;;;yBAwDaqB;eAAAA;;qBA/BAP;eAAAA;;;;iEAvBU,QAAQ;4BAEkD,wBAAwB;4BACnF,wBAAwB;gCACQ,4BAA4B;AAGlF,MAAMN,yBAAyB;IAC7BC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACP,kCAAAA,EAAAA;IACRQ,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACP,2BAAAA,EAAAA;IACVQ,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACV,mCAAAA,EAAAA;IACVW,MAAMC;AACR;AAWO,0BAA0B,CAACE,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,QAAQC,sBAAsBF,YAAYH;IAEhD,MAAMM,cAAcd,sBAAsB,CAACY,MAAMG,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGH,KAAK;QACR,4DAA4D;QAC5DI,YAAY;YAAE,GAAGJ,MAAMI,UAAU;YAAEC,OAAOrB,iBAAAA;QAAM;QAChDqB,OAAOlB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;YAChCE,cAAc;gBAAET;gBAAM,GAAGE,MAAMK,KAAK;YAAC;YACrCG,aAAaxB,iBAAAA;QACf;QACAyB,uBAAuBtB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAX;QACAC;IACF;AACF,EAAE;AASK,8BAA8B,CAACH,OAAuBC;IAC3D,MAAM,EAAEe,QAAQ,EAAEC,WAAW,KAAK,EAAET,kBAAkBR,MAAMkB,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGlB;IAErG,MAAMmB,aAAS5B,qBAAAA,EAAM;IACrB,MAAM6B,qBAAqBD,SAAS;IAEpC,MAAME,OAAO7B,oBAAAA,CAAK8B,MAAM,KAAChC,wCAAAA,EAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHY,aAAa;IACf;IACA,MAAMH,QAAQlB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMU,KAAK,EAAE;QACvCE,cAAc;YAAEW,SAASH;YAAoBI,IAAIL,SAAS;YAAWF;QAAS;QAC9EJ,aAAa;IACf;IACA,MAAMK,oBAAoB1B,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMkB,iBAAiB,EAAE;QAC/DN,cAAc;YACZY,IAAIL,SAAS;YACbM,MAAMjB,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUV;QACjF;QACAe,aAAa;IACf;IACA,MAAMa,OAAOlC,oBAAAA,CAAKmB,QAAQ,CAACX,MAAM0B,IAAI,EAAE;QAAEd,cAAc;YAAEY,IAAIL,SAAS;QAAS;QAAGN,aAAa;IAAM;IACrG,MAAMC,wBAAwBtB,oBAAAA,CAAKmB,QAAQ,CAACX,MAAMc,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBF,aAAa;IACf;IAEA,OAAO;QACLG;QACAI;QACAH;QACAT;QACAC,YAAY;YAAEY,MAAM;YAAOX,OAAO;YAASQ,mBAAmB;YAAOJ,uBAAuB;YAAQY,MAAM;QAAM;QAChHL;QACAX;QACAI;QACAI;QACAQ;IACF;AACF,EAAE"}
+{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { CheckmarkCircle12Filled, DiamondDismiss12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\nimport { useFieldBase_unstable } from './useFieldBase';\n\nconst validationMessageIcons = {\n  error: <DiamondDismiss12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const { orientation = 'vertical', size = 'medium', ...fieldProps } = props;\n  const state = useFieldBase_unstable(fieldProps, ref);\n\n  const defaultIcon = validationMessageIcons[state.validationState];\n\n  return {\n    ...state,\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    components: { ...state.components, label: Label },\n    label: slot.optional(props.label, {\n      defaultProps: { size, ...state.label },\n      elementType: Label,\n    }),\n    validationMessageIcon: slot.optional(props.validationMessageIcon, {\n      renderByDefault: !!defaultIcon,\n      defaultProps: { children: defaultIcon },\n      elementType: 'span',\n    }),\n    orientation,\n    size,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","DiamondDismiss12Filled","Warning12Filled","Label","slot","useFieldBase_unstable","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","orientation","size","fieldProps","state","defaultIcon","validationState","components","label","optional","defaultProps","elementType","validationMessageIcon","renderByDefault","children"],"mappings":"AAAA;;;;;+BA0Baa;;;;;;;iEAxBU,QAAQ;4BAEkD,wBAAwB;4BACnF,wBAAwB;gCACzB,4BAA4B;8BAEX,iBAAiB;AAEvD,MAAMN,yBAAyB;IAC7BC,OAAAA,WAAAA,GAAO,OAAA,aAAA,CAACN,kCAAAA,EAAAA;IACRO,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACN,2BAAAA,EAAAA;IACVO,SAAAA,WAAAA,GAAS,OAAA,aAAA,CAACT,mCAAAA,EAAAA;IACVU,MAAMC;AACR;AAWO,0BAA0B,CAACE,OAAmBC;IACnD,MAAM,EAAEC,cAAc,UAAU,EAAEC,OAAO,QAAQ,EAAE,GAAGC,YAAY,GAAGJ;IACrE,MAAMK,YAAQb,mCAAAA,EAAsBY,YAAYH;IAEhD,MAAMK,cAAcb,sBAAsB,CAACY,MAAME,eAAe,CAAC;IAEjE,OAAO;QACL,GAAGF,KAAK;QACR,4DAA4D;QAC5DG,YAAY;YAAE,GAAGH,MAAMG,UAAU;YAAEC,OAAOnB,iBAAAA;QAAM;QAChDmB,OAAOlB,oBAAAA,CAAKmB,QAAQ,CAACV,MAAMS,KAAK,EAAE;YAChCE,cAAc;gBAAER;gBAAM,GAAGE,MAAMI,KAAK;YAAC;YACrCG,aAAatB,iBAAAA;QACf;QACAuB,uBAAuBtB,oBAAAA,CAAKmB,QAAQ,CAACV,MAAMa,qBAAqB,EAAE;YAChEC,iBAAiB,CAAC,CAACR;YACnBK,cAAc;gBAAEI,UAAUT;YAAY;YACtCM,aAAa;QACf;QACAV;QACAC;IACF;AACF,EAAE"}

package/lib-commonjs/components/Field/useFieldBase.js

@@ -0,0 +1,67 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useFieldBase_unstable", {
+    enumerable: true,
+    get: function() {
+        return useFieldBase_unstable;
+    }
+});
+const _reactutilities = require("@fluentui/react-utilities");
+const useFieldBase_unstable = (props, ref)=>{
+    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;
+    const baseId = (0, _reactutilities.useId)('field-');
+    const generatedControlId = baseId + '__control';
+    const root = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+        ...props,
+        ref
+    }, /*excludedPropNames:*/ [
+        'children'
+    ]), {
+        elementType: 'div'
+    });
+    const label = _reactutilities.slot.optional(props.label, {
+        defaultProps: {
+            htmlFor: generatedControlId,
+            id: baseId + '__label',
+            required
+        },
+        elementType: 'label'
+    });
+    const validationMessage = _reactutilities.slot.optional(props.validationMessage, {
+        defaultProps: {
+            id: baseId + '__validationMessage',
+            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
+        },
+        elementType: 'div'
+    });
+    const hint = _reactutilities.slot.optional(props.hint, {
+        defaultProps: {
+            id: baseId + '__hint'
+        },
+        elementType: 'div'
+    });
+    const validationMessageIcon = _reactutilities.slot.optional(props.validationMessageIcon, {
+        renderByDefault: false,
+        elementType: 'span'
+    });
+    return {
+        children,
+        generatedControlId,
+        required,
+        validationState,
+        components: {
+            root: 'div',
+            label: 'label',
+            validationMessage: 'div',
+            validationMessageIcon: 'span',
+            hint: 'div'
+        },
+        root,
+        label,
+        validationMessageIcon,
+        validationMessage,
+        hint
+    };
+};

package/lib-commonjs/components/Field/useFieldBase.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/useFieldBase.tsx"],"sourcesContent":["import type * as React from 'react';\n\nimport { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldBaseProps, FieldBaseState } from './Field.types';\n\n/**\n * Base hook for Field component, which manages state related to validation, ARIA attributes,\n * ID generation, and slot structure without design props.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useFieldBase_unstable = (props: FieldBaseProps, ref: React.Ref<HTMLDivElement>): FieldBaseState => {\n  const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required },\n    elementType: 'label',\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: false,\n    elementType: 'span',\n  });\n\n  return {\n    children,\n    generatedControlId,\n    required,\n    validationState,\n    components: { root: 'div', label: 'label', validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["getIntrinsicElementProps","useId","slot","useFieldBase_unstable","props","ref","children","required","validationState","validationMessage","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","undefined","hint","validationMessageIcon","renderByDefault","components"],"mappings":";;;;+BAYaG;;;;;;gCAVyC,4BAA4B;AAU3E,8BAA8B,CAACC,OAAuBC;IAC3D,MAAM,EAAEC,QAAQ,EAAEC,WAAW,KAAK,EAAEC,kBAAkBJ,MAAMK,iBAAiB,GAAG,UAAU,MAAM,EAAE,GAAGL;IAErG,MAAMM,aAAST,qBAAAA,EAAM;IACrB,MAAMU,qBAAqBD,SAAS;IAEpC,MAAME,OAAOV,oBAAAA,CAAKW,MAAM,KAACb,wCAAAA,EAAyB,OAAO;QAAE,GAAGI,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHS,aAAa;IACf;IACA,MAAMC,QAAQb,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMW,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWH;QAAS;QAC9EO,aAAa;IACf;IACA,MAAML,oBAAoBP,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMK,iBAAiB,EAAE;QAC/DQ,cAAc;YACZE,IAAIT,SAAS;YACbU,MAAMZ,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUa;QACjF;QACAP,aAAa;IACf;IACA,MAAMQ,OAAOpB,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMkB,IAAI,EAAE;QAAEL,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMS,wBAAwBrB,oBAAAA,CAAKc,QAAQ,CAACZ,MAAMmB,qBAAqB,EAAE;QACvEC,iBAAiB;QACjBV,aAAa;IACf;IAEA,OAAO;QACLR;QACAK;QACAJ;QACAC;QACAiB,YAAY;YAAEb,MAAM;YAAOG,OAAO;YAASN,mBAAmB;YAAOc,uBAAuB;YAAQD,MAAM;QAAM;QAChHV;QACAG;QACAQ;QACAd;QACAa;IACF;AACF,EAAE"}

package/lib-commonjs/components/Field/useFieldStyles.styles.js

@@ -155,22 +155,27 @@ const useFieldStyles_unstable = (state)=>{
     const { validationState, size } = state;
     const horizontal = state.orientation === 'horizontal';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
     }
     const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
     const validationMessageIconStyles = useValidationMessageIconStyles();
     if (state.validationMessageIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
     }
     const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
     const secondaryTextStyles = useSecondaryTextStyles();
     if (state.validationMessage) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
     }
     if (state.hint) {
+        // eslint-disable-next-line react-hooks/immutability
         state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
     }
     return state;

package/lib-commonjs/components/Field/useFieldStyles.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n    root: `fui-Field`,\n    label: `fui-Field__label`,\n    validationMessage: `fui-Field__validationMessage`,\n    validationMessageIcon: `fui-Field__validationMessageIcon`,\n    hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid'\n    },\n    // In horizontal layout, the field is a grid with the label taking up the entire first column.\n    // The last row is slack space in case the label is taller than the rest of the content.\n    horizontal: {\n        gridTemplateColumns: '33% 1fr',\n        gridTemplateRows: 'auto auto auto 1fr'\n    },\n    // In horizontal layout without a label, replace the label's column with padding.\n    // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n    horizontalNoLabel: {\n        paddingLeft: '33%',\n        gridTemplateColumns: '1fr'\n    }\n});\nconst useLabelStyles = makeStyles({\n    base: {\n        maxWidth: 'max-content',\n        maxHeight: 'max-content'\n    },\n    vertical: {\n        paddingTop: tokens.spacingVerticalXXS,\n        paddingBottom: tokens.spacingVerticalXXS,\n        marginBottom: tokens.spacingVerticalXXS\n    },\n    verticalLarge: {\n        paddingTop: '1px',\n        paddingBottom: '1px',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    horizontal: {\n        paddingTop: tokens.spacingVerticalSNudge,\n        paddingBottom: tokens.spacingVerticalSNudge,\n        marginRight: tokens.spacingHorizontalM,\n        gridRowStart: '1',\n        gridRowEnd: '-1'\n    },\n    horizontalSmall: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS\n    },\n    horizontalLarge: {\n        // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n        paddingTop: '9px',\n        paddingBottom: '9px'\n    }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\n    },\n    withIcon: {\n        // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n        paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n    }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n    display: 'inline-block',\n    fontSize: iconSize,\n    // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n    marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n    marginRight: tokens.spacingHorizontalXS,\n    // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n    lineHeight: '0',\n    // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n    verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\n    },\n    warning: {\n        color: tokens.colorPaletteDarkOrangeForeground1\n    },\n    success: {\n        color: tokens.colorPaletteGreenForeground1\n    }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n    'use no memo';\n    const { validationState, size } = state;\n    const horizontal = state.orientation === 'horizontal';\n    const rootStyles = useRootStyles();\n    state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n    }\n    const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n    const validationMessageIconStyles = useValidationMessageIconStyles();\n    if (state.validationMessageIcon) {\n        state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n    }\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const secondaryTextStyles = useSecondaryTextStyles();\n    if (state.validationMessage) {\n        state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n    }\n    if (state.hint) {\n        state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n    }\n    return state;\n};\n"],"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","B2u0y6b","Bxyxcbc","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
+{"version":3,"sources":["useFieldStyles.styles.js"],"sourcesContent":["'use client';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nexport const fieldClassNames = {\n    root: `fui-Field`,\n    label: `fui-Field__label`,\n    validationMessage: `fui-Field__validationMessage`,\n    validationMessageIcon: `fui-Field__validationMessageIcon`,\n    hint: `fui-Field__hint`\n};\n// Size of the icon in the validation message\nconst iconSize = '12px';\n/**\n * Styles for the root slot\n */ const useRootStyles = makeStyles({\n    base: {\n        display: 'grid'\n    },\n    // In horizontal layout, the field is a grid with the label taking up the entire first column.\n    // The last row is slack space in case the label is taller than the rest of the content.\n    horizontal: {\n        gridTemplateColumns: '33% 1fr',\n        gridTemplateRows: 'auto auto auto 1fr'\n    },\n    // In horizontal layout without a label, replace the label's column with padding.\n    // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n    horizontalNoLabel: {\n        paddingLeft: '33%',\n        gridTemplateColumns: '1fr'\n    }\n});\nconst useLabelStyles = makeStyles({\n    base: {\n        maxWidth: 'max-content',\n        maxHeight: 'max-content'\n    },\n    vertical: {\n        paddingTop: tokens.spacingVerticalXXS,\n        paddingBottom: tokens.spacingVerticalXXS,\n        marginBottom: tokens.spacingVerticalXXS\n    },\n    verticalLarge: {\n        paddingTop: '1px',\n        paddingBottom: '1px',\n        marginBottom: tokens.spacingVerticalXS\n    },\n    horizontal: {\n        paddingTop: tokens.spacingVerticalSNudge,\n        paddingBottom: tokens.spacingVerticalSNudge,\n        marginRight: tokens.spacingHorizontalM,\n        gridRowStart: '1',\n        gridRowEnd: '-1'\n    },\n    horizontalSmall: {\n        paddingTop: tokens.spacingVerticalXS,\n        paddingBottom: tokens.spacingVerticalXS\n    },\n    horizontalLarge: {\n        // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n        paddingTop: '9px',\n        paddingBottom: '9px'\n    }\n});\nconst useSecondaryTextBaseClassName = makeResetStyles({\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1\n});\nconst useSecondaryTextStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\n    },\n    withIcon: {\n        // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n        paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`\n    }\n});\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n    display: 'inline-block',\n    fontSize: iconSize,\n    // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n    marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n    marginRight: tokens.spacingHorizontalXS,\n    // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n    lineHeight: '0',\n    // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n    verticalAlign: '-1px'\n});\nconst useValidationMessageIconStyles = makeStyles({\n    error: {\n        color: tokens.colorPaletteRedForeground1\n    },\n    warning: {\n        color: tokens.colorPaletteDarkOrangeForeground1\n    },\n    success: {\n        color: tokens.colorPaletteGreenForeground1\n    }\n});\n/**\n * Apply styling to the Field slots based on the state\n */ export const useFieldStyles_unstable = (state)=>{\n    'use no memo';\n    const { validationState, size } = state;\n    const horizontal = state.orientation === 'horizontal';\n    const rootStyles = useRootStyles();\n    // eslint-disable-next-line react-hooks/immutability\n    state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);\n    const labelStyles = useLabelStyles();\n    if (state.label) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.label.className = mergeClasses(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);\n    }\n    const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n    const validationMessageIconStyles = useValidationMessageIconStyles();\n    if (state.validationMessageIcon) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);\n    }\n    const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n    const secondaryTextStyles = useSecondaryTextStyles();\n    if (state.validationMessage) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);\n    }\n    if (state.hint) {\n        // eslint-disable-next-line react-hooks/immutability\n        state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n    }\n    return state;\n};\n"],"names":["tokens","typographyStyles","__resetStyles","__styles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","B2u0y6b","Bxyxcbc","vertical","z8tnut","Byoj8tv","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}

package/lib-commonjs/components/Field/useFieldStyles.styles.raw.js

@@ -121,22 +121,27 @@ const useFieldStyles_unstable = (state)=>{
     const { validationState, size } = state;
     const horizontal = state.orientation === 'horizontal';
     const rootStyles = useRootStyles();
+    // eslint-disable-next-line react-hooks/immutability
     state.root.className = (0, _react.mergeClasses)(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
     const labelStyles = useLabelStyles();
     if (state.label) {
+        // eslint-disable-next-line react-hooks/immutability
         state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
     }
     const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
     const validationMessageIconStyles = useValidationMessageIconStyles();
     if (state.validationMessageIcon) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessageIcon.className = (0, _react.mergeClasses)(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
     }
     const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
     const secondaryTextStyles = useSecondaryTextStyles();
     if (state.validationMessage) {
+        // eslint-disable-next-line react-hooks/immutability
         state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
     }
     if (state.hint) {
+        // eslint-disable-next-line react-hooks/immutability
         state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
     }
     return state;

package/lib-commonjs/components/Field/useFieldStyles.styles.raw.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n  root: `fui-Field`,\n  label: `fui-Field__label`,\n  validationMessage: `fui-Field__validationMessage`,\n  validationMessageIcon: `fui-Field__validationMessageIcon`,\n  hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'grid',\n  },\n\n  // In horizontal layout, the field is a grid with the label taking up the entire first column.\n  // The last row is slack space in case the label is taller than the rest of the content.\n  horizontal: {\n    gridTemplateColumns: '33% 1fr',\n    gridTemplateRows: 'auto auto auto 1fr',\n  },\n\n  // In horizontal layout without a label, replace the label's column with padding.\n  // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n  horizontalNoLabel: {\n    paddingLeft: '33%',\n    gridTemplateColumns: '1fr',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    maxWidth: 'max-content',\n    maxHeight: 'max-content',\n  },\n\n  vertical: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n\n  horizontalSmall: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontalLarge: {\n    // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n    // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n    paddingTop: '9px',\n    paddingBottom: '9px',\n  },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n  marginTop: tokens.spacingVerticalXXS,\n  color: tokens.colorNeutralForeground3,\n  ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n\n  withIcon: {\n    // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n    paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n  },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n  display: 'inline-block',\n  fontSize: iconSize,\n  // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n  marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n  marginRight: tokens.spacingHorizontalXS,\n  // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n  lineHeight: '0',\n  // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n  verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n  warning: {\n    color: tokens.colorPaletteDarkOrangeForeground1,\n  },\n  success: {\n    color: tokens.colorPaletteGreenForeground1,\n  },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState): FieldState => {\n  'use no memo';\n\n  const { validationState, size } = state;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    fieldClassNames.root,\n    rootStyles.base,\n    horizontal && rootStyles.horizontal,\n    horizontal && !state.label && rootStyles.horizontalNoLabel,\n    state.root.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      fieldClassNames.label,\n      labelStyles.base,\n      horizontal && labelStyles.horizontal,\n      horizontal && size === 'small' && labelStyles.horizontalSmall,\n      horizontal && size === 'large' && labelStyles.horizontalLarge,\n      !horizontal && labelStyles.vertical,\n      !horizontal && size === 'large' && labelStyles.verticalLarge,\n      state.label.className,\n    );\n  }\n\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    state.validationMessageIcon.className = mergeClasses(\n      fieldClassNames.validationMessageIcon,\n      validationMessageIconBaseClassName,\n      validationState !== 'none' && validationMessageIconStyles[validationState],\n      state.validationMessageIcon.className,\n    );\n  }\n\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    state.validationMessage.className = mergeClasses(\n      fieldClassNames.validationMessage,\n      secondaryTextBaseClassName,\n      validationState === 'error' && secondaryTextStyles.error,\n      !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n      state.validationMessage.className,\n    );\n  }\n\n  if (state.hint) {\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","display","horizontal","gridTemplateColumns","gridTemplateRows","horizontalNoLabel","paddingLeft","useLabelStyles","maxWidth","maxHeight","vertical","paddingTop","spacingVerticalXXS","paddingBottom","marginBottom","verticalLarge","spacingVerticalXS","spacingVerticalSNudge","marginRight","spacingHorizontalM","gridRowStart","gridRowEnd","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","marginTop","color","colorNeutralForeground3","caption1","useSecondaryTextStyles","error","colorPaletteRedForeground1","withIcon","spacingHorizontalXS","useValidationMessageIconBaseClassName","fontSize","marginLeft","lineHeight","verticalAlign","useValidationMessageIconStyles","warning","colorPaletteDarkOrangeForeground1","success","colorPaletteGreenForeground1","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}
+{"version":3,"sources":["../src/components/Field/useFieldStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldSlots, FieldState } from './Field.types';\n\nexport const fieldClassNames: SlotClassNames<FieldSlots> = {\n  root: `fui-Field`,\n  label: `fui-Field__label`,\n  validationMessage: `fui-Field__validationMessage`,\n  validationMessageIcon: `fui-Field__validationMessageIcon`,\n  hint: `fui-Field__hint`,\n};\n\n// Size of the icon in the validation message\nconst iconSize = '12px';\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'grid',\n  },\n\n  // In horizontal layout, the field is a grid with the label taking up the entire first column.\n  // The last row is slack space in case the label is taller than the rest of the content.\n  horizontal: {\n    gridTemplateColumns: '33% 1fr',\n    gridTemplateRows: 'auto auto auto 1fr',\n  },\n\n  // In horizontal layout without a label, replace the label's column with padding.\n  // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.\n  horizontalNoLabel: {\n    paddingLeft: '33%',\n    gridTemplateColumns: '1fr',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    maxWidth: 'max-content',\n    maxHeight: 'max-content',\n  },\n\n  vertical: {\n    paddingTop: tokens.spacingVerticalXXS,\n    paddingBottom: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  verticalLarge: {\n    paddingTop: '1px',\n    paddingBottom: '1px',\n    marginBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontal: {\n    paddingTop: tokens.spacingVerticalSNudge,\n    paddingBottom: tokens.spacingVerticalSNudge,\n    marginRight: tokens.spacingHorizontalM,\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n  },\n\n  horizontalSmall: {\n    paddingTop: tokens.spacingVerticalXS,\n    paddingBottom: tokens.spacingVerticalXS,\n  },\n\n  horizontalLarge: {\n    // To align the label text with the Input text, it should be centered within the 40px height of the Input.\n    // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.\n    paddingTop: '9px',\n    paddingBottom: '9px',\n  },\n});\n\nconst useSecondaryTextBaseClassName = makeResetStyles({\n  marginTop: tokens.spacingVerticalXXS,\n  color: tokens.colorNeutralForeground3,\n  ...typographyStyles.caption1,\n});\n\nconst useSecondaryTextStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n\n  withIcon: {\n    // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.\n    paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`,\n  },\n});\n\nconst useValidationMessageIconBaseClassName = makeResetStyles({\n  display: 'inline-block',\n  fontSize: iconSize,\n  // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.\n  marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,\n  marginRight: tokens.spacingHorizontalXS,\n  // Line height of 0 prevents the verticalAlign from affecting the line height of the text.\n  lineHeight: '0',\n  // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).\n  verticalAlign: '-1px',\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n  warning: {\n    color: tokens.colorPaletteDarkOrangeForeground1,\n  },\n  success: {\n    color: tokens.colorPaletteGreenForeground1,\n  },\n});\n\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = (state: FieldState): FieldState => {\n  'use no memo';\n\n  const { validationState, size } = state;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  // eslint-disable-next-line react-hooks/immutability\n  state.root.className = mergeClasses(\n    fieldClassNames.root,\n    rootStyles.base,\n    horizontal && rootStyles.horizontal,\n    horizontal && !state.label && rootStyles.horizontalNoLabel,\n    state.root.className,\n  );\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.label.className = mergeClasses(\n      fieldClassNames.label,\n      labelStyles.base,\n      horizontal && labelStyles.horizontal,\n      horizontal && size === 'small' && labelStyles.horizontalSmall,\n      horizontal && size === 'large' && labelStyles.horizontalLarge,\n      !horizontal && labelStyles.vertical,\n      !horizontal && size === 'large' && labelStyles.verticalLarge,\n      state.label.className,\n    );\n  }\n\n  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.validationMessageIcon.className = mergeClasses(\n      fieldClassNames.validationMessageIcon,\n      validationMessageIconBaseClassName,\n      validationState !== 'none' && validationMessageIconStyles[validationState],\n      state.validationMessageIcon.className,\n    );\n  }\n\n  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.validationMessage.className = mergeClasses(\n      fieldClassNames.validationMessage,\n      secondaryTextBaseClassName,\n      validationState === 'error' && secondaryTextStyles.error,\n      !!state.validationMessageIcon && secondaryTextStyles.withIcon,\n      state.validationMessage.className,\n    );\n  }\n\n  if (state.hint) {\n    // eslint-disable-next-line react-hooks/immutability\n    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);\n  }\n\n  return state;\n};\n"],"names":["tokens","typographyStyles","makeResetStyles","makeStyles","mergeClasses","fieldClassNames","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","base","display","horizontal","gridTemplateColumns","gridTemplateRows","horizontalNoLabel","paddingLeft","useLabelStyles","maxWidth","maxHeight","vertical","paddingTop","spacingVerticalXXS","paddingBottom","marginBottom","verticalLarge","spacingVerticalXS","spacingVerticalSNudge","marginRight","spacingHorizontalM","gridRowStart","gridRowEnd","horizontalSmall","horizontalLarge","useSecondaryTextBaseClassName","marginTop","color","colorNeutralForeground3","caption1","useSecondaryTextStyles","error","colorPaletteRedForeground1","withIcon","spacingHorizontalXS","useValidationMessageIconBaseClassName","fontSize","marginLeft","lineHeight","verticalAlign","useValidationMessageIconStyles","warning","colorPaletteDarkOrangeForeground1","success","colorPaletteGreenForeground1","useFieldStyles_unstable","state","validationState","size","orientation","rootStyles","className","labelStyles","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"AAAA;;;;;;;;;;;;IAOaK,eAAAA;;;2BAqHAoD;eAAAA;;;4BA1H4B,wBAAwB;uBAEP,iBAAiB;AAGpE,wBAAoD;IACzDnD,MAAM,CAAC,SAAS,CAAC;IACjBC,OAAO,CAAC,gBAAgB,CAAC;IACzBC,mBAAmB,CAAC,4BAA4B,CAAC;IACjDC,uBAAuB,CAAC,gCAAgC,CAAC;IACzDC,MAAM,CAAC,eAAe,CAAC;AACzB,EAAE;AAEF,6CAA6C;AAC7C,MAAMC,WAAW;AAEjB;;CAEC,GACD,MAAMC,oBAAgBT,iBAAAA,EAAW;IAC/BU,MAAM;QACJC,SAAS;IACX;IAEA,8FAA8F;IAC9F,wFAAwF;IACxFC,YAAY;QACVC,qBAAqB;QACrBC,kBAAkB;IACpB;IAEA,iFAAiF;IACjF,gHAAgH;IAChHC,mBAAmB;QACjBC,aAAa;QACbH,qBAAqB;IACvB;AACF;AAEA,MAAMI,qBAAiBjB,iBAAAA,EAAW;IAChCU,MAAM;QACJQ,UAAU;QACVC,WAAW;IACb;IAEAC,UAAU;QACRC,YAAYxB,kBAAAA,CAAOyB,kBAAkB;QACrCC,eAAe1B,kBAAAA,CAAOyB,kBAAkB;QACxCE,cAAc3B,kBAAAA,CAAOyB,kBAAkB;IACzC;IAEAG,eAAe;QACbJ,YAAY;QACZE,eAAe;QACfC,cAAc3B,kBAAAA,CAAO6B,iBAAiB;IACxC;IAEAd,YAAY;QACVS,YAAYxB,kBAAAA,CAAO8B,qBAAqB;QACxCJ,eAAe1B,kBAAAA,CAAO8B,qBAAqB;QAC3CC,aAAa/B,kBAAAA,CAAOgC,kBAAkB;QACtCC,cAAc;QACdC,YAAY;IACd;IAEAC,iBAAiB;QACfX,YAAYxB,kBAAAA,CAAO6B,iBAAiB;QACpCH,eAAe1B,kBAAAA,CAAO6B,iBAAiB;IACzC;IAEAO,iBAAiB;QACf,0GAA0G;QAC1G,+FAA+F;QAC/FZ,YAAY;QACZE,eAAe;IACjB;AACF;AAEA,MAAMW,oCAAgCnC,sBAAAA,EAAgB;IACpDoC,WAAWtC,kBAAAA,CAAOyB,kBAAkB;IACpCc,OAAOvC,kBAAAA,CAAOwC,uBAAuB;IACrC,GAAGvC,4BAAAA,CAAiBwC,QAAQ;AAC9B;AAEA,MAAMC,6BAAyBvC,iBAAAA,EAAW;IACxCwC,OAAO;QACLJ,OAAOvC,kBAAAA,CAAO4C,0BAA0B;IAC1C;IAEAC,UAAU;QACR,kGAAkG;QAClG1B,aAAa,CAAC,KAAK,EAAER,SAAS,GAAG,EAAEX,kBAAAA,CAAO8C,mBAAmB,CAAC,CAAC,CAAC;IAClE;AACF;AAEA,MAAMC,4CAAwC7C,sBAAAA,EAAgB;IAC5DY,SAAS;IACTkC,UAAUrC;IACV,mGAAmG;IACnGsC,YAAY,CAAC,MAAM,EAAEtC,SAAS,GAAG,EAAEX,kBAAAA,CAAO8C,mBAAmB,CAAC,CAAC,CAAC;IAChEf,aAAa/B,kBAAAA,CAAO8C,mBAAmB;IACvC,0FAA0F;IAC1FI,YAAY;IACZ,uGAAuG;IACvGC,eAAe;AACjB;AAEA,MAAMC,qCAAiCjD,iBAAAA,EAAW;IAChDwC,OAAO;QACLJ,OAAOvC,kBAAAA,CAAO4C,0BAA0B;IAC1C;IACAS,SAAS;QACPd,OAAOvC,kBAAAA,CAAOsD,iCAAiC;IACjD;IACAC,SAAS;QACPhB,OAAOvC,kBAAAA,CAAOwD,4BAA4B;IAC5C;AACF;AAKO,gCAAgC,CAACE;IACtC;IAEA,MAAM,EAAEC,eAAe,EAAEC,IAAI,EAAE,GAAGF;IAClC,MAAM3C,aAAa2C,MAAMG,WAAW,KAAK;IAEzC,MAAMC,aAAalD;IACnB,oDAAoD;IACpD8C,MAAMpD,IAAI,CAACyD,SAAS,OAAG3D,mBAAAA,EACrBC,gBAAgBC,IAAI,EACpBwD,WAAWjD,IAAI,EACfE,cAAc+C,WAAW/C,UAAU,EACnCA,cAAc,CAAC2C,MAAMnD,KAAK,IAAIuD,WAAW5C,iBAAiB,EAC1DwC,MAAMpD,IAAI,CAACyD,SAAS;IAGtB,MAAMC,cAAc5C;IACpB,IAAIsC,MAAMnD,KAAK,EAAE;QACf,oDAAoD;QACpDmD,MAAMnD,KAAK,CAACwD,SAAS,OAAG3D,mBAAAA,EACtBC,gBAAgBE,KAAK,EACrByD,YAAYnD,IAAI,EAChBE,cAAciD,YAAYjD,UAAU,EACpCA,cAAc6C,SAAS,WAAWI,YAAY7B,eAAe,EAC7DpB,cAAc6C,SAAS,WAAWI,YAAY5B,eAAe,EAC7D,CAACrB,cAAciD,YAAYzC,QAAQ,EACnC,CAACR,cAAc6C,SAAS,WAAWI,YAAYpC,aAAa,EAC5D8B,MAAMnD,KAAK,CAACwD,SAAS;IAEzB;IAEA,MAAME,qCAAqClB;IAC3C,MAAMmB,8BAA8Bd;IACpC,IAAIM,MAAMjD,qBAAqB,EAAE;QAC/B,oDAAoD;QACpDiD,MAAMjD,qBAAqB,CAACsD,SAAS,OAAG3D,mBAAAA,EACtCC,gBAAgBI,qBAAqB,EACrCwD,oCACAN,oBAAoB,UAAUO,2BAA2B,CAACP,gBAAgB,EAC1ED,MAAMjD,qBAAqB,CAACsD,SAAS;IAEzC;IAEA,MAAMI,6BAA6B9B;IACnC,MAAM+B,sBAAsB1B;IAC5B,IAAIgB,MAAMlD,iBAAiB,EAAE;QAC3B,oDAAoD;QACpDkD,MAAMlD,iBAAiB,CAACuD,SAAS,OAAG3D,mBAAAA,EAClCC,gBAAgBG,iBAAiB,EACjC2D,4BACAR,oBAAoB,WAAWS,oBAAoBzB,KAAK,EACxD,CAAC,CAACe,MAAMjD,qBAAqB,IAAI2D,oBAAoBvB,QAAQ,EAC7Da,MAAMlD,iBAAiB,CAACuD,SAAS;IAErC;IAEA,IAAIL,MAAMhD,IAAI,EAAE;QACd,oDAAoD;QACpDgD,MAAMhD,IAAI,CAACqD,SAAS,OAAG3D,mBAAAA,EAAaC,gBAAgBK,IAAI,EAAEyD,4BAA4BT,MAAMhD,IAAI,CAACqD,SAAS;IAC5G;IAEA,OAAOL;AACT,EAAE"}

package/lib-commonjs/index.js

@@ -21,6 +21,9 @@ _export(exports, {
     renderField_unstable: function() {
         return _Field.renderField_unstable;
     },
+    useFieldBase_unstable: function() {
+        return _Field.useFieldBase_unstable;
+    },
     useFieldContextValues_unstable: function() {
         return _index.useFieldContextValues_unstable;
     },

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n} from './Field';\nexport {\n  FieldContextProvider,\n  useFieldContext_unstable,\n  useFieldContextValues_unstable,\n  useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IAASA;2BAAK;;;eAUZK,2BAAoB;;;eAVNJ,sBAAe;;;eAAEC,2BAAoB;;kCAYrB;eAA9BK;;;eADAD,+BAAwB;;;eAExBE,oCAA6B;;;eAbwBL,8BAAuB;;qBAAmB;eAAjBC;;;uBAAyB,UAAU;uBAc5G,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n  Field,\n  fieldClassNames,\n  renderField_unstable,\n  useFieldStyles_unstable,\n  useField_unstable,\n  useFieldBase_unstable,\n} from './Field';\nexport type {\n  FieldContextValue,\n  FieldContextValues,\n  FieldControlProps,\n  FieldProps,\n  FieldSlots,\n  FieldState,\n  FieldBaseProps,\n  FieldBaseState,\n} from './Field';\nexport {\n  FieldContextProvider,\n  useFieldContext_unstable,\n  useFieldContextValues_unstable,\n  useFieldControlProps_unstable,\n} from './contexts/index';\nexport type { FieldControlPropsOptions } from './contexts/index';\n\n// Experimental APIs - will be uncommented in the experimental release branch\n// export { useFieldBase_unstable } from './Field';\n// export type { FieldBaseProps, FieldBaseState } from './Field';\n"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","useFieldBase_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable"],"mappings":";;;;;;;;;;;IACEA;2BAAK;;;eAkBLM,2BAAoB;;;eAjBpBL,sBAAe;;;eACfC,2BAAoB;;;eAGpBG,4BAAqB;;IAerBG;oDAA8B;;;eAD9BD,+BAAwB;;IAExBE,6BAA6B;;;;eAlB7BN,8BAAuB;;;eACvBC,wBAAiB;;;uBAEZ,UAAU;uBAgBV,mBAAmB;CAG1B,6EAA6E;CAC7E,mDAAmD;CACnD,iEAAiE"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-field",
-  "version": "9.5.0",
+  "version": "9.5.2",
   "description": "Fluent UI Field components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -12,13 +12,13 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.2.15",
+    "@fluentui/react-context-selector": "^9.2.17",
     "@fluentui/react-icons": "^2.0.245",
-    "@fluentui/react-jsx-runtime": "^9.4.1",
-    "@fluentui/react-label": "^9.4.0",
+    "@fluentui/react-jsx-runtime": "^9.4.3",
+    "@fluentui/react-label": "^9.4.2",
     "@fluentui/react-shared-contexts": "^9.26.2",
     "@fluentui/react-theme": "^9.2.1",
-    "@fluentui/react-utilities": "^9.26.2",
+    "@fluentui/react-utilities": "^9.26.4",
     "@griffel/react": "^1.5.32",
     "@swc/helpers": "^0.5.1"
   },