Initial commit

node_modules/@fluentui/react-field/lib/components/Field/Field.js

@@ -0,0 +1,12 @@
+import * as React from 'react';
+import { renderField_unstable } from './renderField';
+import { useField_unstable } from './useField';
+import { useFieldStyles_unstable } from './useFieldStyles.styles';
+import { useFieldContextValues_unstable } from '../../contexts/index';
+export const Field = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useField_unstable(props, ref);
+    useFieldStyles_unstable(state);
+    const context = useFieldContextValues_unstable(state);
+    return renderField_unstable(state, context);
+});
+Field.displayName = 'Field';

node_modules/@fluentui/react-field/lib/components/Field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/Field.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { FieldProps } from './Field.types';\nimport { renderField_unstable } from './renderField';\nimport { useField_unstable } from './useField';\nimport { useFieldStyles_unstable } from './useFieldStyles.styles';\nimport { useFieldContextValues_unstable } from '../../contexts/index';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref);\n  useFieldStyles_unstable(state);\n  const context = useFieldContextValues_unstable(state);\n  return renderField_unstable(state, context);\n});\n\nField.displayName = 'Field';\n"],"names":["React","renderField_unstable","useField_unstable","useFieldStyles_unstable","useFieldContextValues_unstable","Field","forwardRef","props","ref","state","context","displayName"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,8BAA8B,QAAQ,uBAAuB;AAEtE,OAAO,MAAMC,sBAAyCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQP,kBAAkBK,OAAOC;IACvCL,wBAAwBM;IACxB,MAAMC,UAAUN,+BAA+BK;IAC/C,OAAOR,qBAAqBQ,OAAOC;AACrC,GAAG;AAEHL,MAAMM,WAAW,GAAG"}

node_modules/@fluentui/react-field/lib/components/Field/Field.types.js

@@ -0,0 +1 @@
+import * as React from 'react';

node_modules/@fluentui/react-field/lib/components/Field/Field.types.js.map

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

node_modules/@fluentui/react-field/lib/components/Field/index.js

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

node_modules/@fluentui/react-field/lib/components/Field/index.js.map

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

node_modules/@fluentui/react-field/lib/components/Field/renderField.js

@@ -0,0 +1,28 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { FieldContextProvider, getFieldControlProps } from '../../contexts/index';
+/**
+ * Render the final JSX of Field
+ */ export const renderField_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    let { children } = state;
+    if (typeof children === 'function') {
+        children = children(getFieldControlProps(contextValues.field) || {});
+    }
+    return /*#__PURE__*/ _jsx(FieldContextProvider, {
+        value: contextValues === null || contextValues === void 0 ? void 0 : contextValues.field,
+        children: /*#__PURE__*/ _jsxs(state.root, {
+            children: [
+                state.label && /*#__PURE__*/ _jsx(state.label, {}),
+                children,
+                state.validationMessage && /*#__PURE__*/ _jsxs(state.validationMessage, {
+                    children: [
+                        state.validationMessageIcon && /*#__PURE__*/ _jsx(state.validationMessageIcon, {}),
+                        state.validationMessage.children
+                    ]
+                }),
+                state.hint && /*#__PURE__*/ _jsx(state.hint, {})
+            ]
+        })
+    });
+};

node_modules/@fluentui/react-field/lib/components/Field/renderField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/renderField.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport { 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":["assertSlots","FieldContextProvider","getFieldControlProps","renderField_unstable","state","contextValues","children","field","value","root","label","validationMessage","validationMessageIcon","hint"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AACxD,SAASC,oBAAoB,EAAEC,oBAAoB,QAAQ,uBAAuB;AAGlF;;CAEC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAmBC;IACtDL,YAAwBI;IAExB,IAAI,EAAEE,QAAQ,EAAE,GAAGF;IACnB,IAAI,OAAOE,aAAa,YAAY;QAClCA,WAAWA,SAASJ,qBAAqBG,cAAcE,KAAK,KAAK,CAAC;IACpE;IAEA,qBACE,KAACN;QAAqBO,KAAK,EAAEH,0BAAAA,oCAAAA,cAAeE,KAAK;kBAC/C,cAAA,MAACH,MAAMK,IAAI;;gBACRL,MAAMM,KAAK,kBAAI,KAACN,MAAMM,KAAK;gBAC3BJ;gBACAF,MAAMO,iBAAiB,kBACtB,MAACP,MAAMO,iBAAiB;;wBACrBP,MAAMQ,qBAAqB,kBAAI,KAACR,MAAMQ,qBAAqB;wBAC3DR,MAAMO,iBAAiB,CAACL,QAAQ;;;gBAIpCF,MAAMS,IAAI,kBAAI,KAACT,MAAMS,IAAI;;;;AAIlC,EAAE"}

node_modules/@fluentui/react-field/lib/components/Field/useField.js

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';
+import { Label } from '@fluentui/react-label';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+const validationMessageIcons = {
+    error: /*#__PURE__*/ React.createElement(ErrorCircle12Filled, null),
+    warning: /*#__PURE__*/ React.createElement(Warning12Filled, null),
+    success: /*#__PURE__*/ React.createElement(CheckmarkCircle12Filled, null),
+    none: undefined
+};
+/**
+ * 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 root
+ */ export const useField_unstable = (props, ref)=>{
+    const { children, orientation = 'vertical', required = false, validationState = props.validationMessage ? 'error' : 'none', size = 'medium' } = props;
+    const baseId = useId('field-');
+    const generatedControlId = baseId + '__control';
+    const root = slot.always(getIntrinsicElementProps('div', {
+        ...props,
+        ref
+    }, /*excludedPropNames:*/ [
+        'children'
+    ]), {
+        elementType: 'div'
+    });
+    const label = slot.optional(props.label, {
+        defaultProps: {
+            htmlFor: generatedControlId,
+            id: baseId + '__label',
+            required,
+            size
+        },
+        elementType: Label
+    });
+    const validationMessage = slot.optional(props.validationMessage, {
+        defaultProps: {
+            id: baseId + '__validationMessage',
+            role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined
+        },
+        elementType: 'div'
+    });
+    const hint = slot.optional(props.hint, {
+        defaultProps: {
+            id: baseId + '__hint'
+        },
+        elementType: 'div'
+    });
+    const defaultIcon = validationMessageIcons[validationState];
+    const validationMessageIcon = slot.optional(props.validationMessageIcon, {
+        renderByDefault: !!defaultIcon,
+        defaultProps: {
+            children: defaultIcon
+        },
+        elementType: 'span'
+    });
+    return {
+        children,
+        generatedControlId,
+        orientation,
+        required,
+        size,
+        validationState,
+        components: {
+            root: 'div',
+            label: Label,
+            validationMessage: 'div',
+            validationMessageIcon: 'span',
+            hint: 'div'
+        },
+        root,
+        label,
+        validationMessageIcon,
+        validationMessage,
+        hint
+    };
+};

node_modules/@fluentui/react-field/lib/components/Field/useField.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Field/useField.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { CheckmarkCircle12Filled, ErrorCircle12Filled, Warning12Filled } from '@fluentui/react-icons';\nimport { Label } from '@fluentui/react-label';\nimport { getIntrinsicElementProps, 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(getIntrinsicElementProps('div', { ...props, ref }, /*excludedPropNames:*/ ['children']), {\n    elementType: 'div',\n  });\n  const label = slot.optional(props.label, {\n    defaultProps: { htmlFor: generatedControlId, id: baseId + '__label', required, size },\n    elementType: Label,\n  });\n  const validationMessage = slot.optional(props.validationMessage, {\n    defaultProps: {\n      id: baseId + '__validationMessage',\n      role: validationState === 'error' || validationState === 'warning' ? 'alert' : undefined,\n    },\n    elementType: 'div',\n  });\n  const hint = slot.optional(props.hint, { defaultProps: { id: baseId + '__hint' }, elementType: 'div' });\n  const defaultIcon = validationMessageIcons[validationState];\n  const validationMessageIcon = slot.optional(props.validationMessageIcon, {\n    renderByDefault: !!defaultIcon,\n    defaultProps: { children: defaultIcon },\n    elementType: 'span',\n  });\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","getIntrinsicElementProps","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,EAAEC,mBAAmB,EAAEC,eAAe,QAAQ,wBAAwB;AACtG,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,wBAAwB,EAAEC,KAAK,EAAEC,IAAI,QAAQ,4BAA4B;AAGlF,MAAMC,yBAAyB;IAC7BC,qBAAO,oBAACP;IACRQ,uBAAS,oBAACP;IACVQ,uBAAS,oBAACV;IACVW,MAAMC;AACR;AAEA;;;;;;;;CAQC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAmBC;IACnD,MAAM,EACJC,QAAQ,EACRC,cAAc,UAAU,EACxBC,WAAW,KAAK,EAChBC,kBAAkBL,MAAMM,iBAAiB,GAAG,UAAU,MAAM,EAC5DC,OAAO,QAAQ,EAChB,GAAGP;IAEJ,MAAMQ,SAASjB,MAAM;IACrB,MAAMkB,qBAAqBD,SAAS;IAEpC,MAAME,OAAOlB,KAAKmB,MAAM,CAACrB,yBAAyB,OAAO;QAAE,GAAGU,KAAK;QAAEC;IAAI,GAAG,oBAAoB,GAAG;QAAC;KAAW,GAAG;QAChHW,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;YACZE,IAAIT,SAAS;YACbU,MAAMb,oBAAoB,WAAWA,oBAAoB,YAAY,UAAUP;QACjF;QACAc,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;IAEA,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"}

node_modules/@fluentui/react-field/lib/components/Field/useFieldStyles.styles.js

@@ -0,0 +1,115 @@
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+export 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__*/__styles({
+  base: {
+    mc9l5x: "f13qh94s"
+  },
+  horizontal: {
+    Budl1dq: "f2wwaib",
+    wkccdc: "f1645dqt"
+  },
+  horizontalNoLabel: {
+    uwmqm3: ["f15jqgz8", "fggqkej"],
+    Budl1dq: "f1c2z91y"
+  }
+}, {
+  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__*/__styles({
+  vertical: {
+    z8tnut: "fclwglc",
+    Byoj8tv: "fywfov9",
+    jrapky: "fyacil5"
+  },
+  verticalLarge: {
+    z8tnut: "f1sl3k7w",
+    Byoj8tv: "f1brlhvm",
+    jrapky: "f8l5zjj"
+  },
+  horizontal: {
+    z8tnut: "fp2oml8",
+    Byoj8tv: "f1tdddsa",
+    t21cq0: ["fkujibs", "f199hnxi"],
+    Ijaq50: "f16hsg94",
+    nk6f5a: "f1nzqi2z"
+  },
+  horizontalSmall: {
+    z8tnut: "f1ywm7hm",
+    Byoj8tv: "f14wxoun"
+  },
+  horizontalLarge: {
+    z8tnut: "f1hqyr95",
+    Byoj8tv: "fm4hlj0"
+  }
+}, {
+  d: [".fclwglc{padding-top:var(--spacingVerticalXXS);}", ".fywfov9{padding-bottom:var(--spacingVerticalXXS);}", ".fyacil5{margin-bottom:var(--spacingVerticalXXS);}", ".f1sl3k7w{padding-top:1px;}", ".f1brlhvm{padding-bottom:1px;}", ".f8l5zjj{margin-bottom:var(--spacingVerticalXS);}", ".fp2oml8{padding-top:var(--spacingVerticalSNudge);}", ".f1tdddsa{padding-bottom:var(--spacingVerticalSNudge);}", ".fkujibs{margin-right:var(--spacingHorizontalM);}", ".f199hnxi{margin-left:var(--spacingHorizontalM);}", ".f16hsg94{grid-row-start:1;}", ".f1nzqi2z{grid-row-end:-1;}", ".f1ywm7hm{padding-top:var(--spacingVerticalXS);}", ".f14wxoun{padding-bottom:var(--spacingVerticalXS);}", ".f1hqyr95{padding-top:9px;}", ".fm4hlj0{padding-bottom:9px;}"]
+});
+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);}"]);
+const useSecondaryTextStyles = /*#__PURE__*/__styles({
+  error: {
+    sj55zd: "f1hcrxcs"
+  },
+  withIcon: {
+    uwmqm3: ["frawy03", "fg4c52"]
+  }
+}, {
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".frawy03{padding-left:calc(12px + var(--spacingHorizontalXS));}", ".fg4c52{padding-right:calc(12px + var(--spacingHorizontalXS));}"]
+});
+const 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;}"]);
+const useValidationMessageIconStyles = /*#__PURE__*/__styles({
+  error: {
+    sj55zd: "f1hcrxcs"
+  },
+  warning: {
+    sj55zd: "f1k5f75o"
+  },
+  success: {
+    sj55zd: "ffmvakt"
+  }
+}, {
+  d: [".f1hcrxcs{color:var(--colorPaletteRedForeground1);}", ".f1k5f75o{color:var(--colorPaletteDarkOrangeForeground1);}", ".ffmvakt{color:var(--colorPaletteGreenForeground1);}"]
+});
+/**
+ * Apply styling to the Field slots based on the state
+ */
+export const useFieldStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    validationState,
+    size
+  } = state;
+  const horizontal = state.orientation === 'horizontal';
+  const rootStyles = useRootStyles();
+  state.root.className = mergeClasses(fieldClassNames.root, rootStyles.base, horizontal && rootStyles.horizontal, horizontal && !state.label && rootStyles.horizontalNoLabel, state.root.className);
+  const labelStyles = useLabelStyles();
+  if (state.label) {
+    state.label.className = mergeClasses(fieldClassNames.label, horizontal && labelStyles.horizontal, horizontal && size === 'small' && labelStyles.horizontalSmall, horizontal && size === 'large' && labelStyles.horizontalLarge, !horizontal && labelStyles.vertical, !horizontal && size === 'large' && labelStyles.verticalLarge, state.label.className);
+  }
+  const validationMessageIconBaseClassName = useValidationMessageIconBaseClassName();
+  const validationMessageIconStyles = useValidationMessageIconStyles();
+  if (state.validationMessageIcon) {
+    state.validationMessageIcon.className = mergeClasses(fieldClassNames.validationMessageIcon, validationMessageIconBaseClassName, validationState !== 'none' && validationMessageIconStyles[validationState], state.validationMessageIcon.className);
+  }
+  const secondaryTextBaseClassName = useSecondaryTextBaseClassName();
+  const secondaryTextStyles = useSecondaryTextStyles();
+  if (state.validationMessage) {
+    state.validationMessage.className = mergeClasses(fieldClassNames.validationMessage, secondaryTextBaseClassName, validationState === 'error' && secondaryTextStyles.error, !!state.validationMessageIcon && secondaryTextStyles.withIcon, state.validationMessage.className);
+  }
+  if (state.hint) {
+    state.hint.className = mergeClasses(fieldClassNames.hint, secondaryTextBaseClassName, state.hint.className);
+  }
+  return state;
+};