feat: Fluent UI Outlook Lite + connections mockup

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

@@ -0,0 +1,18 @@
+'use client';
+import * as React from 'react';
+import { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';
+import { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';
+import { useTeachingPopoverBodyStyles_unstable } from './useTeachingPopoverBodyStyles.styles';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * Define a styled TeachingPopoverBody, using the `useTeachingPopoverBody_unstable` and `useTeachingPopoverBodyStyles_unstable`
+ * hooks.
+ *
+ * TeachingPopoverBody is used to host content within a TeachingPopover, and provides a standardized media slot
+ */ export const TeachingPopoverBody = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useTeachingPopoverBody_unstable(props, ref);
+    useTeachingPopoverBodyStyles_unstable(state);
+    useCustomStyleHook_unstable('useTeachingPopoverBodyStyles_unstable')(state);
+    return renderTeachingPopoverBody_unstable(state);
+});
+TeachingPopoverBody.displayName = 'TeachingPopoverBody';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverBody/TeachingPopoverBody.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';\nimport { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';\nimport { useTeachingPopoverBodyStyles_unstable } from './useTeachingPopoverBodyStyles.styles';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\nimport type { TeachingPopoverBodyProps } from './TeachingPopoverBody.types';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\n\n/**\n * Define a styled TeachingPopoverBody, using the `useTeachingPopoverBody_unstable` and `useTeachingPopoverBodyStyles_unstable`\n * hooks.\n *\n * TeachingPopoverBody is used to host content within a TeachingPopover, and provides a standardized media slot\n */\nexport const TeachingPopoverBody: ForwardRefComponent<TeachingPopoverBodyProps> = React.forwardRef((props, ref) => {\n  const state = useTeachingPopoverBody_unstable(props, ref);\n\n  useTeachingPopoverBodyStyles_unstable(state);\n\n  useCustomStyleHook_unstable('useTeachingPopoverBodyStyles_unstable')(state);\n\n  return renderTeachingPopoverBody_unstable(state);\n});\n\nTeachingPopoverBody.displayName = 'TeachingPopoverBody';\n"],"names":["React","useTeachingPopoverBody_unstable","renderTeachingPopoverBody_unstable","useTeachingPopoverBodyStyles_unstable","useCustomStyleHook_unstable","TeachingPopoverBody","forwardRef","props","ref","state","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,qCAAqC,QAAQ,wCAAwC;AAC9F,SAASC,2BAA2B,QAAQ,kCAAkC;AAI9E;;;;;CAKC,GACD,OAAO,MAAMC,oCAAqEL,MAAMM,UAAU,CAAC,CAACC,OAAOC;IACzG,MAAMC,QAAQR,gCAAgCM,OAAOC;IAErDL,sCAAsCM;IAEtCL,4BAA4B,yCAAyCK;IAErE,OAAOP,mCAAmCO;AAC5C,GAAG;AAEHJ,oBAAoBK,WAAW,GAAG"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverBody/TeachingPopoverBody.types.ts"],"sourcesContent":["import { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type TeachingPopoverBodySlots = {\n  /**\n   * The element wrapping the buttons.\n   */\n  root: NonNullable<Slot<'div'>>;\n  /**\n   * Optional Media Content.\n   */\n  media?: Slot<'span'>;\n};\n\nexport type TeachingPopoverBodyProps = ComponentProps<TeachingPopoverBodySlots> & {\n  mediaLength?: 'short' | 'medium' | 'tall';\n};\n\nexport type TeachingPopoverBodyState = ComponentState<TeachingPopoverBodySlots> &\n  Required<Pick<TeachingPopoverBodyProps, 'mediaLength'>>;\n"],"names":[],"mappings":"AAiBA,WAC0D"}

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

@@ -0,0 +1,4 @@
+export { TeachingPopoverBody } from './TeachingPopoverBody';
+export { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';
+export { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';
+export { teachingPopoverBodyClassNames, useMediaStyles, useTeachingPopoverBodyStyles_unstable } from './useTeachingPopoverBodyStyles.styles';

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverBody/index.ts"],"sourcesContent":["export { TeachingPopoverBody } from './TeachingPopoverBody';\nexport type {\n  TeachingPopoverBodyProps,\n  TeachingPopoverBodySlots,\n  TeachingPopoverBodyState,\n} from './TeachingPopoverBody.types';\nexport { renderTeachingPopoverBody_unstable } from './renderTeachingPopoverBody';\nexport { useTeachingPopoverBody_unstable } from './useTeachingPopoverBody';\nexport {\n  teachingPopoverBodyClassNames,\n  useMediaStyles,\n  useTeachingPopoverBodyStyles_unstable,\n} from './useTeachingPopoverBodyStyles.styles';\n"],"names":["TeachingPopoverBody","renderTeachingPopoverBody_unstable","useTeachingPopoverBody_unstable","teachingPopoverBodyClassNames","useMediaStyles","useTeachingPopoverBodyStyles_unstable"],"mappings":"AAAA,SAASA,mBAAmB,QAAQ,wBAAwB;AAM5D,SAASC,kCAAkC,QAAQ,8BAA8B;AACjF,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SACEC,6BAA6B,EAC7BC,cAAc,EACdC,qCAAqC,QAChC,wCAAwC"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverBody/renderTeachingPopoverBody.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 TeachingPopoverBody
+ */ export const renderTeachingPopoverBody_unstable = (state)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsxs(state.root, {
+        children: [
+            state.media && /*#__PURE__*/ _jsx(state.media, {}),
+            state.root.children
+        ]
+    });
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverBody/renderTeachingPopoverBody.tsx"],"sourcesContent":["/** @jsxRuntime automatic */\n/** @jsxImportSource @fluentui/react-jsx-runtime */\nimport type { TeachingPopoverBodyState } from './TeachingPopoverBody.types';\nimport { TeachingPopoverBodySlots } from './TeachingPopoverBody.types';\nimport { assertSlots } from '@fluentui/react-utilities';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\n/**\n * Render the final JSX of TeachingPopoverBody\n */\nexport const renderTeachingPopoverBody_unstable = (state: TeachingPopoverBodyState): JSXElement => {\n  assertSlots<TeachingPopoverBodySlots>(state);\n\n  return (\n    <state.root>\n      {state.media && <state.media />}\n      {state.root.children}\n    </state.root>\n  );\n};\n"],"names":["assertSlots","renderTeachingPopoverBody_unstable","state","root","media","children"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAGjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjDF,YAAsCE;IAEtC,qBACE,MAACA,MAAMC,IAAI;;YACRD,MAAME,KAAK,kBAAI,KAACF,MAAME,KAAK;YAC3BF,MAAMC,IAAI,CAACE,QAAQ;;;AAG1B,EAAE"}

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
+/**
+ * Returns the props and state required to render the component
+ * @param props - TeachingPopoverBody properties
+ * @param ref - reference to root HTMLElement of TeachingPopoverBody
+ */ export const useTeachingPopoverBody_unstable = (props, ref)=>{
+    const { mediaLength } = props;
+    return {
+        components: {
+            root: 'div',
+            media: 'span'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref,
+            ...props
+        }), {
+            elementType: 'div'
+        }),
+        media: slot.optional(props.media, {
+            elementType: 'span'
+        }),
+        mediaLength: mediaLength !== null && mediaLength !== void 0 ? mediaLength : 'short'
+    };
+};

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverBody/useTeachingPopoverBody.ts"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { TeachingPopoverBodyProps, TeachingPopoverBodyState } from './TeachingPopoverBody.types';\n/**\n * Returns the props and state required to render the component\n * @param props - TeachingPopoverBody properties\n * @param ref - reference to root HTMLElement of TeachingPopoverBody\n */\nexport const useTeachingPopoverBody_unstable = (\n  props: TeachingPopoverBodyProps,\n  ref: React.Ref<HTMLDivElement>,\n): TeachingPopoverBodyState => {\n  const { mediaLength } = props;\n\n  return {\n    components: {\n      root: 'div',\n      media: 'span',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref,\n        ...props,\n      }),\n      { elementType: 'div' },\n    ),\n    media: slot.optional(props.media, { elementType: 'span' }),\n    mediaLength: mediaLength ?? 'short',\n  };\n};\n"],"names":["React","getIntrinsicElementProps","slot","useTeachingPopoverBody_unstable","props","ref","mediaLength","components","root","media","always","elementType","optional"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E;;;;CAIC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGF;IAExB,OAAO;QACLG,YAAY;YACVC,MAAM;YACNC,OAAO;QACT;QACAD,MAAMN,KAAKQ,MAAM,CACfT,yBAAyB,OAAO;YAC9BI;YACA,GAAGD,KAAK;QACV,IACA;YAAEO,aAAa;QAAM;QAEvBF,OAAOP,KAAKU,QAAQ,CAACR,MAAMK,KAAK,EAAE;YAAEE,aAAa;QAAO;QACxDL,aAAaA,wBAAAA,yBAAAA,cAAe;IAC9B;AACF,EAAE"}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.js

@@ -0,0 +1,68 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+export const teachingPopoverBodyClassNames = {
+  root: 'fui-TeachingPopoverBody',
+  media: 'fui-TeachingPopoverBody__media'
+};
+const popoverBodyDimension = 288;
+export const useMediaStyles = /*#__PURE__*/__styles({
+  base: {
+    Bw0ie65: 0,
+    Br312pm: 0,
+    nk6f5a: 0,
+    Ijaq50: 0,
+    Bq1tomu: "fujjg13",
+    B68tc82: 0,
+    Bmxbyg5: 0,
+    Bpg54ce: "f1a3p1vp",
+    a9b677: "f14z66ap",
+    jrapky: "f1jlhsmd",
+    ha4doy: "fmrv4ls",
+    Brf1p80: "f4d9j23",
+    mc9l5x: "f22iagw"
+  },
+  short: {
+    Bubjx69: "f1taewuw",
+    Bfd67p1: "f2f587x"
+  },
+  medium: {
+    Bubjx69: "f7da563",
+    Bfd67p1: "fmwcswg"
+  },
+  tall: {
+    Bubjx69: "f9ikmtg",
+    Bfd67p1: "f1gv48o"
+  }
+}, {
+  d: [[".fujjg13{grid-area:media;}", {
+    p: -1
+  }], [".f1a3p1vp{overflow:hidden;}", {
+    p: -1
+  }], ".f14z66ap{width:auto;}", ".f1jlhsmd{margin-bottom:12px;}", ".fmrv4ls{vertical-align:middle;}", ".f4d9j23{justify-content:center;}", ".f22iagw{display:flex;}", ".f1taewuw{aspect-ratio:2.4615384615384617;}", ".f7da563{aspect-ratio:1.6363636363636365;}", ".f9ikmtg{aspect-ratio:1;}"],
+  t: ["@supports not (aspect-ratio){.f2f587x{height:117px;}}", "@supports not (aspect-ratio){.fmwcswg{height:176px;}}", "@supports not (aspect-ratio){.f1gv48o{height:288px;}}"]
+});
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    mc9l5x: "f22iagw",
+    Beiy3e4: "f1vx9l62",
+    Byoj8tv: "fpe6lb7"
+  }
+}, {
+  d: [".f22iagw{display:flex;}", ".f1vx9l62{flex-direction:column;}", ".fpe6lb7{padding-bottom:12px;}"]
+});
+/** Applies style classnames to slots */
+export const useTeachingPopoverBodyStyles_unstable = state => {
+  'use no memo';
+
+  const {
+    mediaLength
+  } = state;
+  const styles = useStyles();
+  const mediaStyles = useMediaStyles();
+  state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
+  if (state.media) {
+    state.media.className = mergeClasses(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);
+  }
+  return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","teachingPopoverBodyClassNames","root","media","popoverBodyDimension","useMediaStyles","base","Bw0ie65","Br312pm","nk6f5a","Ijaq50","Bq1tomu","B68tc82","Bmxbyg5","Bpg54ce","a9b677","jrapky","ha4doy","Brf1p80","mc9l5x","short","Bubjx69","Bfd67p1","medium","tall","d","p","t","useStyles","Beiy3e4","Byoj8tv","useTeachingPopoverBodyStyles_unstable","state","mediaLength","styles","mediaStyles","className"],"sources":["useTeachingPopoverBodyStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const teachingPopoverBodyClassNames = {\n    root: 'fui-TeachingPopoverBody',\n    media: 'fui-TeachingPopoverBody__media'\n};\nconst popoverBodyDimension = 288;\nexport const useMediaStyles = makeStyles({\n    base: {\n        gridArea: 'media',\n        overflow: 'hidden',\n        width: 'auto',\n        marginBottom: '12px',\n        verticalAlign: 'middle',\n        justifyContent: 'center',\n        display: 'flex'\n    },\n    short: {\n        aspectRatio: popoverBodyDimension / 117,\n        '@supports not (aspect-ratio)': {\n            height: '117px'\n        }\n    },\n    medium: {\n        aspectRatio: popoverBodyDimension / 176,\n        '@supports not (aspect-ratio)': {\n            height: '176px'\n        }\n    },\n    tall: {\n        aspectRatio: 1,\n        '@supports not (aspect-ratio)': {\n            height: `${popoverBodyDimension}px`\n        }\n    }\n});\nconst useStyles = makeStyles({\n    root: {\n        display: 'flex',\n        flexDirection: 'column',\n        paddingBottom: '12px'\n    }\n});\n/** Applies style classnames to slots */ export const useTeachingPopoverBodyStyles_unstable = (state)=>{\n    'use no memo';\n    const { mediaLength } = state;\n    const styles = useStyles();\n    const mediaStyles = useMediaStyles();\n    state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);\n    if (state.media) {\n        state.media.className = mergeClasses(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);\n    }\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,6BAA6B,GAAG;EACzCC,IAAI,EAAE,yBAAyB;EAC/BC,KAAK,EAAE;AACX,CAAC;AACD,MAAMC,oBAAoB,GAAG,GAAG;AAChC,OAAO,MAAMC,cAAc,gBAAGN,QAAA;EAAAO,IAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,OAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,MAAA;IAAAC,OAAA;IAAAC,MAAA;EAAA;EAAAC,KAAA;IAAAC,OAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAF,OAAA;IAAAC,OAAA;EAAA;EAAAE,IAAA;IAAAH,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAG,CAAA;IAAAC,CAAA;EAAA;IAAAA,CAAA;EAAA;EAAAC,CAAA;AAAA,CA4B7B,CAAC;AACF,MAAMC,SAAS,gBAAG7B,QAAA;EAAAG,IAAA;IAAAiB,MAAA;IAAAU,OAAA;IAAAC,OAAA;EAAA;AAAA;EAAAL,CAAA;AAAA,CAMjB,CAAC;AACF;AAAyC,OAAO,MAAMM,qCAAqC,GAAIC,KAAK,IAAG;EACnG,aAAa;;EACb,MAAM;IAAEC;EAAY,CAAC,GAAGD,KAAK;EAC7B,MAAME,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1B,MAAMO,WAAW,GAAG9B,cAAc,CAAC,CAAC;EACpC2B,KAAK,CAAC9B,IAAI,CAACkC,SAAS,GAAGpC,YAAY,CAACC,6BAA6B,CAACC,IAAI,EAAEgC,MAAM,CAAChC,IAAI,EAAE8B,KAAK,CAAC9B,IAAI,CAACkC,SAAS,CAAC;EAC1G,IAAIJ,KAAK,CAAC7B,KAAK,EAAE;IACb6B,KAAK,CAAC7B,KAAK,CAACiC,SAAS,GAAGpC,YAAY,CAACC,6BAA6B,CAACE,KAAK,EAAEgC,WAAW,CAAC7B,IAAI,EAAE6B,WAAW,CAACF,WAAW,CAAC,EAAED,KAAK,CAAC7B,KAAK,CAACiC,SAAS,CAAC;EAChJ;EACA,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.raw.js

@@ -0,0 +1,54 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const teachingPopoverBodyClassNames = {
+    root: 'fui-TeachingPopoverBody',
+    media: 'fui-TeachingPopoverBody__media'
+};
+const popoverBodyDimension = 288;
+export const useMediaStyles = makeStyles({
+    base: {
+        gridArea: 'media',
+        overflow: 'hidden',
+        width: 'auto',
+        marginBottom: '12px',
+        verticalAlign: 'middle',
+        justifyContent: 'center',
+        display: 'flex'
+    },
+    short: {
+        aspectRatio: popoverBodyDimension / 117,
+        '@supports not (aspect-ratio)': {
+            height: '117px'
+        }
+    },
+    medium: {
+        aspectRatio: popoverBodyDimension / 176,
+        '@supports not (aspect-ratio)': {
+            height: '176px'
+        }
+    },
+    tall: {
+        aspectRatio: 1,
+        '@supports not (aspect-ratio)': {
+            height: `${popoverBodyDimension}px`
+        }
+    }
+});
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexDirection: 'column',
+        paddingBottom: '12px'
+    }
+});
+/** Applies style classnames to slots */ export const useTeachingPopoverBodyStyles_unstable = (state)=>{
+    'use no memo';
+    const { mediaLength } = state;
+    const styles = useStyles();
+    const mediaStyles = useMediaStyles();
+    state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);
+    if (state.media) {
+        state.media.className = mergeClasses(teachingPopoverBodyClassNames.media, mediaStyles.base, mediaStyles[mediaLength], state.media.className);
+    }
+    return state;
+};

node_modules/@fluentui/react-teaching-popover/lib/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/TeachingPopoverBody/useTeachingPopoverBodyStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TeachingPopoverBodySlots, TeachingPopoverBodyState } from './TeachingPopoverBody.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const teachingPopoverBodyClassNames: SlotClassNames<TeachingPopoverBodySlots> = {\n  root: 'fui-TeachingPopoverBody',\n  media: 'fui-TeachingPopoverBody__media',\n};\n\nconst popoverBodyDimension = 288;\n\nexport const useMediaStyles = makeStyles({\n  base: {\n    gridArea: 'media',\n    overflow: 'hidden',\n    width: 'auto',\n    marginBottom: '12px',\n    verticalAlign: 'middle',\n    justifyContent: 'center',\n    display: 'flex',\n  },\n  short: {\n    aspectRatio: popoverBodyDimension / 117,\n    '@supports not (aspect-ratio)': {\n      height: '117px',\n    },\n  },\n  medium: {\n    aspectRatio: popoverBodyDimension / 176,\n    '@supports not (aspect-ratio)': {\n      height: '176px',\n    },\n  },\n  tall: {\n    aspectRatio: 1,\n    '@supports not (aspect-ratio)': {\n      height: `${popoverBodyDimension}px`,\n    },\n  },\n});\n\nconst useStyles = makeStyles({\n  root: {\n    display: 'flex',\n    flexDirection: 'column',\n    paddingBottom: '12px',\n  },\n});\n\n/** Applies style classnames to slots */\nexport const useTeachingPopoverBodyStyles_unstable = (state: TeachingPopoverBodyState): TeachingPopoverBodyState => {\n  'use no memo';\n\n  const { mediaLength } = state;\n  const styles = useStyles();\n  const mediaStyles = useMediaStyles();\n\n  state.root.className = mergeClasses(teachingPopoverBodyClassNames.root, styles.root, state.root.className);\n\n  if (state.media) {\n    state.media.className = mergeClasses(\n      teachingPopoverBodyClassNames.media,\n      mediaStyles.base,\n      mediaStyles[mediaLength],\n      state.media.className,\n    );\n  }\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","teachingPopoverBodyClassNames","root","media","popoverBodyDimension","useMediaStyles","base","gridArea","overflow","width","marginBottom","verticalAlign","justifyContent","display","short","aspectRatio","height","medium","tall","useStyles","flexDirection","paddingBottom","useTeachingPopoverBodyStyles_unstable","state","mediaLength","styles","mediaStyles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,gCAA0E;IACrFC,MAAM;IACNC,OAAO;AACT,EAAE;AAEF,MAAMC,uBAAuB;AAE7B,OAAO,MAAMC,iBAAiBN,WAAW;IACvCO,MAAM;QACJC,UAAU;QACVC,UAAU;QACVC,OAAO;QACPC,cAAc;QACdC,eAAe;QACfC,gBAAgB;QAChBC,SAAS;IACX;IACAC,OAAO;QACLC,aAAaX,uBAAuB;QACpC,gCAAgC;YAC9BY,QAAQ;QACV;IACF;IACAC,QAAQ;QACNF,aAAaX,uBAAuB;QACpC,gCAAgC;YAC9BY,QAAQ;QACV;IACF;IACAE,MAAM;QACJH,aAAa;QACb,gCAAgC;YAC9BC,QAAQ,GAAGZ,qBAAqB,EAAE,CAAC;QACrC;IACF;AACF,GAAG;AAEH,MAAMe,YAAYpB,WAAW;IAC3BG,MAAM;QACJW,SAAS;QACTO,eAAe;QACfC,eAAe;IACjB;AACF;AAEA,sCAAsC,GACtC,OAAO,MAAMC,wCAAwC,CAACC;IACpD;IAEA,MAAM,EAAEC,WAAW,EAAE,GAAGD;IACxB,MAAME,SAASN;IACf,MAAMO,cAAcrB;IAEpBkB,MAAMrB,IAAI,CAACyB,SAAS,GAAG3B,aAAaC,8BAA8BC,IAAI,EAAEuB,OAAOvB,IAAI,EAAEqB,MAAMrB,IAAI,CAACyB,SAAS;IAEzG,IAAIJ,MAAMpB,KAAK,EAAE;QACfoB,MAAMpB,KAAK,CAACwB,SAAS,GAAG3B,aACtBC,8BAA8BE,KAAK,EACnCuB,YAAYpB,IAAI,EAChBoB,WAAW,CAACF,YAAY,EACxBD,MAAMpB,KAAK,CAACwB,SAAS;IAEzB;IAEA,OAAOJ;AACT,EAAE"}