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

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

@@ -1,134 +1,154 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
+    value: true
 });
-exports.useFieldStyles_unstable = exports.getFieldClassNames = void 0;
-
-const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
-
-const react_1 = /*#__PURE__*/require("@griffel/react");
-
-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`
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    fieldClassNames: ()=>fieldClassNames,
+    useFieldStyles_unstable: ()=>useFieldStyles_unstable
 });
-
-exports.getFieldClassNames = getFieldClassNames;
+const _react = require("@griffel/react");
+const fieldClassNames = {
+    root: `fui-Field`,
+    label: `fui-Field__label`,
+    validationMessage: `fui-Field__validationMessage`,
+    validationMessageIcon: `fui-Field__validationMessageIcon`,
+    hint: `fui-Field__hint`
+};
+// Size of the icon in the validation message
+const iconSize = '12px';
 /**
  * Styles for the root slot
- */
-
-const useRootStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "mc9l5x": "f13qh94s",
-    "Bxotwcr": "f14np9u9",
-    "B7hvi0a": "f1m2n5bn"
-  },
-  "horizontal": {
-    "wkccdc": "fai812u",
-    "Budl1dq": "fckz59x"
-  },
-  "secondColumn": {
-    "Br312pm": "fd46tj4"
-  }
+ */ const useRootStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        mc9l5x: "f13qh94s"
+    },
+    horizontal: {
+        Budl1dq: "f2wwaib",
+        wkccdc: "f1645dqt"
+    },
+    horizontalNoLabel: {
+        uwmqm3: [
+            "f15jqgz8",
+            "fggqkej"
+        ],
+        Budl1dq: "f1c2z91y"
+    }
 }, {
-  "d": [".f13qh94s{display: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;}"]
+    d: [
+        ".f13qh94s{display:grid;}",
+        ".f2wwaib{grid-template-columns:33% 1fr;}",
+        ".f1645dqt{grid-template-rows:auto auto auto 1fr;}",
+        ".f15jqgz8{padding-left:33%;}",
+        ".fggqkej{padding-right:33%;}",
+        ".f1c2z91y{grid-template-columns:1fr;}"
+    ]
 });
-
-const useLabelStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "B6of3ja": "fg30ohd",
-    "jrapky": "fyacil5"
-  },
-  "horizontal": {
-    "Ijaq50": "f16hsg94",
-    "nk6f5a": "f1nzqi2z",
-    "t21cq0": ["fkujibs", "f199hnxi"],
-    "qb2dma": "f9h729m",
-    "Bdqf98w": "fhb5wj7"
-  }
+const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    base: {
+        z8tnut: "fclwglc",
+        Byoj8tv: "fywfov9"
+    },
+    large: {
+        z8tnut: "f1sl3k7w",
+        Byoj8tv: "f1brlhvm"
+    },
+    vertical: {
+        jrapky: "fyacil5"
+    },
+    verticalLarge: {
+        jrapky: "f8l5zjj"
+    },
+    horizontal: {
+        t21cq0: [
+            "fkujibs",
+            "f199hnxi"
+        ],
+        Ijaq50: "f16hsg94",
+        nk6f5a: "f1nzqi2z"
+    }
 }, {
-  "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;}"]
+    d: [
+        ".fclwglc{padding-top:var(--spacingVerticalXXS);}",
+        ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}",
+        ".f1sl3k7w{padding-top:1px;}",
+        ".f1brlhvm{padding-bottom:1px;}",
+        ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}",
+        ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}",
+        ".fkujibs{margin-right:var(--spacingHorizontalM);}",
+        ".f199hnxi{margin-left:var(--spacingHorizontalM);}",
+        ".f16hsg94{grid-row-start:1;}",
+        ".f1nzqi2z{grid-row-end:-1;}"
+    ]
 });
-
-const useSecondaryTextStyles = /*#__PURE__*/react_1.__styles({
-  "base": {
-    "B6of3ja": "fg30ohd",
-    "sj55zd": "f11d4kpn",
-    "Bahqtrf": "fk6fouc",
-    "Be2twd7": "fy9rknc",
-    "Bhrd7zp": "figsok6",
-    "Bg96gwp": "fwrc4pm"
-  },
-  "error": {
-    "sj55zd": "f1hcrxcs"
-  }
+const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r5c4z9l", null, [
+    ".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}"
+]);
+const useSecondaryTextStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    error: {
+        sj55zd: "f1hcrxcs"
+    },
+    withIcon: {
+        uwmqm3: [
+            "frawy03",
+            "fg4c52"
+        ]
+    }
 }, {
-  "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);}"]
+    d: [
+        ".f1hcrxcs{color:var(--colorPaletteRedForeground1);}",
+        ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}",
+        ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"
+    ]
 });
-
-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"
-  }
+const useValidationMessageIconBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("ra7h1uk", "r1rh6bd7", [
+    ".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}",
+    ".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}"
+]);
+const useValidationMessageIconStyles = /*#__PURE__*/ (0, _react["__styles"])({
+    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);}"]
+    d: [
+        ".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);
-  }
-};
+const useFieldStyles_unstable = (state)=>{
+    const { validationState  } = state;
+    const horizontal = state.orientation === 'horizontal';
+    const rootStyles = useRootStyles();
+    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) {
+        state.label.className = (0, _react.mergeClasses)(fieldClassNames.label, labelStyles.base, horizontal && labelStyles.horizontal, !horizontal && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.size === 'large' && labelStyles.verticalLarge, state.label.className);
+    }
+    const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
+    const validationMessageIconStyles = useValidationMessageIconStyles();
+    if (state.validationMessageIcon) {
+        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) {
+        state.validationMessage.className = (0, _react.mergeClasses)(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
+    }
+    if (state.hint) {
+        state.hint.className = (0, _react.mergeClasses)(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
+    }
+}; //# sourceMappingURL=useFieldStyles.js.map
 
-exports.useFieldStyles_unstable = useFieldStyles_unstable;
 //# sourceMappingURL=useFieldStyles.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-field/src/components/Field/useFieldStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { FieldControl, FieldProps, FieldSlots, FieldState } from './Field.types';\n\nexport const getFieldClassNames = (name: string): SlotClassNames<FieldSlots<FieldControl>> => ({\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: '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 FieldControl>(state: FieldState<T>) => {\n  const classNames = state.classNames;\n  const validationState: FieldProps<FieldControl>['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":"../src/"}
+{"version":3,"sources":["../../../lib/components/Field/useFieldStyles.js"],"sourcesContent":["import { tokens, typographyStyles } from '@fluentui/react-theme';\nimport { __resetStyles, __styles, 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 */\nconst useRootStyles = /*#__PURE__*/__styles({\n  base: {\n    mc9l5x: \"f13qh94s\"\n  },\n  horizontal: {\n    Budl1dq: \"f2wwaib\",\n    wkccdc: \"f1645dqt\"\n  },\n  horizontalNoLabel: {\n    uwmqm3: [\"f15jqgz8\", \"fggqkej\"],\n    Budl1dq: \"f1c2z91y\"\n  }\n}, {\n  d: [\".f13qh94s{display:grid;}\", \".f2wwaib{grid-template-columns:33% 1fr;}\", \".f1645dqt{grid-template-rows:auto auto auto 1fr;}\", \".f15jqgz8{padding-left:33%;}\", \".fggqkej{padding-right:33%;}\", \".f1c2z91y{grid-template-columns:1fr;}\"]\n});\nconst useLabelStyles = /*#__PURE__*/__styles({\n  base: {\n    z8tnut: \"fclwglc\",\n    Byoj8tv: \"fywfov9\"\n  },\n  large: {\n    z8tnut: \"f1sl3k7w\",\n    Byoj8tv: \"f1brlhvm\"\n  },\n  vertical: {\n    jrapky: \"fyacil5\"\n  },\n  verticalLarge: {\n    jrapky: \"f8l5zjj\"\n  },\n  horizontal: {\n    t21cq0: [\"fkujibs\", \"f199hnxi\"],\n    Ijaq50: \"f16hsg94\",\n    nk6f5a: \"f1nzqi2z\"\n  }\n}, {\n  d: [\".fclwglc{padding-top:var(--spacingVerticalXXS);}\", \".fywfov9{padding-bottom:var(--spacingVerticalXXS);}\", \".f1sl3k7w{padding-top:1px;}\", \".f1brlhvm{padding-bottom:1px;}\", \".fyacil5{margin-bottom:var(--spacingVerticalXXS);}\", \".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}\", \".fkujibs{margin-right:var(--spacingHorizontalM);}\", \".f199hnxi{margin-left:var(--spacingHorizontalM);}\", \".f16hsg94{grid-row-start:1;}\", \".f1nzqi2z{grid-row-end:-1;}\"]\n});\nconst useSecondaryTextBaseClassName = /*#__PURE__*/__resetStyles(\"r5c4z9l\", null, [\".r5c4z9l{margin-top:var(--spacingVerticalXXS);color:var(--colorNeutralForeground3);font-family:var(--fontFamilyBase);font-size:var(--fontSizeBase200);font-weight:var(--fontWeightRegular);line-height:var(--lineHeightBase200);}\"]);\nconst useSecondaryTextStyles = /*#__PURE__*/__styles({\n  error: {\n    sj55zd: \"f1hcrxcs\"\n  },\n  withIcon: {\n    uwmqm3: [\"frawy03\", \"fg4c52\"]\n  }\n}, {\n  d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}\", \".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}\"]\n});\nconst useValidationMessageIconBaseClassName = /*#__PURE__*/__resetStyles(\"ra7h1uk\", \"r1rh6bd7\", [\".ra7h1uk{display:inline-block;font-size:12px;margin-left:calc(-12px - var(--spacingHorizontalXS));margin-right:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\", \".r1rh6bd7{display:inline-block;font-size:12px;margin-right:calc(-12px - var(--spacingHorizontalXS));margin-left:var(--spacingHorizontalXS);line-height:0;vertical-align:-1px;}\"]);\nconst useValidationMessageIconStyles = /*#__PURE__*/__styles({\n  error: {\n    sj55zd: \"f1hcrxcs\"\n  },\n  warning: {\n    sj55zd: \"f1k5f75o\"\n  },\n  success: {\n    sj55zd: \"ffmvakt\"\n  }\n}, {\n  d: [\".f1hcrxcs{color:var(--colorPaletteRedForeground1);}\", \".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}\", \".ffmvakt{color:var(--colorPaletteGreenForeground1);}\"]\n});\n/**\n * Apply styling to the Field slots based on the state\n */\nexport const useFieldStyles_unstable = state => {\n  const {\n    validationState\n  } = 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 && labelStyles.vertical, state.label.size === 'large' && labelStyles.large, !horizontal && state.label.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};\n//# sourceMappingURL=useFieldStyles.js.map"],"names":["fieldClassNames","useFieldStyles_unstable","root","label","validationMessage","validationMessageIcon","hint","iconSize","useRootStyles","__styles","base","mc9l5x","horizontal","Budl1dq","wkccdc","horizontalNoLabel","uwmqm3","d","useLabelStyles","z8tnut","Byoj8tv","large","vertical","jrapky","verticalLarge","t21cq0","Ijaq50","nk6f5a","useSecondaryTextBaseClassName","__resetStyles","useSecondaryTextStyles","error","sj55zd","withIcon","useValidationMessageIconBaseClassName","useValidationMessageIconStyles","warning","success","state","validationState","orientation","rootStyles","className","mergeClasses","labelStyles","size","validationMessageIconBaseClassName","validationMessageIconStyles","secondaryTextBaseClassName","secondaryTextStyles"],"mappings":"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"}

package/lib-commonjs/contexts/FieldContext.js

@@ -0,0 +1,21 @@
+"use strict";
+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, {
+    FieldContextProvider: ()=>FieldContextProvider,
+    useFieldContext_unstable: ()=>useFieldContext_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const FieldContext = /*#__PURE__*/ _react.createContext(undefined);
+const FieldContextProvider = FieldContext.Provider;
+const useFieldContext_unstable = ()=>_react.useContext(FieldContext); //# sourceMappingURL=FieldContext.js.map
+
+//# sourceMappingURL=FieldContext.js.map

package/lib-commonjs/contexts/FieldContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/contexts/FieldContext.js"],"sourcesContent":["import * as React from 'react';\nconst FieldContext = /*#__PURE__*/React.createContext(undefined);\nexport const FieldContextProvider = FieldContext.Provider;\nexport const useFieldContext_unstable = () => React.useContext(FieldContext);\n//# sourceMappingURL=FieldContext.js.map"],"names":["FieldContextProvider","useFieldContext_unstable","FieldContext","React","createContext","undefined","Provider","useContext"],"mappings":";;;;;;;;;;;IAEaA,oBAAoB,MAApBA;IACAC,wBAAwB,MAAxBA;;;6DAHU;AACvB,MAAMC,eAAe,WAAW,GAAEC,OAAMC,aAAa,CAACC;AAC/C,MAAML,uBAAuBE,aAAaI,QAAQ;AAClD,MAAML,2BAA2B,IAAME,OAAMI,UAAU,CAACL,eAC/D,wCAAwC"}

package/lib-commonjs/contexts/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _exportStar = require("@swc/helpers/lib/_export_star.js").default;
+_exportStar(require("./FieldContext"), exports);
+_exportStar(require("./useFieldContextValues"), exports);
+_exportStar(require("./useFieldControlProps"), exports);
+ //# sourceMappingURL=index.js.map
+
+//# sourceMappingURL=index.js.map

package/lib-commonjs/contexts/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/contexts/index.js"],"sourcesContent":["export * from './FieldContext';\nexport * from './useFieldContextValues';\nexport * from './useFieldControlProps';\n//# sourceMappingURL=index.js.map"],"names":[],"mappings":";;;;;oBAAc;oBACA;oBACA;CACd,iCAAiC"}

package/lib-commonjs/contexts/useFieldContextValues.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useFieldContextValues_unstable", {
+    enumerable: true,
+    get: ()=>useFieldContextValues_unstable
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+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
+
+//# sourceMappingURL=useFieldContextValues.js.map

package/lib-commonjs/contexts/useFieldContextValues.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/contexts/useFieldContextValues.js"],"sourcesContent":["import * as React from 'react';\n/**\n * Get the context values used when rendering Field.\n */\nexport const useFieldContextValues_unstable = state => {\n  var _state_label, _state_label1, _state_validationMessage, _state_hint;\n  const {\n    generatedControlId,\n    orientation,\n    required,\n    size,\n    validationState\n  } = state;\n  const labelFor = (_state_label = state.label) === null || _state_label === void 0 ? void 0 : _state_label.htmlFor;\n  const labelId = (_state_label1 = state.label) === null || _state_label1 === void 0 ? void 0 : _state_label1.id;\n  const validationMessageId = (_state_validationMessage = state.validationMessage) === null || _state_validationMessage === void 0 ? void 0 : _state_validationMessage.id;\n  const hintId = (_state_hint = state.hint) === null || _state_hint === void 0 ? void 0 : _state_hint.id;\n  const field = React.useMemo(() => ({\n    generatedControlId,\n    hintId,\n    labelFor,\n    labelId,\n    orientation,\n    required,\n    size,\n    validationMessageId,\n    validationState\n  }), [generatedControlId, hintId, labelFor, labelId, orientation, required, size, validationMessageId, validationState]);\n  return {\n    field\n  };\n};\n//# sourceMappingURL=useFieldContextValues.js.map"],"names":["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","React","useMemo"],"mappings":";;;;+BAIaA;;aAAAA;;;6DAJU;AAIhB,MAAMA,iCAAiCC,CAAAA,QAAS;IACrD,IAAIC,cAAcC,eAAeC,0BAA0BC;IAC3D,MAAM,EACJC,mBAAkB,EAClBC,YAAW,EACXC,SAAQ,EACRC,KAAI,EACJC,gBAAe,EAChB,GAAGT;IACJ,MAAMU,WAAW,AAACT,CAAAA,eAAeD,MAAMW,KAAK,AAAD,MAAO,IAAI,IAAIV,iBAAiB,KAAK,IAAI,KAAK,IAAIA,aAAaW,OAAO;IACjH,MAAMC,UAAU,AAACX,CAAAA,gBAAgBF,MAAMW,KAAK,AAAD,MAAO,IAAI,IAAIT,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcY,EAAE;IAC9G,MAAMC,sBAAsB,AAACZ,CAAAA,2BAA2BH,MAAMgB,iBAAiB,AAAD,MAAO,IAAI,IAAIb,6BAA6B,KAAK,IAAI,KAAK,IAAIA,yBAAyBW,EAAE;IACvK,MAAMG,SAAS,AAACb,CAAAA,cAAcJ,MAAMkB,IAAI,AAAD,MAAO,IAAI,IAAId,gBAAgB,KAAK,IAAI,KAAK,IAAIA,YAAYU,EAAE;IACtG,MAAMK,QAAQC,OAAMC,OAAO,CAAC,IAAO,CAAA;YACjChB;YACAY;YACAP;YACAG;YACAP;YACAC;YACAC;YACAO;YACAN;QACF,CAAA,GAAI;QAACJ;QAAoBY;QAAQP;QAAUG;QAASP;QAAaC;QAAUC;QAAMO;QAAqBN;KAAgB;IACtH,OAAO;QACLU;IACF;AACF,GACA,iDAAiD"}

package/lib-commonjs/contexts/useFieldControlProps.js

@@ -0,0 +1,71 @@
+"use strict";
+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, {
+    useFieldControlProps_unstable: ()=>useFieldControlProps_unstable,
+    getFieldControlProps: ()=>getFieldControlProps
+});
+const _fieldContext = require("./FieldContext");
+var _props, _props1, _arialabelledby, _props2, _ariainvalid, _props3, _props4, _ariarequired, _props5;
+function useFieldControlProps_unstable(props, options) {
+    return getFieldControlProps((0, _fieldContext.useFieldContext_unstable)(), props, options);
+}
+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
+
+//# sourceMappingURL=useFieldControlProps.js.map

package/lib-commonjs/contexts/useFieldControlProps.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../lib/contexts/useFieldControlProps.js"],"sourcesContent":["var _props, _props1, _arialabelledby, _props2, _ariainvalid, _props3, _props4, _ariarequired, _props5;\nimport { useFieldContext_unstable } from './FieldContext';\nexport function useFieldControlProps_unstable(props, options) {\n  return getFieldControlProps(useFieldContext_unstable(), props, options);\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(context, props, options) {\n  if (!context) {\n    return props;\n  }\n  // Create a copy of props so we don't modify the original\n  props = {\n    ...props\n  };\n  const {\n    generatedControlId,\n    hintId,\n    labelFor,\n    labelId,\n    required,\n    validationMessageId,\n    validationState\n  } = context;\n  if (generatedControlId) {\n    var _id;\n    (_id = (_props = props).id) !== null && _id !== void 0 ? _id : _props.id = generatedControlId;\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 === null || options === void 0 ? void 0 : options.supportsLabelFor) || labelFor !== props.id)) {\n    var _;\n    (_ = (_props1 = props)[_arialabelledby = 'aria-labelledby']) !== null && _ !== void 0 ? _ : _props1[_arialabelledby] = labelId;\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 === null || props === void 0 ? void 0 : props['aria-describedby']].filter(Boolean).join(' ');\n  }\n  if (validationState === 'error') {\n    var _1;\n    (_1 = (_props2 = props)[_ariainvalid = 'aria-invalid']) !== null && _1 !== void 0 ? _1 : _props2[_ariainvalid] = true;\n  }\n  if (required) {\n    if (options === null || options === void 0 ? void 0 : options.supportsRequired) {\n      var _required;\n      (_required = (_props3 = props).required) !== null && _required !== void 0 ? _required : _props3.required = true;\n    } else {\n      var _2;\n      (_2 = (_props4 = props)[_ariarequired = 'aria-required']) !== null && _2 !== void 0 ? _2 : _props4[_ariarequired] = true;\n    }\n  }\n  // Include the size prop if this control supports it\n  if (options === null || options === void 0 ? void 0 : options.supportsSize) {\n    var _size;\n    (_size = (_props5 = props).size) !== null && _size !== void 0 ? _size : _props5.size = context.size;\n  }\n  return props;\n}\n//# sourceMappingURL=useFieldControlProps.js.map"],"names":["useFieldControlProps_unstable","getFieldControlProps","_props","_props1","_arialabelledby","_props2","_ariainvalid","_props3","_props4","_ariarequired","_props5","props","options","useFieldContext_unstable","context","generatedControlId","hintId","labelFor","labelId","required","validationMessageId","validationState","_id","id","supportsLabelFor","_","filter","Boolean","join","_1","supportsRequired","_required","_2","supportsSize","_size","size"],"mappings":"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"}

package/lib-commonjs/index.js

@@ -1,34 +1,29 @@
 "use strict";
-
 Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.useField_unstable = exports.useFieldStyles_unstable = exports.renderField_unstable = exports.getFieldClassNames = void 0;
-
-var Field_1 = /*#__PURE__*/require("./Field");
-
-Object.defineProperty(exports, "getFieldClassNames", {
-  enumerable: true,
-  get: function () {
-    return Field_1.getFieldClassNames;
-  }
+    value: true
 });
-Object.defineProperty(exports, "renderField_unstable", {
-  enumerable: true,
-  get: function () {
-    return Field_1.renderField_unstable;
-  }
-});
-Object.defineProperty(exports, "useFieldStyles_unstable", {
-  enumerable: true,
-  get: function () {
-    return Field_1.useFieldStyles_unstable;
-  }
-});
-Object.defineProperty(exports, "useField_unstable", {
-  enumerable: true,
-  get: function () {
-    return Field_1.useField_unstable;
-  }
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Field: ()=>_field.Field,
+    fieldClassNames: ()=>_field.fieldClassNames,
+    renderField_unstable: ()=>_field.renderField_unstable,
+    useFieldStyles_unstable: ()=>_field.useFieldStyles_unstable,
+    useField_unstable: ()=>_field.useField_unstable,
+    FieldContextProvider: ()=>_index.FieldContextProvider,
+    useFieldContext_unstable: ()=>_index.useFieldContext_unstable,
+    useFieldContextValues_unstable: ()=>_index.useFieldContextValues_unstable,
+    useFieldControlProps_unstable: ()=>_index.useFieldControlProps_unstable,
+    getDeprecatedFieldClassNames: ()=>_makeDeprecatedField.getDeprecatedFieldClassNames,
+    makeDeprecatedField: ()=>_makeDeprecatedField.makeDeprecatedField
 });
+const _field = require("./Field");
+const _index = require("./contexts/index");
+const _makeDeprecatedField = require("./util/makeDeprecatedField");
+ //# sourceMappingURL=index.js.map
+
 //# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-field/src/index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,OAAA,gBAAA,OAAA,CAAA,SAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;AAAsB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,yBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,uBAAA;EAAuB;AAAvB,CAAA;AAAyB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,OAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA","sourcesContent":["export { getFieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport type { FieldConfig, FieldControl, FieldProps, FieldSlots, FieldState } from './Field';\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["../lib/index.js"],"sourcesContent":["export { Field, fieldClassNames, renderField_unstable, useFieldStyles_unstable, useField_unstable } from './Field';\nexport { FieldContextProvider, useFieldContext_unstable, useFieldContextValues_unstable, useFieldControlProps_unstable } from './contexts/index';\n// eslint-disable-next-line deprecation/deprecation\nexport { getDeprecatedFieldClassNames, makeDeprecatedField } from './util/makeDeprecatedField';\n//# sourceMappingURL=index.js.map"],"names":["Field","fieldClassNames","renderField_unstable","useFieldStyles_unstable","useField_unstable","FieldContextProvider","useFieldContext_unstable","useFieldContextValues_unstable","useFieldControlProps_unstable","getDeprecatedFieldClassNames","makeDeprecatedField"],"mappings":";;;;;;;;;;;IAASA,KAAK,MAALA,YAAK;IAAEC,eAAe,MAAfA,sBAAe;IAAEC,oBAAoB,MAApBA,2BAAoB;IAAEC,uBAAuB,MAAvBA,8BAAuB;IAAEC,iBAAiB,MAAjBA,wBAAiB;IACxFC,oBAAoB,MAApBA,2BAAoB;IAAEC,wBAAwB,MAAxBA,+BAAwB;IAAEC,8BAA8B,MAA9BA,qCAA8B;IAAEC,6BAA6B,MAA7BA,oCAA6B;IAE7GC,4BAA4B,MAA5BA,iDAA4B;IAAEC,mBAAmB,MAAnBA,wCAAmB;;uBAH+C;uBACqB;qCAE5D;CAClE,iCAAiC"}

package/lib-commonjs/util/makeDeprecatedField.js

@@ -0,0 +1,61 @@
+/* eslint-disable deprecation/deprecation */ "use strict";
+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, {
+    makeDeprecatedField: ()=>makeDeprecatedField,
+    getDeprecatedFieldClassNames: ()=>getDeprecatedFieldClassNames
+});
+const _interopRequireWildcard = require("@swc/helpers/lib/_interop_require_wildcard.js").default;
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _field = require("../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
+        }
+    ];
+}
+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.Field, fieldProps, /*#__PURE__*/ _react.createElement(Control, {
+            ...controlProps,
+            ref: ref
+        }));
+    });
+    DeprecatedField.displayName = displayName;
+    return DeprecatedField;
+}
+const getDeprecatedFieldClassNames = (controlRootClassName)=>({
+        ..._field.fieldClassNames,
+        control: controlRootClassName
+    }); //# sourceMappingURL=makeDeprecatedField.js.map
+
+//# sourceMappingURL=makeDeprecatedField.js.map