feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/Divider.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "Divider", {
+    enumerable: true,
+    get: function() {
+        return Divider;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _renderDivider = require("./renderDivider");
+const _useDivider = require("./useDivider");
+const _useDividerStylesstyles = require("./useDividerStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const Divider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useDivider.useDivider_unstable)(props, ref);
+    (0, _useDividerStylesstyles.useDividerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useDividerStyles_unstable')(state);
+    return (0, _renderDivider.renderDivider_unstable)(state);
+});
+Divider.displayName = 'Divider';

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Divider/Divider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles.styles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A divider visually segments content into groups.\n */\nexport const Divider: ForwardRefComponent<DividerProps> = React.forwardRef((props, ref) => {\n  const state = useDivider_unstable(props, ref);\n\n  useDividerStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useDividerStyles_unstable')(state);\n\n  return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"names":["React","renderDivider_unstable","useDivider_unstable","useDividerStyles_unstable","useCustomStyleHook_unstable","Divider","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;+BACQ,kBAAkB;4BACrB,eAAe;wCACT,4BAA4B;qCAG1B,kCAAkC;AAKvE,MAAMK,UAAAA,WAAAA,GAA6CL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjF,MAAMC,YAAQP,+BAAAA,EAAoBK,OAAOC;QAEzCL,iDAAAA,EAA0BM;QAE1BL,gDAAAA,EAA4B,6BAA6BK;IAEzD,WAAOR,qCAAAA,EAAuBQ;AAChC,GAAG;AAEHJ,QAAQK,WAAW,GAAG"}

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/Divider.types.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/Divider.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Divider/Divider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n  /**\n   * Root of the component that renders as a `<div>` tag.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * Wrapper for content when presented.\n   */\n  wrapper: NonNullable<Slot<'div'>>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n  /**\n   * Determines the alignment of the content within the divider.\n   *\n   * @default 'center'\n   */\n  alignContent?: 'start' | 'center' | 'end';\n\n  /**\n   * A divider can have one of the preset appearances.\n   * When not specified, the divider has its default appearance.\n   *\n   * @default 'default'\n   */\n  appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n  /**\n   * Adds padding to the beginning and end of the divider.\n   *\n   * @default false\n   */\n  inset?: boolean;\n\n  /**\n   * A divider can be horizontal (default) or vertical.\n   *\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type DividerBaseProps = Omit<DividerProps, 'alignContent' | 'appearance' | 'inset'>;\n\nexport type DividerState = ComponentState<DividerSlots> &\n  Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n\nexport type DividerBaseState = Omit<DividerState, 'alignContent' | 'appearance' | 'inset'>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/index.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    Divider: function() {
+        return _Divider.Divider;
+    },
+    dividerClassNames: function() {
+        return _useDividerStylesstyles.dividerClassNames;
+    },
+    renderDivider_unstable: function() {
+        return _renderDivider.renderDivider_unstable;
+    },
+    useDividerBase_unstable: function() {
+        return _useDivider.useDividerBase_unstable;
+    },
+    useDividerStyles_unstable: function() {
+        return _useDividerStylesstyles.useDividerStyles_unstable;
+    },
+    useDivider_unstable: function() {
+        return _useDivider.useDivider_unstable;
+    }
+});
+const _Divider = require("./Divider");
+const _renderDivider = require("./renderDivider");
+const _useDivider = require("./useDivider");
+const _useDividerStylesstyles = require("./useDividerStyles.styles");

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Divider/index.ts"],"sourcesContent":["export { Divider } from './Divider';\nexport type { DividerBaseProps, DividerProps, DividerSlots, DividerBaseState, DividerState } from './Divider.types';\nexport { renderDivider_unstable } from './renderDivider';\nexport { useDivider_unstable, useDividerBase_unstable } from './useDivider';\nexport { dividerClassNames, useDividerStyles_unstable } from './useDividerStyles.styles';\n"],"names":["Divider","renderDivider_unstable","useDivider_unstable","useDividerBase_unstable","dividerClassNames","useDividerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,gBAAO;;;eAIPI,yCAAiB;;;eAFjBH,qCAAsB;;;eACDE,mCAAuB;;;eACzBE,iDAAyB;;;eAD5CH,+BAAmB;;;yBAHJ,YAAY;+BAEG,kBAAkB;4BACI,eAAe;wCACf,4BAA4B"}

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/renderDivider.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderDivider_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderDivider_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderDivider_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {
+        children: state.root.children !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.wrapper, {
+            children: state.root.children
+        })
+    });
+};

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/renderDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Divider/renderDivider.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 { DividerSlots, DividerBaseState } from './Divider.types';\n\n/**\n * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.\n */\nexport const renderDivider_unstable = (state: DividerBaseState): JSXElement => {\n  assertSlots<DividerSlots>(state);\n  return (\n    <state.root>{state.root.children !== undefined && <state.wrapper>{state.root.children}</state.wrapper>}</state.root>\n  );\n};\n"],"names":["assertSlots","renderDivider_unstable","state","root","children","undefined","wrapper"],"mappings":";;;;+BAUaC;;;;;;4BATb,gDAAiD;gCAErB,4BAA4B;AAOjD,+BAA+B,CAACC;QACrCF,2BAAAA,EAA0BE;IAC1B,OAAA,WAAA,OACE,eAAA,EAACA,MAAMC,IAAI,EAAA;kBAAED,MAAMC,IAAI,CAACC,QAAQ,KAAKC,aAAAA,WAAAA,OAAa,eAAA,EAACH,MAAMI,OAAO,EAAA;sBAAEJ,MAAMC,IAAI,CAACC,QAAQ;;;AAEzF,EAAE"}

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/useDivider.js

@@ -0,0 +1,59 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useDividerBase_unstable: function() {
+        return useDividerBase_unstable;
+    },
+    useDivider_unstable: function() {
+        return useDivider_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const useDivider_unstable = (props, ref)=>{
+    const { alignContent = 'center', appearance = 'default', inset = false, ...rest } = props;
+    const state = useDividerBase_unstable(rest, ref);
+    return {
+        alignContent,
+        appearance,
+        inset,
+        ...state
+    };
+};
+const useDividerBase_unstable = (props, ref)=>{
+    const { vertical = false, wrapper, ...rest } = props;
+    const dividerId = (0, _reactutilities.useId)('divider-');
+    return {
+        vertical,
+        components: {
+            root: 'div',
+            wrapper: 'div'
+        },
+        root: _reactutilities.slot.always({
+            role: 'separator',
+            'aria-orientation': vertical ? 'vertical' : 'horizontal',
+            'aria-labelledby': props.children ? dividerId : undefined,
+            ref: ref,
+            ...rest
+        }, {
+            elementType: 'div'
+        }),
+        wrapper: _reactutilities.slot.always(wrapper, {
+            defaultProps: {
+                id: dividerId,
+                children: props.children
+            },
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/useDivider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Divider/useDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, slot } from '@fluentui/react-utilities';\nimport type { DividerBaseProps, DividerBaseState, DividerProps, DividerState } from './Divider.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElement>): DividerState => {\n  const { alignContent = 'center', appearance = 'default', inset = false, ...rest } = props;\n\n  const state = useDividerBase_unstable(rest, ref);\n\n  return {\n    alignContent,\n    appearance,\n    inset,\n    ...state,\n  };\n};\n\n/**\n * Base hook that provides behavior and structure of the Divider component.\n * It doesn't include design-related features.\n *\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDividerBase_unstable = (props: DividerBaseProps, ref?: React.Ref<HTMLElement>): DividerBaseState => {\n  const { vertical = false, wrapper, ...rest } = props;\n  const dividerId = useId('divider-');\n\n  return {\n    vertical,\n    components: {\n      root: 'div',\n      wrapper: 'div',\n    },\n    root: slot.always(\n      {\n        role: 'separator',\n        'aria-orientation': vertical ? 'vertical' : 'horizontal',\n        'aria-labelledby': props.children ? dividerId : undefined,\n        ref: ref as React.Ref<HTMLDivElement>,\n        ...rest,\n      },\n      { elementType: 'div' },\n    ),\n    wrapper: slot.always(wrapper, {\n      defaultProps: {\n        id: dividerId,\n        children: props.children,\n      },\n      elementType: 'div',\n    }),\n  };\n};\n"],"names":["React","useId","slot","useDivider_unstable","props","ref","alignContent","appearance","inset","rest","state","useDividerBase_unstable","vertical","wrapper","dividerId","components","root","always","role","children","undefined","elementType","defaultProps","id"],"mappings":"AAAA;;;;;;;;;;;;2BA+BaW;eAAAA;;uBApBAR;;;;;iEATU,QAAQ;gCACH,4BAA4B;AAQjD,MAAMA,sBAAsB,CAACC,OAAqBC;IACvD,MAAM,EAAEC,eAAe,QAAQ,EAAEC,aAAa,SAAS,EAAEC,QAAQ,KAAK,EAAE,GAAGC,MAAM,GAAGL;IAEpF,MAAMM,QAAQC,wBAAwBF,MAAMJ;IAE5C,OAAO;QACLC;QACAC;QACAC;QACA,GAAGE,KAAK;IACV;AACF,EAAE;AASK,gCAAgC,CAACN,OAAyBC;IAC/D,MAAM,EAAEO,WAAW,KAAK,EAAEC,OAAO,EAAE,GAAGJ,MAAM,GAAGL;IAC/C,MAAMU,gBAAYb,qBAAAA,EAAM;IAExB,OAAO;QACLW;QACAG,YAAY;YACVC,MAAM;YACNH,SAAS;QACX;QACAG,MAAMd,oBAAAA,CAAKe,MAAM,CACf;YACEC,MAAM;YACN,oBAAoBN,WAAW,aAAa;YAC5C,mBAAmBR,MAAMe,QAAQ,GAAGL,YAAYM;YAChDf,KAAKA;YACL,GAAGI,IAAI;QACT,GACA;YAAEY,aAAa;QAAM;QAEvBR,SAASX,oBAAAA,CAAKe,MAAM,CAACJ,SAAS;YAC5BS,cAAc;gBACZC,IAAIT;gBACJK,UAAUf,MAAMe,QAAQ;YAC1B;YACAE,aAAa;QACf;IACF;AACF,EAAE"}

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/useDividerStyles.styles.js

@@ -0,0 +1,402 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dividerClassNames: function() {
+        return dividerClassNames;
+    },
+    useDividerStyles_unstable: function() {
+        return useDividerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const dividerClassNames = {
+    root: 'fui-Divider',
+    wrapper: 'fui-Divider__wrapper'
+};
+const contentSpacing = '12px';
+const insetSpacing = '12px';
+const maxStartEndLength = '8px';
+const minStartEndLength = '8px;';
+const useBaseStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Bt984gj: "f122n59",
+        B7ck84d: "f1ewtqcl",
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1063pyq",
+        Bh6795r: "fqerorx",
+        qhf8xq: "f10pi13n",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        fsow6f: "f17mccla",
+        Bcvre1j: "fyl8oag",
+        Br0sdwz: "f16vkdww",
+        Bn78ew0: "fhsnbul",
+        li1rpt: "f1gw3sf2",
+        ap17g6: "f1ly5f7u",
+        B771hl4: "f1s3tz6t"
+    },
+    childless: {
+        susq4k: "f1kyqvp9",
+        Bicfajf: [
+            "fzynn9s",
+            "f1z0ukd1"
+        ],
+        jwcpgy: [
+            "fekrn8e",
+            "ftdg338"
+        ],
+        B4rk6o: "fesgyo"
+    },
+    start: {
+        Bsft5z2: "f13zj6fq"
+    },
+    center: {
+        Ftih45: "f1wl9k8s",
+        Bsft5z2: "f13zj6fq"
+    },
+    end: {
+        Ftih45: "f1wl9k8s"
+    },
+    brand: {
+        sj55zd: "f16muhyy",
+        Bq4z7u6: "fcbuu2a",
+        Bk5zm6e: [
+            "f1wdw2dr",
+            "f1ttio3w"
+        ],
+        Bqjgrrk: "f1582fpk",
+        Bm6vgfq: [
+            "f1ttio3w",
+            "f1wdw2dr"
+        ],
+        B0n5ga8: "f1ahrvm8",
+        s924m2: [
+            "f1cd3wbc",
+            "f17hbk9y"
+        ],
+        B1q35kw: "fvrapl0",
+        Gp14am: [
+            "f17hbk9y",
+            "f1cd3wbc"
+        ]
+    },
+    "default": {
+        sj55zd: "fkfq4zb",
+        Bq4z7u6: "f1vccso1",
+        Bk5zm6e: [
+            "f1geml7w",
+            "fjml6kk"
+        ],
+        Bqjgrrk: "f1r7kh1m",
+        Bm6vgfq: [
+            "fjml6kk",
+            "f1geml7w"
+        ],
+        B0n5ga8: "f16j7guv",
+        s924m2: [
+            "fx01ahm",
+            "fj1a37q"
+        ],
+        B1q35kw: "fl8d8yv",
+        Gp14am: [
+            "fj1a37q",
+            "fx01ahm"
+        ]
+    },
+    subtle: {
+        sj55zd: "f11d4kpn",
+        Bq4z7u6: "f5g06un",
+        Bk5zm6e: [
+            "f13sxdku",
+            "f1n015lb"
+        ],
+        Bqjgrrk: "f1x6bl8t",
+        Bm6vgfq: [
+            "f1n015lb",
+            "f13sxdku"
+        ],
+        B0n5ga8: "fvod1wy",
+        s924m2: [
+            "fwslg65",
+            "flk0e17"
+        ],
+        B1q35kw: "f103fvts",
+        Gp14am: [
+            "flk0e17",
+            "fwslg65"
+        ]
+    },
+    strong: {
+        sj55zd: "f19n0e5",
+        Bq4z7u6: "f10tv6oz",
+        Bk5zm6e: [
+            "f16xp3sf",
+            "f1seuxxq"
+        ],
+        Bqjgrrk: "fwrmqbx",
+        Bm6vgfq: [
+            "f1seuxxq",
+            "f16xp3sf"
+        ],
+        B0n5ga8: "ft83z1f",
+        s924m2: [
+            "f1g4150c",
+            "f192dr6e"
+        ],
+        B1q35kw: "f1qnawh6",
+        Gp14am: [
+            "f192dr6e",
+            "f1g4150c"
+        ]
+    }
+}, {
+    d: [
+        ".f122n59{align-items:center;}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".f22iagw{display:flex;}",
+        ".f1063pyq{flex-direction:row;}",
+        ".fqerorx{flex-grow:1;}",
+        ".f10pi13n{position:relative;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        ".f17mccla{text-align:center;}",
+        ".fyl8oag::before{box-sizing:border-box;}",
+        ".f16vkdww::before{display:flex;}",
+        ".fhsnbul::before{flex-grow:1;}",
+        ".f1gw3sf2::after{box-sizing:border-box;}",
+        ".f1ly5f7u::after{display:flex;}",
+        ".f1s3tz6t::after{flex-grow:1;}",
+        ".f1kyqvp9::before{margin-bottom:0;}",
+        ".fzynn9s::before{margin-right:0;}",
+        ".f1z0ukd1::before{margin-left:0;}",
+        ".fekrn8e::after{margin-left:0;}",
+        ".ftdg338::after{margin-right:0;}",
+        ".fesgyo::after{margin-top:0;}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".f1wl9k8s::before{content:\"\";}",
+        ".f16muhyy{color:var(--colorBrandForeground1);}",
+        ".fcbuu2a::before{border-top-color:var(--colorBrandStroke1);}",
+        ".f1wdw2dr::before{border-right-color:var(--colorBrandStroke1);}",
+        ".f1ttio3w::before{border-left-color:var(--colorBrandStroke1);}",
+        ".f1582fpk::before{border-bottom-color:var(--colorBrandStroke1);}",
+        ".f1ahrvm8::after{border-top-color:var(--colorBrandStroke1);}",
+        ".f1cd3wbc::after{border-right-color:var(--colorBrandStroke1);}",
+        ".f17hbk9y::after{border-left-color:var(--colorBrandStroke1);}",
+        ".fvrapl0::after{border-bottom-color:var(--colorBrandStroke1);}",
+        ".fkfq4zb{color:var(--colorNeutralForeground2);}",
+        ".f1vccso1::before{border-top-color:var(--colorNeutralStroke2);}",
+        ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}",
+        ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}",
+        ".f1r7kh1m::before{border-bottom-color:var(--colorNeutralStroke2);}",
+        ".f16j7guv::after{border-top-color:var(--colorNeutralStroke2);}",
+        ".fx01ahm::after{border-right-color:var(--colorNeutralStroke2);}",
+        ".fj1a37q::after{border-left-color:var(--colorNeutralStroke2);}",
+        ".fl8d8yv::after{border-bottom-color:var(--colorNeutralStroke2);}",
+        ".f11d4kpn{color:var(--colorNeutralForeground3);}",
+        ".f5g06un::before{border-top-color:var(--colorNeutralStroke3);}",
+        ".f13sxdku::before{border-right-color:var(--colorNeutralStroke3);}",
+        ".f1n015lb::before{border-left-color:var(--colorNeutralStroke3);}",
+        ".f1x6bl8t::before{border-bottom-color:var(--colorNeutralStroke3);}",
+        ".fvod1wy::after{border-top-color:var(--colorNeutralStroke3);}",
+        ".fwslg65::after{border-right-color:var(--colorNeutralStroke3);}",
+        ".flk0e17::after{border-left-color:var(--colorNeutralStroke3);}",
+        ".f103fvts::after{border-bottom-color:var(--colorNeutralStroke3);}",
+        ".f19n0e5{color:var(--colorNeutralForeground1);}",
+        ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}",
+        ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}",
+        ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}",
+        ".fwrmqbx::before{border-bottom-color:var(--colorNeutralStroke1);}",
+        ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}",
+        ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}",
+        ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}",
+        ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}"
+    ]
+});
+const useHorizontalStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        a9b677: "fly5x3f",
+        Bdkvgpv: "f163fonl",
+        B0qfbqy: "f51yk4v",
+        pbipgd: "f13rof3u",
+        Bm2nyyq: "f8rth92",
+        xrcqlc: "f6czdpx",
+        i5u598: "f1iyka9k"
+    },
+    inset: {
+        uwmqm3: [
+            "fjlbh76",
+            "f11qrl6u"
+        ],
+        z189sj: [
+            "f11qrl6u",
+            "fjlbh76"
+        ]
+    },
+    start: {
+        fsow6f: [
+            "f1o700av",
+            "fes3tcz"
+        ],
+        Ftih45: "f1wl9k8s",
+        Bicfajf: [
+            "f1ojjlep",
+            "fk1kexq"
+        ],
+        Bxwl2t9: "f1he2m4d",
+        jwcpgy: [
+            "f12w1bnb",
+            "f1558wlj"
+        ]
+    },
+    center: {
+        fsow6f: "f17mccla",
+        Bicfajf: [
+            "f1ojjlep",
+            "fk1kexq"
+        ],
+        jwcpgy: [
+            "f12w1bnb",
+            "f1558wlj"
+        ]
+    },
+    end: {
+        fsow6f: [
+            "fes3tcz",
+            "f1o700av"
+        ],
+        Bicfajf: [
+            "f1ojjlep",
+            "fk1kexq"
+        ],
+        Bsft5z2: "f13zj6fq",
+        jwcpgy: [
+            "f12w1bnb",
+            "f1558wlj"
+        ],
+        Iy66sp: "f1ayce8x"
+    }
+}, {
+    d: [
+        ".fly5x3f{width:100%;}",
+        ".f163fonl::before{border-top-style:solid;}",
+        ".f51yk4v::before{border-top-width:var(--strokeWidthThin);}",
+        ".f13rof3u::before{min-width:8px;}",
+        ".f8rth92::after{border-top-style:solid;}",
+        ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}",
+        ".f1iyka9k::after{min-width:8px;}",
+        ".fjlbh76{padding-left:12px;}",
+        ".f11qrl6u{padding-right:12px;}",
+        ".f1o700av{text-align:left;}",
+        ".fes3tcz{text-align:right;}",
+        ".f1wl9k8s::before{content:\"\";}",
+        ".f1ojjlep::before{margin-right:12px;}",
+        ".fk1kexq::before{margin-left:12px;}",
+        ".f1he2m4d::before{max-width:8px;}",
+        ".f12w1bnb::after{margin-left:12px;}",
+        ".f1558wlj::after{margin-right:12px;}",
+        ".f17mccla{text-align:center;}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".f1ayce8x::after{max-width:8px;}"
+    ]
+});
+const useVerticalStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Beiy3e4: "f1vx9l62",
+        sshi5w: "f16gbxbe",
+        m598lv: [
+            "f1yq6w5o",
+            "f1jpmc5p"
+        ],
+        B4f6apu: [
+            "f9sc749",
+            "f1x8pvcy"
+        ],
+        zkzzav: "fhkwbjy",
+        Barhvk9: [
+            "flthirb",
+            "ftkbnf5"
+        ],
+        Ihftqj: [
+            "f13hvwk3",
+            "f1en4csx"
+        ],
+        Bde111x: "f19onpk6"
+    },
+    inset: {
+        B6of3ja: "f1xdg43u",
+        jrapky: "f1jlhsmd"
+    },
+    withChildren: {
+        sshi5w: "f1tjaq3g"
+    },
+    start: {
+        Ftih45: "f1wl9k8s",
+        susq4k: "fg2pwug",
+        Bbdr6tz: "fkjtzyi",
+        B4rk6o: "f8vk40g"
+    },
+    center: {
+        susq4k: "fg2pwug",
+        B4rk6o: "f8vk40g"
+    },
+    end: {
+        susq4k: "fg2pwug",
+        Bsft5z2: "f13zj6fq",
+        B4rk6o: "f8vk40g",
+        gn64ia: "fqg5mu5"
+    }
+}, {
+    d: [
+        ".f1vx9l62{flex-direction:column;}",
+        ".f16gbxbe{min-height:20px;}",
+        ".f1yq6w5o::before{border-right-style:solid;}",
+        ".f1jpmc5p::before{border-left-style:solid;}",
+        ".f9sc749::before{border-right-width:var(--strokeWidthThin);}",
+        ".f1x8pvcy::before{border-left-width:var(--strokeWidthThin);}",
+        ".fhkwbjy::before{min-height:8px;}",
+        ".flthirb::after{border-right-style:solid;}",
+        ".ftkbnf5::after{border-left-style:solid;}",
+        ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}",
+        ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}",
+        ".f19onpk6::after{min-height:8px;}",
+        ".f1xdg43u{margin-top:12px;}",
+        ".f1jlhsmd{margin-bottom:12px;}",
+        ".f1tjaq3g{min-height:84px;}",
+        ".f1wl9k8s::before{content:\"\";}",
+        ".fg2pwug::before{margin-bottom:12px;}",
+        ".fkjtzyi::before{max-height:8px;}",
+        ".f8vk40g::after{margin-top:12px;}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".fqg5mu5::after{max-height:8px;}"
+    ]
+});
+const useDividerStyles_unstable = (state)=>{
+    'use no memo';
+    const baseStyles = useBaseStyles();
+    const horizontalStyles = useHorizontalStyles();
+    const verticalStyles = useVerticalStyles();
+    const { alignContent, appearance, inset, vertical } = state;
+    state.root.className = (0, _react.mergeClasses)(dividerClassNames.root, // Base styles
+    baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles
+    !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles
+    vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles
+    state.root.children === undefined && baseStyles.childless, // User provided class name
+    state.root.className);
+    if (state.wrapper) {
+        state.wrapper.className = (0, _react.mergeClasses)(dividerClassNames.wrapper, state.wrapper.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-divider/lib-commonjs/components/Divider/useDividerStyles.styles.raw.js

@@ -0,0 +1,242 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    dividerClassNames: function() {
+        return dividerClassNames;
+    },
+    useDividerStyles_unstable: function() {
+        return useDividerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const dividerClassNames = {
+    root: 'fui-Divider',
+    wrapper: 'fui-Divider__wrapper'
+};
+const contentSpacing = '12px';
+const insetSpacing = '12px';
+const maxStartEndLength = '8px';
+const minStartEndLength = '8px;';
+const useBaseStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        alignItems: 'center',
+        boxSizing: 'border-box',
+        display: 'flex',
+        flexDirection: 'row',
+        flexGrow: 1,
+        position: 'relative',
+        fontFamily: _reacttheme.tokens.fontFamilyBase,
+        fontSize: _reacttheme.tokens.fontSizeBase200,
+        fontWeight: _reacttheme.tokens.fontWeightRegular,
+        lineHeight: _reacttheme.tokens.lineHeightBase200,
+        textAlign: 'center',
+        '::before': {
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexGrow: 1
+        },
+        '::after': {
+            boxSizing: 'border-box',
+            display: 'flex',
+            flexGrow: 1
+        }
+    },
+    // Childless styles
+    childless: {
+        '::before': {
+            marginBottom: 0,
+            marginRight: 0
+        },
+        '::after': {
+            marginLeft: 0,
+            marginTop: 0
+        }
+    },
+    // Alignment variations
+    start: {
+        '::after': {
+            content: '""'
+        }
+    },
+    center: {
+        '::before': {
+            content: '""'
+        },
+        '::after': {
+            content: '""'
+        }
+    },
+    end: {
+        '::before': {
+            content: '""'
+        }
+    },
+    // Appearance variations
+    brand: {
+        color: _reacttheme.tokens.colorBrandForeground1,
+        '::before': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke1)
+        },
+        '::after': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorBrandStroke1)
+        }
+    },
+    default: {
+        color: _reacttheme.tokens.colorNeutralForeground2,
+        '::before': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+        },
+        '::after': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke2)
+        }
+    },
+    subtle: {
+        color: _reacttheme.tokens.colorNeutralForeground3,
+        '::before': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke3)
+        },
+        '::after': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke3)
+        }
+    },
+    strong: {
+        color: _reacttheme.tokens.colorNeutralForeground1,
+        '::before': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
+        },
+        '::after': {
+            ..._react.shorthands.borderColor(_reacttheme.tokens.colorNeutralStroke1)
+        }
+    }
+});
+const useHorizontalStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        width: '100%',
+        '::before': {
+            borderTopStyle: 'solid',
+            borderTopWidth: _reacttheme.tokens.strokeWidthThin,
+            minWidth: minStartEndLength
+        },
+        '::after': {
+            borderTopStyle: 'solid',
+            borderTopWidth: _reacttheme.tokens.strokeWidthThin,
+            minWidth: minStartEndLength
+        }
+    },
+    // Inset styles
+    inset: {
+        paddingLeft: insetSpacing,
+        paddingRight: insetSpacing
+    },
+    // Alignment variations
+    start: {
+        textAlign: 'left',
+        '::before': {
+            content: '""',
+            marginRight: contentSpacing,
+            maxWidth: maxStartEndLength
+        },
+        '::after': {
+            marginLeft: contentSpacing
+        }
+    },
+    center: {
+        textAlign: 'center',
+        '::before': {
+            marginRight: contentSpacing
+        },
+        '::after': {
+            marginLeft: contentSpacing
+        }
+    },
+    end: {
+        textAlign: 'right',
+        '::before': {
+            marginRight: contentSpacing
+        },
+        '::after': {
+            content: '""',
+            marginLeft: contentSpacing,
+            maxWidth: maxStartEndLength
+        }
+    }
+});
+const useVerticalStyles = (0, _react.makeStyles)({
+    // Base styles
+    base: {
+        flexDirection: 'column',
+        minHeight: '20px',
+        '::before': {
+            borderRightStyle: 'solid',
+            borderRightWidth: _reacttheme.tokens.strokeWidthThin,
+            minHeight: minStartEndLength
+        },
+        '::after': {
+            borderRightStyle: 'solid',
+            borderRightWidth: _reacttheme.tokens.strokeWidthThin,
+            minHeight: minStartEndLength
+        }
+    },
+    // Inset styles
+    inset: {
+        marginTop: insetSpacing,
+        marginBottom: insetSpacing
+    },
+    // With children styles
+    withChildren: {
+        minHeight: '84px'
+    },
+    // Alignment variations
+    start: {
+        '::before': {
+            content: '""',
+            marginBottom: contentSpacing,
+            maxHeight: maxStartEndLength
+        },
+        '::after': {
+            marginTop: contentSpacing
+        }
+    },
+    center: {
+        '::before': {
+            marginBottom: contentSpacing
+        },
+        '::after': {
+            marginTop: contentSpacing
+        }
+    },
+    end: {
+        '::before': {
+            marginBottom: contentSpacing
+        },
+        '::after': {
+            content: '""',
+            marginTop: contentSpacing,
+            maxHeight: maxStartEndLength
+        }
+    }
+});
+const useDividerStyles_unstable = (state)=>{
+    'use no memo';
+    const baseStyles = useBaseStyles();
+    const horizontalStyles = useHorizontalStyles();
+    const verticalStyles = useVerticalStyles();
+    const { alignContent, appearance, inset, vertical } = state;
+    state.root.className = (0, _react.mergeClasses)(dividerClassNames.root, baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, state.root.children === undefined && baseStyles.childless, state.root.className);
+    if (state.wrapper) {
+        state.wrapper.className = (0, _react.mergeClasses)(dividerClassNames.wrapper, state.wrapper.className);
+    }
+    return state;
+};