@fluentui/react-field 0.0.0-nightly-20221007-1237.1

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

@@ -0,0 +1,154 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  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");
+
+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)
+};
+/**
+ * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines
+ * them into a string separated by a space. Otherwise, returns just the defined ID (if any).
+ */
+
+const mergeAriaDescribedBy = (a, b) => a && b ? `${a} ${b}` : a || b;
+/**
+ * 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) => {
+  const [fieldProps, controlProps] = exports.getPartitionedFieldProps(props);
+  const baseId = react_utilities_1.useId('field-');
+  const {
+    orientation = 'vertical',
+    validationState
+  } = fieldProps;
+  const root = react_utilities_1.resolveShorthand(fieldProps.root, {
+    required: true,
+    defaultProps: react_utilities_1.getNativeElementProps('div', fieldProps)
+  });
+  const label = react_utilities_1.resolveShorthand(fieldProps.label, {
+    defaultProps: {
+      id: baseId + '__label',
+      required: controlProps.required,
+      size: typeof controlProps.size === 'string' ? controlProps.size : undefined // htmlFor is set below
+
+    }
+  });
+  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
+    }
+  });
+  const {
+    labelConnection = 'htmlFor'
+  } = params;
+  const hasError = validationState === 'error';
+  const control = react_utilities_1.resolveShorthand(fieldProps.control, {
+    required: true,
+    defaultProps: {
+      ref,
+      // Add a default ID only if required for label's htmlFor prop
+      id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,
+      // Add aria-labelledby only if not using the label's htmlFor
+      'aria-labelledby': labelConnection !== 'htmlFor' ? label === null || label === void 0 ? void 0 : label.id : undefined,
+      'aria-describedby': hasError ? hint === null || hint === void 0 ? void 0 : hint.id : mergeAriaDescribedBy(validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id, hint === null || hint === void 0 ? void 0 : hint.id),
+      'aria-errormessage': hasError ? validationMessage === null || validationMessage === void 0 ? void 0 : validationMessage.id : undefined,
+      'aria-invalid': hasError ? true : undefined,
+      ...controlProps
+    }
+  });
+
+  if (labelConnection === 'htmlFor' && label && !label.htmlFor) {
+    label.htmlFor = control.id;
+  }
+
+  const state = {
+    orientation,
+    validationState,
+    classNames: params.classNames,
+    components: {
+      root: 'div',
+      control: params.component,
+      label: react_label_1.Label,
+      validationMessage: 'span',
+      validationMessageIcon: 'span',
+      hint: 'span'
+    },
+    root,
+    control,
+    label,
+    validationMessageIcon,
+    validationMessage,
+    hint
+  };
+  return state;
+};
+
+exports.useField_unstable = useField_unstable;
+//# sourceMappingURL=useField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Field/useField.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type {\n  FieldComponent,\n  FieldConfig,\n  FieldProps,\n  FieldPropsWithOptionalComponentProps,\n  FieldState,\n} from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n} as const;\n\n/**\n * Merge two possibly-undefined IDs for aria-describedby. If both IDs are defined, combines\n * them into a string separated by a space. Otherwise, returns just the defined ID (if any).\n */\nconst mergeAriaDescribedBy = (a?: string, b?: string) => (a && b ? `${a} ${b}` : a || b);\n\n/**\n * Partition the props used by the Field itself, from the props that are passed to the underlying field component.\n */\nexport const getPartitionedFieldProps = <Props extends FieldProps<FieldComponent>>(props: Props) => {\n  const {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n    ...restOfProps\n  } = props;\n\n  const fieldProps = {\n    className,\n    control,\n    hint,\n    label,\n    orientation,\n    root,\n    style,\n    validationMessage,\n    validationMessageIcon,\n    validationState,\n  };\n\n  return [fieldProps, restOfProps] as const;\n};\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 control slot (primary slot)\n * @param params - Configuration parameters for this Field\n */\nexport const useField_unstable = <T extends FieldComponent>(\n  props: FieldPropsWithOptionalComponentProps<T>,\n  ref: React.Ref<HTMLElement>,\n  params: FieldConfig<T>,\n): FieldState<T> => {\n  const [fieldProps, controlProps] = getPartitionedFieldProps(props);\n\n  const baseId = useId('field-');\n\n  const { orientation = 'vertical', validationState } = fieldProps;\n\n  const root = resolveShorthand(fieldProps.root, {\n    required: true,\n    defaultProps: getNativeElementProps('div', fieldProps),\n  });\n\n  const label = resolveShorthand(fieldProps.label, {\n    defaultProps: {\n      id: baseId + '__label',\n      required: controlProps.required,\n      size: typeof controlProps.size === 'string' ? controlProps.size : undefined,\n      // htmlFor is set below\n    },\n  });\n\n  const validationMessage = resolveShorthand(fieldProps.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n    },\n  });\n\n  const hint = resolveShorthand(fieldProps.hint, {\n    defaultProps: {\n      id: baseId + '__hint',\n    },\n  });\n\n  const validationMessageIcon = resolveShorthand(fieldProps.validationMessageIcon, {\n    required: !!validationState,\n    defaultProps: {\n      children: validationState ? validationMessageIcons[validationState] : undefined,\n    },\n  });\n\n  const { labelConnection = 'htmlFor' } = params;\n  const hasError = validationState === 'error';\n\n  const control = resolveShorthand(fieldProps.control, {\n    required: true,\n    defaultProps: {\n      ref,\n      // Add a default ID only if required for label's htmlFor prop\n      id: label && labelConnection === 'htmlFor' ? baseId + '__control' : undefined,\n      // Add aria-labelledby only if not using the label's htmlFor\n      'aria-labelledby': labelConnection !== 'htmlFor' ? label?.id : undefined,\n      'aria-describedby': hasError ? hint?.id : mergeAriaDescribedBy(validationMessage?.id, hint?.id),\n      'aria-errormessage': hasError ? validationMessage?.id : undefined,\n      'aria-invalid': hasError ? true : undefined,\n      ...controlProps,\n    },\n  });\n\n  if (labelConnection === 'htmlFor' && label && !label.htmlFor) {\n    label.htmlFor = control.id;\n  }\n\n  const state: FieldState<FieldComponent> = {\n    orientation,\n    validationState,\n    classNames: params.classNames,\n    components: {\n      root: 'div',\n      control: params.component,\n      label: Label,\n      validationMessage: 'span',\n      validationMessageIcon: 'span',\n      hint: 'span',\n    },\n    root,\n    control,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n\n  return state as FieldState<T>;\n};\n"],"sourceRoot":""}

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

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useFieldStyles_unstable = exports.getFieldClassNames = void 0;
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
+
+const getFieldClassNames = name => ({
+  root: `fui-${name}`,
+  control: `fui-${name}__control`,
+  label: `fui-${name}__label`,
+  validationMessage: `fui-${name}__validationMessage`,
+  validationMessageIcon: `fui-${name}__validationMessageIcon`,
+  hint: `fui-${name}__hint`
+});
+
+exports.getFieldClassNames = getFieldClassNames;
+/**
+ * Styles for the root slot
+ */
+
+const useRootStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "mc9l5x": "fwk3njj",
+    "Bxotwcr": "f14np9u9",
+    "B7hvi0a": "f1m2n5bn"
+  },
+  "horizontal": {
+    "wkccdc": "fai812u",
+    "Budl1dq": "fckz59x"
+  },
+  "secondColumn": {
+    "Br312pm": "fd46tj4"
+  }
+}, {
+  "d": [".fwk3njj{display:inline-grid;}", ".f14np9u9{grid-auto-flow:row;}", ".f1m2n5bn{justify-items:start;}", ".fai812u{grid-template-rows:auto auto auto auto;}", ".fckz59x{grid-template-columns:1fr 2fr;}", ".fd46tj4{grid-column-start:2;}"]
+});
+
+const useLabelStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "B6of3ja": "fg30ohd",
+    "jrapky": "fyacil5"
+  },
+  "horizontal": {
+    "Ijaq50": "f16hsg94",
+    "nk6f5a": "f1nzqi2z",
+    "t21cq0": ["fkujibs", "f199hnxi"],
+    "qb2dma": "f9h729m",
+    "Bdqf98w": "fhb5wj7"
+  }
+}, {
+  "d": [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f9h729m{-webkit-align-self:start;-ms-flex-item-align:start;align-self:start;}", ".fhb5wj7{justify-self:stretch;}"]
+});
+
+const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "B6of3ja": "fg30ohd",
+    "sj55zd": "f11d4kpn",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm"
+  },
+  "error": {
+    "sj55zd": "f1hcrxcs"
+  }
+}, {
+  "d": [".fg30ohd{margin-top:var(--spacingVerticalXXS);}", ".f11d4kpn{color:var(--colorNeutralForeground3);}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}"]
+});
+
+const useValidationMessageIconStyles = /*#__PURE__*/react_1.__styles({
+  "base": {
+    "Be2twd7": "f1ugzwwg",
+    "Bg96gwp": "fp4gqsa",
+    "ha4doy": "fmrv4ls",
+    "t21cq0": ["fm0x6gh", "fbyavb5"]
+  },
+  "error": {
+    "sj55zd": "f1hcrxcs"
+  },
+  "warning": {
+    "sj55zd": "f1k5f75o"
+  },
+  "success": {
+    "sj55zd": "ffmvakt"
+  }
+}, {
+  "d": [".f1ugzwwg{font-size:12px;}", ".fp4gqsa{line-height:12px;}", ".fmrv4ls{vertical-align:middle;}", ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}", ".fbyavb5{margin-left:var(--spacingHorizontalXS);}", ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
+});
+/**
+ * Apply styling to the Field slots based on the state
+ */
+
+
+const useFieldStyles_unstable = state => {
+  const classNames = state.classNames;
+  const validationState = state.validationState;
+  const horizontal = state.orientation === 'horizontal';
+  const rootStyles = useRootStyles();
+  state.root.className = react_1.mergeClasses(classNames.root, rootStyles.base, horizontal && rootStyles.horizontal, state.root.className);
+
+  if (state.control) {
+    state.control.className = react_1.mergeClasses(classNames.control, horizontal && rootStyles.secondColumn, state.control.className);
+  }
+
+  const labelStyles = useLabelStyles();
+
+  if (state.label) {
+    state.label.className = react_1.mergeClasses(classNames.label, labelStyles.base, horizontal && labelStyles.horizontal, state.label.className);
+  }
+
+  const validationMessageIconStyles = useValidationMessageIconStyles();
+
+  if (state.validationMessageIcon) {
+    state.validationMessageIcon.className = react_1.mergeClasses(classNames.validationMessageIcon, validationMessageIconStyles.base, !!validationState && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+  }
+
+  const secondaryTextStyles = useSecondaryTextStyles();
+
+  if (state.validationMessage) {
+    state.validationMessage.className = react_1.mergeClasses(classNames.validationMessage, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, validationState === 'error' && secondaryTextStyles.error, state.validationMessage.className);
+  }
+
+  if (state.hint) {
+    state.hint.className = react_1.mergeClasses(classNames.hint, secondaryTextStyles.base, horizontal && rootStyles.secondColumn, state.hint.className);
+  }
+};
+
+exports.useFieldStyles_unstable = useFieldStyles_unstable;
+//# sourceMappingURL=useFieldStyles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldComponent, FieldProps, FieldSlots, FieldState } from './Field.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldComponent>> => ({\n  root: `fui-${name}`,\n  control: `fui-${name}__control`,\n  label: `fui-${name}__label`,\n  validationMessage: `fui-${name}__validationMessage`,\n  validationMessageIcon: `fui-${name}__validationMessageIcon`,\n  hint: `fui-${name}__hint`,\n});\n\n/**\n * Styles for the root slot\n */\nconst useRootStyles = makeStyles({\n  base: {\n    display: 'inline-grid',\n    gridAutoFlow: 'row',\n    justifyItems: 'start',\n  },\n\n  horizontal: {\n    gridTemplateRows: 'auto auto auto auto',\n    gridTemplateColumns: '1fr 2fr',\n  },\n\n  secondColumn: {\n    gridColumnStart: '2',\n  },\n});\n\nconst useLabelStyles = makeStyles({\n  base: {\n    marginTop: tokens.spacingVerticalXXS,\n    marginBottom: tokens.spacingVerticalXXS,\n  },\n\n  horizontal: {\n    gridRowStart: '1',\n    gridRowEnd: '-1',\n    marginRight: tokens.spacingHorizontalM,\n    alignSelf: 'start',\n    justifySelf: 'stretch',\n  },\n});\n\nconst useSecondaryTextStyles = makeStyles({\n  base: {\n    marginTop: tokens.spacingVerticalXXS,\n    color: tokens.colorNeutralForeground3,\n    ...typographyStyles.caption1,\n  },\n\n  error: {\n    color: tokens.colorPaletteRedForeground1,\n  },\n});\n\nconst useValidationMessageIconStyles = makeStyles({\n  base: {\n    fontSize: '12px',\n    lineHeight: '12px',\n    verticalAlign: 'middle',\n    marginRight: tokens.spacingHorizontalXS,\n  },\n\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 = <T extends FieldComponent>(state: FieldState<T>) => {\n  const classNames = state.classNames;\n  const validationState: FieldProps<FieldComponent>['validationState'] = state.validationState;\n  const horizontal = state.orientation === 'horizontal';\n\n  const rootStyles = useRootStyles();\n  state.root.className = mergeClasses(\n    classNames.root,\n    rootStyles.base,\n    horizontal && rootStyles.horizontal,\n    state.root.className,\n  );\n\n  if (state.control) {\n    state.control.className = mergeClasses(\n      classNames.control,\n      horizontal && rootStyles.secondColumn,\n      state.control.className,\n    );\n  }\n\n  const labelStyles = useLabelStyles();\n  if (state.label) {\n    state.label.className = mergeClasses(\n      classNames.label,\n      labelStyles.base,\n      horizontal && labelStyles.horizontal,\n      state.label.className,\n    );\n  }\n\n  const validationMessageIconStyles = useValidationMessageIconStyles();\n  if (state.validationMessageIcon) {\n    state.validationMessageIcon.className = mergeClasses(\n      classNames.validationMessageIcon,\n      validationMessageIconStyles.base,\n      !!validationState && validationMessageIconStyles[validationState],\n      state.validationMessageIcon.className,\n    );\n  }\n\n  const secondaryTextStyles = useSecondaryTextStyles();\n  if (state.validationMessage) {\n    state.validationMessage.className = mergeClasses(\n      classNames.validationMessage,\n      secondaryTextStyles.base,\n      horizontal && rootStyles.secondColumn,\n      validationState === 'error' && secondaryTextStyles.error,\n      state.validationMessage.className,\n    );\n  }\n\n  if (state.hint) {\n    state.hint.className = mergeClasses(\n      classNames.hint,\n      secondaryTextStyles.base,\n      horizontal && rootStyles.secondColumn,\n      state.hint.className,\n    );\n  }\n};\n"],"sourceRoot":""}

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.InputField = exports.inputFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_input_1 = /*#__PURE__*/require("@fluentui/react-input");
+
+const Field_1 = /*#__PURE__*/require("../../Field");
+
+exports.inputFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('InputField');
+exports.InputField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = Field_1.useField_unstable(props, ref, {
+    component: react_input_1.Input,
+    classNames: exports.inputFieldClassNames
+  });
+  Field_1.useFieldStyles_unstable(state);
+  return Field_1.renderField_unstable(state);
+});
+exports.InputField.displayName = 'InputField';
+//# sourceMappingURL=InputField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/InputField/InputField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,oBAAA,gBAAuB,OAAA,CAAA,kBAAA,CAAmB,YAAnB,CAAvB;AAEA,OAAA,CAAA,UAAA,gBAAmD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAC9F,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,aAAA,CAAA,KAAb;IAAoB,UAAU,EAAE,OAAA,CAAA;EAAhC,CAA9B,CAAd;EACA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJ+D,CAAnD;AAMb,OAAA,CAAA,UAAA,CAAW,WAAX,GAAyB,YAAzB","sourcesContent":["import * as React from 'react';\nimport { Input } from '@fluentui/react-input';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type InputFieldProps = FieldProps<typeof Input>;\n\nexport const inputFieldClassNames = getFieldClassNames('InputField');\n\nexport const InputField: ForwardRefComponent<InputFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Input, classNames: inputFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nInputField.displayName = 'InputField';\n"],"sourceRoot":""}

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

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

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ProgressField = exports.progressFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_progress_1 = /*#__PURE__*/require("@fluentui/react-progress");
+
+const Field_1 = /*#__PURE__*/require("../../Field");
+
+exports.progressFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('ProgressField');
+exports.ProgressField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = Field_1.useField_unstable(props, ref, {
+    component: react_progress_1.Progress,
+    classNames: exports.progressFieldClassNames,
+    labelConnection: 'aria-labelledby'
+  });
+  Field_1.useFieldStyles_unstable(state);
+  return Field_1.renderField_unstable(state);
+});
+exports.ProgressField.displayName = 'ProgressField';
+//# sourceMappingURL=ProgressField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ProgressField/ProgressField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,gBAAA,gBAAA,OAAA,CAAA,0BAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,uBAAA,gBAA0B,OAAA,CAAA,kBAAA,CAAmB,eAAnB,CAA1B;AAEA,OAAA,CAAA,aAAA,gBAAyD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACpG,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,gBAAA,CAAA,QAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,uBAF8B;IAG1C,eAAe,EAAE;EAHyB,CAA9B,CAAd;EAKA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CARqE,CAAzD;AAUb,OAAA,CAAA,aAAA,CAAc,WAAd,GAA4B,eAA5B","sourcesContent":["import * as React from 'react';\nimport { Progress } from '@fluentui/react-progress';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type ProgressFieldProps = FieldProps<typeof Progress>;\n\nexport const progressFieldClassNames = getFieldClassNames('ProgressField');\n\nexport const ProgressField: ForwardRefComponent<ProgressFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, {\n    component: Progress,\n    classNames: progressFieldClassNames,\n    labelConnection: 'aria-labelledby',\n  });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nProgressField.displayName = 'ProgressField';\n"],"sourceRoot":""}

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

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

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

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

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RadioGroupField = exports.radioGroupFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_radio_1 = /*#__PURE__*/require("@fluentui/react-radio");
+
+const Field_1 = /*#__PURE__*/require("../../Field");
+
+exports.radioGroupFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('RadioGroupField');
+exports.RadioGroupField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = Field_1.useField_unstable(props, ref, {
+    component: react_radio_1.RadioGroup,
+    classNames: exports.radioGroupFieldClassNames,
+    labelConnection: 'aria-labelledby'
+  });
+  Field_1.useFieldStyles_unstable(state);
+  return Field_1.renderField_unstable(state);
+});
+exports.RadioGroupField.displayName = 'RadioGroupField';
+//# sourceMappingURL=RadioGroupField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/RadioGroupField/RadioGroupField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,yBAAA,gBAA4B,OAAA,CAAA,kBAAA,CAAmB,iBAAnB,CAA5B;AAEA,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAC1C,SAAS,EAAE,aAAA,CAAA,UAD+B;IAE1C,UAAU,EAAE,OAAA,CAAA,yBAF8B;IAG1C,eAAe,EAAE;EAHyB,CAA9B,CAAd;EAKA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CARyE,CAA7D;AAUb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { RadioGroup } from '@fluentui/react-radio';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type RadioGroupFieldProps = FieldProps<typeof RadioGroup>;\n\nexport const radioGroupFieldClassNames = getFieldClassNames('RadioGroupField');\n\nexport const RadioGroupField: ForwardRefComponent<RadioGroupFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, {\n    component: RadioGroup,\n    classNames: radioGroupFieldClassNames,\n    labelConnection: 'aria-labelledby',\n  });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nRadioGroupField.displayName = 'RadioGroupField';\n"],"sourceRoot":""}

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

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

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectField = exports.selectFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_select_1 = /*#__PURE__*/require("@fluentui/react-select");
+
+const Field_1 = /*#__PURE__*/require("../../Field");
+
+exports.selectFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('SelectField');
+exports.SelectField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = Field_1.useField_unstable(props, ref, {
+    component: react_select_1.Select,
+    classNames: exports.selectFieldClassNames
+  });
+  Field_1.useFieldStyles_unstable(state);
+  return Field_1.renderField_unstable(state);
+});
+exports.SelectField.displayName = 'SelectField';
+//# sourceMappingURL=SelectField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SelectField/SelectField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,gBAAwB,OAAA,CAAA,kBAAA,CAAmB,aAAnB,CAAxB;AAEA,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,cAAA,CAAA,MAAb;IAAqB,UAAU,EAAE,OAAA,CAAA;EAAjC,CAA9B,CAAd;EACA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJiE,CAArD;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Select } from '@fluentui/react-select';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SelectFieldProps = FieldProps<typeof Select>;\n\nexport const selectFieldClassNames = getFieldClassNames('SelectField');\n\nexport const SelectField: ForwardRefComponent<SelectFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Select, classNames: selectFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSelectField.displayName = 'SelectField';\n"],"sourceRoot":""}

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

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

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SliderField = exports.sliderFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_slider_1 = /*#__PURE__*/require("@fluentui/react-slider");
+
+const Field_1 = /*#__PURE__*/require("../../Field");
+
+exports.sliderFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('SliderField');
+exports.SliderField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = Field_1.useField_unstable(props, ref, {
+    component: react_slider_1.Slider,
+    classNames: exports.sliderFieldClassNames
+  });
+  Field_1.useFieldStyles_unstable(state);
+  return Field_1.renderField_unstable(state);
+});
+exports.SliderField.displayName = 'SliderField';
+//# sourceMappingURL=SliderField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SliderField/SliderField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,qBAAA,gBAAwB,OAAA,CAAA,kBAAA,CAAmB,aAAnB,CAAxB;AAEA,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,cAAA,CAAA,MAAb;IAAqB,UAAU,EAAE,OAAA,CAAA;EAAjC,CAA9B,CAAd;EACA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJiE,CAArD;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Slider } from '@fluentui/react-slider';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SliderFieldProps = FieldProps<typeof Slider>;\n\nexport const sliderFieldClassNames = getFieldClassNames('SliderField');\n\nexport const SliderField: ForwardRefComponent<SliderFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Slider, classNames: sliderFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSliderField.displayName = 'SliderField';\n"],"sourceRoot":""}

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

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

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SpinButtonField = exports.spinButtonFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_spinbutton_1 = /*#__PURE__*/require("@fluentui/react-spinbutton");
+
+const Field_1 = /*#__PURE__*/require("../../Field");
+
+exports.spinButtonFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('SpinButtonField');
+exports.SpinButtonField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = Field_1.useField_unstable(props, ref, {
+    component: react_spinbutton_1.SpinButton,
+    classNames: exports.spinButtonFieldClassNames
+  });
+  Field_1.useFieldStyles_unstable(state);
+  return Field_1.renderField_unstable(state);
+});
+exports.SpinButtonField.displayName = 'SpinButtonField';
+//# sourceMappingURL=SpinButtonField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SpinButtonField/SpinButtonField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAIa,OAAA,CAAA,yBAAA,gBAA4B,OAAA,CAAA,kBAAA,CAAmB,iBAAnB,CAA5B;AAEA,OAAA,CAAA,eAAA,gBAA6D,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxG,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,kBAAA,CAAA,UAAb;IAAyB,UAAU,EAAE,OAAA,CAAA;EAArC,CAA9B,CAAd;EACA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJyE,CAA7D;AAMb,OAAA,CAAA,eAAA,CAAgB,WAAhB,GAA8B,iBAA9B","sourcesContent":["import * as React from 'react';\nimport { SpinButton } from '@fluentui/react-spinbutton';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\nexport type SpinButtonFieldProps = FieldProps<typeof SpinButton>;\n\nexport const spinButtonFieldClassNames = getFieldClassNames('SpinButtonField');\n\nexport const SpinButtonField: ForwardRefComponent<SpinButtonFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: SpinButton, classNames: spinButtonFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSpinButtonField.displayName = 'SpinButtonField';\n"],"sourceRoot":""}

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

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

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

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

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

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SwitchField = exports.switchFieldClassNames = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_switch_1 = /*#__PURE__*/require("@fluentui/react-switch");
+
+const Field_1 = /*#__PURE__*/require("../../Field");
+
+exports.switchFieldClassNames = /*#__PURE__*/Field_1.getFieldClassNames('SwitchField');
+exports.SwitchField = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = Field_1.useField_unstable(props, ref, {
+    component: react_switch_1.Switch,
+    classNames: exports.switchFieldClassNames
+  });
+  Field_1.useFieldStyles_unstable(state);
+  return Field_1.renderField_unstable(state);
+});
+exports.SwitchField.displayName = 'SwitchField';
+//# sourceMappingURL=SwitchField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SwitchField/SwitchField.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,cAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAGA,MAAA,OAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAMa,OAAA,CAAA,qBAAA,gBAAwB,OAAA,CAAA,kBAAA,CAAmB,aAAnB,CAAxB;AAEA,OAAA,CAAA,WAAA,gBAAqD,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EAChG,MAAM,KAAK,GAAG,OAAA,CAAA,iBAAA,CAAkB,KAAlB,EAAyB,GAAzB,EAA8B;IAAE,SAAS,EAAE,cAAA,CAAA,MAAb;IAAqB,UAAU,EAAE,OAAA,CAAA;EAAjC,CAA9B,CAAd;EACA,OAAA,CAAA,uBAAA,CAAwB,KAAxB;EACA,OAAO,OAAA,CAAA,oBAAA,CAAqB,KAArB,CAAP;AACD,CAJiE,CAArD;AAMb,OAAA,CAAA,WAAA,CAAY,WAAZ,GAA0B,aAA1B","sourcesContent":["import * as React from 'react';\nimport { Switch } from '@fluentui/react-switch';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from '../../Field';\nimport { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from '../../Field';\n\n// The Field's `label` prop overrides the Switch's built-in `label`.\n// Therefore, the Switch's `labelPosition` has no effect and is omitted to avoid confusion.\nexport type SwitchFieldProps = Omit<FieldProps<typeof Switch>, 'labelPosition'>;\n\nexport const switchFieldClassNames = getFieldClassNames('SwitchField');\n\nexport const SwitchField: ForwardRefComponent<SwitchFieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref, { component: Switch, classNames: switchFieldClassNames });\n  useFieldStyles_unstable(state);\n  return renderField_unstable(state);\n});\n\nSwitchField.displayName = 'SwitchField';\n"],"sourceRoot":""}