@cuemath/leap 3.5.11-as2 → 3.5.11-as3

package/dist/features/timeline/comps/daily-timeline-items/daily-timeline-items-styled.js

@@ -1,31 +1,29 @@
-import e from "styled-components";
-import n from "../../../ui/layout/flex-view.js";
-const i = e(n)`
-  border-bottom: ${({ $shouldAddBorder: o, theme: t }) => o ? `1px solid ${t.colors.BLACK}` : "none"};
-`, p = e(n)`
+import t from "styled-components";
+import e from "../../../ui/layout/flex-view.js";
+const i = t(e)`
+  border-bottom: ${({ $shouldAddBorder: o, theme: n }) => o ? `1px solid ${n.colors.BLACK}` : "none"};
+  will-change: border-bottom;
+`, p = t(e)`
   border-top: none;
   border-bottom: ${({ $isExpanded: o }) => o && "none"};
   padding-bottom: 24px;
-`, s = e(n)`
+  will-change: border-bottom;
+`, b = t(e)`
   position: absolute;
   top: 0px;
   left: 0px;
   z-index: 2;
-`;
-e(n)`
-  border-bottom: ${({ $isLastItem: o, theme: t }) => o ? `1px solid ${t.colors.BLACK}` : "none"};
-`;
-const b = e(n)`
-  border-left: ${({ $isLastCard: o, theme: t }) => o ? "none" : `1px dashed ${t.colors.GREY_3}`};
+`, l = t(e)`
+  border-left: ${({ $isLastCard: o, theme: n }) => o ? "none" : `1px dashed ${n.colors.GREY_3}`};
   padding-bottom: ${({ $isLastCard: o }) => o ? "0" : "20px"};
   > div {
     margin-left: -8px;
   }
 `;
 export {
-  b as Card,
+  l as Card,
   i as SectionContainer,
   p as SectionFooter,
-  s as TagContainer
+  b as TagContainer
 };
 //# sourceMappingURL=daily-timeline-items-styled.js.map

package/dist/features/timeline/comps/daily-timeline-items/daily-timeline-items-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"daily-timeline-items-styled.js","sources":["../../../../../src/features/timeline/comps/daily-timeline-items/daily-timeline-items-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const SectionContainer = styled(FlexView)<{ $shouldAddBorder?: boolean }>`\n  border-bottom: ${({ $shouldAddBorder, theme }) =>\n    $shouldAddBorder ? `1px solid ${theme.colors.BLACK}` : 'none'};\n`;\n\nexport const SectionFooter = styled(FlexView)<{ $isExpanded?: boolean }>`\n  border-top: none;\n  border-bottom: ${({ $isExpanded }) => $isExpanded && 'none'};\n  padding-bottom: 24px;\n`;\n\nexport const TagContainer = styled(FlexView)`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  z-index: 2;\n`;\n\nexport const SectionChild = styled(FlexView)<{ $isLastItem?: boolean }>`\n  border-bottom: ${({ $isLastItem, theme }) =>\n    $isLastItem ? `1px solid ${theme.colors.BLACK}` : 'none'};\n`;\n\nexport const Card = styled(FlexView)<{ $isLastCard: boolean }>`\n  border-left: ${({ $isLastCard, theme }) =>\n    $isLastCard ? 'none' : `1px dashed ${theme.colors.GREY_3}`};\n  padding-bottom: ${({ $isLastCard }) => ($isLastCard ? '0' : '20px')};\n  > div {\n    margin-left: -8px;\n  }\n`;\n"],"names":["SectionContainer","styled","FlexView","$shouldAddBorder","theme","SectionFooter","$isExpanded","TagContainer","$isLastItem","Card","$isLastCard"],"mappings":";;AAIa,MAAAA,IAAmBC,EAAOC,CAAQ;AAAA,mBAC5B,CAAC,EAAE,kBAAAC,GAAkB,OAAAC,EAAM,MAC1CD,IAAmB,aAAaC,EAAM,OAAO,KAAK,KAAK,MAAM;AAAA,GAGpDC,IAAgBJ,EAAOC,CAAQ;AAAA;AAAA,mBAEzB,CAAC,EAAE,aAAAI,QAAkBA,KAAe,MAAM;AAAA;AAAA,GAIhDC,IAAeN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOfD,EAAOC,CAAQ;AAAA,mBACxB,CAAC,EAAE,aAAAM,GAAa,OAAAJ,EAAM,MACrCI,IAAc,aAAaJ,EAAM,OAAO,KAAK,KAAK,MAAM;AAAA;AAG/C,MAAAK,IAAOR,EAAOC,CAAQ;AAAA,iBAClB,CAAC,EAAE,aAAAQ,GAAa,OAAAN,EAAM,MACnCM,IAAc,SAAS,cAAcN,EAAM,OAAO,MAAM,EAAE;AAAA,oBAC1C,CAAC,EAAE,aAAAM,EAAA,MAAmBA,IAAc,MAAM,MAAO;AAAA;AAAA;AAAA;AAAA;"}
+{"version":3,"file":"daily-timeline-items-styled.js","sources":["../../../../../src/features/timeline/comps/daily-timeline-items/daily-timeline-items-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const SectionContainer = styled(FlexView)<{ $shouldAddBorder?: boolean }>`\n  border-bottom: ${({ $shouldAddBorder, theme }) =>\n    $shouldAddBorder ? `1px solid ${theme.colors.BLACK}` : 'none'};\n  will-change: border-bottom;\n`;\n\nexport const SectionFooter = styled(FlexView)<{ $isExpanded?: boolean }>`\n  border-top: none;\n  border-bottom: ${({ $isExpanded }) => $isExpanded && 'none'};\n  padding-bottom: 24px;\n  will-change: border-bottom;\n`;\n\nexport const TagContainer = styled(FlexView)`\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  z-index: 2;\n`;\n\nexport const Card = styled(FlexView)<{ $isLastCard: boolean }>`\n  border-left: ${({ $isLastCard, theme }) =>\n    $isLastCard ? 'none' : `1px dashed ${theme.colors.GREY_3}`};\n  padding-bottom: ${({ $isLastCard }) => ($isLastCard ? '0' : '20px')};\n  > div {\n    margin-left: -8px;\n  }\n`;\n"],"names":["SectionContainer","styled","FlexView","$shouldAddBorder","theme","SectionFooter","$isExpanded","TagContainer","Card","$isLastCard"],"mappings":";;AAIa,MAAAA,IAAmBC,EAAOC,CAAQ;AAAA,mBAC5B,CAAC,EAAE,kBAAAC,GAAkB,OAAAC,EAAM,MAC1CD,IAAmB,aAAaC,EAAM,OAAO,KAAK,KAAK,MAAM;AAAA;AAAA,GAIpDC,IAAgBJ,EAAOC,CAAQ;AAAA;AAAA,mBAEzB,CAAC,EAAE,aAAAI,QAAkBA,KAAe,MAAM;AAAA;AAAA;AAAA,GAKhDC,IAAeN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BM,IAAOP,EAAOC,CAAQ;AAAA,iBAClB,CAAC,EAAE,aAAAO,GAAa,OAAAL,EAAM,MACnCK,IAAc,SAAS,cAAcL,EAAM,OAAO,MAAM,EAAE;AAAA,oBAC1C,CAAC,EAAE,aAAAK,EAAA,MAAmBA,IAAc,MAAM,MAAO;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/timeline/comps/daily-timeline-items/daily-timeline-items.js

@@ -1,117 +1,112 @@
-import { jsx as e, jsxs as m, Fragment as y } from "react/jsx-runtime";
-import { memo as T, useState as A, useMemo as L, useCallback as w } from "react";
+import { jsx as e, jsxs as l, Fragment as A } from "react/jsx-runtime";
+import { memo as L, useState as $, useMemo as S, useCallback as B } from "react";
 import D from "../../../../assets/line-icons/icons/plus.js";
-import S from "../../../ui/accordion-section/accordion-section.js";
-import s from "../../../ui/layout/flex-view.js";
-import k from "../../../../assets/line-icons/icons/minus.js";
-import B from "../../../ui/image/image.js";
-import $ from "../../../ui/text/text.js";
-import N from "../accordion-item/accordion-item.js";
-import { SectionContainer as V, TagContainer as X, SectionFooter as j, Card as M } from "./daily-timeline-items-styled.js";
-import { getTimelineCardIcon as K } from "../utils.js";
-import { useUIContext as P } from "../../../ui/context/context.js";
-import { TIMELINE_EVENTS as f } from "../constants.js";
-const F = T((I) => {
+import k from "../../../ui/accordion-section/accordion-section.js";
+import m from "../../../ui/layout/flex-view.js";
+import N from "../../../../assets/line-icons/icons/minus.js";
+import V from "../../../ui/image/image.js";
+import I from "../../../ui/text/text.js";
+import X from "../accordion-item/accordion-item.js";
+import { SectionContainer as j, TagContainer as M, SectionFooter as K, Card as P } from "./daily-timeline-items-styled.js";
+import { getTimelineCardIcon as F } from "../utils.js";
+import { useUIContext as W } from "../../../ui/context/context.js";
+import { TIMELINE_EVENTS as E } from "../constants.js";
+const z = L((C) => {
   const {
-    type: t,
+    type: o,
     summary: i,
-    cards: r,
-    onPuzzleClick: E,
-    onReviewClick: C,
-    courseStream: l,
-    shouldShowTag: g,
-    userType: _,
-    isLastItem: d,
+    cards: n,
+    onPuzzleClick: g,
+    onReviewClick: _,
+    courseStream: d,
+    shouldShowTag: b,
+    userType: x,
+    isLastItem: r,
     fromDate: c,
     studentId: a
-  } = I, [n, b] = A(!1), p = L(() => K(t), [t]), { onEvent: h } = P(), x = w(
-    (o) => {
-      b(o), h(
-        o ? f.TIMELINE_VIEW_EXPANDED : f.TIMELINE_VIEW_COLLAPSED,
+  } = C, [h, T] = $(!1), [y, s] = $(r), u = S(() => F(o), [o]), { onEvent: p } = W(), w = B(
+    (t) => {
+      T(t), t ? s(!1) : r ? setTimeout(() => {
+        s(!0);
+      }, 220) : s(!1), p(
+        t ? E.TIMELINE_VIEW_EXPANDED : E.TIMELINE_VIEW_COLLAPSED,
         {
           timeline_date: c,
           student_id: a,
-          timeline_section_type: t,
+          timeline_section_type: o,
           timeline_section_subject: i
         },
         { mixpanel: !0 }
       );
     },
-    [c, h, a, t, i]
+    [c, p, a, o, i, r]
   );
   return /* @__PURE__ */ e(
-    S,
+    k,
     {
-      headerElement: /* @__PURE__ */ m(
-        V,
-        {
-          $borderColor: "BLACK_1",
-          $shouldAddBorder: d && !n,
-          children: [
-            g && l && /* @__PURE__ */ e(X, { $position: "absolute", $background: "BLACK_5", $gutter: 4, children: /* @__PURE__ */ e($, { $renderAs: "ab4-black", $color: "WHITE", children: l }) }),
-            /* @__PURE__ */ m(
-              s,
-              {
-                $flexDirection: "row",
-                $alignItems: "center",
-                $justifyContent: "space-between",
-                $heightX: 4,
-                $widthX: 30,
-                $gutterX: 1,
-                $gapX: 1.32,
-                children: [
-                  /* @__PURE__ */ m(
-                    s,
-                    {
-                      $flexDirection: "row",
-                      $alignItems: "center",
-                      $justifyContent: "center",
-                      $flexGapX: 1.125,
-                      children: [
-                        /* @__PURE__ */ e(s, { children: p && /* @__PURE__ */ e(B, { src: p }) }),
-                        /* @__PURE__ */ e($, { $renderAs: "ab2", $color: "BLACK_1", children: i ?? "" })
-                      ]
-                    }
-                  ),
-                  n ? /* @__PURE__ */ e(k, { width: 20, height: 20 }) : /* @__PURE__ */ e(D, { width: 20, height: 20 })
-                ]
-              }
-            )
-          ]
-        }
-      ),
-      bodyElement: r.length > 0 ? /* @__PURE__ */ e(
-        j,
+      headerElement: /* @__PURE__ */ l(j, { $borderColor: "BLACK_1", $shouldAddBorder: y, children: [
+        b && d && /* @__PURE__ */ e(M, { $position: "absolute", $background: "BLACK_5", $gutter: 4, children: /* @__PURE__ */ e(I, { $renderAs: "ab4-black", $color: "WHITE", children: d }) }),
+        /* @__PURE__ */ l(
+          m,
+          {
+            $flexDirection: "row",
+            $alignItems: "center",
+            $justifyContent: "space-between",
+            $heightX: 4,
+            $widthX: 30,
+            $gutterX: 1,
+            $gapX: 1.32,
+            children: [
+              /* @__PURE__ */ l(
+                m,
+                {
+                  $flexDirection: "row",
+                  $alignItems: "center",
+                  $justifyContent: "center",
+                  $flexGapX: 1.125,
+                  children: [
+                    /* @__PURE__ */ e(m, { children: u && /* @__PURE__ */ e(V, { src: u }) }),
+                    /* @__PURE__ */ e(I, { $renderAs: "ab2", $color: "BLACK_1", children: i ?? "" })
+                  ]
+                }
+              ),
+              h ? /* @__PURE__ */ e(N, { width: 20, height: 20 }) : /* @__PURE__ */ e(D, { width: 20, height: 20 })
+            ]
+          }
+        )
+      ] }),
+      bodyElement: n.length > 0 ? /* @__PURE__ */ e(
+        K,
         {
           $gutter: 32,
           $borderColor: "BLACK_1",
-          $isExpanded: n && !d,
-          children: r.map((o, u) => /* @__PURE__ */ e(
-            M,
+          $isExpanded: h && !r,
+          children: n.map((t, f) => /* @__PURE__ */ e(
+            P,
             {
-              $isLastCard: u === r.length - 1,
+              $isLastCard: f === n.length - 1,
               children: /* @__PURE__ */ e(
-                N,
+                X,
                 {
-                  card: o,
-                  onPuzzleClick: E,
-                  onReviewClick: C,
-                  type: t,
-                  userType: _
+                  card: t,
+                  onPuzzleClick: g,
+                  onReviewClick: _,
+                  type: o,
+                  userType: x
                 }
               )
             },
-            `${o.node_id}-${u}`
+            t.node_id ?? `card-${f}`
           ))
         }
-      ) : /* @__PURE__ */ e(y, {}),
+      ) : /* @__PURE__ */ e(A, {}),
       defaultVisible: !1,
-      onBodyVisibilityChange: x
+      onBodyVisibilityChange: w
     }
   );
 });
-F.displayName = "DailyTimelineItems";
+z.displayName = "DailyTimelineItems";
 export {
-  F as default
+  z as default
 };
 //# sourceMappingURL=daily-timeline-items.js.map

package/dist/features/timeline/comps/daily-timeline-items/daily-timeline-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"daily-timeline-items.js","sources":["../../../../../src/features/timeline/comps/daily-timeline-items/daily-timeline-items.tsx"],"sourcesContent":["import { memo, useCallback, useMemo, useState, type FC } from 'react';\n\nimport PlusIcon from '../../../../assets/line-icons/icons/plus';\nimport AccordionSection from '../../../ui/accordion-section/accordion-section';\nimport FlexView from '../../../ui/layout/flex-view';\nimport MinusIcon from '../../../../assets/line-icons/icons/minus';\nimport Image from '../../../ui/image/image';\nimport Text from '../../../ui/text/text';\nimport AccordionItem from '../accordion-item/accordion-item';\nimport * as Styled from './daily-timeline-items-styled';\nimport { getTimelineCardIcon } from '../utils';\nimport { type IDailyTimelineItemsProps } from './daily-timeline-items.types';\nimport { useUIContext } from '../../../ui/context/context';\nimport { TIMELINE_EVENTS } from '../constants';\n\nconst DailyTimelineItems: FC<IDailyTimelineItemsProps> = memo(props => {\n  const {\n    type,\n    summary,\n    cards,\n    onPuzzleClick,\n    onReviewClick,\n    courseStream,\n    shouldShowTag,\n    userType,\n    isLastItem,\n    fromDate,\n    studentId,\n  } = props;\n  const [isExpended, setIsExpended] = useState(false);\n\n  const timelineIcon = useMemo(() => getTimelineCardIcon(type), [type]);\n  const { onEvent: trackEvent } = useUIContext();\n\n  const handleExpand = useCallback(\n    (val: boolean) => {\n      setIsExpended(val);\n\n      trackEvent(\n        val ? TIMELINE_EVENTS.TIMELINE_VIEW_EXPANDED : TIMELINE_EVENTS.TIMELINE_VIEW_COLLAPSED,\n        {\n          timeline_date: fromDate,\n          student_id: studentId,\n          timeline_section_type: type,\n          timeline_section_subject: summary,\n        },\n        { mixpanel: true },\n      );\n    },\n    [fromDate, trackEvent, studentId, type, summary],\n  );\n\n  return (\n    <AccordionSection\n      headerElement={\n        <Styled.SectionContainer\n          $borderColor=\"BLACK_1\"\n          $shouldAddBorder={isLastItem && !isExpended}\n        >\n          {shouldShowTag && courseStream && (\n            <Styled.TagContainer $position=\"absolute\" $background=\"BLACK_5\" $gutter={4}>\n              <Text $renderAs=\"ab4-black\" $color=\"WHITE\">\n                {courseStream}\n              </Text>\n            </Styled.TagContainer>\n          )}\n          <FlexView\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $justifyContent=\"space-between\"\n            $heightX={4}\n            $widthX={30}\n            $gutterX={1}\n            $gapX={1.32}\n          >\n            <FlexView\n              $flexDirection=\"row\"\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n              $flexGapX={1.125}\n            >\n              <FlexView>{timelineIcon && <Image src={timelineIcon} />}</FlexView>\n              <Text $renderAs=\"ab2\" $color=\"BLACK_1\">\n                {summary ?? ''}\n              </Text>\n            </FlexView>\n            {isExpended ? (\n              <MinusIcon width={20} height={20} />\n            ) : (\n              <PlusIcon width={20} height={20} />\n            )}\n          </FlexView>\n        </Styled.SectionContainer>\n      }\n      bodyElement={\n        cards.length > 0 ? (\n          <Styled.SectionFooter\n            $gutter={32}\n            $borderColor={'BLACK_1'}\n            $isExpanded={isExpended && !isLastItem}\n          >\n            {cards.map((card, index) => (\n              <Styled.Card\n                key={`${card.node_id}-${index}`}\n                $isLastCard={index === cards.length - 1}\n              >\n                <AccordionItem\n                  card={card}\n                  onPuzzleClick={onPuzzleClick}\n                  onReviewClick={onReviewClick}\n                  type={type}\n                  userType={userType}\n                />\n              </Styled.Card>\n            ))}\n          </Styled.SectionFooter>\n        ) : (\n          <></>\n        )\n      }\n      defaultVisible={false}\n      onBodyVisibilityChange={handleExpand}\n    />\n  );\n});\n\nDailyTimelineItems.displayName = 'DailyTimelineItems';\n\nexport default DailyTimelineItems;\n"],"names":["DailyTimelineItems","memo","props","type","summary","cards","onPuzzleClick","onReviewClick","courseStream","shouldShowTag","userType","isLastItem","fromDate","studentId","isExpended","setIsExpended","useState","timelineIcon","useMemo","getTimelineCardIcon","trackEvent","useUIContext","handleExpand","useCallback","val","TIMELINE_EVENTS","jsx","AccordionSection","jsxs","Styled.SectionContainer","Styled.TagContainer","Text","FlexView","Image","MinusIcon","PlusIcon","Styled.SectionFooter","card","index","Styled.Card","AccordionItem","Fragment"],"mappings":"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"}
+{"version":3,"file":"daily-timeline-items.js","sources":["../../../../../src/features/timeline/comps/daily-timeline-items/daily-timeline-items.tsx"],"sourcesContent":["import { memo, useCallback, useMemo, useState, type FC } from 'react';\n\nimport PlusIcon from '../../../../assets/line-icons/icons/plus';\nimport AccordionSection from '../../../ui/accordion-section/accordion-section';\nimport FlexView from '../../../ui/layout/flex-view';\nimport MinusIcon from '../../../../assets/line-icons/icons/minus';\nimport Image from '../../../ui/image/image';\nimport Text from '../../../ui/text/text';\nimport AccordionItem from '../accordion-item/accordion-item';\nimport * as Styled from './daily-timeline-items-styled';\nimport { getTimelineCardIcon } from '../utils';\nimport { type IDailyTimelineItemsProps } from './daily-timeline-items.types';\nimport { useUIContext } from '../../../ui/context/context';\nimport { TIMELINE_EVENTS } from '../constants';\n\nconst DailyTimelineItems: FC<IDailyTimelineItemsProps> = memo(props => {\n  const {\n    type,\n    summary,\n    cards,\n    onPuzzleClick,\n    onReviewClick,\n    courseStream,\n    shouldShowTag,\n    userType,\n    isLastItem,\n    fromDate,\n    studentId,\n  } = props;\n  const [isExpended, setIsExpended] = useState(false);\n  const [shouldShowBorder, setShouldShowBorder] = useState(isLastItem);\n\n  const timelineIcon = useMemo(() => getTimelineCardIcon(type), [type]);\n  const { onEvent: trackEvent } = useUIContext();\n\n  const handleExpand = useCallback(\n    (val: boolean) => {\n      setIsExpended(val);\n\n      if (val) {\n        setShouldShowBorder(false);\n      } else {\n        if (isLastItem) {\n          setTimeout(() => {\n            setShouldShowBorder(true);\n          }, 220);\n        } else {\n          setShouldShowBorder(false);\n        }\n      }\n\n      trackEvent(\n        val ? TIMELINE_EVENTS.TIMELINE_VIEW_EXPANDED : TIMELINE_EVENTS.TIMELINE_VIEW_COLLAPSED,\n        {\n          timeline_date: fromDate,\n          student_id: studentId,\n          timeline_section_type: type,\n          timeline_section_subject: summary,\n        },\n        { mixpanel: true },\n      );\n    },\n    [fromDate, trackEvent, studentId, type, summary, isLastItem],\n  );\n\n  return (\n    <AccordionSection\n      headerElement={\n        <Styled.SectionContainer $borderColor=\"BLACK_1\" $shouldAddBorder={shouldShowBorder}>\n          {shouldShowTag && courseStream && (\n            <Styled.TagContainer $position=\"absolute\" $background=\"BLACK_5\" $gutter={4}>\n              <Text $renderAs=\"ab4-black\" $color=\"WHITE\">\n                {courseStream}\n              </Text>\n            </Styled.TagContainer>\n          )}\n          <FlexView\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $justifyContent=\"space-between\"\n            $heightX={4}\n            $widthX={30}\n            $gutterX={1}\n            $gapX={1.32}\n          >\n            <FlexView\n              $flexDirection=\"row\"\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n              $flexGapX={1.125}\n            >\n              <FlexView>{timelineIcon && <Image src={timelineIcon} />}</FlexView>\n              <Text $renderAs=\"ab2\" $color=\"BLACK_1\">\n                {summary ?? ''}\n              </Text>\n            </FlexView>\n            {isExpended ? (\n              <MinusIcon width={20} height={20} />\n            ) : (\n              <PlusIcon width={20} height={20} />\n            )}\n          </FlexView>\n        </Styled.SectionContainer>\n      }\n      bodyElement={\n        cards.length > 0 ? (\n          <Styled.SectionFooter\n            $gutter={32}\n            $borderColor={'BLACK_1'}\n            $isExpanded={isExpended && !isLastItem}\n          >\n            {cards.map((card, index) => (\n              <Styled.Card\n                key={card.node_id ?? `card-${index}`}\n                $isLastCard={index === cards.length - 1}\n              >\n                <AccordionItem\n                  card={card}\n                  onPuzzleClick={onPuzzleClick}\n                  onReviewClick={onReviewClick}\n                  type={type}\n                  userType={userType}\n                />\n              </Styled.Card>\n            ))}\n          </Styled.SectionFooter>\n        ) : (\n          <></>\n        )\n      }\n      defaultVisible={false}\n      onBodyVisibilityChange={handleExpand}\n    />\n  );\n});\n\nDailyTimelineItems.displayName = 'DailyTimelineItems';\n\nexport default DailyTimelineItems;\n"],"names":["DailyTimelineItems","memo","props","type","summary","cards","onPuzzleClick","onReviewClick","courseStream","shouldShowTag","userType","isLastItem","fromDate","studentId","isExpended","setIsExpended","useState","shouldShowBorder","setShouldShowBorder","timelineIcon","useMemo","getTimelineCardIcon","trackEvent","useUIContext","handleExpand","useCallback","val","TIMELINE_EVENTS","jsx","AccordionSection","Styled.SectionContainer","Styled.TagContainer","Text","jsxs","FlexView","Image","MinusIcon","PlusIcon","Styled.SectionFooter","card","index","Styled.Card","AccordionItem","Fragment"],"mappings":"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"}

package/dist/features/timeline/daily-timeline-styled.js

@@ -1,18 +1,21 @@
-import o from "styled-components";
-import t from "../ui/layout/flex-view.js";
-const l = o(t)`
+import i from "styled-components";
+import o from "../ui/layout/flex-view.js";
+const r = i(o)`
   overflow-y: auto;
   width: 100%;
-`, m = o(t)`
+  scroll-behavior: smooth;
+  will-change: height;
+`, h = i(o)`
   max-width: 512px;
   width: 100%;
-`, n = o(t)`
-  margin-top: ${({ $addedMonthBreak: i }) => i ? "-108px" : "0"};
+  will-change: height;
+`, a = i(o)`
+  margin-top: ${({ $addedMonthBreak: t }) => t ? "-108px" : "0"};
   z-index: 1;
 `;
 export {
-  n as DailyItems,
-  m as DailyTimelineContainer,
-  l as ScrollWrapper
+  a as DailyItems,
+  h as DailyTimelineContainer,
+  r as ScrollWrapper
 };
 //# sourceMappingURL=daily-timeline-styled.js.map

package/dist/features/timeline/daily-timeline-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"daily-timeline-styled.js","sources":["../../../src/features/timeline/daily-timeline-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../ui/layout/flex-view';\n\nconst ScrollWrapper = styled(FlexView)`\n  overflow-y: auto;\n  width: 100%;\n`;\n\nconst DailyTimelineContainer = styled(FlexView)`\n  max-width: 512px;\n  width: 100%;\n`;\n\nconst DailyItems = styled(FlexView)<{ $addedMonthBreak?: boolean }>`\n  margin-top: ${({ $addedMonthBreak }) =>\n    $addedMonthBreak\n      ? '-108px' // 64px card height + 16px(separator) + 16(date text) + 12(separator)\n      : '0'};\n  z-index: 1;\n`;\n\nexport { DailyTimelineContainer, DailyItems, ScrollWrapper };\n"],"names":["ScrollWrapper","styled","FlexView","DailyTimelineContainer","DailyItems","$addedMonthBreak"],"mappings":";;AAIM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK/BC,IAAyBF,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKxCE,IAAaH,EAAOC,CAAQ;AAAA,gBAClB,CAAC,EAAE,kBAAAG,EAAA,MACfA,IACI,WACA,GAAG;AAAA;AAAA;"}
+{"version":3,"file":"daily-timeline-styled.js","sources":["../../../src/features/timeline/daily-timeline-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../ui/layout/flex-view';\n\nconst ScrollWrapper = styled(FlexView)`\n  overflow-y: auto;\n  width: 100%;\n  scroll-behavior: smooth;\n  will-change: height;\n`;\n\nconst DailyTimelineContainer = styled(FlexView)`\n  max-width: 512px;\n  width: 100%;\n  will-change: height;\n`;\n\nconst DailyItems = styled(FlexView)<{ $addedMonthBreak?: boolean }>`\n  margin-top: ${({ $addedMonthBreak }) =>\n    $addedMonthBreak\n      ? '-108px' // 64px card height + 16px(separator) + 16(date text) + 12(separator)\n      : '0'};\n  z-index: 1;\n`;\n\nexport { DailyTimelineContainer, DailyItems, ScrollWrapper };\n"],"names":["ScrollWrapper","styled","FlexView","DailyTimelineContainer","DailyItems","$addedMonthBreak"],"mappings":";;AAIM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAO/BC,IAAyBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMxCE,IAAaH,EAAOC,CAAQ;AAAA,gBAClB,CAAC,EAAE,kBAAAG,EAAA,MACfA,IACI,WACA,GAAG;AAAA;AAAA;"}

package/dist/features/ui/accordion-section/accordion-section-styled.js

@@ -1,23 +1,26 @@
-import o from "styled-components";
-const r = o.div(({ $width: e }) => `
+import e from "styled-components";
+const r = e.div(({ $width: o }) => `
     position: relative;
     display: flex;
     flex-direction: Column;
-    width: ${e ?? "auto"}${typeof e == "number" ? "px" : ""};
-    `), i = o.div(() => `
+    width: ${o ?? "auto"}${typeof o == "number" ? "px" : ""};
+    contain: layout style;
+    `), i = e.div(() => `
     cursor: pointer;
     -webkit-user-select: none;
     -ms-user-select: none;
     user-select: none;
     overflow: hidden;
-  `), c = o.div(({ $visible: e, $overflow: n }) => `
+    contain: layout style;
+  `), c = e.div(({ $visible: o, $overflow: t }) => `
     position: relative;
-    max-height: ${e ? "1000vh" : 0};
-    overflow: ${n ?? "hidden"};
+    max-height: ${o ? "1000vh" : 0};
+    overflow: ${t ?? "hidden"};
     transform-origin: top;
-    transform: ${e ? "scaleY(1)" : "scaleY(0)"};
-    opacity: ${e ? 1 : 0};
+    transform: ${o ? "scaleY(1)" : "scaleY(0)"};
+    opacity: ${o ? 1 : 0};
     transition: all 0.2s ease-in-out;
+    will-change: transform, opacity, max-height;
   `);
 export {
   c as AccordionSectionBody,

package/dist/features/ui/accordion-section/accordion-section-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion-section-styled.js","sources":["../../../../src/features/ui/accordion-section/accordion-section-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport type { TStyleAttrubutes } from './accordion-section-types';\n\ninterface IAccordionSectionContainerProps {\n  $width?: string | number;\n}\n\nconst AccordionSectionContainer = styled.div<IAccordionSectionContainerProps>(({ $width }) => {\n  return `\n    position: relative;\n    display: flex;\n    flex-direction: Column;\n    width: ${$width ?? 'auto'}${typeof $width === 'number' ? 'px' : ''};\n    `;\n});\n\nconst AccordionSectionHeader = styled.div(() => {\n  return `\n    cursor: pointer;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    overflow: hidden;\n  `;\n});\n\ninterface IAccordionSectionBodyProps {\n  $visible?: boolean;\n  $overflow?: TStyleAttrubutes['overflow'];\n}\n\nconst AccordionSectionBody = styled.div<IAccordionSectionBodyProps>(({ $visible, $overflow }) => {\n  return `\n    position: relative;\n    max-height: ${$visible ? '1000vh' : 0};\n    overflow: ${$overflow ?? 'hidden'};\n    transform-origin: top;\n    transform: ${$visible ? 'scaleY(1)' : 'scaleY(0)'};\n    opacity: ${$visible ? 1 : 0};\n    transition: all 0.2s ease-in-out;\n  `;\n});\n\nexport { AccordionSectionContainer, AccordionSectionBody, AccordionSectionHeader };\n"],"names":["AccordionSectionContainer","styled","$width","AccordionSectionHeader","AccordionSectionBody","$visible","$overflow"],"mappings":";AAQA,MAAMA,IAA4BC,EAAO,IAAqC,CAAC,EAAE,QAAAC,QACxE;AAAA;AAAA;AAAA;AAAA,aAIIA,KAAU,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA,KAErE,GAEKC,IAAyBF,EAAO,IAAI,MACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAOR,GAOKG,IAAuBH,EAAO,IAAgC,CAAC,EAAE,UAAAI,GAAU,WAAAC,QACxE;AAAA;AAAA,kBAESD,IAAW,WAAW,CAAC;AAAA,gBACzBC,KAAa,QAAQ;AAAA;AAAA,iBAEpBD,IAAW,cAAc,WAAW;AAAA,eACtCA,IAAW,IAAI,CAAC;AAAA;AAAA,GAG9B;"}
+{"version":3,"file":"accordion-section-styled.js","sources":["../../../../src/features/ui/accordion-section/accordion-section-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport type { TStyleAttrubutes } from './accordion-section-types';\n\ninterface IAccordionSectionContainerProps {\n  $width?: string | number;\n}\n\nconst AccordionSectionContainer = styled.div<IAccordionSectionContainerProps>(({ $width }) => {\n  return `\n    position: relative;\n    display: flex;\n    flex-direction: Column;\n    width: ${$width ?? 'auto'}${typeof $width === 'number' ? 'px' : ''};\n    contain: layout style;\n    `;\n});\n\nconst AccordionSectionHeader = styled.div(() => {\n  return `\n    cursor: pointer;\n    -webkit-user-select: none;\n    -ms-user-select: none;\n    user-select: none;\n    overflow: hidden;\n    contain: layout style;\n  `;\n});\n\ninterface IAccordionSectionBodyProps {\n  $visible?: boolean;\n  $overflow?: TStyleAttrubutes['overflow'];\n}\n\nconst AccordionSectionBody = styled.div<IAccordionSectionBodyProps>(({ $visible, $overflow }) => {\n  return `\n    position: relative;\n    max-height: ${$visible ? '1000vh' : 0};\n    overflow: ${$overflow ?? 'hidden'};\n    transform-origin: top;\n    transform: ${$visible ? 'scaleY(1)' : 'scaleY(0)'};\n    opacity: ${$visible ? 1 : 0};\n    transition: all 0.2s ease-in-out;\n    will-change: transform, opacity, max-height;\n  `;\n});\n\nexport { AccordionSectionContainer, AccordionSectionBody, AccordionSectionHeader };\n"],"names":["AccordionSectionContainer","styled","$width","AccordionSectionHeader","AccordionSectionBody","$visible","$overflow"],"mappings":";AAQA,MAAMA,IAA4BC,EAAO,IAAqC,CAAC,EAAE,QAAAC,QACxE;AAAA;AAAA;AAAA;AAAA,aAIIA,KAAU,MAAM,GAAG,OAAOA,KAAW,WAAW,OAAO,EAAE;AAAA;AAAA,KAGrE,GAEKC,IAAyBF,EAAO,IAAI,MACjC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQR,GAOKG,IAAuBH,EAAO,IAAgC,CAAC,EAAE,UAAAI,GAAU,WAAAC,QACxE;AAAA;AAAA,kBAESD,IAAW,WAAW,CAAC;AAAA,gBACzBC,KAAa,QAAQ;AAAA;AAAA,iBAEpBD,IAAW,cAAc,WAAW;AAAA,eACtCA,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA,GAI9B;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cuemath/leap",
-  "version": "3.5.11-as2",
+  "version": "3.5.11-as3",
   "type": "module",
   "files": [
     "dist"