feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "CarouselNavContainer", {
+    enumerable: true,
+    get: function() {
+        return CarouselNavContainer;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useCarouselNavContainer = require("./useCarouselNavContainer");
+const _renderCarouselNavContainer = require("./renderCarouselNavContainer");
+const _useCarouselNavContainerStylesstyles = require("./useCarouselNavContainerStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const CarouselNavContainer = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useCarouselNavContainer.useCarouselNavContainer_unstable)(props, ref);
+    (0, _useCarouselNavContainerStylesstyles.useCarouselNavContainerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useCarouselNavContainerStyles_unstable')(state);
+    return (0, _renderCarouselNavContainer.renderCarouselNavContainer_unstable)(state);
+});
+CarouselNavContainer.displayName = 'CarouselNavContainer';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nimport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nimport { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';\nimport type { CarouselNavContainerProps } from './CarouselNavContainer.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls\n */\nexport const CarouselNavContainer: ForwardRefComponent<CarouselNavContainerProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselNavContainer_unstable(props, ref);\n\n  useCarouselNavContainerStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);\n\n  return renderCarouselNavContainer_unstable(state);\n});\n\nCarouselNavContainer.displayName = 'CarouselNavContainer';\n"],"names":["React","useCarouselNavContainer_unstable","renderCarouselNavContainer_unstable","useCarouselNavContainerStyles_unstable","useCustomStyleHook_unstable","CarouselNavContainer","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;yCAEkB,4BAA4B;4CACzB,+BAA+B;qDAC5B,yCAAyC;qCAEpD,kCAAkC;AAKvE,MAAMK,uBAAAA,WAAAA,GAAuEL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,YAAQR,yDAAAA,EAAiCM,OAAOC;QAEtDL,2EAAAA,EAAuCM;QACvCL,gDAAAA,EAA4B,0CAA0CK;IAEtE,WAAOP,+DAAAA,EAAoCO;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavContainer/CarouselNavContainer.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButtonProps } from '../CarouselButton/CarouselButton.types';\nimport { TooltipProps } from '@fluentui/react-tooltip';\n\nexport type CarouselNavContainerSlots = {\n  root: Slot<'div'>;\n  next?: Slot<CarouselButtonProps>;\n  nextTooltip?: Slot<TooltipProps>;\n  prev?: Slot<CarouselButtonProps>;\n  prevTooltip?: Slot<TooltipProps>;\n  autoplay?: Slot<typeof CarouselAutoplayButton>;\n  autoplayTooltip?: Slot<TooltipProps>;\n};\n\n/**\n * CarouselNavContainer Props\n */\nexport type CarouselNavContainerProps = ComponentProps<CarouselNavContainerSlots> & {\n  /**\n   * Default: 'inline'\n   * Defines the nav container layout:\n   *\n   * 'inline' - Default controls inline with carousel view\n   *\n   *  inline-wide - Similar to inline but places nav buttons on far left/right\n   *\n   * 'overlay' - Controls overlaid on bottom of carousel viewport,\n   *\n   * 'overlay-wide' - Controls overlaid on bottom of carousel viewport with prev+autoplay/next buttons on far side\n   *\n   * 'overlay-expanded' - Controls overlaid on bottom of carousel viewport, with prev/next buttons on sides vertically centered\n   */\n  layout?: 'inline' | 'inline-wide' | 'overlay' | 'overlay-wide' | 'overlay-expanded';\n};\n\n/**\n * State used in rendering CarouselNavContainer\n */\nexport type CarouselNavContainerState = ComponentState<CarouselNavContainerSlots> &\n  Pick<CarouselNavContainerProps, 'layout'>;\n"],"names":[],"mappings":"AAoCA;;CAEC,GACD,WAC4C"}

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavContainer/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, {
+    CarouselNavContainer: function() {
+        return _CarouselNavContainer.CarouselNavContainer;
+    },
+    carouselNavContainerClassNames: function() {
+        return _useCarouselNavContainerStylesstyles.carouselNavContainerClassNames;
+    },
+    renderCarouselNavContainer_unstable: function() {
+        return _renderCarouselNavContainer.renderCarouselNavContainer_unstable;
+    },
+    useCarouselNavContainerStyles_unstable: function() {
+        return _useCarouselNavContainerStylesstyles.useCarouselNavContainerStyles_unstable;
+    },
+    useCarouselNavContainer_unstable: function() {
+        return _useCarouselNavContainer.useCarouselNavContainer_unstable;
+    }
+});
+const _CarouselNavContainer = require("./CarouselNavContainer");
+const _renderCarouselNavContainer = require("./renderCarouselNavContainer");
+const _useCarouselNavContainer = require("./useCarouselNavContainer");
+const _useCarouselNavContainerStylesstyles = require("./useCarouselNavContainerStyles.styles");

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavContainer/index.ts"],"sourcesContent":["export { CarouselNavContainer } from './CarouselNavContainer';\nexport type {\n  CarouselNavContainerProps,\n  CarouselNavContainerSlots,\n  CarouselNavContainerState,\n} from './CarouselNavContainer.types';\nexport { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';\nexport { useCarouselNavContainer_unstable } from './useCarouselNavContainer';\nexport {\n  carouselNavContainerClassNames,\n  useCarouselNavContainerStyles_unstable,\n} from './useCarouselNavContainerStyles.styles';\n"],"names":["CarouselNavContainer","renderCarouselNavContainer_unstable","useCarouselNavContainer_unstable","carouselNavContainerClassNames","useCarouselNavContainerStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,0CAAoB;;;eAS3BG,mEAA8B;;;eAHvBF,+DAAmC;;;eAI1CG,2EAAsC;;;eAH/BF,yDAAgC;;;sCAPJ,yBAAyB;4CAMV,+BAA+B;yCAClC,4BAA4B;qDAItE,yCAAyC"}

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderCarouselNavContainer_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderCarouselNavContainer_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderCarouselNavContainer_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(state.root, {
+        children: [
+            !state.autoplayTooltip && state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {}),
+            state.autoplayTooltip && state.autoplay && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplayTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.autoplay, {})
+            }),
+            !state.prevTooltip && state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {}),
+            state.prevTooltip && state.prev && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prevTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.prev, {})
+            }),
+            state.root.children,
+            !state.nextTooltip && state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {}),
+            state.nextTooltip && state.next && /*#__PURE__*/ (0, _jsxruntime.jsx)(state.nextTooltip, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(state.next, {})
+            })
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavContainer/renderCarouselNavContainer.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 { CarouselNavContainerState, CarouselNavContainerSlots } from './CarouselNavContainer.types';\n\n/**\n * Render the final JSX of CarouselNavContainer\n */\nexport const renderCarouselNavContainer_unstable = (state: CarouselNavContainerState): JSXElement => {\n  assertSlots<CarouselNavContainerSlots>(state);\n\n  return (\n    <state.root>\n      {!state.autoplayTooltip && state.autoplay && <state.autoplay />}\n      {state.autoplayTooltip && state.autoplay && (\n        <state.autoplayTooltip>\n          <state.autoplay />\n        </state.autoplayTooltip>\n      )}\n      {!state.prevTooltip && state.prev && <state.prev />}\n      {state.prevTooltip && state.prev && (\n        <state.prevTooltip>\n          <state.prev />\n        </state.prevTooltip>\n      )}\n      {state.root.children}\n      {!state.nextTooltip && state.next && <state.next />}\n      {state.nextTooltip && state.next && (\n        <state.nextTooltip>\n          <state.next />\n        </state.nextTooltip>\n      )}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCarouselNavContainer_unstable","state","root","autoplayTooltip","autoplay","prevTooltip","prev","children","nextTooltip","next"],"mappings":";;;;+BAUaC;;;;;;4BATb,iCAAiD;gCAErB,4BAA4B;AAOjD,4CAA4C,CAACC;QAClDF,2BAAAA,EAAuCE;IAEvC,OAAA,WAAA,OACE,gBAAA,EAACA,MAAMC,IAAI,EAAA;;YACR,CAACD,MAAME,eAAe,IAAIF,MAAMG,QAAQ,IAAA,WAAA,OAAI,eAAA,EAACH,MAAMG,QAAQ,EAAA,CAAA;YAC3DH,MAAME,eAAe,IAAIF,MAAMG,QAAQ,IAAA,WAAA,OACtC,eAAA,EAACH,MAAME,eAAe,EAAA;0BACpB,WAAA,OAAA,eAAA,EAACF,MAAMG,QAAQ,EAAA,CAAA;;YAGlB,CAACH,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,IAAA,WAAA,OAAI,eAAA,EAACL,MAAMK,IAAI,EAAA,CAAA;YAC/CL,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,IAAA,WAAA,OAC9B,eAAA,EAACL,MAAMI,WAAW,EAAA;0BAChB,WAAA,OAAA,eAAA,EAACJ,MAAMK,IAAI,EAAA,CAAA;;YAGdL,MAAMC,IAAI,CAACK,QAAQ;YACnB,CAACN,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,IAAA,WAAA,OAAI,eAAA,EAACR,MAAMQ,IAAI,EAAA,CAAA;YAC/CR,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,IAAA,WAAA,OAC9B,eAAA,EAACR,MAAMO,WAAW,EAAA;0BAChB,WAAA,OAAA,eAAA,EAACP,MAAMQ,IAAI,EAAA,CAAA;;;;AAKrB,EAAE"}

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

@@ -0,0 +1,76 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useCarouselNavContainer_unstable", {
+    enumerable: true,
+    get: function() {
+        return useCarouselNavContainer_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 _CarouselAutoplayButton = require("../CarouselAutoplayButton/CarouselAutoplayButton");
+const _CarouselButton = require("../CarouselButton/CarouselButton");
+const _reacttooltip = require("@fluentui/react-tooltip");
+const useCarouselNavContainer_unstable = (props, ref)=>{
+    const { layout } = props;
+    const next = _reactutilities.slot.optional(props.next, {
+        defaultProps: {
+            navType: 'next'
+        },
+        elementType: _CarouselButton.CarouselButton,
+        renderByDefault: true
+    });
+    const prev = _reactutilities.slot.optional(props.prev, {
+        defaultProps: {
+            navType: 'prev'
+        },
+        elementType: _CarouselButton.CarouselButton,
+        renderByDefault: true
+    });
+    const autoplay = _reactutilities.slot.optional(props.autoplay, {
+        elementType: _CarouselAutoplayButton.CarouselAutoplayButton,
+        renderByDefault: !!props.autoplay || !!props.autoplayTooltip
+    });
+    const nextTooltip = _reactutilities.slot.optional(props.nextTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
+    });
+    const prevTooltip = _reactutilities.slot.optional(props.prevTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
+    });
+    const autoplayTooltip = _reactutilities.slot.optional(props.autoplayTooltip, {
+        defaultProps: {},
+        elementType: _reacttooltip.Tooltip,
+        renderByDefault: false
+    });
+    return {
+        layout,
+        components: {
+            root: 'div',
+            next: _CarouselButton.CarouselButton,
+            prev: _CarouselButton.CarouselButton,
+            autoplay: _CarouselAutoplayButton.CarouselAutoplayButton,
+            nextTooltip: _reacttooltip.Tooltip,
+            prevTooltip: _reacttooltip.Tooltip,
+            autoplayTooltip: _reacttooltip.Tooltip
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        next,
+        prev,
+        autoplay,
+        nextTooltip,
+        prevTooltip,
+        autoplayTooltip
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavContainer/useCarouselNavContainer.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { CarouselNavContainerProps, CarouselNavContainerState } from './CarouselNavContainer.types';\nimport { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';\nimport { CarouselButton } from '../CarouselButton/CarouselButton';\nimport { Tooltip } from '@fluentui/react-tooltip';\n\n/**\n * Create the state required to render CarouselNavContainer.\n *\n * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,\n * before being passed to renderCarouselNavContainer_unstable.\n *\n * @param props - props from this instance of CarouselNavContainer\n * @param ref - reference to root HTMLDivElement of CarouselNavContainer\n */\nexport const useCarouselNavContainer_unstable = (\n  props: CarouselNavContainerProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselNavContainerState => {\n  const { layout } = props;\n  const next: CarouselNavContainerState['next'] = slot.optional(props.next, {\n    defaultProps: {\n      navType: 'next',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const prev: CarouselNavContainerState['prev'] = slot.optional(props.prev, {\n    defaultProps: {\n      navType: 'prev',\n    },\n    elementType: CarouselButton,\n    renderByDefault: true,\n  });\n\n  const autoplay: CarouselNavContainerState['autoplay'] = slot.optional(props.autoplay, {\n    elementType: CarouselAutoplayButton,\n    renderByDefault: !!props.autoplay || !!props.autoplayTooltip,\n  });\n\n  const nextTooltip: CarouselNavContainerState['nextTooltip'] = slot.optional(props.nextTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  const prevTooltip: CarouselNavContainerState['prevTooltip'] = slot.optional(props.prevTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  const autoplayTooltip: CarouselNavContainerState['autoplayTooltip'] = slot.optional(props.autoplayTooltip, {\n    defaultProps: {},\n    elementType: Tooltip,\n    renderByDefault: false,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: CarouselButton,\n      prev: CarouselButton,\n      autoplay: CarouselAutoplayButton,\n      nextTooltip: Tooltip,\n      prevTooltip: Tooltip,\n      autoplayTooltip: Tooltip,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    next,\n    prev,\n    autoplay,\n    nextTooltip,\n    prevTooltip,\n    autoplayTooltip,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","CarouselAutoplayButton","CarouselButton","Tooltip","useCarouselNavContainer_unstable","props","ref","layout","next","optional","defaultProps","navType","elementType","renderByDefault","prev","autoplay","autoplayTooltip","nextTooltip","prevTooltip","components","root","always"],"mappings":";;;;+BAgBaM;;;;;;;iEAhBU,QAAQ;gCACgB,4BAA4B;wCAEpC,mDAAmD;gCAC3D,mCAAmC;8BAC1C,0BAA0B;AAW3C,yCAAyC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CR,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cd,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV,8BAAAA;QACbW,iBAAiB;IACnB;IAEA,MAAME,WAAkDf,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFH,aAAaX,8CAAAA;QACbY,iBAAiB,CAAC,CAACR,MAAMU,QAAQ,IAAI,CAAC,CAACV,MAAMW,eAAe;IAC9D;IAEA,MAAMC,cAAwDjB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMY,WAAW,EAAE;QAC7FP,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMK,cAAwDlB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMa,WAAW,EAAE;QAC7FR,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,MAAMG,kBAAgEhB,oBAAAA,CAAKS,QAAQ,CAACJ,MAAMW,eAAe,EAAE;QACzGN,cAAc,CAAC;QACfE,aAAaT,qBAAAA;QACbU,iBAAiB;IACnB;IAEA,OAAO;QACLN;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMN,8BAAAA;YACNY,MAAMZ,8BAAAA;YACNa,UAAUd,8CAAAA;YACVgB,aAAad,qBAAAA;YACbe,aAAaf,qBAAAA;YACba,iBAAiBb,qBAAAA;QACnB;QACAiB,MAAMpB,oBAAAA,CAAKqB,MAAM,CACftB,4CAAAA,EAAyB,OAAO;YAC9BO;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBJ;QACAM;QACAC;QACAE;QACAC;QACAF;IACF;AACF,EAAE"}

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js

@@ -0,0 +1,169 @@
+'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, {
+    carouselNavContainerClassNames: function() {
+        return carouselNavContainerClassNames;
+    },
+    useCarouselNavContainerStyles_unstable: function() {
+        return useCarouselNavContainerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const carouselNavContainerClassNames = {
+    root: 'fui-CarouselNavContainer',
+    next: 'fui-CarouselNavContainer__next',
+    prev: 'fui-CarouselNavContainer__prev',
+    autoplay: 'fui-CarouselNavContainer__autoplay',
+    /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)
+  * Use 'content' slot to style Tooltip content instead
+  */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',
+    prevTooltip: 'fui-CarouselNavContainer__prevTooltip',
+    autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    root: {
+        mc9l5x: "f22iagw",
+        Beiy3e4: "f1063pyq",
+        Brf1p80: "f4d9j23",
+        a9b677: "fly5x3f",
+        Bkecrkj: "f1aehjj5"
+    },
+    next: {},
+    prev: {},
+    autoplay: {},
+    inline: {
+        B6of3ja: "f1mevb6"
+    },
+    overlay: {
+        qhf8xq: "f1euv43f",
+        B5kzvoi: "f1bu4tuc",
+        B7ck84d: "f1ewtqcl"
+    },
+    overlayWide: {
+        B5kzvoi: "f1bu4tuc"
+    },
+    nextWide: {
+        Frg6f3: [
+            "fcgxt0o",
+            "f1ujusj6"
+        ]
+    },
+    prevWide: {
+        t21cq0: [
+            "f1ujusj6",
+            "fcgxt0o"
+        ]
+    },
+    nextOverlayWide: {
+        t21cq0: [
+            "fkujibs",
+            "f199hnxi"
+        ]
+    },
+    prevOverlayWide: {
+        Frg6f3: [
+            "f199hnxi",
+            "fkujibs"
+        ]
+    },
+    autoplayOverlayWide: {
+        Frg6f3: [
+            "f199hnxi",
+            "fkujibs"
+        ]
+    },
+    expanded: {
+        a9b677: "fly5x3f",
+        Bqenvij: "f1l02sjl",
+        Bt984gj: "fgs5rwf",
+        Brf1p80: "f4d9j23",
+        B5kzvoi: "f1yab3r1",
+        c7y7m3: "f1ok8cdc",
+        yx0ijg: "fcq6x80",
+        v4amzz: "f1gy9d85"
+    },
+    nextOverlayExpanded: {
+        qhf8xq: "f1euv43f",
+        j35jbq: [
+            "f8b87gs",
+            "fedtrts"
+        ],
+        Bhzewxz: "f1i1t8d1",
+        Bz10aip: "f188r07x"
+    },
+    prevOverlayExpanded: {
+        qhf8xq: "f1euv43f",
+        oyh7mz: [
+            "fedtrts",
+            "f8b87gs"
+        ],
+        Bhzewxz: "f1i1t8d1",
+        Bz10aip: "f188r07x"
+    },
+    autoplayExpanded: {
+        qhf8xq: "f1euv43f",
+        B5kzvoi: "f49tsn4",
+        oyh7mz: [
+            "fedtrts",
+            "f8b87gs"
+        ],
+        jrapky: "f18zxyen"
+    }
+}, {
+    d: [
+        ".f22iagw{display:flex;}",
+        ".f1063pyq{flex-direction:row;}",
+        ".f4d9j23{justify-content:center;}",
+        ".fly5x3f{width:100%;}",
+        ".f1aehjj5{pointer-events:none;}",
+        ".f1mevb6{margin-top:var(--spacingVerticalM);}",
+        ".f1euv43f{position:absolute;}",
+        ".f1bu4tuc{bottom:var(--spacingVerticalM);}",
+        ".f1ewtqcl{box-sizing:border-box;}",
+        ".fcgxt0o{margin-left:auto;}",
+        ".f1ujusj6{margin-right:auto;}",
+        ".fkujibs{margin-right:var(--spacingHorizontalM);}",
+        ".f199hnxi{margin-left:var(--spacingHorizontalM);}",
+        ".f1l02sjl{height:100%;}",
+        ".fgs5rwf{align-items:flex-end;}",
+        ".f1yab3r1{bottom:0;}",
+        ".f1ok8cdc>div{position:relative;}",
+        ".fcq6x80>div{bottom:var(--spacingVerticalL);}",
+        ".f1gy9d85>div{margin-bottom:0;}",
+        ".f8b87gs{right:var(--spacingHorizontalM);}",
+        ".fedtrts{left:var(--spacingHorizontalM);}",
+        ".f1i1t8d1{top:50%;}",
+        ".f188r07x{transform:translateY(-50%);}",
+        ".f49tsn4{bottom:-var(--spacingHorizontalXS);}",
+        ".f18zxyen{margin-bottom:var(--spacingVerticalM);}"
+    ]
+});
+const useCarouselNavContainerStyles_unstable = (state)=>{
+    'use no memo';
+    const { layout } = state;
+    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
+    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);
+    if (state.next) {
+        state.next.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
+    }
+    if (state.prev) {
+        state.prev.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);
+    }
+    if (state.autoplay) {
+        state.autoplay.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-carousel/lib-commonjs/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js

@@ -0,0 +1,120 @@
+'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, {
+    carouselNavContainerClassNames: function() {
+        return carouselNavContainerClassNames;
+    },
+    useCarouselNavContainerStyles_unstable: function() {
+        return useCarouselNavContainerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const carouselNavContainerClassNames = {
+    root: 'fui-CarouselNavContainer',
+    next: 'fui-CarouselNavContainer__next',
+    prev: 'fui-CarouselNavContainer__prev',
+    autoplay: 'fui-CarouselNavContainer__autoplay',
+    /* Tooltip classNames are listed for type compatibility only (cannot assign root className to portal)
+   * Use 'content' slot to style Tooltip content instead
+   */ nextTooltip: 'fui-CarouselNavContainer__nextTooltip',
+    prevTooltip: 'fui-CarouselNavContainer__prevTooltip',
+    autoplayTooltip: 'fui-CarouselNavContainer__autoplayTooltip'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        width: '100%',
+        pointerEvents: 'none'
+    },
+    next: {},
+    prev: {},
+    autoplay: {},
+    inline: {
+        marginTop: _reacttheme.tokens.spacingVerticalM
+    },
+    overlay: {
+        position: 'absolute',
+        bottom: _reacttheme.tokens.spacingVerticalM,
+        boxSizing: 'border-box'
+    },
+    overlayWide: {
+        bottom: _reacttheme.tokens.spacingVerticalM
+    },
+    nextWide: {
+        marginLeft: 'auto'
+    },
+    prevWide: {
+        marginRight: 'auto'
+    },
+    nextOverlayWide: {
+        marginRight: _reacttheme.tokens.spacingHorizontalM
+    },
+    prevOverlayWide: {
+        marginLeft: _reacttheme.tokens.spacingHorizontalM
+    },
+    autoplayOverlayWide: {
+        marginLeft: _reacttheme.tokens.spacingHorizontalM
+    },
+    expanded: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+        bottom: 0,
+        '> div': {
+            position: 'relative',
+            bottom: _reacttheme.tokens.spacingVerticalL,
+            marginBottom: 0
+        }
+    },
+    nextOverlayExpanded: {
+        position: 'absolute',
+        right: _reacttheme.tokens.spacingHorizontalM,
+        top: '50%',
+        transform: 'translateY(-50%)'
+    },
+    prevOverlayExpanded: {
+        position: 'absolute',
+        left: _reacttheme.tokens.spacingHorizontalM,
+        top: '50%',
+        transform: 'translateY(-50%)'
+    },
+    autoplayExpanded: {
+        position: 'absolute',
+        bottom: `-${_reacttheme.tokens.spacingHorizontalXS}`,
+        left: _reacttheme.tokens.spacingHorizontalM,
+        marginBottom: _reacttheme.tokens.spacingVerticalM
+    }
+});
+const useCarouselNavContainerStyles_unstable = (state)=>{
+    'use no memo';
+    const { layout } = state;
+    const isOverlay = layout === 'overlay' || layout === 'overlay-wide' || layout === 'overlay-expanded';
+    const isWide = layout === 'inline-wide' || layout === 'overlay-wide';
+    const styles = useStyles();
+    state.root.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.root, styles.root, isOverlay ? styles.overlay : styles.inline, isOverlay && isWide && styles.overlayWide, layout === 'overlay-expanded' && styles.expanded, state.root.className);
+    if (state.next) {
+        state.next.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.next, styles.next, isWide && styles.nextWide, isWide && isOverlay && styles.nextOverlayWide, layout === 'overlay-expanded' && styles.nextOverlayExpanded, state.next.className);
+    }
+    if (state.prev) {
+        state.prev.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.prev, styles.prev, isWide && styles.prevWide, !state.autoplay && isWide && isOverlay && styles.prevOverlayWide, layout === 'overlay-expanded' && styles.prevOverlayExpanded, state.prev.className);
+    }
+    if (state.autoplay) {
+        state.autoplay.className = (0, _react.mergeClasses)(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
+    }
+    return state;
+};