@cuemath/leap 2.9.4-as5 → 2.9.4-link.0

package/dist/features/trial-session/comps/pricing/pricing-cards.js

@@ -1,35 +1,35 @@
 import { jsxs as e, jsx as r } from "react/jsx-runtime";
-import d from "../../../ui/layout/flex-view.js";
+import a from "../../../ui/layout/flex-view.js";
 import t from "../../../ui/separator/separator.js";
 import n from "../../../ui/text/text.js";
-import p from "./board-comp.js";
-import { PricingBoard as f, ImageWrapper as y, OfferText as h } from "./pricing-styled.js";
+import g from "./board-comp.js";
+import { PricingBoard as p, ImageWrapper as f, OfferText as d } from "./pricing-styled.js";
 const c = {
   0: "WHITE_4",
   1: "GREEN_1"
-}, F = ({ pricingConfig: u, intentType: A, colorIndex: i }) => {
-  if (A === "LOW") {
+}, G = ({ pricingConfig: h, intentType: y, colorIndex: i }) => {
+  if (y === "low") {
     const {
-      plan_name: W,
-      original_price: o,
-      discounted_price: _,
+      plan_name: T,
+      original_price: m,
+      discounted_price: W,
       price_per_class: D,
       classes_per_cycle: H,
       billing_cycle: I,
-      offer: g,
-      currency_symbol: a
-    } = u || {};
-    return /* @__PURE__ */ e(f, { $width: 287, $height: 393, $gutterX: 2.5, $gapX: 2.125, children: [
-      /* @__PURE__ */ r(y, { $color: c[i % 2] ?? "WHITE_4", children: /* @__PURE__ */ r(p, { width: 287, height: 393 }) }),
-      /* @__PURE__ */ e(d, { $height: "100%", $justifyContent: "space-between", children: [
+      offer: _,
+      currency_symbol: o
+    } = h || {};
+    return /* @__PURE__ */ e(p, { $width: 287, $height: 393, $gutterX: 2.5, $gapX: 2.125, children: [
+      /* @__PURE__ */ r(f, { $color: c[i % 2] ?? "WHITE_4", children: /* @__PURE__ */ r(g, { width: 287, height: 393 }) }),
+      /* @__PURE__ */ e(a, { $height: "100%", $justifyContent: "space-between", children: [
         /* @__PURE__ */ e("div", { children: [
           /* @__PURE__ */ r(t, { height: 50 }),
-          /* @__PURE__ */ r(n, { $renderAs: "ac2-black", children: W }),
+          /* @__PURE__ */ r(n, { $renderAs: "ac2-black", children: T }),
           /* @__PURE__ */ r(t, { height: 20 }),
-          /* @__PURE__ */ e(d, { $flexDirection: "row", $alignItems: "center", children: [
-            o && o !== _ ? /* @__PURE__ */ r(n, { $renderAs: "ub3-bold", $textDecoration: "line-through", children: a + o }) : null,
-            /* @__PURE__ */ e(d, { $flexDirection: "row", $alignItems: "end", children: [
-              /* @__PURE__ */ r(n, { $renderAs: "ah3-bold", children: a + _ }),
+          /* @__PURE__ */ e(a, { $flexDirection: "row", $alignItems: "center", children: [
+            m ? /* @__PURE__ */ r(n, { $renderAs: "ub3-bold", $textDecoration: "line-through", children: o + m }) : null,
+            /* @__PURE__ */ e(a, { $flexDirection: "row", $alignItems: "end", children: [
+              /* @__PURE__ */ r(n, { $renderAs: "ah3-bold", children: o + W }),
               /* @__PURE__ */ e(n, { $renderAs: "ab1-bold", children: [
                 "/",
                 I === "yearly" ? "year" : "month"
@@ -39,7 +39,7 @@ const c = {
           /* @__PURE__ */ r(t, { height: 4 }),
           /* @__PURE__ */ e(n, { $renderAs: "ub3", children: [
             "(",
-            a + D,
+            o + D,
             "/class)"
           ] }),
           /* @__PURE__ */ r(t, { height: 4 }),
@@ -49,30 +49,30 @@ const c = {
             " classes/mo)"
           ] })
         ] }),
-        g && /* @__PURE__ */ r(
-          h,
+        _ && /* @__PURE__ */ r(
+          d,
           {
             $renderAs: "ub3-bold",
             $background: c[i % 2] ?? "WHITE_4",
-            children: g
+            children: _
           }
         )
       ] })
     ] });
   }
   const {
-    amount: $,
-    duration: C,
+    amount: u,
+    duration: A,
     amount_after_coupon: l,
-    classes_per_week: k,
+    classes_per_week: w,
     currency_symbol: s,
-    discount_details: w,
-    fee_per_class_after_discount: x,
-    meta_text: b,
-    no_of_classes: E
-  } = u || {}, { discount_duration: m, original_plan_details: P } = w || {}, { duration: T } = P || {};
+    discount_details: C,
+    fee_per_class_after_discount: k,
+    meta_text: $,
+    no_of_classes: x
+  } = h || {}, { discount_duration: b, original_plan_details: E } = C || {}, { duration: P } = E || {};
   return /* @__PURE__ */ e(
-    f,
+    p,
     {
       $width: 287,
       $height: 393,
@@ -80,30 +80,30 @@ const c = {
       $gapX: 2.125,
       $justifyContent: "space-between",
       children: [
-        /* @__PURE__ */ r(y, { $color: c[i % 2] ?? "WHITE_4", children: /* @__PURE__ */ r(p, { width: 287, height: 393 }) }),
+        /* @__PURE__ */ r(f, { $color: c[i % 2] ?? "WHITE_4", children: /* @__PURE__ */ r(g, { width: 287, height: 393 }) }),
         /* @__PURE__ */ e("div", { children: [
           /* @__PURE__ */ r(t, { height: 30 }),
           /* @__PURE__ */ e(n, { $renderAs: "ah2-black", children: [
-            T || C,
+            P || A,
             " ",
             /* @__PURE__ */ r(n, { $renderAs: "ac2-black", $inline: !0, children: "Months" })
           ] }),
-          m && /* @__PURE__ */ e(
-            h,
+          b && /* @__PURE__ */ e(
+            d,
             {
               $renderAs: "ub3-bold",
               $background: c[i % 2] ?? "WHITE_4",
               children: [
                 "Get extra ",
-                m,
+                b,
                 " Months FREE"
               ]
             }
           )
         ] }),
         /* @__PURE__ */ e("div", { children: [
-          l !== $ ? /* @__PURE__ */ e(n, { $renderAs: "ab1", $textDecoration: "line-through", children: [
-            s + $,
+          l !== u ? /* @__PURE__ */ e(n, { $renderAs: "ab1", $textDecoration: "line-through", children: [
+            s + u,
             /* @__PURE__ */ e(n, { $renderAs: "ab1-black", $inline: !0, children: [
               " ",
               s + l
@@ -111,27 +111,27 @@ const c = {
           ] }) : /* @__PURE__ */ r(n, { $renderAs: "ab1-black", $inline: !0, children: s + l }),
           /* @__PURE__ */ e(n, { $renderAs: "ub3", children: [
             "(",
-            x,
+            k,
             "/class)"
           ] })
         ] }),
         /* @__PURE__ */ e("div", { children: [
           /* @__PURE__ */ e(n, { $renderAs: "ab1", children: [
-            E,
+            x,
             " classes"
           ] }),
           /* @__PURE__ */ e(n, { $renderAs: "ub2", children: [
             "(",
-            k * 4,
+            w * 4,
             " classes/mo)"
           ] })
         ] }),
-        b && /* @__PURE__ */ r(
-          h,
+        $ && /* @__PURE__ */ r(
+          d,
           {
             $renderAs: "ub3-bold",
             $background: c[i % 2] ?? "WHITE_4",
-            children: b
+            children: $
           }
         )
       ]
@@ -139,6 +139,6 @@ const c = {
   );
 };
 export {
-  F as default
+  G as default
 };
 //# sourceMappingURL=pricing-cards.js.map

package/dist/features/trial-session/comps/pricing/pricing-cards.js.map

@@ -1 +1 @@
-{"version":3,"file":"pricing-cards.js","sources":["../../../../../src/features/trial-session/comps/pricing/pricing-cards.tsx"],"sourcesContent":["import type { TColorNames } from '../../../ui/types';\nimport type {\n  IPricingCardsProps,\n  TLowIntentPricingDetails,\n  TPricingDetails,\n} from './pricing-typed';\nimport type { FC } from 'react';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport HangingBoardComp from './board-comp';\nimport * as Styled from './pricing-styled';\n\nconst layoutPrimaryColor: Record<number, TColorNames> = {\n  0: 'WHITE_4',\n  1: 'GREEN_1',\n};\n\nconst PricingCards: FC<IPricingCardsProps> = ({ pricingConfig, intentType, colorIndex }) => {\n  if (intentType === 'LOW') {\n    const {\n      plan_name: pricingName,\n      original_price: originalPrice,\n      discounted_price: discountedPrice,\n      price_per_class: pricePerClass,\n      classes_per_cycle: classesPerCycle,\n      billing_cycle: billingCycle,\n      offer: metaText,\n      currency_symbol: currencySymbol,\n    } = (pricingConfig as TLowIntentPricingDetails) || {};\n\n    return (\n      <Styled.PricingBoard $width={287} $height={393} $gutterX={2.5} $gapX={2.125}>\n        <Styled.ImageWrapper $color={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}>\n          <HangingBoardComp width={287} height={393} />\n        </Styled.ImageWrapper>\n        <FlexView $height=\"100%\" $justifyContent=\"space-between\">\n          <div>\n            <Separator height={50} />\n            <Text $renderAs=\"ac2-black\">{pricingName}</Text>\n            <Separator height={20} />\n            <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n              {originalPrice && originalPrice !== discountedPrice ? (\n                <Text $renderAs=\"ub3-bold\" $textDecoration=\"line-through\">\n                  {currencySymbol + originalPrice}\n                </Text>\n              ) : null}\n              <FlexView $flexDirection=\"row\" $alignItems=\"end\">\n                <Text $renderAs=\"ah3-bold\">{currencySymbol + discountedPrice}</Text>\n                <Text $renderAs=\"ab1-bold\">/{billingCycle === 'yearly' ? 'year' : 'month'}</Text>\n              </FlexView>\n            </FlexView>\n            <Separator height={4} />\n            <Text $renderAs=\"ub3\">({currencySymbol + pricePerClass}/class)</Text>\n            <Separator height={4} />\n            <Text $renderAs=\"ub3\">({classesPerCycle} classes/mo)</Text>\n          </div>\n\n          {metaText && (\n            <Styled.OfferText\n              $renderAs=\"ub3-bold\"\n              $background={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}\n            >\n              {metaText}\n            </Styled.OfferText>\n          )}\n        </FlexView>\n      </Styled.PricingBoard>\n    );\n  }\n\n  const {\n    amount,\n    duration: durationWithoutCoupon,\n    amount_after_coupon: amountAfterCoupon,\n    classes_per_week: classesPerWeek,\n    currency_symbol: currencySymbol,\n    discount_details: discountDetails,\n    fee_per_class_after_discount: feePerClassAfterDiscount,\n    meta_text: metaText,\n    no_of_classes: noOfClasses,\n  } = (pricingConfig as TPricingDetails) || {};\n  const { discount_duration: discountDuration, original_plan_details: originalPlanDetails } =\n    discountDetails || {};\n  const { duration } = originalPlanDetails || {};\n\n  return (\n    <Styled.PricingBoard\n      $width={287}\n      $height={393}\n      $gutterX={2.5}\n      $gapX={2.125}\n      $justifyContent=\"space-between\"\n    >\n      <Styled.ImageWrapper $color={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}>\n        <HangingBoardComp width={287} height={393} />\n      </Styled.ImageWrapper>\n      <div>\n        <Separator height={30} />\n        <Text $renderAs=\"ah2-black\">\n          {duration || durationWithoutCoupon}&nbsp;\n          <Text $renderAs=\"ac2-black\" $inline>\n            Months\n          </Text>\n        </Text>\n        {discountDuration && (\n          <Styled.OfferText\n            $renderAs=\"ub3-bold\"\n            $background={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}\n          >\n            Get extra {discountDuration} Months FREE\n          </Styled.OfferText>\n        )}\n      </div>\n\n      <div>\n        {amountAfterCoupon !== amount ? (\n          <Text $renderAs=\"ab1\" $textDecoration=\"line-through\">\n            {currencySymbol + amount}\n            <Text $renderAs=\"ab1-black\" $inline>\n              &nbsp;\n              {currencySymbol + amountAfterCoupon}\n            </Text>\n          </Text>\n        ) : (\n          <Text $renderAs=\"ab1-black\" $inline>\n            {currencySymbol + amountAfterCoupon}\n          </Text>\n        )}\n        <Text $renderAs=\"ub3\">({feePerClassAfterDiscount}/class)</Text>\n      </div>\n\n      <div>\n        <Text $renderAs=\"ab1\">{noOfClasses} classes</Text>\n        <Text $renderAs=\"ub2\">({classesPerWeek * 4} classes/mo)</Text>\n      </div>\n\n      {metaText && (\n        <Styled.OfferText\n          $renderAs=\"ub3-bold\"\n          $background={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}\n        >\n          {metaText}\n        </Styled.OfferText>\n      )}\n    </Styled.PricingBoard>\n  );\n};\n\nexport default PricingCards;\n"],"names":["layoutPrimaryColor","PricingCards","pricingConfig","intentType","colorIndex","pricingName","originalPrice","discountedPrice","pricePerClass","classesPerCycle","billingCycle","metaText","currencySymbol","jsxs","Styled.PricingBoard","jsx","Styled.ImageWrapper","HangingBoardComp","FlexView","Separator","Text","Styled.OfferText","amount","durationWithoutCoupon","amountAfterCoupon","classesPerWeek","discountDetails","feePerClassAfterDiscount","noOfClasses","discountDuration","originalPlanDetails","duration"],"mappings":"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"}
+{"version":3,"file":"pricing-cards.js","sources":["../../../../../src/features/trial-session/comps/pricing/pricing-cards.tsx"],"sourcesContent":["import type { TColorNames } from '../../../ui/types';\nimport type {\n  IPricingCardsProps,\n  TLowIntentPricingDetails,\n  TPricingDetails,\n} from './pricing-typed';\nimport type { FC } from 'react';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport HangingBoardComp from './board-comp';\nimport * as Styled from './pricing-styled';\n\nconst layoutPrimaryColor: Record<number, TColorNames> = {\n  0: 'WHITE_4',\n  1: 'GREEN_1',\n};\n\nconst PricingCards: FC<IPricingCardsProps> = ({ pricingConfig, intentType, colorIndex }) => {\n  if (intentType === 'low') {\n    const {\n      plan_name: pricingName,\n      original_price: originalPrice,\n      discounted_price: discountedPrice,\n      price_per_class: pricePerClass,\n      classes_per_cycle: classesPerCycle,\n      billing_cycle: billingCycle,\n      offer: metaText,\n      currency_symbol: currencySymbol,\n    } = (pricingConfig as TLowIntentPricingDetails) || {};\n\n    return (\n      <Styled.PricingBoard $width={287} $height={393} $gutterX={2.5} $gapX={2.125}>\n        <Styled.ImageWrapper $color={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}>\n          <HangingBoardComp width={287} height={393} />\n        </Styled.ImageWrapper>\n        <FlexView $height=\"100%\" $justifyContent=\"space-between\">\n          <div>\n            <Separator height={50} />\n            <Text $renderAs=\"ac2-black\">{pricingName}</Text>\n            <Separator height={20} />\n            <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n              {originalPrice ? (\n                <Text $renderAs=\"ub3-bold\" $textDecoration=\"line-through\">\n                  {currencySymbol + originalPrice}\n                </Text>\n              ) : null}\n              <FlexView $flexDirection=\"row\" $alignItems=\"end\">\n                <Text $renderAs=\"ah3-bold\">{currencySymbol + discountedPrice}</Text>\n                <Text $renderAs=\"ab1-bold\">/{billingCycle === 'yearly' ? 'year' : 'month'}</Text>\n              </FlexView>\n            </FlexView>\n            <Separator height={4} />\n            <Text $renderAs=\"ub3\">({currencySymbol + pricePerClass}/class)</Text>\n            <Separator height={4} />\n            <Text $renderAs=\"ub3\">({classesPerCycle} classes/mo)</Text>\n          </div>\n\n          {metaText && (\n            <Styled.OfferText\n              $renderAs=\"ub3-bold\"\n              $background={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}\n            >\n              {metaText}\n            </Styled.OfferText>\n          )}\n        </FlexView>\n      </Styled.PricingBoard>\n    );\n  }\n\n  const {\n    amount,\n    duration: durationWithoutCoupon,\n    amount_after_coupon: amountAfterCoupon,\n    classes_per_week: classesPerWeek,\n    currency_symbol: currencySymbol,\n    discount_details: discountDetails,\n    fee_per_class_after_discount: feePerClassAfterDiscount,\n    meta_text: metaText,\n    no_of_classes: noOfClasses,\n  } = (pricingConfig as TPricingDetails) || {};\n  const { discount_duration: discountDuration, original_plan_details: originalPlanDetails } =\n    discountDetails || {};\n  const { duration } = originalPlanDetails || {};\n\n  return (\n    <Styled.PricingBoard\n      $width={287}\n      $height={393}\n      $gutterX={2.5}\n      $gapX={2.125}\n      $justifyContent=\"space-between\"\n    >\n      <Styled.ImageWrapper $color={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}>\n        <HangingBoardComp width={287} height={393} />\n      </Styled.ImageWrapper>\n      <div>\n        <Separator height={30} />\n        <Text $renderAs=\"ah2-black\">\n          {duration || durationWithoutCoupon}&nbsp;\n          <Text $renderAs=\"ac2-black\" $inline>\n            Months\n          </Text>\n        </Text>\n        {discountDuration && (\n          <Styled.OfferText\n            $renderAs=\"ub3-bold\"\n            $background={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}\n          >\n            Get extra {discountDuration} Months FREE\n          </Styled.OfferText>\n        )}\n      </div>\n\n      <div>\n        {amountAfterCoupon !== amount ? (\n          <Text $renderAs=\"ab1\" $textDecoration=\"line-through\">\n            {currencySymbol + amount}\n            <Text $renderAs=\"ab1-black\" $inline>\n              &nbsp;\n              {currencySymbol + amountAfterCoupon}\n            </Text>\n          </Text>\n        ) : (\n          <Text $renderAs=\"ab1-black\" $inline>\n            {currencySymbol + amountAfterCoupon}\n          </Text>\n        )}\n        <Text $renderAs=\"ub3\">({feePerClassAfterDiscount}/class)</Text>\n      </div>\n\n      <div>\n        <Text $renderAs=\"ab1\">{noOfClasses} classes</Text>\n        <Text $renderAs=\"ub2\">({classesPerWeek * 4} classes/mo)</Text>\n      </div>\n\n      {metaText && (\n        <Styled.OfferText\n          $renderAs=\"ub3-bold\"\n          $background={layoutPrimaryColor[colorIndex % 2] ?? 'WHITE_4'}\n        >\n          {metaText}\n        </Styled.OfferText>\n      )}\n    </Styled.PricingBoard>\n  );\n};\n\nexport default PricingCards;\n"],"names":["layoutPrimaryColor","PricingCards","pricingConfig","intentType","colorIndex","pricingName","originalPrice","discountedPrice","pricePerClass","classesPerCycle","billingCycle","metaText","currencySymbol","jsxs","Styled.PricingBoard","jsx","Styled.ImageWrapper","HangingBoardComp","FlexView","Separator","Text","Styled.OfferText","amount","durationWithoutCoupon","amountAfterCoupon","classesPerWeek","discountDetails","feePerClassAfterDiscount","noOfClasses","discountDuration","originalPlanDetails","duration"],"mappings":"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"}

package/dist/features/trial-session/comps/pricing/pricing.js

@@ -1,61 +1,61 @@
 import { jsx as r, jsxs as a } from "react/jsx-runtime";
-import { memo as P, useCallback as x, useEffect as m } from "react";
+import { memo as P, useCallback as x, useEffect as l } from "react";
 import { ILLUSTRATIONS as T } from "../../../../assets/illustrations/illustrations.js";
-import v from "../../../ui/error/error.js";
-import y from "../../../ui/image/image.js";
-import C from "../../../ui/layout/flex-view.js";
-import I from "../../../ui/loader/app-loader/app-loader.js";
+import y from "../../../ui/error/error.js";
+import C from "../../../ui/image/image.js";
+import I from "../../../ui/layout/flex-view.js";
+import S from "../../../ui/loader/app-loader/app-loader.js";
 import d from "../../../ui/separator/separator.js";
-import L from "../../../ui/text/text.js";
-import { useGetTrialPricing as S } from "../../api/trial-pricing.js";
-import { useTrialSessionContext as $ } from "../../context/use-trial-session-context.js";
-import w from "../slide-header/index.js";
-import A from "./pricing-cards.js";
-import { Container as b, PricingWrapper as D, PolicyWrapper as E, RefundImageWrapper as W } from "./pricing-styled.js";
+import $ from "../../../ui/text/text.js";
+import { useGetTrialPricing as w } from "../../api/trial-pricing.js";
+import { useTrialSessionContext as A } from "../../context/use-trial-session-context.js";
+import L from "../slide-header/index.js";
+import b from "./pricing-cards.js";
+import { Container as v, PricingWrapper as D, PolicyWrapper as E, RefundImageWrapper as W } from "./pricing-styled.js";
 const z = P(() => {
-  const { isTeacher: f, studentId: i, updateButtonState: s } = $(), {
+  const { isTeacher: f, studentId: i, updateButtonState: s } = A(), {
     data: g,
     get: p,
     isProcessed: e,
     isProcessing: t,
     isProcessingFailed: h
-  } = S("trial-v3-pricing", {
+  } = w("trial-v3-pricing", {
     student_id: i
-  }), { plans: o, intent_level: c } = g || {}, n = x(() => {
+  }), { plans: o, intent: c } = g || {}, n = x(() => {
     i && !e && p("trial-v3-pricing", { student_id: i });
   }, [p, e, i]);
-  return m(() => {
+  return l(() => {
     n();
-  }, [n]), m(() => {
+  }, [n]), l(() => {
     s("right", { isDisabled: t, isLoading: !1 });
-  }, [t, f, s]), t ? /* @__PURE__ */ r(I, { height: "100vh" }) : h ? /* @__PURE__ */ r(v, { height: "100vh", onTryAgain: n }) : e ? /* @__PURE__ */ a(b, { children: [
+  }, [t, f, s]), t ? /* @__PURE__ */ r(S, { height: "100vh" }) : h ? /* @__PURE__ */ r(y, { height: "100vh", onTryAgain: n }) : e ? /* @__PURE__ */ a(v, { children: [
     /* @__PURE__ */ r(d, { height: 60 }),
-    /* @__PURE__ */ r(w, { marginBottom: 38 }),
+    /* @__PURE__ */ r(L, { marginBottom: 38 }),
     /* @__PURE__ */ a(D, { children: [
       /* @__PURE__ */ r(
-        C,
+        I,
         {
           $width: "100%",
           $flexDirection: "row",
           $justifyContent: "space-between",
           $flexGap: 20,
           $flexWrap: !0,
-          children: c && o && Array.isArray(o) && o.map((u, l) => /* @__PURE__ */ r(
-            A,
+          children: c && o && Array.isArray(o) && o.map((u, m) => /* @__PURE__ */ r(
+            b,
             {
-              colorIndex: l,
+              colorIndex: m,
               intentType: c,
               pricingConfig: u
             },
-            l
+            m
           ))
         }
       ),
       /* @__PURE__ */ r(d, { height: 50 }),
       /* @__PURE__ */ a(E, { children: [
-        /* @__PURE__ */ r(L, { $renderAs: "ab1-bold", $color: "GREEN_6", children: "We have a no-questions-asked refund policy" }),
+        /* @__PURE__ */ r($, { $renderAs: "ab1-bold", $color: "GREEN_6", children: "We have a no-questions-asked refund policy" }),
         /* @__PURE__ */ r(W, { children: /* @__PURE__ */ r(
-          y,
+          C,
           {
             src: T.REFUND_POLICY,
             width: 168,

package/dist/features/trial-session/comps/pricing/pricing.js.map

@@ -1 +1 @@
-{"version":3,"file":"pricing.js","sources":["../../../../../src/features/trial-session/comps/pricing/pricing.tsx"],"sourcesContent":["import { memo, useCallback, useEffect } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Error from '../../../ui/error/error';\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\nimport AppLoader from '../../../ui/loader/app-loader/app-loader';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useGetTrialPricing } from '../../api/trial-pricing';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport SlideHeader from '../slide-header';\nimport PricingCards from './pricing-cards';\nimport * as Styled from './pricing-styled';\n\nconst SessionPricing = memo(() => {\n  const { isTeacher, studentId, updateButtonState } = useTrialSessionContext();\n\n  const {\n    data: pricingData,\n    get: getTrialPricing,\n    isProcessed,\n    isProcessing,\n    isProcessingFailed,\n  } = useGetTrialPricing('trial-v3-pricing', {\n    student_id: studentId,\n  });\n\n  const { plans: pricingPlans, intent_level: intentLevel } = pricingData || {};\n  const fetchData = useCallback(() => {\n    if (studentId && !isProcessed) {\n      getTrialPricing('trial-v3-pricing', { student_id: studentId });\n    }\n  }, [getTrialPricing, isProcessed, studentId]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  useEffect(() => {\n    updateButtonState('right', { isDisabled: isProcessing, isLoading: false });\n  }, [isProcessing, isTeacher, updateButtonState]);\n\n  if (isProcessing) {\n    return <AppLoader height=\"100vh\" />;\n  }\n\n  if (isProcessingFailed) {\n    return <Error height=\"100vh\" onTryAgain={fetchData} />;\n  }\n\n  if (isProcessed) {\n    return (\n      <Styled.Container>\n        <Separator height={60} />\n        <SlideHeader marginBottom={38} />\n        <Styled.PricingWrapper>\n          <FlexView\n            $width=\"100%\"\n            $flexDirection=\"row\"\n            $justifyContent=\"space-between\"\n            $flexGap={20}\n            $flexWrap\n          >\n            {intentLevel &&\n              pricingPlans &&\n              Array.isArray(pricingPlans) &&\n              pricingPlans.map((pricing, index) => {\n                return (\n                  <PricingCards\n                    key={index}\n                    colorIndex={index}\n                    intentType={intentLevel}\n                    pricingConfig={pricing}\n                  />\n                );\n              })}\n          </FlexView>\n          <Separator height={50} />\n          <Styled.PolicyWrapper>\n            <Text $renderAs=\"ab1-bold\" $color=\"GREEN_6\">\n              We have a no-questions-asked refund policy\n            </Text>\n            <Styled.RefundImageWrapper>\n              <Image\n                src={ILLUSTRATIONS.REFUND_POLICY}\n                width={168}\n                height={100}\n                withLoader={false}\n              />\n            </Styled.RefundImageWrapper>\n          </Styled.PolicyWrapper>\n        </Styled.PricingWrapper>\n      </Styled.Container>\n    );\n  }\n\n  return null;\n});\n\nexport default SessionPricing;\n"],"names":["SessionPricing","memo","isTeacher","studentId","updateButtonState","useTrialSessionContext","pricingData","getTrialPricing","isProcessed","isProcessing","isProcessingFailed","useGetTrialPricing","pricingPlans","intentLevel","fetchData","useCallback","useEffect","jsx","AppLoader","Error","jsxs","Styled.Container","Separator","SlideHeader","Styled.PricingWrapper","FlexView","pricing","index","PricingCards","Styled.PolicyWrapper","Text","Styled.RefundImageWrapper","Image","ILLUSTRATIONS"],"mappings":";;;;;;;;;;;;;;AAeM,MAAAA,IAAiBC,EAAK,MAAM;AAChC,QAAM,EAAE,WAAAC,GAAW,WAAAC,GAAW,mBAAAC,MAAsBC,EAAuB,GAErE;AAAA,IACJ,MAAMC;AAAA,IACN,KAAKC;AAAA,IACL,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,IACEC,EAAmB,oBAAoB;AAAA,IACzC,YAAYR;AAAA,EAAA,CACb,GAEK,EAAE,OAAOS,GAAc,cAAcC,EAAY,IAAIP,KAAe,IACpEQ,IAAYC,EAAY,MAAM;AAC9B,IAAAZ,KAAa,CAACK,KAChBD,EAAgB,oBAAoB,EAAE,YAAYJ,EAAW,CAAA;AAAA,EAE9D,GAAA,CAACI,GAAiBC,GAAaL,CAAS,CAAC;AAU5C,SARAa,EAAU,MAAM;AACJ,IAAAF;EAAA,GACT,CAACA,CAAS,CAAC,GAEdE,EAAU,MAAM;AACd,IAAAZ,EAAkB,SAAS,EAAE,YAAYK,GAAc,WAAW,IAAO;AAAA,EACxE,GAAA,CAACA,GAAcP,GAAWE,CAAiB,CAAC,GAE3CK,IACK,gBAAAQ,EAACC,GAAU,EAAA,QAAO,QAAQ,CAAA,IAG/BR,IACM,gBAAAO,EAAAE,GAAA,EAAM,QAAO,SAAQ,YAAYL,EAAW,CAAA,IAGlDN,IAEA,gBAAAY,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAJ,EAAAK,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,IACvB,gBAAAL,EAACM,GAAY,EAAA,cAAc,GAAI,CAAA;AAAA,IAC/B,gBAAAH,EAACI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACC,QAAO;AAAA,UACP,gBAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,WAAS;AAAA,UAER,UAAAZ,KACCD,KACA,MAAM,QAAQA,CAAY,KAC1BA,EAAa,IAAI,CAACc,GAASC,MAEvB,gBAAAV;AAAA,YAACW;AAAA,YAAA;AAAA,cAEC,YAAYD;AAAA,cACZ,YAAYd;AAAA,cACZ,eAAea;AAAA,YAAA;AAAA,YAHVC;AAAA,UAAA,CAMV;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAV,EAACK,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,MACvB,gBAAAF,EAACS,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAK,EAAA,WAAU,YAAW,QAAO,WAAU,UAE5C,8CAAA;AAAA,QACA,gBAAAb,EAACc,GAAA,EACC,UAAA,gBAAAd;AAAA,UAACe;AAAA,UAAA;AAAA,YACC,KAAKC,EAAc;AAAA,YACnB,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,YAAY;AAAA,UAAA;AAAA,QAAA,GAEhB;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA,IAIG;AACT,CAAC;"}
+{"version":3,"file":"pricing.js","sources":["../../../../../src/features/trial-session/comps/pricing/pricing.tsx"],"sourcesContent":["import { memo, useCallback, useEffect } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport Error from '../../../ui/error/error';\nimport Image from '../../../ui/image/image';\nimport FlexView from '../../../ui/layout/flex-view';\nimport AppLoader from '../../../ui/loader/app-loader/app-loader';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { useGetTrialPricing } from '../../api/trial-pricing';\nimport { useTrialSessionContext } from '../../context/use-trial-session-context';\nimport SlideHeader from '../slide-header';\nimport PricingCards from './pricing-cards';\nimport * as Styled from './pricing-styled';\n\nconst SessionPricing = memo(() => {\n  const { isTeacher, studentId, updateButtonState } = useTrialSessionContext();\n\n  const {\n    data: pricingData,\n    get: getTrialPricing,\n    isProcessed,\n    isProcessing,\n    isProcessingFailed,\n  } = useGetTrialPricing('trial-v3-pricing', {\n    student_id: studentId,\n  });\n\n  const { plans: pricingPlans, intent } = pricingData || {};\n  const fetchData = useCallback(() => {\n    if (studentId && !isProcessed) {\n      getTrialPricing('trial-v3-pricing', { student_id: studentId });\n    }\n  }, [getTrialPricing, isProcessed, studentId]);\n\n  useEffect(() => {\n    fetchData();\n  }, [fetchData]);\n\n  useEffect(() => {\n    updateButtonState('right', { isDisabled: isProcessing, isLoading: false });\n  }, [isProcessing, isTeacher, updateButtonState]);\n\n  if (isProcessing) {\n    return <AppLoader height=\"100vh\" />;\n  }\n\n  if (isProcessingFailed) {\n    return <Error height=\"100vh\" onTryAgain={fetchData} />;\n  }\n\n  if (isProcessed) {\n    return (\n      <Styled.Container>\n        <Separator height={60} />\n        <SlideHeader marginBottom={38} />\n        <Styled.PricingWrapper>\n          <FlexView\n            $width=\"100%\"\n            $flexDirection=\"row\"\n            $justifyContent=\"space-between\"\n            $flexGap={20}\n            $flexWrap\n          >\n            {intent &&\n              pricingPlans &&\n              Array.isArray(pricingPlans) &&\n              pricingPlans.map((pricing, index) => {\n                return (\n                  <PricingCards\n                    key={index}\n                    colorIndex={index}\n                    intentType={intent}\n                    pricingConfig={pricing}\n                  />\n                );\n              })}\n          </FlexView>\n          <Separator height={50} />\n          <Styled.PolicyWrapper>\n            <Text $renderAs=\"ab1-bold\" $color=\"GREEN_6\">\n              We have a no-questions-asked refund policy\n            </Text>\n            <Styled.RefundImageWrapper>\n              <Image\n                src={ILLUSTRATIONS.REFUND_POLICY}\n                width={168}\n                height={100}\n                withLoader={false}\n              />\n            </Styled.RefundImageWrapper>\n          </Styled.PolicyWrapper>\n        </Styled.PricingWrapper>\n      </Styled.Container>\n    );\n  }\n\n  return null;\n});\n\nexport default SessionPricing;\n"],"names":["SessionPricing","memo","isTeacher","studentId","updateButtonState","useTrialSessionContext","pricingData","getTrialPricing","isProcessed","isProcessing","isProcessingFailed","useGetTrialPricing","pricingPlans","intent","fetchData","useCallback","useEffect","jsx","AppLoader","Error","jsxs","Styled.Container","Separator","SlideHeader","Styled.PricingWrapper","FlexView","pricing","index","PricingCards","Styled.PolicyWrapper","Text","Styled.RefundImageWrapper","Image","ILLUSTRATIONS"],"mappings":";;;;;;;;;;;;;;AAeM,MAAAA,IAAiBC,EAAK,MAAM;AAChC,QAAM,EAAE,WAAAC,GAAW,WAAAC,GAAW,mBAAAC,MAAsBC,EAAuB,GAErE;AAAA,IACJ,MAAMC;AAAA,IACN,KAAKC;AAAA,IACL,aAAAC;AAAA,IACA,cAAAC;AAAA,IACA,oBAAAC;AAAA,EAAA,IACEC,EAAmB,oBAAoB;AAAA,IACzC,YAAYR;AAAA,EAAA,CACb,GAEK,EAAE,OAAOS,GAAc,QAAAC,EAAO,IAAIP,KAAe,CAAA,GACjDQ,IAAYC,EAAY,MAAM;AAC9B,IAAAZ,KAAa,CAACK,KAChBD,EAAgB,oBAAoB,EAAE,YAAYJ,EAAW,CAAA;AAAA,EAE9D,GAAA,CAACI,GAAiBC,GAAaL,CAAS,CAAC;AAU5C,SARAa,EAAU,MAAM;AACJ,IAAAF;EAAA,GACT,CAACA,CAAS,CAAC,GAEdE,EAAU,MAAM;AACd,IAAAZ,EAAkB,SAAS,EAAE,YAAYK,GAAc,WAAW,IAAO;AAAA,EACxE,GAAA,CAACA,GAAcP,GAAWE,CAAiB,CAAC,GAE3CK,IACK,gBAAAQ,EAACC,GAAU,EAAA,QAAO,QAAQ,CAAA,IAG/BR,IACM,gBAAAO,EAAAE,GAAA,EAAM,QAAO,SAAQ,YAAYL,EAAW,CAAA,IAGlDN,IAEA,gBAAAY,EAACC,GAAA,EACC,UAAA;AAAA,IAAC,gBAAAJ,EAAAK,GAAA,EAAU,QAAQ,GAAI,CAAA;AAAA,IACvB,gBAAAL,EAACM,GAAY,EAAA,cAAc,GAAI,CAAA;AAAA,IAC/B,gBAAAH,EAACI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAP;AAAA,QAACQ;AAAA,QAAA;AAAA,UACC,QAAO;AAAA,UACP,gBAAe;AAAA,UACf,iBAAgB;AAAA,UAChB,UAAU;AAAA,UACV,WAAS;AAAA,UAER,UAAAZ,KACCD,KACA,MAAM,QAAQA,CAAY,KAC1BA,EAAa,IAAI,CAACc,GAASC,MAEvB,gBAAAV;AAAA,YAACW;AAAA,YAAA;AAAA,cAEC,YAAYD;AAAA,cACZ,YAAYd;AAAA,cACZ,eAAea;AAAA,YAAA;AAAA,YAHVC;AAAA,UAAA,CAMV;AAAA,QAAA;AAAA,MACL;AAAA,MACA,gBAAAV,EAACK,GAAU,EAAA,QAAQ,GAAI,CAAA;AAAA,MACvB,gBAAAF,EAACS,GAAA,EACC,UAAA;AAAA,QAAA,gBAAAZ,EAACa,GAAK,EAAA,WAAU,YAAW,QAAO,WAAU,UAE5C,8CAAA;AAAA,QACA,gBAAAb,EAACc,GAAA,EACC,UAAA,gBAAAd;AAAA,UAACe;AAAA,UAAA;AAAA,YACC,KAAKC,EAAc;AAAA,YACnB,OAAO;AAAA,YACP,QAAQ;AAAA,YACR,YAAY;AAAA,UAAA;AAAA,QAAA,GAEhB;AAAA,MAAA,GACF;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA,IAIG;AACT,CAAC;"}

package/dist/features/ui/arrow-tooltip/arrow-tooltip.js

@@ -1,17 +1,17 @@
-import { jsxs as I, Fragment as U, jsx as r } from "react/jsx-runtime";
-import W from "../../../node_modules/lodash.throttle/index.js";
-import { useRef as Y, useState as m, useCallback as $, useEffect as H } from "react";
-import { useTheme as P } from "styled-components";
+import { jsxs as D, Fragment as I, jsx as r } from "react/jsx-runtime";
+import U from "../../../node_modules/lodash.throttle/index.js";
+import { useRef as W, useState as m, useCallback as $, useEffect as Y } from "react";
+import { useTheme as H } from "styled-components";
 import C from "../layout/flex-view.js";
-import V from "../portal/portal.js";
-import Z from "../text/text.js";
-import { TooltipBody as q } from "./arrow-tooltip-styled.js";
-import { computeTooltipNewCoOrdinates as y } from "./arrow-tooltip-util.js";
-const G = 8, J = 100, K = ({
+import P from "../portal/portal.js";
+import V from "../text/text.js";
+import { TooltipBody as Z } from "./arrow-tooltip-styled.js";
+import { computeTooltipNewCoOrdinates as q } from "./arrow-tooltip-util.js";
+const y = 8, G = 100, J = ({
   isAnimated: O,
   alwaysVisible: o = !1,
   arrowColor: T,
-  arrowSize: h = G,
+  arrowSize: h = y,
   arrowXCoOrdinates: g,
   arrowYCoOrdinates: w,
   backgroundColor: R,
@@ -27,62 +27,61 @@ const G = 8, J = 100, K = ({
   tooltipYCoOrdinates: k,
   width: F,
   widthX: L,
-  zIndex: M,
-  parentWidth: S
+  zIndex: M
 }) => {
-  const { arrowTooltip: X } = P(), { tooltipVariants: a } = X, { backgroundColorName: _ } = a[i], u = Y(null), [j, p] = m(o), [v, z] = m(
+  const { arrowTooltip: S } = H(), { tooltipVariants: a } = S, { backgroundColorName: X } = a[i], u = W(null), [_, p] = m(o), [j, v] = m(
     null
   ), s = $(
     (e, n) => {
-      z(e), p(n);
+      v(e), p(n);
     },
     []
-  ), B = $(() => {
+  ), z = $(() => {
     if (t || o)
       return null;
     s(null, !1);
-  }, [o, s, t]), d = W(() => {
+  }, [o, s, t]), d = U(() => {
     var f;
     const { current: e } = u;
     if (t || !e) return null;
-    const n = (f = e.children[0]) == null ? void 0 : f.getBoundingClientRect(), D = n ? y(c, n) : null;
-    return s(D, !0), null;
-  }, J);
-  return H(() => {
+    const n = (f = e.children[0]) == null ? void 0 : f.getBoundingClientRect(), B = n ? q(c, n) : null;
+    return s(B, !0), null;
+  }, G);
+  return Y(() => {
     t && p(!1), o && d();
-  }, [o, t]), /* @__PURE__ */ I(U, { children: [
+  }, [o, t]), /* @__PURE__ */ D(I, { children: [
     /* @__PURE__ */ r(
       C,
       {
-        $width: S || "fit-content",
+        $width: "fit-content",
         ref: u,
         onMouseEnter: d,
-        onMouseLeave: B,
+        onMouseLeave: z,
         children: /* @__PURE__ */ r(C, { children: x })
       }
     ),
-    j && /* @__PURE__ */ r(V, { portalId: "tooltip-root", children: /* @__PURE__ */ r(
-      q,
+    _ && /* @__PURE__ */ r(P, { portalId: "tooltip-root", children: /* @__PURE__ */ r(
+      Z,
       {
         $arrowSize: h,
         $arrowXCoOrdinates: g,
         $arrowYCoOrdinates: w,
         $position: c,
         $renderAs: i,
-        $tooltipCoOrdinates: v,
+        $tooltipCoOrdinates: j,
         $tooltipOffset: E,
         $tooltipXCoOrdinates: N,
         $tooltipYCoOrdinates: k,
         $width: F,
         $widthX: L,
         $zIndex: M,
-        $background: _,
+        $background: X,
         $backgroundColor: R,
         $arrowColor: T,
         $borderColor: b,
         $isAnimated: O,
         children: typeof l == "string" ? /* @__PURE__ */ r(
-          Z,
+          V,
           {
             $renderAs: A || "body3",
             $color: a[i].textColorName,
@@ -93,8 +92,8 @@ const G = 8, J = 100, K = ({
       }
     ) })
   ] });
-}, co = K;
+}, so = J;
 export {
-  co as default
+  so as default
 };
 //# sourceMappingURL=arrow-tooltip.js.map

package/dist/features/ui/arrow-tooltip/arrow-tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n  IArrowTooltipProps,\n  THandleVisibleNCoOrdinatesProps,\n  TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport Text from '../text/text';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\n\nconst DEFAULT_ARROW_SIZE = 8;\nconst THROTTLE_DURATION = 100;\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n  isAnimated,\n  alwaysVisible = false,\n  arrowColor,\n  arrowSize = DEFAULT_ARROW_SIZE,\n  arrowXCoOrdinates,\n  arrowYCoOrdinates,\n  backgroundColor,\n  borderColor,\n  children,\n  hidden,\n  position,\n  renderAs,\n  textVariant,\n  tooltipItem,\n  tooltipOffset,\n  tooltipXCoOrdinates,\n  tooltipYCoOrdinates,\n  width,\n  widthX,\n  zIndex,\n  parentWidth,\n}) => {\n  const { arrowTooltip } = useTheme();\n  const { tooltipVariants } = arrowTooltip;\n  const { backgroundColorName } = tooltipVariants[renderAs];\n\n  const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(alwaysVisible);\n  const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n    null,\n  );\n\n  const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n    (newCoOrdinates, visibility) => {\n      setTooltipCoOrdinates(newCoOrdinates);\n      setVisible(visibility);\n    },\n    [],\n  );\n\n  const handleVisibility = useCallback(() => {\n    if (hidden || alwaysVisible) {\n      return null;\n    }\n\n    handleVisibleNCoOrdinates(null, false);\n\n    return;\n  }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n  const handleOnMouseEnter = throttle(() => {\n    const { current } = tooltipWrapperRef;\n\n    if (hidden || !current) return null;\n\n    const boundingClientRect = current.children[0]?.getBoundingClientRect();\n    const newCoOrdinates = boundingClientRect\n      ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n      : null;\n\n    handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n    return null;\n  }, THROTTLE_DURATION);\n\n  useEffect(() => {\n    if (hidden) {\n      setVisible(false);\n    }\n\n    if (alwaysVisible) {\n      handleOnMouseEnter();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [alwaysVisible, hidden]);\n\n  return (\n    <>\n      <FlexView\n        $width={parentWidth || 'fit-content'}\n        ref={tooltipWrapperRef}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleVisibility}\n      >\n        <FlexView>{children}</FlexView>\n      </FlexView>\n      {visible && (\n        <Portal portalId=\"tooltip-root\">\n          <Styled.TooltipBody\n            $arrowSize={arrowSize}\n            $arrowXCoOrdinates={arrowXCoOrdinates}\n            $arrowYCoOrdinates={arrowYCoOrdinates}\n            $position={position}\n            $renderAs={renderAs}\n            $tooltipCoOrdinates={tooltipCoOrdinates}\n            $tooltipOffset={tooltipOffset}\n            $tooltipXCoOrdinates={tooltipXCoOrdinates}\n            $tooltipYCoOrdinates={tooltipYCoOrdinates}\n            $width={width}\n            $widthX={widthX}\n            $zIndex={zIndex}\n            $background={backgroundColorName}\n            $backgroundColor={backgroundColor}\n            $arrowColor={arrowColor}\n            $borderColor={borderColor}\n            $isAnimated={isAnimated}\n          >\n            {typeof tooltipItem === 'string' ? (\n              <Text\n                $renderAs={textVariant || 'body3'}\n                $color={tooltipVariants[renderAs].textColorName}\n                $align=\"center\"\n              >\n                {tooltipItem}\n              </Text>\n            ) : (\n              tooltipItem\n            )}\n          </Styled.TooltipBody>\n        </Portal>\n      )}\n    </>\n  );\n};\n\nexport default ArrowTooltip;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION","ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","parentWidth","arrowTooltip","useTheme","tooltipVariants","backgroundColorName","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","useEffect","jsxs","Fragment","jsx","FlexView","Portal","Styled.TooltipBody","Text","ArrowTooltip$1"],"mappings":";;;;;;;;;AAgBA,MAAMA,IAAqB,GACrBC,IAAoB,KAEpBC,IAAuC,CAAC;AAAA,EAC5C,YAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,YAAAC;AAAA,EACA,WAAAC,IAAYN;AAAA,EACZ,mBAAAO;AAAA,EACA,mBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACE,QAAA,EAAE,cAAAC,MAAiBC,KACnB,EAAE,iBAAAC,EAAoB,IAAAF,GACtB,EAAE,qBAAAG,EAAA,IAAwBD,EAAgBZ,CAAQ,GAElDc,IAAoBC,EAAuB,IAAI,GAC/C,CAACC,GAASC,CAAU,IAAIC,EAAS5B,CAAa,GAC9C,CAAC6B,GAAoBC,CAAqB,IAAIF;AAAA,IAClD;AAAA,EAAA,GAGIG,IAA6DC;AAAA,IACjE,CAACC,GAAgBC,MAAe;AAC9B,MAAAJ,EAAsBG,CAAc,GACpCN,EAAWO,CAAU;AAAA,IACvB;AAAA,IACA,CAAC;AAAA,EAAA,GAGGC,IAAmBH,EAAY,MAAM;AACzC,QAAIxB,KAAUR;AACL,aAAA;AAGT,IAAA+B,EAA0B,MAAM,EAAK;AAAA,EAGpC,GAAA,CAAC/B,GAAe+B,GAA2BvB,CAAM,CAAC,GAE/C4B,IAAqBC,EAAS,MAAM;;AAClC,UAAA,EAAE,SAAAC,EAAY,IAAAd;AAEhB,QAAAhB,KAAU,CAAC8B,EAAgB,QAAA;AAE/B,UAAMC,KAAqBC,IAAAF,EAAQ,SAAS,CAAC,MAAlB,gBAAAE,EAAqB,yBAC1CP,IAAiBM,IACnBE,EAA6BhC,GAAU8B,CAAkB,IACzD;AAEJ,WAAAR,EAA0BE,GAAgB,EAAI,GAEvC;AAAA,KACNpC,CAAiB;AAEpB,SAAA6C,EAAU,MAAM;AACd,IAAIlC,KACFmB,EAAW,EAAK,GAGd3B,KACiBoC;EACrB,GAEC,CAACpC,GAAeQ,CAAM,CAAC,GAItB,gBAAAmC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,QAAQ3B,KAAe;AAAA,QACvB,KAAKK;AAAA,QACL,cAAcY;AAAA,QACd,cAAcD;AAAA,QAEd,UAAA,gBAAAU,EAACC,KAAU,UAAAvC,EAAS,CAAA;AAAA,MAAA;AAAA,IACtB;AAAA,IACCmB,KACC,gBAAAmB,EAACE,GAAO,EAAA,UAAS,gBACf,UAAA,gBAAAF;AAAA,MAACG;AAAAA,MAAA;AAAA,QACC,YAAY9C;AAAA,QACZ,oBAAoBC;AAAA,QACpB,oBAAoBC;AAAA,QACpB,WAAWK;AAAA,QACX,WAAWC;AAAA,QACX,qBAAqBmB;AAAA,QACrB,gBAAgBhB;AAAA,QAChB,sBAAsBC;AAAA,QACtB,sBAAsBC;AAAA,QACtB,QAAQC;AAAA,QACR,SAASC;AAAA,QACT,SAASC;AAAA,QACT,aAAaK;AAAA,QACb,kBAAkBlB;AAAA,QAClB,aAAaJ;AAAA,QACb,cAAcK;AAAA,QACd,aAAaP;AAAA,QAEZ,UAAA,OAAOa,KAAgB,WACtB,gBAAAiC;AAAA,UAACI;AAAA,UAAA;AAAA,YACC,WAAWtC,KAAe;AAAA,YAC1B,QAAQW,EAAgBZ,CAAQ,EAAE;AAAA,YAClC,QAAO;AAAA,YAEN,UAAAE;AAAA,UAAA;AAAA,QAAA,IAGHA;AAAA,MAAA;AAAA,IAAA,GAGN;AAAA,EAEJ,EAAA,CAAA;AAEJ,GAEAsC,KAAepD;"}
+{"version":3,"file":"arrow-tooltip.js","sources":["../../../../src/features/ui/arrow-tooltip/arrow-tooltip.tsx"],"sourcesContent":["import type {\n  IArrowTooltipProps,\n  THandleVisibleNCoOrdinatesProps,\n  TTooltipCoOrdinatesProps,\n} from './arrow-tooltip-types';\n\nimport throttle from 'lodash.throttle';\nimport { useState, type FC, useCallback, useRef, useEffect } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../layout/flex-view';\nimport Portal from '../portal/portal';\nimport Text from '../text/text';\nimport * as Styled from './arrow-tooltip-styled';\nimport { computeTooltipNewCoOrdinates } from './arrow-tooltip-util';\n\nconst DEFAULT_ARROW_SIZE = 8;\nconst THROTTLE_DURATION = 100;\n\nconst ArrowTooltip: FC<IArrowTooltipProps> = ({\n  isAnimated,\n  alwaysVisible = false,\n  arrowColor,\n  arrowSize = DEFAULT_ARROW_SIZE,\n  arrowXCoOrdinates,\n  arrowYCoOrdinates,\n  backgroundColor,\n  borderColor,\n  children,\n  hidden,\n  position,\n  renderAs,\n  textVariant,\n  tooltipItem,\n  tooltipOffset,\n  tooltipXCoOrdinates,\n  tooltipYCoOrdinates,\n  width,\n  widthX,\n  zIndex,\n}) => {\n  const { arrowTooltip } = useTheme();\n  const { tooltipVariants } = arrowTooltip;\n  const { backgroundColorName } = tooltipVariants[renderAs];\n\n  const tooltipWrapperRef = useRef<HTMLDivElement>(null);\n  const [visible, setVisible] = useState(alwaysVisible);\n  const [tooltipCoOrdinates, setTooltipCoOrdinates] = useState<TTooltipCoOrdinatesProps | null>(\n    null,\n  );\n\n  const handleVisibleNCoOrdinates: THandleVisibleNCoOrdinatesProps = useCallback(\n    (newCoOrdinates, visibility) => {\n      setTooltipCoOrdinates(newCoOrdinates);\n      setVisible(visibility);\n    },\n    [],\n  );\n\n  const handleVisibility = useCallback(() => {\n    if (hidden || alwaysVisible) {\n      return null;\n    }\n\n    handleVisibleNCoOrdinates(null, false);\n\n    return;\n  }, [alwaysVisible, handleVisibleNCoOrdinates, hidden]);\n\n  const handleOnMouseEnter = throttle(() => {\n    const { current } = tooltipWrapperRef;\n\n    if (hidden || !current) return null;\n\n    const boundingClientRect = current.children[0]?.getBoundingClientRect();\n    const newCoOrdinates = boundingClientRect\n      ? computeTooltipNewCoOrdinates(position, boundingClientRect)\n      : null;\n\n    handleVisibleNCoOrdinates(newCoOrdinates, true);\n\n    return null;\n  }, THROTTLE_DURATION);\n\n  useEffect(() => {\n    if (hidden) {\n      setVisible(false);\n    }\n\n    if (alwaysVisible) {\n      handleOnMouseEnter();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [alwaysVisible, hidden]);\n\n  return (\n    <>\n      <FlexView\n        $width=\"fit-content\"\n        ref={tooltipWrapperRef}\n        onMouseEnter={handleOnMouseEnter}\n        onMouseLeave={handleVisibility}\n      >\n        <FlexView>{children}</FlexView>\n      </FlexView>\n      {visible && (\n        <Portal portalId=\"tooltip-root\">\n          <Styled.TooltipBody\n            $arrowSize={arrowSize}\n            $arrowXCoOrdinates={arrowXCoOrdinates}\n            $arrowYCoOrdinates={arrowYCoOrdinates}\n            $position={position}\n            $renderAs={renderAs}\n            $tooltipCoOrdinates={tooltipCoOrdinates}\n            $tooltipOffset={tooltipOffset}\n            $tooltipXCoOrdinates={tooltipXCoOrdinates}\n            $tooltipYCoOrdinates={tooltipYCoOrdinates}\n            $width={width}\n            $widthX={widthX}\n            $zIndex={zIndex}\n            $background={backgroundColorName}\n            $backgroundColor={backgroundColor}\n            $arrowColor={arrowColor}\n            $borderColor={borderColor}\n            $isAnimated={isAnimated}\n          >\n            {typeof tooltipItem === 'string' ? (\n              <Text\n                $renderAs={textVariant || 'body3'}\n                $color={tooltipVariants[renderAs].textColorName}\n                $align=\"center\"\n              >\n                {tooltipItem}\n              </Text>\n            ) : (\n              tooltipItem\n            )}\n          </Styled.TooltipBody>\n        </Portal>\n      )}\n    </>\n  );\n};\n\nexport default ArrowTooltip;\n"],"names":["DEFAULT_ARROW_SIZE","THROTTLE_DURATION","ArrowTooltip","isAnimated","alwaysVisible","arrowColor","arrowSize","arrowXCoOrdinates","arrowYCoOrdinates","backgroundColor","borderColor","children","hidden","position","renderAs","textVariant","tooltipItem","tooltipOffset","tooltipXCoOrdinates","tooltipYCoOrdinates","width","widthX","zIndex","arrowTooltip","useTheme","tooltipVariants","backgroundColorName","tooltipWrapperRef","useRef","visible","setVisible","useState","tooltipCoOrdinates","setTooltipCoOrdinates","handleVisibleNCoOrdinates","useCallback","newCoOrdinates","visibility","handleVisibility","handleOnMouseEnter","throttle","current","boundingClientRect","_a","computeTooltipNewCoOrdinates","useEffect","jsxs","Fragment","jsx","FlexView","Portal","Styled.TooltipBody","Text","ArrowTooltip$1"],"mappings":"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"}

package/dist/features/ui/constants/z-index.js

@@ -1,7 +1,7 @@
 const _ = {
   CHAPTER_CROWN_ICON: 4,
   CHAPTER_PLUS_ICON: 2,
-  CHAPTER_PROGRESS_SVG: 2,
+  CHAPTER_PROGRESS_SVG: 1,
   LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,
   LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,
   MODAL: 20,

package/dist/features/ui/constants/z-index.js.map

@@ -1 +1 @@
-{"version":3,"file":"z-index.js","sources":["../../../../src/features/ui/constants/z-index.ts"],"sourcesContent":["const ZINDEX = {\n  CHAPTER_CROWN_ICON: 4,\n  CHAPTER_PLUS_ICON: 2,\n  CHAPTER_PROGRESS_SVG: 2,\n  LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,\n  LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,\n  MODAL: 20,\n  SAT_SUMMARY_SCORE: 25, //* SAT_SUMMARY_SCORE > MODAL\n  CANVAS_SCRIBBLING: 26, //* CANVAS_SCRIBBLING > Learnosity\n  TILE_CONTAINER: 30, //whiteboard\n  QUESTION_TIPS: -1,\n  DESMOS_CALCULATOR: 2,\n  GOAL_CHAPTER_SHEETS_MENU: 4,\n} as const;\n\nexport { ZINDEX };\n"],"names":["ZINDEX"],"mappings":"AAAA,MAAMA,IAAS;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,OAAO;AAAA,EACP,mBAAmB;AAAA;AAAA,EACnB,mBAAmB;AAAA;AAAA,EACnB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,0BAA0B;AAC5B;"}
+{"version":3,"file":"z-index.js","sources":["../../../../src/features/ui/constants/z-index.ts"],"sourcesContent":["const ZINDEX = {\n  CHAPTER_CROWN_ICON: 4,\n  CHAPTER_PLUS_ICON: 2,\n  CHAPTER_PROGRESS_SVG: 1,\n  LPAR_SHEET_ITEM_BOTTOM_DASH_BOX: 1,\n  LPAR_SHEET_ITEM_TOP_VERTICAL_ICON: 2,\n  MODAL: 20,\n  SAT_SUMMARY_SCORE: 25, //* SAT_SUMMARY_SCORE > MODAL\n  CANVAS_SCRIBBLING: 26, //* CANVAS_SCRIBBLING > Learnosity\n  TILE_CONTAINER: 30, //whiteboard\n  QUESTION_TIPS: -1,\n  DESMOS_CALCULATOR: 2,\n  GOAL_CHAPTER_SHEETS_MENU: 4,\n} as const;\n\nexport { ZINDEX };\n"],"names":["ZINDEX"],"mappings":"AAAA,MAAMA,IAAS;AAAA,EACb,oBAAoB;AAAA,EACpB,mBAAmB;AAAA,EACnB,sBAAsB;AAAA,EACtB,iCAAiC;AAAA,EACjC,mCAAmC;AAAA,EACnC,OAAO;AAAA,EACP,mBAAmB;AAAA;AAAA,EACnB,mBAAmB;AAAA;AAAA,EACnB,gBAAgB;AAAA;AAAA,EAChB,eAAe;AAAA,EACf,mBAAmB;AAAA,EACnB,0BAA0B;AAC5B;"}

package/dist/features/ui/context-menu/context-menu-styled.js

@@ -1,41 +1,27 @@
-import o from "styled-components";
-const d = o.div`
-  width: auto;
+import e from "styled-components";
+const s = e.div`
+  width: fit-content;
   height: fit-content;
   position: relative;
   border-radius: 50%;
-`, f = o.div(
-  ({
-    $visible: t,
-    $menuOffset: a,
-    $startLeft: i,
-    $menuZIndex: s,
-    $placeTop: e,
-    $menuWidth: r,
-    $menuWidthX: n,
-    theme: p
-  }) => {
-    const { layout: u } = p;
-    return `
+`, p = e.div(
+  ({ $visible: t, $menuOffset: o, $startLeft: n, $menuZIndex: i, $placeTop: r }) => `
     position: absolute;
-    width: ${r ? `${r}` : "auto"}${typeof r == "number" ? "px" : ""};
-    ${n ? `width: ${n * u.gutter}px;` : ""}
-    top: calc(${e ? "0% -" : "100% +"} ${a ?? 0}px);
-    ${i ? "left: 0" : "right: 0"};
-    z-index: ${s ?? "unset"};
+    top: calc(${r ? "0% -" : "100% +"} ${o ?? 0}px);
+    ${n ? "left: 0" : "right: 0"};
+    z-index: ${i ?? "unset"};
 
     transform-origin: top;
-    transform: scaleY(${t ? 1 : 0}) rotate(${e ? 180 : 0}deg);
+    transform: scaleY(${t ? 1 : 0}) rotate(${r ? 180 : 0}deg);
     opacity: ${t ? 1 : 0};
     transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;
-  `;
-  }
-), $ = o.div(({ $placeTop: t }) => `
+  `
+), d = e.div(({ $placeTop: t }) => `
     transform: rotate(${t ? 180 : 0}deg);
   `);
 export {
-  $ as MenuElementWrapper,
-  f as OptionsMenuWrapper,
-  d as TargetElementWrapper
+  d as MenuElementWrapper,
+  p as OptionsMenuWrapper,
+  s as TargetElementWrapper
 };
 //# sourceMappingURL=context-menu-styled.js.map

package/dist/features/ui/context-menu/context-menu-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"context-menu-styled.js","sources":["../../../../src/features/ui/context-menu/context-menu-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst TargetElementWrapper = styled.div`\n  width: auto;\n  height: fit-content;\n  position: relative;\n  border-radius: 50%;\n`;\n\ninterface IOptionsMenuWrapperProps {\n  $visible: boolean;\n  $startLeft?: boolean;\n  $menuOffset?: number;\n  $menuZIndex?: number;\n  $placeTop?: boolean;\n  $menuWidth?: number | string;\n  $menuWidthX?: number;\n}\n\nconst OptionsMenuWrapper = styled.div<IOptionsMenuWrapperProps>(\n  ({\n    $visible,\n    $menuOffset,\n    $startLeft,\n    $menuZIndex,\n    $placeTop,\n    $menuWidth,\n    $menuWidthX,\n    theme,\n  }) => {\n    const { layout } = theme;\n\n    return `\n    position: absolute;\n    width: ${$menuWidth ? `${$menuWidth}` : 'auto'}${typeof $menuWidth === 'number' ? 'px' : ''};\n    ${$menuWidthX ? `width: ${$menuWidthX * layout.gutter}px;` : ''}\n    top: calc(${$placeTop ? '0% -' : '100% +'} ${$menuOffset ?? 0}px);\n    ${$startLeft ? 'left: 0' : 'right: 0'};\n    z-index: ${$menuZIndex ?? 'unset'};\n\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0}) rotate(${$placeTop ? 180 : 0}deg);\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n  `;\n  },\n);\n\ninterface IMenuElementWrapperProps {\n  $placeTop?: boolean;\n}\n\nconst MenuElementWrapper = styled.div<IMenuElementWrapperProps>(({ $placeTop }) => {\n  return `\n    transform: rotate(${$placeTop ? 180 : 0}deg);\n  `;\n});\n\nexport { TargetElementWrapper, OptionsMenuWrapper, MenuElementWrapper };\n"],"names":["TargetElementWrapper","styled","OptionsMenuWrapper","$visible","$menuOffset","$startLeft","$menuZIndex","$placeTop","$menuWidth","$menuWidthX","theme","layout","MenuElementWrapper"],"mappings":";AAEA,MAAMA,IAAuBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAiB9BC,IAAqBD,EAAO;AAAA,EAChC,CAAC;AAAA,IACC,UAAAE;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,EAAA,MACI;AACE,UAAA,EAAE,QAAAC,EAAW,IAAAD;AAEZ,WAAA;AAAA;AAAA,aAEEF,IAAa,GAAGA,CAAU,KAAK,MAAM,GAAG,OAAOA,KAAe,WAAW,OAAO,EAAE;AAAA,MACzFC,IAAc,UAAUA,IAAcE,EAAO,MAAM,QAAQ,EAAE;AAAA,gBACnDJ,IAAY,SAAS,QAAQ,IAAIH,KAAe,CAAC;AAAA,MAC3DC,IAAa,YAAY,UAAU;AAAA,eAC1BC,KAAe,OAAO;AAAA;AAAA;AAAA,wBAGbH,IAAW,IAAI,CAAC,YAAYI,IAAY,MAAM,CAAC;AAAA,eACxDJ,IAAW,IAAI,CAAC;AAAA;AAAA;AAAA,EAG7B;AACF,GAMMS,IAAqBX,EAAO,IAA8B,CAAC,EAAE,WAAAM,QAC1D;AAAA,wBACeA,IAAY,MAAM,CAAC;AAAA,GAE1C;"}
+{"version":3,"file":"context-menu-styled.js","sources":["../../../../src/features/ui/context-menu/context-menu-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nconst TargetElementWrapper = styled.div`\n  width: fit-content;\n  height: fit-content;\n  position: relative;\n  border-radius: 50%;\n`;\n\ninterface IOptionsMenuWrapperProps {\n  $visible: boolean;\n  $startLeft?: boolean;\n  $menuOffset?: number;\n  $menuZIndex?: number;\n  $placeTop?: boolean;\n}\n\nconst OptionsMenuWrapper = styled.div<IOptionsMenuWrapperProps>(\n  ({ $visible, $menuOffset, $startLeft, $menuZIndex, $placeTop }) => {\n    return `\n    position: absolute;\n    top: calc(${$placeTop ? '0% -' : '100% +'} ${$menuOffset ?? 0}px);\n    ${$startLeft ? 'left: 0' : 'right: 0'};\n    z-index: ${$menuZIndex ?? 'unset'};\n\n    transform-origin: top;\n    transform: scaleY(${$visible ? 1 : 0}) rotate(${$placeTop ? 180 : 0}deg);\n    opacity: ${$visible ? 1 : 0};\n    transition: transform 0.2s ease-in-out, opacity 0.2s ease-in-out;\n  `;\n  },\n);\n\ninterface IMenuElementWrapperProps {\n  $placeTop?: boolean;\n}\n\nconst MenuElementWrapper = styled.div<IMenuElementWrapperProps>(({ $placeTop }) => {\n  return `\n    transform: rotate(${$placeTop ? 180 : 0}deg);\n  `;\n});\n\nexport { TargetElementWrapper, OptionsMenuWrapper, MenuElementWrapper };\n"],"names":["TargetElementWrapper","styled","OptionsMenuWrapper","$visible","$menuOffset","$startLeft","$menuZIndex","$placeTop","MenuElementWrapper"],"mappings":";AAEA,MAAMA,IAAuBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAe9BC,IAAqBD,EAAO;AAAA,EAChC,CAAC,EAAE,UAAAE,GAAU,aAAAC,GAAa,YAAAC,GAAY,aAAAC,GAAa,WAAAC,QAC1C;AAAA;AAAA,gBAEKA,IAAY,SAAS,QAAQ,IAAIH,KAAe,CAAC;AAAA,MAC3DC,IAAa,YAAY,UAAU;AAAA,eAC1BC,KAAe,OAAO;AAAA;AAAA;AAAA,wBAGbH,IAAW,IAAI,CAAC,YAAYI,IAAY,MAAM,CAAC;AAAA,eACxDJ,IAAW,IAAI,CAAC;AAAA;AAAA;AAI/B,GAMMK,IAAqBP,EAAO,IAA8B,CAAC,EAAE,WAAAM,QAC1D;AAAA,wBACeA,IAAY,MAAM,CAAC;AAAA,GAE1C;"}