feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-icons/lib/utils/FluentIconsProps.types.d.ts

@@ -0,0 +1,11 @@
+import * as React from 'react';
+export declare type FluentIconsProps<TBaseAttributes extends React.SVGAttributes<SVGElement> | React.HTMLAttributes<HTMLElement> = React.SVGAttributes<SVGElement>, TRefType extends HTMLElement | SVGSVGElement = SVGSVGElement> = TBaseAttributes & React.RefAttributes<TRefType> & {
+    primaryFill?: string;
+    className?: string;
+    title?: string;
+    /**
+     * Whether to render the filled version of the icon.
+     * NOTE: This prop is only applicable when using bundled icons created with `bundleIcon`.
+     */
+    filled?: boolean;
+};

node_modules/@fluentui/react-icons/lib/utils/FluentIconsProps.types.js

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

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

@@ -0,0 +1,7 @@
+import type { FluentIcon } from './createFluentIcon';
+/**
+ *
+ * Combine the Regular and Filled versions of icons
+ * Could be used to toggle between them on hover.
+ */
+export declare const bundleIcon: (FilledIcon: FluentIcon, RegularIcon: FluentIcon) => FluentIcon;

node_modules/@fluentui/react-icons/lib/utils/bundleIcon.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { mergeClasses } from '@griffel/react';
+import { iconFilledClassName, iconRegularClassName } from './constants';
+import { useBundledIconStyles } from './bundleIcon.styles';
+/**
+ *
+ * Combine the Regular and Filled versions of icons
+ * Could be used to toggle between them on hover.
+ */
+export const bundleIcon = (FilledIcon, RegularIcon) => {
+    const Component = (props) => {
+        const { className, filled, ...rest } = props;
+        const styles = useBundledIconStyles();
+        return (React.createElement(React.Fragment, null,
+            React.createElement(FilledIcon, Object.assign({}, rest, { className: mergeClasses(styles.root, filled && styles.visible, iconFilledClassName, className) })),
+            React.createElement(RegularIcon, Object.assign({}, rest, { className: mergeClasses(styles.root, !filled && styles.visible, iconRegularClassName, className) }))));
+    };
+    Component.displayName = 'CompoundIcon';
+    return Component;
+};

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

@@ -0,0 +1 @@
+export declare const useBundledIconStyles: () => Record<"visible" | "root", string>;

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

@@ -0,0 +1,11 @@
+import { __styles } from '@griffel/react';
+export const useBundledIconStyles = __styles({
+  root: {
+    mc9l5x: "fjseox"
+  },
+  visible: {
+    mc9l5x: "f1w7gpdv"
+  }
+}, {
+  d: [".fjseox{display:none;}", ".f1w7gpdv{display:inline;}"]
+});

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

@@ -0,0 +1,5 @@
+import { makeStyles } from '@griffel/react';
+export const useBundledIconStyles = makeStyles({
+    root: { display: 'none' },
+    visible: { display: 'inline' },
+});

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

@@ -0,0 +1,6 @@
+export declare const iconClassName = "fui-Icon";
+export declare const iconFilledClassName = "fui-Icon-filled";
+export declare const iconRegularClassName = "fui-Icon-regular";
+export declare const iconLightClassName = "fui-Icon-light";
+export declare const iconColorClassName = "fui-Icon-color";
+export declare const fontIconClassName = "fui-Icon-font";

node_modules/@fluentui/react-icons/lib/utils/constants.js

@@ -0,0 +1,6 @@
+export const iconClassName = 'fui-Icon';
+export const iconFilledClassName = 'fui-Icon-filled';
+export const iconRegularClassName = 'fui-Icon-regular';
+export const iconLightClassName = 'fui-Icon-light';
+export const iconColorClassName = 'fui-Icon-color';
+export const fontIconClassName = 'fui-Icon-font';

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

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { FluentIconsProps } from './FluentIconsProps.types';
+export declare type FluentIcon = React.FC<FluentIconsProps>;
+export declare type CreateFluentIconOptions = {
+    flipInRtl?: boolean;
+    color?: boolean;
+};
+export declare const createFluentIcon: (displayName: string, width: string, pathsOrSvg: string[] | string, options?: CreateFluentIconOptions | undefined) => FluentIcon;

node_modules/@fluentui/react-icons/lib/utils/createFluentIcon.js

@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { mergeClasses } from '@griffel/react';
+import { useIconState } from './useIconState';
+import { useRootStyles } from './createFluentIcon.styles';
+import { iconClassName } from './constants';
+export const createFluentIcon = (displayName, width, pathsOrSvg, options) => {
+    const viewBoxWidth = width === '1em' ? '20' : width;
+    const Icon = React.forwardRef((props, ref) => {
+        const styles = useRootStyles();
+        const iconState = useIconState(props, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl }); // HTML attributes/props for things like accessibility can be passed in, and will be expanded on the svg object at the start of the object
+        const state = {
+            ...iconState,
+            className: mergeClasses(iconClassName, iconState.className, styles.root),
+            ref,
+            width,
+            height: width,
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`,
+            xmlns: 'http://www.w3.org/2000/svg',
+        };
+        if (typeof pathsOrSvg === 'string') {
+            // Color icon: render raw SVG children
+            return React.createElement('svg', { ...state, dangerouslySetInnerHTML: { __html: pathsOrSvg } });
+        }
+        else {
+            // Non-color icon: render paths as before
+            return React.createElement('svg', state, ...pathsOrSvg.map((d) => React.createElement('path', { d, fill: state.fill })));
+        }
+    });
+    Icon.displayName = displayName;
+    return Icon;
+};

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

@@ -0,0 +1 @@
+export declare const useRootStyles: () => Record<"root", string>;

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

@@ -0,0 +1,10 @@
+import { __styles } from '@griffel/react';
+export const useRootStyles = __styles({
+  root: {
+    B8gzw0y: "f1dd5bof"
+  }
+}, {
+  m: [["@media (forced-colors: active){.f1dd5bof{forced-color-adjust:auto;}}", {
+    m: "(forced-colors: active)"
+  }]]
+});

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

@@ -0,0 +1,11 @@
+import { makeStyles } from '@griffel/react';
+export const useRootStyles = makeStyles({
+    root: {
+        // This style is required because browsers automatically have SVGs set to
+        // forced-color-adjust: preserve-parent-color, which will not override
+        // internally-defined colors in our SVG icons in high contrast mode.
+        '@media (forced-colors: active)': {
+            forcedColorAdjust: 'auto',
+        },
+    },
+});

node_modules/@fluentui/react-icons/lib/utils/createFluentIcon.svg-sprite.d.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import type { FluentIconsProps } from './FluentIconsProps.types';
+export declare type FluentIcon = React.FC<FluentIconsProps>;
+declare type CreateFluentIconOptions = {
+    flipInRtl?: boolean;
+    color?: boolean;
+};
+/**
+ * Creates a React component for a Fluent icon that references an SVG symbol from a sprite.
+ *
+ * @access private
+ * @alpha
+ *
+ * @param iconId - The SVG symbol id in the sprite sheet.
+ * @param size - The icon size (for example, `"1em"` or a numeric string).
+ * @param spritePath - Optional path/URL to the SVG sprite file. If omitted, an in-document symbol reference is used.
+ * @param options - Optional creation settings (for example RTL flipping and color behavior).
+ * @returns A Fluent icon React component.
+ */
+export declare const createFluentIcon: (iconId: string, size: string, spritePath?: string | undefined, options?: CreateFluentIconOptions | undefined) => FluentIcon;
+export {};

node_modules/@fluentui/react-icons/lib/utils/createFluentIcon.svg-sprite.js

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import { mergeClasses } from '@griffel/react';
+import { useIconState } from './useIconState';
+import { useRootStyles } from './createFluentIcon.styles';
+import { iconClassName } from './constants';
+/**
+ * Creates a React component for a Fluent icon that references an SVG symbol from a sprite.
+ *
+ * @access private
+ * @alpha
+ *
+ * @param iconId - The SVG symbol id in the sprite sheet.
+ * @param size - The icon size (for example, `"1em"` or a numeric string).
+ * @param spritePath - Optional path/URL to the SVG sprite file. If omitted, an in-document symbol reference is used.
+ * @param options - Optional creation settings (for example RTL flipping and color behavior).
+ * @returns A Fluent icon React component.
+ */
+export const createFluentIcon = (iconId, size, spritePath, options) => {
+    const viewBoxWidth = size === '1em' ? '20' : size;
+    const Icon = React.forwardRef((props, ref) => {
+        const styles = useRootStyles();
+        const iconState = useIconState(props, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl }); // HTML attributes/props for things like accessibility can be passed in, and will be expanded on the svg object at the start of the object
+        const state = {
+            ...iconState,
+            className: mergeClasses(iconClassName, iconState.className, styles.root),
+            ref,
+            width: size,
+            height: size,
+            viewBox: `0 0 ${viewBoxWidth} ${viewBoxWidth}`,
+            xmlns: 'http://www.w3.org/2000/svg',
+        };
+        const href = spritePath ? `${spritePath}#${iconId}` : `#${iconId}`;
+        return React.createElement('svg', state, React.createElement('use', {
+            href,
+        }));
+    });
+    Icon.displayName = iconId;
+    return Icon;
+};

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',
+    },
+});

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

@@ -0,0 +1,5 @@
+import { FluentIconsProps } from './FluentIconsProps.types';
+export declare type UseIconStateOptions = {
+    flipInRtl?: boolean;
+};
+export declare const useIconState: <TBaseAttributes extends import("react").HTMLAttributes<HTMLElement> | import("react").SVGAttributes<SVGElement> = import("react").SVGAttributes<SVGElement>, TRefType extends HTMLElement | SVGSVGElement = SVGSVGElement>(props: FluentIconsProps<TBaseAttributes, TRefType>, options?: UseIconStateOptions | undefined) => Pick<FluentIconsProps<TBaseAttributes, TRefType>, "title" | "filled" | "ref" | "key" | "className" | Exclude<keyof TBaseAttributes, "primaryFill">>;

node_modules/@fluentui/react-icons/lib/utils/useIconState.js

@@ -0,0 +1,26 @@
+import { useIconContext } from '../contexts';
+import { mergeClasses } from '@griffel/react';
+import { useStyles } from './useIconStyles.styles';
+export const useIconState = (props, options) => {
+    const { 
+    // remove unwanted props to be set on the svg/html element
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    filled, title, primaryFill = 'currentColor', ...rest } = props;
+    const state = {
+        ...rest,
+        fill: primaryFill,
+    };
+    const styles = useStyles();
+    const iconContext = useIconContext();
+    state.className = mergeClasses(styles.root, (options === null || options === void 0 ? void 0 : options.flipInRtl) && (iconContext === null || iconContext === void 0 ? void 0 : iconContext.textDirection) === 'rtl' && styles.rtl, state.className);
+    if (title) {
+        state['aria-label'] = title;
+    }
+    if (!state['aria-label'] && !state['aria-labelledby']) {
+        state['aria-hidden'] = true;
+    }
+    else {
+        state['role'] = 'img';
+    }
+    return state;
+};

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

@@ -0,0 +1 @@
+export declare const useStyles: () => Record<"rtl" | "root", string>;

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

@@ -0,0 +1,12 @@
+import { __styles } from '@griffel/react';
+export const useStyles = __styles({
+  root: {
+    mc9l5x: "f1w7gpdv",
+    Bg96gwp: "fez10in"
+  },
+  rtl: {
+    Bz10aip: "f13rod7r"
+  }
+}, {
+  d: [".f1w7gpdv{display:inline;}", ".fez10in{line-height:0;}", ".f13rod7r{transform:scaleX(-1);}"]
+});

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

@@ -0,0 +1,10 @@
+import { makeStyles } from '@griffel/react';
+export const useStyles = makeStyles({
+    root: {
+        display: 'inline',
+        lineHeight: 0,
+    },
+    rtl: {
+        transform: 'scaleX(-1)',
+    },
+});

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

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import type { FluentIconsProps } from './FluentIconsProps.types';
+import type { CreateFluentIconOptions } from './createFluentIcon';
+/**
+ *
+ * Wraps custom Svg Component with Fluent Icon behaviour
+ *
+ * @example
+ * ```tsx
+ const CustomSvg = (iconProps: FluentIconsProps) =>
+  React.createElement(
+    'svg',
+    {
+      width: '20',
+      height: '20',
+      viewBox: '0 0 20 20',
+      xmlns: 'http://www.w3.org/2000/svg',
+      ...iconProps
+    },
+    React.createElement('path', {
+      fill: 'currentColor',
+      d: 'M10 2l6 16H4l6-16z'
+    })
+  );
+
+  const CustomIcon = wrapIcon(CustomSvg, 'CustomIcon');
+  ```
+ */
+export declare const wrapIcon: (Icon: (iconProps: FluentIconsProps) => React.ReactElement, displayName?: string | undefined, options?: CreateFluentIconOptions | undefined) => React.FC<FluentIconsProps<React.SVGAttributes<SVGElement>, SVGSVGElement>>;

node_modules/@fluentui/react-icons/lib/utils/wrapIcon.js

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { useIconState } from './useIconState';
+/**
+ *
+ * Wraps custom Svg Component with Fluent Icon behaviour
+ *
+ * @example
+ * ```tsx
+ const CustomSvg = (iconProps: FluentIconsProps) =>
+  React.createElement(
+    'svg',
+    {
+      width: '20',
+      height: '20',
+      viewBox: '0 0 20 20',
+      xmlns: 'http://www.w3.org/2000/svg',
+      ...iconProps
+    },
+    React.createElement('path', {
+      fill: 'currentColor',
+      d: 'M10 2l6 16H4l6-16z'
+    })
+  );
+
+  const CustomIcon = wrapIcon(CustomSvg, 'CustomIcon');
+  ```
+ */
+export const wrapIcon = (Icon, displayName, options) => {
+    const WrappedIcon = React.forwardRef((props, ref) => {
+        const state = {
+            ...useIconState(props, { flipInRtl: options === null || options === void 0 ? void 0 : options.flipInRtl }),
+            ref,
+        };
+        return React.createElement(Icon, Object.assign({}, state));
+    });
+    WrappedIcon.displayName = displayName;
+    return WrappedIcon;
+};