feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/CarouselNavButton.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselNavButton", {
+    enumerable: true,
+    get: function() {
+        return CarouselNavButton;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCarouselNavButton = require("./useCarouselNavButton");
+const _renderCarouselNavButton = require("./renderCarouselNavButton");
+const _useCarouselNavButtonStylesstyles = require("./useCarouselNavButtonStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const CarouselNavButton = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCarouselNavButton.useCarouselNavButton_unstable)(props, ref);
+    (0, _useCarouselNavButtonStylesstyles.useCarouselNavButtonStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselNavButtonStyles_unstable')(state);
+    return (0, _renderCarouselNavButton.renderCarouselNavButton_unstable)(state);
+});
+CarouselNavButton.displayName = 'CarouselNavButton';

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/CarouselNavButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavButton_unstable } from './useCarouselNavButton';\nimport { renderCarouselNavButton_unstable } from './renderCarouselNavButton';\nimport { useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';\nimport type { CarouselNavButtonProps } from './CarouselNavButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * The child element of CarouselNav, a singular button that will set the carousels active value on click.\n */\nexport const CarouselNavButton: ForwardRefComponent<CarouselNavButtonProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNavButton_unstable(props, ref);\n\n  useCarouselNavButtonStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselNavButtonStyles_unstable')(state);\n\n  return renderCarouselNavButton_unstable(state);\n});\n\nCarouselNavButton.displayName = 'CarouselNavButton';\n"],"names":["React","useCarouselNavButton_unstable","renderCarouselNavButton_unstable","useCarouselNavButtonStyles_unstable","useCustomStyleHook_unstable","CarouselNavButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;sCAEe,yBAAyB;yCACtB,4BAA4B;kDACzB,sCAAsC;qCAE9C,kCAAkC;AAKvE,MAAMK,oBAAAA,WAAAA,GAAiEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACrG,MAAMC,YAAQR,mDAAAA,EAA8BM,OAAOC;QAEnDL,qEAAAA,EAAoCM;QACpCL,gDAAAA,EAA4B,uCAAuCK;IAEnE,WAAOP,yDAAAA,EAAiCO;AAC1C,GAAG;AAEHJ,kBAAkBK,WAAW,GAAG"}

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/CarouselNavButton.types.js

@@ -0,0 +1,6 @@
+/**
+ * State used in rendering CarouselNavButton
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/CarouselNavButton.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavButton/CarouselNavButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselNavState } from '../CarouselNav/CarouselNav.types';\n\nexport type CarouselNavButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n};\n\n/**\n * CarouselNavButton Props\n */\nexport type CarouselNavButtonProps = ComponentProps<CarouselNavButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavButton\n */\nexport type CarouselNavButtonState = ComponentState<CarouselNavButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  selected?: boolean;\n} & Pick<CarouselNavState, 'appearance'>;\n"],"names":[],"mappings":"AAgBA;;CAEC,GACD,WAKyC"}

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/index.js

@@ -0,0 +1,31 @@
+"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, {
+    CarouselNavButton: function() {
+        return _CarouselNavButton.CarouselNavButton;
+    },
+    carouselNavButtonClassNames: function() {
+        return _useCarouselNavButtonStylesstyles.carouselNavButtonClassNames;
+    },
+    renderCarouselNavButton_unstable: function() {
+        return _renderCarouselNavButton.renderCarouselNavButton_unstable;
+    },
+    useCarouselNavButtonStyles_unstable: function() {
+        return _useCarouselNavButtonStylesstyles.useCarouselNavButtonStyles_unstable;
+    },
+    useCarouselNavButton_unstable: function() {
+        return _useCarouselNavButton.useCarouselNavButton_unstable;
+    }
+});
+const _CarouselNavButton = require("./CarouselNavButton");
+const _renderCarouselNavButton = require("./renderCarouselNavButton");
+const _useCarouselNavButton = require("./useCarouselNavButton");
+const _useCarouselNavButtonStylesstyles = require("./useCarouselNavButtonStyles.styles");

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavButton/index.ts"],"sourcesContent":["export { CarouselNavButton } from './CarouselNavButton';\nexport type { CarouselNavButtonProps, CarouselNavButtonSlots, CarouselNavButtonState } from './CarouselNavButton.types';\nexport { renderCarouselNavButton_unstable } from './renderCarouselNavButton';\nexport { useCarouselNavButton_unstable } from './useCarouselNavButton';\nexport { carouselNavButtonClassNames, useCarouselNavButtonStyles_unstable } from './useCarouselNavButtonStyles.styles';\n"],"names":["CarouselNavButton","renderCarouselNavButton_unstable","useCarouselNavButton_unstable","carouselNavButtonClassNames","useCarouselNavButtonStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,oCAAiB;;;eAIjBG,6DAA2B;;;eAF3BF,yDAAgC;;;eAEHG,qEAAmC;;;eADhEF,mDAA6B;;;mCAHJ,sBAAsB;yCAEP,4BAA4B;sCAC/B,yBAAyB;kDACU,sCAAsC"}

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/renderCarouselNavButton.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderCarouselNavButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderCarouselNavButton_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderCarouselNavButton_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    // TODO Add additional slots in the appropriate place
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+};

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/renderCarouselNavButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavButton/renderCarouselNavButton.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\n\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport type { CarouselNavButtonState, CarouselNavButtonSlots } from './CarouselNavButton.types';\n\n/**\n * Render the final JSX of CarouselNavButton\n */\nexport const renderCarouselNavButton_unstable = (state: CarouselNavButtonState): JSXElement => {\n  assertSlots<CarouselNavButtonSlots>(state);\n\n  // TODO Add additional slots in the appropriate place\n  return <state.root />;\n};\n"],"names":["assertSlots","renderCarouselNavButton_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAQjD,MAAMC,mCAAmC,CAACC;QAC/CF,2BAAAA,EAAoCE;IAEpC,qDAAqD;IACrD,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/useCarouselNavButton.js

@@ -0,0 +1,79 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCarouselNavButton_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCarouselNavButton_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _reactaria = require("@fluentui/react-aria");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactutilities = require("@fluentui/react-utilities");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _CarouselContext = require("../CarouselContext");
+const _CarouselNavContext = require("../CarouselNav/CarouselNavContext");
+const _CarouselNavIndexContext = require("../CarouselNav/CarouselNavIndexContext");
+const useCarouselNavButton_unstable = (props, ref)=>{
+    const { onClick, as = 'button' } = props;
+    const { appearance } = (0, _CarouselNavContext.useCarouselNavContext)();
+    const index = (0, _CarouselNavIndexContext.useCarouselNavIndexContext)();
+    const selectPageByIndex = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.selectPageByIndex);
+    const selected = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.activeIndex === index);
+    const subscribeForValues = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.subscribeForValues);
+    const resetAutoplay = (0, _CarouselContext.useCarouselContext_unstable)((ctx)=>ctx.resetAutoplay);
+    const handleClick = (0, _reactutilities.useEventCallback)((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && (0, _reactutilities.isHTMLElement)(event.target)) {
+            selectPageByIndex(event, index);
+        }
+        // Ensure any autoplay timers are extended/reset
+        resetAutoplay();
+    });
+    const defaultTabProps = (0, _reacttabster.useTabsterAttributes)({
+        focusable: {
+            isDefault: selected
+        }
+    });
+    const buttonRef = _react.useRef(undefined);
+    const _carouselButton = _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)(as, (0, _reactaria.useARIAButtonProps)(props.as, props)), {
+        elementType: 'button',
+        defaultProps: {
+            ref: (0, _reactutilities.useMergedRefs)(ref, buttonRef),
+            role: 'tab',
+            type: 'button',
+            'aria-selected': selected,
+            ...defaultTabProps
+        }
+    });
+    (0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
+        return subscribeForValues((data)=>{
+            var _data_groupIndexList;
+            var _data_groupIndexList_index;
+            const controlList = (_data_groupIndexList_index = (_data_groupIndexList = data.groupIndexList) === null || _data_groupIndexList === void 0 ? void 0 : _data_groupIndexList[index]) !== null && _data_groupIndexList_index !== void 0 ? _data_groupIndexList_index : [];
+            const _controlledSlideIds = controlList.map((slideIndex)=>{
+                return data.slideNodes[slideIndex].id;
+            }).join(' ');
+            if (buttonRef.current) {
+                buttonRef.current.setAttribute('aria-controls', _controlledSlideIds);
+            }
+        });
+    }, [
+        index,
+        subscribeForValues
+    ]);
+    // Override onClick
+    _carouselButton.onClick = handleClick;
+    const state = {
+        selected,
+        appearance,
+        components: {
+            root: 'button'
+        },
+        root: _carouselButton
+    };
+    return state;
+};

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.js

@@ -0,0 +1,319 @@
+'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, {
+    carouselNavButtonClassNames: function() {
+        return carouselNavButtonClassNames;
+    },
+    useCarouselNavButtonStyles_unstable: function() {
+        return useCarouselNavButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const carouselNavButtonClassNames = {
+    root: 'fui-CarouselNavButton'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        Bceei9c: "f1k6fduh",
+        Bkecrkj: "fc5wo7j",
+        a9b677: "f1van5z7",
+        Bqenvij: "f1fkmctz",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "f1f5q0n8",
+        B7ck84d: "f1e4lqlz",
+        De3pzq: "f1c21dwh",
+        B4j52fo: "fre7gi1",
+        Bekrc4i: [
+            "f1358rze",
+            "f1rvrf73"
+        ],
+        Bn0qgzm: "fqdk4by",
+        ibv6hh: [
+            "f1rvrf73",
+            "f1358rze"
+        ],
+        Bsft5z2: "f13zj6fq",
+        ap17g6: "f2gz7yw",
+        li1rpt: "f1gw3sf2",
+        d9w3h3: 0,
+        B3778ie: 0,
+        B4j8arr: 0,
+        Bl18szs: 0,
+        Blrzh8d: "f1x820d0",
+        Bjuhk93: 0,
+        B1q35kw: 0,
+        Bw17bha: 0,
+        Bcgy8vk: 0,
+        Du69r6: 0,
+        Gp14am: 0,
+        vfts7: 0,
+        Bhxzhr1: 0,
+        G63luc: 0,
+        s924m2: 0,
+        Barhvk9: 0,
+        Ihftqj: 0,
+        wywymt: 0,
+        B0n5ga8: 0,
+        Bm2nyyq: 0,
+        xrcqlc: 0,
+        e1d83w: "fnwf5yv",
+        Dlnsje: "foue38v",
+        a2br6o: "fi4ui2s",
+        Bjyk6c5: "f1w4p7kh",
+        go7t6h: "fo5b2b9",
+        xdqbwx: "f16vizm6",
+        Hwb57: "fqolsir",
+        umgawz: "fim7wbh"
+    },
+    rootUnselected: {
+        Bw0xxkn: 0,
+        oeaueh: 0,
+        Bpd4iqm: 0,
+        Befb4lg: "f71xx7",
+        Byu6kyc: 0,
+        n8qw10: 0,
+        Bbjhlyh: 0,
+        i2cumq: 0,
+        Bunx835: 0,
+        Bdrgwmp: 0,
+        mqozju: 0,
+        lbo84a: 0,
+        Bksnhdo: 0,
+        Bci5o5g: 0,
+        u5e7qz: 0,
+        Bn40d3w: 0,
+        B7b6zxw: 0,
+        B8q5s1w: 0,
+        B5gfjzb: 0,
+        Bbcte9g: 0,
+        Bqz3imu: "f1j9b7x8",
+        Bj9ihqo: 0,
+        Bl51kww: 0,
+        B3bvztg: 0,
+        Btyt4dx: 0,
+        Brhw1f9: "f1tdm9ui",
+        Bw81rd7: 0,
+        kdpuga: 0,
+        dm238s: 0,
+        B6xbmo0: 0,
+        B3whbx2: "f2krc9w",
+        Bp15pi3: "f7x02et",
+        Bay5ve9: "f1ry2q4s",
+        Bni0232: "f1e9f9ku"
+    },
+    rootSelected: {
+        a9b677: "f1eh74fx",
+        Byoj8tv: 0,
+        uwmqm3: 0,
+        z189sj: 0,
+        z8tnut: 0,
+        B0ocmuz: "fwku66v",
+        Bw0xxkn: 0,
+        oeaueh: 0,
+        Bpd4iqm: 0,
+        Befb4lg: "f71xx7",
+        Byu6kyc: 0,
+        n8qw10: 0,
+        Bbjhlyh: 0,
+        i2cumq: 0,
+        Bunx835: 0,
+        Bdrgwmp: 0,
+        mqozju: 0,
+        lbo84a: 0,
+        Bksnhdo: 0,
+        Bci5o5g: 0,
+        u5e7qz: 0,
+        Bn40d3w: 0,
+        B7b6zxw: 0,
+        B8q5s1w: 0,
+        B5gfjzb: 0,
+        Bbcte9g: 0,
+        Bqz3imu: "f1j9b7x8",
+        Bj9ihqo: 0,
+        Bl51kww: 0,
+        B3bvztg: 0,
+        Btyt4dx: 0,
+        Brhw1f9: "f1tdm9ui",
+        Bw81rd7: 0,
+        kdpuga: 0,
+        dm238s: 0,
+        B6xbmo0: 0,
+        B3whbx2: "f2krc9w",
+        a2br6o: "f1v6lwa2",
+        d9w3h3: 0,
+        B3778ie: 0,
+        B4j8arr: 0,
+        Bl18szs: 0,
+        Blrzh8d: "fgm6wgx",
+        Bay5ve9: "f1ry2q4s",
+        Bni0232: "f1gxfet"
+    },
+    brand: {
+        Bjyk6c5: "fnrv5e1",
+        Bp15pi3: "fjsqi2x",
+        Glksuk: "frrwqtn",
+        Bay5ve9: "f9atwx8",
+        Blzl0y7: "fmmpig5",
+        Bni0232: "f1e9f9ku"
+    },
+    unselectedBrand: {
+        Bp15pi3: "f7x02et",
+        Bjyk6c5: "f1w4p7kh",
+        Bay5ve9: "f1ry2q4s",
+        Bni0232: "f1e9f9ku"
+    }
+}, {
+    d: [
+        ".f1k6fduh{cursor:pointer;}",
+        ".fc5wo7j{pointer-events:all;}",
+        ".f1van5z7{width:var(--spacingHorizontalS);}",
+        ".f1fkmctz{height:var(--spacingVerticalS);}",
+        [
+            ".f1f5q0n8{padding:var(--spacingVerticalS) var(--spacingHorizontalS);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1e4lqlz{box-sizing:content-box;}",
+        ".f1c21dwh{background-color:var(--colorTransparentBackground);}",
+        ".fre7gi1{border-top-width:0;}",
+        ".f1358rze{border-right-width:0;}",
+        ".f1rvrf73{border-left-width:0;}",
+        ".fqdk4by{border-bottom-width:0;}",
+        ".f13zj6fq::after{content:\"\";}",
+        ".f2gz7yw::after{display:block;}",
+        ".f1gw3sf2::after{box-sizing:border-box;}",
+        [
+            ".f1x820d0::after{border-radius:50%;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fnwf5yv::after{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        ".foue38v::after{height:var(--spacingVerticalS);}",
+        ".fi4ui2s::after{width:var(--spacingHorizontalS);}",
+        ".f1w4p7kh::after{background-color:var(--colorNeutralForeground1);}",
+        ".fo5b2b9::after{color:var(--colorNeutralForeground1);}",
+        [
+            ".f71xx7{outline:var(--strokeWidthThin) solid transparent;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".f1tdm9ui[data-fui-focus-visible]{margin:calc(-1 * var(--strokeWidthThick));}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f7x02et::after{opacity:0.6;}",
+        ".f1eh74fx{width:var(--spacingHorizontalL);}",
+        [
+            ".fwku66v{padding:var(--spacingVerticalS) var(--spacingHorizontalXS);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f71xx7{outline:var(--strokeWidthThin) solid transparent;}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1j9b7x8[data-fui-focus-visible]{border:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}",
+            {
+                p: -2
+            }
+        ],
+        [
+            ".f1tdm9ui[data-fui-focus-visible]{margin:calc(-1 * var(--strokeWidthThick));}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        ".f1v6lwa2::after{width:var(--spacingHorizontalL);}",
+        [
+            ".fgm6wgx::after{border-radius:4px;}",
+            {
+                p: -1
+            }
+        ],
+        ".fnrv5e1::after{background-color:var(--colorCompoundBrandBackground);}",
+        ".fjsqi2x::after{opacity:1;}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f16vizm6::after{forced-color-adjust:none;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fqolsir::after{background-color:white;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ],
+        [
+            "@media (forced-colors: active){.fim7wbh::after{mix-blend-mode:difference;}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ],
+    h: [
+        ".f1ry2q4s:hover::after{opacity:0.75;}",
+        ".frrwqtn:hover::after{background-color:var(--colorCompoundBrandBackgroundHover);}",
+        ".f9atwx8:hover::after{opacity:1;}"
+    ],
+    a: [
+        ".f1e9f9ku:active::after{opacity:1;}",
+        ".f1gxfet:active::after{opacity:0.65;}",
+        ".fmmpig5:active::after{background-color:var(--colorCompoundBrandBackgroundPressed);}"
+    ]
+});
+const useCarouselNavButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { selected, appearance } = state;
+    state.root.className = (0, _react.mergeClasses)(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavButton/useCarouselNavButtonStyles.styles.raw.js

@@ -0,0 +1,142 @@
+'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, {
+    carouselNavButtonClassNames: function() {
+        return carouselNavButtonClassNames;
+    },
+    useCarouselNavButtonStyles_unstable: function() {
+        return useCarouselNavButtonStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reacttheme = require("@fluentui/react-theme");
+const carouselNavButtonClassNames = {
+    root: 'fui-CarouselNavButton'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        cursor: 'pointer',
+        pointerEvents: 'all',
+        width: _reacttheme.tokens.spacingHorizontalS,
+        height: _reacttheme.tokens.spacingVerticalS,
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalS}`,
+        boxSizing: 'content-box',
+        backgroundColor: _reacttheme.tokens.colorTransparentBackground,
+        ..._react.shorthands.borderWidth(0),
+        '::after': {
+            content: '""',
+            display: 'block',
+            boxSizing: 'border-box',
+            borderRadius: '50%',
+            border: 'none',
+            height: _reacttheme.tokens.spacingVerticalS,
+            width: _reacttheme.tokens.spacingHorizontalS,
+            backgroundColor: _reacttheme.tokens.colorNeutralForeground1,
+            color: _reacttheme.tokens.colorNeutralForeground1,
+            '@media (forced-colors: active)': {
+                // Bypass OS high contrast with inverted blend mode (otherwise icon is invisible)
+                forcedColorAdjust: 'none',
+                backgroundColor: 'white',
+                mixBlendMode: 'difference'
+            }
+        }
+    },
+    rootUnselected: {
+        outline: `${_reacttheme.tokens.strokeWidthThin} solid transparent`,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            margin: `calc(-1 * ${_reacttheme.tokens.strokeWidthThick})`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        }),
+        '::after': {
+            opacity: 0.6
+        },
+        ':hover': {
+            '::after': {
+                opacity: 0.75
+            }
+        },
+        ':active': {
+            '::after': {
+                opacity: 1
+            }
+        }
+    },
+    rootSelected: {
+        width: _reacttheme.tokens.spacingHorizontalL,
+        padding: `${_reacttheme.tokens.spacingVerticalS} ${_reacttheme.tokens.spacingHorizontalXS}`,
+        outline: `${_reacttheme.tokens.strokeWidthThin} solid transparent`,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            border: `${_reacttheme.tokens.strokeWidthThick} solid ${_reacttheme.tokens.colorStrokeFocus2}`,
+            margin: `calc(-1 * ${_reacttheme.tokens.strokeWidthThick})`,
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        }),
+        '::after': {
+            width: _reacttheme.tokens.spacingHorizontalL,
+            borderRadius: '4px'
+        },
+        ':hover': {
+            '::after': {
+                opacity: 0.75
+            }
+        },
+        ':active': {
+            '::after': {
+                opacity: 0.65
+            }
+        }
+    },
+    brand: {
+        '::after': {
+            backgroundColor: _reacttheme.tokens.colorCompoundBrandBackground,
+            opacity: 1
+        },
+        ':hover': {
+            '::after': {
+                backgroundColor: _reacttheme.tokens.colorCompoundBrandBackgroundHover,
+                opacity: 1
+            }
+        },
+        ':active': {
+            '::after': {
+                backgroundColor: _reacttheme.tokens.colorCompoundBrandBackgroundPressed,
+                opacity: 1
+            }
+        }
+    },
+    unselectedBrand: {
+        '::after': {
+            opacity: 0.6,
+            backgroundColor: _reacttheme.tokens.colorNeutralForeground1
+        },
+        ':hover': {
+            '::after': {
+                opacity: 0.75
+            }
+        },
+        ':active': {
+            '::after': {
+                opacity: 1
+            }
+        }
+    }
+});
+const useCarouselNavButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { selected, appearance } = state;
+    state.root.className = (0, _react.mergeClasses)(carouselNavButtonClassNames.root, styles.root, selected ? styles.rootSelected : styles.rootUnselected, appearance === 'brand' && styles.brand, !selected && appearance === 'brand' && styles.unselectedBrand, state.root.className);
+    return state;
+};