feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-search/lib/components/SearchBox/SearchBox.js

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useSearchBox_unstable } from './useSearchBox';
+import { renderSearchBox_unstable } from './renderSearchBox';
+import { useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * SearchBox component - TODO: add more docs
+ */ export const SearchBox = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSearchBox_unstable(props, ref);
+    useSearchBoxStyles_unstable(state);
+    useCustomStyleHook_unstable('useSearchBoxStyles_unstable')(state);
+    return renderSearchBox_unstable(state);
+});
+SearchBox.displayName = 'SearchBox';

node_modules/@fluentui/react-search/lib/components/SearchBox/SearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SearchBox/SearchBox.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useSearchBox_unstable } from './useSearchBox';\nimport { renderSearchBox_unstable } from './renderSearchBox';\nimport { useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\nimport type { SearchBoxProps } from './SearchBox.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SearchBox component - TODO: add more docs\n */\nexport const SearchBox: ForwardRefComponent<SearchBoxProps> = React.forwardRef((props, ref) => {\n  const state = useSearchBox_unstable(props, ref);\n\n  useSearchBoxStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useSearchBoxStyles_unstable')(state);\n\n  return renderSearchBox_unstable(state);\n});\n\nSearchBox.displayName = 'SearchBox';\n"],"names":["React","useSearchBox_unstable","renderSearchBox_unstable","useSearchBoxStyles_unstable","useCustomStyleHook_unstable","SearchBox","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,8BAA8B;AAG1E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,0BAAiDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACrF,MAAMC,QAAQR,sBAAsBM,OAAOC;IAE3CL,4BAA4BM;IAE5BL,4BAA4B,+BAA+BK;IAE3D,OAAOP,yBAAyBO;AAClC,GAAG;AAEHJ,UAAUK,WAAW,GAAG"}

node_modules/@fluentui/react-search/lib/components/SearchBox/SearchBox.types.js

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

node_modules/@fluentui/react-search/lib/components/SearchBox/SearchBox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SearchBox/SearchBox.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { InputOnChangeData, InputProps, InputSlots, InputState } from '@fluentui/react-input';\n\nexport type SearchBoxSlots = InputSlots & {\n  /** Last element in the input, within the input border */\n  dismiss?: Slot<'span'>;\n};\n\n/**\n * SearchBox Props\n */\nexport type SearchBoxProps = Omit<\n  ComponentProps<Partial<SearchBoxSlots>, 'input'>,\n  // `children` is unsupported. The rest of these native props have customized definitions.\n  'children' | 'defaultValue' | 'onChange' | 'size' | 'type' | 'value'\n> &\n  Omit<InputProps, 'onChange'> & {\n    /**\n     * Custom onChange callback.\n     * Will be traditionally supplied with a React.ChangeEvent<HTMLInputElement> for usual character entry.\n     * When the dismiss button is clicked, this will be called with an event of type React.MouseEvent<HTMLSpanElement>\n     * and an empty string as the `value` property of the data parameter\n     */\n    // eslint-disable-next-line @nx/workspace-consistent-callback-type -- can't change type of existing callback\n    onChange?: (event: SearchBoxChangeEvent, data: InputOnChangeData) => void;\n  };\n\n/**\n * SearchBox base props — excludes design props (appearance, size).\n */\nexport type SearchBoxBaseProps = Omit<SearchBoxProps, 'appearance' | 'size'>;\n\n/**\n * State used in rendering SearchBox\n */\nexport type SearchBoxState = ComponentState<SearchBoxSlots> &\n  InputState &\n  Required<Pick<InputState, 'size'>> &\n  Required<Pick<SearchBoxProps, 'disabled'>> & {\n    focused: boolean;\n  };\n\n/**\n * SearchBox base state — excludes design props (appearance, size).\n */\nexport type SearchBoxBaseState = Omit<SearchBoxState, 'appearance' | 'size'>;\n\n/** Overloaded onChange event type, used to merge functionality of regular text entry and the dismiss button */\nexport type SearchBoxChangeEvent = React.ChangeEvent<HTMLInputElement> | React.MouseEvent<HTMLSpanElement>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-search/lib/components/SearchBox/index.js

@@ -0,0 +1,4 @@
+export { SearchBox } from './SearchBox';
+export { renderSearchBox_unstable } from './renderSearchBox';
+export { useSearchBox_unstable, useSearchBoxBase_unstable } from './useSearchBox';
+export { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';

node_modules/@fluentui/react-search/lib/components/SearchBox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SearchBox/index.ts"],"sourcesContent":["export { SearchBox } from './SearchBox';\nexport type {\n  SearchBoxChangeEvent,\n  SearchBoxProps,\n  SearchBoxBaseProps,\n  SearchBoxSlots,\n  SearchBoxState,\n  SearchBoxBaseState,\n} from './SearchBox.types';\nexport { renderSearchBox_unstable } from './renderSearchBox';\nexport { useSearchBox_unstable, useSearchBoxBase_unstable } from './useSearchBox';\nexport { searchBoxClassNames, useSearchBoxStyles_unstable } from './useSearchBoxStyles.styles';\n"],"names":["SearchBox","renderSearchBox_unstable","useSearchBox_unstable","useSearchBoxBase_unstable","searchBoxClassNames","useSearchBoxStyles_unstable"],"mappings":"AAAA,SAASA,SAAS,QAAQ,cAAc;AASxC,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,qBAAqB,EAAEC,yBAAyB,QAAQ,iBAAiB;AAClF,SAASC,mBAAmB,EAAEC,2BAA2B,QAAQ,8BAA8B"}

node_modules/@fluentui/react-search/lib/components/SearchBox/renderSearchBox.js

@@ -0,0 +1,19 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of SearchBox
+ */ export const renderSearchBox_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.contentBefore && /*#__PURE__*/ _jsx(state.contentBefore, {}),
+            /*#__PURE__*/ _jsx(state.input, {}),
+            state.contentAfter && /*#__PURE__*/ _jsxs(state.contentAfter, {
+                children: [
+                    state.contentAfter.children,
+                    state.dismiss && /*#__PURE__*/ _jsx(state.dismiss, {})
+                ]
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-search/lib/components/SearchBox/renderSearchBox.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SearchBox/renderSearchBox.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 type { SearchBoxBaseState, SearchBoxSlots } from './SearchBox.types';\n\n/**\n * Render the final JSX of SearchBox\n */\nexport const renderSearchBox_unstable = (state: SearchBoxBaseState): JSXElement => {\n  assertSlots<SearchBoxSlots>(state);\n\n  return (\n    <state.root>\n      {state.contentBefore && <state.contentBefore />}\n      <state.input />\n      {state.contentAfter && (\n        <state.contentAfter>\n          {state.contentAfter.children}\n          {state.dismiss && <state.dismiss />}\n        </state.contentAfter>\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderSearchBox_unstable","state","root","contentBefore","input","contentAfter","children","dismiss"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,2BAA2B,CAACC;IACvCF,YAA4BE;IAE5B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,aAAa,kBAAI,KAACF,MAAME,aAAa;0BAC5C,KAACF,MAAMG,KAAK;YACXH,MAAMI,YAAY,kBACjB,MAACJ,MAAMI,YAAY;;oBAChBJ,MAAMI,YAAY,CAACC,QAAQ;oBAC3BL,MAAMM,OAAO,kBAAI,KAACN,MAAMM,OAAO;;;;;AAK1C,EAAE"}

node_modules/@fluentui/react-search/lib/components/SearchBox/useSearchBox.js

@@ -0,0 +1,129 @@
+'use client';
+import * as React from 'react';
+import { isResolvedShorthand, mergeCallbacks, slot, useControllableState, useEventCallback, useMergedRefs } from '@fluentui/react-utilities';
+import { useInput_unstable } from '@fluentui/react-input';
+import { DismissRegular, SearchRegular } from '@fluentui/react-icons';
+/**
+ * Create the state required to render SearchBox.
+ *
+ * The returned state can be modified with hooks such as useSearchBoxStyles_unstable,
+ * before being passed to renderSearchBox_unstable.
+ *
+ * @param props - props from this instance of SearchBox
+ * @param ref - reference to root HTMLElement of SearchBox
+ */ export const useSearchBox_unstable = (props, ref)=>{
+    const { size = 'medium', appearance = 'outline', ...baseProps } = props;
+    const state = useSearchBoxBase_unstable(baseProps, ref);
+    if (state.contentBefore) {
+        var _state_contentBefore;
+        var _children;
+        (_children = (_state_contentBefore = state.contentBefore).children) !== null && _children !== void 0 ? _children : _state_contentBefore.children = /*#__PURE__*/ React.createElement(SearchRegular, null);
+    }
+    if (state.dismiss) {
+        var _state_dismiss;
+        var _children1;
+        (_children1 = (_state_dismiss = state.dismiss).children) !== null && _children1 !== void 0 ? _children1 : _state_dismiss.children = /*#__PURE__*/ React.createElement(DismissRegular, null);
+    }
+    return {
+        ...state,
+        size,
+        appearance
+    };
+};
+/**
+ * Base hook for SearchBox component. Manages state related to controlled/uncontrolled
+ * value, focus tracking, dismiss button click handling, search icon slot, and
+ * input type="search" — without design props (size, appearance).
+ *
+ * @param props - props from this instance of SearchBox (without size, appearance)
+ * @param ref - reference to root HTMLElement of SearchBox
+ */ export const useSearchBoxBase_unstable = (props, ref)=>{
+    const { disabled = false, root, contentBefore, dismiss, contentAfter, value, defaultValue, ...inputProps } = props;
+    const searchBoxRootRef = React.useRef(null);
+    const searchBoxRef = React.useRef(null);
+    const [internalValue, setInternalValue] = useControllableState({
+        state: value,
+        defaultState: defaultValue,
+        initialState: ''
+    });
+    // Tracks the focus of the component for the contentAfter and dismiss button
+    const [focused, setFocused] = React.useState(false);
+    const onFocus = React.useCallback(()=>{
+        setFocused(true);
+    }, [
+        setFocused
+    ]);
+    const onBlur = React.useCallback((ev)=>{
+        var _searchBoxRootRef_current;
+        setFocused(!!((_searchBoxRootRef_current = searchBoxRootRef.current) === null || _searchBoxRootRef_current === void 0 ? void 0 : _searchBoxRootRef_current.contains(ev.relatedTarget)));
+    }, [
+        setFocused
+    ]);
+    const rootProps = slot.resolveShorthand(root);
+    const handleDismissClick = useEventCallback((event)=>{
+        var _props_onChange, _searchBoxRef_current;
+        if (isResolvedShorthand(dismiss)) {
+            var _dismiss_onClick;
+            (_dismiss_onClick = dismiss.onClick) === null || _dismiss_onClick === void 0 ? void 0 : _dismiss_onClick.call(dismiss, event);
+        }
+        const newValue = '';
+        setInternalValue(newValue);
+        (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, event, {
+            value: newValue
+        });
+        (_searchBoxRef_current = searchBoxRef.current) === null || _searchBoxRef_current === void 0 ? void 0 : _searchBoxRef_current.focus();
+    });
+    const inputState = useInput_unstable({
+        type: 'search',
+        disabled,
+        value: internalValue,
+        root: slot.always({
+            ...rootProps,
+            ref: useMergedRefs(rootProps === null || rootProps === void 0 ? void 0 : rootProps.ref, searchBoxRootRef),
+            onFocus: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onFocus, onFocus),
+            onBlur: mergeCallbacks(rootProps === null || rootProps === void 0 ? void 0 : rootProps.onBlur, onBlur)
+        }, {
+            elementType: 'span'
+        }),
+        contentBefore: slot.optional(contentBefore, {
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        contentAfter: slot.optional(contentAfter, {
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        ...inputProps,
+        onChange: useEventCallback((ev)=>{
+            var _props_onChange;
+            const newValue = ev.target.value;
+            (_props_onChange = props.onChange) === null || _props_onChange === void 0 ? void 0 : _props_onChange.call(props, ev, {
+                value: newValue
+            });
+            setInternalValue(newValue);
+        })
+    }, useMergedRefs(searchBoxRef, ref));
+    const state = {
+        ...inputState,
+        components: {
+            // eslint-disable-next-line @typescript-eslint/no-deprecated
+            ...inputState.components,
+            dismiss: 'span'
+        },
+        dismiss: slot.optional(dismiss, {
+            defaultProps: {
+                role: 'button',
+                'aria-label': 'clear',
+                tabIndex: -1
+            },
+            renderByDefault: true,
+            elementType: 'span'
+        }),
+        disabled,
+        focused
+    };
+    if (state.dismiss) {
+        state.dismiss.onClick = handleDismissClick;
+    }
+    return state;
+};

node_modules/@fluentui/react-search/lib/components/SearchBox/useSearchBoxStyles.styles.js

@@ -0,0 +1,124 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useInputStyles_unstable } from '@fluentui/react-input';
+export const searchBoxClassNames = {
+  root: 'fui-SearchBox',
+  dismiss: 'fui-SearchBox__dismiss',
+  contentAfter: 'fui-SearchBox__contentAfter',
+  contentBefore: 'fui-SearchBox__contentBefore',
+  input: 'fui-SearchBox__input'
+};
+/**
+ * Styles for the root slot
+ */
+const useRootStyles = /*#__PURE__*/__styles({
+  small: {
+    i8kkvl: "fjuset5",
+    B2u0y6b: "f1xzfw5u",
+    uwmqm3: ["fk8j09s", "fdw0yi8"],
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  },
+  medium: {
+    i8kkvl: "fjuset5",
+    B2u0y6b: "f1xzfw5u",
+    uwmqm3: ["f1f5gg8d", "f1vdfbxk"],
+    z189sj: ["f1vdfbxk", "f1f5gg8d"]
+  },
+  large: {
+    i8kkvl: "fjuset5",
+    B2u0y6b: "f1xzfw5u",
+    uwmqm3: ["f1ng84yb", "f11gcy0p"],
+    z189sj: ["f11gcy0p", "f1ng84yb"]
+  },
+  input: {
+    uwmqm3: ["fk8j09s", "fdw0yi8"],
+    z189sj: ["fhxju0i", "f1cnd47f"],
+    Boqhc8c: "f18izjht",
+    B8uat0v: "fcoa6sg"
+  },
+  unfocusedNoContentAfter: {
+    z189sj: ["fhxju0i", "f1cnd47f"]
+  }
+}, {
+  d: [".fjuset5{column-gap:0;}", ".f1xzfw5u{max-width:468px;}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".fhxju0i{padding-right:0;}", ".f1cnd47f{padding-left:0;}", ".f18izjht::-webkit-search-decoration{display:none;}", ".fcoa6sg::-webkit-search-cancel-button{display:none;}"]
+});
+const useInputStyles = /*#__PURE__*/__styles({
+  small: {
+    z189sj: ["fdw0yi8", "fk8j09s"]
+  },
+  medium: {
+    z189sj: ["f1vdfbxk", "f1f5gg8d"]
+  },
+  large: {
+    z189sj: ["f11gcy0p", "f1ng84yb"]
+  }
+}, {
+  d: [".fdw0yi8{padding-right:var(--spacingHorizontalSNudge);}", ".fk8j09s{padding-left:var(--spacingHorizontalSNudge);}", ".f1vdfbxk{padding-right:var(--spacingHorizontalS);}", ".f1f5gg8d{padding-left:var(--spacingHorizontalS);}", ".f11gcy0p{padding-right:var(--spacingHorizontalMNudge);}", ".f1ng84yb{padding-left:var(--spacingHorizontalMNudge);}"]
+});
+const useContentAfterStyles = /*#__PURE__*/__styles({
+  contentAfter: {
+    uwmqm3: ["f1uw59to", "fw5db7e"],
+    i8kkvl: "f1ufnopg"
+  },
+  rest: {
+    Bqenvij: "fniina8",
+    a9b677: "f3tsq5r",
+    uwmqm3: ["f1cnd47f", "fhxju0i"],
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp"
+  }
+}, {
+  d: [".f1uw59to{padding-left:var(--spacingHorizontalM);}", ".fw5db7e{padding-right:var(--spacingHorizontalM);}", ".f1ufnopg{column-gap:var(--spacingHorizontalXS);}", ".fniina8{height:0;}", ".f3tsq5r{width:0;}", ".f1cnd47f{padding-left:0;}", ".fhxju0i{padding-right:0;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }]]
+});
+const useDismissClassName = /*#__PURE__*/__resetStyles("r1pvzcuu", null, [".r1pvzcuu{box-sizing:border-box;color:var(--colorNeutralForeground3);display:flex;cursor:pointer;}", ".r1pvzcuu>svg{font-size:20px;}"]);
+const useDismissStyles = /*#__PURE__*/__styles({
+  disabled: {
+    sj55zd: "f1s2aq7o"
+  },
+  small: {
+    Duoase: "f3qv9w"
+  },
+  medium: {},
+  large: {
+    Duoase: "f16u2scb"
+  }
+}, {
+  d: [".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".f3qv9w>svg{font-size:16px;}", ".f16u2scb>svg{font-size:24px;}"]
+});
+/**
+ * Apply styling to the SearchBox slots based on the state
+ */
+export const useSearchBoxStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    disabled,
+    focused,
+    size
+  } = state;
+  const rootStyles = useRootStyles();
+  const inputStyles = useInputStyles();
+  const contentAfterStyles = useContentAfterStyles();
+  const dismissClassName = useDismissClassName();
+  const dismissStyles = useDismissStyles();
+  state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
+  state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
+  if (state.dismiss) {
+    state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
+  }
+  if (state.contentBefore) {
+    state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
+  }
+  if (state.contentAfter) {
+    state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
+  } else if (state.dismiss) {
+    state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
+  }
+  useInputStyles_unstable(state);
+  return state;
+};

node_modules/@fluentui/react-search/lib/components/SearchBox/useSearchBoxStyles.styles.raw.js

@@ -0,0 +1,125 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useInputStyles_unstable } from '@fluentui/react-input';
+export const searchBoxClassNames = {
+    root: 'fui-SearchBox',
+    dismiss: 'fui-SearchBox__dismiss',
+    contentAfter: 'fui-SearchBox__contentAfter',
+    contentBefore: 'fui-SearchBox__contentBefore',
+    input: 'fui-SearchBox__input'
+};
+/**
+ * Styles for the root slot
+ */ const useRootStyles = makeStyles({
+    small: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: tokens.spacingHorizontalSNudge,
+        paddingRight: tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: tokens.spacingHorizontalS,
+        paddingRight: tokens.spacingHorizontalS
+    },
+    large: {
+        columnGap: 0,
+        maxWidth: '468px',
+        paddingLeft: tokens.spacingHorizontalMNudge,
+        paddingRight: tokens.spacingHorizontalMNudge
+    },
+    input: {
+        paddingLeft: tokens.spacingHorizontalSNudge,
+        paddingRight: 0,
+        // removes the WebKit pseudoelement styling
+        '::-webkit-search-decoration': {
+            display: 'none'
+        },
+        '::-webkit-search-cancel-button': {
+            display: 'none'
+        }
+    },
+    unfocusedNoContentAfter: {
+        paddingRight: 0
+    }
+});
+const useInputStyles = makeStyles({
+    small: {
+        paddingRight: tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        paddingRight: tokens.spacingHorizontalS
+    },
+    large: {
+        paddingRight: tokens.spacingHorizontalMNudge
+    }
+});
+const useContentAfterStyles = makeStyles({
+    contentAfter: {
+        paddingLeft: tokens.spacingHorizontalM,
+        columnGap: tokens.spacingHorizontalXS
+    },
+    rest: {
+        height: 0,
+        width: 0,
+        paddingLeft: 0,
+        overflow: 'hidden'
+    }
+});
+const useDismissClassName = makeResetStyles({
+    boxSizing: 'border-box',
+    color: tokens.colorNeutralForeground3,
+    display: 'flex',
+    // special case styling for icons (most common case) to ensure they're centered vertically
+    // size: medium (default)
+    '> svg': {
+        fontSize: '20px'
+    },
+    cursor: 'pointer'
+});
+const useDismissStyles = makeStyles({
+    disabled: {
+        color: tokens.colorNeutralForegroundDisabled
+    },
+    // Ensure resizable icons show up with the proper font size
+    small: {
+        '> svg': {
+            fontSize: '16px'
+        }
+    },
+    medium: {
+    },
+    large: {
+        '> svg': {
+            fontSize: '24px'
+        }
+    }
+});
+/**
+ * Apply styling to the SearchBox slots based on the state
+ */ export const useSearchBoxStyles_unstable = (state)=>{
+    'use no memo';
+    const { disabled, focused, size } = state;
+    const rootStyles = useRootStyles();
+    const inputStyles = useInputStyles();
+    const contentAfterStyles = useContentAfterStyles();
+    const dismissClassName = useDismissClassName();
+    const dismissStyles = useDismissStyles();
+    state.root.className = mergeClasses(searchBoxClassNames.root, rootStyles[size], !focused && rootStyles.unfocusedNoContentAfter, state.root.className);
+    state.input.className = mergeClasses(searchBoxClassNames.input, rootStyles.input, !focused && inputStyles[size], state.input.className);
+    if (state.dismiss) {
+        state.dismiss.className = mergeClasses(searchBoxClassNames.dismiss, dismissClassName, disabled && dismissStyles.disabled, dismissStyles[size], state.dismiss.className);
+    }
+    if (state.contentBefore) {
+        state.contentBefore.className = mergeClasses(searchBoxClassNames.contentBefore, state.contentBefore.className);
+    }
+    if (state.contentAfter) {
+        state.contentAfter.className = mergeClasses(searchBoxClassNames.contentAfter, contentAfterStyles.contentAfter, !focused && contentAfterStyles.rest, state.contentAfter.className);
+    } else if (state.dismiss) {
+        state.dismiss.className = mergeClasses(state.dismiss.className, contentAfterStyles.contentAfter);
+    }
+    useInputStyles_unstable(state);
+    return state;
+};