feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';
+import { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';
+import { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`
+ * hooks.
+ *
+ * TeachingPopoverCarouselCard is the definition of a single page view within the carousel, they are shown one at a time and can be navigated through sequentially.
+ */ export const TeachingPopoverCarouselCard = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverCarouselCard_unstable(props, ref);
+    useTeachingPopoverCarouselCardStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverCarouselCardStyles_unstable')(state);
+    return renderTeachingPopoverCarouselCard_unstable(state);
+});
+TeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';\nimport { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';\nimport type { TeachingPopoverCarouselCardProps } from './TeachingPopoverCarouselCard.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselCard, using the `useTeachingPopoverCarouselCard_unstable` and `useTeachingPopoverCarouselCardStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselCard is the definition of a single page view within the carousel, they are shown one at a time and can be navigated through sequentially.\n */\nexport const TeachingPopoverCarouselCard: ForwardRefComponent<TeachingPopoverCarouselCardProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselCard_unstable(props, ref);\n\n    useTeachingPopoverCarouselCardStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselCardStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselCard_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselCard.displayName = 'TeachingPopoverCarouselCard';\n"],"names":["React","useTeachingPopoverCarouselCard_unstable","renderTeachingPopoverCarouselCard_unstable","useTeachingPopoverCarouselCardStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselCard","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,uCAAuC,QAAQ,mCAAmC;AAC3F,SAASC,0CAA0C,QAAQ,sCAAsC;AAGjG,SAASC,6CAA6C,QAAQ,gDAAgD;AAC9G,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,4CAAqFL,MAAMM,UAAU,CAChH,CAACC,OAAOC;IACN,MAAMC,QAAQR,wCAAwCM,OAAOC;IAE7DL,8CAA8CM;IAE9CL,4BAA4B,iDAAiDK;IAE7E,OAAOP,2CAA2CO;AACpD,GACA;AAEFJ,4BAA4BK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/TeachingPopoverCarouselCard.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselItemProps } from '../TeachingPopoverCarousel/Carousel/CarouselItem/CarouselItem.types';\n\nexport type TeachingPopoverCarouselCardSlots = {\n  /**\n   * The element wrapping the buttons.\n   */\n  root: NonNullable<Slot<CarouselItemProps>>;\n};\n\nexport type TeachingPopoverCarouselCardProps = ComponentProps<TeachingPopoverCarouselCardSlots> & {\n  /* Required: Passed into CarouselItem to identify pages. */\n  value: string;\n};\n\nexport type TeachingPopoverCarouselCardState = ComponentState<TeachingPopoverCarouselCardSlots> &\n  Required<Pick<TeachingPopoverCarouselCardProps, 'value'>>;\n"],"names":[],"mappings":"AAeA,WAC4D"}

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

@@ -0,0 +1,4 @@
+export { TeachingPopoverCarouselCard } from './TeachingPopoverCarouselCard';
+export { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';
+export { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';
+export { teachingPopoverCarouselCardClassNames, useTeachingPopoverCarouselCardStyles_unstable } from './useTeachingPopoverCarouselCardStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselCard } from './TeachingPopoverCarouselCard';\nexport type {\n  TeachingPopoverCarouselCardProps,\n  TeachingPopoverCarouselCardSlots,\n  TeachingPopoverCarouselCardState,\n} from './TeachingPopoverCarouselCard.types';\nexport { renderTeachingPopoverCarouselCard_unstable } from './renderTeachingPopoverCarouselCard';\nexport { useTeachingPopoverCarouselCard_unstable } from './useTeachingPopoverCarouselCard';\nexport {\n  teachingPopoverCarouselCardClassNames,\n  useTeachingPopoverCarouselCardStyles_unstable,\n} from './useTeachingPopoverCarouselCardStyles.styles';\n"],"names":["TeachingPopoverCarouselCard","renderTeachingPopoverCarouselCard_unstable","useTeachingPopoverCarouselCard_unstable","teachingPopoverCarouselCardClassNames","useTeachingPopoverCarouselCardStyles_unstable"],"mappings":"AAAA,SAASA,2BAA2B,QAAQ,gCAAgC;AAM5E,SAASC,0CAA0C,QAAQ,sCAAsC;AACjG,SAASC,uCAAuC,QAAQ,mCAAmC;AAC3F,SACEC,qCAAqC,EACrCC,6CAA6C,QACxC,gDAAgD"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/renderTeachingPopoverCarouselCard.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverCarouselCardState } from './TeachingPopoverCarouselCard.types';\nimport { TeachingPopoverCarouselCardSlots } from './TeachingPopoverCarouselCard.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselCard\n */\nexport const renderTeachingPopoverCarouselCard_unstable = (state: TeachingPopoverCarouselCardState): JSXElement => {\n  assertSlots<TeachingPopoverCarouselCardSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTeachingPopoverCarouselCard_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,6CAA6C,CAACC;IACzDF,YAA8CE;IAE9C,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -0,0 +1,25 @@
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { CarouselItem } from '../TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem';
+/**
+ * Returns the props and state required to render the component
+ * @param props - TeachingPopoverCarouselCard properties
+ * @param ref - reference to root HTMLElement of TeachingPopoverCarouselCard
+ */ export const useTeachingPopoverCarouselCard_unstable = (props, ref)=>{
+    const { value } = props;
+    return {
+        value,
+        components: {
+            root: CarouselItem
+        },
+        root: slot.always({
+            ...getIntrinsicElementProps('div', {
+                ref,
+                ...props
+            }),
+            value
+        }, {
+            elementType: CarouselItem
+        })
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCard.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type {\n  TeachingPopoverCarouselCardProps,\n  TeachingPopoverCarouselCardState,\n} from './TeachingPopoverCarouselCard.types';\nimport { CarouselItem } from '../TeachingPopoverCarousel/Carousel/CarouselItem/Carouseltem';\n\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverCarouselCard properties\n * @param ref - reference to root HTMLElement of TeachingPopoverCarouselCard\n */\nexport const useTeachingPopoverCarouselCard_unstable = (\n  props: TeachingPopoverCarouselCardProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselCardState => {\n  const { value } = props;\n\n  return {\n    value,\n    components: {\n      root: CarouselItem,\n    },\n    root: slot.always(\n      {\n        ...getIntrinsicElementProps('div', {\n          ref,\n          ...props,\n        }),\n        value,\n      },\n      { elementType: CarouselItem },\n    ),\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","CarouselItem","useTeachingPopoverCarouselCard_unstable","props","ref","value","components","root","always","elementType"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAM/B,SAASC,YAAY,QAAQ,+DAA+D;AAE5F;;;;CAIC,GACD,OAAO,MAAMC,0CAA0C,CACrDC,OACAC;IAEA,MAAM,EAAEC,KAAK,EAAE,GAAGF;IAElB,OAAO;QACLE;QACAC,YAAY;YACVC,MAAMN;QACR;QACAM,MAAMR,KAAKS,MAAM,CACf;YACE,GAAGV,yBAAyB,OAAO;gBACjCM;gBACA,GAAGD,KAAK;YACV,EAAE;YACFE;QACF,GACA;YAAEI,aAAaR;QAAa;IAEhC;AACF,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.js

@@ -0,0 +1,17 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselCardClassNames = {
+  root: 'fui-TeachingPopoverCarouselCard'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {}
+}, {});
+/** Applies style classnames to slots */
+export const useTeachingPopoverCarouselCardStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","teachingPopoverCarouselCardClassNames","root","useStyles","useTeachingPopoverCarouselCardStyles_unstable","state","styles","className"],"sources":["useTeachingPopoverCarouselCardStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverCarouselCardClassNames = {\n    root: 'fui-TeachingPopoverCarouselCard'\n};\nconst useStyles = makeStyles({\n    root: {}\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselCardStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,qCAAqC,GAAG;EACjDC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;AAAA,KAEjB,CAAC;AACF;AAAyC,OAAO,MAAME,6CAA6C,GAAIC,KAAK,IAAG;EAC3G,aAAa;;EACb,MAAMC,MAAM,GAAGH,SAAS,CAAC,CAAC;EAC1BE,KAAK,CAACH,IAAI,CAACK,SAAS,GAAGP,YAAY,CAACC,qCAAqC,CAACC,IAAI,EAAEI,MAAM,CAACJ,IAAI,EAAEG,KAAK,CAACH,IAAI,CAACK,SAAS,CAAC;EAClH,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.raw.js

@@ -0,0 +1,14 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselCardClassNames = {
+    root: 'fui-TeachingPopoverCarouselCard'
+};
+const useStyles = makeStyles({
+    root: {}
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverCarouselCardStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselCard/useTeachingPopoverCarouselCardStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type {\n  TeachingPopoverCarouselCardSlots,\n  TeachingPopoverCarouselCardState,\n} from './TeachingPopoverCarouselCard.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverCarouselCardClassNames: SlotClassNames<TeachingPopoverCarouselCardSlots> = {\n  root: 'fui-TeachingPopoverCarouselCard',\n};\n\nconst useStyles = makeStyles({\n  root: {},\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselCardStyles_unstable = (\n  state: TeachingPopoverCarouselCardState,\n): TeachingPopoverCarouselCardState => {\n  'use no memo';\n\n  const styles = useStyles();\n\n  state.root.className = mergeClasses(teachingPopoverCarouselCardClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselCardClassNames","root","useStyles","useTeachingPopoverCarouselCardStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAO1D,OAAO,MAAMC,wCAA0F;IACrGC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM,CAAC;AACT;AAEA,sCAAsC,GACtC,OAAO,MAAME,gDAAgD,CAC3DC;IAEA;IAEA,MAAMC,SAASH;IAEfE,MAAMH,IAAI,CAACK,SAAS,GAAGP,aAAaC,sCAAsCC,IAAI,EAAEI,OAAOJ,IAAI,EAAEG,MAAMH,IAAI,CAACK,SAAS;IAEjH,OAAOF;AACT,EAAE"}