feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';
+import { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';
+import { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`
+ * hooks.
+ *
+ * TeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.
+ */ export const TeachingPopoverCarouselFooter = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverCarouselFooter_unstable(props, ref);
+    useTeachingPopoverCarouselFooterStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterStyles_unstable')(state);
+    return renderTeachingPopoverCarouselFooter_unstable(state);
+});
+TeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';\nimport { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';\nimport { useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';\nimport type { TeachingPopoverCarouselFooterProps } from './TeachingPopoverCarouselFooter.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * Define a styled TeachingPopoverCarouselFooter, using the `useTeachingPopoverCarouselFooter_unstable` and `useTeachingPopoverCarouselFooterStyles_unstable`\n * hooks.\n *\n * TeachingPopoverCarouselFooter contains previous/next buttons configured for carousel navigation, and a root slot for page count and/or page index navigation.\n */\nexport const TeachingPopoverCarouselFooter: ForwardRefComponent<TeachingPopoverCarouselFooterProps> = React.forwardRef(\n  (props, ref) => {\n    const state = useTeachingPopoverCarouselFooter_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselFooter_unstable(state);\n  },\n);\n\nTeachingPopoverCarouselFooter.displayName = 'TeachingPopoverCarouselFooter';\n"],"names":["React","useTeachingPopoverCarouselFooter_unstable","renderTeachingPopoverCarouselFooter_unstable","useTeachingPopoverCarouselFooterStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselFooter","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,+CAA+C,QAAQ,kDAAkD;AAGlH,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,8CAAyFL,MAAMM,UAAU,CACpH,CAACC,OAAOC;IACN,MAAMC,QAAQR,0CAA0CM,OAAOC;IAE/DL,gDAAgDM;IAEhDL,4BAA4B,mDAAmDK;IAE/E,OAAOP,6CAA6CO;AACtD,GACA;AAEFJ,8BAA8BK,WAAW,GAAG"}

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

@@ -0,0 +1 @@
+import * as React from 'react';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/TeachingPopoverCarouselFooter.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverCarouselFooterButtonProps } from '../TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types';\n\nexport type TeachingPopoverCarouselFooterSlots = {\n  /**\n   * The element wrapping carousel pages and navigation.\n   */\n  root: NonNullable<Slot<'div'>>;\n\n  /**\n   * The previous button slot.\n   */\n  previous?: Slot<TeachingPopoverCarouselFooterButtonProps>;\n\n  /**\n   * The next button slot.\n   */\n  next: NonNullable<Slot<TeachingPopoverCarouselFooterButtonProps>>;\n};\n\nexport type TeachingPopoverCarouselFooterLayout = 'offset' | 'centered';\n\n// For localization or customization, users may want to modify this for their own purposes\nexport type TeachingPopoverPageCountChildRenderFunction = (currentPage: number, totalPages: number) => React.ReactNode;\n\n/**\n * TeachingPopoverCarouselFooter Props\n */\nexport type TeachingPopoverCarouselFooterProps = ComponentProps<TeachingPopoverCarouselFooterSlots> & {\n  /**\n   * Controls whether buttons will be centered (balanced) or right aligned\n   * Defaults to 'centered'.\n   */\n  layout?: TeachingPopoverCarouselFooterLayout;\n\n  /**\n   * The text to be displayed on the initial step of carousel\n   */\n  initialStepText: string;\n\n  /**\n   * The text to be displayed on the final step of carousel\n   */\n  finalStepText: string;\n};\n\n/**\n * TeachingPopoverCarouselFooter State and Context Hooks\n */\nexport type TeachingPopoverCarouselFooterState = ComponentState<Required<TeachingPopoverCarouselFooterSlots>> &\n  Pick<TeachingPopoverCarouselFooterProps, 'layout'>;\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,4 @@
+export { TeachingPopoverCarouselFooter } from './TeachingPopoverCarouselFooter';
+export { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';
+export { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';
+export { teachingPopoverCarouselFooterClassNames, useTeachingPopoverCarouselFooterStyles_unstable } from './useTeachingPopoverCarouselFooterStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselFooter } from './TeachingPopoverCarouselFooter';\nexport type {\n  TeachingPopoverCarouselFooterLayout,\n  TeachingPopoverCarouselFooterProps,\n  TeachingPopoverCarouselFooterSlots,\n  TeachingPopoverCarouselFooterState,\n  TeachingPopoverPageCountChildRenderFunction,\n} from './TeachingPopoverCarouselFooter.types';\nexport { renderTeachingPopoverCarouselFooter_unstable } from './renderTeachingPopoverCarouselFooter';\nexport { useTeachingPopoverCarouselFooter_unstable } from './useTeachingPopoverCarouselFooter';\nexport {\n  teachingPopoverCarouselFooterClassNames,\n  useTeachingPopoverCarouselFooterStyles_unstable,\n} from './useTeachingPopoverCarouselFooterStyles.styles';\n"],"names":["TeachingPopoverCarouselFooter","renderTeachingPopoverCarouselFooter_unstable","useTeachingPopoverCarouselFooter_unstable","teachingPopoverCarouselFooterClassNames","useTeachingPopoverCarouselFooterStyles_unstable"],"mappings":"AAAA,SAASA,6BAA6B,QAAQ,kCAAkC;AAQhF,SAASC,4CAA4C,QAAQ,wCAAwC;AACrG,SAASC,yCAAyC,QAAQ,qCAAqC;AAC/F,SACEC,uCAAuC,EACvCC,+CAA+C,QAC1C,kDAAkD"}

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

@@ -0,0 +1,16 @@
+  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 TeachingPopoverCarouselFooter
+ */ export const renderTeachingPopoverCarouselFooter_unstable = (state)=>{
+    assertSlots(state);
+    const { layout } = state;
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            layout === 'centered' && state.previous && /*#__PURE__*/ _jsx(state.previous, {}),
+            state.root.children,
+            layout === 'offset' && state.previous && /*#__PURE__*/ _jsx(state.previous, {}),
+            /*#__PURE__*/ _jsx(state.next, {})
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/renderTeachingPopoverCarouselFooter.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverCarouselFooterState } from './TeachingPopoverCarouselFooter.types';\nimport { TeachingPopoverCarouselFooterSlots } from './TeachingPopoverCarouselFooter.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselFooter\n */\nexport const renderTeachingPopoverCarouselFooter_unstable = (state: TeachingPopoverCarouselFooterState): JSXElement => {\n  assertSlots<TeachingPopoverCarouselFooterSlots>(state);\n\n  const { layout } = state;\n\n  return (\n    <state.root>\n      {layout === 'centered' && state.previous && <state.previous />}\n      {state.root.children}\n      {layout === 'offset' && state.previous && <state.previous />}\n      <state.next />\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTeachingPopoverCarouselFooter_unstable","state","layout","root","previous","children","next"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,+CAA+C,CAACC;IAC3DF,YAAgDE;IAEhD,MAAM,EAAEC,MAAM,EAAE,GAAGD;IAEnB,qBACE,MAACA,MAAME,IAAI;;YACRD,WAAW,cAAcD,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;YAC1DH,MAAME,IAAI,CAACE,QAAQ;YACnBH,WAAW,YAAYD,MAAMG,QAAQ,kBAAI,KAACH,MAAMG,QAAQ;0BACzD,KAACH,MAAMK,IAAI;;;AAGjB,EAAE"}

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

@@ -0,0 +1,37 @@
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { TeachingPopoverCarouselFooterButton } from '../TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton';
+export const useTeachingPopoverCarouselFooter_unstable = (props, ref)=>{
+    const { layout = 'centered', initialStepText, finalStepText } = props;
+    const previous = slot.optional(props.previous, {
+        defaultProps: {
+            navType: 'prev',
+            altText: initialStepText
+        },
+        renderByDefault: true,
+        elementType: TeachingPopoverCarouselFooterButton
+    });
+    const next = slot.always(props.next, {
+        defaultProps: {
+            navType: 'next',
+            altText: finalStepText
+        },
+        elementType: TeachingPopoverCarouselFooterButton
+    });
+    return {
+        layout,
+        components: {
+            root: 'div',
+            next: TeachingPopoverCarouselFooterButton,
+            previous: TeachingPopoverCarouselFooterButton
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        previous,
+        next
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooter.ts"],"sourcesContent":["import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport * as React from 'react';\n\nimport type {\n  TeachingPopoverCarouselFooterProps,\n  TeachingPopoverCarouselFooterState,\n} from './TeachingPopoverCarouselFooter.types';\nimport { TeachingPopoverCarouselFooterButton } from '../TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton';\n\nexport const useTeachingPopoverCarouselFooter_unstable = (\n  props: TeachingPopoverCarouselFooterProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverCarouselFooterState => {\n  const { layout = 'centered', initialStepText, finalStepText } = props;\n\n  const previous = slot.optional(props.previous, {\n    defaultProps: {\n      navType: 'prev',\n      altText: initialStepText,\n    },\n    renderByDefault: true,\n    elementType: TeachingPopoverCarouselFooterButton,\n  });\n\n  const next = slot.always(props.next, {\n    defaultProps: {\n      navType: 'next',\n      altText: finalStepText,\n    },\n    elementType: TeachingPopoverCarouselFooterButton,\n  });\n\n  return {\n    layout,\n    components: {\n      root: 'div',\n      next: TeachingPopoverCarouselFooterButton,\n      previous: TeachingPopoverCarouselFooterButton,\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    previous,\n    next,\n  };\n};\n"],"names":["getIntrinsicElementProps","slot","React","TeachingPopoverCarouselFooterButton","useTeachingPopoverCarouselFooter_unstable","props","ref","layout","initialStepText","finalStepText","previous","optional","defaultProps","navType","altText","renderByDefault","elementType","next","always","components","root"],"mappings":"AAAA,SAASA,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAC3E,YAAYC,WAAW,QAAQ;AAM/B,SAASC,mCAAmC,QAAQ,6EAA6E;AAEjI,OAAO,MAAMC,4CAA4C,CACvDC,OACAC;IAEA,MAAM,EAAEC,SAAS,UAAU,EAAEC,eAAe,EAAEC,aAAa,EAAE,GAAGJ;IAEhE,MAAMK,WAAWT,KAAKU,QAAQ,CAACN,MAAMK,QAAQ,EAAE;QAC7CE,cAAc;YACZC,SAAS;YACTC,SAASN;QACX;QACAO,iBAAiB;QACjBC,aAAab;IACf;IAEA,MAAMc,OAAOhB,KAAKiB,MAAM,CAACb,MAAMY,IAAI,EAAE;QACnCL,cAAc;YACZC,SAAS;YACTC,SAASL;QACX;QACAO,aAAab;IACf;IAEA,OAAO;QACLI;QACAY,YAAY;YACVC,MAAM;YACNH,MAAMd;YACNO,UAAUP;QACZ;QACAiB,MAAMnB,KAAKiB,MAAM,CACflB,yBAAyB,OAAO;YAC9BM;YACA,GAAGD,KAAK;QACV,IACA;YAAEW,aAAa;QAAM;QAEvBN;QACAO;IACF;AACF,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.js

@@ -0,0 +1,48 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselFooterClassNames = {
+  root: 'fui-TeachingPopoverCarouselFooter',
+  previous: 'fui-TeachingPopoverCarouselFooter__previous',
+  next: 'fui-TeachingPopoverCarouselFooter__next'
+};
+// Todo: Page change animation & styles
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1063pyq"
+  },
+  rootCentered: {
+    Brf1p80: "f1869bpl",
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f19gb1f4"
+  },
+  rootRightAligned: {
+    i8kkvl: 0,
+    Belr9w4: 0,
+    rmohyg: "f19gb1f4",
+    Bp34fd5: "f1y65ohq"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1063pyq{flex-direction:row;}", ".f1869bpl{justify-content:space-between;}", [".f19gb1f4{gap:8px;}", {
+    p: -1
+  }], [".f19gb1f4{gap:8px;}", {
+    p: -1
+  }], ".f1y65ohq :first-child{-webkit-margin-end:auto;margin-inline-end:auto;}"]
+});
+/** Applies style classnames to slots */
+export const useTeachingPopoverCarouselFooterStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    layout
+  } = state;
+  state.root.className = mergeClasses(teachingPopoverCarouselFooterClassNames.root, styles.root, layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, state.root.className);
+  if (state.previous) {
+    state.previous.className = mergeClasses(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);
+  }
+  state.next.className = mergeClasses(teachingPopoverCarouselFooterClassNames.next, state.next.className);
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","teachingPopoverCarouselFooterClassNames","root","previous","next","useStyles","mc9l5x","Beiy3e4","rootCentered","Brf1p80","i8kkvl","Belr9w4","rmohyg","rootRightAligned","Bp34fd5","d","p","useTeachingPopoverCarouselFooterStyles_unstable","state","styles","layout","className"],"sources":["useTeachingPopoverCarouselFooterStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverCarouselFooterClassNames = {\n    root: 'fui-TeachingPopoverCarouselFooter',\n    previous: 'fui-TeachingPopoverCarouselFooter__previous',\n    next: 'fui-TeachingPopoverCarouselFooter__next'\n};\n// Todo: Page change animation & styles\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'row'\n    },\n    rootCentered: {\n        justifyContent: 'space-between',\n        gap: '8px'\n    },\n    rootRightAligned: {\n        gap: '8px',\n        '& :first-child': {\n            marginInlineEnd: 'auto'\n        }\n    }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverCarouselFooterStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { layout } = state;\n    state.root.className = mergeClasses(teachingPopoverCarouselFooterClassNames.root, styles.root, layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, state.root.className);\n    if (state.previous) {\n        state.previous.className = mergeClasses(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);\n    }\n    state.next.className = mergeClasses(teachingPopoverCarouselFooterClassNames.next, state.next.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,uCAAuC,GAAG;EACnDC,IAAI,EAAE,mCAAmC;EACzCC,QAAQ,EAAE,6CAA6C;EACvDC,IAAI,EAAE;AACV,CAAC;AACD;AACA,MAAMC,SAAS,gBAAGN,QAAA;EAAAG,IAAA;IAAAI,MAAA;IAAAC,OAAA;EAAA;EAAAC,YAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,gBAAA;IAAAH,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAE,OAAA;EAAA;AAAA;EAAAC,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;AAAA,CAejB,CAAC;AACF;AAAyC,OAAO,MAAMC,+CAA+C,GAAIC,KAAK,IAAG;EAC7G,aAAa;;EACb,MAAMC,MAAM,GAAGd,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAEe;EAAO,CAAC,GAAGF,KAAK;EACxBA,KAAK,CAAChB,IAAI,CAACmB,SAAS,GAAGrB,YAAY,CAACC,uCAAuC,CAACC,IAAI,EAAEiB,MAAM,CAACjB,IAAI,EAAEkB,MAAM,KAAK,UAAU,GAAGD,MAAM,CAACX,YAAY,GAAGW,MAAM,CAACN,gBAAgB,EAAEK,KAAK,CAAChB,IAAI,CAACmB,SAAS,CAAC;EAC3L,IAAIH,KAAK,CAACf,QAAQ,EAAE;IAChBe,KAAK,CAACf,QAAQ,CAACkB,SAAS,GAAGrB,YAAY,CAACC,uCAAuC,CAACE,QAAQ,EAAEe,KAAK,CAACf,QAAQ,CAACkB,SAAS,CAAC;EACvH;EACAH,KAAK,CAACd,IAAI,CAACiB,SAAS,GAAGrB,YAAY,CAACC,uCAAuC,CAACG,IAAI,EAAEc,KAAK,CAACd,IAAI,CAACiB,SAAS,CAAC;EACvG,OAAOH,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.raw.js

@@ -0,0 +1,35 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverCarouselFooterClassNames = {
+    root: 'fui-TeachingPopoverCarouselFooter',
+    previous: 'fui-TeachingPopoverCarouselFooter__previous',
+    next: 'fui-TeachingPopoverCarouselFooter__next'
+};
+// Todo: Page change animation & styles
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
+    rootCentered: {
+        justifyContent: 'space-between',
+        gap: '8px'
+    },
+    rootRightAligned: {
+        gap: '8px',
+        '& :first-child': {
+            marginInlineEnd: 'auto'
+        }
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverCarouselFooterStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { layout } = state;
+    state.root.className = mergeClasses(teachingPopoverCarouselFooterClassNames.root, styles.root, layout === 'centered' ? styles.rootCentered : styles.rootRightAligned, state.root.className);
+    if (state.previous) {
+        state.previous.className = mergeClasses(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);
+    }
+    state.next.className = mergeClasses(teachingPopoverCarouselFooterClassNames.next, state.next.className);
+    return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooter/useTeachingPopoverCarouselFooterStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type {\n  TeachingPopoverCarouselFooterSlots,\n  TeachingPopoverCarouselFooterState,\n} from './TeachingPopoverCarouselFooter.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverCarouselFooterClassNames: SlotClassNames<TeachingPopoverCarouselFooterSlots> = {\n  root: 'fui-TeachingPopoverCarouselFooter',\n  previous: 'fui-TeachingPopoverCarouselFooter__previous',\n  next: 'fui-TeachingPopoverCarouselFooter__next',\n};\n\n// Todo: Page change animation & styles\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'row',\n  },\n  rootCentered: {\n    justifyContent: 'space-between',\n    gap: '8px',\n  },\n  rootRightAligned: {\n    gap: '8px',\n    '& :first-child': {\n      marginInlineEnd: 'auto',\n    },\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverCarouselFooterStyles_unstable = (\n  state: TeachingPopoverCarouselFooterState,\n): TeachingPopoverCarouselFooterState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { layout } = state;\n\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselFooterClassNames.root,\n    styles.root,\n    layout === 'centered' ? styles.rootCentered : styles.rootRightAligned,\n    state.root.className,\n  );\n\n  if (state.previous) {\n    state.previous.className = mergeClasses(teachingPopoverCarouselFooterClassNames.previous, state.previous.className);\n  }\n\n  state.next.className = mergeClasses(teachingPopoverCarouselFooterClassNames.next, state.next.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverCarouselFooterClassNames","root","previous","next","useStyles","display","flexDirection","rootCentered","justifyContent","gap","rootRightAligned","marginInlineEnd","useTeachingPopoverCarouselFooterStyles_unstable","state","styles","layout","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAO1D,OAAO,MAAMC,0CAA8F;IACzGC,MAAM;IACNC,UAAU;IACVC,MAAM;AACR,EAAE;AAEF,uCAAuC;AACvC,MAAMC,YAAYN,WAAW;IAC3BG,MAAM;QACJI,SAAS;QACTC,eAAe;IACjB;IACAC,cAAc;QACZC,gBAAgB;QAChBC,KAAK;IACP;IACAC,kBAAkB;QAChBD,KAAK;QACL,kBAAkB;YAChBE,iBAAiB;QACnB;IACF;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,kDAAkD,CAC7DC;IAEA;IAEA,MAAMC,SAASV;IACf,MAAM,EAAEW,MAAM,EAAE,GAAGF;IAEnBA,MAAMZ,IAAI,CAACe,SAAS,GAAGjB,aACrBC,wCAAwCC,IAAI,EAC5Ca,OAAOb,IAAI,EACXc,WAAW,aAAaD,OAAOP,YAAY,GAAGO,OAAOJ,gBAAgB,EACrEG,MAAMZ,IAAI,CAACe,SAAS;IAGtB,IAAIH,MAAMX,QAAQ,EAAE;QAClBW,MAAMX,QAAQ,CAACc,SAAS,GAAGjB,aAAaC,wCAAwCE,QAAQ,EAAEW,MAAMX,QAAQ,CAACc,SAAS;IACpH;IAEAH,MAAMV,IAAI,CAACa,SAAS,GAAGjB,aAAaC,wCAAwCG,IAAI,EAAEU,MAAMV,IAAI,CAACa,SAAS;IAEtG,OAAOH;AACT,EAAE"}