feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/BreadcrumbButton.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "BreadcrumbButton", {
+    enumerable: true,
+    get: function() {
+        return BreadcrumbButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useBreadcrumbButton = require("./useBreadcrumbButton");
+const _renderBreadcrumbButton = require("./renderBreadcrumbButton");
+const _useBreadcrumbButtonStylesstyles = require("./useBreadcrumbButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const BreadcrumbButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useBreadcrumbButton.useBreadcrumbButton_unstable)(props, ref);
+    (0, _useBreadcrumbButtonStylesstyles.useBreadcrumbButtonStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useBreadcrumbButtonStyles_unstable')(state);
+    return (0, _renderBreadcrumbButton.renderBreadcrumbButton_unstable)(state);
+});
+BreadcrumbButton.displayName = 'BreadcrumbButton';

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/BreadcrumbButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbButton/BreadcrumbButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useBreadcrumbButton_unstable } from './useBreadcrumbButton';\nimport { renderBreadcrumbButton_unstable } from './renderBreadcrumbButton';\nimport { useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { BreadcrumbButtonProps } from './BreadcrumbButton.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * A button component which is used inside the Breadcrumb.\n */\nexport const BreadcrumbButton: ForwardRefComponent<BreadcrumbButtonProps> = React.forwardRef((props, ref) => {\n  const state = useBreadcrumbButton_unstable(props, ref);\n\n  useBreadcrumbButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useBreadcrumbButtonStyles_unstable')(state);\n\n  return renderBreadcrumbButton_unstable(state);\n});\n\nBreadcrumbButton.displayName = 'BreadcrumbButton';\n"],"names":["React","useBreadcrumbButton_unstable","renderBreadcrumbButton_unstable","useBreadcrumbButtonStyles_unstable","useCustomStyleHook_unstable","BreadcrumbButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;qCACc,wBAAwB;wCACrB,2BAA2B;iDACxB,qCAAqC;qCAC5C,kCAAkC;AAOvE,MAAMK,mBAAAA,WAAAA,GAA+DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,YAAQR,iDAAAA,EAA6BM,OAAOC;QAElDL,mEAAAA,EAAmCM;QACnCL,gDAAAA,EAA4B,sCAAsCK;IAElE,WAAOP,uDAAAA,EAAgCO;AACzC,GAAG;AAEHJ,iBAAiBK,WAAW,GAAG"}

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/BreadcrumbButton.types.js

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

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/BreadcrumbButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbButton/BreadcrumbButton.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState } from '@fluentui/react-utilities';\nimport { ButtonProps, ButtonSlots, ButtonState } from '@fluentui/react-button';\nimport { BreadcrumbProps } from '../Breadcrumb/Breadcrumb.types';\n\nexport type BreadcrumbButtonSlots = ButtonSlots;\n\n/**\n * BreadcrumbButton Props\n */\nexport type BreadcrumbButtonProps = ComponentProps<BreadcrumbButtonSlots> &\n  Pick<BreadcrumbProps, 'size'> &\n  Pick<ButtonProps, 'disabled' | 'disabledFocusable'> & {\n    /**\n     * Defines current sate of BreadcrumbButton.\n     *\n     * @default false\n     */\n    current?: boolean;\n  };\n\n/**\n * State used in rendering BreadcrumbButton\n */\nexport type BreadcrumbButtonState = ComponentState<BreadcrumbButtonSlots> &\n  Omit<ButtonState, keyof ButtonSlots | 'components'> &\n  Required<Pick<BreadcrumbButtonProps, 'current' | 'size'>>;\n\nexport type BreadcrumbButtonBaseProps = Omit<BreadcrumbButtonProps, 'size'>;\n\nexport type BreadcrumbButtonBaseState = Omit<BreadcrumbButtonState, 'size'>;\n"],"names":[],"mappings":""}

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/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, {
+    BreadcrumbButton: function() {
+        return _BreadcrumbButton.BreadcrumbButton;
+    },
+    breadcrumbButtonClassNames: function() {
+        return _useBreadcrumbButtonStylesstyles.breadcrumbButtonClassNames;
+    },
+    renderBreadcrumbButton_unstable: function() {
+        return _renderBreadcrumbButton.renderBreadcrumbButton_unstable;
+    },
+    useBreadcrumbButtonBase_unstable: function() {
+        return _useBreadcrumbButton.useBreadcrumbButtonBase_unstable;
+    },
+    useBreadcrumbButtonStyles_unstable: function() {
+        return _useBreadcrumbButtonStylesstyles.useBreadcrumbButtonStyles_unstable;
+    },
+    useBreadcrumbButton_unstable: function() {
+        return _useBreadcrumbButton.useBreadcrumbButton_unstable;
+    }
+});
+const _BreadcrumbButton = require("./BreadcrumbButton");
+const _renderBreadcrumbButton = require("./renderBreadcrumbButton");
+const _useBreadcrumbButton = require("./useBreadcrumbButton");
+const _useBreadcrumbButtonStylesstyles = require("./useBreadcrumbButtonStyles.styles");

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbButton/index.ts"],"sourcesContent":["export { BreadcrumbButton } from './BreadcrumbButton';\nexport type {\n  BreadcrumbButtonBaseProps,\n  BreadcrumbButtonBaseState,\n  BreadcrumbButtonProps,\n  BreadcrumbButtonSlots,\n  BreadcrumbButtonState,\n} from './BreadcrumbButton.types';\nexport { renderBreadcrumbButton_unstable } from './renderBreadcrumbButton';\nexport { useBreadcrumbButton_unstable, useBreadcrumbButtonBase_unstable } from './useBreadcrumbButton';\nexport { breadcrumbButtonClassNames, useBreadcrumbButtonStyles_unstable } from './useBreadcrumbButtonStyles.styles';\n"],"names":["BreadcrumbButton","renderBreadcrumbButton_unstable","useBreadcrumbButton_unstable","useBreadcrumbButtonBase_unstable","breadcrumbButtonClassNames","useBreadcrumbButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,kCAAgB;;;eAUhBI,2DAA0B;;;eAF1BH,uDAA+B;;;eACDE,qDAAgC;;;eAClCE,mEAAkC;;;eAD9DH,iDAA4B;;;kCATJ,qBAAqB;wCAQN,2BAA2B;qCACI,wBAAwB;iDACxB,qCAAqC"}

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/renderBreadcrumbButton.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderBreadcrumbButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderBreadcrumbButton_unstable;
+    }
+});
+const _reactbutton = require("@fluentui/react-button");
+const renderBreadcrumbButton_unstable = (state)=>{
+    return (0, _reactbutton.renderButton_unstable)(state);
+};

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/renderBreadcrumbButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbButton/renderBreadcrumbButton.tsx"],"sourcesContent":["import type { BreadcrumbButtonState } from './BreadcrumbButton.types';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { renderButton_unstable } from '@fluentui/react-button';\n\n/**\n * Render the final JSX of BreadcrumbButton\n */\nexport const renderBreadcrumbButton_unstable = (state: BreadcrumbButtonState): JSXElement => {\n  return renderButton_unstable(state);\n};\n"],"names":["renderButton_unstable","renderBreadcrumbButton_unstable","state"],"mappings":";;;;;;;;;;6BAGsC,yBAAyB;AAKxD,MAAMC,kCAAkC,CAACC;IAC9C,WAAOF,kCAAAA,EAAsBE;AAC/B,EAAE"}

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/useBreadcrumbButton.js

@@ -0,0 +1,49 @@
+'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, {
+    useBreadcrumbButtonBase_unstable: function() {
+        return useBreadcrumbButtonBase_unstable;
+    },
+    useBreadcrumbButton_unstable: function() {
+        return useBreadcrumbButton_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactbutton = require("@fluentui/react-button");
+const _BreadcrumbContext = require("../Breadcrumb/BreadcrumbContext");
+const useBreadcrumbButton_unstable = (props, ref)=>{
+    const { size } = (0, _BreadcrumbContext.useBreadcrumbContext_unstable)();
+    const state = useBreadcrumbButtonBase_unstable(props, ref);
+    return {
+        ...state,
+        size
+    };
+};
+const useBreadcrumbButtonBase_unstable = (props, ref)=>{
+    const { current = false, as, ...rest } = props;
+    const controlType = (as !== null && as !== void 0 ? as : props.href) ? 'a' : 'button';
+    var _props_ariacurrent, _props_ariadisabled;
+    const { size: _size, ...buttonState } = (0, _reactbutton.useButton_unstable)({
+        role: undefined,
+        type: undefined,
+        as: controlType,
+        iconPosition: 'before',
+        'aria-current': current ? (_props_ariacurrent = props['aria-current']) !== null && _props_ariacurrent !== void 0 ? _props_ariacurrent : 'page' : undefined,
+        'aria-disabled': current ? (_props_ariadisabled = props['aria-disabled']) !== null && _props_ariadisabled !== void 0 ? _props_ariadisabled : true : undefined,
+        ...rest
+    }, ref);
+    return {
+        ...buttonState,
+        current
+    };
+};

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/useBreadcrumbButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/BreadcrumbButton/useBreadcrumbButton.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ARIAButtonProps } from '@fluentui/react-aria';\nimport { useButton_unstable } from '@fluentui/react-button';\nimport type { ButtonProps } from '@fluentui/react-button';\nimport { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';\nimport type {\n  BreadcrumbButtonBaseProps,\n  BreadcrumbButtonBaseState,\n  BreadcrumbButtonProps,\n  BreadcrumbButtonState,\n} from './BreadcrumbButton.types';\n\n/**\n * Create the state required to render BreadcrumbButton.\n *\n * The returned state can be modified with hooks such as useBreadcrumbButtonStyles_unstable,\n * before being passed to renderBreadcrumbButton_unstable.\n *\n * @param props - props from this instance of BreadcrumbButton\n * @param ref - reference to root HTMLElement of BreadcrumbButton\n */\nexport const useBreadcrumbButton_unstable = (\n  props: BreadcrumbButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): BreadcrumbButtonState => {\n  const { size } = useBreadcrumbContext_unstable();\n  const state = useBreadcrumbButtonBase_unstable(props, ref);\n\n  return {\n    ...state,\n    size,\n  };\n};\n\n/**\n * Base hook for BreadcrumbButton component, which manages state related to button behavior,\n * ARIA attributes (aria-current, aria-disabled), and slot structure without design props.\n *\n * @param props - props from this instance of BreadcrumbButton\n * @param ref - reference to root HTMLElement of BreadcrumbButton\n */\nexport const useBreadcrumbButtonBase_unstable = (\n  props: BreadcrumbButtonBaseProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): BreadcrumbButtonBaseState => {\n  const { current = false, as, ...rest } = props;\n\n  const controlType = as ?? (props as ARIAButtonProps<'a'>).href ? 'a' : 'button';\n\n  const { size: _size, ...buttonState } = useButton_unstable(\n    {\n      role: undefined,\n      type: undefined,\n      as: controlType,\n      iconPosition: 'before',\n      'aria-current': current ? props['aria-current'] ?? 'page' : undefined,\n      'aria-disabled': current ? props['aria-disabled'] ?? true : undefined,\n      ...rest,\n    } as ButtonProps,\n    ref,\n  );\n\n  return {\n    ...buttonState,\n    current,\n  };\n};\n"],"names":["React","useButton_unstable","useBreadcrumbContext_unstable","useBreadcrumbButton_unstable","props","ref","size","state","useBreadcrumbButtonBase_unstable","current","as","rest","controlType","href","_size","buttonState","role","undefined","type","iconPosition"],"mappings":"AAAA;;;;;;;;;;;;IA2CaQ,gCAAAA;;;gCApBAL;;;;;iEArBU,QAAQ;6BAEI,yBAAyB;mCAEd,kCAAkC;AAiBzE,MAAMA,+BAA+B,CAC1CC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,OAAGJ,gDAAAA;IACjB,MAAMK,QAAQC,iCAAiCJ,OAAOC;IAEtD,OAAO;QACL,GAAGE,KAAK;QACRD;IACF;AACF,EAAE;AASK,yCAAyC,CAC9CF,OACAC;IAEA,MAAM,EAAEI,UAAU,KAAK,EAAEC,EAAE,EAAE,GAAGC,MAAM,GAAGP;IAEzC,MAAMQ,cAAcF,CAAAA,OAAAA,QAAAA,OAAAA,KAAAA,IAAAA,KAAON,MAA+BS,IAAAA,AAAG,IAAI,MAAM;QAQzCT,oBACCA;IAP/B,MAAM,EAAEE,MAAMQ,KAAK,EAAE,GAAGC,aAAa,OAAGd,+BAAAA,EACtC;QACEe,MAAMC;QACNC,MAAMD;QACNP,IAAIE;QACJO,cAAc;QACd,gBAAgBV,UAAUL,CAAAA,qBAAAA,KAAK,CAAC,eAAA,AAAe,MAAA,QAArBA,uBAAAA,KAAAA,IAAAA,qBAAyB,SAASa;QAC5D,iBAAiBR,UAAUL,CAAAA,sBAAAA,KAAK,CAAC,gBAAA,AAAgB,MAAA,QAAtBA,wBAAAA,KAAAA,IAAAA,sBAA0B,OAAOa;QAC5D,GAAGN,IAAI;IACT,GACAN;IAGF,OAAO;QACL,GAAGU,WAAW;QACdN;IACF;AACF,EAAE"}

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.js

@@ -0,0 +1,240 @@
+'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, {
+    breadcrumbButtonClassNames: function() {
+        return breadcrumbButtonClassNames;
+    },
+    useBreadcrumbButtonStyles_unstable: function() {
+        return useBreadcrumbButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacticons = require("@fluentui/react-icons");
+const breadcrumbButtonClassNames = {
+    root: 'fui-BreadcrumbButton',
+    icon: 'fui-BreadcrumbButton__icon'
+};
+/**
+ * CSS variable names used internally for styling in the Breadcrumb.
+ */ const breadcrumbCSSVars = {
+    breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size',
+    breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height'
+};
+const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
+    base: {
+        Be2twd7: "fsj74e5",
+        Bqenvij: "f1qfv4wv",
+        Bg96gwp: "f15xapk4",
+        a9b677: "f17j33op",
+        t21cq0: [
+            "fm0x6gh",
+            "fbyavb5"
+        ]
+    },
+    small: {
+        u3h8gg: "f1qfi7kw",
+        Biu6dll: "f1876atl"
+    },
+    medium: {
+        u3h8gg: "f1h9446d",
+        Biu6dll: "f10xfswh"
+    },
+    large: {
+        u3h8gg: "f5hcofs",
+        Biu6dll: "f1a6v6zl"
+    }
+}, {
+    d: [
+        ".fsj74e5{font-size:var(--fui-Breadcrumb--icon-size);}",
+        ".f1qfv4wv{height:var(--fui-Breadcrumb--icon-size);}",
+        ".f15xapk4{line-height:var(--fui-Breadcrumb--icon-line-height);}",
+        ".f17j33op{width:var(--fui-Breadcrumb--icon-size);}",
+        ".fm0x6gh{margin-right:var(--spacingHorizontalXS);}",
+        ".fbyavb5{margin-left:var(--spacingHorizontalXS);}",
+        ".f1qfi7kw{--fui-Breadcrumb--icon-size:12px;}",
+        ".f1876atl{--fui-Breadcrumb--icon-line-height:var(--lineHeightBase200);}",
+        ".f1h9446d{--fui-Breadcrumb--icon-size:16px;}",
+        ".f10xfswh{--fui-Breadcrumb--icon-line-height:var(--lineHeightBase400);}",
+        ".f5hcofs{--fui-Breadcrumb--icon-size:20px;}",
+        ".f1a6v6zl{--fui-Breadcrumb--icon-line-height:var(--lineHeightBase600);}"
+    ]
+});
+const defaultButtonStyles = {
+    backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    cursor: 'auto'
+};
+const currentIconStyles = {
+    ...defaultButtonStyles,
+    [`& .${_reactbutton.buttonClassNames.icon}`]: {
+        color: 'unset'
+    },
+    [`& .${_reacticons.iconFilledClassName}`]: {
+        display: 'none'
+    },
+    [`& .${_reacticons.iconRegularClassName}`]: {
+        display: 'inline'
+    }
+};
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bf4jedk: "f18p0k4z",
+        j4b8c3: "fv6wr3j"
+    },
+    small: {
+        Bqenvij: "frvgh55",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "fwrc4pm",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1r1wyb6"
+    },
+    medium: {
+        Bqenvij: "f1d2rq10",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "f1i3iumi",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1r1wyb6"
+    },
+    large: {
+        Bqenvij: "fbhnoac",
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "figsok6",
+        Bg96gwp: "faaz57k",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1bnz8pu"
+    },
+    current: {
+        Jwef8y: "f9ql6rf",
+        Bi91k9c: "f3p8bqa",
+        eoavqd: "f14w7a5u",
+        Bbdnnc7: "f1irjp3o",
+        Bk3fhr4: "f19vpps7",
+        Bmfj8id: "fv5swzo",
+        iro3zm: "f3h1zc4",
+        B2d53fq: "f1xkgyln",
+        c3iz72: "f17wbbfx",
+        x3br3k: "fofxw0a",
+        em6i61: "f1ol4fw6",
+        vm6p8p: "f1q1lw4e",
+        Bszkowt: "ff24m",
+        Dyrjrp: "ft5r8e9",
+        ezr58z: "f1cbpfqp",
+        nhk3du: "f1motppv",
+        Bfrek18: "fi9vkhg",
+        G209fr: "f1fg3nnv"
+    },
+    currentSmall: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fy9rknc",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "fwrc4pm"
+    },
+    currentMedium: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fkhj508",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "f1i3iumi"
+    },
+    currentLarge: {
+        Bahqtrf: "fk6fouc",
+        Be2twd7: "fod5ikn",
+        Bhrd7zp: "fl43uef",
+        Bg96gwp: "faaz57k"
+    }
+}, {
+    d: [
+        ".f18p0k4z{min-width:unset;}",
+        ".fv6wr3j{text-wrap:nowrap;}",
+        ".frvgh55{height:24px;}",
+        ".fk6fouc{font-family:var(--fontFamilyBase);}",
+        ".fy9rknc{font-size:var(--fontSizeBase200);}",
+        ".figsok6{font-weight:var(--fontWeightRegular);}",
+        ".fwrc4pm{line-height:var(--lineHeightBase200);}",
+        [
+            ".f1r1wyb6{padding:var(--spacingHorizontalSNudge);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1d2rq10{height:32px;}",
+        ".fkhj508{font-size:var(--fontSizeBase300);}",
+        ".f1i3iumi{line-height:var(--lineHeightBase300);}",
+        [
+            ".f1r1wyb6{padding:var(--spacingHorizontalSNudge);}",
+            {
+                p: -1
+            }
+        ],
+        ".fbhnoac{height:40px;}",
+        ".fod5ikn{font-size:var(--fontSizeBase400);}",
+        ".faaz57k{line-height:var(--lineHeightBase400);}",
+        [
+            ".f1bnz8pu{padding:var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".ff24m:disabled{background-color:var(--colorTransparentBackground);}",
+        ".ft5r8e9:disabled{color:var(--colorNeutralForeground2);}",
+        ".f1cbpfqp:disabled{cursor:auto;}",
+        ".f1motppv:disabled .fui-Button__icon{color:unset;}",
+        ".fi9vkhg:disabled .fui-Icon-filled{display:none;}",
+        ".f1fg3nnv:disabled .fui-Icon-regular{display:inline;}",
+        ".fl43uef{font-weight:var(--fontWeightSemibold);}"
+    ],
+    h: [
+        ".f9ql6rf:hover{background-color:var(--colorTransparentBackground);}",
+        ".f3p8bqa:hover{color:var(--colorNeutralForeground2);}",
+        ".f14w7a5u:hover{cursor:auto;}",
+        ".f1irjp3o:hover .fui-Button__icon{color:unset;}",
+        ".f19vpps7:hover .fui-Icon-filled{display:none;}",
+        ".fv5swzo:hover .fui-Icon-regular{display:inline;}",
+        ".f3h1zc4:hover:active{background-color:var(--colorTransparentBackground);}",
+        ".f1xkgyln:hover:active{color:var(--colorNeutralForeground2);}",
+        ".f17wbbfx:hover:active{cursor:auto;}",
+        ".fofxw0a:hover:active .fui-Button__icon{color:unset;}",
+        ".f1ol4fw6:hover:active .fui-Icon-filled{display:none;}",
+        ".f1q1lw4e:hover:active .fui-Icon-regular{display:inline;}"
+    ]
+});
+const useBreadcrumbButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const iconStyles = useIconStyles();
+    const currentSizeMap = {
+        small: styles.currentSmall,
+        medium: styles.currentMedium,
+        large: styles.currentLarge
+    };
+    state.root.className = (0, _react.mergeClasses)(breadcrumbButtonClassNames.root, styles[state.size], styles.root, state.current && currentSizeMap[state.size], state.current && styles.current, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(iconStyles.base, iconStyles[state.size], state.icon.className);
+    }
+    (0, _reactbutton.useButtonStyles_unstable)(state);
+    return state;
+};

node_modules/@fluentui/react-breadcrumb/lib-commonjs/components/BreadcrumbButton/useBreadcrumbButtonStyles.styles.raw.js

@@ -0,0 +1,128 @@
+'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, {
+    breadcrumbButtonClassNames: function() {
+        return breadcrumbButtonClassNames;
+    },
+    useBreadcrumbButtonStyles_unstable: function() {
+        return useBreadcrumbButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reactbutton = require("@fluentui/react-button");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacticons = require("@fluentui/react-icons");
+const breadcrumbButtonClassNames = {
+    root: 'fui-BreadcrumbButton',
+    icon: 'fui-BreadcrumbButton__icon'
+};
+/**
+ * CSS variable names used internally for styling in the Breadcrumb.
+ */ const breadcrumbCSSVars = {
+    breadcrumbIconSizeVar: '--fui-Breadcrumb--icon-size',
+    breadcrumbIconLineHeightVar: '--fui-Breadcrumb--icon-line-height'
+};
+const useIconStyles = (0, _react.makeStyles)({
+    base: {
+        fontSize: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
+        height: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
+        lineHeight: `var(${breadcrumbCSSVars.breadcrumbIconLineHeightVar})`,
+        width: `var(${breadcrumbCSSVars.breadcrumbIconSizeVar})`,
+        marginRight: _reacttheme.tokens.spacingHorizontalXS
+    },
+    small: {
+        [breadcrumbCSSVars.breadcrumbIconSizeVar]: '12px',
+        [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: _reacttheme.tokens.lineHeightBase200
+    },
+    medium: {
+        [breadcrumbCSSVars.breadcrumbIconSizeVar]: '16px',
+        [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: _reacttheme.tokens.lineHeightBase400
+    },
+    large: {
+        [breadcrumbCSSVars.breadcrumbIconSizeVar]: '20px',
+        [breadcrumbCSSVars.breadcrumbIconLineHeightVar]: _reacttheme.tokens.lineHeightBase600
+    }
+});
+const defaultButtonStyles = {
+    backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+    color: _reacttheme.tokens.colorNeutralForeground2,
+    cursor: 'auto'
+};
+const currentIconStyles = {
+    ...defaultButtonStyles,
+    [`& .${_reactbutton.buttonClassNames.icon}`]: {
+        color: 'unset'
+    },
+    [`& .${_reacticons.iconFilledClassName}`]: {
+        display: 'none'
+    },
+    [`& .${_reacticons.iconRegularClassName}`]: {
+        display: 'inline'
+    }
+};
+const useStyles = (0, _react.makeStyles)({
+    root: {
+        minWidth: 'unset',
+        textWrap: 'nowrap'
+    },
+    small: {
+        height: '24px',
+        ..._reacttheme.typographyStyles.caption1,
+        padding: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    medium: {
+        height: '32px',
+        ..._reacttheme.typographyStyles.body1,
+        padding: _reacttheme.tokens.spacingHorizontalSNudge
+    },
+    large: {
+        height: '40px',
+        ..._reacttheme.typographyStyles.body2,
+        padding: _reacttheme.tokens.spacingHorizontalS
+    },
+    current: {
+        ':hover': {
+            ...currentIconStyles
+        },
+        ':hover:active': {
+            ...currentIconStyles
+        },
+        ':disabled': {
+            ...currentIconStyles
+        }
+    },
+    currentSmall: {
+        ..._reacttheme.typographyStyles.caption1Strong
+    },
+    currentMedium: {
+        ..._reacttheme.typographyStyles.body1Strong
+    },
+    currentLarge: {
+        ..._reacttheme.typographyStyles.subtitle2
+    }
+});
+const useBreadcrumbButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const iconStyles = useIconStyles();
+    const currentSizeMap = {
+        small: styles.currentSmall,
+        medium: styles.currentMedium,
+        large: styles.currentLarge
+    };
+    state.root.className = (0, _react.mergeClasses)(breadcrumbButtonClassNames.root, styles[state.size], styles.root, state.current && currentSizeMap[state.size], state.current && styles.current, state.root.className);
+    if (state.icon) {
+        state.icon.className = (0, _react.mergeClasses)(iconStyles.base, iconStyles[state.size], state.icon.className);
+    }
+    (0, _reactbutton.useButtonStyles_unstable)(state);
+    return state;
+};