feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useColorSwatch_unstable } from './useColorSwatch';
+import { renderColorSwatch_unstable } from './renderColorSwatch';
+import { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * ColorSwatch component is used to render a colors, icons and gradients.
+ */ export const ColorSwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useColorSwatch_unstable(props, ref);
+    useColorSwatchStyles_unstable(state);
+    useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);
+    return renderColorSwatch_unstable(state);
+});
+ColorSwatch.displayName = 'ColorSwatch';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useColorSwatch_unstable } from './useColorSwatch';\nimport { renderColorSwatch_unstable } from './renderColorSwatch';\nimport { useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\nimport type { ColorSwatchProps } from './ColorSwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ColorSwatch component is used to render a colors, icons and gradients.\n */\nexport const ColorSwatch: ForwardRefComponent<ColorSwatchProps> = React.forwardRef((props, ref) => {\n  const state = useColorSwatch_unstable(props, ref);\n\n  useColorSwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useColorSwatchStyles_unstable')(state);\n\n  return renderColorSwatch_unstable(state);\n});\n\nColorSwatch.displayName = 'ColorSwatch';\n"],"names":["React","useColorSwatch_unstable","renderColorSwatch_unstable","useColorSwatchStyles_unstable","useCustomStyleHook_unstable","ColorSwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/ColorSwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type ColorSwatchSlots = {\n  root: NonNullable<Slot<'button'>>;\n  icon?: Slot<'span'>;\n  disabledIcon?: Slot<'span'>;\n};\n\n/**\n * ColorSwatch Props\n */\nexport type ColorSwatchProps = ComponentProps<ColorSwatchSlots> &\n  Pick<SwatchPickerProps, 'size' | 'shape'> & {\n    /**\n     * Border color when contrast is low\n     */\n    borderColor?: string;\n\n    /**\n     * Swatch color\n     */\n    color: string;\n\n    /**\n     * Whether the swatch is disabled\n     */\n    disabled?: boolean;\n\n    /**\n     * Swatch value\n     */\n    value: string;\n  };\n\n/**\n * State used in rendering ColorSwatch\n */\nexport type ColorSwatchState = ComponentState<ColorSwatchSlots> &\n  Pick<ColorSwatchProps, 'color' | 'disabled' | 'size' | 'shape' | 'value'> & {\n    selected: boolean;\n  };\n"],"names":[],"mappings":"AAmCA;;CAEC,GACD,WAGI"}

node_modules/@fluentui/react-swatch-picker/lib/components/ColorSwatch/index.js

@@ -0,0 +1,4 @@
+export { ColorSwatch } from './ColorSwatch';
+export { renderColorSwatch_unstable } from './renderColorSwatch';
+export { useColorSwatch_unstable } from './useColorSwatch';
+export { colorSwatchClassNames, swatchCSSVars, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/index.ts"],"sourcesContent":["export { ColorSwatch } from './ColorSwatch';\nexport type { ColorSwatchProps, ColorSwatchSlots, ColorSwatchState } from './ColorSwatch.types';\nexport { renderColorSwatch_unstable } from './renderColorSwatch';\nexport { useColorSwatch_unstable } from './useColorSwatch';\nexport { colorSwatchClassNames, swatchCSSVars, useColorSwatchStyles_unstable } from './useColorSwatchStyles.styles';\n"],"names":["ColorSwatch","renderColorSwatch_unstable","useColorSwatch_unstable","colorSwatchClassNames","swatchCSSVars","useColorSwatchStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,aAAa,EAAEC,6BAA6B,QAAQ,gCAAgC"}

node_modules/@fluentui/react-swatch-picker/lib/components/ColorSwatch/renderColorSwatch.js

@@ -0,0 +1,14 @@
+  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 ColorSwatch
+ */ export const renderColorSwatch_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.root.children,
+            state.icon && /*#__PURE__*/ _jsx(state.icon, {}),
+            state.disabled && state.disabledIcon && /*#__PURE__*/ _jsx(state.disabledIcon, {})
+        ]
+    });
+};

node_modules/@fluentui/react-swatch-picker/lib/components/ColorSwatch/renderColorSwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ColorSwatch/renderColorSwatch.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 { ColorSwatchState, ColorSwatchSlots } from './ColorSwatch.types';\n\n/**\n * Render the final JSX of ColorSwatch\n */\nexport const renderColorSwatch_unstable = (state: ColorSwatchState): JSXElement => {\n  assertSlots<ColorSwatchSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.icon && <state.icon />}\n      {state.disabled && state.disabledIcon && <state.disabledIcon />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderColorSwatch_unstable","state","root","children","icon","disabled","disabledIcon"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,IAAI,kBAAI,KAACH,MAAMG,IAAI;YACzBH,MAAMI,QAAQ,IAAIJ,MAAMK,YAAY,kBAAI,KAACL,MAAMK,YAAY;;;AAGlE,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib/components/ColorSwatch/useColorSwatch.js

@@ -0,0 +1,77 @@
+'use client';
+import * as React from 'react';
+import { slot, useEventCallback, getIntrinsicElementProps, mergeCallbacks } from '@fluentui/react-utilities';
+import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+import { swatchCSSVars } from './useColorSwatchStyles.styles';
+import { ProhibitedFilled } from '@fluentui/react-icons';
+import { tokens } from '@fluentui/react-theme';
+/**
+ * Create the state required to render ColorSwatch.
+ *
+ * The returned state can be modified with hooks such as useColorSwatchStyles_unstable,
+ * before being passed to renderColorSwatch_unstable.
+ *
+ * @param props - props from this instance of ColorSwatch
+ * @param ref - reference to root HTMLButtonElement of ColorSwatch
+ */ export const useColorSwatch_unstable = (props, ref)=>{
+    const { borderColor, color, disabled, disabledIcon, icon, value, onClick, size, shape, style, ...rest } = props;
+    const _size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const _shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
+    const requestSelectionChange = useSwatchPickerContextValue_unstable((ctx)=>ctx.requestSelectionChange);
+    const selected = useSwatchPickerContextValue_unstable((ctx)=>ctx.selectedValue === value);
+    const onColorSwatchClick = useEventCallback(mergeCallbacks(onClick, (event)=>requestSelectionChange(event, {
+            selectedValue: value,
+            selectedSwatch: color
+        })));
+    const rootVariables = {
+        [swatchCSSVars.color]: color,
+        [swatchCSSVars.borderColor]: borderColor !== null && borderColor !== void 0 ? borderColor : tokens.colorTransparentStroke
+    };
+    const role = isGrid ? 'gridcell' : 'radio';
+    const ariaSelected = isGrid ? {
+        'aria-selected': selected
+    } : {
+        'aria-checked': selected
+    };
+    const iconShorthand = slot.optional(icon, {
+        elementType: 'span'
+    });
+    const disabledIconShorthand = slot.optional(disabledIcon, {
+        defaultProps: {
+            children: /*#__PURE__*/ React.createElement(ProhibitedFilled, null)
+        },
+        renderByDefault: true,
+        elementType: 'span'
+    });
+    return {
+        components: {
+            root: 'button',
+            icon: 'span',
+            disabledIcon: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('button', {
+            ref,
+            role,
+            ...ariaSelected,
+            onClick: onColorSwatchClick,
+            type: 'button',
+            disabled,
+            ...rest,
+            style: {
+                ...rootVariables,
+                ...style
+            }
+        }), {
+            elementType: 'button'
+        }),
+        icon: iconShorthand,
+        disabledIcon: disabledIconShorthand,
+        disabled,
+        size: size !== null && size !== void 0 ? size : _size,
+        shape: shape !== null && shape !== void 0 ? shape : _shape,
+        selected,
+        color,
+        value
+    };
+};

node_modules/@fluentui/react-swatch-picker/lib/components/ColorSwatch/useColorSwatchStyles.styles.js

@@ -0,0 +1,235 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const colorSwatchClassNames = {
+  root: 'fui-ColorSwatch',
+  icon: 'fui-ColorSwatch__icon',
+  disabledIcon: 'fui-ColorSwatch__disabledIcon'
+};
+export const swatchCSSVars = {
+  color: `--fui-SwatchPicker--color`,
+  borderColor: `--fui-SwatchPicker--borderColor`
+};
+const {
+  color,
+  borderColor
+} = swatchCSSVars;
+/**
+ * Styles for the root slot
+ */
+const useResetStyles = /*#__PURE__*/__resetStyles("ryw27oi", null, {
+  r: [".ryw27oi{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;box-sizing:border-box;border:1px solid var(--fui-SwatchPicker--borderColor);background:var(--fui-SwatchPicker--color);overflow:hidden;padding:0;}", ".ryw27oi:hover{cursor:pointer;border:none;box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", ".ryw27oi:hover:active{border:none;box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}", ".ryw27oi:focus{outline:none;}", ".ryw27oi:focus-visible{outline:none;}", ".ryw27oi[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){.ryw27oi{forced-color-adjust:none;}.ryw27oi:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke2Hover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}.ryw27oi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorBrandStroke2Pressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}}"]
+});
+const useStyles = /*#__PURE__*/__styles({
+  disabled: {
+    eoavqd: "fphbwmw",
+    Bvxd0ez: "f1q3txrk",
+    Be968up: "f10pb1y8"
+  },
+  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"
+  },
+  selectedSmall: {
+    E5pizo: "fxflcoq",
+    Bvxd0ez: "fha7ylp",
+    vajtyg: "fb3iqi"
+  }
+}, {
+  h: [".fphbwmw:hover{cursor:not-allowed;}", ".f1q3txrk:hover{box-shadow:none;}", ".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);}", ".fha7ylp:hover{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokeHover),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", ".fb3iqi:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThicker) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThickest) var(--colorStrokeFocus1);}"],
+  m: [["@media (forced-colors: active){.f10pb1y8:hover{box-shadow:none;}}", {
+    m: "(forced-colors: active)"
+  }], ["@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)"
+  }]],
+  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);}", ".fxflcoq{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}"]
+});
+const useSizeStyles = /*#__PURE__*/__styles({
+  "extra-small": {
+    a9b677: "f64fuq3",
+    Bqenvij: "fjamq6b",
+    Bvxd0ez: "fnzblak",
+    Bfsrqk8: 0,
+    B9zn80p: 0,
+    libdba: 0,
+    qi15n7: 0,
+    G6mxvm: 0,
+    Bpld233: 0,
+    B2v0cj4: 0,
+    qv9p00: 0,
+    Bg6oviu: 0,
+    Bk6r4ia: 0,
+    Bckajt6: 0,
+    Bone85h: 0,
+    hkxzgu: 0,
+    b661bw: 0,
+    kpb45w: 0,
+    uiygdg: 0,
+    rljib7: "f18wa7jm",
+    vajtyg: "faswyoo"
+  },
+  small: {
+    a9b677: "fq4mcun",
+    Bqenvij: "frvgh55",
+    Bfsrqk8: 0,
+    B9zn80p: 0,
+    libdba: 0,
+    qi15n7: 0,
+    G6mxvm: 0,
+    Bpld233: 0,
+    B2v0cj4: 0,
+    qv9p00: 0,
+    Bg6oviu: 0,
+    Bk6r4ia: 0,
+    Bckajt6: 0,
+    Bone85h: 0,
+    hkxzgu: 0,
+    b661bw: 0,
+    kpb45w: 0,
+    uiygdg: 0,
+    rljib7: "f18wa7jm",
+    vajtyg: "faswyoo"
+  },
+  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;}"],
+  h: [".fnzblak:hover{box-shadow:inset 0 0 0 var(--strokeWidthThin) var(--colorBrandStroke1),inset 0 0 0 var(--strokeWidthThick) var(--colorStrokeFocus1);}", [".f18wa7jm:hover:active{border:none;}", {
+    p: -2
+  }], ".faswyoo:hover:active{box-shadow:inset 0 0 0 var(--strokeWidthThick) var(--colorCompoundBrandStrokePressed),inset 0 0 0 var(--strokeWidthThicker) var(--colorStrokeFocus1);}", [".f18wa7jm:hover:active{border:none;}", {
+    p: -2
+  }]]
+});
+const useShapeStyles = /*#__PURE__*/__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 useIconStyles = /*#__PURE__*/__styles({
+  disabledIcon: {
+    sj55zd: "fqpbvvt",
+    Bhu2qc9: "f14y0k3d"
+  },
+  icon: {
+    qhf8xq: "f1euv43f",
+    mc9l5x: "f22iagw",
+    qb2dma: "f7nlbp4"
+  },
+  "extra-small": {
+    Be2twd7: "f4ybsrx"
+  },
+  small: {
+    Be2twd7: "f4ybsrx"
+  },
+  medium: {
+    Be2twd7: "fe5j1ua"
+  },
+  large: {
+    Be2twd7: "f1rt2boy"
+  }
+}, {
+  d: [".fqpbvvt{color:var(--colorNeutralForegroundInverted);}", ".f14y0k3d{filter:drop-shadow(0 1px 1px rgb(0 0 0 / 1));}", ".f1euv43f{position:absolute;}", ".f22iagw{display:flex;}", ".f7nlbp4{align-self:center;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}", ".f1rt2boy{font-size:24px;}"]
+});
+/**
+ * Apply styling to the ColorSwatch slots based on the state
+ */
+export const useColorSwatchStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    size = 'medium',
+    shape = 'square'
+  } = state;
+  const resetStyles = useResetStyles();
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const shapeStyles = useShapeStyles();
+  const iconStyles = useIconStyles();
+  const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
+  state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
+  if (state.disabled && state.disabledIcon) {
+    state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
+  }
+  if (state.icon) {
+    state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-swatch-picker/lib/components/ColorSwatch/useColorSwatchStyles.styles.raw.js

@@ -0,0 +1,187 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const colorSwatchClassNames = {
+    root: 'fui-ColorSwatch',
+    icon: 'fui-ColorSwatch__icon',
+    disabledIcon: 'fui-ColorSwatch__disabledIcon'
+};
+export const swatchCSSVars = {
+    color: `--fui-SwatchPicker--color`,
+    borderColor: `--fui-SwatchPicker--borderColor`
+};
+const { color, borderColor } = swatchCSSVars;
+/**
+ * Styles for the root slot
+ */ const useResetStyles = makeResetStyles({
+    display: 'inline-flex',
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    boxSizing: 'border-box',
+    border: `1px solid var(${borderColor})`,
+    background: `var(${color})`,
+    overflow: 'hidden',
+    padding: '0',
+    ':hover': {
+        cursor: 'pointer',
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
+    },
+    ':hover:active': {
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`
+    },
+    ':focus': {
+        outline: 'none'
+    },
+    ':focus-visible': {
+        outline: 'none'
+    },
+    ...createCustomFocusIndicatorStyle({
+        border: 'none',
+        outline: 'none',
+        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus2}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
+    }),
+    // High contrast styles
+    '@media (forced-colors: active)': {
+        forcedColorAdjust: 'none',
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke2Hover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`
+        }
+    }
+});
+const useStyles = makeStyles({
+    disabled: {
+        ':hover': {
+            cursor: 'not-allowed',
+            boxShadow: 'none'
+        },
+        '@media (forced-colors: active)': {
+            ':hover': {
+                boxShadow: 'none'
+            }
+        }
+    },
+    selected: {
+        border: 'none',
+        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke1}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`,
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 6px ${tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 7px ${tokens.colorStrokeFocus1}`
+        },
+        ...createCustomFocusIndicatorStyle({
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus2}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`
+        }),
+        '@media (forced-colors: active)': {
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorBrandStroke2Pressed}, inset 0 0 0 5px ${tokens.colorStrokeFocus1}`
+        }
+    },
+    selectedSmall: {
+        boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`,
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokeHover}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThickest} ${tokens.colorStrokeFocus1}`
+        }
+    }
+});
+const useSizeStyles = makeStyles({
+    'extra-small': {
+        width: '20px',
+        height: '20px',
+        ':hover': {
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThin} ${tokens.colorBrandStroke1}, inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorStrokeFocus1}`
+        },
+        ':hover:active': {
+            border: 'none',
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
+        }
+    },
+    small: {
+        width: '24px',
+        height: '24px',
+        ':hover:active': {
+            border: 'none',
+            boxShadow: `inset 0 0 0 ${tokens.strokeWidthThick} ${tokens.colorCompoundBrandStrokePressed}, inset 0 0 0 ${tokens.strokeWidthThicker} ${tokens.colorStrokeFocus1}`
+        }
+    },
+    medium: {
+        width: '28px',
+        height: '28px'
+    },
+    large: {
+        width: '32px',
+        height: '32px'
+    }
+});
+const useShapeStyles = makeStyles({
+    rounded: {
+        borderRadius: tokens.borderRadiusMedium,
+        ...createCustomFocusIndicatorStyle({
+            borderRadius: tokens.borderRadiusMedium
+        })
+    },
+    circular: {
+        borderRadius: tokens.borderRadiusCircular,
+        ...createCustomFocusIndicatorStyle({
+            borderRadius: tokens.borderRadiusCircular
+        })
+    },
+    square: {
+        borderRadius: tokens.borderRadiusNone,
+        ...createCustomFocusIndicatorStyle({
+            borderRadius: tokens.borderRadiusNone
+        })
+    }
+});
+const useIconStyles = makeStyles({
+    disabledIcon: {
+        color: tokens.colorNeutralForegroundInverted,
+        filter: 'drop-shadow(0 1px 1px rgb(0 0 0 / 1))'
+    },
+    icon: {
+        position: 'absolute',
+        display: 'flex',
+        alignSelf: 'center'
+    },
+    'extra-small': {
+        fontSize: '16px'
+    },
+    small: {
+        fontSize: '16px'
+    },
+    medium: {
+        fontSize: '20px'
+    },
+    large: {
+        fontSize: '24px'
+    }
+});
+/**
+ * Apply styling to the ColorSwatch slots based on the state
+ */ export const useColorSwatchStyles_unstable = (state)=>{
+    'use no memo';
+    const { size = 'medium', shape = 'square' } = state;
+    const resetStyles = useResetStyles();
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    const shapeStyles = useShapeStyles();
+    const iconStyles = useIconStyles();
+    const smallerSelectedStyles = size === 'small' || size === 'extra-small' ? styles.selectedSmall : '';
+    state.root.className = mergeClasses(colorSwatchClassNames.root, resetStyles, sizeStyles[size], shapeStyles[shape], state.selected && styles.selected, state.selected && smallerSelectedStyles, state.disabled && styles.disabled, state.root.className);
+    if (state.disabled && state.disabledIcon) {
+        state.disabledIcon.className = mergeClasses(iconStyles.icon, iconStyles[size], iconStyles.disabledIcon, state.disabledIcon.className);
+    }
+    if (state.icon) {
+        state.icon.className = mergeClasses(iconStyles.icon, iconStyles[size], state.icon.className);
+    }
+    return state;
+};

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useEmptySwatch_unstable } from './useEmptySwatch';
+import { renderEmptySwatch_unstable } from './renderEmptySwatch';
+import { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * EmptySwatch component is used for adding new color swatches.
+ */ export const EmptySwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useEmptySwatch_unstable(props, ref);
+    useEmptySwatchStyles_unstable(state);
+    useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);
+    return renderEmptySwatch_unstable(state);
+});
+EmptySwatch.displayName = 'EmptySwatch';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useEmptySwatch_unstable } from './useEmptySwatch';\nimport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nimport { useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\nimport type { EmptySwatchProps } from './EmptySwatch.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * EmptySwatch component is used for adding new color swatches.\n */\nexport const EmptySwatch: ForwardRefComponent<EmptySwatchProps> = React.forwardRef((props, ref) => {\n  const state = useEmptySwatch_unstable(props, ref);\n\n  useEmptySwatchStyles_unstable(state);\n  useCustomStyleHook_unstable('useEmptySwatchStyles_unstable')(state);\n  return renderEmptySwatch_unstable(state);\n});\n\nEmptySwatch.displayName = 'EmptySwatch';\n"],"names":["React","useEmptySwatch_unstable","renderEmptySwatch_unstable","useEmptySwatchStyles_unstable","useCustomStyleHook_unstable","EmptySwatch","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAC7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/EmptySwatch.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type EmptySwatchSlots = {\n  root: Slot<'button'>;\n};\n\n/**\n * EmptySwatch Props\n */\nexport type EmptySwatchProps = ComponentProps<EmptySwatchSlots> & Pick<SwatchPickerProps, 'size' | 'shape'>;\n\n/**\n * State used in rendering EmptySwatch\n */\nexport type EmptySwatchState = ComponentState<EmptySwatchSlots> & Pick<EmptySwatchProps, 'size' | 'shape'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA2G"}

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/index.js

@@ -0,0 +1,4 @@
+export { EmptySwatch } from './EmptySwatch';
+export { renderEmptySwatch_unstable } from './renderEmptySwatch';
+export { useEmptySwatch_unstable } from './useEmptySwatch';
+export { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/index.ts"],"sourcesContent":["export { EmptySwatch } from './EmptySwatch';\nexport type { EmptySwatchProps, EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nexport { renderEmptySwatch_unstable } from './renderEmptySwatch';\nexport { useEmptySwatch_unstable } from './useEmptySwatch';\nexport { emptySwatchClassNames, useEmptySwatchStyles_unstable } from './useEmptySwatchStyles.styles';\n"],"names":["EmptySwatch","renderEmptySwatch_unstable","useEmptySwatch_unstable","emptySwatchClassNames","useEmptySwatchStyles_unstable"],"mappings":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/renderEmptySwatch.js

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

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/renderEmptySwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/renderEmptySwatch.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 { EmptySwatchState, EmptySwatchSlots } from './EmptySwatch.types';\n\n/**\n * Render the final JSX of EmptySwatch\n */\nexport const renderEmptySwatch_unstable = (state: EmptySwatchState): JSXElement => {\n  assertSlots<EmptySwatchSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderEmptySwatch_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/useEmptySwatch.js

@@ -0,0 +1,37 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+/**
+ * Create the state required to render EmptySwatch.
+ *
+ * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,
+ * before being passed to renderEmptySwatch_unstable.
+ *
+ * @param props - props from this instance of EmptySwatch
+ * @param ref - reference to root HTMLDivElement of EmptySwatch
+ */ export const useEmptySwatch_unstable = (props, ref)=>{
+    const { size, shape, ...rest } = props;
+    const _size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const _shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
+    const role = isGrid ? 'gridcell' : 'radio';
+    const a11yProps = isGrid ? {} : {
+        'aria-checked': false
+    };
+    return {
+        components: {
+            root: 'button'
+        },
+        root: slot.always(getIntrinsicElementProps('button', {
+            ref,
+            role,
+            ...a11yProps,
+            ...rest
+        }), {
+            elementType: 'button'
+        }),
+        size: size !== null && size !== void 0 ? size : _size,
+        shape: shape !== null && shape !== void 0 ? shape : _shape
+    };
+};

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/useEmptySwatch.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatch.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { EmptySwatchProps, EmptySwatchState } from './EmptySwatch.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render EmptySwatch.\n *\n * The returned state can be modified with hooks such as useEmptySwatchStyles_unstable,\n * before being passed to renderEmptySwatch_unstable.\n *\n * @param props - props from this instance of EmptySwatch\n * @param ref - reference to root HTMLDivElement of EmptySwatch\n */\nexport const useEmptySwatch_unstable = (\n  props: EmptySwatchProps,\n  ref: React.Ref<HTMLButtonElement>,\n): EmptySwatchState => {\n  const { size, shape, ...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 role = isGrid ? 'gridcell' : 'radio';\n  const a11yProps = isGrid ? {} : { 'aria-checked': false };\n  return {\n    components: {\n      root: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('button', {\n        ref,\n        role,\n        ...a11yProps,\n        ...rest,\n      }),\n      { elementType: 'button' },\n    ),\n    size: size ?? _size,\n    shape: shape ?? _shape,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useEmptySwatch_unstable","props","ref","size","shape","rest","_size","ctx","_shape","isGrid","role","a11yProps","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGJ;IACjC,MAAMK,QAAQP,qCAAqCQ,CAAAA,MAAOA,IAAIJ,IAAI;IAClE,MAAMK,SAAST,qCAAqCQ,CAAAA,MAAOA,IAAIH,KAAK;IACpE,MAAMK,SAASV,qCAAqCQ,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,OAAOD,SAAS,aAAa;IACnC,MAAME,YAAYF,SAAS,CAAC,IAAI;QAAE,gBAAgB;IAAM;IACxD,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMf,KAAKgB,MAAM,CACfjB,yBAAyB,UAAU;YACjCK;YACAQ;YACA,GAAGC,SAAS;YACZ,GAAGN,IAAI;QACT,IACA;YAAEU,aAAa;QAAS;QAE1BZ,MAAMA,iBAAAA,kBAAAA,OAAQG;QACdF,OAAOA,kBAAAA,mBAAAA,QAASI;IAClB;AACF,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js

@@ -0,0 +1,99 @@
+'use client';
+
+import { __resetStyles, __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const emptySwatchClassNames = {
+  root: 'fui-EmptySwatch'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__resetStyles("r1top892", null, [".r1top892{background-color:var(--colorTransparentBackground);border:1px dashed var(--colorNeutralForeground4);}"]);
+const useSizeStyles = /*#__PURE__*/__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__*/__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
+  }]]
+});
+/**
+ * Apply styling to the EmptySwatch slots based on the state
+ */
+export const useEmptySwatchStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const sizeStyles = useSizeStyles();
+  const shapeStyles = useShapeStyles();
+  var _state_size;
+  const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
+  var _state_shape;
+  state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
+  return state;
+};

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/useEmptySwatchStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","__styles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","useSizeStyles","a9b677","Bqenvij","small","medium","large","d","useShapeStyles","rounded","Beyfa6y","Bbmb7ep","Btl43ni","B7oj6ja","Dimara","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","circular","square","p","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","_state_size","size","_state_shape","className","shape"],"sources":["useEmptySwatchStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nexport const emptySwatchClassNames = {\n    root: 'fui-EmptySwatch'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n    backgroundColor: tokens.colorTransparentBackground,\n    border: `1px dashed ${tokens.colorNeutralForeground4}`\n});\nconst useSizeStyles = makeStyles({\n    'extra-small': {\n        width: '20px',\n        height: '20px'\n    },\n    small: {\n        width: '24px',\n        height: '24px'\n    },\n    medium: {\n        width: '28px',\n        height: '28px'\n    },\n    large: {\n        width: '32px',\n        height: '32px'\n    }\n});\nconst useShapeStyles = makeStyles({\n    rounded: {\n        borderRadius: tokens.borderRadiusMedium,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusMedium\n        })\n    },\n    circular: {\n        borderRadius: tokens.borderRadiusCircular,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusCircular\n        })\n    },\n    square: {\n        borderRadius: tokens.borderRadiusNone,\n        ...createCustomFocusIndicatorStyle({\n            borderRadius: tokens.borderRadiusNone\n        })\n    }\n});\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */ export const useEmptySwatchStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const sizeStyles = useSizeStyles();\n    const shapeStyles = useShapeStyles();\n    var _state_size;\n    const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';\n    var _state_shape;\n    state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAAAC,QAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,OAAO,MAAMC,qBAAqB,GAAG;EACjCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGP,aAAA,sIAGrB,CAAC;AACF,MAAMQ,aAAa,gBAAGP,QAAA;EAAA;IAAAQ,MAAA;IAAAC,OAAA;EAAA;EAAAC,KAAA;IAAAF,MAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAH,MAAA;IAAAC,OAAA;EAAA;EAAAG,KAAA;IAAAJ,MAAA;IAAAC,OAAA;EAAA;AAAA;EAAAI,CAAA;AAAA,CAiBrB,CAAC;AACF,MAAMC,cAAc,gBAAGd,QAAA;EAAAe,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAV,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAE,MAAA;IAAAX,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAZ,CAAA;IAAAe,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAmBtB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,6BAA6B,GAAIC,KAAK,IAAG;EACtD,aAAa;;EACb,MAAMC,MAAM,GAAGzB,SAAS,CAAC,CAAC;EAC1B,MAAM0B,UAAU,GAAGzB,aAAa,CAAC,CAAC;EAClC,MAAM0B,WAAW,GAAGnB,cAAc,CAAC,CAAC;EACpC,IAAIoB,WAAW;EACf,MAAMC,IAAI,GAAG,CAACD,WAAW,GAAGJ,KAAK,CAACK,IAAI,MAAM,IAAI,IAAID,WAAW,KAAK,KAAK,CAAC,GAAGA,WAAW,GAAG,QAAQ;EACnG,IAAIE,YAAY;EAChBN,KAAK,CAACzB,IAAI,CAACgC,SAAS,GAAGpC,YAAY,CAACG,qBAAqB,CAACC,IAAI,EAAE0B,MAAM,EAAEC,UAAU,CAACG,IAAI,CAAC,EAAEF,WAAW,CAAC,CAACG,YAAY,GAAGN,KAAK,CAACQ,KAAK,MAAM,IAAI,IAAIF,YAAY,KAAK,KAAK,CAAC,GAAGA,YAAY,GAAG,QAAQ,CAAC,EAAEN,KAAK,CAACzB,IAAI,CAACgC,SAAS,CAAC;EACxN,OAAOP,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js

@@ -0,0 +1,64 @@
+'use client';
+import { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const emptySwatchClassNames = {
+    root: 'fui-EmptySwatch'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeResetStyles({
+    backgroundColor: tokens.colorTransparentBackground,
+    border: `1px dashed ${tokens.colorNeutralForeground4}`
+});
+const useSizeStyles = makeStyles({
+    'extra-small': {
+        width: '20px',
+        height: '20px'
+    },
+    small: {
+        width: '24px',
+        height: '24px'
+    },
+    medium: {
+        width: '28px',
+        height: '28px'
+    },
+    large: {
+        width: '32px',
+        height: '32px'
+    }
+});
+const useShapeStyles = makeStyles({
+    rounded: {
+        borderRadius: tokens.borderRadiusMedium,
+        ...createCustomFocusIndicatorStyle({
+            borderRadius: tokens.borderRadiusMedium
+        })
+    },
+    circular: {
+        borderRadius: tokens.borderRadiusCircular,
+        ...createCustomFocusIndicatorStyle({
+            borderRadius: tokens.borderRadiusCircular
+        })
+    },
+    square: {
+        borderRadius: tokens.borderRadiusNone,
+        ...createCustomFocusIndicatorStyle({
+            borderRadius: tokens.borderRadiusNone
+        })
+    }
+});
+/**
+ * Apply styling to the EmptySwatch slots based on the state
+ */ export const useEmptySwatchStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const sizeStyles = useSizeStyles();
+    const shapeStyles = useShapeStyles();
+    var _state_size;
+    const size = (_state_size = state.size) !== null && _state_size !== void 0 ? _state_size : 'medium';
+    var _state_shape;
+    state.root.className = mergeClasses(emptySwatchClassNames.root, styles, sizeStyles[size], shapeStyles[(_state_shape = state.shape) !== null && _state_shape !== void 0 ? _state_shape : 'square'], state.root.className);
+    return state;
+};

node_modules/@fluentui/react-swatch-picker/lib/components/EmptySwatch/useEmptySwatchStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/EmptySwatch/useEmptySwatchStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { EmptySwatchSlots, EmptySwatchState } from './EmptySwatch.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\n\nexport const emptySwatchClassNames: SlotClassNames<EmptySwatchSlots> = {\n  root: 'fui-EmptySwatch',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeResetStyles({\n  backgroundColor: tokens.colorTransparentBackground,\n  border: `1px dashed ${tokens.colorNeutralForeground4}`,\n});\n\nconst useSizeStyles = makeStyles({\n  'extra-small': {\n    width: '20px',\n    height: '20px',\n  },\n  small: {\n    width: '24px',\n    height: '24px',\n  },\n  medium: {\n    width: '28px',\n    height: '28px',\n  },\n  large: {\n    width: '32px',\n    height: '32px',\n  },\n});\n\nconst useShapeStyles = makeStyles({\n  rounded: {\n    borderRadius: tokens.borderRadiusMedium,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusMedium }),\n  },\n  circular: {\n    borderRadius: tokens.borderRadiusCircular,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusCircular }),\n  },\n  square: {\n    borderRadius: tokens.borderRadiusNone,\n    ...createCustomFocusIndicatorStyle({ borderRadius: tokens.borderRadiusNone }),\n  },\n});\n\n/**\n * Apply styling to the EmptySwatch slots based on the state\n */\nexport const useEmptySwatchStyles_unstable = (state: EmptySwatchState): EmptySwatchState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const sizeStyles = useSizeStyles();\n  const shapeStyles = useShapeStyles();\n\n  const size = state.size ?? 'medium';\n\n  state.root.className = mergeClasses(\n    emptySwatchClassNames.root,\n    styles,\n    sizeStyles[size],\n    shapeStyles[state.shape ?? 'square'],\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeResetStyles","makeStyles","mergeClasses","tokens","createCustomFocusIndicatorStyle","emptySwatchClassNames","root","useStyles","backgroundColor","colorTransparentBackground","border","colorNeutralForeground4","useSizeStyles","width","height","small","medium","large","useShapeStyles","rounded","borderRadius","borderRadiusMedium","circular","borderRadiusCircular","square","borderRadiusNone","useEmptySwatchStyles_unstable","state","styles","sizeStyles","shapeStyles","size","className","shape"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG3E,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,+BAA+B,QAAQ,0BAA0B;AAE1E,OAAO,MAAMC,wBAA0D;IACrEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYP,gBAAgB;IAChCQ,iBAAiBL,OAAOM,0BAA0B;IAClDC,QAAQ,CAAC,WAAW,EAAEP,OAAOQ,uBAAuB,EAAE;AACxD;AAEA,MAAMC,gBAAgBX,WAAW;IAC/B,eAAe;QACbY,OAAO;QACPC,QAAQ;IACV;IACAC,OAAO;QACLF,OAAO;QACPC,QAAQ;IACV;IACAE,QAAQ;QACNH,OAAO;QACPC,QAAQ;IACV;IACAG,OAAO;QACLJ,OAAO;QACPC,QAAQ;IACV;AACF;AAEA,MAAMI,iBAAiBjB,WAAW;IAChCkB,SAAS;QACPC,cAAcjB,OAAOkB,kBAAkB;QACvC,GAAGjB,gCAAgC;YAAEgB,cAAcjB,OAAOkB,kBAAkB;QAAC,EAAE;IACjF;IACAC,UAAU;QACRF,cAAcjB,OAAOoB,oBAAoB;QACzC,GAAGnB,gCAAgC;YAAEgB,cAAcjB,OAAOoB,oBAAoB;QAAC,EAAE;IACnF;IACAC,QAAQ;QACNJ,cAAcjB,OAAOsB,gBAAgB;QACrC,GAAGrB,gCAAgC;YAAEgB,cAAcjB,OAAOsB,gBAAgB;QAAC,EAAE;IAC/E;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,gCAAgC,CAACC;IAC5C;IAEA,MAAMC,SAASrB;IACf,MAAMsB,aAAajB;IACnB,MAAMkB,cAAcZ;QAEPS;IAAb,MAAMI,OAAOJ,CAAAA,cAAAA,MAAMI,IAAI,cAAVJ,yBAAAA,cAAc;QAMbA;IAJdA,MAAMrB,IAAI,CAAC0B,SAAS,GAAG9B,aACrBG,sBAAsBC,IAAI,EAC1BsB,QACAC,UAAU,CAACE,KAAK,EAChBD,WAAW,CAACH,CAAAA,eAAAA,MAAMM,KAAK,cAAXN,0BAAAA,eAAe,SAAS,EACpCA,MAAMrB,IAAI,CAAC0B,SAAS;IAGtB,OAAOL;AACT,EAAE"}

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useImageSwatch_unstable } from './useImageSwatch';
+import { renderImageSwatch_unstable } from './renderImageSwatch';
+import { useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * ImageSwatch component is used to render an images, patterns and textures.
+ */ export const ImageSwatch = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useImageSwatch_unstable(props, ref);
+    useImageSwatchStyles_unstable(state);
+    useCustomStyleHook_unstable('useImageSwatchStyles_unstable')(state);
+    return renderImageSwatch_unstable(state);
+});
+ImageSwatch.displayName = 'ImageSwatch';

node_modules/@fluentui/react-swatch-picker/lib/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;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,6BAA6B,QAAQ,gCAAgC;AAE9E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,4BAAqDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzF,MAAMC,QAAQR,wBAAwBM,OAAOC;IAE7CL,8BAA8BM;IAC9BL,4BAA4B,iCAAiCK;IAE7D,OAAOP,2BAA2BO;AACpC,GAAG;AAEHJ,YAAYK,WAAW,GAAG"}

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

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

node_modules/@fluentui/react-swatch-picker/lib/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/components/ImageSwatch/index.js

@@ -0,0 +1,4 @@
+export { ImageSwatch } from './ImageSwatch';
+export { renderImageSwatch_unstable } from './renderImageSwatch';
+export { useImageSwatch_unstable } from './useImageSwatch';
+export { imageSwatchClassNames, useImageSwatchStyles_unstable } from './useImageSwatchStyles.styles';

node_modules/@fluentui/react-swatch-picker/lib/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":"AAAA,SAASA,WAAW,QAAQ,gBAAgB;AAE5C,SAASC,0BAA0B,QAAQ,sBAAsB;AACjE,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,qBAAqB,EAAEC,6BAA6B,QAAQ,gCAAgC"}

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

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

node_modules/@fluentui/react-swatch-picker/lib/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":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,6BAA6B,CAACC;IACzCF,YAA8BE;IAE9B,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -0,0 +1,52 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot, useEventCallback, mergeCallbacks } from '@fluentui/react-utilities';
+import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+/**
+ * Create the state required to render ImageSwatch.
+ *
+ * The returned state can be modified with hooks such as useImageSwatchStyles_unstable,
+ * before being passed to renderImageSwatch_unstable.
+ *
+ * @param props - props from this instance of ImageSwatch
+ * @param ref - reference to root HTMLDivElement of ImageSwatch
+ */ export const useImageSwatch_unstable = (props, ref)=>{
+    const { src, value, onClick, style, ...rest } = props;
+    const size = useSwatchPickerContextValue_unstable((ctx)=>ctx.size);
+    const shape = useSwatchPickerContextValue_unstable((ctx)=>ctx.shape);
+    const isGrid = useSwatchPickerContextValue_unstable((ctx)=>ctx.isGrid);
+    const requestSelectionChange = useSwatchPickerContextValue_unstable((ctx)=>ctx.requestSelectionChange);
+    const selected = useSwatchPickerContextValue_unstable((ctx)=>ctx.selectedValue === value);
+    const role = isGrid ? 'gridcell' : 'radio';
+    const ariaSelected = isGrid ? {
+        'aria-selected': selected
+    } : {
+        'aria-checked': selected
+    };
+    const onImageSwatchClick = useEventCallback(mergeCallbacks(onClick, (event)=>requestSelectionChange(event, {
+            selectedValue: value,
+            selectedSwatch: src
+        })));
+    return {
+        components: {
+            root: 'button'
+        },
+        root: slot.always(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/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;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,EAAEC,gBAAgB,EAAEC,cAAc,QAAQ,4BAA4B;AAE7G,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAM,EAAEC,GAAG,EAAEC,KAAK,EAAEC,OAAO,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGN;IAChD,MAAMO,OAAOT,qCAAqCU,CAAAA,MAAOA,IAAID,IAAI;IACjE,MAAME,QAAQX,qCAAqCU,CAAAA,MAAOA,IAAIC,KAAK;IACnE,MAAMC,SAASZ,qCAAqCU,CAAAA,MAAOA,IAAIE,MAAM;IAErE,MAAMC,yBAAyBb,qCAAqCU,CAAAA,MAAOA,IAAIG,sBAAsB;IACrG,MAAMC,WAAWd,qCAAqCU,CAAAA,MAAOA,IAAIK,aAAa,KAAKV;IAEnF,MAAMW,OAAOJ,SAAS,aAAa;IACnC,MAAMK,eAAeL,SACjB;QACE,iBAAiBE;IACnB,IACA;QAAE,gBAAgBA;IAAS;IAE/B,MAAMI,qBAAqBpB,iBACzBC,eAAeO,SAAS,CAACa,QACvBN,uBAAuBM,OAAO;YAC5BJ,eAAeV;YACfe,gBAAgBhB;QAClB;IAIJ,OAAO;QACLiB,YAAY;YACVC,MAAM;QACR;QACAA,MAAMzB,KAAK0B,MAAM,CACf3B,yBAAyB,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/components/ImageSwatch/useImageSwatchStyles.styles.js

@@ -0,0 +1,138 @@
+'use client';
+
+import { __styles, mergeClasses, __resetStyles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+export const imageSwatchClassNames = {
+  root: 'fui-ImageSwatch'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__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__*/__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__*/__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__*/__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
+  }]]
+});
+/**
+ * Apply styling to the ImageSwatch slots based on the state
+ */
+export 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 = mergeClasses(imageSwatchClassNames.root, styles, sizeStyles[size], shapeStyles[shape], state.selected && selectedStyles.selected, state.root.className);
+  return state;
+};

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

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

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

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useSwatchPicker_unstable } from './useSwatchPicker';
+import { renderSwatchPicker_unstable } from './renderSwatchPicker';
+import { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';
+import { useSwatchPickerContextValues } from '../../contexts/swatchPicker';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * SwatchPicker component - TODO: add more docs
+ */ export const SwatchPicker = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSwatchPicker_unstable(props, ref);
+    const contextValues = useSwatchPickerContextValues(state);
+    useSwatchPickerStyles_unstable(state);
+    useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);
+    return renderSwatchPicker_unstable(state, contextValues);
+});
+SwatchPicker.displayName = 'SwatchPicker';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPicker_unstable } from './useSwatchPicker';\nimport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nimport { useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\nimport type { SwatchPickerProps } from './SwatchPicker.types';\nimport { useSwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPicker component - TODO: add more docs\n */\nexport const SwatchPicker: ForwardRefComponent<SwatchPickerProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPicker_unstable(props, ref);\n  const contextValues = useSwatchPickerContextValues(state);\n\n  useSwatchPickerStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerStyles_unstable')(state);\n\n  return renderSwatchPicker_unstable(state, contextValues);\n});\n\nSwatchPicker.displayName = 'SwatchPicker';\n"],"names":["React","useSwatchPicker_unstable","renderSwatchPicker_unstable","useSwatchPickerStyles_unstable","useSwatchPickerContextValues","useCustomStyleHook_unstable","SwatchPicker","forwardRef","props","ref","state","contextValues","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,iCAAiC;AAEhF,SAASC,4BAA4B,QAAQ,8BAA8B;AAC3E,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,6BAAuDN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQT,yBAAyBO,OAAOC;IAC9C,MAAME,gBAAgBP,6BAA6BM;IAEnDP,+BAA+BO;IAC/BL,4BAA4B,kCAAkCK;IAE9D,OAAOR,4BAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/SwatchPicker.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot, EventHandler, EventData } from '@fluentui/react-utilities';\nimport { SwatchPickerContextValue } from '../../contexts/swatchPicker';\n\nexport type SwatchPickerSlots = {\n  root: Slot<'div'>;\n};\n\nexport type SwatchPickerOnSelectEventHandler = EventHandler<SwatchPickerOnSelectionChangeData>;\n\nexport type SwatchPickerOnSelectionChangeData = EventData<'click', React.MouseEvent<HTMLButtonElement>> & {\n  selectedValue: string;\n  selectedSwatch: string;\n};\n\n/**\n * SwatchPicker Props\n */\nexport type SwatchPickerProps = ComponentProps<SwatchPickerSlots> & {\n  /**\n   * Default selected value\n   */\n  defaultSelectedValue?: string;\n\n  /**\n   * Sets the focus behavior for the SwatchPicker.\n   *\n   * `arrow`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Arrow key.\n   *\n   * `tab`\n   * This behavior will cycle through all elements inside of the SwatchPicker when pressing the Tab key.\n   *\n   * @default 'arrow'\n   */\n  focusMode?: 'arrow' | 'tab';\n\n  /**\n   * Whether SwatchPicker is row or grid\n   */\n  layout?: 'row' | 'grid';\n\n  /**\n   * Triggers a callback when the value has been changed\n   */\n  onSelectionChange?: EventHandler<SwatchPickerOnSelectionChangeData>;\n\n  /**\n   * Controlled selected value\n   */\n  selectedValue?: string;\n\n  /**\n   * Swatch size\n   * @defaultvalue 'medium'\n   */\n  size?: 'extra-small' | 'small' | 'medium' | 'large';\n\n  /**\n   * Swatch shape\n   * @defaultvalue 'square'\n   */\n  shape?: 'rounded' | 'square' | 'circular';\n\n  /**\n   * Spacing between swatches\n   * @defaultvalue 'medium'\n   */\n  spacing?: 'small' | 'medium';\n};\n\n/**\n * State used in rendering SwatchPicker\n */\nexport type SwatchPickerState = ComponentState<SwatchPickerSlots> &\n  SwatchPickerContextValue &\n  Pick<SwatchPickerProps, 'layout' | 'size' | 'shape' | 'spacing'> & {\n    isGrid: boolean;\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/index.js

@@ -0,0 +1,4 @@
+export { SwatchPicker } from './SwatchPicker';
+export { renderSwatchPicker_unstable } from './renderSwatchPicker';
+export { useSwatchPicker_unstable } from './useSwatchPicker';
+export { swatchPickerClassNames, useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/index.ts"],"sourcesContent":["export { SwatchPicker } from './SwatchPicker';\nexport type {\n  SwatchPickerOnSelectEventHandler,\n  SwatchPickerOnSelectionChangeData,\n  SwatchPickerProps,\n  SwatchPickerSlots,\n  SwatchPickerState,\n} from './SwatchPicker.types';\nexport { renderSwatchPicker_unstable } from './renderSwatchPicker';\nexport { useSwatchPicker_unstable } from './useSwatchPicker';\nexport { swatchPickerClassNames, useSwatchPickerStyles_unstable } from './useSwatchPickerStyles.styles';\n"],"names":["SwatchPicker","renderSwatchPicker_unstable","useSwatchPicker_unstable","swatchPickerClassNames","useSwatchPickerStyles_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAQ9C,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC"}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/renderSwatchPicker.js

@@ -0,0 +1,14 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { SwatchPickerProvider } from '../../contexts/swatchPicker';
+/**
+ * Render the final JSX of SwatchPicker
+ */ export const renderSwatchPicker_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(SwatchPickerProvider, {
+        value: contextValues.swatchPicker,
+        children: /*#__PURE__*/ _jsx(state.root, {
+            children: state.root.children
+        })
+    });
+};

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/renderSwatchPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/renderSwatchPicker.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 { SwatchPickerProvider } from '../../contexts/swatchPicker';\nimport type { SwatchPickerContextValues } from '../../contexts/swatchPicker';\nimport type { SwatchPickerState, SwatchPickerSlots } from './SwatchPicker.types';\n\n/**\n * Render the final JSX of SwatchPicker\n */\nexport const renderSwatchPicker_unstable = (\n  state: SwatchPickerState,\n  contextValues: SwatchPickerContextValues,\n): JSXElement => {\n  assertSlots<SwatchPickerSlots>(state);\n\n  return (\n    <SwatchPickerProvider value={contextValues.swatchPicker}>\n      <state.root>{state.root.children}</state.root>\n    </SwatchPickerProvider>\n  );\n};\n"],"names":["assertSlots","SwatchPickerProvider","renderSwatchPicker_unstable","state","contextValues","value","swatchPicker","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAExD,SAASC,oBAAoB,QAAQ,8BAA8B;AAInE;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEAJ,YAA+BG;IAE/B,qBACE,KAACF;QAAqBI,OAAOD,cAAcE,YAAY;kBACrD,cAAA,KAACH,MAAMI,IAAI;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/useSwatchPicker.js

@@ -0,0 +1,58 @@
+'use client';
+import * as React from 'react';
+import { useFieldControlProps_unstable } from '@fluentui/react-field';
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';
+/**
+ * Create the state required to render SwatchPicker.
+ *
+ * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,
+ * before being passed to renderSwatchPicker_unstable.
+ *
+ * @param props - props from this instance of SwatchPicker
+ * @param ref - reference to root HTMLElement of SwatchPicker
+ */ export const useSwatchPicker_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = useFieldControlProps_unstable(props);
+    const { focusMode = 'arrow', layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
+    const isGrid = layout === 'grid';
+    const focusAttributes = useArrowNavigationGroup({
+        circular: true,
+        axis: isGrid ? 'grid-linear' : 'both',
+        memorizeCurrent: true
+    });
+    const role = isGrid ? 'grid' : 'radiogroup';
+    const [selectedValue, setSelectedValue] = useControllableState({
+        state: props.selectedValue,
+        defaultState: props.defaultSelectedValue,
+        initialState: ''
+    });
+    const requestSelectionChange = useEventCallback((event, data)=>{
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange(event, {
+            type: 'click',
+            event,
+            selectedValue: data.selectedValue,
+            selectedSwatch: data.selectedSwatch
+        });
+        setSelectedValue(data.selectedValue);
+    });
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role,
+            ...focusMode === 'arrow' ? focusAttributes : {},
+            ...rest
+        }), {
+            elementType: 'div'
+        }),
+        isGrid,
+        requestSelectionChange,
+        selectedValue,
+        size,
+        shape,
+        spacing
+    };
+};

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/useSwatchPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPicker.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport { useFieldControlProps_unstable } from '@fluentui/react-field';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport { getIntrinsicElementProps, useControllableState, useEventCallback, slot } from '@fluentui/react-utilities';\n\nimport type { SwatchPickerProps, SwatchPickerState } from './SwatchPicker.types';\n\n/**\n * Create the state required to render SwatchPicker.\n *\n * The returned state can be modified with hooks such as useSwatchPickerStyles_unstable,\n * before being passed to renderSwatchPicker_unstable.\n *\n * @param props - props from this instance of SwatchPicker\n * @param ref - reference to root HTMLElement of SwatchPicker\n */\nexport const useSwatchPicker_unstable = (\n  props: SwatchPickerProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerState => {\n  // Merge props from surrounding <Field>, if any\n  props = useFieldControlProps_unstable(props);\n\n  const {\n    focusMode = 'arrow',\n    layout,\n    onSelectionChange,\n    size = 'medium',\n    shape,\n    spacing = 'medium',\n    style,\n    ...rest\n  } = props;\n\n  const isGrid = layout === 'grid';\n  const focusAttributes = useArrowNavigationGroup({\n    circular: true,\n    axis: isGrid ? 'grid-linear' : 'both',\n    memorizeCurrent: true,\n  });\n\n  const role = isGrid ? 'grid' : 'radiogroup';\n\n  const [selectedValue, setSelectedValue] = useControllableState({\n    state: props.selectedValue,\n    defaultState: props.defaultSelectedValue,\n    initialState: '',\n  });\n\n  const requestSelectionChange: SwatchPickerState['requestSelectionChange'] = useEventCallback((event, data) => {\n    onSelectionChange?.(event, {\n      type: 'click',\n      event,\n      selectedValue: data.selectedValue,\n      selectedSwatch: data.selectedSwatch,\n    });\n    setSelectedValue(data.selectedValue);\n  });\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role,\n        ...(focusMode === 'arrow' ? focusAttributes : {}),\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    isGrid,\n    requestSelectionChange,\n    selectedValue,\n    size,\n    shape,\n    spacing,\n  };\n};\n"],"names":["React","useFieldControlProps_unstable","useArrowNavigationGroup","getIntrinsicElementProps","useControllableState","useEventCallback","slot","useSwatchPicker_unstable","props","ref","focusMode","layout","onSelectionChange","size","shape","spacing","style","rest","isGrid","focusAttributes","circular","axis","memorizeCurrent","role","selectedValue","setSelectedValue","state","defaultState","defaultSelectedValue","initialState","requestSelectionChange","event","data","type","selectedSwatch","components","root","always","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,6BAA6B,QAAQ,wBAAwB;AACtE,SAASC,uBAAuB,QAAQ,0BAA0B;AAClE,SAASC,wBAAwB,EAAEC,oBAAoB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAInH;;;;;;;;CAQC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,+CAA+C;IAC/CD,QAAQP,8BAA8BO;IAEtC,MAAM,EACJE,YAAY,OAAO,EACnBC,MAAM,EACNC,iBAAiB,EACjBC,OAAO,QAAQ,EACfC,KAAK,EACLC,UAAU,QAAQ,EAClBC,KAAK,EACL,GAAGC,MACJ,GAAGT;IAEJ,MAAMU,SAASP,WAAW;IAC1B,MAAMQ,kBAAkBjB,wBAAwB;QAC9CkB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,GAAGrB,qBAAqB;QAC7DsB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,yBAAsEzB,iBAAiB,CAAC0B,OAAOC;QACnGpB,8BAAAA,wCAAAA,kBAAoBmB,OAAO;YACzBE,MAAM;YACNF;YACAP,eAAeQ,KAAKR,aAAa;YACjCU,gBAAgBF,KAAKE,cAAc;QACrC;QACAT,iBAAiBO,KAAKR,aAAa;IACrC;IAEA,OAAO;QACLW,YAAY;YACVC,MAAM;QACR;QACAA,MAAM9B,KAAK+B,MAAM,CACflC,yBAAyB,OAAO;YAC9BM;YACAc;YACA,GAAIb,cAAc,UAAUS,kBAAkB,CAAC,CAAC;YAChD,GAAGF,IAAI;QACT,IACA;YAAEqB,aAAa;QAAM;QAEvBpB;QACAY;QACAN;QACAX;QACAC;QACAC;IACF;AACF,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/useSwatchPickerStyles.styles.js

@@ -0,0 +1,56 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const swatchPickerClassNames = {
+  root: 'fui-SwatchPicker'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f14ufcw5",
+    mc9l5x: "f22iagw"
+  },
+  row: {
+    Beiy3e4: "f1063pyq"
+  },
+  grid: {
+    Beiy3e4: "f1vx9l62"
+  },
+  spacingSmall: {
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f1t6b6ee"
+  },
+  spacingMedium: {
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f4xv25i"
+  }
+}, {
+  d: [[".f14ufcw5{padding:var(--spacingHorizontalNone) var(--spacingVerticalNone);}", {
+    p: -1
+  }], ".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1vx9l62{flex-direction:column;}", [".f1t6b6ee{gap:2px;}", {
+    p: -1
+  }], [".f4xv25i{gap:4px;}", {
+    p: -1
+  }]]
+});
+/**
+ * Apply styling to the SwatchPicker slots based on the state
+ */
+export const useSwatchPickerStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const layoutStyle = state.isGrid ? styles.grid : styles.row;
+  const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+  state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/useSwatchPickerStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","Byoj8tv","uwmqm3","z189sj","z8tnut","B0ocmuz","mc9l5x","row","Beiy3e4","grid","spacingSmall","i8kkvl","Belr9w4","rmohyg","spacingMedium","d","p","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"sources":["useSwatchPickerStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames = {\n    root: 'fui-SwatchPicker'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n        display: 'flex'\n    },\n    row: {\n        flexDirection: 'row'\n    },\n    grid: {\n        flexDirection: 'column'\n    },\n    spacingSmall: {\n        gap: '2px'\n    },\n    spacingMedium: {\n        gap: '4px'\n    }\n});\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */ export const useSwatchPickerStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const layoutStyle = state.isGrid ? styles.grid : styles.row;\n    const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n    state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGL,QAAA;EAAAI,IAAA;IAAAE,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,GAAA;IAAAC,OAAA;EAAA;EAAAC,IAAA;IAAAD,OAAA;EAAA;EAAAE,YAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAE,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAiBrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;EAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;EAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;EAC3FI,KAAK,CAACnB,IAAI,CAACyB,SAAS,GAAG5B,YAAY,CAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;EAC9H,OAAON,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js

@@ -0,0 +1,36 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const swatchPickerClassNames = {
+    root: 'fui-SwatchPicker'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,
+        display: 'flex'
+    },
+    row: {
+        flexDirection: 'row'
+    },
+    grid: {
+        flexDirection: 'column'
+    },
+    spacingSmall: {
+        gap: '2px'
+    },
+    spacingMedium: {
+        gap: '4px'
+    }
+});
+/**
+ * Apply styling to the SwatchPicker slots based on the state
+ */ export const useSwatchPickerStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const layoutStyle = state.isGrid ? styles.grid : styles.row;
+    const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+    state.root.className = mergeClasses(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPicker/useSwatchPickerStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPicker/useSwatchPickerStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerSlots, SwatchPickerState } from './SwatchPicker.types';\nimport { tokens } from '@fluentui/react-theme';\nexport const swatchPickerClassNames: SlotClassNames<SwatchPickerSlots> = {\n  root: 'fui-SwatchPicker',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    padding: `${tokens.spacingHorizontalNone} ${tokens.spacingVerticalNone}`,\n    display: 'flex',\n  },\n  row: {\n    flexDirection: 'row',\n  },\n  grid: {\n    flexDirection: 'column',\n  },\n  spacingSmall: { gap: '2px' },\n  spacingMedium: { gap: '4px' },\n});\n\n/**\n * Apply styling to the SwatchPicker slots based on the state\n */\nexport const useSwatchPickerStyles_unstable = (state: SwatchPickerState): SwatchPickerState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const layoutStyle = state.isGrid ? styles.grid : styles.row;\n\n  const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n  state.root.className = mergeClasses(\n    swatchPickerClassNames.root,\n    styles.root,\n    layoutStyle,\n    spacingStyle,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","tokens","swatchPickerClassNames","root","useStyles","padding","spacingHorizontalNone","spacingVerticalNone","display","row","flexDirection","grid","spacingSmall","gap","spacingMedium","useSwatchPickerStyles_unstable","state","styles","layoutStyle","isGrid","spacingStyle","spacing","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAG1D,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYL,WAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,OAAOK,qBAAqB,CAAC,CAAC,EAAEL,OAAOM,mBAAmB,EAAE;QACxEC,SAAS;IACX;IACAC,KAAK;QACHC,eAAe;IACjB;IACAC,MAAM;QACJD,eAAe;IACjB;IACAE,cAAc;QAAEC,KAAK;IAAM;IAC3BC,eAAe;QAAED,KAAK;IAAM;AAC9B;AAEA;;CAEC,GACD,OAAO,MAAME,iCAAiC,CAACC;IAC7C;IAEA,MAAMC,SAASb;IACf,MAAMc,cAAcF,MAAMG,MAAM,GAAGF,OAAON,IAAI,GAAGM,OAAOR,GAAG;IAE3D,MAAMW,eAAeJ,MAAMK,OAAO,KAAK,UAAUJ,OAAOL,YAAY,GAAGK,OAAOH,aAAa;IAC3FE,MAAMb,IAAI,CAACmB,SAAS,GAAGtB,aACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}

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

@@ -0,0 +1,15 @@
+'use client';
+import * as React from 'react';
+import { useSwatchPickerRow_unstable } from './useSwatchPickerRow';
+import { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';
+import { useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * SwatchPickerRow component is used to render a row of swatches.
+ */ export const SwatchPickerRow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useSwatchPickerRow_unstable(props, ref);
+    useSwatchPickerRowStyles_unstable(state);
+    useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state);
+    return renderSwatchPickerRow_unstable(state);
+});
+SwatchPickerRow.displayName = 'SwatchPickerRow';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nimport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nimport { useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\nimport type { SwatchPickerRowProps } from './SwatchPickerRow.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * SwatchPickerRow component is used to render a row of swatches.\n */\nexport const SwatchPickerRow: ForwardRefComponent<SwatchPickerRowProps> = React.forwardRef((props, ref) => {\n  const state = useSwatchPickerRow_unstable(props, ref);\n\n  useSwatchPickerRowStyles_unstable(state);\n  useCustomStyleHook_unstable('useSwatchPickerRowStyles_unstable')(state);\n  return renderSwatchPickerRow_unstable(state);\n});\n\nSwatchPickerRow.displayName = 'SwatchPickerRow';\n"],"names":["React","useSwatchPickerRow_unstable","renderSwatchPickerRow_unstable","useSwatchPickerRowStyles_unstable","useCustomStyleHook_unstable","SwatchPickerRow","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,iCAAiC,QAAQ,oCAAoC;AAEtF,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,gCAA6DL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,QAAQR,4BAA4BM,OAAOC;IAEjDL,kCAAkCM;IAClCL,4BAA4B,qCAAqCK;IACjE,OAAOP,+BAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPickerRow/SwatchPickerRow.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerProps } from '../SwatchPicker/SwatchPicker.types';\n\nexport type SwatchPickerRowSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * SwatchPickerRow Props\n */\nexport type SwatchPickerRowProps = ComponentProps<SwatchPickerRowSlots>;\n\n/**\n * State used in rendering SwatchPickerRow\n */\nexport type SwatchPickerRowState = ComponentState<SwatchPickerRowSlots> & Pick<SwatchPickerProps, 'spacing'>;\n"],"names":[],"mappings":"AAYA;;CAEC,GACD,WAA6G"}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/index.js

@@ -0,0 +1,4 @@
+export { SwatchPickerRow } from './SwatchPickerRow';
+export { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';
+export { useSwatchPickerRow_unstable } from './useSwatchPickerRow';
+export { swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPickerRow/index.ts"],"sourcesContent":["export { SwatchPickerRow } from './SwatchPickerRow';\nexport type { SwatchPickerRowProps, SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\nexport { renderSwatchPickerRow_unstable } from './renderSwatchPickerRow';\nexport { useSwatchPickerRow_unstable } from './useSwatchPickerRow';\nexport { swatchPickerRowClassNames, useSwatchPickerRowStyles_unstable } from './useSwatchPickerRowStyles.styles';\n"],"names":["SwatchPickerRow","renderSwatchPickerRow_unstable","useSwatchPickerRow_unstable","swatchPickerRowClassNames","useSwatchPickerRowStyles_unstable"],"mappings":"AAAA,SAASA,eAAe,QAAQ,oBAAoB;AAEpD,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,yBAAyB,EAAEC,iCAAiC,QAAQ,oCAAoC"}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/renderSwatchPickerRow.js

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

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/renderSwatchPickerRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPickerRow/renderSwatchPickerRow.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 { SwatchPickerRowState, SwatchPickerRowSlots } from './SwatchPickerRow.types';\n\n/**\n * Render the final JSX of SwatchPickerRow\n */\nexport const renderSwatchPickerRow_unstable = (state: SwatchPickerRowState): JSXElement => {\n  assertSlots<SwatchPickerRowSlots>(state);\n  return <state.root />;\n};\n"],"names":["assertSlots","renderSwatchPickerRow_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7CF,YAAkCE;IAClC,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/useSwatchPickerRow.js

@@ -0,0 +1,29 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';
+/**
+ * Create the state required to render SwatchPickerRow.
+ *
+ * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,
+ * before being passed to renderSwatchPickerRow_unstable.
+ *
+ * @param props - props from this instance of SwatchPickerRow
+ * @param ref - reference to root HTMLDivElement of SwatchPickerRow
+ */ export const useSwatchPickerRow_unstable = (props, ref)=>{
+    const { style, ...rest } = props;
+    const spacing = useSwatchPickerContextValue_unstable((ctx)=>ctx.spacing);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role: 'row',
+            ...rest
+        }), {
+            elementType: 'div'
+        }),
+        spacing
+    };
+};

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/useSwatchPickerRow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRow.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowProps, SwatchPickerRowState } from './SwatchPickerRow.types';\nimport { useSwatchPickerContextValue_unstable } from '../../contexts/swatchPicker';\n\n/**\n * Create the state required to render SwatchPickerRow.\n *\n * The returned state can be modified with hooks such as useSwatchPickerRowStyles_unstable,\n * before being passed to renderSwatchPickerRow_unstable.\n *\n * @param props - props from this instance of SwatchPickerRow\n * @param ref - reference to root HTMLDivElement of SwatchPickerRow\n */\nexport const useSwatchPickerRow_unstable = (\n  props: SwatchPickerRowProps,\n  ref: React.Ref<HTMLDivElement>,\n): SwatchPickerRowState => {\n  const { style, ...rest } = props;\n  const spacing = useSwatchPickerContextValue_unstable(ctx => ctx.spacing);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        role: 'row',\n        ...rest,\n      }),\n      { elementType: 'div' },\n    ),\n    spacing,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useSwatchPickerContextValue_unstable","useSwatchPickerRow_unstable","props","ref","style","rest","spacing","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,oCAAoC,QAAQ,8BAA8B;AAEnF;;;;;;;;CAQC,GACD,OAAO,MAAMC,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,UAAUN,qCAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,KAAKW,MAAM,CACfZ,yBAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js

@@ -0,0 +1,32 @@
+'use client';
+
+import { __resetStyles, mergeClasses, __styles } from '@griffel/react';
+export const swatchPickerRowClassNames = {
+  root: 'fui-SwatchPickerRow'
+};
+/**
+ * Styles for the root slot
+ */
+const useResetStyles = /*#__PURE__*/__resetStyles("r1xhj18k", null, [".r1xhj18k{display:flex;flex-direction:row;}"]);
+const useStyles = /*#__PURE__*/__styles({
+  spacingSmall: {
+    i8kkvl: "f16mnhsx"
+  },
+  spacingMedium: {
+    i8kkvl: "f1q8lukm"
+  }
+}, {
+  d: [".f16mnhsx{column-gap:2px;}", ".f1q8lukm{column-gap:4px;}"]
+});
+/**
+ * Apply styling to the SwatchPickerRow slots based on the state
+ */
+export const useSwatchPickerRowStyles_unstable = state => {
+  'use no memo';
+
+  const resetStyles = useResetStyles();
+  const styles = useStyles();
+  const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+  state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"sources":["useSwatchPickerRowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nexport const swatchPickerRowClassNames = {\n    root: 'fui-SwatchPickerRow'\n};\n/**\n * Styles for the root slot\n */ const useResetStyles = makeResetStyles({\n    display: 'flex',\n    flexDirection: 'row'\n});\nconst useStyles = makeStyles({\n    spacingSmall: {\n        columnGap: '2px'\n    },\n    spacingMedium: {\n        columnGap: '4px'\n    }\n});\n/**\n * Apply styling to the SwatchPickerRow slots based on the state\n */ export const useSwatchPickerRowStyles_unstable = (state)=>{\n    'use no memo';\n    const resetStyles = useResetStyles();\n    const styles = useStyles();\n    const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n    state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,aAAA,EAA0BC,YAAY,EAAAC,QAAA,QAAoB,gBAAgB;AAC1E,OAAO,MAAMC,yBAAyB,GAAG;EACrCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,cAAc,gBAAGL,aAAA,kEAG1B,CAAC;AACF,MAAMM,SAAS,gBAAGJ,QAAA;EAAAK,YAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAD,MAAA;EAAA;AAAA;EAAAE,CAAA;AAAA,CAOjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,iCAAiC,GAAIC,KAAK,IAAG;EAC1D,aAAa;;EACb,MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;EACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;EAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;EAC3FG,KAAK,CAACR,IAAI,CAACa,SAAS,GAAGhB,YAAY,CAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;EACpH,OAAOL,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js

@@ -0,0 +1,29 @@
+'use client';
+import { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';
+export const swatchPickerRowClassNames = {
+    root: 'fui-SwatchPickerRow'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = makeResetStyles({
+    display: 'flex',
+    flexDirection: 'row'
+});
+const useStyles = makeStyles({
+    spacingSmall: {
+        columnGap: '2px'
+    },
+    spacingMedium: {
+        columnGap: '4px'
+    }
+});
+/**
+ * Apply styling to the SwatchPickerRow slots based on the state
+ */ export const useSwatchPickerRowStyles_unstable = (state)=>{
+    'use no memo';
+    const resetStyles = useResetStyles();
+    const styles = useStyles();
+    const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;
+    state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-swatch-picker/lib/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/SwatchPickerRow/useSwatchPickerRowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeResetStyles, mergeClasses, makeStyles } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { SwatchPickerRowSlots, SwatchPickerRowState } from './SwatchPickerRow.types';\n\nexport const swatchPickerRowClassNames: SlotClassNames<SwatchPickerRowSlots> = {\n  root: 'fui-SwatchPickerRow',\n};\n\n/**\n * Styles for the root slot\n */\nconst useResetStyles = makeResetStyles({\n  display: 'flex',\n  flexDirection: 'row',\n});\n\nconst useStyles = makeStyles({\n  spacingSmall: {\n    columnGap: '2px',\n  },\n  spacingMedium: {\n    columnGap: '4px',\n  },\n});\n\n/**\n * Apply styling to the SwatchPickerRow slots based on the state\n */\nexport const useSwatchPickerRowStyles_unstable = (state: SwatchPickerRowState): SwatchPickerRowState => {\n  'use no memo';\n\n  const resetStyles = useResetStyles();\n  const styles = useStyles();\n  const spacingStyle = state.spacing === 'small' ? styles.spacingSmall : styles.spacingMedium;\n\n  state.root.className = mergeClasses(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);\n\n  return state;\n};\n"],"names":["makeResetStyles","mergeClasses","makeStyles","swatchPickerRowClassNames","root","useResetStyles","display","flexDirection","useStyles","spacingSmall","columnGap","spacingMedium","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA;AAEA,SAASA,eAAe,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAI3E,OAAO,MAAMC,4BAAkE;IAC7EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,iBAAiBL,gBAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,YAAYN,WAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAEA;;CAEC,GACD,OAAO,MAAME,oCAAoC,CAACC;IAChD;IAEA,MAAMC,cAAcT;IACpB,MAAMU,SAASP;IACf,MAAMQ,eAAeH,MAAMI,OAAO,KAAK,UAAUF,OAAON,YAAY,GAAGM,OAAOJ,aAAa;IAE3FE,MAAMT,IAAI,CAACc,SAAS,GAAGjB,aAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}