@fluentui/react-field 9.0.0-alpha.8 → 9.0.0-beta.1

package/lib/contexts/useFieldContextValues.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+/**
+ * Get the context values used when rendering Field.
+ */
+export const useFieldContextValues_unstable = state => {
+  var _state_label, _state_label1, _state_validationMessage, _state_hint;
+  const {
+    generatedControlId,
+    orientation,
+    required,
+    size,
+    validationState
+  } = state;
+  const labelFor = (_state_label = state.label) === null || _state_label === void 0 ? void 0 : _state_label.htmlFor;
+  const labelId = (_state_label1 = state.label) === null || _state_label1 === void 0 ? void 0 : _state_label1.id;
+  const validationMessageId = (_state_validationMessage = state.validationMessage) === null || _state_validationMessage === void 0 ? void 0 : _state_validationMessage.id;
+  const hintId = (_state_hint = state.hint) === null || _state_hint === void 0 ? void 0 : _state_hint.id;
+  const field = React.useMemo(() => ({
+    generatedControlId,
+    hintId,
+    labelFor,
+    labelId,
+    orientation,
+    required,
+    size,
+    validationMessageId,
+    validationState
+  }), [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState]);
+  return {
+    field
+  };
+};
+//# sourceMappingURL=useFieldContextValues.js.map

package/lib/contexts/useFieldContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useFieldContextValues_unstable","state","_state_label","_state_label1","_state_validationMessage","_state_hint","generatedControlId","orientation","required","size","validationState","labelFor","label","htmlFor","labelId","id","validationMessageId","validationMessage","hintId","hint","field","useMemo"],"sources":["../../src/contexts/useFieldContextValues.ts"],"sourcesContent":["import * as React from 'react';\n\nimport type { FieldContextValue, FieldContextValues, FieldState } from '../Field';\n\n/**\n * Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = (state: FieldState): FieldContextValues => {\n  const { generatedControlId, orientation, required, size, validationState } = state;\n  const labelFor = state.label?.htmlFor;\n  const labelId = state.label?.id;\n  const validationMessageId = state.validationMessage?.id;\n  const hintId = state.hint?.id;\n\n  const field: FieldContextValue = React.useMemo(\n    () => ({\n      generatedControlId,\n      hintId,\n      labelFor,\n      labelId,\n      orientation,\n      required,\n      size,\n      validationMessageId,\n      validationState,\n    }),\n    [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState],\n  );\n\n  return { field };\n};\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AAIvB;;;AAGA,OAAO,MAAMC,8BAAA,GAAkCC,KAAA,IAA0C;MAEtEC,YAAA,EACDC,aAAA,EACYC,wBAAA,EACbC,WAAA;EAJf,MAAM;IAAEC,kBAAA;IAAoBC,WAAA;IAAaC,QAAA;IAAUC,IAAA;IAAMC;EAAe,CAAE,GAAGT,KAAA;EAC7E,MAAMU,QAAA,GAAW,CAAAT,YAAA,GAAAD,KAAA,CAAMW,KAAK,cAAXV,YAAA,uBAAAA,YAAA,CAAaW,OAAO;EACrC,MAAMC,OAAA,GAAU,CAAAX,aAAA,GAAAF,KAAA,CAAMW,KAAK,cAAXT,aAAA,uBAAAA,aAAA,CAAaY,EAAE;EAC/B,MAAMC,mBAAA,GAAsB,CAAAZ,wBAAA,GAAAH,KAAA,CAAMgB,iBAAiB,cAAvBb,wBAAA,uBAAAA,wBAAA,CAAyBW,EAAE;EACvD,MAAMG,MAAA,GAAS,CAAAb,WAAA,GAAAJ,KAAA,CAAMkB,IAAI,cAAVd,WAAA,uBAAAA,WAAA,CAAYU,EAAE;EAE7B,MAAMK,KAAA,GAA2BrB,KAAA,CAAMsB,OAAO,CAC5C,OAAO;IACLf,kBAAA;IACAY,MAAA;IACAP,QAAA;IACAG,OAAA;IACAP,WAAA;IACAC,QAAA;IACAC,IAAA;IACAO,mBAAA;IACAN;EACF,IACA,CAACJ,kBAAA,EAAoBY,MAAA,EAAQP,QAAA,EAAUG,OAAA,EAASP,WAAA,EAAaC,QAAA,EAAUC,IAAA,EAAMO,mBAAA,EAAqBN,eAAA,CAAgB;EAGpH,OAAO;IAAEU;EAAM;AACjB"}

package/lib/contexts/useFieldControlProps.js

@@ -0,0 +1,65 @@
+var _props, _props1, _arialabelledby, _props2, _ariainvalid, _props3, _props4, _ariarequired, _props5;
+import { useFieldContext_unstable } from './FieldContext';
+export function useFieldControlProps_unstable(props, options) {
+  return getFieldControlProps(useFieldContext_unstable(), props, options);
+}
+/**
+ * @internal
+ * Implementation of useFieldControlProps_unstable.
+ * Split out so it can be used directly in renderField_unstable.
+ */
+export function getFieldControlProps(context, props, options) {
+  if (!context) {
+    return props;
+  }
+  // Create a copy of props so we don't modify the original
+  props = {
+    ...props
+  };
+  const {
+    generatedControlId,
+    hintId,
+    labelFor,
+    labelId,
+    required,
+    validationMessageId,
+    validationState
+  } = context;
+  if (generatedControlId) {
+    var _id;
+    (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;
+  }
+  // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer
+  // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).
+  if (labelId && (!(options === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {
+    var _;
+    (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;
+  }
+  // The control is described by the validation message, or hint, or both.
+  // We also preserve and append any aria-describedby from props.
+  // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933
+  if (validationMessageId || hintId) {
+    // NOTE: Not using ??= since we're merging and overriding the user-provided value.
+    props['aria-describedby'] = [validationMessageId, hintId, props === null || props === void 0 ? void 0 : props['aria-describedby']].filter(Boolean).join(' ');
+  }
+  if (validationState === 'error') {
+    var _1;
+    (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;
+  }
+  if (required) {
+    if (options === null || options === void 0 ? void 0 : options.supportsRequired) {
+      var _required;
+      (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;
+    } else {
+      var _2;
+      (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;
+    }
+  }
+  // Include the size prop if this control supports it
+  if (options === null || options === void 0 ? void 0 : options.supportsSize) {
+    var _size;
+    (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;
+  }
+  return props;
+}
+//# sourceMappingURL=useFieldControlProps.js.map

package/lib/contexts/useFieldControlProps.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_props","_props1","_arialabelledby","_props2","_ariainvalid","_props3","_props4","_ariarequired","_props5","useFieldContext_unstable","useFieldControlProps_unstable","props","options","getFieldControlProps","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","_id","id","supportsLabelFor","_","filter","Boolean","join","_1","supportsRequired","_required","_2","supportsSize","_size","size"],"sources":["../../src/contexts/useFieldControlProps.ts"],"sourcesContent":["import type { FieldContextValue, FieldControlProps } from '../Field';\nimport { useFieldContext_unstable } from './FieldContext';\n\n/**\n * Options for `useFieldControlProps_unstable`.\n */\nexport type FieldControlPropsOptions = {\n  /**\n   * Skips setting `aria-labelledby` on the control if the `label.htmlFor` refers to the control.\n   *\n   * This should be used with controls that can be the target of a label's `for` prop:\n   * `<button>`, `<input>`, `<progress>`, `<select>`, `<textarea>`.\n   */\n  supportsLabelFor?: boolean;\n\n  /**\n   * Sets `required` instead of `aria-required` when the Field is marked required.\n   *\n   * This should be used with controls that support the `required` prop:\n   * `<input>` (except `range` or `color`), `<select>`, `<textarea>`.\n   */\n  supportsRequired?: boolean;\n\n  /**\n   * Sets the size prop on the control to match the Field's size: `'small' | 'medium' | 'large'`.\n   *\n   * This should be used with controls that have a custom size prop that matches the Field's size prop.\n   */\n  supportsSize?: boolean;\n};\n\n/**\n * Gets the control props from the field context, if this inside a `<Field>`.\n *\n * When called with no arguments, returns the FieldControlProps that should be applied to the control.\n *\n * @returns A FieldControlProps object if inside a `<Field>`, otherwise undefined.\n */\nexport function useFieldControlProps_unstable(): FieldControlProps | undefined;\n\n/**\n * Copies and merges the FieldControlProps with the given props, if this inside a `<Field>`.\n *\n * @param props - The existing props for the control. These will be merged with the control props from the field context.\n * @param options - Option to include the size prop.\n * @returns Merged props if inside a `<Field>`, otherwise the original props, or undefined if no props given.\n */\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n  props: Props,\n  options?: FieldControlPropsOptions,\n): Props;\nexport function useFieldControlProps_unstable<Props extends FieldControlProps>(\n  props?: Props,\n  options?: FieldControlPropsOptions,\n): Props | undefined {\n  return getFieldControlProps(useFieldContext_unstable(), props, options);\n}\n\n/**\n * @internal\n * Implementation of useFieldControlProps_unstable.\n * Split out so it can be used directly in renderField_unstable.\n */\nexport function getFieldControlProps<Props extends FieldControlProps>(\n  context: FieldContextValue | undefined,\n  props?: Props,\n  options?: FieldControlPropsOptions,\n): Props | undefined {\n  if (!context) {\n    return props;\n  }\n\n  // Create a copy of props so we don't modify the original\n  props = { ...props } as Props;\n\n  const { generatedControlId, hintId, labelFor, labelId, required, validationMessageId, validationState } = context;\n\n  if (generatedControlId) {\n    props.id ??= generatedControlId;\n  }\n\n  // Set aria-labelledby if the control doesn't support label.htmlFor, or if the label's htmlFor doesn't refer\n  // to this control (i.e. the user set this control's id prop without also setting the Field's label.htmlFor).\n  if (labelId && (!options?.supportsLabelFor || labelFor !== props.id)) {\n    props['aria-labelledby'] ??= labelId;\n  }\n\n  // The control is described by the validation message, or hint, or both.\n  // We also preserve and append any aria-describedby from props.\n  // For reference: https://github.com/microsoft/fluentui/pull/25580#discussion_r1017259933\n  if (validationMessageId || hintId) {\n    // NOTE: Not using ??= since we're merging and overriding the user-provided value.\n    props['aria-describedby'] = [validationMessageId, hintId, props?.['aria-describedby']].filter(Boolean).join(' ');\n  }\n\n  if (validationState === 'error') {\n    props['aria-invalid'] ??= true;\n  }\n\n  if (required) {\n    if (options?.supportsRequired) {\n      (props as { required?: boolean }).required ??= true;\n    } else {\n      props['aria-required'] ??= true;\n    }\n  }\n\n  // Include the size prop if this control supports it\n  if (options?.supportsSize) {\n    (props as { size?: FieldContextValue['size'] }).size ??= context.size;\n  }\n\n  return props;\n}\n"],"mappings":"IA8EIA,MAAA,EAMAC,OAAA,EAAMC,eAAA,EAYNC,OAAA,EAAMC,YAAA,EAKHC,OAAA,EAEDC,OAAA,EAAMC,aAAA,EAMPC,OAAA;AA5GL,SAASC,wBAAwB,QAAQ;AAkDzC,OAAO,SAASC,8BACdC,KAAa,EACbC,OAAkC,EACf;EACnB,OAAOC,oBAAA,CAAqBJ,wBAAA,IAA4BE,KAAA,EAAOC,OAAA;AACjE;AAEA;;;;;AAKA,OAAO,SAASC,qBACdC,OAAsC,EACtCH,KAAa,EACbC,OAAkC,EACf;EACnB,IAAI,CAACE,OAAA,EAAS;IACZ,OAAOH,KAAA;EACT;EAEA;EACAA,KAAA,GAAQ;IAAE,GAAGA;EAAM;EAEnB,MAAM;IAAEI,kBAAA;IAAoBC,MAAA;IAAQC,QAAA;IAAUC,OAAA;IAASC,QAAA;IAAUC,mBAAA;IAAqBC;EAAe,CAAE,GAAGP,OAAA;EAE1G,IAAIC,kBAAA,EAAoB;;IACtB,CAAAO,GAAA,IAAAtB,MAAA,GAAAW,KAAA,EAAMY,EAAA,cAAAD,GAAA,cAAAA,GAAA,GAANtB,MAAA,CAAMuB,EAAA,GAAOR,kBAAkB;EACjC;EAEA;EACA;EACA,IAAIG,OAAA,KAAY,EAACN,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASY,gBAAgB,CAAD,IAAKP,QAAA,KAAaN,KAAA,CAAMY,EAAE,CAAD,EAAI;;IACpE,CAAAE,CAAA,IAAAxB,OAAA,GAAAU,KAAA,EAAMT,eAAA,qBAAkB,cAAAuB,CAAA,cAAAA,CAAA,GAAxBxB,OAAK,CAACC,eAAA,CAAkB,GAAKgB,OAAO;EACtC;EAEA;EACA;EACA;EACA,IAAIE,mBAAA,IAAuBJ,MAAA,EAAQ;IACjC;IACAL,KAAK,CAAC,mBAAmB,GAAG,CAACS,mBAAA,EAAqBJ,MAAA,EAAQL,KAAA,aAAAA,KAAA,uBAAAA,KAAO,CAAC,mBAAmB,CAAC,CAACe,MAAM,CAACC,OAAA,EAASC,IAAI,CAAC;EAC9G;EAEA,IAAIP,eAAA,KAAoB,SAAS;;IAC/B,CAAAQ,EAAA,IAAA1B,OAAA,GAAAQ,KAAA,EAAMP,YAAA,kBAAe,cAAAyB,EAAA,cAAAA,EAAA,GAArB1B,OAAK,CAACC,YAAA,CAAe,GAAK,IAAI;EAChC;EAEA,IAAIe,QAAA,EAAU;IACZ,IAAIP,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASkB,gBAAgB,EAAE;;MAC7B,CAAAC,SAAA,IAAC1B,OAAA,GAAAM,KAAA,EAAiCQ,QAAA,cAAAY,SAAA,cAAAA,SAAA,GAAjC1B,OAAA,CAAiCc,QAAA,GAAa,IAAI;IACrD,OAAO;;MACL,CAAAa,EAAA,IAAA1B,OAAA,GAAAK,KAAA,EAAMJ,aAAA,mBAAgB,cAAAyB,EAAA,cAAAA,EAAA,GAAtB1B,OAAK,CAACC,aAAA,CAAgB,GAAK,IAAI;IACjC;EACF;EAEA;EACA,IAAIK,OAAA,aAAAA,OAAA,uBAAAA,OAAA,CAASqB,YAAY,EAAE;;IACzB,CAAAC,KAAA,IAAC1B,OAAA,GAAAG,KAAA,EAA+CwB,IAAA,cAAAD,KAAA,cAAAA,KAAA,GAA/C1B,OAAA,CAA+C2B,IAAA,GAASrB,OAAA,CAAQqB,IAAI;EACvE;EAEA,OAAOxB,KAAA;AACT"}

package/lib/index.js

@@ -1,2 +1,5 @@
-export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
+export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';
+export { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';
+// eslint-disable-next-line deprecation/deprecation
+export { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';
 //# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,oBAAoB,EAAE,uBAAuB,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC","sourcesContent":["export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldConfig, FieldControl, FieldProps, FieldSlots, FieldState } from './Field';\n"]}
+{"version":3,"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"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// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n// eslint-disable-next-line deprecation/deprecation\nexport type { DeprecatedFieldProps } from './util/makeDeprecatedField';\n"],"mappings":"AAAA,SAASA,KAAK,EAAEC,eAAe,EAAEC,oBAAoB,EAAEC,uBAAuB,EAAEC,iBAAiB,QAAQ;AASzG,SACEC,oBAAoB,EACpBC,wBAAwB,EACxBC,8BAA8B,EAC9BC,6BAA6B,QACxB;AAGP;AACA,SAASC,4BAA4B,EAAEC,mBAAmB,QAAQ"}

package/lib/util/makeDeprecatedField.js

@@ -0,0 +1,68 @@
+/* eslint-disable deprecation/deprecation */import * as React from 'react';
+import { Field, fieldClassNames } from '../Field';
+/**
+ * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
+ */
+function getPartitionedFieldProps(props) {
+  const {
+    className,
+    control,
+    hint,
+    label,
+    orientation,
+    required,
+    root,
+    size,
+    style,
+    validationMessage,
+    validationMessageIcon,
+    validationState = 'none',
+    ...restOfProps
+  } = props;
+  return [{
+    className,
+    hint,
+    label,
+    orientation,
+    required,
+    size,
+    style,
+    validationMessage,
+    validationMessageIcon,
+    validationState,
+    ...root
+  }, {
+    required,
+    size,
+    ...restOfProps,
+    ...control
+  }];
+}
+/**
+ * @deprecated Only for use to make deprecated [Control]Field shim components.
+ * @internal
+ */
+export function makeDeprecatedField(Control, options = {}) {
+  const {
+    mapProps = props => props,
+    displayName = `${Control.displayName}Field`
+  } = options;
+  const DeprecatedField = /*#__PURE__*/React.forwardRef((props, ref) => {
+    const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));
+    return /*#__PURE__*/React.createElement(Field, fieldProps, /*#__PURE__*/React.createElement(Control, {
+      ...controlProps,
+      ref: ref
+    }));
+  });
+  DeprecatedField.displayName = displayName;
+  return DeprecatedField;
+}
+/**
+ * @deprecated Only for use to make deprecated [Control]Field shim components.
+ * @internal
+ */
+export const getDeprecatedFieldClassNames = controlRootClassName => ({
+  ...fieldClassNames,
+  control: controlRootClassName
+});
+//# sourceMappingURL=makeDeprecatedField.js.map

package/lib/util/makeDeprecatedField.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","Field","fieldClassNames","getPartitionedFieldProps","props","className","control","hint","label","orientation","required","root","size","style","validationMessage","validationMessageIcon","validationState","restOfProps","makeDeprecatedField","Control","options","mapProps","displayName","DeprecatedField","forwardRef","ref","fieldProps","controlProps","createElement","getDeprecatedFieldClassNames","controlRootClassName"],"sources":["../../src/util/makeDeprecatedField.tsx"],"sourcesContent":["/* eslint-disable deprecation/deprecation */\nimport * as React from 'react';\nimport { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../Field';\nimport { Field, fieldClassNames } from '../Field';\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport type DeprecatedFieldProps<ControlProps> = ControlProps & {\n  root?: FieldProps;\n  control?: ControlProps;\n} & Pick<\n    FieldProps,\n    | 'className'\n    | 'hint'\n    | 'label'\n    | 'orientation'\n    | 'style'\n    | 'validationMessage'\n    | 'validationMessageIcon'\n    | 'validationState'\n  >;\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nfunction getPartitionedFieldProps<ControlProps>(\n  props: DeprecatedFieldProps<ControlProps> & Pick<FieldProps, 'required' | 'size'>,\n) {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    required,\n    root,\n    size,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState = 'none',\n    ...restOfProps\n  } = props;\n\n  return [\n    {\n      className,\n      hint,\n      label,\n      orientation,\n      required,\n      size,\n      style,\n      validationMessage,\n      validationMessageIcon,\n      validationState,\n      ...root,\n    },\n    {\n      required,\n      size,\n      ...restOfProps,\n      ...control,\n    },\n  ];\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport function makeDeprecatedField<ControlProps>(\n  Control: React.ComponentType<ControlProps>,\n  options: {\n    mapProps?: (props: DeprecatedFieldProps<ControlProps>) => DeprecatedFieldProps<ControlProps>;\n    displayName?: string;\n  } = {},\n) {\n  const { mapProps = props => props, displayName = `${Control.displayName}Field` } = options;\n\n  const DeprecatedField = React.forwardRef((props, ref) => {\n    const [fieldProps, controlProps] = getPartitionedFieldProps(mapProps(props));\n    return (\n      <Field {...fieldProps}>\n        {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n        <Control {...(controlProps as any)} ref={ref as any} />\n      </Field>\n    );\n  }) as ForwardRefComponent<DeprecatedFieldProps<ControlProps>>;\n\n  DeprecatedField.displayName = displayName;\n\n  return DeprecatedField;\n}\n\n/**\n * @deprecated Only for use to make deprecated [Control]Field shim components.\n * @internal\n */\nexport const getDeprecatedFieldClassNames = (controlRootClassName: string) => ({\n  ...fieldClassNames,\n  control: controlRootClassName,\n});\n"],"mappings":"AAAA,4CACA,YAAYA,KAAA,MAAW;AAGvB,SAASC,KAAK,EAAEC,eAAe,QAAQ;AAqBvC;;;AAGA,SAASC,yBACPC,KAAiF,EACjF;EACA,MAAM;IACJC,SAAA;IACAC,OAAA;IACAC,IAAA;IACAC,KAAA;IACAC,WAAA;IACAC,QAAA;IACAC,IAAA;IACAC,IAAA;IACAC,KAAA;IACAC,iBAAA;IACAC,qBAAA;IACAC,eAAA,GAAkB;IAClB,GAAGC;EAAA,CACJ,GAAGb,KAAA;EAEJ,OAAO,CACL;IACEC,SAAA;IACAE,IAAA;IACAC,KAAA;IACAC,WAAA;IACAC,QAAA;IACAE,IAAA;IACAC,KAAA;IACAC,iBAAA;IACAC,qBAAA;IACAC,eAAA;IACA,GAAGL;EACL,GACA;IACED,QAAA;IACAE,IAAA;IACA,GAAGK,WAAW;IACd,GAAGX;EACL,EACD;AACH;AAEA;;;;AAIA,OAAO,SAASY,oBACdC,OAA0C,EAC1CC,OAAA,GAGI,CAAC,CAAC,EACN;EACA,MAAM;IAAEC,QAAA,GAAWjB,KAAA,IAASA,KAAA;IAAOkB,WAAA,GAAe,GAAEH,OAAA,CAAQG,WAAY;EAAM,CAAE,GAAGF,OAAA;EAEnF,MAAMG,eAAA,gBAAkBvB,KAAA,CAAMwB,UAAU,CAAC,CAACpB,KAAA,EAAOqB,GAAA,KAAQ;IACvD,MAAM,CAACC,UAAA,EAAYC,YAAA,CAAa,GAAGxB,wBAAA,CAAyBkB,QAAA,CAASjB,KAAA;IACrE,oBACEJ,KAAA,CAAA4B,aAAA,CAAC3B,KAAA,EAAUyB,UAAA,eAET1B,KAAA,CAAA4B,aAAA,CAACT,OAAA;MAAS,GAAIQ,YAAY;MAAUF,GAAA,EAAKA;;EAG/C;EAEAF,eAAA,CAAgBD,WAAW,GAAGA,WAAA;EAE9B,OAAOC,eAAA;AACT;AAEA;;;;AAIA,OAAO,MAAMM,4BAAA,GAAgCC,oBAAA,KAAkC;EAC7E,GAAG5B,eAAe;EAClBI,OAAA,EAASwB;AACX"}

package/lib-commonjs/Field.js

@@ -1,10 +1,9 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./components/Field/index"), exports);
+ //# sourceMappingURL=Field.js.map
 
-const tslib_1 = /*#__PURE__*/require("tslib");
-
-tslib_1.__exportStar(require("./components/Field/index"), exports);
 //# sourceMappingURL=Field.js.map

package/lib-commonjs/Field.js.map

@@ -1 +1 @@
-{"version":3,"sources":["Field.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,0BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Field/index';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../lib/Field.js"],"sourcesContent":["export * from './components/Field/index';\n//# sourceMappingURL=Field.js.map"],"names":[],"mappings":";;;;;oBAAc;CACd,iCAAiC"}

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Field", {
+    enumerable: true,
+    get: ()=>Field
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _renderField = require("./renderField");
+const _useField = require("./useField");
+const _useFieldStyles = require("./useFieldStyles");
+const _index = require("../../contexts/index");
+const Field = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useField.useField_unstable)(props, ref);
+    (0, _useFieldStyles.useFieldStyles_unstable)(state);
+    const context = (0, _index.useFieldContextValues_unstable)(state);
+    return (0, _renderField.renderField_unstable)(state, context);
+});
+Field.displayName = 'Field'; //# sourceMappingURL=Field.js.map
+
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../lib/components/Field/Field.js"],"sourcesContent":["import * as React from 'react';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\nexport const Field = /*#__PURE__*/React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref);\n  useFieldStyles_unstable(state);\n  const context = useFieldContextValues_unstable(state);\n  return renderField_unstable(state, context);\n});\nField.displayName = 'Field';\n//# sourceMappingURL=Field.js.map"],"names":["Field","React","forwardRef","props","ref","state","useField_unstable","useFieldStyles_unstable","context","useFieldContextValues_unstable","renderField_unstable","displayName"],"mappings":";;;;+BAKaA;;aAAAA;;;6DALU;6BACc;0BACH;gCACM;uBACO;AACxC,MAAMA,QAAQ,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACjE,MAAMC,QAAQC,IAAAA,2BAAiB,EAACH,OAAOC;IACvCG,IAAAA,uCAAuB,EAACF;IACxB,MAAMG,UAAUC,IAAAA,qCAA8B,EAACJ;IAC/C,OAAOK,IAAAA,iCAAoB,EAACL,OAAOG;AACrC;AACAR,MAAMW,WAAW,GAAG,SACpB,iCAAiC"}

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

@@ -1,6 +1,9 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+ //# sourceMappingURL=Field.types.js.map
+
 //# sourceMappingURL=Field.types.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}
+{"version":3,"sources":["../../../lib/components/Field/Field.types.js"],"sourcesContent":["import * as React from 'react';\n//# sourceMappingURL=Field.types.js.map"],"names":[],"mappings":";;;;;6DAAuB;CACvB,uCAAuC"}

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

@@ -1,16 +1,13 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./Field.types"), exports);
+_exportStar(require("./Field"), exports);
+_exportStar(require("./renderField"), exports);
+_exportStar(require("./useField"), exports);
+_exportStar(require("./useFieldStyles"), exports);
+ //# sourceMappingURL=index.js.map
 
-const tslib_1 = /*#__PURE__*/require("tslib");
-
-tslib_1.__exportStar(require("./Field.types"), exports);
-
-tslib_1.__exportStar(require("./renderField"), exports);
-
-tslib_1.__exportStar(require("./useField"), exports);
-
-tslib_1.__exportStar(require("./useFieldStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Field/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,eAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,YAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,kBAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './Field.types';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../lib/components/Field/index.js"],"sourcesContent":["export * from './Field.types';\nexport * from './Field';\nexport * from './renderField';\nexport * from './useField';\nexport * from './useFieldStyles';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;oBACA;oBACA;CACd,iCAAiC"}

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

@@ -1,31 +1,24 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.renderField_unstable = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-/**
- * Render the final JSX of Field
- */
-
-
-const renderField_unstable = state => {
-  const {
-    slots,
-    slotProps
-  } = react_utilities_1.getSlots(state);
-  return React.createElement(slots.root, { ...slotProps.root
-  }, slots.label && React.createElement(slots.label, { ...slotProps.label
-  }), slots.control && React.createElement(slots.control, { ...slotProps.control
-  }), slots.validationMessage && React.createElement(slots.validationMessage, { ...slotProps.validationMessage
-  }, slots.validationMessageIcon && React.createElement(slots.validationMessageIcon, { ...slotProps.validationMessageIcon
-  }), slotProps.validationMessage.children), slots.hint && React.createElement(slots.hint, { ...slotProps.hint
-  }));
-};
+Object.defineProperty(exports, "renderField_unstable", {
+    enumerable: true,
+    get: ()=>renderField_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactUtilities = require("@fluentui/react-utilities");
+const _index = require("../../contexts/index");
+const renderField_unstable = (state, contextValues)=>{
+    const { slots , slotProps  } = (0, _reactUtilities.getSlots)(state);
+    let { children  } = state;
+    if (typeof children === 'function') {
+        children = children((0, _index.getFieldControlProps)(contextValues === null || contextValues === void 0 ? void 0 : contextValues.field) || {});
+    }
+    return /*#__PURE__*/ _react.createElement(_index.FieldContextProvider, {
+        value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
+    }, /*#__PURE__*/ _react.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/ _react.createElement(slots.label, slotProps.label), children, slots.validationMessage && /*#__PURE__*/ _react.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/ _react.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/ _react.createElement(slots.hint, slotProps.hint)));
+}; //# sourceMappingURL=renderField.js.map
 
-exports.renderField_unstable = renderField_unstable;
 //# sourceMappingURL=renderField.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["components/Field/renderField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,oBAAoB,GAA4B,KAAzB,IAAiD;EACnF,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAmC,KAAnC,CAA7B;EAEA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,KAAK,CAAC,KAAN,IAAe,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,KAAP,EAAY,EAAA,GAAK,SAAS,CAAC;EAAf,CAAZ,CADlB,EAGG,KAAK,CAAC,OAAN,IAAiB,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAM,SAAS,CAAC;EAAhB,CAAd,CAHpB,EAIG,KAAK,CAAC,iBAAN,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,iBAAP,EAAwB,EAAA,GAAK,SAAS,CAAC;EAAf,CAAxB,EACG,KAAK,CAAC,qBAAN,IAA+B,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,qBAAP,EAA4B,EAAA,GAAK,SAAS,CAAC;EAAf,CAA5B,CADlC,EAEG,SAAS,CAAC,iBAAV,CAA4B,QAF/B,CALJ,EAUG,KAAK,CAAC,IAAN,IAAc,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,CAVjB,CADF;AAcD,CAjBM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { FieldControl, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = <T extends FieldControl>(state: FieldState<T>) => {\n  const { slots, slotProps } = getSlots<FieldSlots<FieldControl>>(state as FieldState<FieldControl>);\n\n  return (\n    <slots.root {...slotProps.root}>\n      {slots.label && <slots.label {...slotProps.label} />}\n      {/* eslint-disable-next-line @typescript-eslint/no-explicit-any */}\n      {slots.control && <slots.control {...(slotProps.control as any)} />}\n      {slots.validationMessage && (\n        <slots.validationMessage {...slotProps.validationMessage}>\n          {slots.validationMessageIcon && <slots.validationMessageIcon {...slotProps.validationMessageIcon} />}\n          {slotProps.validationMessage.children}\n        </slots.validationMessage>\n      )}\n      {slots.hint && <slots.hint {...slotProps.hint} />}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../../../lib/components/Field/renderField.js"],"sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state, contextValues) => {\n  const {\n    slots,\n    slotProps\n  } = getSlots(state);\n  let {\n    children\n  } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues === null || contextValues === void 0 ? void 0 : contextValues.field) || {});\n  }\n  return /*#__PURE__*/React.createElement(FieldContextProvider, {\n    value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field\n  }, /*#__PURE__*/React.createElement(slots.root, slotProps.root, slots.label && /*#__PURE__*/React.createElement(slots.label, slotProps.label), children, slots.validationMessage && /*#__PURE__*/React.createElement(slots.validationMessage, slotProps.validationMessage, slots.validationMessageIcon && /*#__PURE__*/React.createElement(slots.validationMessageIcon, slotProps.validationMessageIcon), slotProps.validationMessage.children), slots.hint && /*#__PURE__*/React.createElement(slots.hint, slotProps.hint)));\n};\n//# sourceMappingURL=renderField.js.map"],"names":["renderField_unstable","state","contextValues","slots","slotProps","getSlots","children","getFieldControlProps","field","React","createElement","FieldContextProvider","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":";;;;+BAMaA;;aAAAA;;;6DANU;gCACE;uBACkC;AAIpD,MAAMA,uBAAuB,CAACC,OAAOC,gBAAkB;IAC5D,MAAM,EACJC,MAAK,EACLC,UAAS,EACV,GAAGC,IAAAA,wBAAQ,EAACJ;IACb,IAAI,EACFK,SAAQ,EACT,GAAGL;IACJ,IAAI,OAAOK,aAAa,YAAY;QAClCA,WAAWA,SAASC,IAAAA,2BAAoB,EAACL,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcM,KAAK,KAAK,CAAC;IAClI,CAAC;IACD,OAAO,WAAW,GAAEC,OAAMC,aAAa,CAACC,2BAAoB,EAAE;QAC5DC,OAAOV,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcM,KAAK;IAC1F,GAAG,WAAW,GAAEC,OAAMC,aAAa,CAACP,MAAMU,IAAI,EAAET,UAAUS,IAAI,EAAEV,MAAMW,KAAK,IAAI,WAAW,GAAEL,OAAMC,aAAa,CAACP,MAAMW,KAAK,EAAEV,UAAUU,KAAK,GAAGR,UAAUH,MAAMY,iBAAiB,IAAI,WAAW,GAAEN,OAAMC,aAAa,CAACP,MAAMY,iBAAiB,EAAEX,UAAUW,iBAAiB,EAAEZ,MAAMa,qBAAqB,IAAI,WAAW,GAAEP,OAAMC,aAAa,CAACP,MAAMa,qBAAqB,EAAEZ,UAAUY,qBAAqB,GAAGZ,UAAUW,iBAAiB,CAACT,QAAQ,GAAGH,MAAMc,IAAI,IAAI,WAAW,GAAER,OAAMC,aAAa,CAACP,MAAMc,IAAI,EAAEb,UAAUa,IAAI;AAC5f,GACA,uCAAuC"}

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

@@ -1,162 +1,78 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useField_unstable = exports.getPartitionedFieldProps = void 0;
-
-const React = /*#__PURE__*/require("react");
-
-const react_icons_1 = /*#__PURE__*/require("@fluentui/react-icons");
-
-const react_label_1 = /*#__PURE__*/require("@fluentui/react-label");
-
-const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
-
+Object.defineProperty(exports, "useField_unstable", {
+    enumerable: true,
+    get: ()=>useField_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _reactIcons = require("@fluentui/react-icons");
+const _reactLabel = require("@fluentui/react-label");
+const _reactUtilities = require("@fluentui/react-utilities");
 const validationMessageIcons = {
-  error: /*#__PURE__*/React.createElement(react_icons_1.ErrorCircle12Filled, null),
-  warning: /*#__PURE__*/React.createElement(react_icons_1.Warning12Filled, null),
-  success: /*#__PURE__*/React.createElement(react_icons_1.CheckmarkCircle12Filled, null)
-};
-/**
- * Partition the props used by the Field itself, from the props that are passed to the underlying field component.
- */
-
-const getPartitionedFieldProps = props => {
-  const {
-    className,
-    control,
-    hint,
-    label,
-    orientation,
-    root,
-    style,
-    validationMessage,
-    validationMessageIcon,
-    validationState,
-    ...restOfProps
-  } = props;
-  const fieldProps = {
-    className,
-    control,
-    hint,
-    label,
-    orientation,
-    root,
-    style,
-    validationMessage,
-    validationMessageIcon,
-    validationState
-  };
-  return [fieldProps, restOfProps];
-};
-
-exports.getPartitionedFieldProps = getPartitionedFieldProps;
-/**
- * Create the state required to render Field.
- *
- * The returned state can be modified with hooks such as useFieldStyles_unstable,
- * before being passed to renderField_unstable.
- *
- * @param props - Props passed to this field
- * @param ref - Ref to the control slot (primary slot)
- * @param params - Configuration parameters for this Field
- */
-
-const useField_unstable = (props, ref, params) => {
-  var _a, _b, _c, _d, _e;
-
-  const [fieldProps, controlProps] = exports.getPartitionedFieldProps(props);
-  const {
-    orientation = 'vertical',
-    validationState
-  } = fieldProps;
-  const {
-    labelConnection = 'htmlFor',
-    ariaInvalidOnError = true
-  } = params;
-  const baseId = react_utilities_1.useId('field-');
-  const root = react_utilities_1.resolveShorthand(fieldProps.root, {
-    required: true,
-    defaultProps: react_utilities_1.getNativeElementProps('div', fieldProps)
-  });
-  const control = react_utilities_1.resolveShorthand(fieldProps.control, {
-    required: true,
-    defaultProps: {
-      ref,
-      id: baseId + '__control',
-      ...controlProps
-    }
-  });
-  const label = react_utilities_1.resolveShorthand(fieldProps.label, {
-    defaultProps: {
-      id: baseId + '__label',
-      required: controlProps.required,
-      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,
-      htmlFor: labelConnection === 'htmlFor' ? control.id : undefined
-    }
-  });
-  const validationMessage = react_utilities_1.resolveShorthand(fieldProps.validationMessage, {
-    defaultProps: {
-      id: baseId + '__validationMessage'
-    }
-  });
-  const hint = react_utilities_1.resolveShorthand(fieldProps.hint, {
-    defaultProps: {
-      id: baseId + '__hint'
-    }
-  });
-  const validationMessageIcon = react_utilities_1.resolveShorthand(fieldProps.validationMessageIcon, {
-    required: !!validationState,
-    defaultProps: {
-      children: validationState ? validationMessageIcons[validationState] : undefined
-    }
-  }); // Hook up aria props on the control
-
-  if (label && labelConnection === 'aria-labelledby') {
-    (_a = control['aria-labelledby']) !== null && _a !== void 0 ? _a : control['aria-labelledby'] = label.id;
-  }
-
-  if (validationState === 'error' && ariaInvalidOnError) {
-    (_b = control['aria-invalid']) !== null && _b !== void 0 ? _b : control['aria-invalid'] = true;
-
-    if (validationMessage) {
-      (_c = control['aria-errormessage']) !== null && _c !== void 0 ? _c : control['aria-errormessage'] = validationMessage.id;
-    }
-
-    if (hint) {
-      (_d = control['aria-describedby']) !== null && _d !== void 0 ? _d : control['aria-describedby'] = hint.id;
-    }
-  } else {
-    // If the state is not an error, then the control is described by the validation message, or hint, or both
-    const describedby = validationMessage || hint;
-
-    if (describedby) {
-      (_e = control['aria-describedby']) !== null && _e !== void 0 ? _e : control['aria-describedby'] = validationMessage && hint ? `${validationMessage.id} ${hint.id}` : describedby.id;
-    }
-  }
-
-  const state = {
-    orientation,
-    validationState,
-    classNames: params.classNames,
-    components: {
-      root: 'div',
-      control: params.component,
-      label: react_label_1.Label,
-      validationMessage: 'div',
-      validationMessageIcon: 'span',
-      hint: 'div'
-    },
-    root,
-    control,
-    label,
-    validationMessageIcon,
-    validationMessage,
-    hint
-  };
-  return state;
+    error: /*#__PURE__*/ _react.createElement(_reactIcons.ErrorCircle12Filled, null),
+    warning: /*#__PURE__*/ _react.createElement(_reactIcons.Warning12Filled, null),
+    success: /*#__PURE__*/ _react.createElement(_reactIcons.CheckmarkCircle12Filled, null),
+    none: undefined
 };
+const useField_unstable = (props, ref)=>{
+    const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium'  } = props;
+    const baseId = (0, _reactUtilities.useId)('field-');
+    const generatedControlId = baseId + '__control';
+    const root = (0, _reactUtilities.getNativeElementProps)('div', {
+        ...props,
+        ref
+    }, /*excludedPropNames:*/ [
+        'children'
+    ]);
+    const label = (0, _reactUtilities.resolveShorthand)(props.label, {
+        defaultProps: {
+            htmlFor: generatedControlId,
+            id: baseId + '__label',
+            required,
+            size
+        }
+    });
+    const validationMessage = (0, _reactUtilities.resolveShorthand)(props.validationMessage, {
+        defaultProps: {
+            id: baseId + '__validationMessage',
+            role: validationState === 'error' ? 'alert' : undefined
+        }
+    });
+    const hint = (0, _reactUtilities.resolveShorthand)(props.hint, {
+        defaultProps: {
+            id: baseId + '__hint'
+        }
+    });
+    const defaultIcon = validationMessageIcons[validationState];
+    const validationMessageIcon = (0, _reactUtilities.resolveShorthand)(props.validationMessageIcon, {
+        required: !!defaultIcon,
+        defaultProps: {
+            children: defaultIcon
+        }
+    });
+    return {
+        children,
+        generatedControlId,
+        orientation,
+        required,
+        size,
+        validationState,
+        components: {
+            root: 'div',
+            label: _reactLabel.Label,
+            validationMessage: 'div',
+            validationMessageIcon: 'span',
+            hint: 'div'
+        },
+        root,
+        label,
+        validationMessageIcon,
+        validationMessage,
+        hint
+    };
+}; //# sourceMappingURL=useField.js.map
 
-exports.useField_unstable = useField_unstable;
 //# sourceMappingURL=useField.js.map