feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-icons/lib/utils/fonts/FluentSystemIcons-Light.json

@@ -0,0 +1,205 @@
+{
+  "AccessibilityCheckmark32Light": 57344,
+  "Add32Light": 57345,
+  "Alert32Light": 57346,
+  "AppFolder32Light": 57347,
+  "AppGeneric32Light": 57348,
+  "Archive32Light": 57349,
+  "ArchiveSettings32Light": 57350,
+  "ArrowClockwise32Light": 57351,
+  "ArrowDown32Light": 57352,
+  "ArrowDownload32Light": 57353,
+  "ArrowForward32Light": 57354,
+  "ArrowHookDownLeft32Light": 57355,
+  "ArrowHookDownRight32Light": 57356,
+  "ArrowHookUpLeft32Light": 57357,
+  "ArrowHookUpRight32Light": 57358,
+  "ArrowRedo32Light": 57359,
+  "ArrowReply32Light": 57360,
+  "ArrowReplyAll32Light": 57361,
+  "ArrowUndo32Light": 57362,
+  "Attach32Light": 57363,
+  "AutoFit32Light": 57364,
+  "AutoFitWidth32Light": 57365,
+  "Autocorrect32Light": 57366,
+  "BookContacts32Light": 57367,
+  "BreakoutRoom32Light": 57368,
+  "Broom32Light": 57369,
+  "Calendar3Day32Light": 57370,
+  "CalendarCheckmark32Light": 57371,
+  "CalendarClock32Light": 57372,
+  "CalendarDataBar32Light": 57373,
+  "CalendarDay32Light": 57374,
+  "CalendarEdit32Light": 57375,
+  "CalendarEmpty32Light": 57376,
+  "CalendarLtr32Light": 57377,
+  "CalendarMonth32Light": 57378,
+  "CalendarMultiple32Light": 57379,
+  "CalendarPattern32Light": 57380,
+  "CalendarReply32Light": 57381,
+  "CalendarSparkle32Light": 57382,
+  "CalendarTodo32Light": 57383,
+  "CalendarWorkWeek32Light": 57384,
+  "Chat32Light": 57385,
+  "Checkmark32Light": 57386,
+  "CheckmarkCircle32Light": 57387,
+  "Classification32Light": 57388,
+  "ClipboardPaste32Light": 57389,
+  "Clock32Light": 57390,
+  "ClockAlarm32Light": 57391,
+  "Color32Light": 57392,
+  "ColorFill32Light": 57393,
+  "ColorFillAccent32Light": 57394,
+  "Comment32Light": 57395,
+  "CommentAdd32Light": 57396,
+  "Compose32Light": 57397,
+  "Copy32Light": 57398,
+  "Crop32Light": 57399,
+  "Cursor32Light": 57400,
+  "Cut32Light": 57401,
+  "Delete32Light": 57402,
+  "Dismiss32Light": 57403,
+  "DismissCircle32Light": 57404,
+  "DismissSquare32Light": 57405,
+  "Document24Light": 57406,
+  "Document28Light": 57407,
+  "Document32Light": 57408,
+  "Document48Light": 57409,
+  "DocumentHeader32Light": 57410,
+  "DocumentHeaderFooter32Light": 57411,
+  "DocumentLightning32Light": 57412,
+  "DocumentSignature32Light": 57413,
+  "DocumentSparkle24Light": 57414,
+  "DocumentSparkle28Light": 57415,
+  "DocumentSparkle32Light": 57416,
+  "DocumentSparkle48Light": 57417,
+  "DoorArrowRight32Light": 57418,
+  "Edit32Light": 57419,
+  "Emoji32Light": 57420,
+  "Eye32Light": 57421,
+  "EyeOff32Light": 57422,
+  "Filter32Light": 57423,
+  "Flag32Light": 57424,
+  "FlagOff32Light": 57425,
+  "Flash32Light": 57426,
+  "FolderArrowRight32Light": 57427,
+  "FolderMail32Light": 57428,
+  "Globe32Light": 57429,
+  "HandDraw32Light": 57430,
+  "History32Light": 57431,
+  "ImageAdd32Light": 57432,
+  "ImageAltText32Light": 57433,
+  "ImageCopy32Light": 57434,
+  "ImageReflection32Light": 57435,
+  "ImageShadow32Light": 57436,
+  "ImmersiveReader32Light": 57437,
+  "Important32Light": 57438,
+  "Lasso32Light": 57439,
+  "LayoutColumnTwo32Light": 57440,
+  "LayoutColumnTwoFocusLeft32Light": 57441,
+  "LayoutColumnTwoFocusRight32Light": 57442,
+  "LayoutRowTwo32Light": 57443,
+  "LayoutRowTwoFocusTop32Light": 57444,
+  "LayoutRowTwoFocusTopSettings32Light": 57445,
+  "LayoutRowTwoSettings32Light": 57446,
+  "Lightbulb32Light": 57447,
+  "Link32Light": 57448,
+  "LockClosed32Light": 57449,
+  "LockOpen32Light": 57450,
+  "Mail32Light": 57451,
+  "MailAlert32Light": 57452,
+  "MailArrowClockwise32Light": 57453,
+  "MailArrowDoubleBack32Light": 57454,
+  "MailCopy32Light": 57455,
+  "MailEdit32Light": 57456,
+  "MailList32Light": 57457,
+  "MailMultiple32Light": 57458,
+  "MailRead32Light": 57459,
+  "MailReadMultiple32Light": 57460,
+  "MailRewind32Light": 57461,
+  "MailSettings32Light": 57462,
+  "MailTemplate32Light": 57463,
+  "MailUnread32Light": 57464,
+  "MailWarning32Light": 57465,
+  "Mention32Light": 57466,
+  "Mic32Light": 57467,
+  "Molecule32Light": 57468,
+  "Note32Light": 57469,
+  "Options32Light": 57470,
+  "PaintBrush32Light": 57471,
+  "PanelLeftDefault32Light": 57472,
+  "PanelLeftFocusRight32Light": 57473,
+  "PenSparkle32Light": 57474,
+  "People32Light": 57475,
+  "PeopleAdd32Light": 57476,
+  "PeopleCheckmark32Light": 57477,
+  "PeopleCommunity32Light": 57478,
+  "PeopleEdit32Light": 57479,
+  "PeopleList32Light": 57480,
+  "PeopleLock32Light": 57481,
+  "PeopleSettings32Light": 57482,
+  "PeopleSync32Light": 57483,
+  "Person32Light": 57484,
+  "PersonAdd32Light": 57485,
+  "PersonAvailable32Light": 57486,
+  "PersonFeedback32Light": 57487,
+  "PersonMail32Light": 57488,
+  "PersonProhibited32Light": 57489,
+  "PersonSuport32Light": 57490,
+  "Phone32Light": 57491,
+  "PictureInPicture32Light": 57492,
+  "Pin32Light": 57493,
+  "PinOff32Light": 57494,
+  "Poll32Light": 57495,
+  "Presenter32Light": 57496,
+  "Print32Light": 57497,
+  "Question32Light": 57498,
+  "ReadAloud32Light": 57499,
+  "RectangleLandscape32Light": 57500,
+  "RotateLeft32Light": 57501,
+  "Save32Light": 57502,
+  "Search32Light": 57503,
+  "SearchSparkle32Light": 57504,
+  "SendClock32Light": 57505,
+  "Settings32Light": 57506,
+  "Share32Light": 57507,
+  "ShieldError32Light": 57508,
+  "Signature32Light": 57509,
+  "SpeakerMute32Light": 57510,
+  "SquareArrowForward32Light": 57511,
+  "Stamp32Light": 57512,
+  "StarAdd32Light": 57513,
+  "StarArrowRight32Light": 57514,
+  "Sticker32Light": 57515,
+  "TabAdd32Light": 57516,
+  "Table32Light": 57517,
+  "TableAltText32Light": 57518,
+  "TableCellsMerge32Light": 57519,
+  "TableCellsSplit32Light": 57520,
+  "TableDismiss32Light": 57521,
+  "TableMoveAbove32Light": 57522,
+  "TableMoveBelow32Light": 57523,
+  "TableMoveLeft32Light": 57524,
+  "TableMoveRight32Light": 57525,
+  "TableSettings32Light": 57526,
+  "TableSimple32Light": 57527,
+  "Tag32Light": 57528,
+  "Text32Light": 57529,
+  "TextClearFormatting32Light": 57530,
+  "TextCollapse32Light": 57531,
+  "TextDensity32Light": 57532,
+  "TextEditStyle32Light": 57533,
+  "TextExpand32Light": 57534,
+  "TextboxAlignTopLeft32Light": 57535,
+  "Toolbox32Light": 57536,
+  "Translate32Light": 57537,
+  "Video32Light": 57538,
+  "VideoClip32Light": 57539,
+  "Vip32Light": 57540,
+  "WeatherMoon32Light": 57541,
+  "WeatherSunny32Light": 57542,
+  "Window32Light": 57543,
+  "WrenchScrewdriver32Light": 57544,
+  "ZoomIn32Light": 57545,
+  "ZoomOut32Light": 57546
+}

node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { FluentIconsProps } from '../FluentIconsProps.types';
+import { FontFile } from './createFluentFontIcon.shared';
+export declare type CreateFluentFontIconOptions = {
+    flipInRtl?: boolean;
+};
+export declare type FluentFontIcon = React.FC<FluentIconsProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> & {
+    codepoint: string;
+};
+export declare function createFluentFontIcon(displayName: string, codepoint: string, font: FontFile, fontSize?: number, options?: CreateFluentFontIconOptions): FluentFontIcon;

node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { mergeClasses } from '@griffel/react';
+import { useIconState } from '../useIconState';
+import { fontIconClassName } from '../constants';
+import { useRootStyles, useStaticStyles } from './createFluentFontIcon.styles';
+export function createFluentFontIcon(displayName, codepoint, font, fontSize, options) {
+    const Component = (props) => {
+        useStaticStyles();
+        const styles = useRootStyles();
+        const className = mergeClasses(styles.root, styles[font], fontIconClassName, props.className);
+        const state = useIconState({ ...props, className }, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl });
+        // We want to keep the same API surface as the SVG icons, so translate `primaryFill` to `color`
+        if (props.primaryFill && props.primaryFill.toLowerCase() !== 'currentcolor') {
+            state.style = {
+                ...state.style,
+                color: props.primaryFill,
+            };
+        }
+        if (fontSize) {
+            state.style = {
+                ...state.style,
+                fontSize,
+            };
+        }
+        return React.createElement("i", Object.assign({}, state), codepoint);
+    };
+    Component.displayName = displayName;
+    Component.codepoint = codepoint;
+    return Component;
+}

node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.shared.d.ts

@@ -0,0 +1,6 @@
+export declare const enum FontFile {
+    Filled = 0,
+    Regular = 1,
+    Resizable = 2,
+    Light = 3
+}

node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.shared.js

@@ -0,0 +1 @@
+export {};

node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.styles.d.ts

@@ -0,0 +1,3 @@
+import { FontFile } from './createFluentFontIcon.shared';
+export declare const useStaticStyles: () => void;
+export declare const useRootStyles: () => Record<"root" | FontFile, string>;

node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.styles.js

@@ -0,0 +1,55 @@
+import _asset10 from "./FluentSystemIcons-Resizable.ttf";
+import _asset1 from "./FluentSystemIcons-Resizable.woff";
+import _asset0 from "./FluentSystemIcons-Resizable.woff2";
+import _asset9 from "./FluentSystemIcons-Light.ttf";
+import _asset8 from "./FluentSystemIcons-Light.woff";
+import _asset7 from "./FluentSystemIcons-Light.woff2";
+import _asset6 from "./FluentSystemIcons-Regular.ttf";
+import _asset5 from "./FluentSystemIcons-Regular.woff";
+import _asset4 from "./FluentSystemIcons-Regular.woff2";
+import _asset3 from "./FluentSystemIcons-Filled.ttf";
+import _asset2 from "./FluentSystemIcons-Filled.woff";
+import _asset from "./FluentSystemIcons-Filled.woff2";
+import { __styles, __staticStyles } from '@griffel/react';
+import fontFilledTtf from './FluentSystemIcons-Filled.ttf';
+import fontFilledWoff from './FluentSystemIcons-Filled.woff';
+import fontFilledWoff2 from './FluentSystemIcons-Filled.woff2';
+import fontRegularTtf from './FluentSystemIcons-Regular.ttf';
+import fontRegularWoff from './FluentSystemIcons-Regular.woff';
+import fontRegularWoff2 from './FluentSystemIcons-Regular.woff2';
+import fontLightTtf from './FluentSystemIcons-Light.ttf';
+import fontLightWoff from './FluentSystemIcons-Light.woff';
+import fontLightWoff2 from './FluentSystemIcons-Light.woff2';
+import fontOneSizeTtf from './FluentSystemIcons-Resizable.ttf';
+import fontOneSizeWoff from './FluentSystemIcons-Resizable.woff';
+import fontOneSizeWoff2 from './FluentSystemIcons-Resizable.woff2';
+const FONT_FAMILY_MAP = {
+  [0 /* Filled */]: 'FluentSystemIconsFilled',
+  [1 /* Regular */]: 'FluentSystemIconsRegular',
+  [2 /* Resizable */]: 'FluentSystemIcons'
+};
+export const useStaticStyles = __staticStyles({
+  d: [`@font-face{font-family:FluentSystemIconsFilled;font-display:"block";src:url(${_asset}) format("woff2"),url(${_asset2}) format("woff"),url(${_asset3}) format("truetype");}`, `@font-face{font-family:FluentSystemIconsRegular;font-display:"block";src:url(${_asset4}) format("woff2"),url(${_asset5}) format("woff"),url(${_asset6}) format("truetype");}`, `@font-face{font-family:undefined;src:url(${_asset7}) format("woff2"),url(${_asset8}) format("woff"),url(${_asset9}) format("truetype");}`, `@font-face{font-family:FluentSystemIcons;font-display:"block";src:url(${_asset0}) format("woff2"),url(${_asset1}) format("woff"),url(${_asset10}) format("truetype");}`]
+});
+export const useRootStyles = __styles({
+  "0": {
+    Bahqtrf: "f9dzkbp"
+  },
+  "1": {
+    Bahqtrf: "f1krtbx5"
+  },
+  "2": {
+    Bahqtrf: "f1sxfq9t"
+  },
+  "3": {
+    Bahqtrf: "fgtzeza"
+  },
+  root: {
+    mc9l5x: "f14t3ns0",
+    B80ckks: "fmd4ok8",
+    Bg96gwp: "fne0op0",
+    sj55zd: "f303qgw"
+  }
+}, {
+  d: [".f9dzkbp{font-family:FluentSystemIconsFilled;}", ".f1krtbx5{font-family:FluentSystemIconsRegular;}", ".f1sxfq9t{font-family:FluentSystemIcons;}", ".fgtzeza{font-family:FluentSystemIconsLight;}", ".f14t3ns0{display:inline-block;}", ".fmd4ok8{font-style:normal;}", ".fne0op0{line-height:1em;}", ".f303qgw{color:currentColor;}"]
+});

node_modules/@fluentui/react-icons/lib/utils/fonts/createFluentFontIcon.styles.raw.js

@@ -0,0 +1,69 @@
+import { makeStyles, makeStaticStyles } from '@griffel/react';
+import fontFilledTtf from './FluentSystemIcons-Filled.ttf';
+import fontFilledWoff from './FluentSystemIcons-Filled.woff';
+import fontFilledWoff2 from './FluentSystemIcons-Filled.woff2';
+import fontRegularTtf from './FluentSystemIcons-Regular.ttf';
+import fontRegularWoff from './FluentSystemIcons-Regular.woff';
+import fontRegularWoff2 from './FluentSystemIcons-Regular.woff2';
+import fontLightTtf from './FluentSystemIcons-Light.ttf';
+import fontLightWoff from './FluentSystemIcons-Light.woff';
+import fontLightWoff2 from './FluentSystemIcons-Light.woff2';
+import fontOneSizeTtf from './FluentSystemIcons-Resizable.ttf';
+import fontOneSizeWoff from './FluentSystemIcons-Resizable.woff';
+import fontOneSizeWoff2 from './FluentSystemIcons-Resizable.woff2';
+const FONT_FAMILY_MAP = {
+    [0 /* Filled */]: 'FluentSystemIconsFilled',
+    [1 /* Regular */]: 'FluentSystemIconsRegular',
+    [2 /* Resizable */]: 'FluentSystemIcons',
+};
+export const useStaticStyles = makeStaticStyles(`
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[0 /* Filled */]};
+    font-display: "block";
+    src: url(${JSON.stringify(fontFilledWoff2)}) format("woff2"),
+    url(${JSON.stringify(fontFilledWoff)}) format("woff"),
+    url(${JSON.stringify(fontFilledTtf)}) format("truetype");
+}
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[1 /* Regular */]};
+    font-display: "block";
+    src: url(${JSON.stringify(fontRegularWoff2)}) format("woff2"),
+    url(${JSON.stringify(fontRegularWoff)}) format("woff"),
+    url(${JSON.stringify(fontRegularTtf)}) format("truetype");
+}
+
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[3 /* Light */]};
+    src: url(${JSON.stringify(fontLightWoff2)}) format("woff2"),
+    url(${JSON.stringify(fontLightWoff)}) format("woff"),
+    url(${JSON.stringify(fontLightTtf)}) format("truetype");
+}
+
+@font-face {
+    font-family: ${FONT_FAMILY_MAP[2 /* Resizable */]};
+    font-display: "block";
+    src: url(${JSON.stringify(fontOneSizeWoff2)}) format("woff2"),
+    url(${JSON.stringify(fontOneSizeWoff)}) format("woff"),
+    url(${JSON.stringify(fontOneSizeTtf)}) format("truetype");
+}
+`);
+export const useRootStyles = makeStyles({
+    root: {
+        display: 'inline-block',
+        fontStyle: 'normal',
+        lineHeight: '1em',
+        color: 'currentColor',
+    },
+    [0 /* Filled */]: {
+        fontFamily: 'FluentSystemIconsFilled',
+    },
+    [1 /* Regular */]: {
+        fontFamily: 'FluentSystemIconsRegular',
+    },
+    [2 /* Resizable */]: {
+        fontFamily: 'FluentSystemIcons',
+    },
+    [3 /* Light */]: {
+        fontFamily: 'FluentSystemIconsLight',
+    },
+});