@cuemath/leap 3.0.7-hg1 → 3.0.7-hg3

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs.js

@@ -0,0 +1,134 @@
+import { jsx as t, jsxs as L, Fragment as H } from "react/jsx-runtime";
+import { memo as V, useState as X, useCallback as q } from "react";
+import z from "../../../../../chapters/chapters-list/chapters-list.js";
+import { useUIContext as J } from "../../../../../ui/context/context.js";
+import K from "../../../../../ui/text/text.js";
+import Q from "../../../../milestone-resources/resources-list/resources-list.js";
+import Y from "../../../../milestone-tests/test-list-v2/test-list-container.js";
+import { getGoalCategoryBasedColorTheme as Z } from "../milestone-utils.js";
+import { NoPlanCardWrapper as ee, TabsWrapper as te, TabsText as oe, TabComponentWrapper as se } from "./milestone-tabs-styled.js";
+const be = V((h) => {
+  var f;
+  const {
+    goalCategory: A,
+    isDraftMilestone: r,
+    isGoalCreation: I,
+    isMilestoneActive: l,
+    userMilestoneId: e,
+    chapters: c,
+    userType: d,
+    canUpdatePlan: m,
+    studentId: u,
+    milestoneState: R,
+    milestonePermissions: $,
+    activeMilestoneId: p,
+    activeTabId: k
+  } = h, {
+    onAddChapter: M,
+    onAssignResources: x,
+    onChapterClick: P,
+    onCreateMilestoneTest: U,
+    onNodeAttempt: j,
+    onNodeView: w,
+    onNodeReview: E,
+    onNodeReattempt: C,
+    onNodeReset: S,
+    onNodeUnassign: W,
+    onTestPreview: _,
+    onTestReview: y,
+    onTestStart: B,
+    onWidgetTabSelection: a
+  } = h, { visible_tabs: T } = $, { onEvent: g } = J(), { backgroundColor: D } = Z(A, r), b = {
+    chapters: {
+      label: "Chapters",
+      component: /* @__PURE__ */ t(
+        z,
+        {
+          milestoneId: e,
+          chapters: c,
+          userType: d,
+          isGoalCreation: I,
+          onChapterClick: P,
+          onAddChapter: M,
+          canUpdatePlan: !!(R !== "DRAFT" && m),
+          isMilestoneActive: l
+        }
+      )
+    },
+    tests: {
+      label: "Tests",
+      component: /* @__PURE__ */ t(
+        Y,
+        {
+          isDraftMilestone: r,
+          isChaptersAvailable: c.length > 0,
+          isMilestoneActive: l,
+          studentId: u,
+          userMilestoneId: e,
+          userType: d,
+          canUpdatePlan: m,
+          onCreateMilestoneTest: U,
+          onNodeReattempt: C,
+          onTestPreview: _,
+          onTestStart: B,
+          onTestReview: y
+        }
+      )
+    },
+    resources: {
+      label: "Resources",
+      component: /* @__PURE__ */ t(
+        Q,
+        {
+          isDraftMilestone: r,
+          isMilestoneActive: l,
+          userMilestoneId: e,
+          canUpdatePlan: m,
+          studentId: u,
+          userType: d,
+          onAssignResources: x,
+          onNodeAttempt: j,
+          onNodeView: w,
+          onNodeReview: E,
+          onNodeReattempt: C,
+          onNodeReset: S,
+          onNodeUnassign: W
+        }
+      )
+    }
+  }, s = (T ?? []).length === 0 ? Object.entries(b) : Object.entries(b).filter(
+    ([o]) => (T ?? []).includes(o.toUpperCase())
+  ), [i, F] = X(
+    e === p ? k : ((f = s == null ? void 0 : s[0]) == null ? void 0 : f[0]) || "chapters"
+  ), G = q(
+    (o, n) => {
+      if (p === e && o === i) return null;
+      F(o), a == null || a(e, o), g("clicked", {
+        cta: n,
+        milestone_id: e
+      });
+    },
+    [p, e, i, a, g]
+  );
+  return r && c.length === 0 ? /* @__PURE__ */ t(ee, { $gutterX: 2, $background: "WHITE_3", children: /* @__PURE__ */ t(K, { $renderAs: "ab2", $color: "RED", children: "No chapter has been assigned" }) }) : /* @__PURE__ */ L(H, { children: [
+    /* @__PURE__ */ t(te, { $backgroundColor: D, $frames: s.length, children: s.map((o) => {
+      const [n, O] = o, { label: v } = O, N = n === i;
+      return /* @__PURE__ */ t(
+        oe,
+        {
+          $renderAs: N ? "ub3-bold" : "ub3",
+          $align: "center",
+          $selected: N,
+          onClick: () => G(n, v),
+          children: v
+        },
+        n
+      );
+    }) }),
+    /* @__PURE__ */ t(se, { children: b[i].component })
+  ] });
+});
+export {
+  be as default
+};
+//# sourceMappingURL=milestone-tabs.js.map

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"milestone-tabs.js","sources":["../../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-tabs/milestone-tabs.tsx"],"sourcesContent":["import type { IMilestoneTabConfig, IMilestoneTabsProps } from './milestone-tabs-types';\nimport type { FC } from 'react';\n\nimport { memo, useCallback, useState } from 'react';\n\nimport ChaptersList from '../../../../../chapters/chapters-list/chapters-list';\nimport { useUIContext } from '../../../../../ui/context/context';\nimport Text from '../../../../../ui/text/text';\nimport MilestoneWidgetResources from '../../../../milestone-resources/resources-list/resources-list';\nimport MilestoneTestsList from '../../../../milestone-tests/test-list-v2/test-list-container';\nimport { getGoalCategoryBasedColorTheme } from '../milestone-utils';\nimport * as Styled from './milestone-tabs-styled';\n\nconst MilestoneTabs: FC<IMilestoneTabsProps> = memo(props => {\n  const {\n    goalCategory,\n    isDraftMilestone,\n    isGoalCreation,\n    isMilestoneActive,\n    userMilestoneId,\n    chapters,\n    userType,\n    canUpdatePlan,\n    studentId,\n    milestoneState,\n    milestonePermissions,\n    activeMilestoneId,\n    activeTabId,\n  } = props;\n  const {\n    onAddChapter,\n    onAssignResources,\n    onChapterClick,\n    onCreateMilestoneTest,\n    onNodeAttempt,\n    onNodeView,\n    onNodeReview,\n    onNodeReattempt,\n    onNodeReset,\n    onNodeUnassign,\n    onTestPreview,\n    onTestReview,\n    onTestStart,\n    onWidgetTabSelection,\n  } = props;\n  const { visible_tabs: visibleTabs } = milestonePermissions;\n  const { onEvent: trackEvent } = useUIContext();\n\n  const { backgroundColor } = getGoalCategoryBasedColorTheme(goalCategory, isDraftMilestone);\n\n  const TAB_CONFIG: IMilestoneTabConfig = {\n    chapters: {\n      label: 'Chapters',\n      component: (\n        <ChaptersList\n          milestoneId={userMilestoneId}\n          chapters={chapters}\n          userType={userType}\n          isGoalCreation={isGoalCreation}\n          onChapterClick={onChapterClick}\n          onAddChapter={onAddChapter}\n          canUpdatePlan={Boolean(milestoneState !== 'DRAFT' && canUpdatePlan)}\n          isMilestoneActive={isMilestoneActive}\n        />\n      ),\n    },\n    tests: {\n      label: 'Tests',\n      component: (\n        <MilestoneTestsList\n          isDraftMilestone={isDraftMilestone}\n          isChaptersAvailable={chapters.length > 0}\n          isMilestoneActive={isMilestoneActive}\n          studentId={studentId}\n          userMilestoneId={userMilestoneId}\n          userType={userType}\n          canUpdatePlan={canUpdatePlan}\n          onCreateMilestoneTest={onCreateMilestoneTest}\n          onNodeReattempt={onNodeReattempt}\n          onTestPreview={onTestPreview}\n          onTestStart={onTestStart}\n          onTestReview={onTestReview}\n        />\n      ),\n    },\n    resources: {\n      label: 'Resources',\n      component: (\n        <MilestoneWidgetResources\n          isDraftMilestone={isDraftMilestone}\n          isMilestoneActive={isMilestoneActive}\n          userMilestoneId={userMilestoneId}\n          canUpdatePlan={canUpdatePlan}\n          studentId={studentId}\n          userType={userType}\n          onAssignResources={onAssignResources}\n          onNodeAttempt={onNodeAttempt}\n          onNodeView={onNodeView}\n          onNodeReview={onNodeReview}\n          onNodeReattempt={onNodeReattempt}\n          onNodeReset={onNodeReset}\n          onNodeUnassign={onNodeUnassign}\n        />\n      ),\n    },\n  };\n\n  const filteredTabConfig =\n    (visibleTabs ?? []).length === 0\n      ? Object.entries(TAB_CONFIG)\n      : Object.entries(TAB_CONFIG).filter(([tabName]) =>\n          (visibleTabs ?? []).includes(tabName.toUpperCase()),\n        );\n  const [selectedTabName, setSelectedTabName] = useState(\n    userMilestoneId === activeMilestoneId ? activeTabId : filteredTabConfig?.[0]?.[0] || 'chapters',\n  );\n\n  const handleTabChange = useCallback(\n    (tabName: keyof IMilestoneTabConfig, ctaLabel: string) => {\n      if (activeMilestoneId === userMilestoneId && tabName === selectedTabName) return null;\n\n      setSelectedTabName(tabName);\n\n      onWidgetTabSelection?.(userMilestoneId, tabName);\n\n      trackEvent('clicked', {\n        cta: ctaLabel,\n        milestone_id: userMilestoneId,\n      });\n    },\n    [activeMilestoneId, userMilestoneId, selectedTabName, onWidgetTabSelection, trackEvent],\n  );\n\n  if (isDraftMilestone && chapters.length === 0) {\n    return (\n      <Styled.NoPlanCardWrapper $gutterX={2} $background=\"WHITE_3\">\n        <Text $renderAs=\"ab2\" $color=\"RED\">\n          No chapter has been assigned\n        </Text>\n      </Styled.NoPlanCardWrapper>\n    );\n  }\n\n  return (\n    <>\n      <Styled.TabsWrapper $backgroundColor={backgroundColor} $frames={filteredTabConfig.length}>\n        {filteredTabConfig.map(tabConfig => {\n          const [tabName, tabInfo] = tabConfig;\n          const { label } = tabInfo;\n          const isSelected = tabName === selectedTabName;\n\n          return (\n            <Styled.TabsText\n              $renderAs={isSelected ? 'ub3-bold' : 'ub3'}\n              $align=\"center\"\n              key={tabName}\n              $selected={isSelected}\n              onClick={() => handleTabChange(tabName as keyof IMilestoneTabConfig, label)}\n            >\n              {label}\n            </Styled.TabsText>\n          );\n        })}\n      </Styled.TabsWrapper>\n\n      <Styled.TabComponentWrapper>\n        {TAB_CONFIG[selectedTabName as keyof typeof TAB_CONFIG].component}\n      </Styled.TabComponentWrapper>\n    </>\n  );\n});\n\nexport default MilestoneTabs;\n"],"names":["MilestoneTabs","memo","props","goalCategory","isDraftMilestone","isGoalCreation","isMilestoneActive","userMilestoneId","chapters","userType","canUpdatePlan","studentId","milestoneState","milestonePermissions","activeMilestoneId","activeTabId","onAddChapter","onAssignResources","onChapterClick","onCreateMilestoneTest","onNodeAttempt","onNodeView","onNodeReview","onNodeReattempt","onNodeReset","onNodeUnassign","onTestPreview","onTestReview","onTestStart","onWidgetTabSelection","visibleTabs","trackEvent","useUIContext","backgroundColor","getGoalCategoryBasedColorTheme","TAB_CONFIG","jsx","ChaptersList","MilestoneTestsList","MilestoneWidgetResources","filteredTabConfig","tabName","selectedTabName","setSelectedTabName","useState","_a","handleTabChange","useCallback","ctaLabel","Styled.NoPlanCardWrapper","Text","jsxs","Fragment","Styled.TabsWrapper","tabConfig","tabInfo","label","isSelected","Styled.TabsText","Styled.TabComponentWrapper"],"mappings":"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"}

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-utils.js

@@ -0,0 +1,30 @@
+import { h as e } from "../../../../../node_modules/humanize-plus/dist/humanize.js";
+import { GOAL_CATEGORY as t } from "../../../constants.js";
+import { differenceInCalendarDays as n } from "../../../../../node_modules/date-fns/differenceInCalendarDays.js";
+const { SCHOOL_SUCCESS: l, TEST_PREP: a, ENRICHMENT: C } = t, d = (r) => {
+  if (r === "OUTCOME_PENDING")
+    return {
+      placement: "right",
+      progressBackgroundColor: "RED",
+      statusBackgroundColor: "RED",
+      statusBorderColor: "WHITE",
+      label: "Outcome pending"
+    };
+  if (r === "OUTCOME_ADDED")
+    return {
+      placement: "right",
+      progressBackgroundColor: "GREEN_5",
+      statusBackgroundColor: "GREEN_5",
+      statusBorderColor: "BLACK_T_87",
+      label: ""
+    };
+}, i = (r, o) => o ? { backgroundColor: "WHITE_2", borderColor: "WHITE_5" } : r === l ? { textColor: "PURPLE_5", backgroundColor: "PURPLE_1", borderColor: "PURPLE_2" } : r === a ? { textColor: "BLUE_5", backgroundColor: "BLUE_1", borderColor: "BLUE_2" } : r === C ? { textColor: "ORANGE_5", backgroundColor: "ORANGE_1", borderColor: "ORANGE_2" } : { backgroundColor: "WHITE_2", borderColor: "WHITE_5" }, _ = (r) => {
+  const o = n(r * 1e3, Date.now());
+  return o < 0 ? "" : `, ${o} ${e.pluralize(o, "day")} left`;
+};
+export {
+  i as getGoalCategoryBasedColorTheme,
+  d as getMilestoneWidgetStatusInfo,
+  _ as getRemainingDaysToCompleteGoal
+};
+//# sourceMappingURL=milestone-utils.js.map

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"milestone-utils.js","sources":["../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-utils.ts"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\nimport type { TMilestoneStates, TOutcomeLabel } from '../milestone-list-types';\n\nimport { differenceInCalendarDays } from 'date-fns';\nimport { pluralize } from 'humanize-plus';\n\nimport { GOAL_CATEGORY } from '../../../constants';\n\nconst { SCHOOL_SUCCESS, TEST_PREP, ENRICHMENT } = GOAL_CATEGORY;\n\nconst formatOutcomeValue = (\n  name: TOutcomeLabel,\n  value: string | number,\n  max: string | number | null,\n): string | number => {\n  switch (name) {\n    case 'score':\n      if (max) return `${value}/${max}`;\n\n      return `${value}`;\n    case 'level':\n    case 'gpa':\n      return `${value}(Max ${max})`;\n    case 'percentage':\n      return `${value}%`;\n    case 'percentile':\n      return `${value}th`;\n    default:\n      return value;\n  }\n};\n\ninterface IGetOutcomeStatusInfo {\n  (milestoneState: TMilestoneStates):\n    | {\n        placement: string;\n        progressBackgroundColor: TColorNames;\n        statusBackgroundColor: TColorNames;\n        statusBorderColor: TColorNames;\n        label: string;\n      }\n    | undefined;\n}\n\nconst getMilestoneWidgetStatusInfo: IGetOutcomeStatusInfo = milestoneState => {\n  if (milestoneState === 'OUTCOME_PENDING') {\n    return {\n      placement: 'right',\n      progressBackgroundColor: 'RED',\n      statusBackgroundColor: 'RED',\n      statusBorderColor: 'WHITE',\n      label: 'Outcome pending',\n    };\n  }\n\n  if (milestoneState === 'OUTCOME_ADDED') {\n    return {\n      placement: 'right',\n      progressBackgroundColor: 'GREEN_5',\n      statusBackgroundColor: 'GREEN_5',\n      statusBorderColor: 'BLACK_T_87',\n      label: '',\n    };\n  }\n\n  return undefined;\n};\n\ninterface IGetGoalCategoryBasedColorTheme {\n  (\n    category: string | null,\n    isDraftMilestone?: boolean,\n    isOutcomeAdded?: boolean,\n  ): {\n    backgroundColor: TColorNames;\n    borderColor: TColorNames;\n    textColor?: TColorNames;\n  };\n}\n\nconst getGoalCategoryBasedColorTheme: IGetGoalCategoryBasedColorTheme = (\n  category,\n  isDraftMilestone,\n) => {\n  if (isDraftMilestone) return { backgroundColor: 'WHITE_2', borderColor: 'WHITE_5' };\n\n  if (category === SCHOOL_SUCCESS) {\n    return { textColor: 'PURPLE_5', backgroundColor: 'PURPLE_1', borderColor: 'PURPLE_2' };\n  }\n\n  if (category === TEST_PREP) {\n    return { textColor: 'BLUE_5', backgroundColor: 'BLUE_1', borderColor: 'BLUE_2' };\n  }\n\n  if (category === ENRICHMENT) {\n    return { textColor: 'ORANGE_5', backgroundColor: 'ORANGE_1', borderColor: 'ORANGE_2' };\n  }\n\n  return { backgroundColor: 'WHITE_2', borderColor: 'WHITE_5' };\n};\n\nconst getRemainingDaysToCompleteGoal = (dueDate: number) => {\n  const remainingDays: number = differenceInCalendarDays(dueDate * 1000, Date.now());\n\n  if (remainingDays < 0) return '';\n\n  return `, ${remainingDays} ${pluralize(remainingDays, 'day')} left`;\n};\n\nexport {\n  formatOutcomeValue,\n  getMilestoneWidgetStatusInfo,\n  getGoalCategoryBasedColorTheme,\n  getRemainingDaysToCompleteGoal,\n};\n"],"names":["SCHOOL_SUCCESS","TEST_PREP","ENRICHMENT","GOAL_CATEGORY","getMilestoneWidgetStatusInfo","milestoneState","getGoalCategoryBasedColorTheme","category","isDraftMilestone","getRemainingDaysToCompleteGoal","dueDate","remainingDays","differenceInCalendarDays","pluralize"],"mappings":";;;AAQA,MAAM,EAAE,gBAAAA,GAAgB,WAAAC,GAAW,YAAAC,EAAA,IAAeC,GAoC5CC,IAAsD,CAAkBC,MAAA;AAC5E,MAAIA,MAAmB;AACd,WAAA;AAAA,MACL,WAAW;AAAA,MACX,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB,mBAAmB;AAAA,MACnB,OAAO;AAAA,IAAA;AAIX,MAAIA,MAAmB;AACd,WAAA;AAAA,MACL,WAAW;AAAA,MACX,yBAAyB;AAAA,MACzB,uBAAuB;AAAA,MACvB,mBAAmB;AAAA,MACnB,OAAO;AAAA,IAAA;AAKb,GAcMC,IAAkE,CACtEC,GACAC,MAEIA,IAAyB,EAAE,iBAAiB,WAAW,aAAa,cAEpED,MAAaP,IACR,EAAE,WAAW,YAAY,iBAAiB,YAAY,aAAa,eAGxEO,MAAaN,IACR,EAAE,WAAW,UAAU,iBAAiB,UAAU,aAAa,aAGpEM,MAAaL,IACR,EAAE,WAAW,YAAY,iBAAiB,YAAY,aAAa,eAGrE,EAAE,iBAAiB,WAAW,aAAa,UAAU,GAGxDO,IAAiC,CAACC,MAAoB;AAC1D,QAAMC,IAAwBC,EAAyBF,IAAU,KAAM,KAAK,KAAK;AAE7E,SAAAC,IAAgB,IAAU,KAEvB,KAAKA,CAAa,IAAIE,EAAU,UAAAF,GAAe,KAAK,CAAC;AAC9D;"}

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.js

@@ -0,0 +1,158 @@
+import r, { keyframes as x } from "styled-components";
+import g from "../../../../../assets/line-icons/icons/chevron-down.js";
+import $ from "../../../../../assets/line-icons/icons/info.js";
+import i from "../../../../ui/layout/flex-view.js";
+import s from "../../../../ui/text/text.js";
+const f = x`
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+`, v = r(i)`
+  position: relative;
+  animation: ${f} 0.3s ease-in-out;
+`, k = r(g)(({ theme: o, $expanded: t }) => {
+  const {
+    layout: { gutter: e },
+    colors: { BLACK_1: n }
+  } = o;
+  return `
+    cursor: pointer;
+    width: ${e * 1.5}px;
+    height: ${e * 1.5}px;
+    outline: 1px solid ${n};
+    border-radius: 50%;
+    transform: rotate(${t === !0 ? 180 : 0}deg);
+    transition: transform 0.3s ease;
+  `;
+}), C = r.div(({ $expanded: o, theme: t }) => {
+  const { colors: e } = t;
+  return `
+    display:grid;
+    grid-template-rows:${o ? 1 : 0}fr;
+    overflow:hidden;
+    transition:grid-template-rows 200ms;
+    border: 1px solid ${e.GREY_2};
+    border-top:none;
+  `;
+}), I = r.div`
+  min-height: 0px;
+  width: 100%;
+`;
+r.div(({ theme: o }) => {
+  const {
+    layout: { gutter: t }
+  } = o;
+  return `
+    padding: ${t * 2}px;
+  `;
+});
+r($)(
+  () => `
+    position: relative;
+    cursor: pointer;
+  `
+);
+r.div(({ theme: o }) => {
+  const {
+    layout: { gutter: t }
+  } = o;
+  return `
+    padding:${t}px;
+    display: grid;
+    gap:0px;
+    grid-template-rows: 1fr ${t * 1.75}px 1fr ${t * 1.75}px 1fr;
+    grid-template-columns: ${t * 4}px ${t * 5}px ${t * 6.375}px ${t * 10.25}px;
+    width:${t * 28}px;
+    align-items:center;
+  `;
+});
+r.div(({ theme: o, $rotate: t }) => {
+  const {
+    layout: { gutter: e }
+  } = o;
+  return `
+    grid-column: span 4;
+    padding-left: ${e * 1.5}px;
+    & img {
+      transform: rotate(${t ? 180 : 0}deg);
+    }
+  `;
+});
+const _ = r(i)`
+  border-bottom: 0px;
+  position: relative;
+  padding: 32px 32px 24px;
+  cursor: pointer;
+`;
+r(s)`
+  white-space: pre-wrap;
+`;
+const A = r(s)`
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+r(i)`
+  position: relative;
+  z-index: 1;
+`;
+r(i)(({
+  $placement: o,
+  theme: t
+}) => `
+    position: absolute;
+    top: ${t.layout.gutter * 1.75 / 2}px;
+    ${o === "right" ? "right: 0px;" : "left: 0px;"}
+  `);
+const D = r.div(({ theme: o }) => {
+  const { layout: t } = o;
+  return `
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    z-index: 2;
+
+    width: ${t.gutter * 1.25}px;
+    height: ${t.gutter * 1.25}px;
+    border-radius: 50%;
+    background: ${o.colors.WHITE_1};
+    outline: 1px solid ${o.colors.BLACK_1};
+  `;
+}), G = r.svg(() => `
+    position: absolute;
+    inset: 50%;
+    transform: translate(-50%, -50%) rotate(-90deg);
+  `), S = r.circle(
+  ({ theme: o, $progressCircle: t, $progress: e, $progressBackground: n }) => {
+    const { colors: p, layout: l } = o, { GREY_2: c } = p, { gutter: a } = l, d = a * 12.5, u = t ? d - e : e;
+    return `
+      stroke-dasharray: ${d};
+      stroke-dashoffset: ${u};
+      stroke: ${t ? p[n || "BLACK"] : c};
+
+      stroke-width: ${a * 0.125}px;
+      fill: none;
+    `;
+  }
+);
+r(s)(({ theme: o, $backgroundColor: t }) => `
+    padding: 4px;
+    background: ${o.colors[t]};
+  `);
+export {
+  G as ChapterProgressSVG,
+  S as ChapterProgressSVGCircle,
+  I as Content,
+  C as ContentWrapper,
+  v as MainContainer,
+  A as MilestoneTitle,
+  D as StyledCheckIconWrapper,
+  k as StyledDownIcon,
+  _ as Wrapper
+};
+//# sourceMappingURL=milestone-widget-styled.js.map

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"milestone-widget-styled.js","sources":["../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.tsx"],"sourcesContent":["import type { TColorNames } from '../../../../ui/types';\n\nimport styled, { keyframes } from 'styled-components';\n\nimport ChevronDownIcon from '../../../../../assets/line-icons/icons/chevron-down';\nimport InfoIcon from '../../../../../assets/line-icons/icons/info';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\n\ninterface IContentWrapperProps {\n  $expanded: boolean;\n}\n\ninterface IStyledDownIconProps {\n  $expanded: boolean;\n}\n\nconst fadeIn = keyframes`\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n`;\n\nconst MainContainer = styled(FlexView)`\n  position: relative;\n  animation: ${fadeIn} 0.3s ease-in-out;\n`;\n\nconst StyledDownIcon = styled(ChevronDownIcon)<IStyledDownIconProps>(({ theme, $expanded }) => {\n  const {\n    layout: { gutter },\n    colors: { BLACK_1 },\n  } = theme;\n\n  return `\n    cursor: pointer;\n    width: ${gutter * 1.5}px;\n    height: ${gutter * 1.5}px;\n    outline: 1px solid ${BLACK_1};\n    border-radius: 50%;\n    transform: rotate(${$expanded === true ? 180 : 0}deg);\n    transition: transform 0.3s ease;\n  `;\n});\n\nconst ContentWrapper = styled.div<IContentWrapperProps>(({ $expanded, theme }) => {\n  const { colors } = theme;\n\n  return `\n    display:grid;\n    grid-template-rows:${$expanded ? 1 : 0}fr;\n    overflow:hidden;\n    transition:grid-template-rows 200ms;\n    border: 1px solid ${colors.GREY_2};\n    border-top:none;\n  `;\n});\n\nconst Content = styled.div`\n  min-height: 0px;\n  width: 100%;\n`;\n\nconst HelpWrapper = styled.div(({ theme }) => {\n  const {\n    layout: { gutter },\n  } = theme;\n\n  return `\n    padding: ${gutter * 2}px;\n  `;\n});\n\nconst StyledInfoIcon = styled(InfoIcon)(\n  () => `\n    position: relative;\n    cursor: pointer;\n  `,\n);\n\nconst LessonsInfoWrapper = styled.div(({ theme }) => {\n  const {\n    layout: { gutter },\n  } = theme;\n\n  return `\n    padding:${gutter}px;\n    display: grid;\n    gap:0px;\n    grid-template-rows: 1fr ${gutter * 1.75}px 1fr ${gutter * 1.75}px 1fr;\n    grid-template-columns: ${gutter * 4}px ${gutter * 5}px ${gutter * 6.375}px ${gutter * 10.25}px;\n    width:${gutter * 28}px;\n    align-items:center;\n  `;\n});\n\nconst UpArrowWrapper = styled.div<{ $rotate: boolean }>(({ theme, $rotate }) => {\n  const {\n    layout: { gutter },\n  } = theme;\n\n  return `\n    grid-column: span 4;\n    padding-left: ${gutter * 1.5}px;\n    & img {\n      transform: rotate(${$rotate ? 180 : 0}deg);\n    }\n  `;\n});\n\nconst Wrapper = styled(FlexView)`\n  border-bottom: 0px;\n  position: relative;\n  padding: 32px 32px 24px;\n  cursor: pointer;\n`;\n\nconst SpacedText = styled(Text)`\n  white-space: pre-wrap;\n`;\n\nconst MilestoneTitle = styled(Text)`\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n  -webkit-line-clamp: 2;\n  text-overflow: ellipsis;\n  overflow: hidden;\n`;\n\nconst MilestoneWidgetStatusWrapper = styled(FlexView)`\n  position: relative;\n  z-index: 1;\n`;\n\ninterface IMilestoneWidgetStatusTag {\n  $placement: string;\n}\n\nconst MilestoneWidgetStatusTag = styled(FlexView)<IMilestoneWidgetStatusTag>(({\n  $placement,\n  theme,\n}) => {\n  return `\n    position: absolute;\n    top: ${(theme.layout.gutter * 1.75) / 2}px;\n    ${$placement === 'right' ? 'right: 0px;' : 'left: 0px;'}\n  `;\n});\n\nconst StyledCheckIconWrapper = styled.div(({ theme }) => {\n  const { layout } = theme;\n\n  return `\n    position: absolute;\n    top: 0px;\n    right: 0px;\n    z-index: 2;\n\n    width: ${layout.gutter * 1.25}px;\n    height: ${layout.gutter * 1.25}px;\n    border-radius: 50%;\n    background: ${theme.colors.WHITE_1};\n    outline: 1px solid ${theme.colors.BLACK_1};\n  `;\n});\n\nconst ChapterProgressSVG = styled.svg(() => {\n  return `\n    position: absolute;\n    inset: 50%;\n    transform: translate(-50%, -50%) rotate(-90deg);\n  `;\n});\n\ninterface IChapterProgressSVGCircleProps {\n  $progressCircle?: boolean;\n  $progress: number;\n  $progressBackground?: TColorNames;\n}\n\nconst ChapterProgressSVGCircle = styled.circle<IChapterProgressSVGCircleProps>(\n  ({ theme, $progressCircle, $progress, $progressBackground }) => {\n    const { colors, layout } = theme;\n    const { GREY_2 } = colors;\n    const { gutter } = layout;\n\n    const strokeDashArray = gutter * 12.5;\n    const strokeDashOffset = $progressCircle ? strokeDashArray - $progress : $progress;\n\n    return `\n      stroke-dasharray: ${strokeDashArray};\n      stroke-dashoffset: ${strokeDashOffset};\n      stroke: ${$progressCircle ? colors[$progressBackground || 'BLACK'] : GREY_2};\n\n      stroke-width: ${gutter * 0.125}px;\n      fill: none;\n    `;\n  },\n);\n\ninterface IWidgetStateTag {\n  $backgroundColor: TColorNames;\n}\n\nconst WidgetStateTag = styled(Text)<IWidgetStateTag>(({ theme, $backgroundColor }) => {\n  return `\n    padding: 4px;\n    background: ${theme.colors[$backgroundColor]};\n  `;\n});\n\nexport {\n  Content,\n  ContentWrapper,\n  HelpWrapper,\n  LessonsInfoWrapper,\n  MainContainer,\n  SpacedText,\n  StyledDownIcon,\n  StyledInfoIcon,\n  UpArrowWrapper,\n  Wrapper,\n  MilestoneTitle,\n  MilestoneWidgetStatusWrapper,\n  MilestoneWidgetStatusTag,\n  StyledCheckIconWrapper,\n  ChapterProgressSVG,\n  ChapterProgressSVGCircle,\n  WidgetStateTag,\n};\n"],"names":["fadeIn","keyframes","MainContainer","styled","FlexView","StyledDownIcon","ChevronDownIcon","theme","$expanded","gutter","BLACK_1","ContentWrapper","colors","Content","InfoIcon","$rotate","Wrapper","Text","MilestoneTitle","$placement","StyledCheckIconWrapper","layout","ChapterProgressSVG","ChapterProgressSVGCircle","$progressCircle","$progress","$progressBackground","GREY_2","strokeDashArray","strokeDashOffset","$backgroundColor"],"mappings":"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"}

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget.js

@@ -0,0 +1,128 @@
+import { jsxs as Z, jsx as o } from "react/jsx-runtime";
+import { memo as ee, useState as oe, useCallback as f, useEffect as te } from "react";
+import ne from "../../../../ui/layout/flex-view.js";
+import se from "./milestone-info.js";
+import ae from "./milestone-tabs/milestone-tabs.js";
+import { getGoalCategoryBasedColorTheme as ie } from "./milestone-utils.js";
+import { MainContainer as re, Wrapper as de, ContentWrapper as le, Content as ce } from "./milestone-widget-styled.js";
+const Te = ee((h) => {
+  const { milestone: s, studentId: a, isMilestoneActive: i, ...T } = h, {
+    isStudentPresent: E,
+    isClassOngoing: M,
+    userType: r,
+    studentName: x,
+    parentName: A,
+    teacherName: N,
+    courseStream: _,
+    activeMilestoneId: d,
+    activeTabId: b,
+    onAddOutcome: D,
+    onChapterClick: I,
+    onEdit: P,
+    onCreateMilestoneTest: R,
+    onDraftPublish: W,
+    onAddChapter: $,
+    onAssignResources: v,
+    onNodeAttempt: w,
+    onNodeView: S,
+    onNodeReview: k,
+    onNodeReattempt: y,
+    onNodeReset: O,
+    onNodeUnassign: B,
+    onWidgetTabSelection: G,
+    //* Test sheet callbacks
+    onTestPreview: V,
+    onTestReview: F,
+    onTestStart: U,
+    milestoneType: j
+  } = T, {
+    id: l,
+    user_milestone_plan: c,
+    outcome_data: X,
+    milestone_state: t,
+    permissions: m,
+    goal_code: p,
+    goal_category: g
+  } = s, [u, n] = oe(
+    i && t === "ACTIVE" || j === "DRAFT"
+  ), Y = !!c, { can_update_plan: q } = m, { outcomes: z } = X || {}, { user_chapters: H = [] } = c || {}, J = f(() => {
+    n((e) => !e);
+  }, []), C = t === "DRAFT", K = t === "OUTCOME_ADDED", { backgroundColor: L } = ie(
+    g,
+    C
+  ), Q = f(() => {
+    n((e) => !e);
+  }, [n]);
+  return te(() => {
+    const e = document.getElementById(`milestone-${d}`);
+    e && e.scrollIntoView();
+  }, []), /* @__PURE__ */ Z(re, { id: `milestone-${l}`, children: [
+    /* @__PURE__ */ o(
+      de,
+      {
+        onClick: Q,
+        $background: L,
+        $gapX: 1.5,
+        $borderColor: "GREY_2",
+        children: /* @__PURE__ */ o(ne, { $flexGapX: p ? 1.5 : 1, children: /* @__PURE__ */ o(
+          se,
+          {
+            milestone: s,
+            onEdit: P,
+            isExpanded: u,
+            toggleExpand: J,
+            userType: r,
+            isClassOngoing: M,
+            isStudentPresent: E,
+            onAddOutcome: D,
+            studentId: a,
+            studentName: x,
+            teacherName: N ?? "",
+            parentName: A ?? "",
+            onDraftPublish: W,
+            courseStream: _,
+            outcomes: z
+          }
+        ) })
+      }
+    ),
+    /* @__PURE__ */ o(le, { $expanded: u, children: /* @__PURE__ */ o(ce, { children: /* @__PURE__ */ o(
+      ae,
+      {
+        goalCategory: g,
+        isGoalCreation: !!p,
+        isDraftMilestone: C,
+        isOutcomeAdded: K,
+        isMilestoneActive: i,
+        isPlanAvailable: Y,
+        userMilestoneId: l,
+        chapters: H,
+        userType: r,
+        canUpdatePlan: q,
+        milestoneState: t,
+        studentId: a,
+        onAddChapter: $,
+        onAssignResources: v,
+        onChapterClick: I,
+        onCreateMilestoneTest: R,
+        onTestPreview: V,
+        onTestReview: F,
+        onTestStart: U,
+        onNodeAttempt: w,
+        onNodeView: S,
+        onNodeReview: k,
+        onNodeReattempt: y,
+        onNodeReset: O,
+        onNodeUnassign: B,
+        milestonePermissions: m,
+        activeMilestoneId: d,
+        activeTabId: b,
+        onWidgetTabSelection: G
+      }
+    ) }) })
+  ] });
+});
+export {
+  Te as default
+};
+//# sourceMappingURL=milestone-widget.js.map

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"milestone-widget.js","sources":["../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget.tsx"],"sourcesContent":["import type { IMilestoneWidgetProps } from './milestone-widget-types';\n\nimport React, { memo, useCallback, useEffect, useState } from 'react';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport MilestoneInfoWrapper from './milestone-info';\nimport MilestoneTabs from './milestone-tabs/milestone-tabs';\nimport { getGoalCategoryBasedColorTheme } from './milestone-utils';\nimport * as Styled from './milestone-widget-styled';\n\nconst MilestoneWidget: React.FC<IMilestoneWidgetProps> = memo(props => {\n  const { milestone, studentId, isMilestoneActive, ...restMilestoneWidgetProps } = props;\n  const {\n    isStudentPresent,\n    isClassOngoing,\n    userType,\n    studentName,\n    parentName,\n    teacherName,\n    courseStream,\n    activeMilestoneId,\n    activeTabId,\n    onAddOutcome,\n    onChapterClick,\n    onEdit,\n    onCreateMilestoneTest,\n    onDraftPublish,\n    onAddChapter,\n    onAssignResources,\n    onNodeAttempt,\n    onNodeView,\n    onNodeReview,\n    onNodeReattempt,\n    onNodeReset,\n    onNodeUnassign,\n    onWidgetTabSelection,\n    //* Test sheet callbacks\n    onTestPreview,\n    onTestReview,\n    onTestStart,\n    milestoneType,\n  } = restMilestoneWidgetProps;\n\n  const {\n    id: milestoneId,\n    user_milestone_plan: userMileStonePlan,\n    outcome_data: outcomeData,\n    milestone_state: milestoneState,\n    permissions: milestonePermissions,\n    goal_code: goalCode,\n    goal_category: goalCategory,\n  } = milestone;\n\n  const [widgetExpanded, setWidgetExpanded] = useState(\n    (isMilestoneActive && milestoneState === 'ACTIVE') || milestoneType === 'DRAFT',\n  );\n\n  const isPlanAvailable = Boolean(userMileStonePlan);\n\n  const { can_update_plan: canUpdatePlan } = milestonePermissions;\n  const { outcomes } = outcomeData || {};\n\n  const { user_chapters: chaptersData = [] } = userMileStonePlan || {};\n\n  const toggleExpand = useCallback(() => {\n    setWidgetExpanded(prev => !prev);\n  }, []);\n\n  const isDraftMilestone = milestoneState === 'DRAFT';\n  const isOutcomeAdded = milestoneState === 'OUTCOME_ADDED';\n\n  const { backgroundColor: goalBackgroundColor } = getGoalCategoryBasedColorTheme(\n    goalCategory,\n    isDraftMilestone,\n  );\n\n  const handleOnWidgetExpand = useCallback(() => {\n    setWidgetExpanded(prev => !prev);\n  }, [setWidgetExpanded]);\n\n  useEffect(() => {\n    const $element = document.getElementById(`milestone-${activeMilestoneId}`);\n\n    if ($element) {\n      $element.scrollIntoView();\n    }\n    //* Disabling the exhaustive-deps rule as we want to run this effect only once\n    //* We don't want this to run when activeMilestoneId changes, as it will cause component to scroll into the view every time.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <Styled.MainContainer id={`milestone-${milestoneId}`}>\n      <Styled.Wrapper\n        onClick={handleOnWidgetExpand}\n        $background={goalBackgroundColor}\n        $gapX={1.5}\n        $borderColor=\"GREY_2\"\n      >\n        <FlexView $flexGapX={goalCode ? 1.5 : 1}>\n          <MilestoneInfoWrapper\n            milestone={milestone}\n            onEdit={onEdit}\n            isExpanded={widgetExpanded}\n            toggleExpand={toggleExpand}\n            userType={userType}\n            isClassOngoing={isClassOngoing}\n            isStudentPresent={isStudentPresent}\n            onAddOutcome={onAddOutcome}\n            studentId={studentId}\n            studentName={studentName}\n            teacherName={teacherName ?? ''}\n            parentName={parentName ?? ''}\n            onDraftPublish={onDraftPublish}\n            courseStream={courseStream}\n            outcomes={outcomes}\n          />\n        </FlexView>\n      </Styled.Wrapper>\n\n      <Styled.ContentWrapper $expanded={widgetExpanded}>\n        <Styled.Content>\n          <MilestoneTabs\n            goalCategory={goalCategory}\n            isGoalCreation={!!goalCode}\n            isDraftMilestone={isDraftMilestone}\n            isOutcomeAdded={isOutcomeAdded}\n            isMilestoneActive={isMilestoneActive}\n            isPlanAvailable={isPlanAvailable}\n            userMilestoneId={milestoneId}\n            chapters={chaptersData}\n            userType={userType}\n            canUpdatePlan={canUpdatePlan}\n            milestoneState={milestoneState}\n            studentId={studentId}\n            onAddChapter={onAddChapter}\n            onAssignResources={onAssignResources}\n            onChapterClick={onChapterClick}\n            onCreateMilestoneTest={onCreateMilestoneTest}\n            onTestPreview={onTestPreview}\n            onTestReview={onTestReview}\n            onTestStart={onTestStart}\n            onNodeAttempt={onNodeAttempt}\n            onNodeView={onNodeView}\n            onNodeReview={onNodeReview}\n            onNodeReattempt={onNodeReattempt}\n            onNodeReset={onNodeReset}\n            onNodeUnassign={onNodeUnassign}\n            milestonePermissions={milestonePermissions}\n            activeMilestoneId={activeMilestoneId}\n            activeTabId={activeTabId}\n            onWidgetTabSelection={onWidgetTabSelection}\n          />\n        </Styled.Content>\n      </Styled.ContentWrapper>\n    </Styled.MainContainer>\n  );\n});\n\nexport default MilestoneWidget;\n"],"names":["MilestoneWidget","memo","props","milestone","studentId","isMilestoneActive","restMilestoneWidgetProps","isStudentPresent","isClassOngoing","userType","studentName","parentName","teacherName","courseStream","activeMilestoneId","activeTabId","onAddOutcome","onChapterClick","onEdit","onCreateMilestoneTest","onDraftPublish","onAddChapter","onAssignResources","onNodeAttempt","onNodeView","onNodeReview","onNodeReattempt","onNodeReset","onNodeUnassign","onWidgetTabSelection","onTestPreview","onTestReview","onTestStart","milestoneType","milestoneId","userMileStonePlan","outcomeData","milestoneState","milestonePermissions","goalCode","goalCategory","widgetExpanded","setWidgetExpanded","useState","isPlanAvailable","canUpdatePlan","outcomes","chaptersData","toggleExpand","useCallback","prev","isDraftMilestone","isOutcomeAdded","goalBackgroundColor","getGoalCategoryBasedColorTheme","handleOnWidgetExpand","useEffect","$element","Styled.MainContainer","jsx","Styled.Wrapper","FlexView","MilestoneInfoWrapper","Styled.ContentWrapper","Styled.Content","MilestoneTabs"],"mappings":"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"}

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-rank.js

@@ -0,0 +1,33 @@
+import { jsx as r, Fragment as c, jsxs as s } from "react/jsx-runtime";
+import { memo as l } from "react";
+import { convertToTitleCase as f } from "../../../../../../helpers/label-text.js";
+import p from "../../../../../ui/layout/flex-view.js";
+import d from "../../../../../ui/separator/separator.js";
+import m from "../../../../../ui/text/text.js";
+const j = l(({ value: i }) => {
+  const e = Object.entries(i);
+  return /* @__PURE__ */ r(c, { children: e.map(([t, o], n) => {
+    const a = n === e.length - 1 ? o : `${o}, `;
+    return /* @__PURE__ */ s(
+      p,
+      {
+        $flexDirection: "row",
+        $alignItems: "center",
+        $flexGap: 4,
+        children: [
+          /* @__PURE__ */ s(m, { $renderAs: "ab2", children: [
+            f(t),
+            " :"
+          ] }),
+          /* @__PURE__ */ r(m, { $renderAs: "ab1-bold", children: a }),
+          /* @__PURE__ */ r(d, { width: 1 })
+        ]
+      },
+      `outcome_ranks_${t}_${n}`
+    );
+  }) });
+});
+export {
+  j as default
+};
+//# sourceMappingURL=outcome-rank.js.map

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-rank.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outcome-rank.js","sources":["../../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-rank.tsx"],"sourcesContent":["import React, { memo } from 'react';\n\nimport { convertToTitleCase } from '../../../../../../helpers/label-text';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Separator from '../../../../../ui/separator/separator';\nimport Text from '../../../../../ui/text/text';\n\nconst Ranks: React.FC<{\n  value: Record<string, string>;\n}> = memo(({ value }) => {\n  const valuesList = Object.entries(value);\n\n  return (\n    <>\n      {valuesList.map(([level, rank], idx) => {\n        const isLastItem = idx === valuesList.length - 1;\n        const rankInfo = isLastItem ? rank : `${rank}, `;\n\n        return (\n          <FlexView\n            key={`outcome_ranks_${level}_${idx}`}\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $flexGap={4}\n          >\n            <Text $renderAs=\"ab2\">{convertToTitleCase(level)} :</Text>\n            <Text $renderAs=\"ab1-bold\">{rankInfo}</Text>\n            <Separator width={1} />\n          </FlexView>\n        );\n      })}\n    </>\n  );\n});\n\nexport default Ranks;\n"],"names":["Ranks","memo","value","valuesList","jsx","Fragment","level","rank","idx","rankInfo","jsxs","FlexView","Text","convertToTitleCase","Separator"],"mappings":";;;;;;AAOA,MAAMA,IAEDC,EAAK,CAAC,EAAE,OAAAC,QAAY;AACjB,QAAAC,IAAa,OAAO,QAAQD,CAAK;AAGrC,SAAA,gBAAAE,EAAAC,GAAA,EACG,YAAW,IAAI,CAAC,CAACC,GAAOC,CAAI,GAAGC,MAAQ;AAEtC,UAAMC,IADaD,MAAQL,EAAW,SAAS,IACjBI,IAAO,GAAGA,CAAI;AAG1C,WAAA,gBAAAG;AAAA,MAACC;AAAA,MAAA;AAAA,QAEC,gBAAe;AAAA,QACf,aAAY;AAAA,QACZ,UAAU;AAAA,QAEV,UAAA;AAAA,UAAC,gBAAAD,EAAAE,GAAA,EAAK,WAAU,OAAO,UAAA;AAAA,YAAAC,EAAmBP,CAAK;AAAA,YAAE;AAAA,UAAA,GAAE;AAAA,UAClD,gBAAAF,EAAAQ,GAAA,EAAK,WAAU,YAAY,UAASH,GAAA;AAAA,UACrC,gBAAAL,EAACU,GAAU,EAAA,OAAO,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAPhB,iBAAiBR,CAAK,IAAIE,CAAG;AAAA,IAAA;AAAA,EAUvC,CAAA,EACH,CAAA;AAEJ,CAAC;"}

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-styled.js

@@ -0,0 +1,38 @@
+import t from "styled-components";
+import n from "../../../../../../assets/line-icons/icons/info.js";
+import e from "../../../../../ui/layout/flex-view.js";
+import r from "../../../../../ui/text/text.js";
+const m = t(e)`
+  transform: translateY(2px);
+`, f = t(r)(() => `
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    text-overflow: ellipsis;
+    overflow: hidden;
+`);
+t(r)`
+  transform: translateY(2px);
+`;
+t(e)(({ theme: o }) => {
+  const {
+    layout: { gutter: i }
+  } = o;
+  return `
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    justify-content: space-between;
+    grid-row-gap: ${i * 0.625}px;
+  `;
+});
+t(n)(
+  () => `
+    position: relative;
+    cursor: pointer;
+  `
+);
+export {
+  m as NumbersWrapper,
+  f as StyledText
+};
+//# sourceMappingURL=outcome-styled.js.map

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"outcome-styled.js","sources":["../../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport InfoIcon from '../../../../../../assets/line-icons/icons/info';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Text from '../../../../../ui/text/text';\n\nconst NumbersWrapper = styled(FlexView)`\n  transform: translateY(2px);\n`;\n\nconst StyledText = styled(Text)(() => {\n  return `\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 2;\n    text-overflow: ellipsis;\n    overflow: hidden;\n`;\n});\n\nconst OutcomeLabelText = styled(Text)`\n  transform: translateY(2px);\n`;\n\nconst OutcomeInfoWrapper = styled(FlexView)(({ theme }) => {\n  const {\n    layout: { gutter },\n  } = theme;\n\n  return `\n    display: grid;\n    grid-template-columns: repeat(2, 1fr);\n    justify-content: space-between;\n    grid-row-gap: ${gutter * 0.625}px;\n  `;\n});\n\nconst StyledInfoIcon = styled(InfoIcon)(\n  () => `\n    position: relative;\n    cursor: pointer;\n  `,\n);\n\nexport { StyledText, NumbersWrapper, OutcomeLabelText, OutcomeInfoWrapper, StyledInfoIcon };\n"],"names":["NumbersWrapper","styled","FlexView","StyledText","Text","theme","gutter","InfoIcon"],"mappings":";;;;AAMM,MAAAA,IAAiBC,EAAOC,CAAQ;AAAA;AAAA,GAIhCC,IAAaF,EAAOG,CAAI,EAAE,MACvB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAOR;AAEwBH,EAAOG,CAAI;AAAA;AAAA;AAITH,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAAG,QAAY;AACnD,QAAA;AAAA,IACJ,QAAQ,EAAE,QAAAC,EAAO;AAAA,EACf,IAAAD;AAEG,SAAA;AAAA;AAAA;AAAA;AAAA,oBAIWC,IAAS,KAAK;AAAA;AAElC,CAAC;AAEsBL,EAAOM,CAAQ;AAAA,EACpC,MAAM;AAAA;AAAA;AAAA;AAIR;"}

package/dist/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome.js

@@ -0,0 +1,40 @@
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { memo as $ } from "react";
+import { useTheme as d } from "styled-components";
+import { ILLUSTRATIONS as u } from "../../../../../../assets/illustrations/illustrations.js";
+import i from "../../../../../ui/layout/flex-view.js";
+import a from "../../../../../ui/text/text.js";
+import { OUTCOME_LABELS as x } from "../milestone-constants.js";
+import h from "./outcome-rank.js";
+import { NumbersWrapper as A, StyledText as T } from "./outcome-styled.js";
+const { SCORE: y } = u, K = $(({ outcomes: n }) => {
+  const { gutter: s } = d().layout, m = Array.isArray(n) && n.find((t) => t.type === "primary");
+  if (!m) return null;
+  const { name: r, value: c, max: l } = m, p = r, f = r === "others";
+  return /* @__PURE__ */ o(
+    i,
+    {
+      $flexDirection: "row",
+      $alignItems: "center",
+      $flexGapX: 1,
+      onClick: (t) => t.stopPropagation(),
+      children: [
+        /* @__PURE__ */ e(i, { $flexDirection: "row", $flexGapX: 0.75, $alignItems: "center", children: /* @__PURE__ */ e("img", { src: y, width: s * 2.125, alt: "score-img" }) }),
+        /* @__PURE__ */ o(A, { children: [
+          !f && /* @__PURE__ */ e(a, { $renderAs: "ab3", $color: "BLACK_T_60", children: x[p] }),
+          /* @__PURE__ */ o(T, { $renderAs: "ah4", $color: "BLACK_T_87", children: [
+            r === "ranks" ? /* @__PURE__ */ e(i, { $flexDirection: "row", $alignItems: "center", $flexWrap: !0, children: /* @__PURE__ */ e(h, { value: c }) }) : c,
+            (r === "gpa" || r === "score") && l && /* @__PURE__ */ o(a, { $renderAs: "ab1", $inline: !0, $color: "BLACK_T_60", children: [
+              "/",
+              l
+            ] })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+export {
+  K as default
+};
+//# sourceMappingURL=outcome.js.map