feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useCarouselNavContainer_unstable } from './useCarouselNavContainer';
+import { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';
+import { useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * CarouselNavContainer component - This container will provide multiple valid layout options for the underlying carousel controls
+ */ export const CarouselNavContainer = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselNavContainer_unstable(props, ref);
+    useCarouselNavContainerStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselNavContainerStyles_unstable')(state);
+    return renderCarouselNavContainer_unstable(state);
+});
+CarouselNavContainer.displayName = 'CarouselNavContainer';

node_modules/@fluentui/react-carousel/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,yCAAyC;AAEhG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQR,iCAAiCM,OAAOC;IAEtDL,uCAAuCM;IACvCL,4BAA4B,0CAA0CK;IAEtE,OAAOP,oCAAoCO;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}

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

@@ -0,0 +1,3 @@
+/**
+ * State used in rendering CarouselNavContainer
+ */ export { };

node_modules/@fluentui/react-carousel/lib/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/components/CarouselNavContainer/index.js

@@ -0,0 +1,4 @@
+export { CarouselNavContainer } from './CarouselNavContainer';
+export { renderCarouselNavContainer_unstable } from './renderCarouselNavContainer';
+export { useCarouselNavContainer_unstable } from './useCarouselNavContainer';
+export { carouselNavContainerClassNames, useCarouselNavContainerStyles_unstable } from './useCarouselNavContainerStyles.styles';

node_modules/@fluentui/react-carousel/lib/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":"AAAA,SAASA,oBAAoB,QAAQ,yBAAyB;AAM9D,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SACEC,8BAA8B,EAC9BC,sCAAsC,QACjC,yCAAyC"}

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

@@ -0,0 +1,24 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CarouselNavContainer
+ */ export const renderCarouselNavContainer_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            !state.autoplayTooltip && state.autoplay && /*#__PURE__*/ _jsx(state.autoplay, {}),
+            state.autoplayTooltip && state.autoplay && /*#__PURE__*/ _jsx(state.autoplayTooltip, {
+                children: /*#__PURE__*/ _jsx(state.autoplay, {})
+            }),
+            !state.prevTooltip && state.prev && /*#__PURE__*/ _jsx(state.prev, {}),
+            state.prevTooltip && state.prev && /*#__PURE__*/ _jsx(state.prevTooltip, {
+                children: /*#__PURE__*/ _jsx(state.prev, {})
+            }),
+            state.root.children,
+            !state.nextTooltip && state.next && /*#__PURE__*/ _jsx(state.next, {}),
+            state.nextTooltip && state.next && /*#__PURE__*/ _jsx(state.nextTooltip, {
+                children: /*#__PURE__*/ _jsx(state.next, {})
+            })
+        ]
+    });
+};

node_modules/@fluentui/react-carousel/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClDF,YAAuCE;IAEvC,qBACE,MAACA,MAAMC,IAAI;;YACR,CAACD,MAAME,eAAe,IAAIF,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;YAC3DH,MAAME,eAAe,IAAIF,MAAMG,QAAQ,kBACtC,KAACH,MAAME,eAAe;0BACpB,cAAA,KAACF,MAAMG,QAAQ;;YAGlB,CAACH,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,kBAAI,KAACL,MAAMK,IAAI;YAC/CL,MAAMI,WAAW,IAAIJ,MAAMK,IAAI,kBAC9B,KAACL,MAAMI,WAAW;0BAChB,cAAA,KAACJ,MAAMK,IAAI;;YAGdL,MAAMC,IAAI,CAACK,QAAQ;YACnB,CAACN,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,kBAAI,KAACR,MAAMQ,IAAI;YAC/CR,MAAMO,WAAW,IAAIP,MAAMQ,IAAI,kBAC9B,KAACR,MAAMO,WAAW;0BAChB,cAAA,KAACP,MAAMQ,IAAI;;;;AAKrB,EAAE"}

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

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { CarouselAutoplayButton } from '../CarouselAutoplayButton/CarouselAutoplayButton';
+import { CarouselButton } from '../CarouselButton/CarouselButton';
+import { Tooltip } from '@fluentui/react-tooltip';
+/**
+ * Create the state required to render CarouselNavContainer.
+ *
+ * The returned state can be modified with hooks such as useCarouselNavContainerStyles_unstable,
+ * before being passed to renderCarouselNavContainer_unstable.
+ *
+ * @param props - props from this instance of CarouselNavContainer
+ * @param ref - reference to root HTMLDivElement of CarouselNavContainer
+ */ export const useCarouselNavContainer_unstable = (props, ref)=>{
+    const { layout } = props;
+    const next = slot.optional(props.next, {
+        defaultProps: {
+            navType: 'next'
+        },
+        elementType: CarouselButton,
+        renderByDefault: true
+    });
+    const prev = slot.optional(props.prev, {
+        defaultProps: {
+            navType: 'prev'
+        },
+        elementType: CarouselButton,
+        renderByDefault: true
+    });
+    const autoplay = slot.optional(props.autoplay, {
+        elementType: CarouselAutoplayButton,
+        renderByDefault: !!props.autoplay || !!props.autoplayTooltip
+    });
+    const nextTooltip = slot.optional(props.nextTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
+    });
+    const prevTooltip = slot.optional(props.prevTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
+    });
+    const autoplayTooltip = slot.optional(props.autoplayTooltip, {
+        defaultProps: {},
+        elementType: Tooltip,
+        renderByDefault: false
+    });
+    return {
+        layout,
+        components: {
+            root: 'div',
+            next: CarouselButton,
+            prev: CarouselButton,
+            autoplay: CarouselAutoplayButton,
+            nextTooltip: Tooltip,
+            prevTooltip: Tooltip,
+            autoplayTooltip: Tooltip
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        next,
+        prev,
+        autoplay,
+        nextTooltip,
+        prevTooltip,
+        autoplayTooltip
+    };
+};

node_modules/@fluentui/react-carousel/lib/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":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,sBAAsB,QAAQ,mDAAmD;AAC1F,SAASC,cAAc,QAAQ,mCAAmC;AAClE,SAASC,OAAO,QAAQ,0BAA0B;AAElD;;;;;;;;CAQC,GACD,OAAO,MAAMC,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,MAAM,EAAE,GAAGF;IACnB,MAAMG,OAA0CR,KAAKS,QAAQ,CAACJ,MAAMG,IAAI,EAAE;QACxEE,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV;QACbW,iBAAiB;IACnB;IAEA,MAAMC,OAA0Cd,KAAKS,QAAQ,CAACJ,MAAMS,IAAI,EAAE;QACxEJ,cAAc;YACZC,SAAS;QACX;QACAC,aAAaV;QACbW,iBAAiB;IACnB;IAEA,MAAME,WAAkDf,KAAKS,QAAQ,CAACJ,MAAMU,QAAQ,EAAE;QACpFH,aAAaX;QACbY,iBAAiB,CAAC,CAACR,MAAMU,QAAQ,IAAI,CAAC,CAACV,MAAMW,eAAe;IAC9D;IAEA,MAAMC,cAAwDjB,KAAKS,QAAQ,CAACJ,MAAMY,WAAW,EAAE;QAC7FP,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAMK,cAAwDlB,KAAKS,QAAQ,CAACJ,MAAMa,WAAW,EAAE;QAC7FR,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,MAAMG,kBAAgEhB,KAAKS,QAAQ,CAACJ,MAAMW,eAAe,EAAE;QACzGN,cAAc,CAAC;QACfE,aAAaT;QACbU,iBAAiB;IACnB;IAEA,OAAO;QACLN;QACAY,YAAY;YACVC,MAAM;YACNZ,MAAMN;YACNY,MAAMZ;YACNa,UAAUd;YACVgB,aAAad;YACbe,aAAaf;YACba,iBAAiBb;QACnB;QACAiB,MAAMpB,KAAKqB,MAAM,CACftB,yBAAyB,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/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.js

@@ -0,0 +1,111 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export 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__*/__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);}"]
+});
+/**
+ * Apply styling to the CarouselNavContainer slots based on the state
+ */
+export 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 = 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 = 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 = 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 = 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/components/CarouselNavContainer/useCarouselNavContainerStyles.styles.raw.js

@@ -0,0 +1,104 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export 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 = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        width: '100%',
+        pointerEvents: 'none'
+    },
+    next: {},
+    prev: {},
+    autoplay: {},
+    inline: {
+        marginTop: tokens.spacingVerticalM
+    },
+    overlay: {
+        position: 'absolute',
+        bottom: tokens.spacingVerticalM,
+        boxSizing: 'border-box'
+    },
+    overlayWide: {
+        bottom: tokens.spacingVerticalM
+    },
+    nextWide: {
+        marginLeft: 'auto'
+    },
+    prevWide: {
+        marginRight: 'auto'
+    },
+    nextOverlayWide: {
+        marginRight: tokens.spacingHorizontalM
+    },
+    prevOverlayWide: {
+        marginLeft: tokens.spacingHorizontalM
+    },
+    autoplayOverlayWide: {
+        marginLeft: tokens.spacingHorizontalM
+    },
+    expanded: {
+        width: '100%',
+        height: '100%',
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+        bottom: 0,
+        '> div': {
+            position: 'relative',
+            bottom: tokens.spacingVerticalL,
+            marginBottom: 0
+        }
+    },
+    nextOverlayExpanded: {
+        position: 'absolute',
+        right: tokens.spacingHorizontalM,
+        top: '50%',
+        transform: 'translateY(-50%)'
+    },
+    prevOverlayExpanded: {
+        position: 'absolute',
+        left: tokens.spacingHorizontalM,
+        top: '50%',
+        transform: 'translateY(-50%)'
+    },
+    autoplayExpanded: {
+        position: 'absolute',
+        bottom: `-${tokens.spacingHorizontalXS}`,
+        left: tokens.spacingHorizontalM,
+        marginBottom: tokens.spacingVerticalM
+    }
+});
+/**
+ * Apply styling to the CarouselNavContainer slots based on the state
+ */ export 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 = 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 = 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 = 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 = mergeClasses(carouselNavContainerClassNames.autoplay, styles.autoplay, layout === 'overlay-expanded' && styles.autoplayExpanded, isWide && isOverlay && styles.autoplayOverlayWide, state.autoplay.className);
+    }
+    return state;
+};