feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/TeachingPopoverTitle.js

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+import { useTeachingPopoverTitle_unstable } from './useTeachingPopoverTitle';
+import { renderTeachingPopoverTitle_unstable } from './renderTeachingPopoverTitle';
+import { useTeachingPopoverTitleStyles_unstable } from './useTeachingPopoverTitleStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Define a styled TeachingPopoverTitle, using the `useTeachingPopoverTitle_unstable` and `useTeachingPopoverTitleStyles_unstable`
+ * hooks.
+ *
+ * TeachingPopoverTitle is similar to TeachingPopoverHeader, but it is intended to be placed within a TeachingPopoverBody
+ * TeachingPopoverTitle can also optionally render a dismiss button, however this should only be enabled when there is no TeachingPopoverHeader/dismiss.
+ */ export const TeachingPopoverTitle = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverTitle_unstable(props, ref);
+    useTeachingPopoverTitleStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverTitleStyles_unstable')(state);
+    return renderTeachingPopoverTitle_unstable(state);
+});
+TeachingPopoverTitle.displayName = 'TeachingPopoverTitle';

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/TeachingPopoverTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/TeachingPopoverTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopoverTitle_unstable } from './useTeachingPopoverTitle';\nimport { renderTeachingPopoverTitle_unstable } from './renderTeachingPopoverTitle';\nimport { useTeachingPopoverTitleStyles_unstable } from './useTeachingPopoverTitleStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { TeachingPopoverTitleProps } from './TeachingPopoverTitle.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverTitle, using the `useTeachingPopoverTitle_unstable` and `useTeachingPopoverTitleStyles_unstable`\n * hooks.\n *\n * TeachingPopoverTitle is similar to TeachingPopoverHeader, but it is intended to be placed within a TeachingPopoverBody\n * TeachingPopoverTitle can also optionally render a dismiss button, however this should only be enabled when there is no TeachingPopoverHeader/dismiss.\n */\nexport const TeachingPopoverTitle: ForwardRefComponent<TeachingPopoverTitleProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverTitle_unstable(props, ref);\n\n  useTeachingPopoverTitleStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTeachingPopoverTitleStyles_unstable')(state);\n\n  return renderTeachingPopoverTitle_unstable(state);\n});\n\nTeachingPopoverTitle.displayName = 'TeachingPopoverTitle';\n"],"names":["React","useTeachingPopoverTitle_unstable","renderTeachingPopoverTitle_unstable","useTeachingPopoverTitleStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverTitle","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,sCAAsC,QAAQ,yCAAyC;AAChG,SAASC,2BAA2B,QAAQ,kCAAkC;AAI9E;;;;;;CAMC,GACD,OAAO,MAAMC,qCAAuEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IAC3G,MAAMC,QAAQR,iCAAiCM,OAAOC;IAEtDL,uCAAuCM;IAEvCL,4BAA4B,0CAA0CK;IAEtE,OAAOP,oCAAoCO;AAC7C,GAAG;AAEHJ,qBAAqBK,WAAW,GAAG"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/TeachingPopoverTitle.types.js

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

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/TeachingPopoverTitle.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/TeachingPopoverTitle.types.ts"],"sourcesContent":["import { PopoverContextValue } from '@fluentui/react-popover';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverTitleSlots = {\n  /**\n   * Title for teaching bubble\n   */\n  root: Slot<'h2', 'h1' | 'h3' | 'h4' | 'h5' | 'h6' | 'div'>;\n  /**\n   * An alternate close button path if not placed in the TeachingPopoverHeader\n   */\n  dismissButton?: Slot<'button'>;\n};\n\n/**\n * TeachingPopoverTitle Props\n */\nexport type TeachingPopoverTitleProps = ComponentProps<TeachingPopoverTitleSlots>;\n\n/**\n * State used in rendering TeachingPopoverTitle\n */\nexport type TeachingPopoverTitleState = ComponentState<TeachingPopoverTitleSlots> &\n  Pick<PopoverContextValue, 'appearance'>;\n"],"names":[],"mappings":"AAmBA;;CAEC,GACD,WAC0C"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/index.js

@@ -0,0 +1,4 @@
+export { TeachingPopoverTitle } from './TeachingPopoverTitle';
+export { renderTeachingPopoverTitle_unstable } from './renderTeachingPopoverTitle';
+export { useTeachingPopoverTitle_unstable } from './useTeachingPopoverTitle';
+export { teachingPopoverTitleClassNames, useTeachingPopoverTitleStyles_unstable } from './useTeachingPopoverTitleStyles.styles';

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/index.ts"],"sourcesContent":["export { TeachingPopoverTitle } from './TeachingPopoverTitle';\nexport type {\n  TeachingPopoverTitleProps,\n  TeachingPopoverTitleSlots,\n  TeachingPopoverTitleState,\n} from './TeachingPopoverTitle.types';\nexport { renderTeachingPopoverTitle_unstable } from './renderTeachingPopoverTitle';\nexport { useTeachingPopoverTitle_unstable } from './useTeachingPopoverTitle';\nexport {\n  teachingPopoverTitleClassNames,\n  useTeachingPopoverTitleStyles_unstable,\n} from './useTeachingPopoverTitleStyles.styles';\n"],"names":["TeachingPopoverTitle","renderTeachingPopoverTitle_unstable","useTeachingPopoverTitle_unstable","teachingPopoverTitleClassNames","useTeachingPopoverTitleStyles_unstable"],"mappings":"AAAA,SAASA,oBAAoB,QAAQ,yBAAyB;AAM9D,SAASC,mCAAmC,QAAQ,+BAA+B;AACnF,SAASC,gCAAgC,QAAQ,4BAA4B;AAC7E,SACEC,8BAA8B,EAC9BC,sCAAsC,QACjC,yCAAyC"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/renderTeachingPopoverTitle.js

@@ -0,0 +1,13 @@
+  import { jsx as _jsx, jsxs as _jsxs } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+/**
+ * Render the final JSX of TeachingPopoverTitle
+ */ export const renderTeachingPopoverTitle_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.root.children,
+            state.dismissButton && /*#__PURE__*/ _jsx(state.dismissButton, {})
+        ]
+    });
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/renderTeachingPopoverTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/renderTeachingPopoverTitle.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverTitleState } from './TeachingPopoverTitle.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport { TeachingPopoverTitleSlots } from './TeachingPopoverTitle.types';\n\n/**\n * Render the final JSX of TeachingPopoverTitle\n */\nexport const renderTeachingPopoverTitle_unstable = (state: TeachingPopoverTitleState): JSXElement => {\n  assertSlots<TeachingPopoverTitleSlots>(state);\n\n  return (\n    <state.root>\n      {state.root.children}\n      {state.dismissButton && <state.dismissButton />}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTeachingPopoverTitle_unstable","state","root","children","dismissButton"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAIxD;;CAEC,GACD,OAAO,MAAMC,sCAAsC,CAACC;IAClDF,YAAuCE;IAEvC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAMC,IAAI,CAACC,QAAQ;YACnBF,MAAMG,aAAa,kBAAI,KAACH,MAAMG,aAAa;;;AAGlD,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/useTeachingPopoverTitle.js

@@ -0,0 +1,47 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';
+import { DismissFilled, DismissRegular, bundleIcon } from '@fluentui/react-icons';
+import { usePopoverContext_unstable } from '@fluentui/react-popover';
+const DismissIcon = bundleIcon(DismissFilled, DismissRegular);
+/**
+ * Returns the props and state required to render the component
+ * @param props - TeachingPopoverTitle properties
+ * @param ref - reference to root HTMLElement of TeachingPopoverTitle
+ */ export const useTeachingPopoverTitle_unstable = (props, ref)=>{
+    const { dismissButton } = props;
+    const setOpen = usePopoverContext_unstable((context)=>context.setOpen);
+    const triggerRef = usePopoverContext_unstable((context)=>context.triggerRef);
+    const appearance = usePopoverContext_unstable((context)=>context.appearance);
+    const onDismissButtonClick = useEventCallback((ev)=>{
+        if (!ev.defaultPrevented) {
+            setOpen(ev, false);
+        }
+        if (triggerRef.current) {
+            triggerRef.current.focus();
+        }
+    });
+    return {
+        appearance,
+        components: {
+            root: 'h2',
+            dismissButton: 'button'
+        },
+        root: slot.always(getIntrinsicElementProps('h2', {
+            ref,
+            ...props
+        }), {
+            elementType: 'h2'
+        }),
+        dismissButton: slot.optional(dismissButton, {
+            renderByDefault: false,
+            defaultProps: {
+                children: /*#__PURE__*/ React.createElement(DismissIcon, null),
+                onClick: onDismissButtonClick,
+                'aria-label': 'dismiss',
+                'aria-hidden': true
+            },
+            elementType: 'button'
+        })
+    };
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/useTeachingPopoverTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverTitle/useTeachingPopoverTitle.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, useEventCallback, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverTitleProps, TeachingPopoverTitleState } from './TeachingPopoverTitle.types';\nimport { DismissFilled, DismissRegular, bundleIcon } from '@fluentui/react-icons';\nimport { usePopoverContext_unstable } from '@fluentui/react-popover';\n\nconst DismissIcon = bundleIcon(DismissFilled, DismissRegular);\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverTitle properties\n * @param ref - reference to root HTMLElement of TeachingPopoverTitle\n */\nexport const useTeachingPopoverTitle_unstable = (\n  props: TeachingPopoverTitleProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverTitleState => {\n  const { dismissButton } = props;\n\n  const setOpen = usePopoverContext_unstable(context => context.setOpen);\n  const triggerRef = usePopoverContext_unstable(context => context.triggerRef);\n  const appearance = usePopoverContext_unstable(context => context.appearance);\n\n  const onDismissButtonClick = useEventCallback((ev: React.MouseEvent<HTMLButtonElement>) => {\n    if (!ev.defaultPrevented) {\n      setOpen(ev, false);\n    }\n\n    if (triggerRef.current) {\n      triggerRef.current.focus();\n    }\n  });\n\n  return {\n    appearance,\n    components: {\n      root: 'h2',\n      dismissButton: 'button',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('h2', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'h2' },\n    ),\n    dismissButton: slot.optional(dismissButton, {\n      renderByDefault: false,\n      defaultProps: {\n        children: <DismissIcon />,\n        onClick: onDismissButtonClick,\n        'aria-label': 'dismiss',\n        'aria-hidden': true,\n      },\n      elementType: 'button',\n    }),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","useEventCallback","slot","DismissFilled","DismissRegular","bundleIcon","usePopoverContext_unstable","DismissIcon","useTeachingPopoverTitle_unstable","props","ref","dismissButton","setOpen","context","triggerRef","appearance","onDismissButtonClick","ev","defaultPrevented","current","focus","components","root","always","elementType","optional","renderByDefault","defaultProps","children","onClick"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,gBAAgB,EAAEC,IAAI,QAAQ,4BAA4B;AAE7F,SAASC,aAAa,EAAEC,cAAc,EAAEC,UAAU,QAAQ,wBAAwB;AAClF,SAASC,0BAA0B,QAAQ,0BAA0B;AAErE,MAAMC,cAAcF,WAAWF,eAAeC;AAC9C;;;;CAIC,GACD,OAAO,MAAMI,mCAAmC,CAC9CC,OACAC;IAEA,MAAM,EAAEC,aAAa,EAAE,GAAGF;IAE1B,MAAMG,UAAUN,2BAA2BO,CAAAA,UAAWA,QAAQD,OAAO;IACrE,MAAME,aAAaR,2BAA2BO,CAAAA,UAAWA,QAAQC,UAAU;IAC3E,MAAMC,aAAaT,2BAA2BO,CAAAA,UAAWA,QAAQE,UAAU;IAE3E,MAAMC,uBAAuBf,iBAAiB,CAACgB;QAC7C,IAAI,CAACA,GAAGC,gBAAgB,EAAE;YACxBN,QAAQK,IAAI;QACd;QAEA,IAAIH,WAAWK,OAAO,EAAE;YACtBL,WAAWK,OAAO,CAACC,KAAK;QAC1B;IACF;IAEA,OAAO;QACLL;QACAM,YAAY;YACVC,MAAM;YACNX,eAAe;QACjB;QACAW,MAAMpB,KAAKqB,MAAM,CACfvB,yBAAyB,MAAM;YAC7BU;YACA,GAAGD,KAAK;QACV,IACA;YAAEe,aAAa;QAAK;QAEtBb,eAAeT,KAAKuB,QAAQ,CAACd,eAAe;YAC1Ce,iBAAiB;YACjBC,cAAc;gBACZC,wBAAU,oBAACrB;gBACXsB,SAASb;gBACT,cAAc;gBACd,eAAe;YACjB;YACAQ,aAAa;QACf;IACF;AACF,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.js

@@ -0,0 +1,96 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const teachingPopoverTitleClassNames = {
+  root: 'fui-TeachingPopoverTitle',
+  dismissButton: 'fui-TeachingPopoverTitle__dismissButton'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq",
+    Brf1p80: "f1869bpl",
+    Be2twd7: "fod5ikn",
+    Bhrd7zp: "fl43uef",
+    sj55zd: "f19n0e5",
+    Bg96gwp: "faaz57k",
+    Byoj8tv: "f5b47ha",
+    B6of3ja: "f1jkagg5",
+    jrapky: "fi2ljxd"
+  },
+  rootBrand: {
+    sj55zd: "f1phragk"
+  },
+  dismissButton: {
+    qhf8xq: "f10pi13n",
+    Bgfg5da: 0,
+    B9xav0g: 0,
+    oivjwe: 0,
+    Bn0qgzm: 0,
+    B4g9neb: 0,
+    zhjwy3: 0,
+    wvpqe5: 0,
+    ibv6hh: 0,
+    u1mtju: 0,
+    h3c5rm: 0,
+    vrafjx: ["f1n71otn", "f1deefiw"],
+    Bekrc4i: 0,
+    i8vvqc: 0,
+    g2u3we: 0,
+    icvyot: 0,
+    B4j52fo: 0,
+    irswps: "f88035w",
+    mc9l5x: "f22iagw",
+    Bt984gj: "f122n59",
+    Bceei9c: "f1k6fduh",
+    Bahqtrf: "fk6fouc",
+    Be2twd7: "fkhj508",
+    Bhrd7zp: "figsok6",
+    Bg96gwp: "f1i3iumi",
+    De3pzq: "f1c21dwh",
+    B7ck84d: "f1ewtqcl",
+    B7oj6ja: ["f3fg2lr", "f13av6d4"],
+    Bbmb7ep: ["fzi6hpg", "fyowgf4"],
+    Bfpq7zp: 0,
+    g9k6zt: 0,
+    Bn4voq9: 0,
+    giviqs: "f89hs3r",
+    Bw81rd7: 0,
+    kdpuga: 0,
+    dm238s: 0,
+    B6xbmo0: 0,
+    B3whbx2: "f2krc9w",
+    B8q5s1w: "f8hki3x",
+    Bci5o5g: ["f1d2448m", "ffh67wi"],
+    n8qw10: "f1bjia2o",
+    Bdrgwmp: ["ffh67wi", "f1d2448m"],
+    Jyy4pa: "f1lfeew"
+  },
+  dismissBrand: {
+    sj55zd: "f1phragk"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", ".fod5ikn{font-size:var(--fontSizeBase400);}", ".fl43uef{font-weight:var(--fontWeightSemibold);}", ".f19n0e5{color:var(--colorNeutralForeground1);}", ".faaz57k{line-height:var(--lineHeightBase400);}", ".f5b47ha{padding-bottom:var(--spacingVerticalS);}", ".f1jkagg5{margin-top:var(--spacingHorizontalNone);}", ".fi2ljxd{margin-bottom:var(--spacingHorizontalNone);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".f10pi13n{position:relative;}", [".f88035w{border:var(--strokeWidthThin) solid var(--colorTransparentStroke);}", {
+    p: -2
+  }], ".f122n59{align-items:center;}", ".f1k6fduh{cursor:pointer;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fkhj508{font-size:var(--fontSizeBase300);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".f1i3iumi{line-height:var(--lineHeightBase300);}", ".f1c21dwh{background-color:var(--colorTransparentBackground);}", ".f1ewtqcl{box-sizing:border-box;}", ".f3fg2lr{border-top-right-radius:var(--borderRadiusNone);}", ".f13av6d4{border-top-left-radius:var(--borderRadiusNone);}", ".fzi6hpg{border-bottom-right-radius:var(--borderRadiusNone);}", ".fyowgf4{border-bottom-left-radius:var(--borderRadiusNone);}", ".f1n71otn{border-right-style:none;}", ".f1deefiw{border-left-style:none;}", [".f89hs3r[data-fui-focus-visible]{outline:var(--strokeWidthThick) solid var(--colorStrokeFocus2);}", {
+    p: -1
+  }], [".f2krc9w[data-fui-focus-visible]{border-radius:var(--borderRadiusMedium);}", {
+    p: -1
+  }], ".f8hki3x[data-fui-focus-visible]{border-top-color:transparent;}", ".f1d2448m[data-fui-focus-visible]{border-right-color:transparent;}", ".ffh67wi[data-fui-focus-visible]{border-left-color:transparent;}", ".f1bjia2o[data-fui-focus-visible]{border-bottom-color:transparent;}", ".f1lfeew{-webkit-margin-start:auto;margin-inline-start:auto;}"]
+});
+/** Applies style classnames to slots */
+export const useTeachingPopoverTitleStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    appearance
+  } = state;
+  state.root.className = mergeClasses(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
+  if (state.dismissButton) {
+    state.dismissButton.className = mergeClasses(teachingPopoverTitleClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","createCustomFocusIndicatorStyle","tokens","typographyStyles","teachingPopoverTitleClassNames","root","dismissButton","useStyles","mc9l5x","Beiy3e4","Brf1p80","Be2twd7","Bhrd7zp","sj55zd","Bg96gwp","Byoj8tv","B6of3ja","jrapky","rootBrand","qhf8xq","Bgfg5da","B9xav0g","oivjwe","Bn0qgzm","B4g9neb","zhjwy3","wvpqe5","ibv6hh","u1mtju","h3c5rm","vrafjx","Bekrc4i","i8vvqc","g2u3we","icvyot","B4j52fo","irswps","Bt984gj","Bceei9c","Bahqtrf","De3pzq","B7ck84d","B7oj6ja","Bbmb7ep","Bfpq7zp","g9k6zt","Bn4voq9","giviqs","Bw81rd7","kdpuga","dm238s","B6xbmo0","B3whbx2","B8q5s1w","Bci5o5g","n8qw10","Bdrgwmp","Jyy4pa","dismissBrand","d","p","useTeachingPopoverTitleStyles_unstable","state","styles","appearance","className","undefined"],"sources":["useTeachingPopoverTitleStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';\nimport { tokens, typographyStyles } from '@fluentui/react-theme';\nexport const teachingPopoverTitleClassNames = {\n    root: 'fui-TeachingPopoverTitle',\n    dismissButton: 'fui-TeachingPopoverTitle__dismissButton'\n};\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row',\n        justifyContent: 'space-between',\n        fontSize: tokens.fontSizeBase400,\n        fontWeight: tokens.fontWeightSemibold,\n        color: tokens.colorNeutralForeground1,\n        lineHeight: tokens.lineHeightBase400,\n        paddingBottom: tokens.spacingVerticalS,\n        marginTop: tokens.spacingHorizontalNone,\n        marginBottom: tokens.spacingHorizontalNone\n    },\n    rootBrand: {\n        color: tokens.colorNeutralForegroundOnBrand\n    },\n    dismissButton: {\n        position: 'relative',\n        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,\n        display: 'flex',\n        alignItems: 'center',\n        cursor: 'pointer',\n        ...typographyStyles.body1,\n        backgroundColor: tokens.colorTransparentBackground,\n        boxSizing: 'border-box',\n        borderTopRightRadius: tokens.borderRadiusNone,\n        borderBottomRightRadius: tokens.borderRadiusNone,\n        borderRightStyle: 'none',\n        ...createCustomFocusIndicatorStyle({\n            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,\n            borderRadius: tokens.borderRadiusMedium,\n            ...shorthands.borderColor('transparent')\n        }),\n        marginInlineStart: 'auto'\n    },\n    dismissBrand: {\n        color: tokens.colorNeutralForegroundOnBrand\n    }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverTitleStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { appearance } = state;\n    state.root.className = mergeClasses(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);\n    if (state.dismissButton) {\n        state.dismissButton.className = mergeClasses(teachingPopoverTitleClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,+BAA+B,QAAQ,yBAAyB;AACzE,SAASC,MAAM,EAAEC,gBAAgB,QAAQ,uBAAuB;AAChE,OAAO,MAAMC,8BAA8B,GAAG;EAC1CC,IAAI,EAAE,0BAA0B;EAChCC,aAAa,EAAE;AACnB,CAAC;AACD,MAAMC,SAAS,gBAAGT,QAAA;EAAAO,IAAA;IAAAG,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,SAAA;IAAAL,MAAA;EAAA;EAAAP,aAAA;IAAAa,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAA5B,MAAA;IAAA6B,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAA5B,OAAA;IAAAC,OAAA;IAAAE,OAAA;IAAA0B,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,YAAA;IAAA7C,MAAA;EAAA;AAAA;EAAA8C,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAsCjB,CAAC;AACF;AAAyC,OAAO,MAAMC,sCAAsC,GAAIC,KAAK,IAAG;EACpG,aAAa;;EACb,MAAMC,MAAM,GAAGxD,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEyD;EAAW,CAAC,GAAGF,KAAK;EAC5BA,KAAK,CAACzD,IAAI,CAAC4D,SAAS,GAAGlE,YAAY,CAACK,8BAA8B,CAACC,IAAI,EAAE0D,MAAM,CAAC1D,IAAI,EAAE2D,UAAU,KAAK,OAAO,IAAID,MAAM,CAAC7C,SAAS,EAAE4C,KAAK,CAACzD,IAAI,CAAC4D,SAAS,CAAC;EACvJ,IAAIH,KAAK,CAACxD,aAAa,EAAE;IACrBwD,KAAK,CAACxD,aAAa,CAAC2D,SAAS,GAAGlE,YAAY,CAACK,8BAA8B,CAACE,aAAa,EAAEyD,MAAM,CAACzD,aAAa,EAAE0D,UAAU,KAAK,OAAO,GAAGD,MAAM,CAACL,YAAY,GAAGQ,SAAS,EAAEJ,KAAK,CAACxD,aAAa,CAAC2D,SAAS,CAAC;EAC7M;EACA,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverTitle/useTeachingPopoverTitleStyles.styles.raw.js

@@ -0,0 +1,57 @@
+'use client';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster';
+import { tokens, typographyStyles } from '@fluentui/react-theme';
+export const teachingPopoverTitleClassNames = {
+    root: 'fui-TeachingPopoverTitle',
+    dismissButton: 'fui-TeachingPopoverTitle__dismissButton'
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        fontSize: tokens.fontSizeBase400,
+        fontWeight: tokens.fontWeightSemibold,
+        color: tokens.colorNeutralForeground1,
+        lineHeight: tokens.lineHeightBase400,
+        paddingBottom: tokens.spacingVerticalS,
+        marginTop: tokens.spacingHorizontalNone,
+        marginBottom: tokens.spacingHorizontalNone
+    },
+    rootBrand: {
+        color: tokens.colorNeutralForegroundOnBrand
+    },
+    dismissButton: {
+        position: 'relative',
+        border: `${tokens.strokeWidthThin} solid ${tokens.colorTransparentStroke}`,
+        display: 'flex',
+        alignItems: 'center',
+        cursor: 'pointer',
+        ...typographyStyles.body1,
+        backgroundColor: tokens.colorTransparentBackground,
+        boxSizing: 'border-box',
+        borderTopRightRadius: tokens.borderRadiusNone,
+        borderBottomRightRadius: tokens.borderRadiusNone,
+        borderRightStyle: 'none',
+        ...createCustomFocusIndicatorStyle({
+            outline: `${tokens.strokeWidthThick} solid ${tokens.colorStrokeFocus2}`,
+            borderRadius: tokens.borderRadiusMedium,
+            ...shorthands.borderColor('transparent')
+        }),
+        marginInlineStart: 'auto'
+    },
+    dismissBrand: {
+        color: tokens.colorNeutralForegroundOnBrand
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverTitleStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { appearance } = state;
+    state.root.className = mergeClasses(teachingPopoverTitleClassNames.root, styles.root, appearance === 'brand' && styles.rootBrand, state.root.className);
+    if (state.dismissButton) {
+        state.dismissButton.className = mergeClasses(teachingPopoverTitleClassNames.dismissButton, styles.dismissButton, appearance === 'brand' ? styles.dismissBrand : undefined, state.dismissButton.className);
+    }
+    return state;
+};