feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+import { useCarouselSlider_unstable } from './useCarouselSlider';
+import { renderCarouselSlider_unstable } from './renderCarouselSlider';
+import { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';
+import { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * CarouselSlider component - The viewport window that CarouselCards are contained within.
+ */ export const CarouselSlider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselSlider_unstable(props, ref);
+    useCarouselSliderStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);
+    const context = useCarouselSliderContextValues_unstable(state);
+    return renderCarouselSlider_unstable(state, context);
+});
+CarouselSlider.displayName = 'CarouselSlider';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n// import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport { useCarouselSlider_unstable } from './useCarouselSlider';\nimport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nimport { useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\nimport type { CarouselSliderProps } from './CarouselSlider.types';\nimport { useCarouselSliderContextValues_unstable } from './CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselSlider component - The viewport window that CarouselCards are contained within.\n */\nexport const CarouselSlider: ForwardRefComponent<CarouselSliderProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselSlider_unstable(props, ref);\n\n  useCarouselSliderStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselSliderStyles_unstable')(state);\n\n  const context = useCarouselSliderContextValues_unstable(state);\n  return renderCarouselSlider_unstable(state, context);\n});\n\nCarouselSlider.displayName = 'CarouselSlider';\n"],"names":["React","useCarouselSlider_unstable","renderCarouselSlider_unstable","useCarouselSliderStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselSlider","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,iFAAiF;AACjF,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,gCAAgC,QAAQ,mCAAmC;AAEpF,SAASC,uCAAuC,QAAQ,0BAA0B;AAClF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,+BAA2DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC/F,MAAMC,QAAQT,2BAA2BO,OAAOC;IAEhDN,iCAAiCO;IACjCL,4BAA4B,oCAAoCK;IAEhE,MAAMC,UAAUP,wCAAwCM;IACxD,OAAOR,8BAA8BQ,OAAOC;AAC9C,GAAG;AAEHL,eAAeM,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSlider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselSliderSlots = {\n  /**\n   * The root viewport/window of the carousel\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselSlider Props\n */\nexport type CarouselSliderProps = Partial<ComponentProps<CarouselSliderSlots>> & {\n  /**\n   * cardFocus sets the carousel slider as a focus group,\n   * enabling left/right navigation of elements.\n   *\n   * This will also be passed into CarouselCards via context and set the appropriate focus attributes\n   *\n   * Defaults: false\n   */\n  cardFocus?: boolean;\n};\n\nexport type CarouselSliderContextValue = Pick<CarouselSliderProps, 'cardFocus'>;\n/**\n * State used in rendering CarouselSlider\n */\nexport type CarouselSliderState = ComponentState<CarouselSliderSlots> & CarouselSliderContextValue;\n"],"names":[],"mappings":"AAyBA;;CAEC,GACD,WAAmG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/CarouselSliderContext.js

@@ -0,0 +1,22 @@
+'use client';
+import * as React from 'react';
+const carouselSliderContext = React.createContext(undefined);
+export const carouselSliderContextDefaultValue = {
+    cardFocus: false
+};
+export const useCarouselSliderContext = ()=>{
+    var _React_useContext;
+    return (_React_useContext = React.useContext(carouselSliderContext)) !== null && _React_useContext !== void 0 ? _React_useContext : carouselSliderContextDefaultValue;
+};
+export const CarouselSliderContextProvider = carouselSliderContext.Provider;
+export function useCarouselSliderContextValues_unstable(state) {
+    const { cardFocus } = state;
+    const carouselSlider = React.useMemo(()=>({
+            cardFocus
+        }), [
+        cardFocus
+    ]);
+    return {
+        carouselSlider
+    };
+}

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/CarouselSliderContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselSlider/CarouselSliderContext.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { CarouselSliderContextValue, CarouselSliderState } from './CarouselSlider.types';\n\nconst carouselSliderContext = React.createContext<CarouselSliderContextValue | undefined>(undefined);\n\nexport const carouselSliderContextDefaultValue: CarouselSliderContextValue = {\n  cardFocus: false,\n};\n\nexport const useCarouselSliderContext = (): CarouselSliderContextValue =>\n  React.useContext(carouselSliderContext) ?? carouselSliderContextDefaultValue;\n\nexport const CarouselSliderContextProvider = carouselSliderContext.Provider;\n\n/**\n * Context shared between CarouselSlider and its children components\n */\nexport type CarouselSliderContextValues = {\n  carouselSlider: CarouselSliderContextValue;\n};\n\nexport function useCarouselSliderContextValues_unstable(state: CarouselSliderState): CarouselSliderContextValues {\n  const { cardFocus } = state;\n  const carouselSlider = React.useMemo(\n    () => ({\n      cardFocus,\n    }),\n    [cardFocus],\n  );\n\n  return { carouselSlider };\n}\n"],"names":["React","carouselSliderContext","createContext","undefined","carouselSliderContextDefaultValue","cardFocus","useCarouselSliderContext","useContext","CarouselSliderContextProvider","Provider","useCarouselSliderContextValues_unstable","state","carouselSlider","useMemo"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,MAAMC,wBAAwBD,MAAME,aAAa,CAAyCC;AAE1F,OAAO,MAAMC,oCAAgE;IAC3EC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,2BAA2B;QACtCN;WAAAA,CAAAA,oBAAAA,MAAMO,UAAU,CAACN,oCAAjBD,+BAAAA,oBAA2CI;EAAkC;AAE/E,OAAO,MAAMI,gCAAgCP,sBAAsBQ,QAAQ,CAAC;AAS5E,OAAO,SAASC,wCAAwCC,KAA0B;IAChF,MAAM,EAAEN,SAAS,EAAE,GAAGM;IACtB,MAAMC,iBAAiBZ,MAAMa,OAAO,CAClC,IAAO,CAAA;YACLR;QACF,CAAA,GACA;QAACA;KAAU;IAGb,OAAO;QAAEO;IAAe;AAC1B"}

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

@@ -0,0 +1,4 @@
+export { CarouselSlider } from './CarouselSlider';
+export { renderCarouselSlider_unstable } from './renderCarouselSlider';
+export { useCarouselSlider_unstable } from './useCarouselSlider';
+export { carouselSliderClassNames, useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselSlider/index.ts"],"sourcesContent":["export { CarouselSlider } from './CarouselSlider';\nexport type {\n  CarouselSliderContextValue,\n  CarouselSliderProps,\n  CarouselSliderSlots,\n  CarouselSliderState,\n} from './CarouselSlider.types';\nexport { renderCarouselSlider_unstable } from './renderCarouselSlider';\nexport { useCarouselSlider_unstable } from './useCarouselSlider';\nexport { carouselSliderClassNames, useCarouselSliderStyles_unstable } from './useCarouselSliderStyles.styles';\n"],"names":["CarouselSlider","renderCarouselSlider_unstable","useCarouselSlider_unstable","carouselSliderClassNames","useCarouselSliderStyles_unstable"],"mappings":"AAAA,SAASA,cAAc,QAAQ,mBAAmB;AAOlD,SAASC,6BAA6B,QAAQ,yBAAyB;AACvE,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,wBAAwB,EAAEC,gCAAgC,QAAQ,mCAAmC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/renderCarouselSlider.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { CarouselSliderContextProvider } from './CarouselSliderContext';
+/**
+ * Render the final JSX of CarouselSlider
+ */ export const renderCarouselSlider_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(CarouselSliderContextProvider, {
+        value: contextValues.carouselSlider,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/renderCarouselSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselSlider/renderCarouselSlider.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 { CarouselSliderState, CarouselSliderSlots } from './CarouselSlider.types';\nimport { CarouselSliderContextProvider, CarouselSliderContextValues } from './CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselSlider\n */\nexport const renderCarouselSlider_unstable = (\n  state: CarouselSliderState,\n  contextValues: CarouselSliderContextValues,\n): JSXElement => {\n  assertSlots<CarouselSliderSlots>(state);\n\n  return (\n    <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n      <state.root />\n    </CarouselSliderContextProvider>\n  );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselSlider_unstable","state","contextValues","value","carouselSlider","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAASC,6BAA6B,QAAqC,0BAA0B;AAErG;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEAJ,YAAiCG;IAEjC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/useCarouselSlider.js

@@ -0,0 +1,39 @@
+'use client';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+/**
+ * Create the state required to render CarouselSlider.
+ *
+ * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,
+ * before being passed to renderCarouselSlider_unstable.
+ *
+ * @param props - props from this instance of CarouselSlider
+ * @param ref - reference to root HTMLDivElement of CarouselSlider
+ */ export const useCarouselSlider_unstable = (props, ref)=>{
+    const { cardFocus = false } = props;
+    const circular = useCarouselContext((ctx)=>ctx.circular);
+    const focusableGroupAttr = useArrowNavigationGroup({
+        circular,
+        axis: 'horizontal',
+        memorizeCurrent: false,
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        unstable_hasDefault: true
+    });
+    const focusProps = cardFocus ? focusableGroupAttr : {};
+    return {
+        cardFocus,
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role: 'group',
+            ...props,
+            ...focusProps
+        }), {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/useCarouselSlider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSlider.ts"],"sourcesContent":["'use client';\n\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type { CarouselSliderProps, CarouselSliderState } from './CarouselSlider.types';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselSlider.\n *\n * The returned state can be modified with hooks such as useCarouselSliderStyles_unstable,\n * before being passed to renderCarouselSlider_unstable.\n *\n * @param props - props from this instance of CarouselSlider\n * @param ref - reference to root HTMLDivElement of CarouselSlider\n */\nexport const useCarouselSlider_unstable = (\n  props: CarouselSliderProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselSliderState => {\n  const { cardFocus = false } = props;\n  const circular = useCarouselContext(ctx => ctx.circular);\n  const focusableGroupAttr = useArrowNavigationGroup({\n    circular,\n    axis: 'horizontal',\n    memorizeCurrent: false,\n    // eslint-disable-next-line @typescript-eslint/naming-convention\n    unstable_hasDefault: true,\n  });\n\n  const focusProps = cardFocus ? focusableGroupAttr : {};\n\n  return {\n    cardFocus,\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'group',\n        ...props,\n        ...focusProps,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","useArrowNavigationGroup","useCarouselContext_unstable","useCarouselContext","useCarouselSlider_unstable","props","ref","cardFocus","circular","ctx","focusableGroupAttr","axis","memorizeCurrent","unstable_hasDefault","focusProps","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAG/B,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,YAAY,KAAK,EAAE,GAAGF;IAC9B,MAAMG,WAAWL,mBAAmBM,CAAAA,MAAOA,IAAID,QAAQ;IACvD,MAAME,qBAAqBT,wBAAwB;QACjDO;QACAG,MAAM;QACNC,iBAAiB;QACjB,gEAAgE;QAChEC,qBAAqB;IACvB;IAEA,MAAMC,aAAaP,YAAYG,qBAAqB,CAAC;IAErD,OAAO;QACLH;QACAQ,YAAY;YACVC,MAAM;QACR;QACAA,MAAMjB,KAAKkB,MAAM,CACfnB,yBAAyB,OAAO;YAC9BQ;YACAY,MAAM;YACN,GAAGb,KAAK;YACR,GAAGS,UAAU;QACf,IACA;YAAEK,aAAa;QAAM;IAEzB;AACF,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js

@@ -0,0 +1,37 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+export const carouselSliderClassNames = {
+  root: 'fui-CarouselSlider'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Eiaeu8: "f1115ve7"
+  },
+  elevated: {
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f1vkj2z1"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1115ve7{overflow-anchor:none;}", [".f1vkj2z1{gap:var(--spacingHorizontalXXL);}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the CarouselSlider slots based on the state
+ */
+export const useCarouselSliderStyles_unstable = state => {
+  'use no memo';
+
+  const appearance = useCarouselContext(context => context.appearance);
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/useCarouselSliderStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselSliderClassNames","root","useStyles","mc9l5x","Eiaeu8","elevated","i8kkvl","Belr9w4","rmohyg","d","p","useCarouselSliderStyles_unstable","state","appearance","context","styles","className"],"sources":["useCarouselSliderStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\nexport const carouselSliderClassNames = {\n    root: 'fui-CarouselSlider'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        overflowAnchor: 'none'\n    },\n    elevated: {\n        gap: tokens.spacingHorizontalXXL\n    }\n});\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */ export const useCarouselSliderStyles_unstable = (state)=>{\n    'use no memo';\n    const appearance = useCarouselContext((context)=>context.appearance);\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,2BAA2B,IAAIC,kBAAkB,QAAQ,oBAAoB;AACtF,OAAO,MAAMC,wBAAwB,GAAG;EACpCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,MAAA;IAAAC,MAAA;EAAA;EAAAC,QAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;AAAA,CAQrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,gCAAgC,GAAIC,KAAK,IAAG;EACzD,aAAa;;EACb,MAAMC,UAAU,GAAGd,kBAAkB,CAAEe,OAAO,IAAGA,OAAO,CAACD,UAAU,CAAC;EACpE,MAAME,MAAM,GAAGb,SAAS,CAAC,CAAC;EAC1BU,KAAK,CAACX,IAAI,CAACe,SAAS,GAAGpB,YAAY,CAACI,wBAAwB,CAACC,IAAI,EAAEc,MAAM,CAACd,IAAI,EAAEY,UAAU,KAAK,UAAU,IAAIE,MAAM,CAACV,QAAQ,EAAEO,KAAK,CAACX,IAAI,CAACe,SAAS,CAAC;EACnJ,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js

@@ -0,0 +1,27 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+export const carouselSliderClassNames = {
+    root: 'fui-CarouselSlider'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        overflowAnchor: 'none'
+    },
+    elevated: {
+        gap: tokens.spacingHorizontalXXL
+    }
+});
+/**
+ * Apply styling to the CarouselSlider slots based on the state
+ */ export const useCarouselSliderStyles_unstable = (state)=>{
+    'use no memo';
+    const appearance = useCarouselContext((context)=>context.appearance);
+    const styles = useStyles();
+    state.root.className = mergeClasses(carouselSliderClassNames.root, styles.root, appearance === 'elevated' && styles.elevated, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselSlider/useCarouselSliderStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselSlider/useCarouselSliderStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport { tokens } from '@fluentui/react-theme';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\nimport type { CarouselSliderSlots, CarouselSliderState } from './CarouselSlider.types';\n\nexport const carouselSliderClassNames: SlotClassNames<CarouselSliderSlots> = {\n  root: 'fui-CarouselSlider',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    overflowAnchor: 'none',\n  },\n  elevated: {\n    gap: tokens.spacingHorizontalXXL,\n  },\n});\n\n/**\n * Apply styling to the CarouselSlider slots based on the state\n */\nexport const useCarouselSliderStyles_unstable = (state: CarouselSliderState): CarouselSliderState => {\n  'use no memo';\n\n  const appearance = useCarouselContext(context => context.appearance);\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    carouselSliderClassNames.root,\n    styles.root,\n    appearance === 'elevated' && styles.elevated,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","useCarouselContext_unstable","useCarouselContext","carouselSliderClassNames","root","useStyles","display","overflowAnchor","elevated","gap","spacingHorizontalXXL","useCarouselSliderStyles_unstable","state","appearance","context","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAE1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAIvF,OAAO,MAAMC,2BAAgE;IAC3EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,SAAS;QACTC,gBAAgB;IAClB;IACAC,UAAU;QACRC,KAAKT,OAAOU,oBAAoB;IAClC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,mCAAmC,CAACC;IAC/C;IAEA,MAAMC,aAAaX,mBAAmBY,CAAAA,UAAWA,QAAQD,UAAU;IACnE,MAAME,SAASV;IAEfO,MAAMR,IAAI,CAACY,SAAS,GAAGjB,aACrBI,yBAAyBC,IAAI,EAC7BW,OAAOX,IAAI,EACXS,eAAe,cAAcE,OAAOP,QAAQ,EAC5CI,MAAMR,IAAI,CAACY,SAAS;IAGtB,OAAOJ;AACT,EAAE"}