@cuemath/leap 2.9.9-as6 → 2.9.10

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

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

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

@@ -1 +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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"}
+{"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/tests-list/tests-list';\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    isOutcomeAdded,\n    milestoneState,\n    milestonePermissions,\n    activeMilestoneId,\n    activeTabId,\n  } = props;\n  const {\n    onAddChapter,\n    onAssignResources,\n    onChapterClick,\n    onCreateMilestoneTest,\n    onPreview,\n    onReattempt,\n    onReset,\n    onResume,\n    onReview,\n    onStart,\n    onTestPreview,\n    onTestReview,\n    onTestStart,\n    onUnAssignSheet,\n    onWidgetTabSelection,\n  } = props;\n  const { visible_tabs: visibleTabs } = milestonePermissions;\n  const { onEvent: trackEvent } = useUIContext();\n\n  const { backgroundColor } = getGoalCategoryBasedColorTheme(\n    goalCategory,\n    isDraftMilestone,\n    isOutcomeAdded,\n  );\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          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          onUnAssignSheet={onUnAssignSheet}\n          onStart={onStart}\n          onReset={onReset}\n          onPreview={onPreview}\n          onReview={onReview}\n          onResume={onResume}\n          onReattempt={onReattempt}\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      {TAB_CONFIG[selectedTabName as keyof typeof TAB_CONFIG].component}\n    </>\n  );\n});\n\nexport default MilestoneTabs;\n"],"names":["MilestoneTabs","memo","props","goalCategory","isDraftMilestone","isGoalCreation","isMilestoneActive","userMilestoneId","chapters","userType","canUpdatePlan","studentId","isOutcomeAdded","milestoneState","milestonePermissions","activeMilestoneId","activeTabId","onAddChapter","onAssignResources","onChapterClick","onCreateMilestoneTest","onPreview","onReattempt","onReset","onResume","onReview","onStart","onTestPreview","onTestReview","onTestStart","onUnAssignSheet","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"],"mappings":"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"}

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

@@ -1,7 +1,19 @@
-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) => {
+const { SCHOOL_SUCCESS: n, TEST_PREP: E, ENRICHMENT: C } = t, u = (r, o, e) => {
+  switch (r) {
+    case "score":
+      return e ? `${o}/${e}` : `${o}`;
+    case "level":
+    case "gpa":
+      return `${o}(Max ${e})`;
+    case "percentage":
+      return `${o}%`;
+    case "percentile":
+      return `${o}th`;
+    default:
+      return o;
+  }
+}, c = (r) => {
   if (r === "OUTCOME_PENDING")
     return {
       placement: "right",
@@ -18,13 +30,13 @@ const { SCHOOL_SUCCESS: l, TEST_PREP: a, ENRICHMENT: C } = t, d = (r) => {
       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`;
-};
+}, s = (r, o, e) => e ? {
+  backgroundColor: "WHITE_4",
+  borderColor: "GREEN_5"
+} : o ? { backgroundColor: "WHITE_2", borderColor: "WHITE_5" } : r === n ? { textColor: "PURPLE_5", backgroundColor: "PURPLE_1", borderColor: "PURPLE_2" } : r === E ? { 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" };
 export {
-  i as getGoalCategoryBasedColorTheme,
-  d as getMilestoneWidgetStatusInfo,
-  _ as getRemainingDaysToCompleteGoal
+  u as formatOutcomeValue,
+  s as getGoalCategoryBasedColorTheme,
+  c as getMilestoneWidgetStatusInfo
 };
 //# sourceMappingURL=milestone-utils.js.map

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

@@ -1 +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;"}
+{"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 { 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  isOutcomeAdded,\n) => {\n  if (isOutcomeAdded)\n    return {\n      backgroundColor: 'WHITE_4',\n      borderColor: 'GREEN_5',\n    };\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\nexport { formatOutcomeValue, getMilestoneWidgetStatusInfo, getGoalCategoryBasedColorTheme };\n"],"names":["SCHOOL_SUCCESS","TEST_PREP","ENRICHMENT","GOAL_CATEGORY","formatOutcomeValue","name","value","max","getMilestoneWidgetStatusInfo","milestoneState","getGoalCategoryBasedColorTheme","category","isDraftMilestone","isOutcomeAdded"],"mappings":";AAKA,MAAM,EAAE,gBAAAA,GAAgB,WAAAC,GAAW,YAAAC,EAAA,IAAeC,GAE5CC,IAAqB,CACzBC,GACAC,GACAC,MACoB;AACpB,UAAQF,GAAM;AAAA,IACZ,KAAK;AACH,aAAIE,IAAY,GAAGD,CAAK,IAAIC,CAAG,KAExB,GAAGD,CAAK;AAAA,IACjB,KAAK;AAAA,IACL,KAAK;AACI,aAAA,GAAGA,CAAK,QAAQC,CAAG;AAAA,IAC5B,KAAK;AACH,aAAO,GAAGD,CAAK;AAAA,IACjB,KAAK;AACH,aAAO,GAAGA,CAAK;AAAA,IACjB;AACS,aAAAA;AAAA,EACX;AACF,GAcME,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,GACAC,MAEIA,IACK;AAAA,EACL,iBAAiB;AAAA,EACjB,aAAa;AAAA,IAGbD,IAAyB,EAAE,iBAAiB,WAAW,aAAa,cAEpED,MAAaX,IACR,EAAE,WAAW,YAAY,iBAAiB,YAAY,aAAa,eAGxEW,MAAaV,IACR,EAAE,WAAW,UAAU,iBAAiB,UAAU,aAAa,aAGpEU,MAAaT,IACR,EAAE,WAAW,YAAY,iBAAiB,YAAY,aAAa,eAGrE,EAAE,iBAAiB,WAAW,aAAa,UAAU;"}

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

@@ -0,0 +1,53 @@
+import { jsxs as m, jsx as t } from "react/jsx-runtime";
+import { memo as p } from "react";
+import u from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
+import h from "../../../../ui/separator/separator.js";
+import C from "../../../../ui/text/text.js";
+import { getMilestoneWidgetStatusInfo as f, getGoalCategoryBasedColorTheme as T } from "./milestone-utils.js";
+import { MilestoneWidgetStatusWrapper as b, MilestoneWidgetStatusTag as $, StyledCheckIcon as A } from "./milestone-widget-styled.js";
+const I = p(
+  ({ milestoneState: r, userType: s, isStudentPresent: d, goalCategory: c }) => {
+    const o = f(r), n = r === "DRAFT", e = r === "OUTCOME_ADDED", l = e || r === "OUTCOME_PENDING", i = s === "TEACHER" && n && !d, { borderColor: a } = T(
+      c,
+      n,
+      e
+    ), g = (l ? o == null ? void 0 : o.progressBackgroundColor : a) || "WHITE_5";
+    return /* @__PURE__ */ m(b, { $heightX: 2, $justifyContent: "center", children: [
+      /* @__PURE__ */ t(h, { background: g, heightX: 0.25 }),
+      o && /* @__PURE__ */ t(
+        $,
+        {
+          $placement: o.placement,
+          $gutterX: 0.75,
+          $heightX: 1.75,
+          $justifyContent: "center",
+          $width: "fit-content",
+          $background: o.statusBackgroundColor,
+          children: e ? /* @__PURE__ */ t(A, {}) : /* @__PURE__ */ t(
+            u,
+            {
+              renderAs: "secondary",
+              tooltipItem: "Can only be published in class",
+              position: "bottom",
+              hidden: !i,
+              widthX: 14,
+              zIndex: 2,
+              children: /* @__PURE__ */ t(
+                C,
+                {
+                  $renderAs: "ub3-bold",
+                  $color: i ? "BLACK_T_38" : "WHITE_T_87",
+                  children: o.label
+                }
+              )
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+export {
+  I as default
+};
+//# sourceMappingURL=milestone-widget-status.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"milestone-widget-status.js","sources":["../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-status.tsx"],"sourcesContent":["import type { IMilestoneWidgetStatusProps } from './milestone-widget-types';\n\nimport React, { memo } from 'react';\n\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { getGoalCategoryBasedColorTheme, getMilestoneWidgetStatusInfo } from './milestone-utils';\nimport * as Styled from './milestone-widget-styled';\n\nconst MilestoneWidgetStatus: React.FC<IMilestoneWidgetStatusProps> = memo(\n  ({ milestoneState, userType, isStudentPresent, goalCategory }) => {\n    const outcomeStatusInfo = getMilestoneWidgetStatusInfo(milestoneState);\n\n    const isDraftMilestone = milestoneState === 'DRAFT';\n    const isOutcomeAdded = milestoneState === 'OUTCOME_ADDED';\n    const isOutcomeCard = isOutcomeAdded || milestoneState === 'OUTCOME_PENDING';\n    const isDraftActionDisabled = userType === 'TEACHER' && isDraftMilestone && !isStudentPresent;\n\n    const { borderColor: goalBorderColor } = getGoalCategoryBasedColorTheme(\n      goalCategory,\n      isDraftMilestone,\n      isOutcomeAdded,\n    );\n    const backgroundColor =\n      (isOutcomeCard ? outcomeStatusInfo?.progressBackgroundColor : goalBorderColor) || 'WHITE_5';\n\n    return (\n      <Styled.MilestoneWidgetStatusWrapper $heightX={2} $justifyContent=\"center\">\n        <Separator background={backgroundColor} heightX={0.25} />\n\n        {outcomeStatusInfo && (\n          <Styled.MilestoneWidgetStatusTag\n            $placement={outcomeStatusInfo.placement}\n            $gutterX={0.75}\n            $heightX={1.75}\n            $justifyContent=\"center\"\n            $width=\"fit-content\"\n            $background={outcomeStatusInfo.statusBackgroundColor}\n          >\n            {isOutcomeAdded ? (\n              <Styled.StyledCheckIcon />\n            ) : (\n              <ArrowTooltip\n                renderAs=\"secondary\"\n                tooltipItem=\"Can only be published in class\"\n                position=\"bottom\"\n                hidden={!isDraftActionDisabled}\n                widthX={14}\n                zIndex={2}\n              >\n                <Text\n                  $renderAs=\"ub3-bold\"\n                  $color={isDraftActionDisabled ? 'BLACK_T_38' : 'WHITE_T_87'}\n                >\n                  {outcomeStatusInfo.label}\n                </Text>\n              </ArrowTooltip>\n            )}\n          </Styled.MilestoneWidgetStatusTag>\n        )}\n      </Styled.MilestoneWidgetStatusWrapper>\n    );\n  },\n);\n\nexport default MilestoneWidgetStatus;\n"],"names":["MilestoneWidgetStatus","memo","milestoneState","userType","isStudentPresent","goalCategory","outcomeStatusInfo","getMilestoneWidgetStatusInfo","isDraftMilestone","isOutcomeAdded","isOutcomeCard","isDraftActionDisabled","goalBorderColor","getGoalCategoryBasedColorTheme","backgroundColor","Styled.MilestoneWidgetStatusWrapper","jsx","Separator","Styled.MilestoneWidgetStatusTag","Styled.StyledCheckIcon","ArrowTooltip","Text"],"mappings":";;;;;;;AAUA,MAAMA,IAA+DC;AAAA,EACnE,CAAC,EAAE,gBAAAC,GAAgB,UAAAC,GAAU,kBAAAC,GAAkB,cAAAC,QAAmB;AAC1D,UAAAC,IAAoBC,EAA6BL,CAAc,GAE/DM,IAAmBN,MAAmB,SACtCO,IAAiBP,MAAmB,iBACpCQ,IAAgBD,KAAkBP,MAAmB,mBACrDS,IAAwBR,MAAa,aAAaK,KAAoB,CAACJ,GAEvE,EAAE,aAAaQ,EAAA,IAAoBC;AAAA,MACvCR;AAAA,MACAG;AAAA,MACAC;AAAA,IAAA,GAEIK,KACHJ,IAAgBJ,KAAA,gBAAAA,EAAmB,0BAA0BM,MAAoB;AAEpF,6BACGG,GAAA,EAAoC,UAAU,GAAG,iBAAgB,UAChE,UAAA;AAAA,MAAA,gBAAAC,EAACC,GAAU,EAAA,YAAYH,GAAiB,SAAS,MAAM;AAAA,MAEtDR,KACC,gBAAAU;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,YAAYZ,EAAkB;AAAA,UAC9B,UAAU;AAAA,UACV,UAAU;AAAA,UACV,iBAAgB;AAAA,UAChB,QAAO;AAAA,UACP,aAAaA,EAAkB;AAAA,UAE9B,UACCG,IAAA,gBAAAO,EAACG,GAAA,CAAA,CAAuB,IAExB,gBAAAH;AAAA,YAACI;AAAA,YAAA;AAAA,cACC,UAAS;AAAA,cACT,aAAY;AAAA,cACZ,UAAS;AAAA,cACT,QAAQ,CAACT;AAAA,cACT,QAAQ;AAAA,cACR,QAAQ;AAAA,cAER,UAAA,gBAAAK;AAAA,gBAACK;AAAA,gBAAA;AAAA,kBACC,WAAU;AAAA,kBACV,QAAQV,IAAwB,eAAe;AAAA,kBAE9C,UAAkBL,EAAA;AAAA,gBAAA;AAAA,cACrB;AAAA,YAAA;AAAA,UACF;AAAA,QAAA;AAAA,MAEJ;AAAA,IAEJ,EAAA,CAAA;AAAA,EAEJ;AACF;"}

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

@@ -1,33 +1,31 @@
-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 r, { keyframes as p } from "styled-components";
+import s from "../../../../../assets/line-icons/icons/check2.js";
+import a from "../../../../../assets/line-icons/icons/down.js";
+import d 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`
+import n from "../../../../ui/text/text.js";
+const l = p`
   0% {
     opacity: 0;
   }
   100% {
     opacity: 1;
   }
-`, v = r(i)`
+`, $ = r(i)`
   position: relative;
-  animation: ${f} 0.3s ease-in-out;
-`, k = r(g)(({ theme: o, $expanded: t }) => {
+  animation: ${l} 0.3s ease-in-out;
+`, w = r(a)(({ theme: o, $expanded: t }) => {
   const {
-    layout: { gutter: e },
-    colors: { BLACK_1: n }
+    layout: { gutter: e }
   } = 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);
+    cursor:pointer;
+    height:${e * 2}px;
+    width:${e * 2}px;
+    transform:rotate(${t === !0 ? 180 : 0}deg);
     transition: transform 0.3s ease;
   `;
-}), C = r.div(({ $expanded: o, theme: t }) => {
+}), h = r.div(({ $expanded: o, theme: t }) => {
   const { colors: e } = t;
   return `
     display:grid;
@@ -37,7 +35,7 @@ const f = x`
     border: 1px solid ${e.GREY_2};
     border-top:none;
   `;
-}), I = r.div`
+}), y = r.div`
   min-height: 0px;
   width: 100%;
 `;
@@ -49,7 +47,7 @@ r.div(({ theme: o }) => {
     padding: ${t * 2}px;
   `;
 });
-r($)(
+r(d)(
   () => `
     position: relative;
     cursor: pointer;
@@ -81,78 +79,47 @@ r.div(({ theme: o, $rotate: t }) => {
     }
   `;
 });
-const _ = r(i)`
+const v = r(i)`
+  border-top: 0px;
   border-bottom: 0px;
   position: relative;
   padding: 32px 32px 24px;
   cursor: pointer;
 `;
-r(s)`
+r(n)`
   white-space: pre-wrap;
 `;
-const A = r(s)`
+const b = r(n)`
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 2;
   text-overflow: ellipsis;
   overflow: hidden;
-`;
-r(i)`
+`, I = r(i)`
   position: relative;
   z-index: 1;
-`;
-r(i)(({
+`, k = 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]};
+  `), W = r(s)(({ theme: o }) => `
+    path {
+      stroke: ${o.colors.WHITE};
+      fill: ${o.colors.WHITE};
+    }
   `);
 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
+  y as Content,
+  h as ContentWrapper,
+  $ as MainContainer,
+  b as MilestoneTitle,
+  k as MilestoneWidgetStatusTag,
+  I as MilestoneWidgetStatusWrapper,
+  W as StyledCheckIcon,
+  w as StyledDownIcon,
+  v as Wrapper
 };
 //# sourceMappingURL=milestone-widget-styled.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"milestone-widget-styled.js","sources":["../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget-styled.tsx"],"sourcesContent":["import styled, { keyframes } from 'styled-components';\n\nimport Check2Icon from '../../../../../assets/line-icons/icons/check2';\nimport DownIcon from '../../../../../assets/line-icons/icons/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(DownIcon)<IStyledDownIconProps>(({ theme, $expanded }) => {\n  const {\n    layout: { gutter },\n  } = theme;\n\n  return `\n    cursor:pointer;\n    height:${gutter * 2}px;\n    width:${gutter * 2}px;\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-top: 0px;\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 StyledCheckIcon = styled(Check2Icon)(({ theme }) => {\n  return `\n    path {\n      stroke: ${theme.colors.WHITE};\n      fill: ${theme.colors.WHITE};\n    }\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  StyledCheckIcon,\n};\n"],"names":["fadeIn","keyframes","MainContainer","styled","FlexView","StyledDownIcon","DownIcon","theme","$expanded","gutter","ContentWrapper","colors","Content","InfoIcon","$rotate","Wrapper","Text","MilestoneTitle","MilestoneWidgetStatusWrapper","MilestoneWidgetStatusTag","$placement","StyledCheckIcon","Check2Icon"],"mappings":";;;;;;AAgBA,MAAMA,IAASC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASTC,IAAgBC,EAAOC,CAAQ;AAAA;AAAA,eAEtBJ,CAAM;AAAA,GAGfK,IAAiBF,EAAOG,CAAQ,EAAwB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AAChF,QAAA;AAAA,IACJ,QAAQ,EAAE,QAAAC,EAAO;AAAA,EACf,IAAAF;AAEG,SAAA;AAAA;AAAA,aAEIE,IAAS,CAAC;AAAA,YACXA,IAAS,CAAC;AAAA,uBACCD,MAAc,KAAO,MAAM,CAAC;AAAA;AAAA;AAGnD,CAAC,GAEKE,IAAiBP,EAAO,IAA0B,CAAC,EAAE,WAAAK,GAAW,OAAAD,QAAY;AAC1E,QAAA,EAAE,QAAAI,EAAW,IAAAJ;AAEZ,SAAA;AAAA;AAAA,yBAEgBC,IAAY,IAAI,CAAC;AAAA;AAAA;AAAA,wBAGlBG,EAAO,MAAM;AAAA;AAAA;AAGrC,CAAC,GAEKC,IAAUT,EAAO;AAAA;AAAA;AAAA;AAKHA,EAAO,IAAI,CAAC,EAAE,OAAAI,QAAY;AACtC,QAAA;AAAA,IACJ,QAAQ,EAAE,QAAAE,EAAO;AAAA,EACf,IAAAF;AAEG,SAAA;AAAA,eACME,IAAS,CAAC;AAAA;AAEzB,CAAC;AAEsBN,EAAOU,CAAQ;AAAA,EACpC,MAAM;AAAA;AAAA;AAAA;AAIR;AAE2BV,EAAO,IAAI,CAAC,EAAE,OAAAI,QAAY;AAC7C,QAAA;AAAA,IACJ,QAAQ,EAAE,QAAAE,EAAO;AAAA,EACf,IAAAF;AAEG,SAAA;AAAA,cACKE,CAAM;AAAA;AAAA;AAAA,8BAGUA,IAAS,IAAI,UAAUA,IAAS,IAAI;AAAA,6BACrCA,IAAS,CAAC,MAAMA,IAAS,CAAC,MAAMA,IAAS,KAAK,MAAMA,IAAS,KAAK;AAAA,YACnFA,IAAS,EAAE;AAAA;AAAA;AAGvB,CAAC;AAEsBN,EAAO,IAA0B,CAAC,EAAE,OAAAI,GAAO,SAAAO,QAAc;AACxE,QAAA;AAAA,IACJ,QAAQ,EAAE,QAAAL,EAAO;AAAA,EACf,IAAAF;AAEG,SAAA;AAAA;AAAA,oBAEWE,IAAS,GAAG;AAAA;AAAA,0BAENK,IAAU,MAAM,CAAC;AAAA;AAAA;AAG3C,CAAC;AAEK,MAAAC,IAAUZ,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQZD,EAAOa,CAAI;AAAA;AAAA;AAIxB,MAAAC,IAAiBd,EAAOa,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQ5BE,IAA+Bf,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAS9Ce,IAA2BhB,EAAOC,CAAQ,EAA6B,CAAC;AAAA,EAC5E,YAAAgB;AAAA,EACA,OAAAb;AACF,MACS;AAAA;AAAA,WAEGA,EAAM,OAAO,SAAS,OAAQ,CAAC;AAAA,MACrCa,MAAe,UAAU,gBAAgB,YAAY;AAAA,GAE1D,GAEKC,IAAkBlB,EAAOmB,CAAU,EAAE,CAAC,EAAE,OAAAf,QACrC;AAAA;AAAA,gBAEOA,EAAM,OAAO,KAAK;AAAA,cACpBA,EAAM,OAAO,KAAK;AAAA;AAAA,GAG/B;"}