feat: Fluent UI Outlook Lite + connections mockup

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/CarouselViewport.js

@@ -0,0 +1,17 @@
+'use client';
+import * as React from 'react';
+import { useCarouselViewport_unstable } from './useCarouselViewport';
+import { renderCarouselViewport_unstable } from './renderCarouselViewport';
+import { useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';
+import { useCarouselSliderContextValues_unstable } from '../CarouselSlider/CarouselSliderContext';
+import { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';
+/**
+ * CarouselViewport component - TODO: add more docs
+ */ export const CarouselViewport = /*#__PURE__*/ React.forwardRef((props, ref)=>{
+    const state = useCarouselViewport_unstable(props, ref);
+    useCarouselViewportStyles_unstable(state);
+    useCustomStyleHook_unstable('useCarouselViewportStyles_unstable')(state);
+    const context = useCarouselSliderContextValues_unstable(state);
+    return renderCarouselViewport_unstable(state, context);
+});
+CarouselViewport.displayName = 'CarouselViewport';

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/CarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport { useCarouselViewport_unstable } from './useCarouselViewport';\nimport { renderCarouselViewport_unstable } from './renderCarouselViewport';\nimport { useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';\nimport type { CarouselViewportProps } from './CarouselViewport.types';\nimport { useCarouselSliderContextValues_unstable } from '../CarouselSlider/CarouselSliderContext';\nimport { useCustomStyleHook_unstable } from '@fluentui/react-shared-contexts';\n\n/**\n * CarouselViewport component - TODO: add more docs\n */\nexport const CarouselViewport: ForwardRefComponent<CarouselViewportProps> = React.forwardRef((props, ref) => {\n  const state = useCarouselViewport_unstable(props, ref);\n\n  useCarouselViewportStyles_unstable(state);\n  useCustomStyleHook_unstable('useCarouselViewportStyles_unstable')(state);\n\n  const context = useCarouselSliderContextValues_unstable(state);\n\n  return renderCarouselViewport_unstable(state, context);\n});\n\nCarouselViewport.displayName = 'CarouselViewport';\n"],"names":["React","useCarouselViewport_unstable","renderCarouselViewport_unstable","useCarouselViewportStyles_unstable","useCarouselSliderContextValues_unstable","useCustomStyleHook_unstable","CarouselViewport","forwardRef","props","ref","state","context","displayName"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,kCAAkC,QAAQ,qCAAqC;AAExF,SAASC,uCAAuC,QAAQ,0CAA0C;AAClG,SAASC,2BAA2B,QAAQ,kCAAkC;AAE9E;;CAEC,GACD,OAAO,MAAMC,iCAA+DN,MAAMO,UAAU,CAAC,CAACC,OAAOC;IACnG,MAAMC,QAAQT,6BAA6BO,OAAOC;IAElDN,mCAAmCO;IACnCL,4BAA4B,sCAAsCK;IAElE,MAAMC,UAAUP,wCAAwCM;IAExD,OAAOR,gCAAgCQ,OAAOC;AAChD,GAAG;AAEHL,iBAAiBM,WAAW,GAAG"}

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/CarouselViewport.types.js

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

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/CarouselViewport.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/CarouselViewport.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport { CarouselSliderContextValue } from '../CarouselSlider/CarouselSlider.types';\n\nexport type CarouselViewportSlots = {\n  /**\n   * The viewport outer container, defining the size of the carousels visible and interactable area\n   */\n  root: Slot<'div'>;\n};\n\n/**\n * CarouselViewport Props\n */\nexport type CarouselViewportProps = ComponentProps<CarouselViewportSlots>;\n\n/**\n * State used in rendering CarouselViewport\n */\nexport type CarouselViewportState = ComponentState<Required<CarouselViewportSlots>> & CarouselSliderContextValue;\n"],"names":[],"mappings":"AAeA;;CAEC,GACD,WAAiH"}

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/index.js

@@ -0,0 +1,4 @@
+export { CarouselViewport } from './CarouselViewport';
+export { renderCarouselViewport_unstable } from './renderCarouselViewport';
+export { useCarouselViewport_unstable } from './useCarouselViewport';
+export { carouselViewportClassNames, useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/index.ts"],"sourcesContent":["export { CarouselViewport } from './CarouselViewport';\nexport type { CarouselViewportProps, CarouselViewportSlots, CarouselViewportState } from './CarouselViewport.types';\nexport { renderCarouselViewport_unstable } from './renderCarouselViewport';\nexport { useCarouselViewport_unstable } from './useCarouselViewport';\nexport { carouselViewportClassNames, useCarouselViewportStyles_unstable } from './useCarouselViewportStyles.styles';\n"],"names":["CarouselViewport","renderCarouselViewport_unstable","useCarouselViewport_unstable","carouselViewportClassNames","useCarouselViewportStyles_unstable"],"mappings":"AAAA,SAASA,gBAAgB,QAAQ,qBAAqB;AAEtD,SAASC,+BAA+B,QAAQ,2BAA2B;AAC3E,SAASC,4BAA4B,QAAQ,wBAAwB;AACrE,SAASC,0BAA0B,EAAEC,kCAAkC,QAAQ,qCAAqC"}

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/renderCarouselViewport.js

@@ -0,0 +1,12 @@
+  import { jsx as _jsx } from "@fluentui/react-jsx-runtime/jsx-runtime";
+import { assertSlots } from '@fluentui/react-utilities';
+import { CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';
+/**
+ * Render the final JSX of CarouselViewport
+ */ export const renderCarouselViewport_unstable = (state, contextValues)=>{
+    assertSlots(state);
+    return /*#__PURE__*/ _jsx(CarouselSliderContextProvider, {
+        value: contextValues.carouselSlider,
+        children: /*#__PURE__*/ _jsx(state.root, {})
+    });
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/renderCarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/renderCarouselViewport.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 { CarouselViewportState, CarouselViewportSlots } from './CarouselViewport.types';\nimport { CarouselSliderContextValues, CarouselSliderContextProvider } from '../CarouselSlider/CarouselSliderContext';\n\n/**\n * Render the final JSX of CarouselViewport\n */\nexport const renderCarouselViewport_unstable = (\n  state: CarouselViewportState,\n  contextValues: CarouselSliderContextValues,\n): JSXElement => {\n  assertSlots<CarouselViewportSlots>(state);\n\n  return (\n    <CarouselSliderContextProvider value={contextValues.carouselSlider}>\n      <state.root />\n    </CarouselSliderContextProvider>\n  );\n};\n"],"names":["assertSlots","CarouselSliderContextProvider","renderCarouselViewport_unstable","state","contextValues","value","carouselSlider","root"],"mappings":"AAAA,0BAA0B,GAC1B,iDAAiD;AAEjD,SAASA,WAAW,QAAQ,4BAA4B;AAGxD,SAAsCC,6BAA6B,QAAQ,0CAA0C;AAErH;;CAEC,GACD,OAAO,MAAMC,kCAAkC,CAC7CC,OACAC;IAEAJ,YAAmCG;IAEnC,qBACE,KAACF;QAA8BI,OAAOD,cAAcE,cAAc;kBAChE,cAAA,KAACH,MAAMI,IAAI;;AAGjB,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/useCarouselViewport.js

@@ -0,0 +1,72 @@
+'use client';
+import * as React from 'react';
+import { getIntrinsicElementProps, mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';
+import { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';
+/**
+ * Create the state required to render CarouselViewport.
+ *
+ * The returned state can be modified with hooks such as useCarouselViewportStyles_unstable,
+ * before being passed to renderCarouselViewport_unstable.
+ *
+ * @param props - props from this instance of CarouselViewport
+ * @param ref - reference to root HTMLDivElement of CarouselViewport
+ */ export const useCarouselViewport_unstable = (props, ref)=>{
+    const hasFocus = React.useRef(false);
+    const hasMouse = React.useRef(false);
+    const viewportRef = useCarouselContext((ctx)=>ctx.viewportRef);
+    const enableAutoplay = useCarouselContext((ctx)=>ctx.enableAutoplay);
+    const handleFocusCapture = React.useCallback(()=>{
+        hasFocus.current = true;
+        // Will pause autoplay when focus is captured within viewport (if autoplay is initialized)
+        enableAutoplay(false, true);
+    }, [
+        enableAutoplay
+    ]);
+    const handleBlurCapture = React.useCallback((e)=>{
+        // Will enable autoplay (if initialized) when focus exits viewport
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            hasFocus.current = false;
+            if (!hasMouse.current) {
+                enableAutoplay(true, true);
+            }
+        }
+    }, [
+        enableAutoplay
+    ]);
+    const handleMouseEnter = React.useCallback(()=>{
+        hasMouse.current = true;
+        enableAutoplay(false, true);
+    }, [
+        enableAutoplay
+    ]);
+    const handleMouseLeave = React.useCallback(()=>{
+        hasMouse.current = false;
+        if (!hasFocus.current) {
+            enableAutoplay(true, true);
+        }
+    }, [
+        enableAutoplay
+    ]);
+    const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);
+    const onBlurCapture = mergeCallbacks(props.onBlurCapture, handleBlurCapture);
+    const onMouseEnter = mergeCallbacks(props.onMouseEnter, handleMouseEnter);
+    const onMouseLeave = mergeCallbacks(props.onMouseLeave, handleMouseLeave);
+    return {
+        components: {
+            root: 'div'
+        },
+        root: slot.always(getIntrinsicElementProps('div', {
+            ref: useMergedRefs(ref, viewportRef),
+            role: 'presentation',
+            // Draggable ensures dragging is supported (even if not enabled)
+            draggable: true,
+            ...props,
+            onFocusCapture,
+            onBlurCapture,
+            onMouseEnter,
+            onMouseLeave
+        }), {
+            elementType: 'div'
+        })
+    };
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/useCarouselViewport.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/useCarouselViewport.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { getIntrinsicElementProps, mergeCallbacks, slot, useMergedRefs } from '@fluentui/react-utilities';\nimport type { CarouselViewportProps, CarouselViewportState } from './CarouselViewport.types';\nimport { useCarouselContext_unstable as useCarouselContext } from '../CarouselContext';\n\n/**\n * Create the state required to render CarouselViewport.\n *\n * The returned state can be modified with hooks such as useCarouselViewportStyles_unstable,\n * before being passed to renderCarouselViewport_unstable.\n *\n * @param props - props from this instance of CarouselViewport\n * @param ref - reference to root HTMLDivElement of CarouselViewport\n */\nexport const useCarouselViewport_unstable = (\n  props: CarouselViewportProps,\n  ref: React.Ref<HTMLDivElement>,\n): CarouselViewportState => {\n  const hasFocus = React.useRef(false);\n  const hasMouse = React.useRef(false);\n  const viewportRef = useCarouselContext(ctx => ctx.viewportRef);\n  const enableAutoplay = useCarouselContext(ctx => ctx.enableAutoplay);\n\n  const handleFocusCapture = React.useCallback(() => {\n    hasFocus.current = true;\n    // Will pause autoplay when focus is captured within viewport (if autoplay is initialized)\n    enableAutoplay(false, true);\n  }, [enableAutoplay]);\n\n  const handleBlurCapture = React.useCallback(\n    (e: React.FocusEvent) => {\n      // Will enable autoplay (if initialized) when focus exits viewport\n      if (!e.currentTarget.contains(e.relatedTarget)) {\n        hasFocus.current = false;\n        if (!hasMouse.current) {\n          enableAutoplay(true, true);\n        }\n      }\n    },\n    [enableAutoplay],\n  );\n\n  const handleMouseEnter = React.useCallback(() => {\n    hasMouse.current = true;\n    enableAutoplay(false, true);\n  }, [enableAutoplay]);\n  const handleMouseLeave = React.useCallback(() => {\n    hasMouse.current = false;\n    if (!hasFocus.current) {\n      enableAutoplay(true, true);\n    }\n  }, [enableAutoplay]);\n\n  const onFocusCapture = mergeCallbacks(props.onFocusCapture, handleFocusCapture);\n  const onBlurCapture = mergeCallbacks(props.onBlurCapture, handleBlurCapture);\n  const onMouseEnter = mergeCallbacks(props.onMouseEnter, handleMouseEnter);\n  const onMouseLeave = mergeCallbacks(props.onMouseLeave, handleMouseLeave);\n\n  return {\n    components: {\n      root: 'div',\n    },\n    root: slot.always(\n      getIntrinsicElementProps('div', {\n        ref: useMergedRefs(ref, viewportRef),\n        role: 'presentation',\n        // Draggable ensures dragging is supported (even if not enabled)\n        draggable: true,\n        ...props,\n        onFocusCapture,\n        onBlurCapture,\n        onMouseEnter,\n        onMouseLeave,\n      }),\n      { elementType: 'div' },\n    ),\n  };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","slot","useMergedRefs","useCarouselContext_unstable","useCarouselContext","useCarouselViewport_unstable","props","ref","hasFocus","useRef","hasMouse","viewportRef","ctx","enableAutoplay","handleFocusCapture","useCallback","current","handleBlurCapture","e","currentTarget","contains","relatedTarget","handleMouseEnter","handleMouseLeave","onFocusCapture","onBlurCapture","onMouseEnter","onMouseLeave","components","root","always","role","draggable","elementType"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,cAAc,EAAEC,IAAI,EAAEC,aAAa,QAAQ,4BAA4B;AAE1G,SAASC,+BAA+BC,kBAAkB,QAAQ,qBAAqB;AAEvF;;;;;;;;CAQC,GACD,OAAO,MAAMC,+BAA+B,CAC1CC,OACAC;IAEA,MAAMC,WAAWV,MAAMW,MAAM,CAAC;IAC9B,MAAMC,WAAWZ,MAAMW,MAAM,CAAC;IAC9B,MAAME,cAAcP,mBAAmBQ,CAAAA,MAAOA,IAAID,WAAW;IAC7D,MAAME,iBAAiBT,mBAAmBQ,CAAAA,MAAOA,IAAIC,cAAc;IAEnE,MAAMC,qBAAqBhB,MAAMiB,WAAW,CAAC;QAC3CP,SAASQ,OAAO,GAAG;QACnB,0FAA0F;QAC1FH,eAAe,OAAO;IACxB,GAAG;QAACA;KAAe;IAEnB,MAAMI,oBAAoBnB,MAAMiB,WAAW,CACzC,CAACG;QACC,kEAAkE;QAClE,IAAI,CAACA,EAAEC,aAAa,CAACC,QAAQ,CAACF,EAAEG,aAAa,GAAG;YAC9Cb,SAASQ,OAAO,GAAG;YACnB,IAAI,CAACN,SAASM,OAAO,EAAE;gBACrBH,eAAe,MAAM;YACvB;QACF;IACF,GACA;QAACA;KAAe;IAGlB,MAAMS,mBAAmBxB,MAAMiB,WAAW,CAAC;QACzCL,SAASM,OAAO,GAAG;QACnBH,eAAe,OAAO;IACxB,GAAG;QAACA;KAAe;IACnB,MAAMU,mBAAmBzB,MAAMiB,WAAW,CAAC;QACzCL,SAASM,OAAO,GAAG;QACnB,IAAI,CAACR,SAASQ,OAAO,EAAE;YACrBH,eAAe,MAAM;QACvB;IACF,GAAG;QAACA;KAAe;IAEnB,MAAMW,iBAAiBxB,eAAeM,MAAMkB,cAAc,EAAEV;IAC5D,MAAMW,gBAAgBzB,eAAeM,MAAMmB,aAAa,EAAER;IAC1D,MAAMS,eAAe1B,eAAeM,MAAMoB,YAAY,EAAEJ;IACxD,MAAMK,eAAe3B,eAAeM,MAAMqB,YAAY,EAAEJ;IAExD,OAAO;QACLK,YAAY;YACVC,MAAM;QACR;QACAA,MAAM5B,KAAK6B,MAAM,CACf/B,yBAAyB,OAAO;YAC9BQ,KAAKL,cAAcK,KAAKI;YACxBoB,MAAM;YACN,gEAAgE;YAChEC,WAAW;YACX,GAAG1B,KAAK;YACRkB;YACAC;YACAC;YACAC;QACF,IACA;YAAEM,aAAa;QAAM;IAEzB;AACF,EAAE"}

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js

@@ -0,0 +1,27 @@
+'use client';
+
+import { __styles, mergeClasses } from '@griffel/react';
+export const carouselViewportClassNames = {
+  root: 'fui-CarouselViewport'
+};
+/**
+ * Styles for the root slot
+ */
+const useStyles = /*#__PURE__*/__styles({
+  root: {
+    B2u0y6b: "f6dzj5z",
+    a9b677: "f14z66ap"
+  }
+}, {
+  d: [".f6dzj5z{max-width:100%;}", ".f14z66ap{width:auto;}"]
+});
+/**
+ * Apply styling to the CarouselViewport slots based on the state
+ */
+export const useCarouselViewportStyles_unstable = state => {
+  'use no memo';
+
+  const styles = useStyles();
+  state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);
+  return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/useCarouselViewportStyles.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["__styles","mergeClasses","carouselViewportClassNames","root","useStyles","B2u0y6b","a9b677","d","useCarouselViewportStyles_unstable","state","styles","className"],"sources":["useCarouselViewportStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nexport const carouselViewportClassNames = {\n    root: 'fui-CarouselViewport'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeStyles({\n    root: {\n        maxWidth: '100%',\n        width: 'auto'\n    }\n});\n/**\n * Apply styling to the CarouselViewport slots based on the state\n */ export const useCarouselViewportStyles_unstable = (state)=>{\n    'use no memo';\n    const styles = useStyles();\n    state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);\n    return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,OAAO,MAAMC,0BAA0B,GAAG;EACtCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,QAAA;EAAAG,IAAA;IAAAE,OAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAKrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,kCAAkC,GAAIC,KAAK,IAAG;EAC3D,aAAa;;EACb,MAAMC,MAAM,GAAGN,SAAS,CAAC,CAAC;EAC1BK,KAAK,CAACN,IAAI,CAACQ,SAAS,GAAGV,YAAY,CAACC,0BAA0B,CAACC,IAAI,EAAEO,MAAM,CAACP,IAAI,EAAEM,KAAK,CAACN,IAAI,CAACQ,SAAS,CAAC;EACvG,OAAOF,KAAK;AAChB,CAAC","ignoreList":[]}

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js

@@ -0,0 +1,21 @@
+'use client';
+import { makeStyles, mergeClasses } from '@griffel/react';
+export const carouselViewportClassNames = {
+    root: 'fui-CarouselViewport'
+};
+/**
+ * Styles for the root slot
+ */ const useStyles = makeStyles({
+    root: {
+        maxWidth: '100%',
+        width: 'auto'
+    }
+});
+/**
+ * Apply styling to the CarouselViewport slots based on the state
+ */ export const useCarouselViewportStyles_unstable = (state)=>{
+    'use no memo';
+    const styles = useStyles();
+    state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);
+    return state;
+};

node_modules/@fluentui/react-carousel/lib/components/CarouselViewport/useCarouselViewportStyles.styles.raw.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CarouselViewport/useCarouselViewportStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\nimport type { CarouselViewportSlots, CarouselViewportState } from './CarouselViewport.types';\n\nexport const carouselViewportClassNames: SlotClassNames<CarouselViewportSlots> = {\n  root: 'fui-CarouselViewport',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n  root: {\n    maxWidth: '100%',\n    width: 'auto',\n  },\n});\n\n/**\n * Apply styling to the CarouselViewport slots based on the state\n */\nexport const useCarouselViewportStyles_unstable = (state: CarouselViewportState): CarouselViewportState => {\n  'use no memo';\n\n  const styles = useStyles();\n  state.root.className = mergeClasses(carouselViewportClassNames.root, styles.root, state.root.className);\n\n  return state;\n};\n"],"names":["makeStyles","mergeClasses","carouselViewportClassNames","root","useStyles","maxWidth","width","useCarouselViewportStyles_unstable","state","styles","className"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAI1D,OAAO,MAAMC,6BAAoE;IAC/EC,MAAM;AACR,EAAE;AAEF;;CAEC,GACD,MAAMC,YAAYJ,WAAW;IAC3BG,MAAM;QACJE,UAAU;QACVC,OAAO;IACT;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,qCAAqC,CAACC;IACjD;IAEA,MAAMC,SAASL;IACfI,MAAML,IAAI,CAACO,SAAS,GAAGT,aAAaC,2BAA2BC,IAAI,EAAEM,OAAON,IAAI,EAAEK,MAAML,IAAI,CAACO,SAAS;IAEtG,OAAOF;AACT,EAAE"}