feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-link/lib/components/Link/Link.js

@@ -0,0 +1,16 @@
+'use client';
+import * as React from 'react';
+import { useLink_unstable } from './useLink';
+import { useLinkStyles_unstable } from './useLinkStyles.styles';
+import { renderLink_unstable } from './renderLink';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * A Link is a reference to data that a user can follow by clicking or tapping it.
+ */ export const Link = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useLink_unstable(props, ref);
+    useLinkStyles_unstable(state);
+    useCustomStyleHook_unstable('useLinkStyles_unstable')(state);
+    return renderLink_unstable(state);
+// Work around some small mismatches in inferred types which don't matter in practice
+});
+Link.displayName = 'Link';

node_modules/@fluentui/react-link/lib/components/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Link/Link.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useLink_unstable } from './useLink';\nimport { useLinkStyles_unstable } from './useLinkStyles.styles';\nimport { renderLink_unstable } from './renderLink';\nimport type { LinkProps } from './Link.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * A Link is a reference to data that a user can follow by clicking or tapping it.\n */\nexport const Link: ForwardRefComponent<LinkProps> = React.forwardRef((props, ref) => {\n  const state = useLink_unstable(props, ref);\n\n  useLinkStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useLinkStyles_unstable')(state);\n\n  return renderLink_unstable(state);\n  // Work around some small mismatches in inferred types which don't matter in practice\n}) as ForwardRefComponent<LinkProps>;\n\nLink.displayName = 'Link';\n"],"names":["React","useLink_unstable","useLinkStyles_unstable","renderLink_unstable","useCustomStyleHook_unstable","Link","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gBAAgB,QAAQ,YAAY;AAC7C,SAASC,sBAAsB,QAAQ,yBAAyB;AAChE,SAASC,mBAAmB,QAAQ,eAAe;AAGnD,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,qBAAuCL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3E,MAAMC,QAAQR,iBAAiBM,OAAOC;IAEtCN,uBAAuBO;IAEvBL,4BAA4B,0BAA0BK;IAEtD,OAAON,oBAAoBM;AAC3B,qFAAqF;AACvF,GAAqC;AAErCJ,KAAKK,WAAW,GAAG"}

node_modules/@fluentui/react-link/lib/components/Link/Link.types.js

@@ -0,0 +1,3 @@
+/**
+ * Link state without design-specific state (appearance, backgroundAppearance).
+ */ export { };

node_modules/@fluentui/react-link/lib/components/Link/Link.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Link/Link.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, DistributiveOmit, Slot } from '@fluentui/react-utilities';\nimport { BackgroundAppearanceContextValue } from '@fluentui/react-shared-contexts';\n\nexport type LinkSlots = {\n  /**\n   * Root of the component that renders as either an <a> or a <button> tag.\n   */\n  root: Slot<'a', 'button' | 'span'>;\n};\n\nexport type LinkProps = ComponentProps<LinkSlots> & {\n  /**\n   * A link can appear either with its default style or subtle.\n   * If not specified, the link appears with its default styling.\n   * @default 'default'\n   */\n  appearance?: 'default' | 'subtle';\n\n  /**\n   * Whether the link is disabled.\n   * @default false\n   */\n  disabled?: boolean;\n\n  /**\n   * When set, allows the link to be focusable even when it has been disabled. This is used in scenarios where it is\n   * important to keep a consistent tab order for screen reader and keyboard users.\n   * @default false\n   */\n  disabledFocusable?: boolean;\n\n  /**\n   * If true, changes styling when the link is being used alongside other text content.\n   * @default false\n   */\n  inline?: boolean;\n};\n\n/**\n * Link props without design-specific props (appearance).\n * Use this when building a base link that is unstyled or uses a custom design system.\n */\nexport type LinkBaseProps = DistributiveOmit<LinkProps, 'appearance'>;\n\nexport type LinkState = ComponentState<LinkSlots> &\n  Required<Pick<LinkProps, 'appearance' | 'disabled' | 'disabledFocusable' | 'inline'>> & {\n    backgroundAppearance?: BackgroundAppearanceContextValue;\n  };\n\n/**\n * Link state without design-specific state (appearance, backgroundAppearance).\n */\nexport type LinkBaseState = DistributiveOmit<LinkState, 'appearance' | 'backgroundAppearance'>;\n"],"names":[],"mappings":"AAiDA;;CAEC,GACD,WAA+F"}

node_modules/@fluentui/react-link/lib/components/Link/index.js

@@ -0,0 +1,5 @@
+export { Link } from './Link';
+export { renderLink_unstable } from './renderLink';
+export { useLink_unstable, useLinkBase_unstable } from './useLink';
+export { useLinkState_unstable } from './useLinkState';
+export { linkClassNames, useLinkStyles_unstable } from './useLinkStyles.styles';

node_modules/@fluentui/react-link/lib/components/Link/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Link/index.ts"],"sourcesContent":["export { Link } from './Link';\nexport type { LinkBaseProps, LinkBaseState, LinkProps, LinkSlots, LinkState } from './Link.types';\nexport { renderLink_unstable } from './renderLink';\nexport { useLink_unstable, useLinkBase_unstable } from './useLink';\nexport { useLinkState_unstable } from './useLinkState';\nexport { linkClassNames, useLinkStyles_unstable } from './useLinkStyles.styles';\n"],"names":["Link","renderLink_unstable","useLink_unstable","useLinkBase_unstable","useLinkState_unstable","linkClassNames","useLinkStyles_unstable"],"mappings":"AAAA,SAASA,IAAI,QAAQ,SAAS;AAE9B,SAASC,mBAAmB,QAAQ,eAAe;AACnD,SAASC,gBAAgB,EAAEC,oBAAoB,QAAQ,YAAY;AACnE,SAASC,qBAAqB,QAAQ,iBAAiB;AACvD,SAASC,cAAc,EAAEC,sBAAsB,QAAQ,yBAAyB"}

node_modules/@fluentui/react-link/lib/components/Link/renderLink.js

@@ -0,0 +1,8 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Renders a Link component by passing the state defined props to the appropriate slots.
+ */ export const renderLink_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

node_modules/@fluentui/react-link/lib/components/Link/renderLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Link/renderLink.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 { LinkSlots, LinkBaseState } from './Link.types';\n\n/**\n * Renders a Link component by passing the state defined props to the appropriate slots.\n */\nexport const renderLink_unstable = (state: LinkBaseState): JSXElement => {\n  assertSlots<LinkSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderLink_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,sBAAsB,CAACC;IAClCF,YAAuBE;IAEvB,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

node_modules/@fluentui/react-link/lib/components/Link/useLink.js

@@ -0,0 +1,56 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import { useBackgroundAppearance } from '@fluentui/react-shared-contexts';
+import { useLinkState_unstable } from './useLinkState';
+import { useLinkContext } from '../../contexts/linkContext';
+/**
+ * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.
+ * @param props - User provided props to the Link component.
+ * @param ref - User provided ref to be passed to the Link component.
+ */ export const useLink_unstable = (props, ref)=>{
+    const backgroundAppearance = useBackgroundAppearance();
+    const { appearance = 'default', ...baseProps } = props;
+    const state = useLinkBase_unstable(baseProps, ref);
+    return {
+        appearance,
+        backgroundAppearance,
+        ...state
+    };
+};
+/**
+ * Base hook for Link component, which manages state related to ARIA, keyboard handling,
+ * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).
+ *
+ * @param props - User provided props to the Link component.
+ * @param ref - User provided ref to be passed to the Link component.
+ */ export const useLinkBase_unstable = (props, ref)=>{
+    const { inline: inlineContext } = useLinkContext();
+    const { disabled = false, disabledFocusable = false, inline = false } = props;
+    const elementType = props.as || (props.href ? 'a' : 'button');
+    // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types
+    const propsWithAssignedAs = {
+        role: elementType === 'span' ? 'button' : undefined,
+        type: elementType === 'button' ? 'button' : undefined,
+        ...props,
+        as: elementType
+    };
+    const state = {
+        // Props passed at the top-level
+        disabled,
+        disabledFocusable,
+        inline: inline !== null && inline !== void 0 ? inline : !!inlineContext,
+        // Slots definition
+        components: {
+            root: elementType
+        },
+        root: slot.always(getIntrinsicElementProps(elementType, {
+            ref,
+            ...propsWithAssignedAs
+        }), {
+            elementType
+        })
+    };
+    useLinkState_unstable(state);
+    return state;
+};

node_modules/@fluentui/react-link/lib/components/Link/useLink.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Link/useLink.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { useBackgroundAppearance } from '@fluentui/react-shared-contexts';\nimport { useLinkState_unstable } from './useLinkState';\nimport type { LinkBaseProps, LinkBaseState, LinkProps, LinkState } from './Link.types';\nimport { useLinkContext } from '../../contexts/linkContext';\n\n/**\n * Given user props, defines default props for the Link, calls useLinkState_unstable, and returns processed state.\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLink_unstable = (\n  props: LinkProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkState => {\n  const backgroundAppearance = useBackgroundAppearance();\n  const { appearance = 'default', ...baseProps } = props;\n\n  const state = useLinkBase_unstable(baseProps, ref);\n\n  return {\n    appearance,\n    backgroundAppearance,\n    ...state,\n  };\n};\n\n/**\n * Base hook for Link component, which manages state related to ARIA, keyboard handling,\n * disabled behavior, and slot structure. This hook excludes design-specific props (appearance).\n *\n * @param props - User provided props to the Link component.\n * @param ref - User provided ref to be passed to the Link component.\n */\nexport const useLinkBase_unstable = (\n  props: LinkBaseProps,\n  ref: React.Ref<HTMLAnchorElement | HTMLButtonElement | HTMLSpanElement>,\n): LinkBaseState => {\n  const { inline: inlineContext } = useLinkContext();\n  const { disabled = false, disabledFocusable = false, inline = false } = props;\n\n  const elementType = props.as || (props.href ? 'a' : 'button');\n\n  // Casting is required here as `as` prop would break the union between `a`, `button` and `span` types\n  const propsWithAssignedAs = {\n    role: elementType === 'span' ? 'button' : undefined,\n    type: elementType === 'button' ? 'button' : undefined,\n    ...props,\n    as: elementType,\n  } as LinkBaseProps;\n\n  const state: LinkBaseState = {\n    // Props passed at the top-level\n    disabled,\n    disabledFocusable,\n    inline: inline ?? !!inlineContext,\n\n    // Slots definition\n    components: {\n      root: elementType,\n    },\n\n    root: slot.always(\n      getIntrinsicElementProps<LinkBaseProps>(elementType, {\n        ref,\n        ...propsWithAssignedAs,\n      } as const),\n      { elementType },\n    ),\n  };\n\n  useLinkState_unstable(state);\n\n  return state;\n};\n"],"names":["React","getIntrinsicElementProps","slot","useBackgroundAppearance","useLinkState_unstable","useLinkContext","useLink_unstable","props","ref","backgroundAppearance","appearance","baseProps","state","useLinkBase_unstable","inline","inlineContext","disabled","disabledFocusable","elementType","as","href","propsWithAssignedAs","role","undefined","type","components","root","always"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,SAASC,uBAAuB,QAAQ,kCAAkC;AAC1E,SAASC,qBAAqB,QAAQ,iBAAiB;AAEvD,SAASC,cAAc,QAAQ,6BAA6B;AAE5D;;;;CAIC,GACD,OAAO,MAAMC,mBAAmB,CAC9BC,OACAC;IAEA,MAAMC,uBAAuBN;IAC7B,MAAM,EAAEO,aAAa,SAAS,EAAE,GAAGC,WAAW,GAAGJ;IAEjD,MAAMK,QAAQC,qBAAqBF,WAAWH;IAE9C,OAAO;QACLE;QACAD;QACA,GAAGG,KAAK;IACV;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,uBAAuB,CAClCN,OACAC;IAEA,MAAM,EAAEM,QAAQC,aAAa,EAAE,GAAGV;IAClC,MAAM,EAAEW,WAAW,KAAK,EAAEC,oBAAoB,KAAK,EAAEH,SAAS,KAAK,EAAE,GAAGP;IAExE,MAAMW,cAAcX,MAAMY,EAAE,IAAKZ,CAAAA,MAAMa,IAAI,GAAG,MAAM,QAAO;IAE3D,qGAAqG;IACrG,MAAMC,sBAAsB;QAC1BC,MAAMJ,gBAAgB,SAAS,WAAWK;QAC1CC,MAAMN,gBAAgB,WAAW,WAAWK;QAC5C,GAAGhB,KAAK;QACRY,IAAID;IACN;IAEA,MAAMN,QAAuB;QAC3B,gCAAgC;QAChCI;QACAC;QACAH,QAAQA,mBAAAA,oBAAAA,SAAU,CAAC,CAACC;QAEpB,mBAAmB;QACnBU,YAAY;YACVC,MAAMR;QACR;QAEAQ,MAAMxB,KAAKyB,MAAM,CACf1B,yBAAwCiB,aAAa;YACnDV;YACA,GAAGa,mBAAmB;QACxB,IACA;YAAEH;QAAY;IAElB;IAEAd,sBAAsBQ;IAEtB,OAAOA;AACT,EAAE"}

node_modules/@fluentui/react-link/lib/components/Link/useLinkState.js

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { Enter, Space } from '@fluentui/keyboard-keys';
+/**
+ * The useLinkState_unstable hook processes the Link state.
+ * @param state - Link state to mutate.
+ */ export const useLinkState_unstable = (state)=>{
+    const { disabled, disabledFocusable } = state;
+    const { onClick, onKeyDown, role, tabIndex } = state.root;
+    // Add href for anchor elements.
+    if (state.root.as === 'a') {
+        state.root.href = disabled ? undefined : state.root.href;
+        // Add role="link" for disabled and disabledFocusable links.
+        if (disabled || disabledFocusable) {
+            state.root.role = role || 'link';
+        }
+    }
+    // Add tabIndex=0 for anchor and span elements.
+    if (state.root.as === 'a' || state.root.as === 'span') {
+        state.root.tabIndex = tabIndex !== null && tabIndex !== void 0 ? tabIndex : disabled && !disabledFocusable ? undefined : 0;
+    }
+    // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.
+    state.root.onClick = (ev)=>{
+        if (disabled || disabledFocusable) {
+            ev.preventDefault();
+        } else {
+            onClick === null || onClick === void 0 ? void 0 : onClick(ev);
+        }
+    };
+    // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.
+    state.root.onKeyDown = (ev)=>{
+        const keyPressed = ev.key === Enter || ev.key === Space;
+        if ((disabled || disabledFocusable) && keyPressed) {
+            ev.preventDefault();
+            ev.stopPropagation();
+        } else {
+            onKeyDown === null || onKeyDown === void 0 ? void 0 : onKeyDown(ev);
+            // if there is already onKeyDown provided - respect it
+            if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {
+                ev.preventDefault();
+                ev.currentTarget.click();
+            }
+        }
+    };
+    // Set the aria-disabled and disabled props correctly.
+    state.disabled = disabled || disabledFocusable;
+    state.root['aria-disabled'] = disabled || disabledFocusable || undefined;
+    if (state.root.as === 'button') {
+        state.root.disabled = disabled && !disabledFocusable;
+    }
+    return state;
+};

node_modules/@fluentui/react-link/lib/components/Link/useLinkState.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Link/useLinkState.ts"],"sourcesContent":["import * as React from 'react';\nimport { Enter, Space } from '@fluentui/keyboard-keys';\nimport type { LinkBaseState } from './Link.types';\n\n/**\n * The useLinkState_unstable hook processes the Link state.\n * @param state - Link state to mutate.\n */\nexport const useLinkState_unstable = (state: LinkBaseState): LinkBaseState => {\n  const { disabled, disabledFocusable } = state;\n  const { onClick, onKeyDown, role, tabIndex } = state.root;\n\n  // Add href for anchor elements.\n  if (state.root.as === 'a') {\n    state.root.href = disabled ? undefined : state.root.href;\n\n    // Add role=\"link\" for disabled and disabledFocusable links.\n    if (disabled || disabledFocusable) {\n      state.root.role = role || 'link';\n    }\n  }\n\n  // Add tabIndex=0 for anchor and span elements.\n  if (state.root.as === 'a' || state.root.as === 'span') {\n    state.root.tabIndex = tabIndex ?? (disabled && !disabledFocusable ? undefined : 0);\n  }\n\n  // Disallow click event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onClick = (ev: React.MouseEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    if (disabled || disabledFocusable) {\n      ev.preventDefault();\n    } else {\n      onClick?.(ev);\n    }\n  };\n\n  // Disallow keydown event when component is disabled and eat events when disabledFocusable is set to true.\n  state.root.onKeyDown = (ev: React.KeyboardEvent<HTMLAnchorElement & HTMLButtonElement>) => {\n    const keyPressed = ev.key === Enter || ev.key === Space;\n\n    if ((disabled || disabledFocusable) && keyPressed) {\n      ev.preventDefault();\n      ev.stopPropagation();\n    } else {\n      onKeyDown?.(ev);\n      // if there is already onKeyDown provided - respect it\n      if (state.root.as === 'span' && !!state.root.onClick && !onKeyDown && keyPressed) {\n        ev.preventDefault();\n        ev.currentTarget.click();\n      }\n    }\n  };\n\n  // Set the aria-disabled and disabled props correctly.\n  state.disabled = disabled || disabledFocusable;\n  state.root['aria-disabled'] = disabled || disabledFocusable || undefined;\n  if (state.root.as === 'button') {\n    state.root.disabled = disabled && !disabledFocusable;\n  }\n\n  return state;\n};\n"],"names":["React","Enter","Space","useLinkState_unstable","state","disabled","disabledFocusable","onClick","onKeyDown","role","tabIndex","root","as","href","undefined","ev","preventDefault","keyPressed","key","stopPropagation","currentTarget","click"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,KAAK,EAAEC,KAAK,QAAQ,0BAA0B;AAGvD;;;CAGC,GACD,OAAO,MAAMC,wBAAwB,CAACC;IACpC,MAAM,EAAEC,QAAQ,EAAEC,iBAAiB,EAAE,GAAGF;IACxC,MAAM,EAAEG,OAAO,EAAEC,SAAS,EAAEC,IAAI,EAAEC,QAAQ,EAAE,GAAGN,MAAMO,IAAI;IAEzD,gCAAgC;IAChC,IAAIP,MAAMO,IAAI,CAACC,EAAE,KAAK,KAAK;QACzBR,MAAMO,IAAI,CAACE,IAAI,GAAGR,WAAWS,YAAYV,MAAMO,IAAI,CAACE,IAAI;QAExD,4DAA4D;QAC5D,IAAIR,YAAYC,mBAAmB;YACjCF,MAAMO,IAAI,CAACF,IAAI,GAAGA,QAAQ;QAC5B;IACF;IAEA,+CAA+C;IAC/C,IAAIL,MAAMO,IAAI,CAACC,EAAE,KAAK,OAAOR,MAAMO,IAAI,CAACC,EAAE,KAAK,QAAQ;QACrDR,MAAMO,IAAI,CAACD,QAAQ,GAAGA,qBAAAA,sBAAAA,WAAaL,YAAY,CAACC,oBAAoBQ,YAAY;IAClF;IAEA,wGAAwG;IACxGV,MAAMO,IAAI,CAACJ,OAAO,GAAG,CAACQ;QACpB,IAAIV,YAAYC,mBAAmB;YACjCS,GAAGC,cAAc;QACnB,OAAO;YACLT,oBAAAA,8BAAAA,QAAUQ;QACZ;IACF;IAEA,0GAA0G;IAC1GX,MAAMO,IAAI,CAACH,SAAS,GAAG,CAACO;QACtB,MAAME,aAAaF,GAAGG,GAAG,KAAKjB,SAASc,GAAGG,GAAG,KAAKhB;QAElD,IAAI,AAACG,CAAAA,YAAYC,iBAAgB,KAAMW,YAAY;YACjDF,GAAGC,cAAc;YACjBD,GAAGI,eAAe;QACpB,OAAO;YACLX,sBAAAA,gCAAAA,UAAYO;YACZ,sDAAsD;YACtD,IAAIX,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU,CAAC,CAACR,MAAMO,IAAI,CAACJ,OAAO,IAAI,CAACC,aAAaS,YAAY;gBAChFF,GAAGC,cAAc;gBACjBD,GAAGK,aAAa,CAACC,KAAK;YACxB;QACF;IACF;IAEA,sDAAsD;IACtDjB,MAAMC,QAAQ,GAAGA,YAAYC;IAC7BF,MAAMO,IAAI,CAAC,gBAAgB,GAAGN,YAAYC,qBAAqBQ;IAC/D,IAAIV,MAAMO,IAAI,CAACC,EAAE,KAAK,UAAU;QAC9BR,MAAMO,IAAI,CAACN,QAAQ,GAAGA,YAAY,CAACC;IACrC;IAEA,OAAOF;AACT,EAAE"}

node_modules/@fluentui/react-link/lib/components/Link/useLinkStyles.styles.js

@@ -0,0 +1,112 @@
+'use client';
+
+import { shorthands, __styles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const linkClassNames = {
+  root: 'fui-Link'
+};
+const useStyles = /*#__PURE__*/__styles({
+  focusIndicator: {
+    Bttzg6e: "fhgqx19",
+    B3uz8dt: "f1olyrje",
+    B6ihwck: "f1p93eir",
+    g9k6zt: "f1nev41a"
+  },
+  root: {
+    B486eqv: "f2hkw1w",
+    De3pzq: "f3rmtva",
+    B7ck84d: "f1ewtqcl",
+    sj55zd: "fyind8e",
+    Bceei9c: "f1k6fduh",
+    mc9l5x: "f1w7gpdv",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    jrapky: 0,
+    Frg6f3: 0,
+    t21cq0: 0,
+    B6of3ja: 0,
+    B74szlk: "f1s184ao",
+    Byoj8tv: 0,
+    uwmqm3: 0,
+    z189sj: 0,
+    z8tnut: 0,
+    B0ocmuz: "f1mk8lai",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "fnbmjn9",
+    fsow6f: ["f1o700av", "fes3tcz"],
+    w71qe1: "f1iuv45f",
+    Bkioxbp: "f1cmlufx",
+    ygn44y: "f9n3di6",
+    famaaq: "f1ids18y",
+    Bde5pd6: "f1tx3yz7",
+    Bi91k9c: "f1deo86v",
+    i089h6: "f1eh06m1",
+    lj723h: "f1iescvh"
+  },
+  button: {
+    icvyot: "f1ern45e",
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    oivjwe: "f1h8hb77",
+    wvpqe5: ["f1deefiw", "f1n71otn"]
+  },
+  href: {
+    Be2twd7: "fjoy568"
+  },
+  subtle: {
+    sj55zd: "f2yjg6r",
+    Bde5pd6: "f1tx3yz7",
+    Bi91k9c: "fj1cjhr",
+    i089h6: "f1eh06m1",
+    lj723h: "fhucn0c"
+  },
+  inline: {
+    w71qe1: "f13mvf36"
+  },
+  disabled: {
+    w71qe1: "f1iuv45f",
+    sj55zd: "f1s2aq7o",
+    Bceei9c: "fdrzuqr",
+    Bde5pd6: "fbnuktb",
+    Bi91k9c: "fvgxktp",
+    i089h6: "fljg2da",
+    lj723h: "f19wldhg"
+  },
+  inverted: {
+    sj55zd: "f1qz2gb0",
+    Bi91k9c: "f1ujg2k6",
+    lj723h: "f1ebemlp"
+  },
+  brand: {
+    sj55zd: "f179xftw",
+    Bi91k9c: "f1sk1dtk",
+    lj723h: "f182g21t"
+  }
+}, {
+  d: [".fhgqx19[data-fui-focus-visible]{text-decoration-color:var(--colorStrokeFocus2);}", ".f1olyrje[data-fui-focus-visible]{text-decoration-line:underline;}", ".f1p93eir[data-fui-focus-visible]{text-decoration-style:double;}", ".f1nev41a[data-fui-focus-visible]{outline-style:none;}", ".f3rmtva{background-color:transparent;}", ".f1ewtqcl{box-sizing:border-box;}", ".fyind8e{color:var(--colorBrandForegroundLink);}", ".f1k6fduh{cursor:pointer;}", ".f1w7gpdv{display:inline;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", [".f1s184ao{margin:0;}", {
+    p: -1
+  }], [".f1mk8lai{padding:0;}", {
+    p: -1
+  }], [".fnbmjn9{overflow:inherit;}", {
+    p: -1
+  }], ".f1o700av{text-align:left;}", ".fes3tcz{text-align:right;}", ".f1iuv45f{text-decoration-line:none;}", ".f1cmlufx{text-decoration-thickness:var(--strokeWidthThin);}", ".f9n3di6{text-overflow:inherit;}", ".f1ids18y{-webkit-user-select:text;-moz-user-select:text;user-select:text;}", ".f1ern45e{border-top-style:none;}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", ".f1h8hb77{border-bottom-style:none;}", ".fjoy568{font-size:inherit;}", ".f2yjg6r{color:var(--colorNeutralForeground2Link);}", ".f13mvf36{text-decoration-line:underline;}", ".f1s2aq7o{color:var(--colorNeutralForegroundDisabled);}", ".fdrzuqr{cursor:not-allowed;}", ".f1qz2gb0{color:var(--colorBrandForegroundInverted);}", ".f179xftw{color:var(--colorNeutralForegroundInvertedLink);}"],
+  i: [".f2hkw1w:focus-visible{outline-style:none;}"],
+  h: [".f1tx3yz7:hover{text-decoration-line:underline;}", ".f1deo86v:hover{color:var(--colorBrandForegroundLinkHover);}", ".fj1cjhr:hover{color:var(--colorNeutralForeground2LinkHover);}", ".fbnuktb:hover{text-decoration-line:none;}", ".fvgxktp:hover{color:var(--colorNeutralForegroundDisabled);}", ".f1ujg2k6:hover{color:var(--colorBrandForegroundInverted);}", ".f1sk1dtk:hover{color:var(--colorNeutralForegroundInvertedLinkHover);}"],
+  a: [".f1eh06m1:active{text-decoration-line:underline;}", ".f1iescvh:active{color:var(--colorBrandForegroundLinkPressed);}", ".fhucn0c:active{color:var(--colorNeutralForeground2LinkPressed);}", ".fljg2da:active{text-decoration-line:none;}", ".f19wldhg:active{color:var(--colorNeutralForegroundDisabled);}", ".f1ebemlp:active{color:var(--colorBrandForegroundInverted);}", ".f182g21t:active{color:var(--colorNeutralForegroundInvertedLinkPressed);}"]
+});
+export const useLinkStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    appearance,
+    disabled,
+    inline,
+    root,
+    backgroundAppearance
+  } = state;
+  state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-link/lib/components/Link/useLinkStyles.styles.raw.js

@@ -0,0 +1,108 @@
+'use client';
+import { shorthands, makeStyles, mergeClasses } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens } from '@fluentui/react-theme';
+export const linkClassNames = {
+    root: 'fui-Link'
+};
+const useStyles = makeStyles({
+    focusIndicator: createCustomFocusIndicatorStyle({
+        textDecorationColor: tokens.colorStrokeFocus2,
+        textDecorationLine: 'underline',
+        textDecorationStyle: 'double',
+        outlineStyle: 'none'
+    }),
+    // Common styles.
+    root: {
+        ':focus-visible': {
+            outlineStyle: 'none'
+        },
+        backgroundColor: 'transparent',
+        boxSizing: 'border-box',
+        color: tokens.colorBrandForegroundLink,
+        cursor: 'pointer',
+        display: 'inline',
+        fontFamily: tokens.fontFamilyBase,
+        fontSize: tokens.fontSizeBase300,
+        fontWeight: tokens.fontWeightRegular,
+        margin: '0',
+        padding: '0',
+        overflow: 'inherit',
+        textAlign: 'left',
+        textDecorationLine: 'none',
+        textDecorationThickness: tokens.strokeWidthThin,
+        textOverflow: 'inherit',
+        userSelect: 'text',
+        ':hover': {
+            textDecorationLine: 'underline',
+            color: tokens.colorBrandForegroundLinkHover
+        },
+        ':active': {
+            textDecorationLine: 'underline',
+            color: tokens.colorBrandForegroundLinkPressed
+        }
+    },
+    // Overrides when the Link renders as a button.
+    button: {
+        ...shorthands.borderStyle('none')
+    },
+    // Overrides when an href is present so the Link renders as an anchor.
+    href: {
+        fontSize: 'inherit'
+    },
+    // Overrides when the Link appears subtle.
+    subtle: {
+        color: tokens.colorNeutralForeground2Link,
+        ':hover': {
+            textDecorationLine: 'underline',
+            color: tokens.colorNeutralForeground2LinkHover
+        },
+        ':active': {
+            textDecorationLine: 'underline',
+            color: tokens.colorNeutralForeground2LinkPressed
+        }
+    },
+    // Overrides when the Link is rendered inline within text.
+    inline: {
+        textDecorationLine: 'underline'
+    },
+    // Overrides when the Link is disabled.
+    disabled: {
+        textDecorationLine: 'none',
+        color: tokens.colorNeutralForegroundDisabled,
+        cursor: 'not-allowed',
+        ':hover': {
+            textDecorationLine: 'none',
+            color: tokens.colorNeutralForegroundDisabled
+        },
+        ':active': {
+            textDecorationLine: 'none',
+            color: tokens.colorNeutralForegroundDisabled
+        }
+    },
+    inverted: {
+        color: tokens.colorBrandForegroundInverted,
+        ':hover': {
+            color: tokens.colorBrandForegroundInverted
+        },
+        ':active': {
+            color: tokens.colorBrandForegroundInverted
+        }
+    },
+    brand: {
+        color: tokens.colorNeutralForegroundInvertedLink,
+        ':hover': {
+            color: tokens.colorNeutralForegroundInvertedLinkHover
+        },
+        ':active': {
+            color: tokens.colorNeutralForegroundInvertedLinkPressed
+        }
+    }
+});
+export const useLinkStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance, disabled, inline, root, backgroundAppearance } = state;
+    state.root.className = mergeClasses(linkClassNames.root, styles.root, styles.focusIndicator, root.as === 'a' && root.href && styles.href, root.as === 'button' && styles.button, appearance === 'subtle' && styles.subtle, backgroundAppearance === 'inverted' && styles.inverted, backgroundAppearance === 'brand' && styles.brand, inline && styles.inline, disabled && styles.disabled, state.root.className);
+    return state;
+};