@cuemath/leap 2.9.8-as2 → 2.9.8

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

@@ -1,128 +1,190 @@
-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,
+import { jsxs as B, jsx as e } from "react/jsx-runtime";
+import { memo as Te, useState as fe, useCallback as u, useMemo as W, useEffect as he } from "react";
+import { useTheme as _e } from "styled-components";
+import x from "../../../../ui/layout/flex-view.js";
+import De from "../../../../ui/time-left-timeline/time-left-timeline.js";
+import Ae from "./goals/goal-action-ctas.js";
+import Ee from "./milestone-info.js";
+import ye from "./milestone-tabs/milestone-tabs.js";
+import { getGoalCategoryBasedColorTheme as Ie } from "./milestone-utils.js";
+import be from "./milestone-widget-status.js";
+import { MainContainer as Me, Wrapper as Re, ContentWrapper as Be, Content as We } from "./milestone-widget-styled.js";
+import xe from "./outcome/outcome.js";
+import { differenceInCalendarDays as P } from "../../../../../node_modules/date-fns/differenceInCalendarDays.js";
+const Pe = {
+  primary: {
+    backgroundColor: "WHITE_3",
+    progressBarColor: "BLACK_T_87"
+  },
+  secondary: {
+    backgroundColor: "WHITE_3",
+    progressBarColor: "WHITE_5"
+  }
+}, je = Te((S) => {
+  const { milestone: d, studentId: C, isMilestoneActive: T, ...k } = S, {
+    isStudentPresent: c,
+    isClassOngoing: f,
+    userType: a,
+    studentName: w,
+    parentName: O,
+    teacherName: v,
+    courseStream: $,
+    activeMilestoneId: h,
+    activeTabId: G,
+    onAddOutcome: m,
+    onChapterClick: N,
+    onEdit: _,
+    onCreateMilestoneTest: F,
+    onPreview: V,
+    onReattempt: H,
+    onReset: U,
+    onResume: L,
+    onReview: j,
+    onStart: X,
+    onDraftPublish: D,
+    onAddChapter: K,
+    onAssignResources: Y,
+    onUnAssignSheet: q,
+    onDelete: t,
+    onWidgetTabSelection: z,
     //* 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,
+    onTestPreview: J,
+    onTestReview: Q,
+    onTestStart: Z,
+    milestoneType: A
+  } = k, {
+    id: n,
+    created_on_ts: E,
+    milestone_date_ts: r,
+    user_milestone_plan: y,
+    outcome_data: ee,
+    milestone_state: o,
+    permissions: I,
+    goal_code: s,
+    goal_category: p
+  } = d, [b, g] = fe(
+    T && o === "ACTIVE" || A === "DRAFT"
+  ), oe = _e(), { layout: te } = oe, { gutter: ne } = te, re = !!y, { can_update_plan: se } = I, { outcomes: i } = ee || {}, { user_chapters: ae = [] } = y || {}, ie = u(() => {
+    g((l) => !l);
+  }, []), M = o === "DRAFT", R = o === "OUTCOME_ADDED", le = Date.now() > r * 1e3, { progressBarColor: de } = Pe[o === "ACTIVE" ? "primary" : "secondary"], { backgroundColor: ce, borderColor: me } = Ie(p, M, R), pe = W(
+    () => P(r * 1e3, E * 1e3),
+    [E, r]
+  ), ge = W(
+    () => P(r * 1e3, Date.now()),
+    [r]
+  ), ue = u(() => {
+    g(!0);
+  }, [g]), Ce = u(() => {
+    t == null || t({ milestoneId: n, isGoalCreation: typeof s == "string", milestoneState: o });
+  }, [t, s, n, o]);
+  return he(() => {
+    const l = document.getElementById(`milestone-${h}`);
+    l && l.scrollIntoView();
+  }, []), /* @__PURE__ */ B(Me, { id: `milestone-${n}`, children: [
+    /* @__PURE__ */ e(x, { $marginBottom: -ne * 0.875, children: o !== "DRAFT" && !le ? /* @__PURE__ */ e(
+      De,
       {
-        onClick: Q,
-        $background: L,
+        unitsLeft: ge,
+        totalUnits: pe,
+        unit: "day",
+        backgroundColor: de,
+        barBackgroundColor: me,
+        showRemainingTime: !0
+      }
+    ) : /* @__PURE__ */ e(
+      be,
+      {
+        goalCategory: p,
+        goalCode: s,
+        milestoneState: o,
+        userType: a,
+        milestoneId: n,
+        isStudentPresent: c,
+        onDraftPublish: D,
+        onAddOutcome: m
+      }
+    ) }),
+    /* @__PURE__ */ e(
+      Re,
+      {
+        onClick: ue,
+        $background: ce,
         $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
-          }
-        ) })
+        children: /* @__PURE__ */ B(x, { $flexGapX: s ? 1.5 : 1, children: [
+          /* @__PURE__ */ e(
+            Ee,
+            {
+              milestone: d,
+              onEdit: _,
+              onDelete: t,
+              isExpanded: b,
+              toggleExpand: ie,
+              userType: a,
+              isClassOngoing: f,
+              isStudentPresent: c,
+              onAddOutcome: m
+            }
+          ),
+          a === "TEACHER" && A !== "DRAFT" && /* @__PURE__ */ e(
+            Ae,
+            {
+              milestone: d,
+              studentId: C,
+              studentName: w,
+              teacherName: v ?? "",
+              parentName: O ?? "",
+              onAddOutcome: m,
+              isClassOngoing: !!f,
+              isStudentPresent: !!c,
+              onDraftPublish: D,
+              onEdit: _,
+              onDelete: Ce,
+              courseStream: $
+            }
+          ),
+          i != null && i.length ? /* @__PURE__ */ e(xe, { outcomes: i }) : void 0
+        ] })
       }
     ),
-    /* @__PURE__ */ o(le, { $expanded: u, children: /* @__PURE__ */ o(ce, { children: /* @__PURE__ */ o(
-      ae,
+    /* @__PURE__ */ e(Be, { $expanded: b, children: /* @__PURE__ */ e(We, { children: /* @__PURE__ */ e(
+      ye,
       {
-        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
+        goalCategory: p,
+        isGoalCreation: !!s,
+        isDraftMilestone: M,
+        isOutcomeAdded: R,
+        isMilestoneActive: T,
+        isPlanAvailable: re,
+        userMilestoneId: n,
+        chapters: ae,
+        userType: a,
+        canUpdatePlan: se,
+        milestoneState: o,
+        studentId: C,
+        onAddChapter: K,
+        onAssignResources: Y,
+        onChapterClick: N,
+        onCreateMilestoneTest: F,
+        onPreview: V,
+        onReattempt: H,
+        onReset: U,
+        onResume: L,
+        onReview: j,
+        onStart: X,
+        onTestPreview: J,
+        onTestReview: Q,
+        onTestStart: Z,
+        onUnAssignSheet: q,
+        milestonePermissions: I,
+        activeMilestoneId: h,
+        activeTabId: G,
+        onWidgetTabSelection: z
       }
     ) }) })
   ] });
 });
 export {
-  Te as default
+  je as default
 };
 //# sourceMappingURL=milestone-widget.js.map

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

@@ -1 +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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"}
+{"version":3,"file":"milestone-widget.js","sources":["../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/milestone-widget.tsx"],"sourcesContent":["import type {\n  IMilestoneVariantConfig,\n  IMilestoneWidgetProps,\n  TMilestoneWidgetVariant,\n} from './milestone-widget-types';\n\nimport { differenceInCalendarDays } from 'date-fns';\nimport React, { memo, useCallback, useEffect, useMemo, useState } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport TimeLeftTimeline from '../../../../ui/time-left-timeline/time-left-timeline';\nimport GoalActionCtas from './goals/goal-action-ctas';\nimport MilestoneInfoWrapper from './milestone-info';\nimport MilestoneTabs from './milestone-tabs/milestone-tabs';\nimport { getGoalCategoryBasedColorTheme } from './milestone-utils';\nimport MilestoneWidgetStatus from './milestone-widget-status';\nimport * as Styled from './milestone-widget-styled';\nimport OutcomeWrapper from './outcome/outcome';\n\nconst VARIANT_CONFIG: Record<TMilestoneWidgetVariant, IMilestoneVariantConfig> = {\n  primary: {\n    backgroundColor: 'WHITE_3',\n    progressBarColor: 'BLACK_T_87',\n  },\n  secondary: {\n    backgroundColor: 'WHITE_3',\n    progressBarColor: 'WHITE_5',\n  },\n};\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    onPreview,\n    onReattempt,\n    onReset,\n    onResume,\n    onReview,\n    onStart,\n    onDraftPublish,\n    onAddChapter,\n    onAssignResources,\n    onUnAssignSheet,\n    onDelete,\n    onWidgetTabSelection,\n    //* Test sheet callbacks\n    onTestPreview,\n    onTestReview,\n    onTestStart,\n    milestoneType,\n  } = restMilestoneWidgetProps;\n\n  const {\n    id: milestoneId,\n    created_on_ts: createdOn,\n    milestone_date_ts: dueDate,\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 theme = useTheme();\n  const { layout } = theme;\n  const { gutter } = layout;\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  const isDueDatePassed = Date.now() > dueDate * 1000;\n  const { progressBarColor } =\n    VARIANT_CONFIG[milestoneState === 'ACTIVE' ? 'primary' : 'secondary'];\n  const { backgroundColor: goalBackgroundColor, borderColor: goalBorderColor } =\n    getGoalCategoryBasedColorTheme(goalCategory, isDraftMilestone, isOutcomeAdded);\n\n  const totalDays = useMemo(\n    () => differenceInCalendarDays(dueDate * 1000, createdOn * 1000),\n    [createdOn, dueDate],\n  );\n\n  const remainingDays = useMemo(\n    () => differenceInCalendarDays(dueDate * 1000, Date.now()),\n    [dueDate],\n  );\n\n  const handleOnWidgetExpand = useCallback(() => {\n    setWidgetExpanded(true);\n  }, [setWidgetExpanded]);\n\n  const handleGoalDelete = useCallback(() => {\n    onDelete?.({ milestoneId, isGoalCreation: typeof goalCode === 'string', milestoneState });\n  }, [onDelete, goalCode, milestoneId, milestoneState]);\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      <FlexView $marginBottom={-gutter * 0.875}>\n        {milestoneState !== 'DRAFT' && !isDueDatePassed ? (\n          <TimeLeftTimeline\n            unitsLeft={remainingDays}\n            totalUnits={totalDays}\n            unit=\"day\"\n            backgroundColor={progressBarColor}\n            barBackgroundColor={goalBorderColor}\n            showRemainingTime={true}\n          />\n        ) : (\n          <MilestoneWidgetStatus\n            goalCategory={goalCategory}\n            goalCode={goalCode}\n            milestoneState={milestoneState}\n            userType={userType}\n            milestoneId={milestoneId}\n            isStudentPresent={isStudentPresent}\n            onDraftPublish={onDraftPublish}\n            onAddOutcome={onAddOutcome}\n          />\n        )}\n      </FlexView>\n\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            onDelete={onDelete}\n            isExpanded={widgetExpanded}\n            toggleExpand={toggleExpand}\n            userType={userType}\n            isClassOngoing={isClassOngoing}\n            isStudentPresent={isStudentPresent}\n            onAddOutcome={onAddOutcome}\n          />\n\n          {userType === 'TEACHER' && milestoneType !== 'DRAFT' && (\n            <GoalActionCtas\n              milestone={milestone}\n              studentId={studentId}\n              studentName={studentName}\n              teacherName={teacherName ?? ''}\n              parentName={parentName ?? ''}\n              onAddOutcome={onAddOutcome}\n              isClassOngoing={Boolean(isClassOngoing)}\n              isStudentPresent={Boolean(isStudentPresent)}\n              onDraftPublish={onDraftPublish}\n              onEdit={onEdit}\n              onDelete={handleGoalDelete}\n              courseStream={courseStream}\n            />\n          )}\n\n          {outcomes?.length ? <OutcomeWrapper outcomes={outcomes} /> : undefined}\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            onPreview={onPreview}\n            onReattempt={onReattempt}\n            onReset={onReset}\n            onResume={onResume}\n            onReview={onReview}\n            onStart={onStart}\n            onTestPreview={onTestPreview}\n            onTestReview={onTestReview}\n            onTestStart={onTestStart}\n            onUnAssignSheet={onUnAssignSheet}\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":["VARIANT_CONFIG","MilestoneWidget","memo","props","milestone","studentId","isMilestoneActive","restMilestoneWidgetProps","isStudentPresent","isClassOngoing","userType","studentName","parentName","teacherName","courseStream","activeMilestoneId","activeTabId","onAddOutcome","onChapterClick","onEdit","onCreateMilestoneTest","onPreview","onReattempt","onReset","onResume","onReview","onStart","onDraftPublish","onAddChapter","onAssignResources","onUnAssignSheet","onDelete","onWidgetTabSelection","onTestPreview","onTestReview","onTestStart","milestoneType","milestoneId","createdOn","dueDate","userMileStonePlan","outcomeData","milestoneState","milestonePermissions","goalCode","goalCategory","widgetExpanded","setWidgetExpanded","useState","theme","useTheme","layout","gutter","isPlanAvailable","canUpdatePlan","outcomes","chaptersData","toggleExpand","useCallback","prev","isDraftMilestone","isOutcomeAdded","isDueDatePassed","progressBarColor","goalBackgroundColor","goalBorderColor","getGoalCategoryBasedColorTheme","totalDays","useMemo","differenceInCalendarDays","remainingDays","handleOnWidgetExpand","handleGoalDelete","useEffect","$element","Styled.MainContainer","jsx","FlexView","TimeLeftTimeline","MilestoneWidgetStatus","Styled.Wrapper","jsxs","MilestoneInfoWrapper","GoalActionCtas","OutcomeWrapper","Styled.ContentWrapper","Styled.Content","MilestoneTabs"],"mappings":"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"}

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

@@ -0,0 +1,25 @@
+import { jsxs as n, jsx as r, Fragment as m } from "react/jsx-runtime";
+import h, { memo as f } from "react";
+import o from "../../../../../ui/layout/flex-view.js";
+import l from "../../../../../ui/text/text.js";
+import { OUTCOME_LABELS as p } from "../milestone-constants.js";
+import { formatOutcomeValue as u } from "../milestone-utils.js";
+import s from "./outcome-rank.js";
+import { OutcomeInfoWrapper as y, OutcomeLabelText as A } from "./outcome-styled.js";
+const v = f(({ outcomes: t }) => {
+  const i = Array.isArray(t) && t.find((e) => e.name === "others"), a = Array.isArray(t) && t.length > 1;
+  return /* @__PURE__ */ n(o, { $gutterX: 1, $widthX: 15, children: [
+    /* @__PURE__ */ r(y, { $gapX: !a && i ? 0 : 0.75, children: Array.isArray(t) && t.map(({ name: e, value: d, max: c }) => e !== "others" && /* @__PURE__ */ n(h.Fragment, { children: [
+      /* @__PURE__ */ r(A, { $renderAs: "body2", children: p[e] }),
+      e === "ranks" ? /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(s, { value: d, size: "small" }) }) : /* @__PURE__ */ r(l, { $renderAs: "body1Medium", children: u(e, d, c) })
+    ] }, e)) }),
+    i && /* @__PURE__ */ n(m, { children: [
+      a && /* @__PURE__ */ r(o, { $background: "GREY_2", $height: 1 }),
+      /* @__PURE__ */ r(o, { $gapX: 0.75, children: /* @__PURE__ */ r(m, { children: i.name === "ranks" ? /* @__PURE__ */ r(s, { size: "xSmall", value: i.value }) : /* @__PURE__ */ r(l, { $renderAs: "body2", children: i.value }) }) })
+    ] })
+  ] });
+});
+export {
+  v as default
+};
+//# sourceMappingURL=outcome-info.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"outcome-info.js","sources":["../../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-info.tsx"],"sourcesContent":["import type { IOutcomeInfoProps } from '../milestone-widget-types';\n\nimport React, { memo } from 'react';\n\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Text from '../../../../../ui/text/text';\nimport { OUTCOME_LABELS } from '../milestone-constants';\nimport { formatOutcomeValue } from '../milestone-utils';\nimport Ranks from './outcome-rank';\nimport * as Styled from './outcome-styled';\n\nconst OutcomeInfo: React.FC<IOutcomeInfoProps> = memo(({ outcomes }) => {\n  const otherOutcome =\n    Array.isArray(outcomes) && outcomes.find(outcome => outcome.name === 'others');\n  const secondaryOutcomePresent = Array.isArray(outcomes) && outcomes.length > 1;\n\n  return (\n    <FlexView $gutterX={1} $widthX={15}>\n      <Styled.OutcomeInfoWrapper $gapX={!secondaryOutcomePresent && otherOutcome ? 0 : 0.75}>\n        {Array.isArray(outcomes) &&\n          outcomes.map(({ name, value, max }) => {\n            return (\n              name !== 'others' && (\n                <React.Fragment key={name}>\n                  <Styled.OutcomeLabelText $renderAs=\"body2\">\n                    {OUTCOME_LABELS[name]}\n                  </Styled.OutcomeLabelText>\n                  {name === 'ranks' ? (\n                    <div>\n                      <Ranks value={value} size=\"small\" />\n                    </div>\n                  ) : (\n                    <Text $renderAs=\"body1Medium\">{formatOutcomeValue(name, value, max)}</Text>\n                  )}\n                </React.Fragment>\n              )\n            );\n          })}\n      </Styled.OutcomeInfoWrapper>\n      {otherOutcome && (\n        <>\n          {secondaryOutcomePresent && <FlexView $background=\"GREY_2\" $height={1} />}\n          <FlexView $gapX={0.75}>\n            <>\n              {otherOutcome.name === 'ranks' ? (\n                <Ranks size=\"xSmall\" value={otherOutcome.value} />\n              ) : (\n                <Text $renderAs=\"body2\">{otherOutcome.value}</Text>\n              )}\n            </>\n          </FlexView>\n        </>\n      )}\n    </FlexView>\n  );\n});\n\nexport default OutcomeInfo;\n"],"names":["OutcomeInfo","memo","outcomes","otherOutcome","outcome","secondaryOutcomePresent","jsxs","FlexView","jsx","Styled.OutcomeInfoWrapper","name","value","max","React","Styled.OutcomeLabelText","OUTCOME_LABELS","Ranks","Text","Fragment"],"mappings":";;;;;;;;AAWA,MAAMA,IAA2CC,EAAK,CAAC,EAAE,UAAAC,QAAe;AAChE,QAAAC,IACJ,MAAM,QAAQD,CAAQ,KAAKA,EAAS,KAAK,CAAAE,MAAWA,EAAQ,SAAS,QAAQ,GACzEC,IAA0B,MAAM,QAAQH,CAAQ,KAAKA,EAAS,SAAS;AAE7E,SACG,gBAAAI,EAAAC,GAAA,EAAS,UAAU,GAAG,SAAS,IAC9B,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAA0B,OAAO,CAACJ,KAA2BF,IAAe,IAAI,MAC9E,UAAA,MAAM,QAAQD,CAAQ,KACrBA,EAAS,IAAI,CAAC,EAAE,MAAAQ,GAAM,OAAAC,GAAO,KAAAC,QAEzBF,MAAS,YACN,gBAAAJ,EAAAO,EAAM,UAAN,EACC,UAAA;AAAA,MAAA,gBAAAL,EAACM,GAAA,EAAwB,WAAU,SAChC,UAAAC,EAAeL,CAAI,GACtB;AAAA,MACCA,MAAS,UACR,gBAAAF,EAAC,SACC,UAAC,gBAAAA,EAAAQ,GAAA,EAAM,OAAAL,GAAc,MAAK,QAAQ,CAAA,GACpC,IAEA,gBAAAH,EAACS,KAAK,WAAU,eAAe,YAAmBP,GAAMC,GAAOC,CAAG,EAAE,CAAA;AAAA,IAAA,EAAA,GATnDF,CAWrB,CAGL,GACL;AAAA,IACCP,KAEI,gBAAAG,EAAAY,GAAA,EAAA,UAAA;AAAA,MAAAb,KAA4B,gBAAAG,EAAAD,GAAA,EAAS,aAAY,UAAS,SAAS,GAAG;AAAA,MACvE,gBAAAC,EAACD,KAAS,OAAO,MACf,iCACG,UAAaJ,EAAA,SAAS,UACrB,gBAAAK,EAACQ,GAAM,EAAA,MAAK,UAAS,OAAOb,EAAa,MAAO,CAAA,IAE/C,gBAAAK,EAAAS,GAAA,EAAK,WAAU,SAAS,UAAAd,EAAa,MAAM,CAAA,EAAA,CAEhD,EACF,CAAA;AAAA,IAAA,GACF;AAAA,EAEJ,EAAA,CAAA;AAEJ,CAAC;"}

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

@@ -1,33 +1,20 @@
-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}`
-    );
-  }) });
+import { jsx as m, Fragment as n, jsxs as s } from "react/jsx-runtime";
+import { memo as i } from "react";
+import { convertToTitleCase as l } from "../../../../../../helpers/label-text.js";
+import c from "../../../../../ui/text/text.js";
+const d = {
+  small: "body1Medium",
+  xSmall: "body2",
+  regular: "h6"
+}, b = i(({ value: t, size: e = "regular" }) => {
+  const o = d[e];
+  return /* @__PURE__ */ m(n, { children: Object.entries(t).map(([r, a]) => /* @__PURE__ */ s(c, { $renderAs: o, children: [
+    l(r),
+    " : ",
+    a
+  ] }, r)) });
 });
 export {
-  j as default
+  b as default
 };
 //# sourceMappingURL=outcome-rank.js.map

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

@@ -1 +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;"}
+{"version":3,"file":"outcome-rank.js","sources":["../../../../../../../src/features/milestone/milestone-list-container/milestone-list/milestone-widget/outcome/outcome-rank.tsx"],"sourcesContent":["import type { TTextVariants } from '../../../../../ui/types';\n\nimport React, { memo } from 'react';\n\nimport { convertToTitleCase } from '../../../../../../helpers/label-text';\nimport Text from '../../../../../ui/text/text';\n\ntype TVariant = 'small' | 'regular' | 'xSmall';\n\nconst textVariantMap: Record<TVariant, TTextVariants> = {\n  small: 'body1Medium',\n  xSmall: 'body2',\n  regular: 'h6',\n};\n\nconst Ranks: React.FC<{\n  value: Record<string, string>;\n  size?: TVariant;\n}> = memo(({ value, size = 'regular' }) => {\n  const textVariant = textVariantMap[size];\n\n  return (\n    <>\n      {Object.entries(value).map(([level, rank]) => (\n        <Text $renderAs={textVariant} key={level}>\n          {convertToTitleCase(level)} : {rank}\n        </Text>\n      ))}\n    </>\n  );\n});\n\nexport default Ranks;\n"],"names":["textVariantMap","Ranks","memo","value","size","textVariant","jsx","Fragment","level","rank","jsxs","Text","convertToTitleCase"],"mappings":";;;;AASA,MAAMA,IAAkD;AAAA,EACtD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,SAAS;AACX,GAEMC,IAGDC,EAAK,CAAC,EAAE,OAAAC,GAAO,MAAAC,IAAO,gBAAgB;AACnC,QAAAC,IAAcL,EAAeI,CAAI;AAEvC,SAEK,gBAAAE,EAAAC,GAAA,EAAA,UAAA,OAAO,QAAQJ,CAAK,EAAE,IAAI,CAAC,CAACK,GAAOC,CAAI,MACrC,gBAAAC,EAAAC,GAAA,EAAK,WAAWN,GACd,UAAA;AAAA,IAAAO,EAAmBJ,CAAK;AAAA,IAAE;AAAA,IAAIC;AAAA,EAAA,KADED,CAEnC,CACD,EACH,CAAA;AAEJ,CAAC;"}

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

@@ -1,31 +1,35 @@
 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)`
+import s from "../../../../../../assets/line-icons/icons/info.js";
+import r from "../../../../../ui/layout/flex-view.js";
+import n from "../../../../../ui/text/text.js";
+const c = t.div`
+  height: 48px;
+  overflow: scroll;
+`, m = t(r)`
   transform: translateY(2px);
-`, f = t(r)(() => `
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 2;
-    text-overflow: ellipsis;
+`, f = t(n)(({ theme: o }) => {
+  const {
+    layout: { gutter: e }
+  } = o;
+  return `
+    max-width: ${e * 13.375}px;
+    white-space: nowrap;
     overflow: hidden;
-`);
-t(r)`
-  transform: translateY(2px);
+    text-overflow: ellipsis;
 `;
-t(e)(({ theme: o }) => {
+}), u = t(n)`
+  transform: translateY(2px);
+`, x = t(r)(({ theme: o }) => {
   const {
-    layout: { gutter: i }
+    layout: { gutter: e }
   } = o;
   return `
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     justify-content: space-between;
-    grid-row-gap: ${i * 0.625}px;
+    grid-row-gap: ${e * 0.625}px;
   `;
-});
-t(n)(
+}), d = t(s)(
   () => `
     position: relative;
     cursor: pointer;
@@ -33,6 +37,10 @@ t(n)(
 );
 export {
   m as NumbersWrapper,
+  x as OutcomeInfoWrapper,
+  u as OutcomeLabelText,
+  c as RanksScroll,
+  d as StyledInfoIcon,
   f as StyledText
 };
 //# sourceMappingURL=outcome-styled.js.map

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

@@ -1 +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;"}
+{"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 RanksScroll = styled.div`\n  height: 48px;\n  overflow: scroll;\n`;\n\nconst NumbersWrapper = styled(FlexView)`\n  transform: translateY(2px);\n`;\n\nconst StyledText = styled(Text)(({ theme }) => {\n  const {\n    layout: { gutter },\n  } = theme;\n\n  return `\n    max-width: ${gutter * 13.375}px;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\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 {\n  RanksScroll,\n  StyledText,\n  NumbersWrapper,\n  OutcomeLabelText,\n  OutcomeInfoWrapper,\n  StyledInfoIcon,\n};\n"],"names":["RanksScroll","styled","NumbersWrapper","FlexView","StyledText","Text","theme","gutter","OutcomeLabelText","OutcomeInfoWrapper","StyledInfoIcon","InfoIcon"],"mappings":";;;;AAMA,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA,GAKrBC,IAAiBD,EAAOE,CAAQ;AAAA;AAAA,GAIhCC,IAAaH,EAAOI,CAAI,EAAE,CAAC,EAAE,OAAAC,QAAY;AACvC,QAAA;AAAA,IACJ,QAAQ,EAAE,QAAAC,EAAO;AAAA,EACf,IAAAD;AAEG,SAAA;AAAA,iBACQC,IAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAKhC,CAAC,GAEKC,IAAmBP,EAAOI,CAAI;AAAA;AAAA,GAI9BI,IAAqBR,EAAOE,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,GAEKG,IAAiBT,EAAOU,CAAQ;AAAA,EACpC,MAAM;AAAA;AAAA;AAAA;AAIR;"}

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

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