feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+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';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+export const Field = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useField_unstable(props, ref);
+    useFieldStyles_unstable(state);
+    useCustomStyleHook_unstable('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":["'use client';\n\nimport * 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';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\nexport const Field: ForwardRefComponent<FieldProps> = React.forwardRef((props, ref) => {\n  const state = useField_unstable(props, ref);\n  useFieldStyles_unstable(state);\n  useCustomStyleHook_unstable('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","useCustomStyleHook_unstable","Field","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;AAEA,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;AACtE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E,OAAO,MAAMC,sBAAyCN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC7E,MAAMC,QAAQR,kBAAkBM,OAAOC;IACvCN,wBAAwBO;IACxBL,4BAA4B,2BAA2BK;IACvD,MAAMC,UAAUP,+BAA+BM;IAC/C,OAAOT,qBAAqBS,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, DistributiveOmit, 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 FieldBaseProps = DistributiveOmit<FieldProps, 'orientation' | 'size'>;\n\nexport type FieldBaseState = DistributiveOmit<FieldState, 'orientation' | 'size'>;\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"],"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, useFieldBase_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  FieldBaseProps,\n  FieldBaseState,\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, useFieldBase_unstable } from './useField';\nexport { fieldClassNames, useFieldStyles_unstable } from './useFieldStyles.styles';\n"],"names":["Field","renderField_unstable","useField_unstable","useFieldBase_unstable","fieldClassNames","useFieldStyles_unstable"],"mappings":"AAUA,SAASA,KAAK,QAAQ,UAAU;AAChC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iBAAiB,EAAEC,qBAAqB,QAAQ,aAAa;AACtE,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 type { JSXElement } 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): JSXElement => {\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"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,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,110 @@
+'use client';
+import * as React from 'react';
+import { CheckmarkCircle12Filled, DiamondDismiss12Filled, 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(DiamondDismiss12Filled, 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 { orientation = 'vertical', size = 'medium', ...fieldProps } = props;
+    const state = useFieldBase_unstable(fieldProps, ref);
+    const defaultIcon = validationMessageIcons[state.validationState];
+    return {
+        ...state,
+        // eslint-disable-next-line @typescript-eslint/no-deprecated
+        components: {
+            ...state.components,
+            label: Label
+        },
+        label: slot.optional(props.label, {
+            defaultProps: {
+                size,
+                ...state.label
+            },
+            elementType: Label
+        }),
+        validationMessageIcon: slot.optional(props.validationMessageIcon, {
+            renderByDefault: !!defaultIcon,
+            defaultProps: {
+                children: defaultIcon
+            },
+            elementType: 'span'
+        }),
+        orientation,
+        size
+    };
+};
+/**
+ * Base hook for Field component, which manages state related to validation, ARIA attributes,
+ * ID generation, and slot structure without design props.
+ *
+ * @param props - Props passed to this field
+ * @param ref - Ref to the root
+ */ export const useFieldBase_unstable = (props, ref)=>{
+    const { children, required = false, validationState = props.validationMessage ? 'error' : 'none' } = 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
+        },
+        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 validationMessageIcon = slot.optional(props.validationMessageIcon, {
+        renderByDefault: false,
+        elementType: 'span'
+    });
+    return {
+        children,
+        generatedControlId,
+        required,
+        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/useFieldStyles.styles.js

@@ -0,0 +1,121 @@
+'use client';
+
+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({
+  base: {
+    B2u0y6b: "f6nezus",
+    Bxyxcbc: "f1iqmcbn"
+  },
+  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: [".f6nezus{max-width:max-content;}", ".f1iqmcbn{max-height:max-content;}", ".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, labelStyles.base, 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;
+};

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

@@ -0,0 +1,127 @@
+'use client';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+import { makeResetStyles, makeStyles, 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 = makeStyles({
+    base: {
+        display: 'grid'
+    },
+    // In horizontal layout, the field is a grid with the label taking up the entire first column.
+    // The last row is slack space in case the label is taller than the rest of the content.
+    horizontal: {
+        gridTemplateColumns: '33% 1fr',
+        gridTemplateRows: 'auto auto auto 1fr'
+    },
+    // In horizontal layout without a label, replace the label's column with padding.
+    // This lets grid auto-flow properly place the other children, and keeps fields with and without labels aligned.
+    horizontalNoLabel: {
+        paddingLeft: '33%',
+        gridTemplateColumns: '1fr'
+    }
+});
+const useLabelStyles = makeStyles({
+    base: {
+        maxWidth: 'max-content',
+        maxHeight: 'max-content'
+    },
+    vertical: {
+        paddingTop: tokens.spacingVerticalXXS,
+        paddingBottom: tokens.spacingVerticalXXS,
+        marginBottom: tokens.spacingVerticalXXS
+    },
+    verticalLarge: {
+        paddingTop: '1px',
+        paddingBottom: '1px',
+        marginBottom: tokens.spacingVerticalXS
+    },
+    horizontal: {
+        paddingTop: tokens.spacingVerticalSNudge,
+        paddingBottom: tokens.spacingVerticalSNudge,
+        marginRight: tokens.spacingHorizontalM,
+        gridRowStart: '1',
+        gridRowEnd: '-1'
+    },
+    horizontalSmall: {
+        paddingTop: tokens.spacingVerticalXS,
+        paddingBottom: tokens.spacingVerticalXS
+    },
+    horizontalLarge: {
+        // To align the label text with the Input text, it should be centered within the 40px height of the Input.
+        // This is (40px - lineHeightBase400) / 2 = 9px. Hardcoded since there is no 9px padding token.
+        paddingTop: '9px',
+        paddingBottom: '9px'
+    }
+});
+const useSecondaryTextBaseClassName = makeResetStyles({
+    marginTop: tokens.spacingVerticalXXS,
+    color: tokens.colorNeutralForeground3,
+    ...typographyStyles.caption1
+});
+const useSecondaryTextStyles = makeStyles({
+    error: {
+        color: tokens.colorPaletteRedForeground1
+    },
+    withIcon: {
+        // Add a gutter for the icon, to allow multiple lines of text to line up to the right of the icon.
+        paddingLeft: `calc(${iconSize} + ${tokens.spacingHorizontalXS})`
+    }
+});
+const useValidationMessageIconBaseClassName = makeResetStyles({
+    display: 'inline-block',
+    fontSize: iconSize,
+    // Negative left margin puts the icon in the gutter of the validation message div's withIcon style.
+    marginLeft: `calc(-${iconSize} - ${tokens.spacingHorizontalXS})`,
+    marginRight: tokens.spacingHorizontalXS,
+    // Line height of 0 prevents the verticalAlign from affecting the line height of the text.
+    lineHeight: '0',
+    // Negative verticalAlign shifts the inline icon down to align with the text (effectively top padding).
+    verticalAlign: '-1px'
+});
+const useValidationMessageIconStyles = makeStyles({
+    error: {
+        color: tokens.colorPaletteRedForeground1
+    },
+    warning: {
+        color: tokens.colorPaletteDarkOrangeForeground1
+    },
+    success: {
+        color: tokens.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, labelStyles.base, 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;
+};