feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';
+import { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';
+import { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * A variant child element of CarouselNav, a singular image button that displays a
+ * preview of card content and will set the carousels active value on click.
+ */ export const CarouselNavImageButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselNavImageButton_unstable(props, ref);
+    useCarouselNavImageButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);
+    return renderCarouselNavImageButton_unstable(state);
+});
+CarouselNavImageButton.displayName = 'CarouselNavImageButton';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nimport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nimport { useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';\nimport type { CarouselNavImageButtonProps } from './CarouselNavImageButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A variant child element of CarouselNav, a singular image button that displays a\n * preview of card content and will set the carousels active value on click.\n */\nexport const CarouselNavImageButton: ForwardRefComponent<CarouselNavImageButtonProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useCarouselNavImageButton_unstable(props, ref);\n\n    useCarouselNavImageButtonStyles_unstable(state);\n    useCustomStyleHook_unstable('useCarouselNavImageButtonStyles_unstable')(state);\n\n    return renderCarouselNavImageButton_unstable(state);\n  },\n);\n\nCarouselNavImageButton.displayName = 'CarouselNavImageButton';\n"],"names":["React","useCarouselNavImageButton_unstable","renderCarouselNavImageButton_unstable","useCarouselNavImageButtonStyles_unstable","useCustomStyleHook_unstable","CarouselNavImageButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,wCAAwC,QAAQ,2CAA2C;AAEpG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,uCAA2EL,MAAMM,UAAU,CACtG,CAACC,OAAOC;IACN,MAAMC,QAAQR,mCAAmCM,OAAOC;IAExDL,yCAAyCM;IACzCL,4BAA4B,4CAA4CK;IAExE,OAAOP,sCAAsCO;AAC/C,GACA;AAEFJ,uBAAuBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavImageButton/CarouselNavImageButton.types.ts"],"sourcesContent":["import { ARIAButtonSlotProps } from '@fluentui/react-aria';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type CarouselNavImageButtonSlots = {\n  /**\n   * ARIA compliant nav buttons used to jump to pages\n   */\n  root: NonNullable<Slot<ARIAButtonSlotProps>>;\n  /**\n   * Required: The image within the button\n   */\n  image: NonNullable<Slot<'img'>>;\n};\n\n/**\n * CarouselNavImageButton Props\n */\nexport type CarouselNavImageButtonProps = ComponentProps<CarouselNavImageButtonSlots> & {};\n\n/**\n * State used in rendering CarouselNavImageButton\n */\nexport type CarouselNavImageButtonState = ComponentState<CarouselNavImageButtonSlots> & {\n  /**\n   * Enables selection state control\n   */\n  selected?: boolean;\n};\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAKE"}

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

@@ -0,0 +1,4 @@
+export { CarouselNavImageButton } from './CarouselNavImageButton';
+export { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';
+export { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';
+export { carouselNavImageButtonClassNames, useCarouselNavImageButtonStyles_unstable } from './useCarouselNavImageButtonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavImageButton/index.ts"],"sourcesContent":["export { CarouselNavImageButton } from './CarouselNavImageButton';\nexport type {\n  CarouselNavImageButtonProps,\n  CarouselNavImageButtonSlots,\n  CarouselNavImageButtonState,\n} from './CarouselNavImageButton.types';\nexport { renderCarouselNavImageButton_unstable } from './renderCarouselNavImageButton';\nexport { useCarouselNavImageButton_unstable } from './useCarouselNavImageButton';\nexport {\n  carouselNavImageButtonClassNames,\n  useCarouselNavImageButtonStyles_unstable,\n} from './useCarouselNavImageButtonStyles.styles';\n"],"names":["CarouselNavImageButton","renderCarouselNavImageButton_unstable","useCarouselNavImageButton_unstable","carouselNavImageButtonClassNames","useCarouselNavImageButtonStyles_unstable"],"mappings":"AAAA,SAASA,sBAAsB,QAAQ,2BAA2B;AAMlE,SAASC,qCAAqC,QAAQ,iCAAiC;AACvF,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SACEC,gCAAgC,EAChCC,wCAAwC,QACnC,2CAA2C"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavImageButton/renderCarouselNavImageButton.js

@@ -0,0 +1,10 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of CarouselNavImageButton
+ */ export const renderCarouselNavImageButton_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {
+        children: /*#__PURE__*/ _jsx(state.image, {})
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavImageButton/renderCarouselNavImageButton.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 { CarouselNavImageButtonState, CarouselNavImageButtonSlots } from './CarouselNavImageButton.types';\n\n/**\n * Render the final JSX of CarouselNavImageButton\n */\nexport const renderCarouselNavImageButton_unstable = (state: CarouselNavImageButtonState): JSXElement => {\n  assertSlots<CarouselNavImageButtonSlots>(state);\n\n  return (\n    <state.root>\n      <state.image />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderCarouselNavImageButton_unstable","state","root","image"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,wCAAwC,CAACC;IACpDF,YAAyCE;IAEzC,qBACE,KAACA,MAAMC,IAAI;kBACT,cAAA,KAACD,MAAME,KAAK;;AAGlB,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavImageButton/useCarouselNavImageButton.js

@@ -0,0 +1,79 @@
+'use client';
+import { useARIAButtonProps } from '@fluentui/react-aria';
+import { getIntrinsicElementProps, isHTMLElement, slot, useEventCallback, useIsomorphicLayoutEffect, useMergedRefs } from '@fluentui/react-utilities';
+import { useTabsterAttributes } from '@fluentui/react-tabster';
+import * as React from 'react';
+import { useCarouselNavIndexContext } from '../CarouselNav/CarouselNavIndexContext';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+/**
+ * Create the state required to render CarouselNavImageButton.
+ *
+ * The returned state can be modified with hooks such as useCarouselNavImageButtonStyles_unstable,
+ * before being passed to renderCarouselNavImageButton_unstable.
+ *
+ * @param props - props from this instance of CarouselNavImageButton
+ * @param ref - reference to root HTMLButtonElement | HTMLAnchorElement of CarouselNavImageButton
+ */ export const useCarouselNavImageButton_unstable = (props, ref)=>{
+    const { onClick, as = 'button' } = props;
+    const index = useCarouselNavIndexContext();
+    const selectPageByIndex = useCarouselContext((ctx)=>ctx.selectPageByIndex);
+    const selected = useCarouselContext((ctx)=>ctx.activeIndex === index);
+    const subscribeForValues = useCarouselContext((ctx)=>ctx.subscribeForValues);
+    const handleClick = useEventCallback((event)=>{
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (!event.defaultPrevented && isHTMLElement(event.target)) {
+            selectPageByIndex(event, index);
+        }
+    });
+    const defaultTabProps = useTabsterAttributes({
+        focusable: {
+            isDefault: selected
+        }
+    });
+    const buttonRef = React.useRef(undefined);
+    const _carouselButton = slot.always(getIntrinsicElementProps(as, useARIAButtonProps(props.as, props)), {
+        elementType: 'button',
+        defaultProps: {
+            ref: useMergedRefs(ref, buttonRef),
+            role: 'tab',
+            type: 'button',
+            'aria-selected': selected,
+            ...defaultTabProps
+        }
+    });
+    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);
+            }
+        });
+    }, [
+        subscribeForValues,
+        index
+    ]);
+    // Override onClick
+    _carouselButton.onClick = handleClick;
+    const image = slot.always(getIntrinsicElementProps('img', {
+        'aria-hidden': true,
+        alt: '',
+        role: 'presentation',
+        ...props.image
+    }), {
+        elementType: 'img'
+    });
+    return {
+        components: {
+            root: 'button',
+            image: 'img'
+        },
+        root: _carouselButton,
+        image,
+        selected
+    };
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js

@@ -0,0 +1,86 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavImageButtonClassNames = {
+  root: 'fui-CarouselNavImageButton',
+  image: 'fui-CarouselNavImageButton__image'
+};
+const imageButtonSize = 40;
+const selectedImageButtonSize = 48;
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    B7ck84d: "f1e4lqlz",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1c5fvqg",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f186qr3g",
+    g2u3we: "fghlq4f",
+    h3c5rm: ["f1gn591s", "fjscplz"],
+    B9xav0g: "fb073pr",
+    zhjwy3: ["fjscplz", "f1gn591s"],
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fq9zq91",
+    a9b677: "feqmc2u",
+    Bqenvij: "fbhnoac",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    eoavqd: "f8491dx"
+  },
+  image: {
+    a9b677: "feqmc2u",
+    Bqenvij: "fbhnoac",
+    Beyfa6y: 0,
+    Bbmb7ep: 0,
+    Btl43ni: 0,
+    B7oj6ja: 0,
+    Dimara: "fq9zq91"
+  },
+  selected: {
+    a9b677: "f124akge",
+    Bqenvij: "ff2sm71"
+  }
+}, {
+  d: [".f1e4lqlz{box-sizing:content-box;}", [".f1c5fvqg{padding:0px;}", {
+    p: -1
+  }], [".f186qr3g{margin:0 var(--spacingHorizontalXS);}", {
+    p: -1
+  }], ".fghlq4f{border-top-color:var(--colorTransparentStroke);}", ".f1gn591s{border-right-color:var(--colorTransparentStroke);}", ".fjscplz{border-left-color:var(--colorTransparentStroke);}", ".fb073pr{border-bottom-color:var(--colorTransparentStroke);}", [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], ".feqmc2u{width:40px;}", ".fbhnoac{height:40px;}", [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], [".fq9zq91{border-radius:var(--borderRadiusSmall);}", {
+    p: -1
+  }], ".f124akge{width:48px;}", ".ff2sm71{height:48px;}"],
+  h: [".f8491dx:hover{cursor:pointer;}"]
+});
+/**
+ * Apply styling to the CarouselNavImageButton slots based on the state
+ */
+export const useCarouselNavImageButtonStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    selected
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);
+  if (state.image) {
+    var _state_image;
+    state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","B7ck84d","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","jrapky","Frg6f3","t21cq0","B6of3ja","B74szlk","g2u3we","h3c5rm","B9xav0g","zhjwy3","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","a9b677","Bqenvij","B68tc82","Bmxbyg5","Bpg54ce","eoavqd","selected","d","p","h","useCarouselNavImageButtonStyles_unstable","state","styles","className","_state_image"],"sources":["useCarouselNavImageButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const carouselNavImageButtonClassNames = {\n    root: 'fui-CarouselNavImageButton',\n    image: 'fui-CarouselNavImageButton__image'\n};\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        boxSizing: 'content-box',\n        padding: '0px',\n        margin: `0 ${tokens.spacingHorizontalXS}`,\n        ...shorthands.borderColor(tokens.colorTransparentStroke),\n        borderRadius: tokens.borderRadiusSmall,\n        width: imageButtonSize + 'px',\n        height: imageButtonSize + 'px',\n        overflow: 'hidden',\n        ':hover': {\n            cursor: 'pointer'\n        }\n    },\n    image: {\n        width: imageButtonSize + 'px',\n        height: imageButtonSize + 'px',\n        borderRadius: tokens.borderRadiusSmall\n    },\n    selected: {\n        width: selectedImageButtonSize + 'px',\n        height: selectedImageButtonSize + 'px'\n    }\n});\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const { selected } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);\n    if (state.image) {\n        var _state_image;\n        state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,gCAAgC,GAAG;EAC5CC,IAAI,EAAE,4BAA4B;EAClCC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,eAAe,GAAG,EAAE;AAC1B,MAAMC,uBAAuB,GAAG,EAAE;AAClC;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGT,QAAA;EAAAK,IAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAA7B,KAAA;IAAAwB,MAAA;IAAAC,OAAA;IAAAN,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAO,QAAA;IAAAN,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAM,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CAuBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,wCAAwC,GAAIC,KAAK,IAAG;EACjE,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGjC,SAAS,CAAC,CAAC;EAC1BgC,KAAK,CAACpC,IAAI,CAACsC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACC,IAAI,EAAEqC,MAAM,CAACrC,IAAI,EAAE+B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACpC,IAAI,CAACsC,SAAS,CAAC;EAC1I,IAAIF,KAAK,CAACnC,KAAK,EAAE;IACb,IAAIsC,YAAY;IAChBH,KAAK,CAACnC,KAAK,CAACqC,SAAS,GAAG1C,YAAY,CAACG,gCAAgC,CAACE,KAAK,EAAEoC,MAAM,CAACpC,KAAK,EAAE8B,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAE,CAACQ,YAAY,GAAGH,KAAK,CAACnC,KAAK,MAAM,IAAI,IAAIsC,YAAY,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,YAAY,CAACD,SAAS,CAAC;EAC/N;EACA,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-carousel/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js

@@ -0,0 +1,48 @@
+'use client';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const carouselNavImageButtonClassNames = {
+    root: 'fui-CarouselNavImageButton',
+    image: 'fui-CarouselNavImageButton__image'
+};
+const imageButtonSize = 40;
+const selectedImageButtonSize = 48;
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        boxSizing: 'content-box',
+        padding: '0px',
+        margin: `0 ${tokens.spacingHorizontalXS}`,
+        ...shorthands.borderColor(tokens.colorTransparentStroke),
+        borderRadius: tokens.borderRadiusSmall,
+        width: imageButtonSize + 'px',
+        height: imageButtonSize + 'px',
+        overflow: 'hidden',
+        ':hover': {
+            cursor: 'pointer'
+        }
+    },
+    image: {
+        width: imageButtonSize + 'px',
+        height: imageButtonSize + 'px',
+        borderRadius: tokens.borderRadiusSmall
+    },
+    selected: {
+        width: selectedImageButtonSize + 'px',
+        height: selectedImageButtonSize + 'px'
+    }
+});
+/**
+ * Apply styling to the CarouselNavImageButton slots based on the state
+ */ export const useCarouselNavImageButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const { selected } = state;
+    const styles = useStyles();
+    state.root.className = mergeClasses(carouselNavImageButtonClassNames.root, styles.root, selected && styles.selected, state.root.className);
+    if (state.image) {
+        var _state_image;
+        state.image.className = mergeClasses(carouselNavImageButtonClassNames.image, styles.image, selected && styles.selected, (_state_image = state.image) === null || _state_image === void 0 ? void 0 : _state_image.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselNavImageButton/useCarouselNavImageButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselNavImageButtonSlots, CarouselNavImageButtonState } from './CarouselNavImageButton.types';\nimport { tokens } from '@fluentui/react-theme';\n\nexport const carouselNavImageButtonClassNames: SlotClassNames<CarouselNavImageButtonSlots> = {\n  root: 'fui-CarouselNavImageButton',\n  image: 'fui-CarouselNavImageButton__image',\n};\n\nconst imageButtonSize = 40;\nconst selectedImageButtonSize = 48;\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    boxSizing: 'content-box',\n    padding: '0px',\n    margin: `0 ${tokens.spacingHorizontalXS}`,\n    ...shorthands.borderColor(tokens.colorTransparentStroke),\n    borderRadius: tokens.borderRadiusSmall,\n    width: imageButtonSize + 'px',\n    height: imageButtonSize + 'px',\n    overflow: 'hidden',\n    ':hover': {\n      cursor: 'pointer',\n    },\n  },\n  image: {\n    width: imageButtonSize + 'px',\n    height: imageButtonSize + 'px',\n    borderRadius: tokens.borderRadiusSmall,\n  },\n  selected: {\n    width: selectedImageButtonSize + 'px',\n    height: selectedImageButtonSize + 'px',\n  },\n});\n\n/**\n * Apply styling to the CarouselNavImageButton slots based on the state\n */\nexport const useCarouselNavImageButtonStyles_unstable = (\n  state: CarouselNavImageButtonState,\n): CarouselNavImageButtonState => {\n  'use no memo';\n\n  const { selected } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    carouselNavImageButtonClassNames.root,\n    styles.root,\n    selected && styles.selected,\n    state.root.className,\n  );\n\n  if (state.image) {\n    state.image.className = mergeClasses(\n      carouselNavImageButtonClassNames.image,\n      styles.image,\n      selected && styles.selected,\n      state.image?.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","carouselNavImageButtonClassNames","root","image","imageButtonSize","selectedImageButtonSize","useStyles","boxSizing","padding","margin","spacingHorizontalXS","borderColor","colorTransparentStroke","borderRadius","borderRadiusSmall","width","height","overflow","cursor","selected","useCarouselNavImageButtonStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAGtE,SAASC,MAAM,QAAQ,wBAAwB;AAE/C,OAAO,MAAMC,mCAAgF;IAC3FC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,kBAAkB;AACxB,MAAMC,0BAA0B;AAEhC;;CAEC,GACD,MAAMC,YAAYT,WAAW;IAC3BK,MAAM;QACJK,WAAW;QACXC,SAAS;QACTC,QAAQ,CAAC,EAAE,EAAET,OAAOU,mBAAmB,EAAE;QACzC,GAAGX,WAAWY,WAAW,CAACX,OAAOY,sBAAsB,CAAC;QACxDC,cAAcb,OAAOc,iBAAiB;QACtCC,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1Ba,UAAU;QACV,UAAU;YACRC,QAAQ;QACV;IACF;IACAf,OAAO;QACLY,OAAOX,kBAAkB;QACzBY,QAAQZ,kBAAkB;QAC1BS,cAAcb,OAAOc,iBAAiB;IACxC;IACAK,UAAU;QACRJ,OAAOV,0BAA0B;QACjCW,QAAQX,0BAA0B;IACpC;AACF;AAEA;;CAEC,GACD,OAAO,MAAMe,2CAA2C,CACtDC;IAEA;IAEA,MAAM,EAAEF,QAAQ,EAAE,GAAGE;IACrB,MAAMC,SAAShB;IAEfe,MAAMnB,IAAI,CAACqB,SAAS,GAAGzB,aACrBG,iCAAiCC,IAAI,EACrCoB,OAAOpB,IAAI,EACXiB,YAAYG,OAAOH,QAAQ,EAC3BE,MAAMnB,IAAI,CAACqB,SAAS;IAGtB,IAAIF,MAAMlB,KAAK,EAAE;YAKbkB;QAJFA,MAAMlB,KAAK,CAACoB,SAAS,GAAGzB,aACtBG,iCAAiCE,KAAK,EACtCmB,OAAOnB,KAAK,EACZgB,YAAYG,OAAOH,QAAQ,GAC3BE,eAAAA,MAAMlB,KAAK,cAAXkB,mCAAAA,aAAaE,SAAS;IAE1B;IAEA,OAAOF;AACT,EAAE"}