@cuemath/leap 3.3.3-j1 → 3.3.3

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js

@@ -1,19 +1,19 @@
-import { ILLUSTRATIONS as o } from "../../../../assets/illustrations/illustrations.js";
-const e = [
+import { ILLUSTRATIONS as t } from "../../../../assets/illustrations/illustrations.js";
+const o = [
   {
-    icon: o.HANDSHAKE,
-    title: "Find the perfect tutor match for your child's goals"
+    icon: t.HANDSHAKE,
+    title: "Help us find the right tutor for your child"
   },
   {
-    icon: o.CALENDAR_PURPLE,
-    title: "Schedule your FREE session at a convenient time"
+    icon: t.CALENDAR_PURPLE,
+    title: "Schedule your FREE class with the tutor"
   },
   {
-    icon: o.MONEY,
-    title: "Choose a plan and start your learning journey"
+    icon: t.MONEY,
+    title: "Pay & continue with our flexible classes"
   }
 ];
 export {
-  e as onboardingGuideSteps
+  o as onboardingGuideSteps
 };
 //# sourceMappingURL=onboarding-guide-constants.js.map

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-guide-constants.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.ts"],"sourcesContent":["import { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\n\nexport const onboardingGuideSteps = [\n  {\n    icon: ILLUSTRATIONS.HANDSHAKE,\n    title: `Find the perfect tutor match for your child's goals`,\n  },\n  {\n    icon: ILLUSTRATIONS.CALENDAR_PURPLE,\n    title: `Schedule your FREE session at a convenient time`,\n  },\n  {\n    icon: ILLUSTRATIONS.MONEY,\n    title: `Choose a plan and start your learning journey`,\n  },\n];\n"],"names":["onboardingGuideSteps","ILLUSTRATIONS"],"mappings":";AAEO,MAAMA,IAAuB;AAAA,EAClC;AAAA,IACE,MAAMC,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AACF;"}
+{"version":3,"file":"onboarding-guide-constants.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide-constants.ts"],"sourcesContent":["import { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\n\nexport const onboardingGuideSteps = [\n  {\n    icon: ILLUSTRATIONS.HANDSHAKE,\n    title: `Help us find the right tutor for your child`,\n  },\n  {\n    icon: ILLUSTRATIONS.CALENDAR_PURPLE,\n    title: `Schedule your FREE class with the tutor`,\n  },\n  {\n    icon: ILLUSTRATIONS.MONEY,\n    title: `Pay & continue with our flexible classes`,\n  },\n];\n"],"names":["onboardingGuideSteps","ILLUSTRATIONS"],"mappings":";AAEO,MAAMA,IAAuB;AAAA,EAClC;AAAA,IACE,MAAMC,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AAAA,EACA;AAAA,IACE,MAAMA,EAAc;AAAA,IACpB,OAAO;AAAA,EACT;AACF;"}

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.js

@@ -1,68 +1,39 @@
-import p from "styled-components";
+import e from "styled-components";
 import o from "../../../ui/layout/flex-view.js";
-const h = p(o)(({
-  theme: { colors: t, mediaQueries: e },
-  isHorizontalLayout: i
-}) => `
-      position: relative;
-
-      ${i ? `
-          border-right: 2px solid ${t.WHITE_T_15};
-          &:first-child {
-            padding-left: 0;
-          }
-          &:last-child {
-            padding-right: 0;
-          }
-        ` : `
-          &::after {
-            content: '';
-            position: absolute;
-            width: 32px;
-            height: 2px;
-            right: -20px;
-            top: 28px;
-            background-color: ${t.WHITE_T_15};
-          }
-        `}
-
-      &:last-child {
-        border-right: none;
-        &::after {
-          display: none;
-        }
-      }
-
-      ${e.minWidthSmallDesktop} {
-        ${!i && `margin-bottom: 48px;
-            &::after {
-              content: '';
-              position: absolute;
-              width: 2px;
-              top: unset;
-              height: 24px;
-              bottom: -36px;
-              left: 28px;
-              background-color: ${t.WHITE_T_15};
-            }
-          `}
-        
-      }
-    `), n = p(o)(({
-  theme: { mediaQueries: t },
-  isHorizontalLayout: e
-}) => `
+const h = e(o)(({ theme: { colors: t, mediaQueries: i } }) => `
+  position: relative;
+  &:not(:last-child)::after {
+    content: '';
+    width: 37px;
+    height: 2px;
+    right: -32px;
+    top: 25px;
+    position: absolute;
+    background-color: ${t.WHITE_T_15};
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+  ${i.minWidthSmallDesktop} {
+    margin-bottom: 48px;
+    &:not(:last-child)::after {
+      left: 28px;
+      bottom: -36px;
+      right: unset;
+      top: unset;
+      width: 2px;
+      height: 24px;
+    }
+  }
+`), m = e(o)(({ theme: { mediaQueries: t } }) => `
   width: 100%;
   max-width: 350px;
-  ${t.minWidthTablet} {
-    max-width: ${e ? "100%" : "350px"};
-  }
   ${t.minWidthSmallDesktop} {
-    max-width: ${e ? "100%" : "310px"};
+    max-width: unset;
   }
 `);
 export {
   h as StepItem,
-  n as StepWrapper
+  m as StepWrapper
 };
 //# sourceMappingURL=onboarding-guide-styled.js.map

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-guide-styled.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const StepItem = styled(FlexView)<{ isHorizontalLayout: boolean }>(({\n  theme: { colors, mediaQueries },\n  isHorizontalLayout,\n}) => {\n  return `\n      position: relative;\n\n      ${\n        isHorizontalLayout\n          ? `\n          border-right: 2px solid ${colors.WHITE_T_15};\n          &:first-child {\n            padding-left: 0;\n          }\n          &:last-child {\n            padding-right: 0;\n          }\n        `\n          : `\n          &::after {\n            content: '';\n            position: absolute;\n            width: 32px;\n            height: 2px;\n            right: -20px;\n            top: 28px;\n            background-color: ${colors.WHITE_T_15};\n          }\n        `\n      }\n\n      &:last-child {\n        border-right: none;\n        &::after {\n          display: none;\n        }\n      }\n\n      ${mediaQueries.minWidthSmallDesktop} {\n        ${\n          !isHorizontalLayout &&\n          `margin-bottom: 48px;\n            &::after {\n              content: '';\n              position: absolute;\n              width: 2px;\n              top: unset;\n              height: 24px;\n              bottom: -36px;\n              left: 28px;\n              background-color: ${colors.WHITE_T_15};\n            }\n          `\n        }\n        \n      }\n    `;\n});\n\nexport const StepWrapper = styled(FlexView)<{ isHorizontalLayout: boolean }>(({\n  theme: { mediaQueries },\n  isHorizontalLayout,\n}) => {\n  return `\n  width: 100%;\n  max-width: 350px;\n  ${mediaQueries.minWidthTablet} {\n    max-width: ${isHorizontalLayout ? '100%' : '350px'};\n  }\n  ${mediaQueries.minWidthSmallDesktop} {\n    max-width: ${isHorizontalLayout ? '100%' : '310px'};\n  }\n`;\n});\n"],"names":["StepItem","styled","FlexView","colors","mediaQueries","isHorizontalLayout","StepWrapper"],"mappings":";;AAIO,MAAMA,IAAWC,EAAOC,CAAQ,EAAmC,CAAC;AAAA,EACzE,OAAO,EAAE,QAAAC,GAAQ,cAAAC,EAAa;AAAA,EAC9B,oBAAAC;AACF,MACS;AAAA;AAAA;AAAA,QAIDA,IACI;AAAA,oCACwBF,EAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQzC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gCAQoBA,EAAO,UAAU;AAAA;AAAA,SAG3C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QASEC,EAAa,oBAAoB;AAAA,UAE/B,CAACC,KACD;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kCASwBF,EAAO,UAAU;AAAA;AAAA,WAG3C;AAAA;AAAA;AAAA,KAIP,GAEYG,IAAcL,EAAOC,CAAQ,EAAmC,CAAC;AAAA,EAC5E,OAAO,EAAE,cAAAE,EAAa;AAAA,EACtB,oBAAAC;AACF,MACS;AAAA;AAAA;AAAA,IAGLD,EAAa,cAAc;AAAA,iBACdC,IAAqB,SAAS,OAAO;AAAA;AAAA,IAElDD,EAAa,oBAAoB;AAAA,iBACpBC,IAAqB,SAAS,OAAO;AAAA;AAAA,CAGrD;"}
+{"version":3,"file":"onboarding-guide-styled.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const StepItem = styled(FlexView)(({ theme: { colors, mediaQueries } }) => {\n  return `\n  position: relative;\n  &:not(:last-child)::after {\n    content: '';\n    width: 37px;\n    height: 2px;\n    right: -32px;\n    top: 25px;\n    position: absolute;\n    background-color: ${colors.WHITE_T_15};\n  }\n  &:last-child {\n    margin-bottom: 0;\n  }\n  ${mediaQueries.minWidthSmallDesktop} {\n    margin-bottom: 48px;\n    &:not(:last-child)::after {\n      left: 28px;\n      bottom: -36px;\n      right: unset;\n      top: unset;\n      width: 2px;\n      height: 24px;\n    }\n  }\n`;\n});\n\nexport const StepWrapper = styled(FlexView)(({ theme: { mediaQueries } }) => {\n  return `\n  width: 100%;\n  max-width: 350px;\n  ${mediaQueries.minWidthSmallDesktop} {\n    max-width: unset;\n  }\n`;\n});\n"],"names":["StepItem","styled","FlexView","colors","mediaQueries","StepWrapper"],"mappings":";;AAIa,MAAAA,IAAWC,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,QAAAC,GAAQ,cAAAC,EAAa,QACjE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASeD,EAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,IAKrCC,EAAa,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAYpC,GAEYC,IAAcJ,EAAOC,CAAQ,EAAE,CAAC,EAAE,OAAO,EAAE,cAAAE,EAAa,QAC5D;AAAA;AAAA;AAAA,IAGLA,EAAa,oBAAoB;AAAA;AAAA;AAAA,CAIpC;"}

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js

@@ -1,81 +1,44 @@
-import { jsxs as a, jsx as r } from "react/jsx-runtime";
-import { memo as $ } from "react";
-import { useTheme as d } from "styled-components";
-import c from "../../../ui/layout/flex-view.js";
-import h from "../../../ui/separator/separator.js";
-import m from "../../../ui/text/text.js";
-import { EDeviceType as s } from "../../../ui/theme/constants.js";
-import { onboardingGuideSteps as x } from "./onboarding-guide-constants.js";
-import { StepWrapper as u, StepItem as b } from "./onboarding-guide-styled.js";
-const g = ({ orientation: p = "vertical" }) => {
-  const { device: o } = d(), t = o <= s.TABLET, f = o <= s.MOBILE, e = p === "horizontal" && !f, i = t || e ? "row" : "column";
-  return /* @__PURE__ */ a(
-    c,
-    {
-      $flex: 1,
-      $alignItems: e ? "flex-start" : "center",
-      $justifyContent: "center",
-      children: [
-        /* @__PURE__ */ r(
-          m,
-          {
-            $whiteSpace: "pre-line",
-            $renderAs: "ah4-bold",
-            $renderOnTabletAs: "ab1-bold",
-            $color: "WHITE",
-            $align: e ? "left" : "center",
-            children: "Get started in 3 easy steps!"
-          }
-        ),
-        /* @__PURE__ */ r(h, { heightX: e ? 1.25 : t ? 1 : 2.75 }),
-        /* @__PURE__ */ r(
-          u,
-          {
-            $flexDirection: i,
-            $flexColumnGapX: e ? 0 : 0.5,
-            isHorizontalLayout: e,
-            children: x.map((n, l) => /* @__PURE__ */ a(
-              b,
-              {
-                $flex: 1,
-                $flexDirection: i === "row" ? "column" : "row",
-                $flexColumnGapX: 1.5,
-                $flexRowGapX: 0.5,
-                $alignItems: e ? "flex-start" : "center",
-                isHorizontalLayout: e,
-                $gutterX: e ? 1 : 0,
-                children: [
-                  /* @__PURE__ */ r(
-                    "img",
-                    {
-                      src: n.icon,
-                      alt: `Step ${l + 1}`,
-                      width: e ? 80 : 56,
-                      height: e ? 80 : 56
-                    }
-                  ),
-                  /* @__PURE__ */ r(c, { children: /* @__PURE__ */ r(
-                    m,
-                    {
-                      $whiteSpace: "pre-line",
-                      $renderAs: "ab2",
-                      $renderOnTabletAs: "ab3",
-                      $color: "WHITE",
-                      $align: t ? "center" : "left",
-                      children: n.title
-                    }
-                  ) })
-                ]
-              },
-              l
-            ))
-          }
-        )
-      ]
-    }
-  );
-}, C = $(g);
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { useTheme as c } from "styled-components";
+import n from "../../../ui/layout/flex-view.js";
+import m from "../../../ui/separator/separator.js";
+import l from "../../../ui/text/text.js";
+import { EDeviceType as p } from "../../../ui/theme/constants.js";
+import { onboardingGuideSteps as s } from "./onboarding-guide-constants.js";
+import { StepWrapper as $, StepItem as d } from "./onboarding-guide-styled.js";
+const f = () => {
+  const { device: a } = c(), r = a <= p.TABLET;
+  return /* @__PURE__ */ o(n, { $flex: 1, $alignItems: "center", $justifyContent: "center", children: [
+    /* @__PURE__ */ e(l, { $whiteSpace: "pre-line", $renderAs: "ah4", $color: "WHITE", $renderOnTabletAs: "ab1", children: "Get started in 3 easy steps!" }),
+    /* @__PURE__ */ e(m, { heightX: r ? 1 : 2.75 }),
+    /* @__PURE__ */ e($, { $flexDirection: r ? "row" : "column", $flexColumnGapX: 1, children: s.map((t, i) => /* @__PURE__ */ o(
+      d,
+      {
+        $flex: 1,
+        $flexDirection: r ? "column" : "row",
+        $flexColumnGapX: 1.5,
+        $flexRowGapX: 0.5,
+        $alignItems: "center",
+        children: [
+          /* @__PURE__ */ e("img", { src: t.icon, alt: `Step ${i + 1}`, width: 56, height: 56 }),
+          /* @__PURE__ */ e(n, { $width: r ? 101 : 210, children: /* @__PURE__ */ e(
+            l,
+            {
+              $whiteSpace: "pre-line",
+              $renderAs: "ab2",
+              $renderOnTabletAs: "ab3",
+              $color: "WHITE",
+              $align: r ? "center" : "left",
+              children: t.title
+            }
+          ) })
+        ]
+      },
+      i
+    )) })
+  ] });
+}, S = f;
 export {
-  C as default
+  S as default
 };
 //# sourceMappingURL=onboarding-guide.js.map

package/dist/features/auth/pla-signup/onboarding-guide/onboarding-guide.js.map

@@ -1 +1 @@
-{"version":3,"file":"onboarding-guide.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide.tsx"],"sourcesContent":["import type { IOnboardingGuideProps } from './onboarding-guide-types';\n\nimport { memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { onboardingGuideSteps } from './onboarding-guide-constants';\nimport * as Styled from './onboarding-guide-styled';\n\nconst OnboardingGuide = ({ orientation = 'vertical' }: IOnboardingGuideProps) => {\n  const { device } = useTheme();\n  const isCompact = device <= EDeviceType.TABLET;\n  const isMobile = device <= EDeviceType.MOBILE;\n  const isHorizontalLayout = orientation === 'horizontal' && !isMobile;\n  const flexDirection = isCompact || isHorizontalLayout ? 'row' : 'column';\n\n  return (\n    <FlexView\n      $flex={1}\n      $alignItems={isHorizontalLayout ? 'flex-start' : 'center'}\n      $justifyContent=\"center\"\n    >\n      <Text\n        $whiteSpace=\"pre-line\"\n        $renderAs=\"ah4-bold\"\n        $renderOnTabletAs=\"ab1-bold\"\n        $color=\"WHITE\"\n        $align={isHorizontalLayout ? 'left' : 'center'}\n      >\n        Get started in 3 easy steps!\n      </Text>\n\n      <Separator heightX={isHorizontalLayout ? 1.25 : isCompact ? 1 : 2.75} />\n\n      <Styled.StepWrapper\n        $flexDirection={flexDirection}\n        $flexColumnGapX={!isHorizontalLayout ? 0.5 : 0}\n        isHorizontalLayout={isHorizontalLayout}\n      >\n        {onboardingGuideSteps.map((step, index) => (\n          <Styled.StepItem\n            key={index}\n            $flex={1}\n            $flexDirection={flexDirection === 'row' ? 'column' : 'row'}\n            $flexColumnGapX={1.5}\n            $flexRowGapX={0.5}\n            $alignItems={isHorizontalLayout ? 'flex-start' : 'center'}\n            isHorizontalLayout={isHorizontalLayout}\n            $gutterX={isHorizontalLayout ? 1 : 0}\n          >\n            <img\n              src={step.icon}\n              alt={`Step ${index + 1}`}\n              width={isHorizontalLayout ? 80 : 56}\n              height={isHorizontalLayout ? 80 : 56}\n            />\n            <FlexView>\n              <Text\n                $whiteSpace=\"pre-line\"\n                $renderAs=\"ab2\"\n                $renderOnTabletAs=\"ab3\"\n                $color=\"WHITE\"\n                $align={isCompact ? 'center' : 'left'}\n              >\n                {step.title}\n              </Text>\n            </FlexView>\n          </Styled.StepItem>\n        ))}\n      </Styled.StepWrapper>\n    </FlexView>\n  );\n};\n\nexport default memo(OnboardingGuide);\n"],"names":["OnboardingGuide","orientation","device","useTheme","isCompact","EDeviceType","isMobile","isHorizontalLayout","flexDirection","jsxs","FlexView","jsx","Text","Separator","Styled.StepWrapper","onboardingGuideSteps","step","index","Styled.StepItem","onboardingGuide","memo"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAkB,CAAC,EAAE,aAAAC,IAAc,iBAAwC;AACzE,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY,QAClCC,IAAWJ,KAAUG,EAAY,QACjCE,IAAqBN,MAAgB,gBAAgB,CAACK,GACtDE,IAAgBJ,KAAaG,IAAqB,QAAQ;AAG9D,SAAA,gBAAAE;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAO;AAAA,MACP,aAAaH,IAAqB,eAAe;AAAA,MACjD,iBAAgB;AAAA,MAEhB,UAAA;AAAA,QAAA,gBAAAI;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,WAAU;AAAA,YACV,mBAAkB;AAAA,YAClB,QAAO;AAAA,YACP,QAAQL,IAAqB,SAAS;AAAA,YACvC,UAAA;AAAA,UAAA;AAAA,QAED;AAAA,0BAECM,GAAU,EAAA,SAASN,IAAqB,OAAOH,IAAY,IAAI,MAAM;AAAA,QAEtE,gBAAAO;AAAA,UAACG;AAAAA,UAAA;AAAA,YACC,gBAAgBN;AAAA,YAChB,iBAAkBD,IAA2B,IAAN;AAAA,YACvC,oBAAAA;AAAA,YAEC,UAAqBQ,EAAA,IAAI,CAACC,GAAMC,MAC/B,gBAAAR;AAAA,cAACS;AAAAA,cAAA;AAAA,gBAEC,OAAO;AAAA,gBACP,gBAAgBV,MAAkB,QAAQ,WAAW;AAAA,gBACrD,iBAAiB;AAAA,gBACjB,cAAc;AAAA,gBACd,aAAaD,IAAqB,eAAe;AAAA,gBACjD,oBAAAA;AAAA,gBACA,UAAUA,IAAqB,IAAI;AAAA,gBAEnC,UAAA;AAAA,kBAAA,gBAAAI;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACC,KAAKK,EAAK;AAAA,sBACV,KAAK,QAAQC,IAAQ,CAAC;AAAA,sBACtB,OAAOV,IAAqB,KAAK;AAAA,sBACjC,QAAQA,IAAqB,KAAK;AAAA,oBAAA;AAAA,kBACpC;AAAA,oCACCG,GACC,EAAA,UAAA,gBAAAC;AAAA,oBAACC;AAAA,oBAAA;AAAA,sBACC,aAAY;AAAA,sBACZ,WAAU;AAAA,sBACV,mBAAkB;AAAA,sBAClB,QAAO;AAAA,sBACP,QAAQR,IAAY,WAAW;AAAA,sBAE9B,UAAKY,EAAA;AAAA,oBAAA;AAAA,kBAAA,GAEV;AAAA,gBAAA;AAAA,cAAA;AAAA,cAzBKC;AAAA,YAAA,CA2BR;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeE,IAAAC,EAAKpB,CAAe;"}
+{"version":3,"file":"onboarding-guide.js","sources":["../../../../../src/features/auth/pla-signup/onboarding-guide/onboarding-guide.tsx"],"sourcesContent":["import { useTheme } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { EDeviceType } from '../../../ui/theme/constants';\nimport { onboardingGuideSteps } from './onboarding-guide-constants';\nimport * as Styled from './onboarding-guide-styled';\n\nconst OnboardingGuide = () => {\n  const { device } = useTheme();\n  const isCompact = device <= EDeviceType.TABLET;\n\n  return (\n    <FlexView $flex={1} $alignItems=\"center\" $justifyContent=\"center\">\n      <Text $whiteSpace=\"pre-line\" $renderAs=\"ah4\" $color=\"WHITE\" $renderOnTabletAs=\"ab1\">\n        Get started in 3 easy steps!\n      </Text>\n      <Separator heightX={isCompact ? 1 : 2.75} />\n      <Styled.StepWrapper $flexDirection={isCompact ? 'row' : 'column'} $flexColumnGapX={1}>\n        {onboardingGuideSteps.map((step, index) => (\n          <Styled.StepItem\n            key={index}\n            $flex={1}\n            $flexDirection={isCompact ? 'column' : 'row'}\n            $flexColumnGapX={1.5}\n            $flexRowGapX={0.5}\n            $alignItems={'center'}\n          >\n            <img src={step.icon} alt={`Step ${index + 1}`} width={56} height={56} />\n            <FlexView $width={isCompact ? 101 : 210}>\n              <Text\n                $whiteSpace=\"pre-line\"\n                $renderAs=\"ab2\"\n                $renderOnTabletAs=\"ab3\"\n                $color=\"WHITE\"\n                $align={isCompact ? 'center' : 'left'}\n              >\n                {step.title}\n              </Text>\n            </FlexView>\n          </Styled.StepItem>\n        ))}\n      </Styled.StepWrapper>\n    </FlexView>\n  );\n};\n\nexport default OnboardingGuide;\n"],"names":["OnboardingGuide","device","useTheme","isCompact","EDeviceType","FlexView","jsx","Text","Separator","Styled.StepWrapper","onboardingGuideSteps","step","index","jsxs","Styled.StepItem","OnboardingGuide$1"],"mappings":";;;;;;;;AASA,MAAMA,IAAkB,MAAM;AACtB,QAAA,EAAE,QAAAC,MAAWC,KACbC,IAAYF,KAAUG,EAAY;AAExC,2BACGC,GAAS,EAAA,OAAO,GAAG,aAAY,UAAS,iBAAgB,UACvD,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAK,aAAY,YAAW,WAAU,OAAM,QAAO,SAAQ,mBAAkB,OAAM,UAEpF,+BAAA,CAAA;AAAA,IACC,gBAAAD,EAAAE,GAAA,EAAU,SAASL,IAAY,IAAI,MAAM;AAAA,IACzC,gBAAAG,EAAAG,GAAA,EAAmB,gBAAgBN,IAAY,QAAQ,UAAU,iBAAiB,GAChF,UAAAO,EAAqB,IAAI,CAACC,GAAMC,MAC/B,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,OAAO;AAAA,QACP,gBAAgBX,IAAY,WAAW;AAAA,QACvC,iBAAiB;AAAA,QACjB,cAAc;AAAA,QACd,aAAa;AAAA,QAEb,UAAA;AAAA,UAAA,gBAAAG,EAAC,OAAI,EAAA,KAAKK,EAAK,MAAM,KAAK,QAAQC,IAAQ,CAAC,IAAI,OAAO,IAAI,QAAQ,IAAI;AAAA,UACrE,gBAAAN,EAAAD,GAAA,EAAS,QAAQF,IAAY,MAAM,KAClC,UAAA,gBAAAG;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,aAAY;AAAA,cACZ,WAAU;AAAA,cACV,mBAAkB;AAAA,cAClB,QAAO;AAAA,cACP,QAAQJ,IAAY,WAAW;AAAA,cAE9B,UAAKQ,EAAA;AAAA,YAAA;AAAA,UAAA,GAEV;AAAA,QAAA;AAAA,MAAA;AAAA,MAlBKC;AAAA,IAoBR,CAAA,GACH;AAAA,EACF,EAAA,CAAA;AAEJ,GAEAG,IAAef;"}

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js

@@ -1,24 +1,28 @@
 import t from "styled-components";
-import i from "../../../ui/layout/flex-view.js";
-const n = t(i)`
+import r from "../../../ui/layout/flex-view.js";
+const n = t(r)`
   position: relative;
-`, s = t(i)`
+`, s = t(r)`
   position: absolute;
   border-radius: 100%;
   top: 216px;
   border: ${({ theme: o }) => `2px solid ${o.colors.BLACK_5}`};
-`, a = t(i)(
-  ({ theme: o, $isVisible: e }) => `
-  opacity: ${e ? 1 : 0};
+`, p = t(r)`
+  opacity: ${({ $isVisible: o }) => o ? 1 : 0};
   transition: opacity 0.5s ease-in-out;
+`, a = t.div`
   position: relative;
-  top: -12px;
-  ${o.mediaQueries.minWidthTablet} {
-    top: 0;
-  }
-`
-), l = t.div`
+`;
+t(r)`
   position: relative;
+  overflow: hidden;
+  background: ${({ theme: o }) => o.colors.BLACK_2};
+  border-radius: 100%;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme: o }) => o.colors.WHITE};
 `;
 t.div`
   position: absolute;
@@ -26,37 +30,31 @@ t.div`
   height: 100%;
   z-index: 2;
 `;
-const d = t(i)(
-  ({ theme: o }) => `
-    position: absolute;
-    bottom: 40px;
-    right: 16px;
-   ${o.mediaQueries.minWidthTablet}  {
-      top: 55%;
-      right: 24px;
-    }
-`
-), u = t(i)`
+const l = t(r)`
+  position: absolute;
+  top: 55%;
+  right: 24px;
+`, c = t(r)`
   position: absolute;
   top: 642px;
-`, x = t(i)(
-  ({ theme: o }) => `
+`, d = t(r)`
   position: absolute;
-  left: 16px;
-  top: 40px;
-  ${o.mediaQueries.minWidthTablet}  {
-    top: 55%;
-    left: 24px;
+  top: 55%;
+  left: 24px;
+  button {
+    background-color: ${({ theme: o }) => o.colors.BLACK_1};
+    svg {
+      color: ${({ theme: o }) => o.colors.WHITE};
+    }
   }
-`
-);
+`;
 export {
   s as CircularStepContainer,
   n as Container,
-  a as ContentWrapper,
-  u as FooterWrapper,
-  l as InputContainer,
-  d as NextButtonWrapper,
-  x as PrevButtonWrapper
+  p as ContentWrapper,
+  c as FooterWrapper,
+  a as InputContainer,
+  l as NextButtonWrapper,
+  d as PrevButtonWrapper
 };
 //# sourceMappingURL=circular-step-wrapper-styled.js.map

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n  position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n  position: absolute;\n  border-radius: 100%;\n  top: 216px;\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>(\n  ({ theme, $isVisible }) => `\n  opacity: ${$isVisible ? 1 : 0};\n  transition: opacity 0.5s ease-in-out;\n  position: relative;\n  top: -12px;\n  ${theme.mediaQueries.minWidthTablet} {\n    top: 0;\n  }\n`,\n);\n\nconst InputContainer = styled.div`\n  position: relative;\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)(\n  ({ theme }) => `\n    position: absolute;\n    bottom: 40px;\n    right: 16px;\n   ${theme.mediaQueries.minWidthTablet}  {\n      top: 55%;\n      right: 24px;\n    }\n`,\n);\n\nconst FooterWrapper = styled(FlexView)`\n  position: absolute;\n  top: 642px;\n`;\n\nconst PrevButtonWrapper = styled(FlexView)(\n  ({ theme }) => `\n  position: absolute;\n  left: 16px;\n  top: 40px;\n  ${theme.mediaQueries.minWidthTablet}  {\n    top: 55%;\n    left: 24px;\n  }\n`,\n);\n\nexport {\n  NextButtonWrapper,\n  PrevButtonWrapper,\n  InputContainer,\n  Container,\n  CircularStepContainer,\n  ContentWrapper,\n  FooterWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","FooterWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,EACpC,CAAC,EAAE,OAAAE,GAAO,YAAAE,EAAA,MAAiB;AAAA,aAChBA,IAAa,IAAI,CAAC;AAAA;AAAA;AAAA;AAAA,IAI3BF,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAIrC,GAEMG,IAAiBN,EAAO;AAAA;AAAA;AAIEA,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA,EACvC,CAAC,EAAE,OAAAE,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,KAIZA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAKtC,GAEMK,IAAgBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK/BQ,IAAoBT,EAAOC,CAAQ;AAAA,EACvC,CAAC,EAAE,OAAAE,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,IAIbA,EAAM,aAAa,cAAc;AAAA;AAAA;AAAA;AAAA;AAKrC;"}
+{"version":3,"file":"circular-step-wrapper-styled.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nconst Container = styled(FlexView)`\n  position: relative;\n`;\n\nconst CircularStepContainer = styled(FlexView)`\n  position: absolute;\n  border-radius: 100%;\n  top: 216px;\n  border: ${({ theme }) => `2px solid ${theme.colors.BLACK_5}`};\n`;\n\nconst ContentWrapper = styled(FlexView)<{ $isVisible: boolean }>`\n  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};\n  transition: opacity 0.5s ease-in-out;\n`;\n\nconst InputContainer = styled.div`\n  position: relative;\n`;\n\nconst CircularProgressContainer = styled(FlexView)<{\n  isVerticallyCentered?: boolean;\n}>`\n  position: relative;\n  overflow: hidden;\n  background: ${({ theme }) => theme.colors.BLACK_2};\n  border-radius: 100%;\n  flex-shrink: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ${({ theme }) => theme.colors.WHITE};\n`;\n\nexport const CircularProgress = styled.div`\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 2;\n`;\n\nconst NextButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  right: 24px;\n`;\n\nconst FooterWrapper = styled(FlexView)`\n  position: absolute;\n  top: 642px;\n`;\n\nconst PrevButtonWrapper = styled(FlexView)`\n  position: absolute;\n  top: 55%;\n  left: 24px;\n  button {\n    background-color: ${({ theme }) => theme.colors.BLACK_1};\n    svg {\n      color: ${({ theme }) => theme.colors.WHITE};\n    }\n  }\n`;\n\nexport {\n  NextButtonWrapper,\n  PrevButtonWrapper,\n  InputContainer,\n  Container,\n  CircularStepContainer,\n  CircularProgressContainer,\n  ContentWrapper,\n  FooterWrapper,\n};\n"],"names":["Container","styled","FlexView","CircularStepContainer","theme","ContentWrapper","$isVisible","InputContainer","NextButtonWrapper","FooterWrapper","PrevButtonWrapper"],"mappings":";;AAIM,MAAAA,IAAYC,EAAOC,CAAQ;AAAA;AAAA,GAI3BC,IAAwBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,YAIjC,CAAC,EAAE,OAAAE,EAAM,MAAM,aAAaA,EAAM,OAAO,OAAO,EAAE;AAAA,GAGxDC,IAAiBJ,EAAOC,CAAQ;AAAA,aACzB,CAAC,EAAE,YAAAI,EAAA,MAAkBA,IAAa,IAAI,CAAE;AAAA;AAAA,GAI/CC,IAAiBN,EAAO;AAAA;AAAA;AAIIA,EAAOC,CAAQ;AAAA;AAAA;AAAA,gBAKjC,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAGZH,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAAO,IAAoBP,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMnCO,IAAgBR,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAK/BQ,IAAoBT,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,wBAKjB,CAAC,EAAE,OAAAE,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA,eAE5C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/circular-step-wrapper/circular-step-wrapper.js

@@ -1,58 +1,54 @@
-import { jsxs as o, jsx as e } from "react/jsx-runtime";
-import { memo as j, forwardRef as M, useRef as l, useState as g, useCallback as F, useEffect as O, useImperativeHandle as P, useLayoutEffect as z } from "react";
-import { useTheme as D } from "styled-components";
-import V from "../../../../assets/line-icons/icons/back2.js";
-import X from "../../../../assets/line-icons/icons/next2.js";
-import K from "../../../ui/animated-arc/animated-arc.js";
-import y from "../../../ui/buttons/icon-button/icon-button.js";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { memo as E, forwardRef as H, useRef as c, useState as g, useCallback as j, useEffect as B, useImperativeHandle as T, useLayoutEffect as F } from "react";
+import P from "../../../../assets/line-icons/icons/back2.js";
+import z from "../../../../assets/line-icons/icons/next2.js";
+import M from "../../../ui/animated-arc/animated-arc.js";
+import C from "../../../ui/buttons/icon-button/icon-button.js";
 import N from "../../../ui/layout/flex-view.js";
-import Y from "../../../ui/lottie-animation/lottie-animation.js";
-import _ from "../../../ui/separator/separator.js";
-import q from "../../../ui/text/text.js";
-import { EDeviceType as G } from "../../../ui/theme/constants.js";
-import { Container as J, CircularStepContainer as Q, ContentWrapper as U, InputContainer as Z, FooterWrapper as ee, PrevButtonWrapper as te, NextButtonWrapper as re } from "./circular-step-wrapper-styled.js";
-const ne = {
+import O from "../../../ui/lottie-animation/lottie-animation.js";
+import V from "../../../ui/separator/separator.js";
+import X from "../../../ui/text/text.js";
+import { Container as D, CircularStepContainer as K, ContentWrapper as Y, InputContainer as _, FooterWrapper as q, PrevButtonWrapper as G, NextButtonWrapper as J } from "./circular-step-wrapper-styled.js";
+const Q = {
   autoplay: !1,
   loop: !1,
   renderer: "canvas",
   rendererSettings: {
     preserveAspectRatio: "xMidYMin slice"
   }
-}, oe = M(
+}, U = H(
   ({
-    children: I,
-    onGoBack: b,
-    onNext: v,
-    label: u,
-    showNext: S,
-    showPrevious: k,
+    children: y,
+    onGoBack: I,
+    onNext: x,
+    label: a,
+    showNext: A,
+    showPrevious: S,
     animation: r,
     introFrames: w,
-    outroFrames: x,
-    isNextLoading: i,
-    progressAngle: c,
-    footerElement: m,
-    isNextDisabled: A,
-    animationSrcMobile: R
+    outroFrames: R,
+    isNextLoading: s,
+    progressAngle: l,
+    footerElement: u
   }, W) => {
-    const t = l(null), s = l(null), [d, E] = g(), [L, p] = g(!1), a = l(null), { device: T } = D(), n = T <= G.MOBILE, B = F(() => {
-      r && t.current && (t.current.playSegments(w, !0), p(!0));
+    const t = c(null), o = c(null), [m, k] = g(), [v, d] = g(!1), i = c(null), L = j(() => {
+      r && t.current && (t.current.playSegments(w, !0), d(!0));
     }, [r]);
-    return O(() => () => {
-      a.current && clearTimeout(a.current);
-    }, [r]), P(W, () => ({
-      playOutroAndFadeOut: async () => new Promise((H) => {
-        var h, $;
-        const f = () => {
-          var C;
-          H(), (C = t.current) == null || C.removeEventListener("complete", f);
+    return B(() => () => {
+      i.current && clearTimeout(i.current);
+    }, [r]), T(W, () => ({
+      playOutroAndFadeOut: async () => new Promise((b) => {
+        var f, h;
+        const p = () => {
+          var $;
+          b(), ($ = t.current) == null || $.removeEventListener("complete", p);
         };
-        (h = t.current) == null || h.playSegments(x, !0), a.current = setTimeout(() => p(!1), 400), ($ = t.current) == null || $.addEventListener("complete", f);
+        (f = t.current) == null || f.playSegments(R, !0), i.current = setTimeout(() => d(!1), 400), (h = t.current) == null || h.addEventListener("complete", p);
       })
-    })), z(() => {
-      s.current && E(s.current.offsetHeight);
-    }, []), /* @__PURE__ */ o(
-      J,
+    })), F(() => {
+      o.current && k(o.current.offsetHeight);
+    }, []), /* @__PURE__ */ n(
+      D,
       {
         $flex: 1,
         $flexDirection: "column",
@@ -60,79 +56,78 @@ const ne = {
         $justifyContent: "center",
         $width: "100%",
         $height: "100%",
-        ref: s,
+        ref: o,
         children: [
-          d && /* @__PURE__ */ e(
-            Y,
+          m && /* @__PURE__ */ e(
+            O,
             {
               width: 1280,
-              height: d,
-              src: n ? R ?? r : r,
+              height: m,
+              src: r,
               ref: t,
-              onRender: B,
-              settings: ne
+              onRender: L,
+              settings: Q
             }
           ),
-          /* @__PURE__ */ o(
-            Q,
+          /* @__PURE__ */ n(
+            K,
             {
-              $width: n ? 290 : 400,
-              $height: n ? 290 : 400,
+              $width: 400,
+              $height: 400,
               $background: "REAL_BLACK",
               $alignItems: "center",
               $justifyContent: "center",
               children: [
-                c && /* @__PURE__ */ e(
-                  K,
+                l && /* @__PURE__ */ e(
+                  M,
                   {
-                    radius: c ? 145 : 200,
+                    radius: 200,
                     strokeWidth: 2,
                     color: "WHITE",
-                    targetAngle: c,
+                    targetAngle: l,
                     mode: "fade",
                     duration: 1
                   }
                 ),
-                /* @__PURE__ */ o(U, { $isVisible: L, $width: "100%", children: [
-                  u && /* @__PURE__ */ o(N, { $gutterX: n ? 1.5 : 3.5, children: [
-                    /* @__PURE__ */ e(q, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: u }),
-                    /* @__PURE__ */ e(_, { heightX: 1 })
+                /* @__PURE__ */ n(Y, { $isVisible: v, $width: "100%", children: [
+                  a && /* @__PURE__ */ n(N, { $gutterX: 3.5, children: [
+                    /* @__PURE__ */ e(X, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: a }),
+                    /* @__PURE__ */ e(V, { heightX: 1 })
                   ] }),
-                  /* @__PURE__ */ e(Z, { children: I })
+                  /* @__PURE__ */ e(_, { children: y })
                 ] })
               ]
             }
           ),
-          m && /* @__PURE__ */ e(ee, { $alignItems: "center", $justifyContent: "center", children: m }),
-          k && /* @__PURE__ */ e(te, { children: /* @__PURE__ */ e(
-            y,
+          u && /* @__PURE__ */ e(q, { $alignItems: "center", $justifyContent: "center", children: u }),
+          S && /* @__PURE__ */ e(G, { children: /* @__PURE__ */ e(
+            C,
             {
-              Icon: V,
-              renderAs: "black-dark",
+              Icon: P,
+              renderAs: "secondary-dark",
               analyticsLabel: "Prev",
-              onClick: b,
-              disabled: i,
+              onClick: I,
+              disabled: s,
               size: "small"
             }
           ) }),
-          S && /* @__PURE__ */ e(re, { children: /* @__PURE__ */ e(
-            y,
+          A && /* @__PURE__ */ e(J, { children: /* @__PURE__ */ e(
+            C,
             {
               size: "small",
-              Icon: X,
+              Icon: z,
               renderAs: "secondary-dark",
               analyticsLabel: "Next",
-              onClick: v,
-              busy: i,
-              disabled: i || A
+              onClick: x,
+              busy: s
             }
           ) })
         ]
       }
     );
   }
-), ge = j(oe);
+), ue = E(U);
 export {
-  ge as default
+  ue as default
 };
 //# sourceMappingURL=circular-step-wrapper.js.map