feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/ToolbarGroup.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useToolbarGroup_unstable } from './useToolbarGroup';
+import { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';
+import { renderToolbarGroup_unstable } from './renderToolbarGroup';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * ToolbarGroup component is a Button to be used inside Toolbar
+ * which will respect toolbar props such as `size`
+ */ export const ToolbarGroup = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useToolbarGroup_unstable(props, ref);
+    useToolbarGroupStyles_unstable(state);
+    useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(state);
+    return renderToolbarGroup_unstable(state);
+// Casting is required due to lack of distributive union to support unions on @types/react
+});
+ToolbarGroup.displayName = 'ToolbarGroup';

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/ToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ToolbarGroupProps } from './ToolbarGroup.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useToolbarGroup_unstable } from './useToolbarGroup';\nimport { useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nimport { renderToolbarGroup_unstable } from './renderToolbarGroup';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * ToolbarGroup component is a Button to be used inside Toolbar\n * which will respect toolbar props such as `size`\n */\nexport const ToolbarGroup: ForwardRefComponent<ToolbarGroupProps> = React.forwardRef((props, ref) => {\n  const state = useToolbarGroup_unstable(props, ref);\n\n  useToolbarGroupStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useToolbarGroupStyles_unstable')(state);\n\n  return renderToolbarGroup_unstable(state);\n  // Casting is required due to lack of distributive union to support unions on @types/react\n}) as ForwardRefComponent<ToolbarGroupProps>;\n\nToolbarGroup.displayName = 'ToolbarGroup';\n"],"names":["React","useToolbarGroup_unstable","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable","useCustomStyleHook_unstable","ToolbarGroup","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,wBAAwB,QAAQ,oBAAoB;AAC7D,SAASC,8BAA8B,QAAQ,iCAAiC;AAChF,SAASC,2BAA2B,QAAQ,uBAAuB;AACnE,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;CAGC,GACD,OAAO,MAAMC,6BAAuDL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3F,MAAMC,QAAQR,yBAAyBM,OAAOC;IAE9CN,+BAA+BO;IAE/BL,4BAA4B,kCAAkCK;IAE9D,OAAON,4BAA4BM;AACnC,0FAA0F;AAC5F,GAA6C;AAE7CJ,aAAaK,WAAW,GAAG"}

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/ToolbarGroup.types.js

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

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/ToolbarGroup.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/ToolbarGroup.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type ToolbarGroupSlots = {\n  root: Slot<'div'>;\n};\n\n/**\n * ToolbarButton Props\n */\nexport type ToolbarGroupProps = ComponentProps<ToolbarGroupSlots>;\n\n/**\n * State used in rendering ToolbarButton\n */\nexport type ToolbarGroupState = ComponentState<ToolbarGroupSlots> & {\n  vertical?: boolean;\n};\n"],"names":[],"mappings":"AAWA;;CAEC,GACD,WAEE"}

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/index.js

@@ -0,0 +1,4 @@
+export { ToolbarGroup } from './ToolbarGroup';
+export { useToolbarGroup_unstable, useToolbarGroupBase_unstable } from './useToolbarGroup';
+export { toolbarGroupClassNames, useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';
+export { renderToolbarGroup_unstable } from './renderToolbarGroup';

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/index.ts"],"sourcesContent":["export { ToolbarGroup } from './ToolbarGroup';\nexport type { ToolbarGroupProps, ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\nexport { useToolbarGroup_unstable, useToolbarGroupBase_unstable } from './useToolbarGroup';\nexport { toolbarGroupClassNames, useToolbarGroupStyles_unstable } from './useToolbarGroupStyles.styles';\nexport { renderToolbarGroup_unstable } from './renderToolbarGroup';\n"],"names":["ToolbarGroup","useToolbarGroup_unstable","useToolbarGroupBase_unstable","toolbarGroupClassNames","useToolbarGroupStyles_unstable","renderToolbarGroup_unstable"],"mappings":"AAAA,SAASA,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,wBAAwB,EAAEC,4BAA4B,QAAQ,oBAAoB;AAC3F,SAASC,sBAAsB,EAAEC,8BAA8B,QAAQ,iCAAiC;AACxG,SAASC,2BAA2B,QAAQ,uBAAuB"}

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/renderToolbarGroup.js

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

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/renderToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/renderToolbarGroup.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport type { ToolbarGroupState, ToolbarGroupSlots } from './ToolbarGroup.types';\n\n/**\n * Render the final JSX of ToolbarGroup\n */\nexport const renderToolbarGroup_unstable = (state: ToolbarGroupState): JSXElement => {\n  assertSlots<ToolbarGroupSlots>(state);\n\n  return <state.root>{state.root.children}</state.root>;\n};\n"],"names":["assertSlots","renderToolbarGroup_unstable","state","root","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AACjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,8BAA8B,CAACC;IAC1CF,YAA+BE;IAE/B,qBAAO,KAACA,MAAMC,IAAI;kBAAED,MAAMC,IAAI,CAACC,QAAQ;;AACzC,EAAE"}

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/useToolbarGroup.js

@@ -0,0 +1,34 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';
+/**
+ * Given user props, defines default props for the Group
+ * @param props - User provided props to the Group component.
+ * @param ref - User provided ref to be passed to the Group component.
+ */ export const useToolbarGroup_unstable = (props, ref)=>{
+    return useToolbarGroupBase_unstable(props, ref);
+};
+/**
+ * Base hook that builds Toolbar Group state for behavior and structure only.
+ * It does not provide any design-related defaults.
+ *
+ * @internal
+ * @param props - User provided props to the Group component.
+ * @param ref - User provided ref to be passed to the Group component.
+ */ export const useToolbarGroupBase_unstable = (props, ref)=>{
+    const vertical = useToolbarContext_unstable((ctx)=>ctx.vertical);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            role: 'presentation',
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        vertical
+    };
+};

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/useToolbarGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroup.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\n\nimport type { ToolbarGroupProps, ToolbarGroupState } from './ToolbarGroup.types';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useToolbarContext_unstable } from '../Toolbar/ToolbarContext';\n\n/**\n * Given user props, defines default props for the Group\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroup_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  return useToolbarGroupBase_unstable(props, ref);\n};\n\n/**\n * Base hook that builds Toolbar Group state for behavior and structure only.\n * It does not provide any design-related defaults.\n *\n * @internal\n * @param props - User provided props to the Group component.\n * @param ref - User provided ref to be passed to the Group component.\n */\nexport const useToolbarGroupBase_unstable = (\n  props: ToolbarGroupProps,\n  ref: React.Ref<HTMLDivElement>,\n): ToolbarGroupState => {\n  const vertical = useToolbarContext_unstable(ctx => ctx.vertical);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps<React.HTMLAttributes<HTMLDivElement>>('div', {\n        ref,\n        role: 'presentation',\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    vertical,\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useToolbarContext_unstable","useToolbarGroup_unstable","props","ref","useToolbarGroupBase_unstable","vertical","ctx","components","root","always","role","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,0BAA0B,QAAQ,4BAA4B;AAEvE;;;;CAIC,GACD,OAAO,MAAMC,2BAA2B,CACtCC,OACAC;IAEA,OAAOC,6BAA6BF,OAAOC;AAC7C,EAAE;AAEF;;;;;;;CAOC,GACD,OAAO,MAAMC,+BAA+B,CAC1CF,OACAC;IAEA,MAAME,WAAWL,2BAA2BM,CAAAA,MAAOA,IAAID,QAAQ;IAE/D,OAAO;QACLE,YAAY;YACVC,MAAM;QACR;QACAA,MAAMT,KAAKU,MAAM,CACfX,yBAA+D,OAAO;YACpEK;YACAO,MAAM;YACN,GAAGR,KAAK;QACV,IACA;YAAES,aAAa;QAAM;QAEvBN;IACF;AACF,EAAE"}

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js

@@ -0,0 +1,31 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+export const toolbarGroupClassNames = {
+  root: 'fui-ToolbarGroup'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59"
+  },
+  vertical: {
+    Beiy3e4: "f1vx9l62",
+    a9b677: "f1acs6jw"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f122n59{align-items:center;}", ".f1vx9l62{flex-direction:column;}", ".f1acs6jw{width:fit-content;}"]
+});
+/**
+ * Apply styling to the Toolbar slots based on the state
+ */
+export const useToolbarGroupStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    vertical
+  } = state;
+  const styles = useStyles();
+  state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","toolbarGroupClassNames","root","useStyles","mc9l5x","Bt984gj","vertical","Beiy3e4","a9b677","d","useToolbarGroupStyles_unstable","state","styles","className"],"sources":["useToolbarGroupStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const toolbarGroupClassNames = {\n    root: 'fui-ToolbarGroup'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        alignItems: 'center'\n    },\n    vertical: {\n        flexDirection: 'column',\n        width: 'fit-content'\n    }\n});\n/**\n * Apply styling to the Toolbar slots based on the state\n */ export const useToolbarGroupStyles_unstable = (state)=>{\n    'use no memo';\n    const { vertical } = state;\n    const styles = useStyles();\n    state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,sBAAsB,GAAG;EAClCC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,MAAA;IAAAC,OAAA;EAAA;EAAAC,QAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CASjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,8BAA8B,GAAIC,KAAK,IAAG;EACvD,aAAa;;EACb,MAAM;IAAEL;EAAS,CAAC,GAAGK,KAAK;EAC1B,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1BQ,KAAK,CAACT,IAAI,CAACW,SAAS,GAAGb,YAAY,CAACC,sBAAsB,CAACC,IAAI,EAAEU,MAAM,CAACV,IAAI,EAAEI,QAAQ,IAAIM,MAAM,CAACN,QAAQ,EAAEK,KAAK,CAACT,IAAI,CAACW,SAAS,CAAC;EAChI,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js

@@ -0,0 +1,24 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const toolbarGroupClassNames = {
+    root: 'fui-ToolbarGroup'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        alignItems: 'center'
+    },
+    vertical: {
+        flexDirection: 'column',
+        width: 'fit-content'
+    }
+});
+/**
+ * Apply styling to the Toolbar slots based on the state
+ */ export const useToolbarGroupStyles_unstable = (state)=>{
+    'use no memo';
+    const { vertical } = state;
+    const styles = useStyles();
+    state.root.className = mergeClasses(toolbarGroupClassNames.root, styles.root, vertical && styles.vertical, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-toolbar/lib/components/ToolbarGroup/useToolbarGroupStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ToolbarGroup/useToolbarGroupStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\n\nimport type { ToolbarGroupSlots, ToolbarGroupState } from './ToolbarGroup.types';\n\nexport const toolbarGroupClassNames: SlotClassNames<ToolbarGroupSlots> = {\n  root: 'fui-ToolbarGroup',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n  },\n  vertical: {\n    flexDirection: 'column',\n    width: 'fit-content',\n  },\n});\n\n/**\n * Apply styling to the Toolbar slots based on the state\n */\nexport const useToolbarGroupStyles_unstable = (state: ToolbarGroupState): ToolbarGroupState => {\n  'use no memo';\n\n  const { vertical } = state;\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(\n    toolbarGroupClassNames.root,\n    styles.root,\n    vertical && styles.vertical,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","toolbarGroupClassNames","root","useStyles","display","alignItems","vertical","flexDirection","width","useToolbarGroupStyles_unstable","state","styles","className"],"mappings":"AAAA;AAGA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,yBAA4D;IACvEC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,SAAS;QACTC,YAAY;IACd;IACAC,UAAU;QACRC,eAAe;QACfC,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,iCAAiC,CAACC;IAC7C;IAEA,MAAM,EAAEJ,QAAQ,EAAE,GAAGI;IACrB,MAAMC,SAASR;IAEfO,MAAMR,IAAI,CAACU,SAAS,GAAGZ,aACrBC,uBAAuBC,IAAI,EAC3BS,OAAOT,IAAI,EACXI,YAAYK,OAAOL,QAAQ,EAC3BI,MAAMR,IAAI,CAACU,SAAS;IAGtB,OAAOF;AACT,EAAE"}