feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,26 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SwatchPicker", {
+    enumerable: true,
+    get: function() {
+        return SwatchPicker;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSwatchPicker = require("./useSwatchPicker");
+const _renderSwatchPicker = require("./renderSwatchPicker");
+const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");
+const _swatchPicker = require("../../contexts/swatchPicker");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const SwatchPicker = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSwatchPicker.useSwatchPicker_unstable)(props, ref);
+    const contextValues = (0, _swatchPicker.useSwatchPickerContextValues)(state);
+    (0, _useSwatchPickerStylesstyles.useSwatchPickerStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwatchPickerStyles_unstable')(state);
+    return (0, _renderSwatchPicker.renderSwatchPicker_unstable)(state, contextValues);
+});
+SwatchPicker.displayName = 'SwatchPicker';

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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;;;;;;;;;;;;iEAEuB,QAAQ;iCAEU,oBAAoB;oCACjB,uBAAuB;6CACpB,iCAAiC;8BAEnC,8BAA8B;qCAC/B,kCAAkC;AAKvE,MAAMM,eAAAA,WAAAA,GAAuDN,OAAMO,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,YAAQT,yCAAAA,EAAyBO,OAAOC;IAC9C,MAAME,oBAAgBP,0CAAAA,EAA6BM;QAEnDP,2DAAAA,EAA+BO;QAC/BL,gDAAAA,EAA4B,kCAAkCK;IAE9D,WAAOR,+CAAAA,EAA4BQ,OAAOC;AAC5C,GAAG;AAEHL,aAAaM,WAAW,GAAG"}

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

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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":";;;;;iEAAuB,QAAQ"}

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    SwatchPicker: function() {
+        return _SwatchPicker.SwatchPicker;
+    },
+    renderSwatchPicker_unstable: function() {
+        return _renderSwatchPicker.renderSwatchPicker_unstable;
+    },
+    swatchPickerClassNames: function() {
+        return _useSwatchPickerStylesstyles.swatchPickerClassNames;
+    },
+    useSwatchPickerStyles_unstable: function() {
+        return _useSwatchPickerStylesstyles.useSwatchPickerStyles_unstable;
+    },
+    useSwatchPicker_unstable: function() {
+        return _useSwatchPicker.useSwatchPicker_unstable;
+    }
+});
+const _SwatchPicker = require("./SwatchPicker");
+const _renderSwatchPicker = require("./renderSwatchPicker");
+const _useSwatchPicker = require("./useSwatchPicker");
+const _useSwatchPickerStylesstyles = require("./useSwatchPickerStyles.styles");

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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":";;;;;;;;;;;;eAASA,0BAAY;;;eAQZC,+CAA2B;;;eAE3BE,mDAAsB;;;eAAEC,2DAA8B;;;eADtDF,yCAAwB;;;8BATJ,iBAAiB;oCAQF,uBAAuB;iCAC1B,oBAAoB;6CACU,iCAAiC"}

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

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

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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":";;;;+BAYaE;;;;;;4BAXb,gDAAiD;gCAErB,4BAA4B;8BAEnB,8BAA8B;AAO5D,oCAAoC,CACzCC,OACAC;QAEAJ,2BAAAA,EAA+BG;IAE/B,OAAA,WAAA,OACE,eAAA,EAACF,kCAAAA,EAAAA;QAAqBI,OAAOD,cAAcE,YAAY;kBACrD,WAAA,OAAA,eAAA,EAACH,MAAMI,IAAI,EAAA;sBAAEJ,MAAMI,IAAI,CAACC,QAAQ;;;AAGtC,EAAE"}

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

@@ -0,0 +1,61 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSwatchPicker_unstable", {
+    enumerable: true,
+    get: function() {
+        return useSwatchPicker_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactfield = require("@fluentui/react-field");
+const _reacttabster = require("@fluentui/react-tabster");
+const _reactutilities = require("@fluentui/react-utilities");
+const useSwatchPicker_unstable = (props, ref)=>{
+    // Merge props from surrounding <Field>, if any
+    props = (0, _reactfield.useFieldControlProps_unstable)(props);
+    const { focusMode = 'arrow', layout, onSelectionChange, size = 'medium', shape, spacing = 'medium', style, ...rest } = props;
+    const isGrid = layout === 'grid';
+    const focusAttributes = (0, _reacttabster.useArrowNavigationGroup)({
+        circular: true,
+        axis: isGrid ? 'grid-linear' : 'both',
+        memorizeCurrent: true
+    });
+    const role = isGrid ? 'grid' : 'radiogroup';
+    const [selectedValue, setSelectedValue] = (0, _reactutilities.useControllableState)({
+        state: props.selectedValue,
+        defaultState: props.defaultSelectedValue,
+        initialState: ''
+    });
+    const requestSelectionChange = (0, _reactutilities.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: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            role,
+            ...focusMode === 'arrow' ? focusAttributes : {},
+            ...rest
+        }), {
+            elementType: 'div'
+        }),
+        isGrid,
+        requestSelectionChange,
+        selectedValue,
+        size,
+        shape,
+        spacing
+    };
+};

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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;;;;;+BAmBaO;;;;;;;iEAjBU,QAAQ;4BAEe,wBAAwB;8BAC9B,0BAA0B;gCACqB,4BAA4B;AAa5G,iCAAiC,CACtCC,OACAC;IAEA,+CAA+C;IAC/CD,YAAQP,yCAAAA,EAA8BO;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,yCAAAA,EAAwB;QAC9CkB,UAAU;QACVC,MAAMH,SAAS,gBAAgB;QAC/BI,iBAAiB;IACnB;IAEA,MAAMC,OAAOL,SAAS,SAAS;IAE/B,MAAM,CAACM,eAAeC,iBAAiB,OAAGrB,oCAAAA,EAAqB;QAC7DsB,OAAOlB,MAAMgB,aAAa;QAC1BG,cAAcnB,MAAMoB,oBAAoB;QACxCC,cAAc;IAChB;IAEA,MAAMC,6BAAsEzB,gCAAAA,EAAiB,CAAC0B,OAAOC;QACnGpB,sBAAAA,QAAAA,sBAAAA,KAAAA,IAAAA,KAAAA,IAAAA,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,oBAAAA,CAAK+B,MAAM,KACflC,wCAAAA,EAAyB,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-commonjs/components/SwatchPicker/useSwatchPickerStyles.styles.js

@@ -0,0 +1,83 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    swatchPickerClassNames: function() {
+        return swatchPickerClassNames;
+    },
+    useSwatchPickerStyles_unstable: function() {
+        return useSwatchPickerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const swatchPickerClassNames = {
+    root: 'fui-SwatchPicker'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = /*#__PURE__*/ (0, _react.__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
+            }
+        ]
+    ]
+});
+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 = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"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"],"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"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAGCG,sBAAsB;;;IAyBlBmB,8BAA8B;;;;uBA3BN,gBAAgB;AAElD,+BAA+B;IAClClB,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,SAAS,GAAA,WAAA,OAAGL,eAAA,EAAA;IAAAI,IAAA,EAAA;QAAAE,OAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,GAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,IAAA,EAAA;QAAAD,OAAA,EAAA;IAAA;IAAAE,YAAA,EAAA;QAAAC,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAH,MAAA,EAAA;QAAAC,OAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;YAAA;YAAA;gBAAAC,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;QAAA;QAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;QAAA;YAAA;YAAA;gBAAAA,CAAA,EAAA,CAAA;YAAA;SAAA;KAAA;AAAA,CAiBrB,CAAC;AAGS,uCAAwCE,KAAK,IAAG;IACvD,aAAa;IACb,MAAMC,MAAM,GAAGnB,SAAS,CAAC,CAAC;IAC1B,MAAMoB,WAAW,GAAGF,KAAK,CAACG,MAAM,GAAGF,MAAM,CAACV,IAAI,GAAGU,MAAM,CAACZ,GAAG;IAC3D,MAAMe,YAAY,GAAGJ,KAAK,CAACK,OAAO,KAAK,OAAO,GAAGJ,MAAM,CAACT,YAAY,GAAGS,MAAM,CAACL,aAAa;IAC3FI,KAAK,CAACnB,IAAI,CAACyB,SAAS,OAAG5B,mBAAY,EAACE,sBAAsB,CAACC,IAAI,EAAEoB,MAAM,CAACpB,IAAI,EAAEqB,WAAW,EAAEE,YAAY,EAAEJ,KAAK,CAACnB,IAAI,CAACyB,SAAS,CAAC;IAC9H,OAAON,KAAK;AAChB,CAAC"}

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

@@ -0,0 +1,52 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    swatchPickerClassNames: function() {
+        return swatchPickerClassNames;
+    },
+    useSwatchPickerStyles_unstable: function() {
+        return useSwatchPickerStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const _reacttheme = require("@fluentui/react-theme");
+const swatchPickerClassNames = {
+    root: 'fui-SwatchPicker'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = (0, _react.makeStyles)({
+    root: {
+        padding: `${_reacttheme.tokens.spacingHorizontalNone} ${_reacttheme.tokens.spacingVerticalNone}`,
+        display: 'flex'
+    },
+    row: {
+        flexDirection: 'row'
+    },
+    grid: {
+        flexDirection: 'column'
+    },
+    spacingSmall: {
+        gap: '2px'
+    },
+    spacingMedium: {
+        gap: '4px'
+    }
+});
+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 = (0, _react.mergeClasses)(swatchPickerClassNames.root, styles.root, layoutStyle, spacingStyle, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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;;;;;;;;;;;;IAMaG,sBAAAA;;;IAyBAa,8BAAAA;;;;uBA7B4B,iBAAiB;4BAGnC,wBAAwB;AACxC,+BAAkE;IACvEZ,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,gBAAYL,iBAAAA,EAAW;IAC3BI,MAAM;QACJE,SAAS,GAAGJ,kBAAAA,CAAOK,qBAAqB,CAAC,CAAC,EAAEL,kBAAAA,CAAOM,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;AAKO,uCAAuC,CAACG;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,OAAGtB,mBAAAA,EACrBE,uBAAuBC,IAAI,EAC3Bc,OAAOd,IAAI,EACXe,aACAE,cACAJ,MAAMb,IAAI,CAACmB,SAAS;IAGtB,OAAON;AACT,EAAE"}