feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/ImageSwatch.js

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ImageSwatch", {
+    enumerable: true,
+    get: function() {
+        return ImageSwatch;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useImageSwatch = require("./useImageSwatch");
+const _renderImageSwatch = require("./renderImageSwatch");
+const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const ImageSwatch = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useImageSwatch.useImageSwatch_unstable)(props, ref);
+    (0, _useImageSwatchStylesstyles.useImageSwatchStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useImageSwatchStyles_unstable')(state);
+    return (0, _renderImageSwatch.renderImageSwatch_unstable)(state);
+});
+ImageSwatch.displayName = 'ImageSwatch';

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/ImageSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useImageSwatch_unstable } from './useImageSwatch';\nimport { renderImageSwatch_unstable } from './renderImageSwatch';\nimport { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\nimport type { ImageSwatchProps } from './ImageSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ImageSwatch component is used to render an images, patterns and textures.\n */\nexport const ImageSwatch: ForwardRefComponent<ImageSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useImageSwatch_unstable(props, ref);\n\n  useImageSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);\n\n  return renderImageSwatch_unstable(state);\n});\n\nImageSwatch.displayName = 'ImageSwatch';\n"],"names":["React","useImageSwatch_unstable","renderImageSwatch_unstable","useImageSwatchStyles_unstable","useCustomStyleHook_unstable","ImageSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCAES,mBAAmB;mCAChB,sBAAsB;4CACnB,gCAAgC;qCAElC,kCAAkC;AAKvE,MAAMK,cAAAA,WAAAA,GAAqDL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,YAAQR,uCAAAA,EAAwBM,OAAOC;QAE7CL,yDAAAA,EAA8BM;QAC9BL,gDAAAA,EAA4B,iCAAiCK;IAE7D,WAAOP,6CAAAA,EAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/ImageSwatch.types.js

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

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/ImageSwatch.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageSwatch/ImageSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ImageSwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * ImageSwatch Props\n */\nexport type ImageSwatchProps = ComponentProps<ImageSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Swatch color\n     */\n    src: string;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ImageSwatch\n */\nexport type ImageSwatchState = ComponentState<ImageSwatchSlots> &\n  Pick<ImageSwatchProps, 'color' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAuBA;;CAEC,GACD,WAGI"}

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/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, {
+    ImageSwatch: function() {
+        return _ImageSwatch.ImageSwatch;
+    },
+    imageSwatchClassNames: function() {
+        return _useImageSwatchStylesstyles.imageSwatchClassNames;
+    },
+    renderImageSwatch_unstable: function() {
+        return _renderImageSwatch.renderImageSwatch_unstable;
+    },
+    useImageSwatchStyles_unstable: function() {
+        return _useImageSwatchStylesstyles.useImageSwatchStyles_unstable;
+    },
+    useImageSwatch_unstable: function() {
+        return _useImageSwatch.useImageSwatch_unstable;
+    }
+});
+const _ImageSwatch = require("./ImageSwatch");
+const _renderImageSwatch = require("./renderImageSwatch");
+const _useImageSwatch = require("./useImageSwatch");
+const _useImageSwatchStylesstyles = require("./useImageSwatchStyles.styles");

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageSwatch/index.ts"],"sourcesContent":["export { ImageSwatch } from './ImageSwatch';\nexport type { ImageSwatchProps, ImageSwatchSlots, ImageSwatchState } from './ImageSwatch.types';\nexport { renderImageSwatch_unstable } from './renderImageSwatch';\nexport { useImageSwatch_unstable } from './useImageSwatch';\nexport { imageSwatchClassNames, useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';\n"],"names":["ImageSwatch","renderImageSwatch_unstable","useImageSwatch_unstable","imageSwatchClassNames","useImageSwatchStyles_unstable"],"mappings":";;;;;;;;;;;;eAASA,wBAAW;;;eAIXG,iDAAqB;;;eAFrBF,6CAA0B;;;eAEHG,yDAA6B;;;eADpDF,uCAAuB;;;6BAHJ,gBAAgB;mCAED,sBAAsB;gCACzB,mBAAmB;4CACU,gCAAgC"}

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/renderImageSwatch.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "renderImageSwatch_unstable", {
+    enumerable: true,
+    get: function() {
+        return renderImageSwatch_unstable;
+    }
+});
+const _jsxruntime = require("@fluentui/react-jsx-runtime/jsx-runtime");
+const _reactutilities = require("@fluentui/react-utilities");
+const renderImageSwatch_unstable = (state)=>{
+    (0, _reactutilities.assertSlots)(state);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(state.root, {});
+};

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/renderImageSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageSwatch/renderImageSwatch.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 { ImageSwatchState, ImageSwatchSlots } from './ImageSwatch.types';\n\n/**\n * Render the final JSX of ImageSwatch\n */\nexport const renderImageSwatch_unstable = (state: ImageSwatchState): JSXElement => {\n  assertSlots<ImageSwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderImageSwatch_unstable","state","root"],"mappings":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,6BAA6B,CAACC;QACzCF,2BAAAA,EAA8BE;IAE9B,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/useImageSwatch.js

@@ -0,0 +1,55 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useImageSwatch_unstable", {
+    enumerable: true,
+    get: function() {
+        return useImageSwatch_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 _swatchPicker = require("../../contexts/swatchPicker");
+const useImageSwatch_unstable = (props, ref)=>{
+    const { src, value, onClick, style, ...rest } = props;
+    const size = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.size);
+    const shape = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.shape);
+    const isGrid = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.isGrid);
+    const requestSelectionChange = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.requestSelectionChange);
+    const selected = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.selectedValue === value);
+    const role = isGrid ? 'gridcell' : 'radio';
+    const ariaSelected = isGrid ? {
+        'aria-selected': selected
+    } : {
+        'aria-checked': selected
+    };
+    const onImageSwatchClick = (0, _reactutilities.useEventCallback)((0, _reactutilities.mergeCallbacks)(onClick, (event)=>requestSelectionChange(event, {
+            selectedValue: value,
+            selectedSwatch: src
+        })));
+    return {
+        components: {
+            root: 'button'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('button', {
+            ref,
+            role,
+            ...ariaSelected,
+            onClick: onImageSwatchClick,
+            ...rest,
+            style: {
+                backgroundImage: `url(${src})`,
+                ...style
+            }
+        }), {
+            elementType: 'button'
+        }),
+        value,
+        selected,
+        size,
+        shape
+    };
+};

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/useImageSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageSwatch/useImageSwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';\nimport type { ImageSwatchProps, ImageSwatchState } from './ImageSwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render ImageSwatch.\n *\n * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,\n * before being passed to renderImageSwatch_unstable.\n *\n * @param props - props from this instance of ImageSwatch\n * @param ref - reference to root HTMLDivElement of ImageSwatch\n */\nexport const useImageSwatch_unstable = (\n  props: ImageSwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): ImageSwatchState => {\n  const { src, value, onClick, style, ...rest } = props;\n  const size = useSwatchPickerContextValue_unstable(ctx => ctx.size);\n  const shape = useSwatchPickerContextValue_unstable(ctx => ctx.shape);\n  const isGrid = useSwatchPickerContextValue_unstable(ctx => ctx.isGrid);\n\n  const requestSelectionChange = useSwatchPickerContextValue_unstable(ctx => ctx.requestSelectionChange);\n  const selected = useSwatchPickerContextValue_unstable(ctx => ctx.selectedValue === value);\n\n  const role = isGrid ? 'gridcell' : 'radio';\n  const ariaSelected = isGrid\n    ? {\n        'aria-selected': selected,\n      }\n    : { 'aria-checked': selected };\n\n  const onImageSwatchClick = useEventCallback(\n    mergeCallbacks(onClick, (event: React.MouseEvent<HTMLButtonElement>) =>\n      requestSelectionChange(event, {\n        selectedValue: value,\n        selectedSwatch: src,\n      }),\n    ),\n  );\n\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...ariaSelected,\n        onClick: onImageSwatchClick,\n        ...rest,\n        style: {\n          backgroundImage: `url(${src})`,\n          ...style,\n        },\n      }),\n      { elementType: 'button' },\n    ),\n    value,\n    selected,\n    size,\n    shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useEventCallback","mergeCallbacks","useSwatchPickerContextValue_unstable","useImageSwatch_unstable","props","ref","src","value","onClick","style","rest","size","ctx","shape","isGrid","requestSelectionChange","selected","selectedValue","role","ariaSelected","onImageSwatchClick","event","selectedSwatch","components","root","always","backgroundImage","elementType"],"mappings":"AAAA;;;;;+BAgBaM;;;;;;;iEAdU,QAAQ;gCACkD,4BAA4B;8BAExD,8BAA8B;AAW5E,gCAAgC,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,WAAOT,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,YAAQX,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,aAASZ,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,6BAAyBb,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,eAAWd,kDAAAA,EAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,yBAAqBpB,gCAAAA,MACzBC,8BAAAA,EAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,oBAAAA,CAAK0B,MAAM,KACf3B,wCAAAA,EAAyB,UAAU;YACjCO;YACAa;YACA,GAAGC,YAAY;YACfX,SAASY;YACT,GAAGV,IAAI;YACPD,OAAO;gBACLiB,iBAAiB,CAAC,IAAI,EAAEpB,IAAI,CAAC,CAAC;gBAC9B,GAAGG,KAAK;YACV;QACF,IACA;YAAEkB,aAAa;QAAS;QAE1BpB;QACAS;QACAL;QACAE;IACF;AACF,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.js

@@ -0,0 +1,203 @@
+'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, {
+    imageSwatchClassNames: function() {
+        return imageSwatchClassNames;
+    },
+    useImageSwatchStyles_unstable: function() {
+        return useImageSwatchStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const imageSwatchClassNames = {
+    root: 'fui-ImageSwatch'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r18b5q7m", null, {
+    r: [
+        ".r18b5q7m{display:inline-flex;box-sizing:border-box;border:1px solid var(--colorTransparentStroke);background-size:cover;background-repeat:no-repeat;padding:0;}",
+        ".r18b5q7m:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}",
+        ".r18b5q7m:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}",
+        ".r18b5q7m:focus{outline:none;}",
+        ".r18b5q7m:focus-visible{outline:none;}",
+        ".r18b5q7m[data-fui-focus-visible]{border:none;outline:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus2),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"
+    ],
+    s: [
+        "@media (forced-colors: active){.r18b5q7m{forced-color-adjust:none;}.r18b5q7m:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.r18b5q7m:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"
+    ]
+});
+const useStylesSelected = /*#__PURE__*/ (0, _react.__styles)({
+    selected: {
+        Bgfg5da: 0,
+        B9xav0g: 0,
+        oivjwe: 0,
+        Bn0qgzm: 0,
+        B4g9neb: 0,
+        zhjwy3: 0,
+        wvpqe5: 0,
+        ibv6hh: 0,
+        u1mtju: 0,
+        h3c5rm: 0,
+        vrafjx: 0,
+        Bekrc4i: 0,
+        i8vvqc: 0,
+        g2u3we: 0,
+        icvyot: 0,
+        B4j52fo: 0,
+        irswps: "f3bhgqh",
+        E5pizo: "f8ps3yo",
+        Bvxd0ez: "f106r15f",
+        vajtyg: "ft0nc49",
+        j6ew2k: "f16jq8vy",
+        Bv9i2bc: "f1wdoq7e"
+    }
+}, {
+    d: [
+        [
+            ".f3bhgqh{border:none;}",
+            {
+                p: -2
+            }
+        ],
+        ".f8ps3yo{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke1),inset 0 0 0 5px var(--colorStrokeFocus1);}",
+        ".f16jq8vy[data-fui-focus-visible]{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus2),inset 0 0 0 5px var(--colorStrokeFocus1);}"
+    ],
+    h: [
+        ".f106r15f:hover{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokeHover),inset 0 0 0 6px var(--colorStrokeFocus1);}",
+        ".ft0nc49:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThickest) var(--colorCompoundBrandStrokePressed),inset 0 0 0 7px var(--colorStrokeFocus1);}"
+    ],
+    m: [
+        [
+            "@media (forced-colors: active){.f1wdoq7e{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 5px var(--colorStrokeFocus1);}}",
+            {
+                m: "(forced-colors: active)"
+            }
+        ]
+    ]
+});
+const useSizeStyles = /*#__PURE__*/ (0, _react.__styles)({
+    "extra-small": {
+        a9b677: "f64fuq3",
+        Bqenvij: "fjamq6b"
+    },
+    small: {
+        a9b677: "fq4mcun",
+        Bqenvij: "frvgh55"
+    },
+    medium: {
+        a9b677: "f1w9dchk",
+        Bqenvij: "fxldao9"
+    },
+    large: {
+        a9b677: "f1szoe96",
+        Bqenvij: "f1d2rq10"
+    }
+}, {
+    d: [
+        ".f64fuq3{width:20px;}",
+        ".fjamq6b{height:20px;}",
+        ".fq4mcun{width:24px;}",
+        ".frvgh55{height:24px;}",
+        ".f1w9dchk{width:28px;}",
+        ".fxldao9{height:28px;}",
+        ".f1szoe96{width:32px;}",
+        ".f1d2rq10{height:32px;}"
+    ]
+});
+const useShapeStyles = /*#__PURE__*/ (0, _react.__styles)({
+    rounded: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "ft85np5",
+        Bw81rd7: 0,
+        kdpuga: 0,
+        dm238s: 0,
+        B6xbmo0: 0,
+        B3whbx2: "f2krc9w"
+    },
+    circular: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f44lkw9",
+        Bw81rd7: 0,
+        kdpuga: 0,
+        dm238s: 0,
+        B6xbmo0: 0,
+        B3whbx2: "f1062rbf"
+    },
+    square: {
+        Beyfa6y: 0,
+        Bbmb7ep: 0,
+        Btl43ni: 0,
+        B7oj6ja: 0,
+        Dimara: "f1fabniw",
+        Bw81rd7: 0,
+        kdpuga: 0,
+        dm238s: 0,
+        B6xbmo0: 0,
+        B3whbx2: "fj0ryk1"
+    }
+}, {
+    d: [
+        [
+            ".ft85np5{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f44lkw9{border-radius:var(--borderRadiusCircular);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1062rbf[data-fui-focus-visible]{border-radius:var(--borderRadiusCircular);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".f1fabniw{border-radius:var(--borderRadiusNone);}",
+            {
+                p: -1
+            }
+        ],
+        [
+            ".fj0ryk1[data-fui-focus-visible]{border-radius:var(--borderRadiusNone);}",
+            {
+                p: -1
+            }
+        ]
+    ]
+});
+const useImageSwatchStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const selectedStyles = useStylesSelected();
+    const sizeStyles = useSizeStyles();
+    const shapeStyles = useShapeStyles();
+    const { size = 'medium', shape = 'square' } = state;
+    state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-swatch-picker/lib-commonjs/components/ImageSwatch/useImageSwatchStyles.styles.raw.js

@@ -0,0 +1,131 @@
+'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, {
+    imageSwatchClassNames: function() {
+        return imageSwatchClassNames;
+    },
+    useImageSwatchStyles_unstable: function() {
+        return useImageSwatchStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const _reacttabster = require("@fluentui/react-tabster");
+const imageSwatchClassNames = {
+    root: 'fui-ImageSwatch'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeResetStyles)({
+    display: 'inline-flex',
+    boxSizing: 'border-box',
+    border: `1px solid ${_reacttheme.tokens.colorTransparentStroke}`,
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    padding: '0',
+    ':hover': {
+        cursor: 'pointer',
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+    },
+    ':hover:active': {
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
+    },
+    ':focus': {
+        outline: 'none'
+    },
+    ':focus-visible': {
+        outline: 'none'
+    },
+    ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+        border: 'none',
+        outline: 'none',
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+    }),
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        forcedColorAdjust: 'none',
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThick} ${_reacttheme.tokens.colorBrandStroke2Hover}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorStrokeFocus1}`
+        }
+    }
+});
+const useStylesSelected = (0, _react.makeStyles)({
+    selected: {
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke1}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`,
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${_reacttheme.tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThickest} ${_reacttheme.tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${_reacttheme.tokens.colorStrokeFocus1}`
+        },
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorStrokeFocus2}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
+        }),
+        '@media (forced-colors: active)': {
+            boxShadow: `inset 0 0 0 ${_reacttheme.tokens.strokeWidthThicker} ${_reacttheme.tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${_reacttheme.tokens.colorStrokeFocus1}`
+        }
+    }
+});
+const useSizeStyles = (0, _react.makeStyles)({
+    'extra-small': {
+        width: '20px',
+        height: '20px'
+    },
+    small: {
+        width: '24px',
+        height: '24px'
+    },
+    medium: {
+        width: '28px',
+        height: '28px'
+    },
+    large: {
+        width: '32px',
+        height: '32px'
+    }
+});
+const useShapeStyles = (0, _react.makeStyles)({
+    rounded: {
+        borderRadius: _reacttheme.tokens.borderRadiusMedium,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusMedium
+        })
+    },
+    circular: {
+        borderRadius: _reacttheme.tokens.borderRadiusCircular,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusCircular
+        })
+    },
+    square: {
+        borderRadius: _reacttheme.tokens.borderRadiusNone,
+        ...(0, _reacttabster.createCustomFocusIndicatorStyle)({
+            borderRadius: _reacttheme.tokens.borderRadiusNone
+        })
+    }
+});
+const useImageSwatchStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const selectedStyles = useStylesSelected();
+    const sizeStyles = useSizeStyles();
+    const shapeStyles = useShapeStyles();
+    const { size = 'medium', shape = 'square' } = state;
+    state.root.className = (0, _react.mergeClasses)(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
+    return state;
+};