feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,24 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "SwatchPickerRow", {
+    enumerable: true,
+    get: function() {
+        return SwatchPickerRow;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _useSwatchPickerRow = require("./useSwatchPickerRow");
+const _renderSwatchPickerRow = require("./renderSwatchPickerRow");
+const _useSwatchPickerRowStylesstyles = require("./useSwatchPickerRowStyles.styles");
+const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
+const SwatchPickerRow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
+    const state = (0, _useSwatchPickerRow.useSwatchPickerRow_unstable)(props, ref);
+    (0, _useSwatchPickerRowStylesstyles.useSwatchPickerRowStyles_unstable)(state);
+    (0, _reactsharedcontexts.useCustomStyleHook_unstable)('useSwatchPickerRowStyles_unstable')(state);
+    return (0, _renderSwatchPickerRow.renderSwatchPickerRow_unstable)(state);
+});
+SwatchPickerRow.displayName = 'SwatchPickerRow';

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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;;;;;;;;;;;;iEAEuB,QAAQ;oCAEa,uBAAuB;uCACpB,0BAA0B;gDACvB,oCAAoC;qCAE1C,kCAAkC;AAKvE,MAAMK,kBAAAA,WAAAA,GAA6DL,OAAMM,UAAU,CAAC,CAACC,OAAOC;IACjG,MAAMC,YAAQR,+CAAAA,EAA4BM,OAAOC;QAEjDL,iEAAAA,EAAkCM;QAClCL,gDAAAA,EAA4B,qCAAqCK;IACjE,WAAOP,qDAAAA,EAA+BO;AACxC,GAAG;AAEHJ,gBAAgBK,WAAW,GAAG"}

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

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

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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-commonjs/components/SwatchPickerRow/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, {
+    SwatchPickerRow: function() {
+        return _SwatchPickerRow.SwatchPickerRow;
+    },
+    renderSwatchPickerRow_unstable: function() {
+        return _renderSwatchPickerRow.renderSwatchPickerRow_unstable;
+    },
+    swatchPickerRowClassNames: function() {
+        return _useSwatchPickerRowStylesstyles.swatchPickerRowClassNames;
+    },
+    useSwatchPickerRowStyles_unstable: function() {
+        return _useSwatchPickerRowStylesstyles.useSwatchPickerRowStyles_unstable;
+    },
+    useSwatchPickerRow_unstable: function() {
+        return _useSwatchPickerRow.useSwatchPickerRow_unstable;
+    }
+});
+const _SwatchPickerRow = require("./SwatchPickerRow");
+const _renderSwatchPickerRow = require("./renderSwatchPickerRow");
+const _useSwatchPickerRow = require("./useSwatchPickerRow");
+const _useSwatchPickerRowStylesstyles = require("./useSwatchPickerRowStyles.styles");

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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":";;;;;;;;;;;;eAASA,gCAAe;;;eAEfC,qDAA8B;;;eAE9BE,yDAAyB;;;eAAEC,iEAAiC;;;eAD5DF,+CAA2B;;;iCAHJ,oBAAoB;uCAEL,0BAA0B;oCAC7B,uBAAuB;gDACU,oCAAoC"}

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

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

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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":";;;;;;;;;;4BACA,gDAAiD;gCAErB,4BAA4B;AAOjD,MAAMC,iCAAiC,CAACC;QAC7CF,2BAAAA,EAAkCE;IAClC,OAAA,WAAA,OAAO,eAAA,EAACA,MAAMC,IAAI,EAAA,CAAA;AACpB,EAAE"}

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

@@ -0,0 +1,32 @@
+'use client';
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useSwatchPickerRow_unstable", {
+    enumerable: true,
+    get: function() {
+        return useSwatchPickerRow_unstable;
+    }
+});
+const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
+const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+const _reactutilities = require("@fluentui/react-utilities");
+const _swatchPicker = require("../../contexts/swatchPicker");
+const useSwatchPickerRow_unstable = (props, ref)=>{
+    const { style, ...rest } = props;
+    const spacing = (0, _swatchPicker.useSwatchPickerContextValue_unstable)((ctx)=>ctx.spacing);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: _reactutilities.slot.always((0, _reactutilities.getIntrinsicElementProps)('div', {
+            ref,
+            role: 'row',
+            ...rest
+        }), {
+            elementType: 'div'
+        }),
+        spacing
+    };
+};

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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;;;;;;;;;;;;iEAEuB,QAAQ;gCACgB,4BAA4B;8BAEtB,8BAA8B;AAW5E,MAAMI,8BAA8B,CACzCC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGC,MAAM,GAAGH;IAC3B,MAAMI,cAAUN,kDAAAA,EAAqCO,CAAAA,MAAOA,IAAID,OAAO;IAEvE,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMV,oBAAAA,CAAKW,MAAM,KACfZ,wCAAAA,EAAyB,OAAO;YAC9BK;YACAQ,MAAM;YACN,GAAGN,IAAI;QACT,IACA;YAAEO,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

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

@@ -0,0 +1,49 @@
+'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, {
+    swatchPickerRowClassNames: function() {
+        return swatchPickerRowClassNames;
+    },
+    useSwatchPickerRowStyles_unstable: function() {
+        return useSwatchPickerRowStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const swatchPickerRowClassNames = {
+    root: 'fui-SwatchPickerRow'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = /*#__PURE__*/ (0, _react.__resetStyles)("r1xhj18k", null, [
+    ".r1xhj18k{display:flex;flex-direction:row;}"
+]);
+const useStyles = /*#__PURE__*/ (0, _react.__styles)({
+    spacingSmall: {
+        i8kkvl: "f16mnhsx"
+    },
+    spacingMedium: {
+        i8kkvl: "f1q8lukm"
+    }
+}, {
+    d: [
+        ".f16mnhsx{column-gap:2px;}",
+        ".f1q8lukm{column-gap:4px;}"
+    ]
+});
+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 = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
+    return state;
+};

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

@@ -0,0 +1 @@
+{"version":3,"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"],"names":["__resetStyles","mergeClasses","__styles","swatchPickerRowClassNames","root","useResetStyles","useStyles","spacingSmall","i8kkvl","spacingMedium","d","useSwatchPickerRowStyles_unstable","state","resetStyles","styles","spacingStyle","spacing","className"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAECG,yBAAyB;;;qCAmBY;;;;uBApBQ,gBAAgB;AACnE,kCAAkC;IACrCC,IAAI,EAAE;AACV,CAAC;AACD;;CAEA,GAAI,MAAMC,cAAc,GAAA,WAAA,OAAGL,oBAAA,EAAA,YAAA,MAAA;IAAA;CAG1B,CAAC;AACF,MAAMM,SAAS,GAAA,WAAA,OAAGJ,eAAA,EAAA;IAAAK,YAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;IAAAC,aAAA,EAAA;QAAAD,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAE,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAOjB,CAAC;AAGS,MAAMC,qCAAqCC,KAAK,IAAG;IAC1D,aAAa;IACb,MAAMC,WAAW,GAAGR,cAAc,CAAC,CAAC;IACpC,MAAMS,MAAM,GAAGR,SAAS,CAAC,CAAC;IAC1B,MAAMS,YAAY,GAAGH,KAAK,CAACI,OAAO,KAAK,OAAO,GAAGF,MAAM,CAACP,YAAY,GAAGO,MAAM,CAACL,aAAa;IAC3FG,KAAK,CAACR,IAAI,CAACa,SAAS,OAAGhB,mBAAY,EAACE,yBAAyB,CAACC,IAAI,EAAES,WAAW,EAAEE,YAAY,EAAEH,KAAK,CAACR,IAAI,CAACa,SAAS,CAAC;IACpH,OAAOL,KAAK;AAChB,CAAC"}

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

@@ -0,0 +1,45 @@
+'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, {
+    swatchPickerRowClassNames: function() {
+        return swatchPickerRowClassNames;
+    },
+    useSwatchPickerRowStyles_unstable: function() {
+        return useSwatchPickerRowStyles_unstable;
+    }
+});
+const _react = require("@griffel/react");
+const swatchPickerRowClassNames = {
+    root: 'fui-SwatchPickerRow'
+};
+/**
+ * Styles for the root slot
+ */ const useResetStyles = (0, _react.makeResetStyles)({
+    display: 'flex',
+    flexDirection: 'row'
+});
+const useStyles = (0, _react.makeStyles)({
+    spacingSmall: {
+        columnGap: '2px'
+    },
+    spacingMedium: {
+        columnGap: '4px'
+    }
+});
+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 = (0, _react.mergeClasses)(swatchPickerRowClassNames.root, resetStyles, spacingStyle, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-swatch-picker/lib-commonjs/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;;;;;;;;;;;;IAMaG,yBAAAA;;;qCAwBAS;;;;uBA5B6C,iBAAiB;AAIpE,kCAAwE;IAC7ER,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,qBAAiBL,sBAAAA,EAAgB;IACrCM,SAAS;IACTC,eAAe;AACjB;AAEA,MAAMC,gBAAYN,iBAAAA,EAAW;IAC3BO,cAAc;QACZC,WAAW;IACb;IACAC,eAAe;QACbD,WAAW;IACb;AACF;AAKO,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,OAAGjB,mBAAAA,EAAaE,0BAA0BC,IAAI,EAAEU,aAAaE,cAAcH,MAAMT,IAAI,CAACc,SAAS;IAEnH,OAAOL;AACT,EAAE"}