@fluentui/react-field 9.1.15 → 9.1.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +40 -1
- package/CHANGELOG.md +15 -2
- package/lib/components/Field/renderField.js +3 -3
- package/lib/components/Field/renderField.js.map +1 -1
- package/lib/components/Field/useField.js +18 -12
- package/lib/components/Field/useField.js.map +1 -1
- package/lib/components/Field/useFieldStyles.styles.js +2 -2
- package/lib-commonjs/components/Field/renderField.js +2 -2
- package/lib-commonjs/components/Field/renderField.js.map +1 -1
- package/lib-commonjs/components/Field/useField.js +17 -11
- package/lib-commonjs/components/Field/useField.js.map +1 -1
- package/lib-commonjs/components/Field/useFieldStyles.styles.js +6 -6
- package/lib-commonjs/components/Field/useFieldStyles.styles.js.map +1 -1
- package/package.json +5 -5
    
        package/CHANGELOG.json
    CHANGED
    
    | @@ -2,7 +2,46 @@ | |
| 2 2 | 
             
              "name": "@fluentui/react-field",
         | 
| 3 3 | 
             
              "entries": [
         | 
| 4 4 | 
             
                {
         | 
| 5 | 
            -
                  "date": " | 
| 5 | 
            +
                  "date": "Wed, 09 Aug 2023 13:11:37 GMT",
         | 
| 6 | 
            +
                  "tag": "@fluentui/react-field_v9.1.16",
         | 
| 7 | 
            +
                  "version": "9.1.16",
         | 
| 8 | 
            +
                  "comments": {
         | 
| 9 | 
            +
                    "patch": [
         | 
| 10 | 
            +
                      {
         | 
| 11 | 
            +
                        "author": "olfedias@microsoft.com",
         | 
| 12 | 
            +
                        "package": "@fluentui/react-field",
         | 
| 13 | 
            +
                        "commit": "b090c0339983847a62b9dc6187d08dc8c4b1d55f",
         | 
| 14 | 
            +
                        "comment": "chore: Update Griffel to latest version"
         | 
| 15 | 
            +
                      },
         | 
| 16 | 
            +
                      {
         | 
| 17 | 
            +
                        "author": "bernardo.sunderhus@gmail.com",
         | 
| 18 | 
            +
                        "package": "@fluentui/react-field",
         | 
| 19 | 
            +
                        "commit": "796e4426c50ede34b30e2dc2392328dcbadc2702",
         | 
| 20 | 
            +
                        "comment": "chore(cxe-red): migrate to new slot API"
         | 
| 21 | 
            +
                      },
         | 
| 22 | 
            +
                      {
         | 
| 23 | 
            +
                        "author": "beachball",
         | 
| 24 | 
            +
                        "package": "@fluentui/react-field",
         | 
| 25 | 
            +
                        "comment": "Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14",
         | 
| 26 | 
            +
                        "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
         | 
| 27 | 
            +
                      },
         | 
| 28 | 
            +
                      {
         | 
| 29 | 
            +
                        "author": "beachball",
         | 
| 30 | 
            +
                        "package": "@fluentui/react-field",
         | 
| 31 | 
            +
                        "comment": "Bump @fluentui/react-label to v9.1.24",
         | 
| 32 | 
            +
                        "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
         | 
| 33 | 
            +
                      },
         | 
| 34 | 
            +
                      {
         | 
| 35 | 
            +
                        "author": "beachball",
         | 
| 36 | 
            +
                        "package": "@fluentui/react-field",
         | 
| 37 | 
            +
                        "comment": "Bump @fluentui/react-theme to v9.1.11",
         | 
| 38 | 
            +
                        "commit": "d0e28b405dc91c4682aec72dd784767a3ce95c78"
         | 
| 39 | 
            +
                      }
         | 
| 40 | 
            +
                    ]
         | 
| 41 | 
            +
                  }
         | 
| 42 | 
            +
                },
         | 
| 43 | 
            +
                {
         | 
| 44 | 
            +
                  "date": "Fri, 04 Aug 2023 08:52:58 GMT",
         | 
| 6 45 | 
             
                  "tag": "@fluentui/react-field_v9.1.15",
         | 
| 7 46 | 
             
                  "version": "9.1.15",
         | 
| 8 47 | 
             
                  "comments": {
         | 
    
        package/CHANGELOG.md
    CHANGED
    
    | @@ -1,12 +1,25 @@ | |
| 1 1 | 
             
            # Change Log - @fluentui/react-field
         | 
| 2 2 |  | 
| 3 | 
            -
            This log was last generated on  | 
| 3 | 
            +
            This log was last generated on Wed, 09 Aug 2023 13:11:37 GMT and should not be manually modified.
         | 
| 4 4 |  | 
| 5 5 | 
             
            <!-- Start content -->
         | 
| 6 6 |  | 
| 7 | 
            +
            ## [9.1.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.16)
         | 
| 8 | 
            +
             | 
| 9 | 
            +
            Wed, 09 Aug 2023 13:11:37 GMT 
         | 
| 10 | 
            +
            [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.15..@fluentui/react-field_v9.1.16)
         | 
| 11 | 
            +
             | 
| 12 | 
            +
            ### Patches
         | 
| 13 | 
            +
             | 
| 14 | 
            +
            - chore: Update Griffel to latest version ([PR #28684](https://github.com/microsoft/fluentui/pull/28684) by olfedias@microsoft.com)
         | 
| 15 | 
            +
            - chore(cxe-red): migrate to new slot API ([PR #28753](https://github.com/microsoft/fluentui/pull/28753) by bernardo.sunderhus@gmail.com)
         | 
| 16 | 
            +
            - Bump @fluentui/react-jsx-runtime to v9.0.0-alpha.14 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
         | 
| 17 | 
            +
            - Bump @fluentui/react-label to v9.1.24 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
         | 
| 18 | 
            +
            - Bump @fluentui/react-theme to v9.1.11 ([commit](https://github.com/microsoft/fluentui/commit/d0e28b405dc91c4682aec72dd784767a3ce95c78) by beachball)
         | 
| 19 | 
            +
             | 
| 7 20 | 
             
            ## [9.1.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-field_v9.1.15)
         | 
| 8 21 |  | 
| 9 | 
            -
            Fri, 04 Aug 2023 08: | 
| 22 | 
            +
            Fri, 04 Aug 2023 08:52:58 GMT 
         | 
| 10 23 | 
             
            [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-field_v9.1.14..@fluentui/react-field_v9.1.15)
         | 
| 11 24 |  | 
| 12 25 | 
             
            ### Patches
         | 
| @@ -1,15 +1,15 @@ | |
| 1 1 | 
             
            /** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';
         | 
| 2 | 
            -
            import {  | 
| 2 | 
            +
            import { assertSlots } from '@fluentui/react-utilities';
         | 
| 3 3 | 
             
            import { FieldContextProvider, getFieldControlProps } from '../../contexts/index';
         | 
| 4 4 | 
             
            /**
         | 
| 5 5 | 
             
             * Render the final JSX of Field
         | 
| 6 6 | 
             
             */ export const renderField_unstable = (state, contextValues)=>{
         | 
| 7 | 
            -
                 | 
| 7 | 
            +
                assertSlots(state);
         | 
| 8 8 | 
             
                let { children  } = state;
         | 
| 9 9 | 
             
                if (typeof children === 'function') {
         | 
| 10 10 | 
             
                    children = children(getFieldControlProps(contextValues.field) || {});
         | 
| 11 11 | 
             
                }
         | 
| 12 12 | 
             
                return /*#__PURE__*/ createElement(FieldContextProvider, {
         | 
| 13 13 | 
             
                    value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
         | 
| 14 | 
            -
                }, /*#__PURE__*/ createElement( | 
| 14 | 
            +
                }, /*#__PURE__*/ createElement(state.root, null, state.label && /*#__PURE__*/ createElement(state.label, null), children, state.validationMessage && /*#__PURE__*/ createElement(state.validationMessage, null, state.validationMessageIcon && /*#__PURE__*/ createElement(state.validationMessageIcon, null), state.validationMessage.children), state.hint && /*#__PURE__*/ createElement(state.hint, null)));
         | 
| 15 15 | 
             
            };
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"version":3,"sources":["renderField.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport {  | 
| 1 | 
            +
            {"version":3,"sources":["renderField.tsx"],"sourcesContent":["/** @jsxRuntime classic */\n/** @jsx createElement */\n\nimport { createElement } from '@fluentui/react-jsx-runtime';\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\nimport type { FieldContextValues, FieldSlots, FieldState } from './Field.types';\n\n/**\n * Render the final JSX of Field\n */\nexport const renderField_unstable = (state: FieldState, contextValues: FieldContextValues) => {\n  assertSlots<FieldSlots>(state);\n\n  let { children } = state;\n  if (typeof children === 'function') {\n    children = children(getFieldControlProps(contextValues.field) || {});\n  }\n\n  return (\n    <FieldContextProvider value={contextValues?.field}>\n      <state.root>\n        {state.label && <state.label />}\n        {children}\n        {state.validationMessage && (\n          <state.validationMessage>\n            {state.validationMessageIcon && <state.validationMessageIcon />}\n            {state.validationMessage.children}\n          </state.validationMessage>\n        )}\n\n        {state.hint && <state.hint />}\n      </state.root>\n    </FieldContextProvider>\n  );\n};\n"],"names":["createElement","assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,wBAAwB,GACxB,uBAAuB,GAEvB,SAASA,aAAa,QAAQ,8BAA8B;AAE5D,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC,gBAAsC;IAC5FL,YAAwBI;IAExB,IAAI,EAAEE,SAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE,CAAC;IAED,qBACE,AApBJ,cAoBKN;QAAqBO,OAAOH,0BAAAA,2BAAAA,KAAAA,IAAAA,cAAeE,KAAK;qBAC/C,AArBN,cAqBOH,MAAMK,IAAI,QACRL,MAAMM,KAAK,kBAAI,AAtBxB,cAsByBN,MAAMM,KAAK,SAC3BJ,UACAF,MAAMO,iBAAiB,kBACtB,AAzBV,cAyBWP,MAAMO,iBAAiB,QACrBP,MAAMQ,qBAAqB,kBAAI,AA1B5C,cA0B6CR,MAAMQ,qBAAqB,SAC3DR,MAAMO,iBAAiB,CAACL,QAAQ,GAIpCF,MAAMS,IAAI,kBAAI,AA/BvB,cA+BwBT,MAAMS,IAAI;AAIlC,EAAE"}
         | 
| @@ -1,7 +1,7 @@ | |
| 1 1 | 
             
            import * as React from 'react';
         | 
| 2 2 | 
             
            import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
         | 
| 3 3 | 
             
            import { Label } from '@fluentui/react-label';
         | 
| 4 | 
            -
            import { getNativeElementProps,  | 
| 4 | 
            +
            import { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';
         | 
| 5 5 | 
             
            const validationMessageIcons = {
         | 
| 6 6 | 
             
                error: /*#__PURE__*/ React.createElement(ErrorCircle12Filled, null),
         | 
| 7 7 | 
             
                warning: /*#__PURE__*/ React.createElement(Warning12Filled, null),
         | 
| @@ -20,37 +20,43 @@ const validationMessageIcons = { | |
| 20 20 | 
             
                const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium'  } = props;
         | 
| 21 21 | 
             
                const baseId = useId('field-');
         | 
| 22 22 | 
             
                const generatedControlId = baseId + '__control';
         | 
| 23 | 
            -
                const root = getNativeElementProps('div', {
         | 
| 23 | 
            +
                const root = slot.always(getNativeElementProps('div', {
         | 
| 24 24 | 
             
                    ...props,
         | 
| 25 25 | 
             
                    ref
         | 
| 26 26 | 
             
                }, /*excludedPropNames:*/ [
         | 
| 27 27 | 
             
                    'children'
         | 
| 28 | 
            -
                ]) | 
| 29 | 
            -
             | 
| 28 | 
            +
                ]), {
         | 
| 29 | 
            +
                    elementType: 'div'
         | 
| 30 | 
            +
                });
         | 
| 31 | 
            +
                const label = slot.optional(props.label, {
         | 
| 30 32 | 
             
                    defaultProps: {
         | 
| 31 33 | 
             
                        htmlFor: generatedControlId,
         | 
| 32 34 | 
             
                        id: baseId + '__label',
         | 
| 33 35 | 
             
                        required,
         | 
| 34 36 | 
             
                        size
         | 
| 35 | 
            -
                    }
         | 
| 37 | 
            +
                    },
         | 
| 38 | 
            +
                    elementType: Label
         | 
| 36 39 | 
             
                });
         | 
| 37 | 
            -
                const validationMessage =  | 
| 40 | 
            +
                const validationMessage = slot.optional(props.validationMessage, {
         | 
| 38 41 | 
             
                    defaultProps: {
         | 
| 39 42 | 
             
                        id: baseId + '__validationMessage',
         | 
| 40 43 | 
             
                        role: validationState === 'error' ? 'alert' : undefined
         | 
| 41 | 
            -
                    }
         | 
| 44 | 
            +
                    },
         | 
| 45 | 
            +
                    elementType: 'div'
         | 
| 42 46 | 
             
                });
         | 
| 43 | 
            -
                const hint =  | 
| 47 | 
            +
                const hint = slot.optional(props.hint, {
         | 
| 44 48 | 
             
                    defaultProps: {
         | 
| 45 49 | 
             
                        id: baseId + '__hint'
         | 
| 46 | 
            -
                    }
         | 
| 50 | 
            +
                    },
         | 
| 51 | 
            +
                    elementType: 'div'
         | 
| 47 52 | 
             
                });
         | 
| 48 53 | 
             
                const defaultIcon = validationMessageIcons[validationState];
         | 
| 49 | 
            -
                const validationMessageIcon =  | 
| 50 | 
            -
                     | 
| 54 | 
            +
                const validationMessageIcon = slot.optional(props.validationMessageIcon, {
         | 
| 55 | 
            +
                    renderByDefault: !!defaultIcon,
         | 
| 51 56 | 
             
                    defaultProps: {
         | 
| 52 57 | 
             
                        children: defaultIcon
         | 
| 53 | 
            -
                    }
         | 
| 58 | 
            +
                    },
         | 
| 59 | 
            +
                    elementType: 'span'
         | 
| 54 60 | 
             
                });
         | 
| 55 61 | 
             
                return {
         | 
| 56 62 | 
             
                    children,
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"version":3,"sources":["useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps,  | 
| 1 | 
            +
            {"version":3,"sources":["useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';\nimport type { FieldProps, FieldState } from './Field.types';\n\nconst validationMessageIcons = {\n  error: <ErrorCircle12Filled />,\n  warning: <Warning12Filled />,\n  success: <CheckmarkCircle12Filled />,\n  none: undefined,\n} as const;\n\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */\nexport const useField_unstable = (props: FieldProps, ref: React.Ref<HTMLDivElement>): FieldState => {\n  const {\n    children,\n    orientation = 'vertical',\n    required = false,\n    validationState = props.validationMessage ? 'error' : 'none',\n    size = 'medium',\n  } = props;\n\n  const baseId = useId('field-');\n  const generatedControlId = baseId + '__control';\n\n  const root = slot.always(getNativeElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required, size },\n    elementType: Label,\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: { id: baseId + '__validationMessage', role: validationState === 'error' ? 'alert' : undefined },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const defaultIcon = validationMessageIcons[validationState];\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: !!defaultIcon,\n    defaultProps: { children: defaultIcon },\n    elementType: 'span',\n  });\n  return {\n    children,\n    generatedControlId,\n    orientation,\n    required,\n    size,\n    validationState,\n    components: { root: 'div', label: Label, validationMessage: 'div', validationMessageIcon: 'span', hint: 'div' },\n    root,\n    label,\n    validationMessageIcon,\n    validationMessage,\n    hint,\n  };\n};\n"],"names":["React","CheckmarkCircle12Filled","ErrorCircle12Filled","Warning12Filled","Label","getNativeElementProps","useId","slot","validationMessageIcons","error","warning","success","none","undefined","useField_unstable","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","generatedControlId","root","always","elementType","label","optional","defaultProps","htmlFor","id","role","hint","defaultIcon","validationMessageIcon","renderByDefault","components"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AACtG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,qBAAqB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAG/E,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACP;IACRQ,uBAAS,oBAACP;IACVQ,uBAAS,oBAACV;IACVW,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC,MAA+C;IAClG,MAAM,EACJC,SAAQ,EACRC,aAAc,WAAU,EACxBC,UAAW,KAAK,CAAA,EAChBC,iBAAkBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,CAAA,EAC5DC,MAAO,SAAQ,EAChB,GAAGP;IAEJ,MAAMQ,SAASjB,MAAM;IACrB,MAAMkB,qBAAqBD,SAAS;IAEpC,MAAME,OAAOlB,KAAKmB,MAAM,CAACrB,sBAAsB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAC7GW,aAAa;IACf;IACA,MAAMC,QAAQrB,KAAKsB,QAAQ,CAACd,MAAMa,KAAK,EAAE;QACvCE,cAAc;YAAEC,SAASP;YAAoBQ,IAAIT,SAAS;YAAWJ;YAAUG;QAAK;QACpFK,aAAavB;IACf;IACA,MAAMiB,oBAAoBd,KAAKsB,QAAQ,CAACd,MAAMM,iBAAiB,EAAE;QAC/DS,cAAc;YAAEE,IAAIT,SAAS;YAAuBU,MAAMb,oBAAoB,UAAU,UAAUP,SAAS;QAAC;QAC5Gc,aAAa;IACf;IACA,MAAMO,OAAO3B,KAAKsB,QAAQ,CAACd,MAAMmB,IAAI,EAAE;QAAEJ,cAAc;YAAEE,IAAIT,SAAS;QAAS;QAAGI,aAAa;IAAM;IACrG,MAAMQ,cAAc3B,sBAAsB,CAACY,gBAAgB;IAC3D,MAAMgB,wBAAwB7B,KAAKsB,QAAQ,CAACd,MAAMqB,qBAAqB,EAAE;QACvEC,iBAAiB,CAAC,CAACF;QACnBL,cAAc;YAAEb,UAAUkB;QAAY;QACtCR,aAAa;IACf;IACA,OAAO;QACLV;QACAO;QACAN;QACAC;QACAG;QACAF;QACAkB,YAAY;YAAEb,MAAM;YAAOG,OAAOxB;YAAOiB,mBAAmB;YAAOe,uBAAuB;YAAQF,MAAM;QAAM;QAC9GT;QACAG;QACAQ;QACAf;QACAa;IACF;AACF,EAAE"}
         | 
| @@ -25,7 +25,7 @@ const useRootStyles = /*#__PURE__*/__styles({ | |
| 25 25 | 
             
                Budl1dq: "f1c2z91y"
         | 
| 26 26 | 
             
              }
         | 
| 27 27 | 
             
            }, {
         | 
| 28 | 
            -
              d: [".f13qh94s{display | 
| 28 | 
            +
              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;}"]
         | 
| 29 29 | 
             
            });
         | 
| 30 30 | 
             
            const useLabelStyles = /*#__PURE__*/__styles({
         | 
| 31 31 | 
             
              base: {
         | 
| @@ -48,7 +48,7 @@ const useLabelStyles = /*#__PURE__*/__styles({ | |
| 48 48 | 
             
                nk6f5a: "f1nzqi2z"
         | 
| 49 49 | 
             
              }
         | 
| 50 50 | 
             
            }, {
         | 
| 51 | 
            -
              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{ | 
| 51 | 
            +
              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;}"]
         | 
| 52 52 | 
             
            });
         | 
| 53 53 | 
             
            const 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);}"]);
         | 
| 54 54 | 
             
            const useSecondaryTextStyles = /*#__PURE__*/__styles({
         | 
| @@ -10,12 +10,12 @@ const _reactJsxRuntime = require("@fluentui/react-jsx-runtime"); | |
| 10 10 | 
             
            const _reactUtilities = require("@fluentui/react-utilities");
         | 
| 11 11 | 
             
            const _index = require("../../contexts/index");
         | 
| 12 12 | 
             
            const renderField_unstable = (state, contextValues)=>{
         | 
| 13 | 
            -
                 | 
| 13 | 
            +
                (0, _reactUtilities.assertSlots)(state);
         | 
| 14 14 | 
             
                let { children  } = state;
         | 
| 15 15 | 
             
                if (typeof children === 'function') {
         | 
| 16 16 | 
             
                    children = children((0, _index.getFieldControlProps)(contextValues.field) || {});
         | 
| 17 17 | 
             
                }
         | 
| 18 18 | 
             
                return /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(_index.FieldContextProvider, {
         | 
| 19 19 | 
             
                    value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field
         | 
| 20 | 
            -
                }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)( | 
| 20 | 
            +
                }, /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.root, null, state.label && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.label, null), children, state.validationMessage && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.validationMessage, null, state.validationMessageIcon && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.validationMessageIcon, null), state.validationMessage.children), state.hint && /*#__PURE__*/ (0, _reactJsxRuntime.createElement)(state.hint, null)));
         | 
| 21 21 | 
             
            };
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"version":3,"sources":["renderField.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport {  | 
| 1 | 
            +
            {"version":3,"sources":["renderField.js"],"sourcesContent":["/** @jsxRuntime classic */ /** @jsx createElement */ import { createElement } from '@fluentui/react-jsx-runtime';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { FieldContextProvider, getFieldControlProps } from '../../contexts/index';\n/**\n * Render the final JSX of Field\n */ export const renderField_unstable = (state, contextValues)=>{\n    assertSlots(state);\n    let { children  } = state;\n    if (typeof children === 'function') {\n        children = children(getFieldControlProps(contextValues.field) || {});\n    }\n    return /*#__PURE__*/ createElement(FieldContextProvider, {\n        value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field\n    }, /*#__PURE__*/ createElement(state.root, null, state.label && /*#__PURE__*/ createElement(state.label, null), children, state.validationMessage && /*#__PURE__*/ createElement(state.validationMessage, null, state.validationMessageIcon && /*#__PURE__*/ createElement(state.validationMessageIcon, null), state.validationMessage.children), state.hint && /*#__PURE__*/ createElement(state.hint, null)));\n};\n"],"names":["renderField_unstable","state","contextValues","assertSlots","children","getFieldControlProps","field","createElement","FieldContextProvider","value","root","label","validationMessage","validationMessageIcon","hint"],"mappings":"AAAA,wBAAwB,GAAG,uBAAuB;;;;+BAKjCA;;aAAAA;;iCALkE;gCACvD;uBAC+B;AAGhD,MAAMA,uBAAuB,CAACC,OAAOC,gBAAgB;IAC5DC,IAAAA,2BAAW,EAACF;IACZ,IAAI,EAAEG,SAAQ,EAAG,GAAGH;IACpB,IAAI,OAAOG,aAAa,YAAY;QAChCA,WAAWA,SAASC,IAAAA,2BAAoB,EAACH,cAAcI,KAAK,KAAK,CAAC;IACtE,CAAC;IACD,OAAO,WAAW,GAAGC,IAAAA,8BAAa,EAACC,2BAAoB,EAAE;QACrDC,OAAOP,kBAAkB,IAAI,IAAIA,kBAAkB,KAAK,IAAI,KAAK,IAAIA,cAAcI,KAAK;IAC5F,GAAG,WAAW,GAAGC,IAAAA,8BAAa,EAACN,MAAMS,IAAI,EAAE,IAAI,EAAET,MAAMU,KAAK,IAAI,WAAW,GAAGJ,IAAAA,8BAAa,EAACN,MAAMU,KAAK,EAAE,IAAI,GAAGP,UAAUH,MAAMW,iBAAiB,IAAI,WAAW,GAAGL,IAAAA,8BAAa,EAACN,MAAMW,iBAAiB,EAAE,IAAI,EAAEX,MAAMY,qBAAqB,IAAI,WAAW,GAAGN,IAAAA,8BAAa,EAACN,MAAMY,qBAAqB,EAAE,IAAI,GAAGZ,MAAMW,iBAAiB,CAACR,QAAQ,GAAGH,MAAMa,IAAI,IAAI,WAAW,GAAGP,IAAAA,8BAAa,EAACN,MAAMa,IAAI,EAAE,IAAI;AAChZ"}
         | 
| @@ -21,37 +21,43 @@ const useField_unstable = (props, ref)=>{ | |
| 21 21 | 
             
                const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium'  } = props;
         | 
| 22 22 | 
             
                const baseId = (0, _reactUtilities.useId)('field-');
         | 
| 23 23 | 
             
                const generatedControlId = baseId + '__control';
         | 
| 24 | 
            -
                const root = (0, _reactUtilities.getNativeElementProps)('div', {
         | 
| 24 | 
            +
                const root = _reactUtilities.slot.always((0, _reactUtilities.getNativeElementProps)('div', {
         | 
| 25 25 | 
             
                    ...props,
         | 
| 26 26 | 
             
                    ref
         | 
| 27 27 | 
             
                }, /*excludedPropNames:*/ [
         | 
| 28 28 | 
             
                    'children'
         | 
| 29 | 
            -
                ]) | 
| 30 | 
            -
             | 
| 29 | 
            +
                ]), {
         | 
| 30 | 
            +
                    elementType: 'div'
         | 
| 31 | 
            +
                });
         | 
| 32 | 
            +
                const label = _reactUtilities.slot.optional(props.label, {
         | 
| 31 33 | 
             
                    defaultProps: {
         | 
| 32 34 | 
             
                        htmlFor: generatedControlId,
         | 
| 33 35 | 
             
                        id: baseId + '__label',
         | 
| 34 36 | 
             
                        required,
         | 
| 35 37 | 
             
                        size
         | 
| 36 | 
            -
                    }
         | 
| 38 | 
            +
                    },
         | 
| 39 | 
            +
                    elementType: _reactLabel.Label
         | 
| 37 40 | 
             
                });
         | 
| 38 | 
            -
                const validationMessage =  | 
| 41 | 
            +
                const validationMessage = _reactUtilities.slot.optional(props.validationMessage, {
         | 
| 39 42 | 
             
                    defaultProps: {
         | 
| 40 43 | 
             
                        id: baseId + '__validationMessage',
         | 
| 41 44 | 
             
                        role: validationState === 'error' ? 'alert' : undefined
         | 
| 42 | 
            -
                    }
         | 
| 45 | 
            +
                    },
         | 
| 46 | 
            +
                    elementType: 'div'
         | 
| 43 47 | 
             
                });
         | 
| 44 | 
            -
                const hint =  | 
| 48 | 
            +
                const hint = _reactUtilities.slot.optional(props.hint, {
         | 
| 45 49 | 
             
                    defaultProps: {
         | 
| 46 50 | 
             
                        id: baseId + '__hint'
         | 
| 47 | 
            -
                    }
         | 
| 51 | 
            +
                    },
         | 
| 52 | 
            +
                    elementType: 'div'
         | 
| 48 53 | 
             
                });
         | 
| 49 54 | 
             
                const defaultIcon = validationMessageIcons[validationState];
         | 
| 50 | 
            -
                const validationMessageIcon =  | 
| 51 | 
            -
                     | 
| 55 | 
            +
                const validationMessageIcon = _reactUtilities.slot.optional(props.validationMessageIcon, {
         | 
| 56 | 
            +
                    renderByDefault: !!defaultIcon,
         | 
| 52 57 | 
             
                    defaultProps: {
         | 
| 53 58 | 
             
                        children: defaultIcon
         | 
| 54 | 
            -
                    }
         | 
| 59 | 
            +
                    },
         | 
| 60 | 
            +
                    elementType: 'span'
         | 
| 55 61 | 
             
                });
         | 
| 56 62 | 
             
                return {
         | 
| 57 63 | 
             
                    children,
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"version":3,"sources":["useField.js"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps,  | 
| 1 | 
            +
            {"version":3,"sources":["useField.js"],"sourcesContent":["import * as React from 'react';\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getNativeElementProps, useId, slot } from '@fluentui/react-utilities';\nconst validationMessageIcons = {\n    error: /*#__PURE__*/ React.createElement(ErrorCircle12Filled, null),\n    warning: /*#__PURE__*/ React.createElement(Warning12Filled, null),\n    success: /*#__PURE__*/ React.createElement(CheckmarkCircle12Filled, null),\n    none: undefined\n};\n/**\n * Create the state required to render Field.\n *\n * The returned state can be modified with hooks such as useFieldStyles_unstable,\n * before being passed to renderField_unstable.\n *\n * @param props - Props passed to this field\n * @param ref - Ref to the root\n */ export const useField_unstable = (props, ref)=>{\n    const { children , orientation ='vertical' , required =false , validationState =props.validationMessage ? 'error' : 'none' , size ='medium'  } = props;\n    const baseId = useId('field-');\n    const generatedControlId = baseId + '__control';\n    const root = slot.always(getNativeElementProps('div', {\n        ...props,\n        ref\n    }, /*excludedPropNames:*/ [\n        'children'\n    ]), {\n        elementType: 'div'\n    });\n    const label = slot.optional(props.label, {\n        defaultProps: {\n            htmlFor: generatedControlId,\n            id: baseId + '__label',\n            required,\n            size\n        },\n        elementType: Label\n    });\n    const validationMessage = slot.optional(props.validationMessage, {\n        defaultProps: {\n            id: baseId + '__validationMessage',\n            role: validationState === 'error' ? 'alert' : undefined\n        },\n        elementType: 'div'\n    });\n    const hint = slot.optional(props.hint, {\n        defaultProps: {\n            id: baseId + '__hint'\n        },\n        elementType: 'div'\n    });\n    const defaultIcon = validationMessageIcons[validationState];\n    const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n        renderByDefault: !!defaultIcon,\n        defaultProps: {\n            children: defaultIcon\n        },\n        elementType: 'span'\n    });\n    return {\n        children,\n        generatedControlId,\n        orientation,\n        required,\n        size,\n        validationState,\n        components: {\n            root: 'div',\n            label: Label,\n            validationMessage: 'div',\n            validationMessageIcon: 'span',\n            hint: 'div'\n        },\n        root,\n        label,\n        validationMessageIcon,\n        validationMessage,\n        hint\n    };\n};\n"],"names":["useField_unstable","validationMessageIcons","error","React","createElement","ErrorCircle12Filled","warning","Warning12Filled","success","CheckmarkCircle12Filled","none","undefined","props","ref","children","orientation","required","validationState","validationMessage","size","baseId","useId","generatedControlId","root","slot","always","getNativeElementProps","elementType","label","optional","defaultProps","htmlFor","id","Label","role","hint","defaultIcon","validationMessageIcon","renderByDefault","components"],"mappings":";;;;+BAkBiBA;;aAAAA;;;6DAlBM;4BACuD;4BACxD;gCAC6B;AACnD,MAAMC,yBAAyB;IAC3BC,OAAO,WAAW,GAAGC,OAAMC,aAAa,CAACC,+BAAmB,EAAE,IAAI;IAClEC,SAAS,WAAW,GAAGH,OAAMC,aAAa,CAACG,2BAAe,EAAE,IAAI;IAChEC,SAAS,WAAW,GAAGL,OAAMC,aAAa,CAACK,mCAAuB,EAAE,IAAI;IACxEC,MAAMC;AACV;AASW,MAAMX,oBAAoB,CAACY,OAAOC,MAAM;IAC/C,MAAM,EAAEC,SAAQ,EAAGC,aAAa,WAAU,EAAGC,UAAU,KAAK,CAAA,EAAGC,iBAAiBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,CAAA,EAAGC,MAAM,SAAQ,EAAG,GAAGP;IACjJ,MAAMQ,SAASC,IAAAA,qBAAK,EAAC;IACrB,MAAMC,qBAAqBF,SAAS;IACpC,MAAMG,OAAOC,oBAAI,CAACC,MAAM,CAACC,IAAAA,qCAAqB,EAAC,OAAO;QAClD,GAAGd,KAAK;QACRC;IACJ,GAAG,oBAAoB,GAAG;QACtB;KACH,GAAG;QACAc,aAAa;IACjB;IACA,MAAMC,QAAQJ,oBAAI,CAACK,QAAQ,CAACjB,MAAMgB,KAAK,EAAE;QACrCE,cAAc;YACVC,SAAST;YACTU,IAAIZ,SAAS;YACbJ;YACAG;QACJ;QACAQ,aAAaM,iBAAK;IACtB;IACA,MAAMf,oBAAoBM,oBAAI,CAACK,QAAQ,CAACjB,MAAMM,iBAAiB,EAAE;QAC7DY,cAAc;YACVE,IAAIZ,SAAS;YACbc,MAAMjB,oBAAoB,UAAU,UAAUN,SAAS;QAC3D;QACAgB,aAAa;IACjB;IACA,MAAMQ,OAAOX,oBAAI,CAACK,QAAQ,CAACjB,MAAMuB,IAAI,EAAE;QACnCL,cAAc;YACVE,IAAIZ,SAAS;QACjB;QACAO,aAAa;IACjB;IACA,MAAMS,cAAcnC,sBAAsB,CAACgB,gBAAgB;IAC3D,MAAMoB,wBAAwBb,oBAAI,CAACK,QAAQ,CAACjB,MAAMyB,qBAAqB,EAAE;QACrEC,iBAAiB,CAAC,CAACF;QACnBN,cAAc;YACVhB,UAAUsB;QACd;QACAT,aAAa;IACjB;IACA,OAAO;QACHb;QACAQ;QACAP;QACAC;QACAG;QACAF;QACAsB,YAAY;YACRhB,MAAM;YACNK,OAAOK,iBAAK;YACZf,mBAAmB;YACnBmB,uBAAuB;YACvBF,MAAM;QACV;QACAZ;QACAK;QACAS;QACAnB;QACAiB;IACJ;AACJ"}
         | 
| @@ -41,12 +41,12 @@ const iconSize = '12px'; | |
| 41 41 | 
             
                }
         | 
| 42 42 | 
             
            }, {
         | 
| 43 43 | 
             
                d: [
         | 
| 44 | 
            -
                    ".f13qh94s{display | 
| 45 | 
            -
                    ".f2wwaib{ | 
| 46 | 
            -
                    ".f1645dqt{ | 
| 44 | 
            +
                    ".f13qh94s{display:grid;}",
         | 
| 45 | 
            +
                    ".f2wwaib{grid-template-columns:33% 1fr;}",
         | 
| 46 | 
            +
                    ".f1645dqt{grid-template-rows:auto auto auto 1fr;}",
         | 
| 47 47 | 
             
                    ".f15jqgz8{padding-left:33%;}",
         | 
| 48 48 | 
             
                    ".fggqkej{padding-right:33%;}",
         | 
| 49 | 
            -
                    ".f1c2z91y{ | 
| 49 | 
            +
                    ".f1c2z91y{grid-template-columns:1fr;}"
         | 
| 50 50 | 
             
                ]
         | 
| 51 51 | 
             
            });
         | 
| 52 52 | 
             
            const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({
         | 
| @@ -82,8 +82,8 @@ const useLabelStyles = /*#__PURE__*/ (0, _react["__styles"])({ | |
| 82 82 | 
             
                    ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}",
         | 
| 83 83 | 
             
                    ".fkujibs{margin-right:var(--spacingHorizontalM);}",
         | 
| 84 84 | 
             
                    ".f199hnxi{margin-left:var(--spacingHorizontalM);}",
         | 
| 85 | 
            -
                    ".f16hsg94{ | 
| 86 | 
            -
                    ".f1nzqi2z{ | 
| 85 | 
            +
                    ".f16hsg94{grid-row-start:1;}",
         | 
| 86 | 
            +
                    ".f1nzqi2z{grid-row-end:-1;}"
         | 
| 87 87 | 
             
                ]
         | 
| 88 88 | 
             
            });
         | 
| 89 89 | 
             
            const useSecondaryTextBaseClassName = /*#__PURE__*/ (0, _react["__resetStyles"])("r5c4z9l", null, [
         | 
| @@ -1 +1 @@ | |
| 1 | 
            -
            {"version":3,"sources":["useFieldStyles.styles.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 | 
| 1 | 
            +
            {"version":3,"sources":["useFieldStyles.styles.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.styles.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/package.json
    CHANGED
    
    | @@ -1,6 +1,6 @@ | |
| 1 1 | 
             
            {
         | 
| 2 2 | 
             
              "name": "@fluentui/react-field",
         | 
| 3 | 
            -
              "version": "9.1. | 
| 3 | 
            +
              "version": "9.1.16",
         | 
| 4 4 | 
             
              "description": "Fluent UI Field components",
         | 
| 5 5 | 
             
              "main": "lib-commonjs/index.js",
         | 
| 6 6 | 
             
              "module": "lib/index.js",
         | 
| @@ -35,11 +35,11 @@ | |
| 35 35 | 
             
              "dependencies": {
         | 
| 36 36 | 
             
                "@fluentui/react-context-selector": "^9.1.27",
         | 
| 37 37 | 
             
                "@fluentui/react-icons": "^2.0.207",
         | 
| 38 | 
            -
                "@fluentui/react-jsx-runtime": "9.0.0-alpha. | 
| 39 | 
            -
                "@fluentui/react-label": "^9.1. | 
| 40 | 
            -
                "@fluentui/react-theme": "^9.1. | 
| 38 | 
            +
                "@fluentui/react-jsx-runtime": "9.0.0-alpha.14",
         | 
| 39 | 
            +
                "@fluentui/react-label": "^9.1.24",
         | 
| 40 | 
            +
                "@fluentui/react-theme": "^9.1.11",
         | 
| 41 41 | 
             
                "@fluentui/react-utilities": "^9.11.0",
         | 
| 42 | 
            -
                "@griffel/react": "^1.5. | 
| 42 | 
            +
                "@griffel/react": "^1.5.14",
         | 
| 43 43 | 
             
                "@swc/helpers": "^0.4.14"
         | 
| 44 44 | 
             
              },
         | 
| 45 45 | 
             
              "peerDependencies": {
         |