feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';
+import { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';
+import { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * TeachingPopoverCarouselFooterButton component
+ *
+ * TeachingPopoverCarouselFooterButton extends Button and injects additional styling and onClick functionality
+ * to match the context provided by TeachingPopover & TeachingPopoverCarousel
+ */ export const TeachingPopoverCarouselFooterButton = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverCarouselFooterButton_unstable(props, ref);
+    useTeachingPopoverCarouselFooterButtonStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterButtonStyles_unstable')(state);
+    return renderTeachingPopoverCarouselFooterButton_unstable(state);
+});
+TeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';\nimport { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';\nimport { useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';\nimport type { TeachingPopoverCarouselFooterButtonProps } from './TeachingPopoverCarouselFooterButton.types';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * TeachingPopoverCarouselFooterButton component\n *\n * TeachingPopoverCarouselFooterButton extends Button and injects additional styling and onClick functionality\n * to match the context provided by TeachingPopover & TeachingPopoverCarousel\n */\nexport const TeachingPopoverCarouselFooterButton: ForwardRefComponent<TeachingPopoverCarouselFooterButtonProps> =\n  React.forwardRef((props, ref) => {\n    const state = useTeachingPopoverCarouselFooterButton_unstable(props, ref);\n\n    useTeachingPopoverCarouselFooterButtonStyles_unstable(state);\n\n    useCustomStyleHook_unstable('useTeachingPopoverCarouselFooterButtonStyles_unstable')(state);\n\n    return renderTeachingPopoverCarouselFooterButton_unstable(state);\n  });\n\nTeachingPopoverCarouselFooterButton.displayName = 'TeachingPopoverCarouselFooterButton';\n"],"names":["React","useTeachingPopoverCarouselFooterButton_unstable","renderTeachingPopoverCarouselFooterButton_unstable","useTeachingPopoverCarouselFooterButtonStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverCarouselFooterButton","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SAASC,kDAAkD,QAAQ,8CAA8C;AACjH,SAASC,qDAAqD,QAAQ,wDAAwD;AAE9H,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;;;;CAKC,GACD,OAAO,MAAMC,oDACXL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACvB,MAAMC,QAAQR,gDAAgDM,OAAOC;IAErEL,sDAAsDM;IAEtDL,4BAA4B,yDAAyDK;IAErF,OAAOP,mDAAmDO;AAC5D,GAAG;AAELJ,oCAAoCK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/TeachingPopoverCarouselFooterButton.types.ts"],"sourcesContent":["import * as React from 'react';\nimport type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { PopoverContextValue } from '@fluentui/react-popover';\nimport { ButtonProps, ButtonState } from '@fluentui/react-button';\nimport { ARIAButtonSlotProps } from '@fluentui/react-aria';\n\nexport type TeachingPopoverCarouselFooterButtonSlots = {\n  root: NonNullable<Slot<ARIAButtonSlotProps<'a'>>>;\n};\n\n/**\n * TeachingPopoverCarouselFooterButton Props\n */\nexport type TeachingPopoverCarouselFooterButtonProps = ComponentProps<TeachingPopoverCarouselFooterButtonSlots> &\n  ButtonProps & {\n    /**\n     * Defines whether the button should be next or previous type - used for both styling and functionality.\n     */\n    navType: 'next' | 'prev';\n\n    /**\n     * The ReactNode provided to the button when it is on it's first (navType 'prev') or last (navType 'next') step\n     */\n    altText: React.ReactNode;\n  };\n\n/**\n * State used in rendering TeachingPopoverCarouselFooterButton\n */\nexport type TeachingPopoverCarouselFooterButtonState = ButtonState &\n  ComponentState<TeachingPopoverCarouselFooterButtonSlots> &\n  Pick<TeachingPopoverCarouselFooterButtonProps, 'navType' | 'altText'> & {\n    /* Rename popover appearance to prevent conflict with button appearance */\n    popoverAppearance: PopoverContextValue['appearance'];\n  };\n"],"names":["React"],"mappings":"AAAA,YAAYA,WAAW,QAAQ"}

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

@@ -0,0 +1,4 @@
+export { TeachingPopoverCarouselFooterButton } from './TeachingPopoverCarouselFooterButton';
+export { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';
+export { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';
+export { teachingPopoverCarouselFooterButtonClassNames, useTeachingPopoverCarouselFooterButtonStyles_unstable } from './useTeachingPopoverCarouselFooterButtonStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/index.ts"],"sourcesContent":["export { TeachingPopoverCarouselFooterButton } from './TeachingPopoverCarouselFooterButton';\nexport type {\n  TeachingPopoverCarouselFooterButtonProps,\n  TeachingPopoverCarouselFooterButtonSlots,\n  TeachingPopoverCarouselFooterButtonState,\n} from './TeachingPopoverCarouselFooterButton.types';\nexport { renderTeachingPopoverCarouselFooterButton_unstable } from './renderTeachingPopoverCarouselFooterButton';\nexport { useTeachingPopoverCarouselFooterButton_unstable } from './useTeachingPopoverCarouselFooterButton';\nexport {\n  teachingPopoverCarouselFooterButtonClassNames,\n  useTeachingPopoverCarouselFooterButtonStyles_unstable,\n} from './useTeachingPopoverCarouselFooterButtonStyles.styles';\n"],"names":["TeachingPopoverCarouselFooterButton","renderTeachingPopoverCarouselFooterButton_unstable","useTeachingPopoverCarouselFooterButton_unstable","teachingPopoverCarouselFooterButtonClassNames","useTeachingPopoverCarouselFooterButtonStyles_unstable"],"mappings":"AAAA,SAASA,mCAAmC,QAAQ,wCAAwC;AAM5F,SAASC,kDAAkD,QAAQ,8CAA8C;AACjH,SAASC,+CAA+C,QAAQ,2CAA2C;AAC3G,SACEC,6CAA6C,EAC7CC,qDAAqD,QAChD,wDAAwD"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.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 TeachingPopoverCarouselFooterButton
+ */ export const renderTeachingPopoverCarouselFooterButton_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(state.root, {});
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/renderTeachingPopoverCarouselFooterButton.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 {\n  TeachingPopoverCarouselFooterButtonState,\n  TeachingPopoverCarouselFooterButtonSlots,\n} from './TeachingPopoverCarouselFooterButton.types';\n\n/**\n * Render the final JSX of TeachingPopoverCarouselFooterButton\n */\nexport const renderTeachingPopoverCarouselFooterButton_unstable = (\n  state: TeachingPopoverCarouselFooterButtonState,\n): JSXElement => {\n  assertSlots<TeachingPopoverCarouselFooterButtonSlots>(state);\n\n  return <state.root />;\n};\n"],"names":["assertSlots","renderTeachingPopoverCarouselFooterButton_unstable","state","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAOxD;;CAEC,GACD,OAAO,MAAMC,qDAAqD,CAChEC;IAEAF,YAAsDE;IAEtD,qBAAO,KAACA,MAAMC,IAAI;AACpB,EAAE"}

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

@@ -0,0 +1,72 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, mergeCallbacks, slot } from '@fluentui/react-utilities';
+import { usePopoverContext_unstable } from '@fluentui/react-popover';
+import { useCarouselContext_unstable } from '../TeachingPopoverCarousel/Carousel/CarouselContext';
+import { useEventCallback } from '@fluentui/react-utilities';
+import { useButton_unstable } from '@fluentui/react-button';
+import { useCarouselValues_unstable } from '../TeachingPopoverCarousel/Carousel/useCarouselValues';
+/**
+ * Create the state required to render TeachingPopoverCarouselFooterButton.
+ *
+ * The returned state can be modified with hooks such as useTeachingPopoverCarouselFooterButtonStyles_unstable,
+ * before being passed to renderTeachingPopoverCarouselFooterButton_unstable.
+ *
+ * @param props - props from this instance of TeachingPopoverCarouselFooterButton
+ * @param ref - reference to root HTMLDivElement of TeachingPopoverCarouselFooterButton
+ */ export const useTeachingPopoverCarouselFooterButton_unstable = (props, ref)=>{
+    const { navType, altText } = props;
+    const popoverAppearance = usePopoverContext_unstable((context)=>context.appearance);
+    const selectPageByDirection = useCarouselContext_unstable((c)=>c.selectPageByDirection);
+    const values = useCarouselValues_unstable((snapshot)=>snapshot);
+    const activeValue = useCarouselContext_unstable((c)=>c.value);
+    const handleClick = (event)=>{
+        if (event.isDefaultPrevented()) {
+            return;
+        }
+        selectPageByDirection(event, navType);
+    };
+    const handleButtonClick = useEventCallback(mergeCallbacks(handleClick, props.onClick));
+    const isTrailing = React.useMemo(()=>{
+        if (!activeValue) {
+            return false;
+        }
+        if (navType === 'prev') {
+            return values.indexOf(activeValue) === 0;
+        }
+        return values.indexOf(activeValue) === values.length - 1;
+    }, [
+        navType,
+        activeValue,
+        values
+    ]);
+    let buttonAppearanceType;
+    if (navType === 'next') {
+        buttonAppearanceType = popoverAppearance === 'brand' ? undefined : 'primary';
+    } else {
+        buttonAppearanceType = popoverAppearance === 'brand' ? 'outline' : undefined;
+    }
+    /* Handle altText on trailing step */ let buttonChild = props.children;
+    if (isTrailing) {
+        buttonChild = altText;
+    }
+    return {
+        ...useButton_unstable({
+            appearance: buttonAppearanceType,
+            ...props
+        }, ref),
+        navType,
+        popoverAppearance,
+        altText,
+        // Override useButton root slot
+        root: slot.always(getIntrinsicElementProps('button', {
+            ref,
+            appearance: buttonAppearanceType,
+            ...props,
+            onClick: handleButtonClick,
+            children: buttonChild
+        }), {
+            elementType: 'button'
+        })
+    };
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButtonStyles.styles.js

@@ -0,0 +1,67 @@
+'use client';
+
+import { __styles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useButtonStyles_unstable } from '@fluentui/react-button';
+export const teachingPopoverCarouselFooterButtonClassNames = {
+  root: 'fui-TeachingPopoverCarouselFooterButton'
+};
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    Bf4jedk: "f14es27b"
+  },
+  brandNext: {
+    sj55zd: "f16muhyy",
+    De3pzq: "f10s6wn9",
+    g2u3we: "f1iimpp0",
+    h3c5rm: ["f19uhqvu", "f1nx14hx"],
+    B9xav0g: "fnqa90p",
+    zhjwy3: ["f1nx14hx", "f19uhqvu"],
+    Bi91k9c: "f3ymbdj",
+    Jwef8y: "f1rgtb95",
+    B2d53fq: "f1pu27ff",
+    iro3zm: "f1d5c7in"
+  },
+  brandPrevious: {
+    sj55zd: "f1phragk",
+    De3pzq: "ffp7eso",
+    g2u3we: "fm1ebug",
+    h3c5rm: ["f28omuz", "f1uhflii"],
+    B9xav0g: "f1ixw5o4",
+    zhjwy3: ["f1uhflii", "f28omuz"],
+    Bi91k9c: "f1rq72xc",
+    Bgoe8wy: "f1bg5g8r",
+    Bwzppfd: ["f1h9bnsk", "f12x9t0k"],
+    oetu4i: "f19ervry",
+    gg5e9n: ["f12x9t0k", "f1h9bnsk"],
+    Jwef8y: "f15wkkf3",
+    B2d53fq: "f1d6v5y2",
+    b661bw: "f1565b9n",
+    Bk6r4ia: ["fm07gvo", "fwlsg72"],
+    B9zn80p: "fzw6fmy",
+    Bpld233: ["fwlsg72", "fm07gvo"],
+    iro3zm: "fnp9lpt"
+  }
+}, {
+  d: [".f14es27b{min-width:96px;}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".f10s6wn9{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1iimpp0{border-top-color:var(--colorTransparentBackground);}", ".f19uhqvu{border-right-color:var(--colorTransparentBackground);}", ".f1nx14hx{border-left-color:var(--colorTransparentBackground);}", ".fnqa90p{border-bottom-color:var(--colorTransparentBackground);}", ".f1phragk{color:var(--colorNeutralForegroundOnBrand);}", ".ffp7eso{background-color:var(--colorBrandBackground);}", ".fm1ebug{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f28omuz{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f1uhflii{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f1ixw5o4{border-bottom-color:var(--colorNeutralForegroundOnBrand);}"],
+  h: [".f3ymbdj:hover{color:var(--colorCompoundBrandForeground1Hover);}", ".f1rgtb95:hover{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1pu27ff:hover:active{color:var(--colorCompoundBrandForeground1Pressed);}", ".f1d5c7in:hover:active{background-color:var(--colorNeutralForegroundOnBrand);}", ".f1rq72xc:hover{color:var(--colorNeutralForegroundOnBrand);}", ".f1bg5g8r:hover{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".f1h9bnsk:hover{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".f12x9t0k:hover{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".f19ervry:hover{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".f15wkkf3:hover{background-color:var(--colorBrandBackgroundHover);}", ".f1d6v5y2:hover:active{color:var(--colorNeutralForegroundOnBrand);}", ".f1565b9n:hover:active{border-top-color:var(--colorNeutralForegroundOnBrand);}", ".fm07gvo:hover:active{border-right-color:var(--colorNeutralForegroundOnBrand);}", ".fwlsg72:hover:active{border-left-color:var(--colorNeutralForegroundOnBrand);}", ".fzw6fmy:hover:active{border-bottom-color:var(--colorNeutralForegroundOnBrand);}", ".fnp9lpt:hover:active{background-color:var(--colorBrandBackgroundPressed);}"]
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state
+ */
+export const useTeachingPopoverCarouselFooterButtonStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  const {
+    navType,
+    popoverAppearance
+  } = state;
+  // Apply underlying fluent Button styles
+  state = {
+    ...state,
+    ...useButtonStyles_unstable(state)
+  };
+  state.root.className = mergeClasses(teachingPopoverCarouselFooterButtonClassNames.root, styles.root, navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious, navType === 'next' && popoverAppearance === 'brand' && styles.brandNext, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButtonStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","shorthands","tokens","useButtonStyles_unstable","teachingPopoverCarouselFooterButtonClassNames","root","useStyles","Bf4jedk","brandNext","sj55zd","De3pzq","g2u3we","h3c5rm","B9xav0g","zhjwy3","Bi91k9c","Jwef8y","B2d53fq","iro3zm","brandPrevious","Bgoe8wy","Bwzppfd","oetu4i","gg5e9n","b661bw","Bk6r4ia","B9zn80p","Bpld233","d","h","useTeachingPopoverCarouselFooterButtonStyles_unstable","state","styles","navType","popoverAppearance","className"],"sources":["useTeachingPopoverCarouselFooterButtonStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\nexport const teachingPopoverCarouselFooterButtonClassNames = {\n    root: 'fui-TeachingPopoverCarouselFooterButton'\n};\nconst useStyles = makeStyles({\n    root: {\n        minWidth: '96px'\n    },\n    brandNext: {\n        color: tokens.colorBrandForeground1,\n        backgroundColor: tokens.colorNeutralForegroundOnBrand,\n        ...shorthands.borderColor(tokens.colorTransparentBackground),\n        ':hover': {\n            color: tokens.colorCompoundBrandForeground1Hover,\n            backgroundColor: tokens.colorNeutralForegroundOnBrand\n        },\n        ':hover:active': {\n            color: tokens.colorCompoundBrandForeground1Pressed,\n            backgroundColor: tokens.colorNeutralForegroundOnBrand\n        }\n    },\n    brandPrevious: {\n        // In brand, this is always 'NeutralForegroundOnBrand'\n        color: tokens.colorNeutralForegroundOnBrand,\n        backgroundColor: tokens.colorBrandBackground,\n        ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n        ':hover': {\n            color: tokens.colorNeutralForegroundOnBrand,\n            ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n            backgroundColor: tokens.colorBrandBackgroundHover\n        },\n        ':hover:active': {\n            color: tokens.colorNeutralForegroundOnBrand,\n            ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n            backgroundColor: tokens.colorBrandBackgroundPressed\n        }\n    }\n});\n/**\n * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state\n */ export const useTeachingPopoverCarouselFooterButtonStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    const { navType, popoverAppearance } = state;\n    // Apply underlying fluent Button styles\n    state = {\n        ...state,\n        ...useButtonStyles_unstable(state)\n    };\n    state.root.className = mergeClasses(teachingPopoverCarouselFooterButtonClassNames.root, styles.root, navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious, navType === 'next' && popoverAppearance === 'brand' && styles.brandNext, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,EAAEC,UAAU,QAAQ,gBAAgB;AACrE,SAASC,MAAM,QAAQ,uBAAuB;AAC9C,SAASC,wBAAwB,QAAQ,wBAAwB;AACjE,OAAO,MAAMC,6CAA6C,GAAG;EACzDC,IAAI,EAAE;AACV,CAAC;AACD,MAAMC,SAAS,gBAAGP,QAAA;EAAAM,IAAA;IAAAE,OAAA;EAAA;EAAAC,SAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,aAAA;IAAAV,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAK,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAP,MAAA;IAAAC,OAAA;IAAAO,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAT,MAAA;EAAA;AAAA;EAAAU,CAAA;EAAAC,CAAA;AAAA,CAiCjB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,qDAAqD,GAAIC,KAAK,IAAG;EAC9E,aAAa;;EACb,MAAMC,MAAM,GAAG1B,SAAS,CAAC,CAAC;EAC1B,MAAM;IAAE2B,OAAO;IAAEC;EAAkB,CAAC,GAAGH,KAAK;EAC5C;EACAA,KAAK,GAAG;IACJ,GAAGA,KAAK;IACR,GAAG5B,wBAAwB,CAAC4B,KAAK;EACrC,CAAC;EACDA,KAAK,CAAC1B,IAAI,CAAC8B,SAAS,GAAGnC,YAAY,CAACI,6CAA6C,CAACC,IAAI,EAAE2B,MAAM,CAAC3B,IAAI,EAAE4B,OAAO,KAAK,MAAM,IAAIC,iBAAiB,KAAK,OAAO,IAAIF,MAAM,CAACb,aAAa,EAAEc,OAAO,KAAK,MAAM,IAAIC,iBAAiB,KAAK,OAAO,IAAIF,MAAM,CAACxB,SAAS,EAAEuB,KAAK,CAAC1B,IAAI,CAAC8B,SAAS,CAAC;EAChR,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButtonStyles.styles.raw.js

@@ -0,0 +1,55 @@
+'use client';
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import { useButtonStyles_unstable } from '@fluentui/react-button';
+export const teachingPopoverCarouselFooterButtonClassNames = {
+    root: 'fui-TeachingPopoverCarouselFooterButton'
+};
+const useStyles = makeStyles({
+    root: {
+        minWidth: '96px'
+    },
+    brandNext: {
+        color: tokens.colorBrandForeground1,
+        backgroundColor: tokens.colorNeutralForegroundOnBrand,
+        ...shorthands.borderColor(tokens.colorTransparentBackground),
+        ':hover': {
+            color: tokens.colorCompoundBrandForeground1Hover,
+            backgroundColor: tokens.colorNeutralForegroundOnBrand
+        },
+        ':hover:active': {
+            color: tokens.colorCompoundBrandForeground1Pressed,
+            backgroundColor: tokens.colorNeutralForegroundOnBrand
+        }
+    },
+    brandPrevious: {
+        // In brand, this is always 'NeutralForegroundOnBrand'
+        color: tokens.colorNeutralForegroundOnBrand,
+        backgroundColor: tokens.colorBrandBackground,
+        ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
+        ':hover': {
+            color: tokens.colorNeutralForegroundOnBrand,
+            ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
+            backgroundColor: tokens.colorBrandBackgroundHover
+        },
+        ':hover:active': {
+            color: tokens.colorNeutralForegroundOnBrand,
+            ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),
+            backgroundColor: tokens.colorBrandBackgroundPressed
+        }
+    }
+});
+/**
+ * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state
+ */ export const useTeachingPopoverCarouselFooterButtonStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    const { navType, popoverAppearance } = state;
+    // Apply underlying fluent Button styles
+    state = {
+        ...state,
+        ...useButtonStyles_unstable(state)
+    };
+    state.root.className = mergeClasses(teachingPopoverCarouselFooterButtonClassNames.root, styles.root, navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious, navType === 'next' && popoverAppearance === 'brand' && styles.brandNext, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButtonStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverCarouselFooterButton/useTeachingPopoverCarouselFooterButtonStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses, shorthands } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type {\n  TeachingPopoverCarouselFooterButtonSlots,\n  TeachingPopoverCarouselFooterButtonState,\n} from './TeachingPopoverCarouselFooterButton.types';\nimport { tokens } from '@fluentui/react-theme';\nimport { useButtonStyles_unstable } from '@fluentui/react-button';\n\nexport const teachingPopoverCarouselFooterButtonClassNames: SlotClassNames<TeachingPopoverCarouselFooterButtonSlots> = {\n  root: 'fui-TeachingPopoverCarouselFooterButton',\n};\n\nconst useStyles = makeStyles({\n  root: {\n    minWidth: '96px',\n  },\n  brandNext: {\n    color: tokens.colorBrandForeground1,\n    backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    ...shorthands.borderColor(tokens.colorTransparentBackground),\n    ':hover': {\n      color: tokens.colorCompoundBrandForeground1Hover,\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    },\n    ':hover:active': {\n      color: tokens.colorCompoundBrandForeground1Pressed,\n      backgroundColor: tokens.colorNeutralForegroundOnBrand,\n    },\n  },\n  brandPrevious: {\n    // In brand, this is always 'NeutralForegroundOnBrand'\n    color: tokens.colorNeutralForegroundOnBrand,\n    backgroundColor: tokens.colorBrandBackground,\n    ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n    ':hover': {\n      color: tokens.colorNeutralForegroundOnBrand,\n      ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n      backgroundColor: tokens.colorBrandBackgroundHover,\n    },\n    ':hover:active': {\n      color: tokens.colorNeutralForegroundOnBrand,\n      ...shorthands.borderColor(tokens.colorNeutralForegroundOnBrand),\n      backgroundColor: tokens.colorBrandBackgroundPressed,\n    },\n  },\n});\n\n/**\n * Apply styling to the TeachingPopoverCarouselFooterButton slots based on the state\n */\nexport const useTeachingPopoverCarouselFooterButtonStyles_unstable = (\n  state: TeachingPopoverCarouselFooterButtonState,\n): TeachingPopoverCarouselFooterButtonState => {\n  'use no memo';\n\n  const styles = useStyles();\n  const { navType, popoverAppearance } = state;\n\n  // Apply underlying fluent Button styles\n  state = {\n    ...state,\n    ...useButtonStyles_unstable(state),\n  };\n\n  state.root.className = mergeClasses(\n    teachingPopoverCarouselFooterButtonClassNames.root,\n    styles.root,\n    navType === 'prev' && popoverAppearance === 'brand' && styles.brandPrevious,\n    navType === 'next' && popoverAppearance === 'brand' && styles.brandNext,\n    state.root.className,\n  );\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","shorthands","tokens","useButtonStyles_unstable","teachingPopoverCarouselFooterButtonClassNames","root","useStyles","minWidth","brandNext","color","colorBrandForeground1","backgroundColor","colorNeutralForegroundOnBrand","borderColor","colorTransparentBackground","colorCompoundBrandForeground1Hover","colorCompoundBrandForeground1Pressed","brandPrevious","colorBrandBackground","colorBrandBackgroundHover","colorBrandBackgroundPressed","useTeachingPopoverCarouselFooterButtonStyles_unstable","state","styles","navType","popoverAppearance","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,EAAEC,UAAU,QAAQ,iBAAiB;AAMtE,SAASC,MAAM,QAAQ,wBAAwB;AAC/C,SAASC,wBAAwB,QAAQ,yBAAyB;AAElE,OAAO,MAAMC,gDAA0G;IACrHC,MAAM;AACR,EAAE;AAEF,MAAMC,YAAYP,WAAW;IAC3BM,MAAM;QACJE,UAAU;IACZ;IACAC,WAAW;QACTC,OAAOP,OAAOQ,qBAAqB;QACnCC,iBAAiBT,OAAOU,6BAA6B;QACrD,GAAGX,WAAWY,WAAW,CAACX,OAAOY,0BAA0B,CAAC;QAC5D,UAAU;YACRL,OAAOP,OAAOa,kCAAkC;YAChDJ,iBAAiBT,OAAOU,6BAA6B;QACvD;QACA,iBAAiB;YACfH,OAAOP,OAAOc,oCAAoC;YAClDL,iBAAiBT,OAAOU,6BAA6B;QACvD;IACF;IACAK,eAAe;QACb,sDAAsD;QACtDR,OAAOP,OAAOU,6BAA6B;QAC3CD,iBAAiBT,OAAOgB,oBAAoB;QAC5C,GAAGjB,WAAWY,WAAW,CAACX,OAAOU,6BAA6B,CAAC;QAC/D,UAAU;YACRH,OAAOP,OAAOU,6BAA6B;YAC3C,GAAGX,WAAWY,WAAW,CAACX,OAAOU,6BAA6B,CAAC;YAC/DD,iBAAiBT,OAAOiB,yBAAyB;QACnD;QACA,iBAAiB;YACfV,OAAOP,OAAOU,6BAA6B;YAC3C,GAAGX,WAAWY,WAAW,CAACX,OAAOU,6BAA6B,CAAC;YAC/DD,iBAAiBT,OAAOkB,2BAA2B;QACrD;IACF;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,wDAAwD,CACnEC;IAEA;IAEA,MAAMC,SAASjB;IACf,MAAM,EAAEkB,OAAO,EAAEC,iBAAiB,EAAE,GAAGH;IAEvC,wCAAwC;IACxCA,QAAQ;QACN,GAAGA,KAAK;QACR,GAAGnB,yBAAyBmB,MAAM;IACpC;IAEAA,MAAMjB,IAAI,CAACqB,SAAS,GAAG1B,aACrBI,8CAA8CC,IAAI,EAClDkB,OAAOlB,IAAI,EACXmB,YAAY,UAAUC,sBAAsB,WAAWF,OAAON,aAAa,EAC3EO,YAAY,UAAUC,sBAAsB,WAAWF,OAAOf,SAAS,EACvEc,MAAMjB,IAAI,CAACqB,SAAS;IAGtB,OAAOJ;AACT,EAAE"}