@cuemath/leap 2.9.5-j5 → 2.9.5-j6

package/dist/features/auth/comps/resend-otp/otp-timer/otp-timer.js

@@ -1,28 +1,25 @@
-import { jsxs as n, jsx as u } from "react/jsx-runtime";
-import { memo as T, useState as f, useEffect as o } from "react";
-import m from "../../../../ui/layout/flex-view.js";
-import s from "../../../../ui/text/text.js";
-const $ = ({ onComplete: e, timerSeconds: t }) => {
-  const [r, i] = f(t);
-  return o(() => {
+import { jsx as u, jsxs as c } from "react/jsx-runtime";
+import { memo as T, useState as d, useEffect as s } from "react";
+import f from "../../../../ui/layout/flex-view.js";
+import o from "../../../../ui/text/text.js";
+const m = ({ onComplete: t, timerSeconds: e }) => {
+  const [r, i] = d(e);
+  return s(() => {
     if (r <= 0) {
-      e == null || e();
+      t == null || t();
       return;
     }
-    const c = setTimeout(() => i(r - 1), 1e3);
-    return () => clearTimeout(c);
-  }, [r, e]), o(() => {
-    i(t);
-  }, [t]), /* @__PURE__ */ n(m, { $flexDirection: "row", $alignItems: "center", children: [
-    /* @__PURE__ */ n(s, { $renderAs: "ab2", $color: "WHITE_T_60", children: [
-      "Resend in",
-      " ",
-      /* @__PURE__ */ u(s, { $renderAs: "ab2-bold", $inline: !0, $color: "WHITE_T_60", children: `0:${r < 10 ? "0" : ""}${r}` })
-    ] }),
-    " "
-  ] });
-}, I = T($);
+    const n = setTimeout(() => i(r - 1), 1e3);
+    return () => clearTimeout(n);
+  }, [r, t]), s(() => {
+    i(e);
+  }, [e]), /* @__PURE__ */ u(f, { $width: 105, children: /* @__PURE__ */ c(o, { $renderAs: "ub2", $color: "WHITE_T_60", children: [
+    "Resend in",
+    " ",
+    /* @__PURE__ */ u(o, { $renderAs: "ub2-bold", $inline: !0, $color: "WHITE_T_60", children: `0:${r < 10 ? "0" : ""}${r}` })
+  ] }) });
+}, h = T(m);
 export {
-  I as default
+  h as default
 };
 //# sourceMappingURL=otp-timer.js.map

package/dist/features/auth/comps/resend-otp/otp-timer/otp-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-timer.js","sources":["../../../../../../src/features/auth/comps/resend-otp/otp-timer/otp-timer.tsx"],"sourcesContent":["import type { IOTPTimerProps } from './otp-timer-types';\n\nimport { memo, useState, useEffect } from 'react';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\n\nconst OTPTimer = ({ onComplete, timerSeconds }: IOTPTimerProps) => {\n  const [count, setCount] = useState(timerSeconds);\n\n  useEffect(() => {\n    if (count <= 0) {\n      onComplete?.();\n\n      return;\n    }\n\n    const timeoutId = setTimeout(() => setCount(count - 1), 1000);\n\n    return () => clearTimeout(timeoutId);\n  }, [count, onComplete]);\n\n  useEffect(() => {\n    setCount(timerSeconds);\n  }, [timerSeconds]);\n\n  return (\n    <FlexView $flexDirection=\"row\" $alignItems=\"center\">\n      <Text $renderAs=\"ab2\" $color=\"WHITE_T_60\">\n        Resend in{' '}\n        <Text $renderAs=\"ab2-bold\" $inline $color=\"WHITE_T_60\">\n          {`0:${count < 10 ? '0' : ''}${count}`}\n        </Text>\n      </Text>\n      &nbsp;\n    </FlexView>\n  );\n};\n\nexport default memo(OTPTimer);\n"],"names":["OTPTimer","onComplete","timerSeconds","count","setCount","useState","useEffect","timeoutId","jsxs","FlexView","Text","jsx","OtpTimer","memo"],"mappings":";;;;AAOA,MAAMA,IAAW,CAAC,EAAE,YAAAC,GAAY,cAAAC,QAAmC;AACjE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASH,CAAY;AAE/C,SAAAI,EAAU,MAAM;AACd,QAAIH,KAAS,GAAG;AACD,MAAAF,KAAA,QAAAA;AAEb;AAAA,IACF;AAEA,UAAMM,IAAY,WAAW,MAAMH,EAASD,IAAQ,CAAC,GAAG,GAAI;AAErD,WAAA,MAAM,aAAaI,CAAS;AAAA,EAAA,GAClC,CAACJ,GAAOF,CAAU,CAAC,GAEtBK,EAAU,MAAM;AACd,IAAAF,EAASF,CAAY;AAAA,EAAA,GACpB,CAACA,CAAY,CAAC,GAGd,gBAAAM,EAAAC,GAAA,EAAS,gBAAe,OAAM,aAAY,UACzC,UAAA;AAAA,IAAA,gBAAAD,EAACE,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAAA;AAAA,MAAA;AAAA,MAC9B;AAAA,MACT,gBAAAC,EAAAD,GAAA,EAAK,WAAU,YAAW,SAAO,IAAC,QAAO,cACvC,UAAA,KAAKP,IAAQ,KAAK,MAAM,EAAE,GAAGA,CAAK,IACrC;AAAA,IAAA,GACF;AAAA,IAAO;AAAA,EAET,EAAA,CAAA;AAEJ,GAEeS,IAAAC,EAAKb,CAAQ;"}
+{"version":3,"file":"otp-timer.js","sources":["../../../../../../src/features/auth/comps/resend-otp/otp-timer/otp-timer.tsx"],"sourcesContent":["import type { IOTPTimerProps } from './otp-timer-types';\n\nimport { memo, useState, useEffect } from 'react';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\n\nconst OTPTimer = ({ onComplete, timerSeconds }: IOTPTimerProps) => {\n  const [count, setCount] = useState(timerSeconds);\n\n  useEffect(() => {\n    if (count <= 0) {\n      onComplete?.();\n\n      return;\n    }\n\n    const timeoutId = setTimeout(() => setCount(count - 1), 1000);\n\n    return () => clearTimeout(timeoutId);\n  }, [count, onComplete]);\n\n  useEffect(() => {\n    setCount(timerSeconds);\n  }, [timerSeconds]);\n\n  return (\n    <FlexView $width={105}>\n      <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\">\n        Resend in{' '}\n        <Text $renderAs=\"ub2-bold\" $inline $color=\"WHITE_T_60\">\n          {`0:${count < 10 ? '0' : ''}${count}`}\n        </Text>\n      </Text>\n    </FlexView>\n  );\n};\n\nexport default memo(OTPTimer);\n"],"names":["OTPTimer","onComplete","timerSeconds","count","setCount","useState","useEffect","timeoutId","jsx","FlexView","Text","OtpTimer","memo"],"mappings":";;;;AAOA,MAAMA,IAAW,CAAC,EAAE,YAAAC,GAAY,cAAAC,QAAmC;AACjE,QAAM,CAACC,GAAOC,CAAQ,IAAIC,EAASH,CAAY;AAE/C,SAAAI,EAAU,MAAM;AACd,QAAIH,KAAS,GAAG;AACD,MAAAF,KAAA,QAAAA;AAEb;AAAA,IACF;AAEA,UAAMM,IAAY,WAAW,MAAMH,EAASD,IAAQ,CAAC,GAAG,GAAI;AAErD,WAAA,MAAM,aAAaI,CAAS;AAAA,EAAA,GAClC,CAACJ,GAAOF,CAAU,CAAC,GAEtBK,EAAU,MAAM;AACd,IAAAF,EAASF,CAAY;AAAA,EAAA,GACpB,CAACA,CAAY,CAAC,GAGf,gBAAAM,EAACC,KAAS,QAAQ,KAChB,4BAACC,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAAA;AAAA,IAAA;AAAA,IAC9B;AAAA,IACT,gBAAAF,EAAAE,GAAA,EAAK,WAAU,YAAW,SAAO,IAAC,QAAO,cACvC,UAAA,KAAKP,IAAQ,KAAK,MAAM,EAAE,GAAGA,CAAK,IACrC;AAAA,EAAA,EACF,CAAA,EACF,CAAA;AAEJ,GAEeQ,IAAAC,EAAKZ,CAAQ;"}

package/dist/features/auth/comps/resend-otp/resend-otp.js

@@ -1,27 +1,27 @@
 import { jsx as l, jsxs as c, Fragment as h } from "react/jsx-runtime";
-import { useState as C, useCallback as a } from "react";
+import { useState as C, useCallback as o } from "react";
 import i from "../../../ui/buttons/text-button/text-button.js";
-import o from "../../../ui/layout/flex-view.js";
-import x from "../../../ui/text/text.js";
-import u from "./otp-timer/otp-timer.js";
+import a from "../../../ui/layout/flex-view.js";
+import u from "../../../ui/text/text.js";
+import x from "./otp-timer/otp-timer.js";
 const $ = ({
   onResendOTP: e,
   onResendVoiceOTP: r,
   timerSeconds: m = 15,
   showVoiceOTP: s = !1
 }) => {
-  const [n, t] = C(!1), f = a(() => {
+  const [n, t] = C(!1), f = o(() => {
     t(!0);
-  }, []), p = a(() => {
+  }, []), p = o(() => {
     e == null || e(), t(!1);
-  }, [e]), d = a(() => {
+  }, [e]), d = o(() => {
     r == null || r(), t(!1);
   }, [r]);
-  return /* @__PURE__ */ l(o, { children: n ? /* @__PURE__ */ c(o, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
+  return /* @__PURE__ */ l(a, { children: n ? /* @__PURE__ */ c(a, { $flexDirection: "row", $alignItems: "center", $flexColumnGapX: 0.5, children: [
     /* @__PURE__ */ l(i, { label: "Resend", color: "WHITE_T_60", onClick: p }),
-    !s && /* @__PURE__ */ c(h, { children: [
-      /* @__PURE__ */ l(x, { $renderAs: "ab2", $color: "WHITE_T_60", children: "or" }),
-      /* @__PURE__ */ l(o, { $width: 116, children: /* @__PURE__ */ l(
+    s && /* @__PURE__ */ c(h, { children: [
+      /* @__PURE__ */ l(u, { $renderAs: "ub2", $color: "WHITE_T_60", children: "or" }),
+      /* @__PURE__ */ l(a, { $width: 116, children: /* @__PURE__ */ l(
         i,
         {
           label: "Get code via call",
@@ -30,7 +30,7 @@ const $ = ({
         }
       ) })
     ] })
-  ] }) : /* @__PURE__ */ l(u, { timerSeconds: m, onComplete: f }) });
+  ] }) : /* @__PURE__ */ l(x, { timerSeconds: m, onComplete: f }) });
 }, H = $;
 export {
   H as default

package/dist/features/auth/comps/resend-otp/resend-otp.js.map

@@ -1 +1 @@
-{"version":3,"file":"resend-otp.js","sources":["../../../../../src/features/auth/comps/resend-otp/resend-otp.tsx"],"sourcesContent":["import type { IOTPResendProps } from './resend-otp-types';\n\nimport { useState, useCallback } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport OtpTimer from './otp-timer/otp-timer';\n\nconst ResendOTP: React.FC<IOTPResendProps> = ({\n  onResendOTP,\n  onResendVoiceOTP,\n  timerSeconds = 15,\n  showVoiceOTP = false,\n}) => {\n  const [canResend, setCanResend] = useState(false);\n\n  const handleTimerComplete = useCallback(() => {\n    setCanResend(true);\n  }, []);\n\n  const handleResendClick = useCallback(() => {\n    onResendOTP?.();\n    setCanResend(false);\n  }, [onResendOTP]);\n\n  const handleVoiceResendClick = useCallback(() => {\n    onResendVoiceOTP?.();\n    setCanResend(false);\n  }, [onResendVoiceOTP]);\n\n  return (\n    <FlexView>\n      {!canResend ? (\n        <OtpTimer timerSeconds={timerSeconds} onComplete={handleTimerComplete} />\n      ) : (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n          <TextButton label=\"Resend\" color=\"WHITE_T_60\" onClick={handleResendClick} />\n          {!showVoiceOTP && (\n            <>\n              <Text $renderAs=\"ab2\" $color=\"WHITE_T_60\">\n                or\n              </Text>\n              <FlexView $width={116}>\n                <TextButton\n                  label=\"Get code via call\"\n                  color=\"WHITE_T_60\"\n                  onClick={handleVoiceResendClick}\n                />\n              </FlexView>\n            </>\n          )}\n        </FlexView>\n      )}\n    </FlexView>\n  );\n};\n\nexport default ResendOTP;\n"],"names":["ResendOTP","onResendOTP","onResendVoiceOTP","timerSeconds","showVoiceOTP","canResend","setCanResend","useState","handleTimerComplete","useCallback","handleResendClick","handleVoiceResendClick","FlexView","jsx","TextButton","jsxs","Fragment","Text","OtpTimer","ResendOTP$1"],"mappings":";;;;;;AASA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAsBC,EAAY,MAAM;AAC5C,IAAAH,EAAa,EAAI;AAAA,EACnB,GAAG,CAAE,CAAA,GAECI,IAAoBD,EAAY,MAAM;AAC5B,IAAAR,KAAA,QAAAA,KACdK,EAAa,EAAK;AAAA,EAAA,GACjB,CAACL,CAAW,CAAC,GAEVU,IAAyBF,EAAY,MAAM;AAC5B,IAAAP,KAAA,QAAAA,KACnBI,EAAa,EAAK;AAAA,EAAA,GACjB,CAACJ,CAAgB,CAAC;AAErB,2BACGU,GACE,EAAA,UAACP,sBAGCO,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAW,OAAM,UAAS,OAAM,cAAa,SAASJ,GAAmB;AAAA,IACzE,CAACN,KAEE,gBAAAW,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,MAAA;AAAA,MACA,gBAAAJ,EAACD,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASH;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,IAlBA,gBAAAE,EAACK,KAAS,cAAAf,GAA4B,YAAYK,EAAqB,CAAA,EAoB3E,CAAA;AAEJ,GAEAW,IAAenB;"}
+{"version":3,"file":"resend-otp.js","sources":["../../../../../src/features/auth/comps/resend-otp/resend-otp.tsx"],"sourcesContent":["import type { IOTPResendProps } from './resend-otp-types';\n\nimport { useState, useCallback } from 'react';\n\nimport TextButton from '../../../ui/buttons/text-button/text-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\nimport OtpTimer from './otp-timer/otp-timer';\n\nconst ResendOTP: React.FC<IOTPResendProps> = ({\n  onResendOTP,\n  onResendVoiceOTP,\n  timerSeconds = 15,\n  showVoiceOTP = false,\n}) => {\n  const [canResend, setCanResend] = useState(false);\n\n  const handleTimerComplete = useCallback(() => {\n    setCanResend(true);\n  }, []);\n\n  const handleResendClick = useCallback(() => {\n    onResendOTP?.();\n    setCanResend(false);\n  }, [onResendOTP]);\n\n  const handleVoiceResendClick = useCallback(() => {\n    onResendVoiceOTP?.();\n    setCanResend(false);\n  }, [onResendVoiceOTP]);\n\n  return (\n    <FlexView>\n      {!canResend ? (\n        <OtpTimer timerSeconds={timerSeconds} onComplete={handleTimerComplete} />\n      ) : (\n        <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexColumnGapX={0.5}>\n          <TextButton label=\"Resend\" color=\"WHITE_T_60\" onClick={handleResendClick} />\n          {showVoiceOTP && (\n            <>\n              <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\">\n                or\n              </Text>\n              <FlexView $width={116}>\n                <TextButton\n                  label=\"Get code via call\"\n                  color=\"WHITE_T_60\"\n                  onClick={handleVoiceResendClick}\n                />\n              </FlexView>\n            </>\n          )}\n        </FlexView>\n      )}\n    </FlexView>\n  );\n};\n\nexport default ResendOTP;\n"],"names":["ResendOTP","onResendOTP","onResendVoiceOTP","timerSeconds","showVoiceOTP","canResend","setCanResend","useState","handleTimerComplete","useCallback","handleResendClick","handleVoiceResendClick","FlexView","jsx","TextButton","jsxs","Fragment","Text","OtpTimer","ResendOTP$1"],"mappings":";;;;;;AASA,MAAMA,IAAuC,CAAC;AAAA,EAC5C,aAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,cAAAC,IAAe;AACjB,MAAM;AACJ,QAAM,CAACC,GAAWC,CAAY,IAAIC,EAAS,EAAK,GAE1CC,IAAsBC,EAAY,MAAM;AAC5C,IAAAH,EAAa,EAAI;AAAA,EACnB,GAAG,CAAE,CAAA,GAECI,IAAoBD,EAAY,MAAM;AAC5B,IAAAR,KAAA,QAAAA,KACdK,EAAa,EAAK;AAAA,EAAA,GACjB,CAACL,CAAW,CAAC,GAEVU,IAAyBF,EAAY,MAAM;AAC5B,IAAAP,KAAA,QAAAA,KACnBI,EAAa,EAAK;AAAA,EAAA,GACjB,CAACJ,CAAgB,CAAC;AAErB,2BACGU,GACE,EAAA,UAACP,sBAGCO,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,iBAAiB,KACnE,UAAA;AAAA,IAAA,gBAAAC,EAACC,KAAW,OAAM,UAAS,OAAM,cAAa,SAASJ,GAAmB;AAAA,IACzEN,KAEG,gBAAAW,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAA,gBAAAH,EAACI,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,UAE1C,MAAA;AAAA,MACA,gBAAAJ,EAACD,GAAS,EAAA,QAAQ,KAChB,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,OAAM;AAAA,UACN,SAASH;AAAA,QAAA;AAAA,MAAA,GAEb;AAAA,IAAA,GACF;AAAA,EAAA,EAEJ,CAAA,IAlBA,gBAAAE,EAACK,KAAS,cAAAf,GAA4B,YAAYK,EAAqB,CAAA,EAoB3E,CAAA;AAEJ,GAEAW,IAAenB;"}

package/dist/features/auth/login/social-account-not-found/social-account-not-found.js

@@ -0,0 +1,46 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { LOTTIE as i } from "../../../../assets/lottie/lottie.js";
+import e from "../../../ui/buttons/button/button.js";
+import c from "../../../ui/layout/flex-view.js";
+import l from "../../../ui/separator/separator.js";
+import m from "../../signup/circular-step-wrapper/circular-step-wrapper.js";
+const s = ({
+  provider: t,
+  onRetryLogin: r,
+  onGoToSignup: n
+}) => /* @__PURE__ */ o(
+  m,
+  {
+    label: `Your ${t === "google" ? "Google" : "Apple"} account is not linked with any cuemath account.`,
+    animation: i.KEY,
+    introFrames: [0, 23],
+    outroFrames: [23, 40],
+    children: /* @__PURE__ */ a(c, { $alignItems: "center", $justifyContent: "center", children: [
+      /* @__PURE__ */ o(
+        e,
+        {
+          size: "small",
+          renderAs: "secondary",
+          label: "Create a new account",
+          width: 232,
+          onClick: n
+        }
+      ),
+      /* @__PURE__ */ o(l, { heightX: 1 }),
+      /* @__PURE__ */ o(
+        e,
+        {
+          size: "small",
+          renderAs: "secondary",
+          label: "Try another Login method",
+          width: 232,
+          onClick: r
+        }
+      )
+    ] })
+  }
+), w = s;
+export {
+  w as default
+};
+//# sourceMappingURL=social-account-not-found.js.map

package/dist/features/auth/login/social-account-not-found/social-account-not-found.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"social-account-not-found.js","sources":["../../../../../src/features/auth/login/social-account-not-found/social-account-not-found.tsx"],"sourcesContent":["import type { ISocialAccountNotFoundProps } from './social-account-not-found-types';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport Button from '../../../ui/buttons/button/button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Separator from '../../../ui/separator/separator';\nimport CircularStepWrapper from '../../signup/circular-step-wrapper/circular-step-wrapper';\n\nconst SocialAccountNotFound = ({\n  provider,\n  onRetryLogin,\n  onGoToSignup,\n}: ISocialAccountNotFoundProps) => {\n  return (\n    <CircularStepWrapper\n      label={`Your ${\n        provider === 'google' ? 'Google' : 'Apple'\n      } account is not linked with any cuemath account.`}\n      animation={LOTTIE.KEY}\n      introFrames={[0, 23]}\n      outroFrames={[23, 40]}\n    >\n      <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n        <Button\n          size=\"small\"\n          renderAs=\"secondary\"\n          label=\"Create a new account\"\n          width={232}\n          onClick={onGoToSignup}\n        />\n        <Separator heightX={1} />\n        <Button\n          size=\"small\"\n          renderAs=\"secondary\"\n          label=\"Try another Login method\"\n          width={232}\n          onClick={onRetryLogin}\n        />\n      </FlexView>\n    </CircularStepWrapper>\n  );\n};\n\nexport default SocialAccountNotFound;\n"],"names":["SocialAccountNotFound","provider","onRetryLogin","onGoToSignup","jsx","CircularStepWrapper","LOTTIE","jsxs","FlexView","Button","Separator","SocialAccountNotFound$1"],"mappings":";;;;;;AAQA,MAAMA,IAAwB,CAAC;AAAA,EAC7B,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC;AACF,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OAAO,QACLJ,MAAa,WAAW,WAAW,OACrC;AAAA,IACA,WAAWK,EAAO;AAAA,IAClB,aAAa,CAAC,GAAG,EAAE;AAAA,IACnB,aAAa,CAAC,IAAI,EAAE;AAAA,IAEpB,UAAC,gBAAAC,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,MAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,OAAM;AAAA,UACN,OAAO;AAAA,UACP,SAASN;AAAA,QAAA;AAAA,MACX;AAAA,MACA,gBAAAC,EAACM,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,MACvB,gBAAAN;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,UAAS;AAAA,UACT,OAAM;AAAA,UACN,OAAO;AAAA,UACP,SAASP;AAAA,QAAA;AAAA,MACX;AAAA,IAAA,GACF;AAAA,EAAA;AAAA,GAKNS,IAAeX;"}

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

@@ -7,15 +7,15 @@ import j from "../../../ui/layout/flex-view.js";
 import N from "../../../ui/lottie-animation/lottie-animation.js";
 import T from "../../../ui/separator/separator.js";
 import z from "../../../ui/text/text.js";
-import { Container as F, CircularStepContainer as M, ContentWrapper as O, InputContainer as P, PrevButtonWrapper as V, NextButtonWrapper as D } from "./circular-step-wrapper-styled.js";
-const K = {
+import { Container as F, CircularStepContainer as M, ContentWrapper as O, InputContainer as P, PrevButtonWrapper as V, NextButtonWrapper as X } from "./circular-step-wrapper-styled.js";
+const D = {
   autoplay: !1,
   loop: !1,
   renderer: "svg",
   rendererSettings: {
     preserveAspectRatio: "xMidYMin slice"
   }
-}, X = v(
+}, K = v(
   ({
     children: g,
     onGoBack: C,
@@ -61,7 +61,7 @@ const K = {
               src: r,
               ref: t,
               onRender: R,
-              settings: K
+              settings: D
             }
           ),
           /* @__PURE__ */ e(
@@ -73,7 +73,7 @@ const K = {
               $alignItems: "center",
               $justifyContent: "center",
               children: /* @__PURE__ */ o(O, { $isVisible: L, children: [
-                i ? /* @__PURE__ */ o(j, { children: [
+                i ? /* @__PURE__ */ o(j, { $gutterX: 4, children: [
                   /* @__PURE__ */ e(z, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: i }),
                   /* @__PURE__ */ e(T, { heightX: 1 })
                 ] }) : null,
@@ -92,7 +92,7 @@ const K = {
               size: "regular"
             }
           ) }),
-          y && /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
+          y && /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(
             h,
             {
               size: "regular",
@@ -107,7 +107,7 @@ const K = {
       }
     );
   }
-), re = X;
+), re = K;
 export {
   re as default
 };

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

@@ -1 +1 @@
-{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type Ref,\n} from 'react';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'svg',\n  rendererSettings: {\n    preserveAspectRatio: 'xMidYMin slice',\n  },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n  (\n    {\n      children,\n      onGoBack,\n      onNext,\n      label,\n      showNext,\n      showPrevious,\n      animation,\n      introFrames,\n      outroFrames,\n      isNextLoading,\n    },\n    ref: Ref<ICircularStepRef>,\n  ) => {\n    const animationRef = useRef<ILottieAnimationRef | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [containerHeight, setContainerHeight] = useState<number | undefined>();\n    const [showContent, setShowContent] = useState(false);\n\n    const onLottieRender = useCallback(() => {\n      if (animation && animationRef.current) {\n        animationRef.current.playSegments(introFrames, true);\n        setTimeout(() => setShowContent(true), 500);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [animation]);\n\n    useImperativeHandle(ref, () => ({\n      playOutroAndFadeOut: async () => {\n        return new Promise<void>(resolve => {\n          const handleComplete = () => {\n            resolve();\n            animationRef.current?.removeEventListener('complete', handleComplete);\n          };\n\n          animationRef.current?.playSegments(outroFrames, true);\n          setShowContent(false);\n          animationRef.current?.addEventListener('complete', handleComplete);\n        });\n      },\n    }));\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setContainerHeight(containerRef.current.offsetHeight);\n      }\n    }, []);\n\n    return (\n      <Styled.Container\n        $flex={1}\n        $flexDirection=\"column\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width=\"100%\"\n        $height=\"100%\"\n        ref={containerRef}\n      >\n        {containerHeight && (\n          <LottieAnimation\n            width={1280}\n            height={containerHeight}\n            src={animation}\n            ref={animationRef}\n            onRender={onLottieRender}\n            settings={animationSettings}\n          />\n        )}\n        <Styled.CircularStepContainer\n          $width={400}\n          $height={400}\n          $background=\"REAL_BLACK\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          <Styled.ContentWrapper $isVisible={showContent}>\n            {label ? (\n              <FlexView>\n                <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n                  {label}\n                </Text>\n                <Separator heightX={1} />\n              </FlexView>\n            ) : null}\n            <Styled.InputContainer>{children}</Styled.InputContainer>\n          </Styled.ContentWrapper>\n        </Styled.CircularStepContainer>\n        {showPrevious && (\n          <Styled.PrevButtonWrapper>\n            <IconButton\n              Icon={Back2Icon}\n              renderAs=\"secondary\"\n              analyticsLabel=\"Next\"\n              onClick={onGoBack}\n              disabled={isNextLoading}\n              size=\"regular\"\n            />\n          </Styled.PrevButtonWrapper>\n        )}\n        {showNext && (\n          <Styled.NextButtonWrapper>\n            <IconButton\n              size=\"regular\"\n              Icon={Next2Icon}\n              renderAs=\"secondary\"\n              analyticsLabel=\"Next\"\n              onClick={onNext}\n              busy={isNextLoading}\n            />\n          </Styled.NextButtonWrapper>\n        )}\n      </Styled.Container>\n    );\n  },\n);\n\nexport default CircularStepWrapper;\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","onLottieRender","useCallback","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","CircularStepWrapper$1"],"mappings":"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"}
+{"version":3,"file":"circular-step-wrapper.js","sources":["../../../../../src/features/auth/signup/circular-step-wrapper/circular-step-wrapper.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport type { ICircularStepRef, ICircularStepWrapperProps } from './circular-step-wrapper-types';\n\nimport {\n  forwardRef,\n  useCallback,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type Ref,\n} from 'react';\n\nimport Back2Icon from '../../../../assets/line-icons/icons/back2';\nimport Next2Icon from '../../../../assets/line-icons/icons/next2';\nimport IconButton from '../../../ui/buttons/icon-button/icon-button';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './circular-step-wrapper-styled';\n\nconst animationSettings = {\n  autoplay: false,\n  loop: false,\n  renderer: 'svg',\n  rendererSettings: {\n    preserveAspectRatio: 'xMidYMin slice',\n  },\n};\n\nconst CircularStepWrapper = forwardRef<ICircularStepRef, ICircularStepWrapperProps>(\n  (\n    {\n      children,\n      onGoBack,\n      onNext,\n      label,\n      showNext,\n      showPrevious,\n      animation,\n      introFrames,\n      outroFrames,\n      isNextLoading,\n    },\n    ref: Ref<ICircularStepRef>,\n  ) => {\n    const animationRef = useRef<ILottieAnimationRef | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [containerHeight, setContainerHeight] = useState<number | undefined>();\n    const [showContent, setShowContent] = useState(false);\n\n    const onLottieRender = useCallback(() => {\n      if (animation && animationRef.current) {\n        animationRef.current.playSegments(introFrames, true);\n        setTimeout(() => setShowContent(true), 500);\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [animation]);\n\n    useImperativeHandle(ref, () => ({\n      playOutroAndFadeOut: async () => {\n        return new Promise<void>(resolve => {\n          const handleComplete = () => {\n            resolve();\n            animationRef.current?.removeEventListener('complete', handleComplete);\n          };\n\n          animationRef.current?.playSegments(outroFrames, true);\n          setShowContent(false);\n          animationRef.current?.addEventListener('complete', handleComplete);\n        });\n      },\n    }));\n\n    useLayoutEffect(() => {\n      if (containerRef.current) {\n        setContainerHeight(containerRef.current.offsetHeight);\n      }\n    }, []);\n\n    return (\n      <Styled.Container\n        $flex={1}\n        $flexDirection=\"column\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $width=\"100%\"\n        $height=\"100%\"\n        ref={containerRef}\n      >\n        {containerHeight && (\n          <LottieAnimation\n            width={1280}\n            height={containerHeight}\n            src={animation}\n            ref={animationRef}\n            onRender={onLottieRender}\n            settings={animationSettings}\n          />\n        )}\n        <Styled.CircularStepContainer\n          $width={400}\n          $height={400}\n          $background=\"REAL_BLACK\"\n          $alignItems=\"center\"\n          $justifyContent=\"center\"\n        >\n          <Styled.ContentWrapper $isVisible={showContent}>\n            {label ? (\n              <FlexView $gutterX={4}>\n                <Text $renderAs=\"ab2\" $color=\"WHITE\" $align=\"center\">\n                  {label}\n                </Text>\n                <Separator heightX={1} />\n              </FlexView>\n            ) : null}\n            <Styled.InputContainer>{children}</Styled.InputContainer>\n          </Styled.ContentWrapper>\n        </Styled.CircularStepContainer>\n        {showPrevious && (\n          <Styled.PrevButtonWrapper>\n            <IconButton\n              Icon={Back2Icon}\n              renderAs=\"secondary\"\n              analyticsLabel=\"Next\"\n              onClick={onGoBack}\n              disabled={isNextLoading}\n              size=\"regular\"\n            />\n          </Styled.PrevButtonWrapper>\n        )}\n        {showNext && (\n          <Styled.NextButtonWrapper>\n            <IconButton\n              size=\"regular\"\n              Icon={Next2Icon}\n              renderAs=\"secondary\"\n              analyticsLabel=\"Next\"\n              onClick={onNext}\n              busy={isNextLoading}\n            />\n          </Styled.NextButtonWrapper>\n        )}\n      </Styled.Container>\n    );\n  },\n);\n\nexport default CircularStepWrapper;\n"],"names":["animationSettings","CircularStepWrapper","forwardRef","children","onGoBack","onNext","label","showNext","showPrevious","animation","introFrames","outroFrames","isNextLoading","ref","animationRef","useRef","containerRef","containerHeight","setContainerHeight","useState","showContent","setShowContent","onLottieRender","useCallback","useImperativeHandle","resolve","handleComplete","_a","_b","useLayoutEffect","jsxs","Styled.Container","jsx","LottieAnimation","Styled.CircularStepContainer","Styled.ContentWrapper","FlexView","Text","Separator","Styled.InputContainer","Styled.PrevButtonWrapper","IconButton","Back2Icon","Styled.NextButtonWrapper","Next2Icon","CircularStepWrapper$1"],"mappings":"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"}

package/dist/features/ui/inputs/base-input/base-input-styled.js

@@ -1,114 +1,115 @@
-import g from "styled-components";
+import u from "styled-components";
 import C from "../../text/text.js";
-const E = g.div(
-  ({ theme: i, $size: s, $willShowMessage: c, $width: o, $widthX: e }) => {
-    const { height: a, marginTop: t, marginBottom: r } = i.input.sizes[s], n = a + t + (c ? r : 0);
+const W = u.div(
+  ({ theme: n, $size: a, $willShowMessage: i, $width: t, $widthX: r }) => {
+    const { height: s, marginTop: c, marginBottom: e } = n.input.sizes[a], o = s + c + (i ? e : 0);
     return `
-      width: ${o || "auto"}${typeof o == "number" ? "px" : ""};
-      ${e ? `width: ${e * i.layout.gutter}px;` : ""}
-      height: ${n}px;
+      width: ${t || "auto"}${typeof t == "number" ? "px" : ""};
+      ${r ? `width: ${r * n.layout.gutter}px;` : ""}
+      height: ${o}px;
     `;
   }
-), x = g.div(
-  ({ theme: i, $size: s, $renderAs: c, $disabled: o, $shape: e, $isTransparent: a }) => {
-    const { colors: t, input: r } = i, { height: n, marginTop: b, paddingLeft: f, paddingRight: u, borderRadius: h } = r.sizes[s], { borderColorName: d, backgroundColorName: $ } = r.variants[c], p = e === "borderLess", l = e === "curved", v = p ? 0 : h, m = a ? "transparent" : t[$ ?? "WHITE"];
+), f = u.div(
+  ({ theme: n, $size: a, $renderAs: i, $disabled: t, $shape: r, $isTransparent: s, $colorTheme: c }) => {
+    const { colors: e, input: o } = n, { height: l, marginTop: m, paddingLeft: h, paddingRight: $, borderRadius: k } = o.sizes[a], { borderColorName: d, backgroundColorName: b } = c === "dark" ? o.darkVariants[i] : o.variants[i], p = r === "borderLess", g = r === "curved", v = p ? 0 : k, x = s ? "transparent" : e[b ?? "WHITE"];
     return `
     position: relative;
     display: flex;
-    height: ${n}px;
-    margin-top: ${b}px;
-    padding-left: ${p ? 0 : f}px;
-    padding-right: ${p ? 0 : u}px;
-    padding-top: ${l ? 1 : 0}px;
-    padding-bottom: ${l ? 1 : 0}px;
+    height: ${l}px;
+    margin-top: ${m}px;
+    padding-left: ${p ? 0 : h}px;
+    padding-right: ${p ? 0 : $}px;
+    padding-top: ${g ? 1 : 0}px;
+    padding-bottom: ${g ? 1 : 0}px;
    ${p ? `
       border: none;
-      border-bottom: 1px solid ${t[d[o ? "disabled" : "inactive"]]};
-    ` : `border: 1px solid ${t[d[o ? "disabled" : l ? "active" : "inactive"]]};`}
-    border-radius: ${l ? 40 : v}px;
+      border-bottom: 1px solid ${e[d[t ? "disabled" : "inactive"]]};
+    ` : `border: 1px solid ${e[d[t ? "disabled" : g ? "active" : "inactive"]]};`}
+    border-radius: ${g ? 40 : v}px;
     transition: border-color 0.2s ease-in-out;
     
-    background: ${m};
+    background: ${x};
     
     &:focus-within {
-      border-color: ${t[d.active]};
+      border-color: ${e[d.active]};
     }
     
     &:hover {
-      ${o ? "" : `border-color: ${t[d.active]};`}
+      ${t ? "" : `border-color: ${e[d.active]};`}
     }
   `;
   }
-), R = g.div`
+), B = u.div`
   flex-grow: 1;
-`, k = g.div(
-  ({ theme: i, $inputRenderAs: s, $disabled: c, $size: o, $siblingPosition: e }) => {
-    const { colors: a, input: t } = i, { iconPadding: r } = t.sizes[o], { labelColorName: n } = t.variants[s];
+`, R = u.div(
+  ({ theme: n, $inputRenderAs: a, $disabled: i, $size: t, $siblingPosition: r }) => {
+    const { colors: s, input: c } = n, { iconPadding: e } = c.sizes[t], { labelColorName: o } = c.variants[a];
     return `
-      order: ${e === "left" ? -1 : 1};
-      padding-${e === "left" ? "right" : "left"}: ${r}px;
+      order: ${r === "left" ? -1 : 1};
+      padding-${r === "left" ? "right" : "left"}: ${e}px;
       align-self: center;
-      color: ${a[n[c ? "disabled" : "inactive"]]};
+      color: ${s[o[i ? "disabled" : "inactive"]]};
 
-      ${x}:focus-within & {
-        color: ${a[n.active]};
+      ${f}:focus-within & {
+        color: ${s[o.active]};
       }
       
-      ${x}:hover & {
-        ${c ? "" : `color: ${a[n.active]};`}
+      ${f}:hover & {
+        ${i ? "" : `color: ${s[o.active]};`}
       }
     `;
   }
-), y = g(C)(({
-  theme: i,
-  $size: s,
-  $inputRenderAs: c,
-  $stickyLabel: o,
-  $disabled: e,
-  $shape: a,
-  $isTransparent: t
+), y = u(C)(({
+  theme: n,
+  $size: a,
+  $inputRenderAs: i,
+  $stickyLabel: t,
+  $disabled: r,
+  $shape: s,
+  $isTransparent: c,
+  $colorTheme: e
 }) => {
-  const { colors: r, input: n, text: b, layout: f } = i, { gutter: u } = f, { height: h, paddingLeft: d } = n.sizes[s], { lineHeight: $ } = b[n.sizes[s].labelTextVariant], { labelColorName: p } = n.variants[c], l = h / 2 - $ / 2 - 1, v = -l - $ / 2 - 1, m = a === "borderLess", L = t ? "transparent" : r.WHITE;
+  const { colors: o, input: l, text: m, layout: h } = n, { gutter: $ } = h, { height: k, paddingLeft: d } = l.sizes[a], { lineHeight: b } = m[l.sizes[a].labelTextVariant], { labelColorName: p, labelBackgroundColorName: g } = e === "dark" ? l.darkVariants[i] : l.variants[i], v = k / 2 - b / 2 - 1, x = -v - b / 2 - 1, E = s === "borderLess", L = c ? "transparent" : o[g ?? "WHITE"];
   return `
     position: absolute;
-    top: ${l}px;
-    left: ${(m ? 0 : d) - u * 0.375}px;
-    padding: 0 ${u * 0.375}px;
+    top: ${v}px;
+    left: ${(E ? 0 : d) - $ * 0.375}px;
+    padding: 0 ${$ * 0.375}px;
     background-color: ${L};
-    color: ${r[p[e ? "disabled" : "inactive"]]};
+    color: ${o[p[r ? "disabled" : "inactive"]]};
     pointer-events: none;
     transform-origin: left;
-    transform: translateY(${o ? v : 0}px) scale(${o ? 0.75 : 1});
+    transform: translateY(${t ? x : 0}px) scale(${t ? 0.75 : 1});
     transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
 
-    ${x}:focus-within & {
-      color: ${r[p.active]};
-      transform: translateY(${v}px) scale(0.75);
+    ${f}:focus-within & {
+      color: ${o[p.active]};
+      transform: translateY(${x}px) scale(0.75);
     }
     
-    ${x}:hover & {
-      ${e ? "" : `color: ${r[p.active]};`}
+    ${f}:hover & {
+      ${r ? "" : `color: ${o[p.active]};`}
     }
 
     & span {
-      color: ${r.RED};
+      color: ${o.RED};
       margin-left: 2px;
     }
   `;
-}), z = g(C)(
-  ({ theme: { colors: i } }) => `
+}), z = u(C)(
+  ({ theme: { colors: n }, $colorTheme: a }) => `
 position: absolute;
 bottom: -2px;
 transform: translateY(calc(100%));
-color: ${i.RED};
+color: ${n[a === "dark" ? "ORANGE_4" : "RED"]};
 `
 );
 export {
-  E as Container,
+  W as Container,
   z as Error,
-  R as InputWrapper,
+  B as InputWrapper,
   y as Label,
-  k as SiblingWrapper,
-  x as Wrapper
+  R as SiblingWrapper,
+  f as Wrapper
 };
 //# sourceMappingURL=base-input-styled.js.map

package/dist/features/ui/inputs/base-input/base-input-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"base-input-styled.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\ninterface IContainerProps {\n  $width?: string | number;\n  $widthX?: number;\n  $size: IBaseInputProps['size'];\n  $willShowMessage: IBaseInputProps['willShowMessage'];\n}\n\nconst Container = styled.div<IContainerProps>(\n  ({ theme, $size, $willShowMessage, $width, $widthX }) => {\n    const { height, marginTop, marginBottom } = theme.input.sizes[$size];\n    const containerHeight = height + marginTop + ($willShowMessage ? marginBottom : 0);\n\n    return `\n      width: ${$width ? $width : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * theme.layout.gutter}px;` : ''}\n      height: ${containerHeight}px;\n    `;\n  },\n);\n\ninterface IWrapperProps {\n  $size: IBaseInputProps['size'];\n  $disabled?: boolean;\n  $renderAs: IBaseInputProps['renderAs'];\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent?: boolean;\n}\n\nconst Wrapper = styled.div<IWrapperProps>(\n  ({ theme, $size, $renderAs, $disabled, $shape, $isTransparent }) => {\n    const { colors, input } = theme;\n    const { height, marginTop, paddingLeft, paddingRight, borderRadius } = input.sizes[$size];\n    const { borderColorName, backgroundColorName } = input.variants[$renderAs];\n\n    const isBorderLessShape = $shape === 'borderLess';\n    const isCurvedShape = $shape === 'curved';\n    const defaultBorderRadius = isBorderLessShape ? 0 : borderRadius;\n\n    const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n    return `\n    position: relative;\n    display: flex;\n    height: ${height}px;\n    margin-top: ${marginTop}px;\n    padding-left: ${isBorderLessShape ? 0 : paddingLeft}px;\n    padding-right: ${isBorderLessShape ? 0 : paddingRight}px;\n    padding-top: ${isCurvedShape ? 1 : 0}px;\n    padding-bottom: ${isCurvedShape ? 1 : 0}px;\n   ${\n     isBorderLessShape\n       ? `\n      border: none;\n      border-bottom: 1px solid ${colors[borderColorName[$disabled ? 'disabled' : 'inactive']]};\n    `\n       : `border: 1px solid ${\n           colors[borderColorName[$disabled ? 'disabled' : isCurvedShape ? 'active' : 'inactive']]\n         };`\n   }\n    border-radius: ${isCurvedShape ? 40 : defaultBorderRadius}px;\n    transition: border-color 0.2s ease-in-out;\n    \n    background: ${background};\n    \n    &:focus-within {\n      border-color: ${colors[borderColorName.active]};\n    }\n    \n    &:hover {\n      ${!$disabled ? `border-color: ${colors[borderColorName.active]};` : ''}\n    }\n  `;\n  },\n);\n\nconst InputWrapper = styled.div`\n  flex-grow: 1;\n`;\n\ninterface ISiblingWrapperProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $siblingPosition: NonNullable<IBaseInputProps['siblingPosition']>;\n  $disabled?: boolean;\n}\n\nconst SiblingWrapper = styled.div<ISiblingWrapperProps>(\n  ({ theme, $inputRenderAs, $disabled, $size, $siblingPosition }) => {\n    const { colors, input } = theme;\n    const { iconPadding } = input.sizes[$size];\n    const { labelColorName } = input.variants[$inputRenderAs];\n\n    return `\n      order: ${$siblingPosition === 'left' ? -1 : 1};\n      padding-${$siblingPosition === 'left' ? 'right' : 'left'}: ${iconPadding}px;\n      align-self: center;\n      color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n\n      ${Wrapper}:focus-within & {\n        color: ${colors[labelColorName.active]};\n      }\n      \n      ${Wrapper}:hover & {\n        ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n      }\n    `;\n  },\n);\n\ninterface ILabelProps {\n  $size: IBaseInputProps['size'];\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $stickyLabel: IBaseInputProps['stickyLabel'];\n  $disabled?: boolean;\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent: IBaseInputProps['isTransparent'];\n}\n\nconst Label = styled(Text)<ILabelProps>(({\n  theme,\n  $size,\n  $inputRenderAs,\n  $stickyLabel,\n  $disabled,\n  $shape,\n  $isTransparent,\n}) => {\n  const { colors, input, text, layout } = theme;\n  const { gutter } = layout;\n  const { height, paddingLeft } = input.sizes[$size];\n  const { lineHeight } = text[input.sizes[$size].labelTextVariant];\n  const { labelColorName } = input.variants[$inputRenderAs];\n  const topPosition = height / 2 - lineHeight / 2 - 1;\n  const topPositionWhenActive = -topPosition - lineHeight / 2 - 1;\n\n  const isBorderLessShape = $shape === 'borderLess';\n\n  const backgroundColor = $isTransparent ? 'transparent' : colors.WHITE;\n\n  return `\n    position: absolute;\n    top: ${topPosition}px;\n    left: ${(isBorderLessShape ? 0 : paddingLeft) - gutter * 0.375}px;\n    padding: 0 ${gutter * 0.375}px;\n    background-color: ${backgroundColor};\n    color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n    pointer-events: none;\n    transform-origin: left;\n    transform: translateY(${$stickyLabel ? topPositionWhenActive : 0}px) scale(${\n      $stickyLabel ? 0.75 : 1\n    });\n    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;\n\n    ${Wrapper}:focus-within & {\n      color: ${colors[labelColorName.active]};\n      transform: translateY(${topPositionWhenActive}px) scale(0.75);\n    }\n    \n    ${Wrapper}:hover & {\n      ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n    }\n\n    & span {\n      color: ${colors.RED};\n      margin-left: 2px;\n    }\n  `;\n});\n\nconst Error = styled(Text)(\n  ({ theme: { colors } }) => `\nposition: absolute;\nbottom: -2px;\ntransform: translateY(calc(100%));\ncolor: ${colors.RED};\n`,\n);\n\nexport { Container, Wrapper, InputWrapper, SiblingWrapper, Label, Error };\n"],"names":["Container","styled","theme","$size","$willShowMessage","$width","$widthX","height","marginTop","marginBottom","containerHeight","Wrapper","$renderAs","$disabled","$shape","$isTransparent","colors","input","paddingLeft","paddingRight","borderRadius","borderColorName","backgroundColorName","isBorderLessShape","isCurvedShape","defaultBorderRadius","background","InputWrapper","SiblingWrapper","$inputRenderAs","$siblingPosition","iconPadding","labelColorName","Label","Text","$stickyLabel","text","layout","gutter","lineHeight","topPosition","topPositionWhenActive","backgroundColor","Error"],"mappings":"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"}
+{"version":3,"file":"base-input-styled.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\ninterface IContainerProps {\n  $width?: string | number;\n  $widthX?: number;\n  $size: IBaseInputProps['size'];\n  $willShowMessage: IBaseInputProps['willShowMessage'];\n}\n\nconst Container = styled.div<IContainerProps>(\n  ({ theme, $size, $willShowMessage, $width, $widthX }) => {\n    const { height, marginTop, marginBottom } = theme.input.sizes[$size];\n    const containerHeight = height + marginTop + ($willShowMessage ? marginBottom : 0);\n\n    return `\n      width: ${$width ? $width : 'auto'}${typeof $width === 'number' ? 'px' : ''};\n      ${$widthX ? `width: ${$widthX * theme.layout.gutter}px;` : ''}\n      height: ${containerHeight}px;\n    `;\n  },\n);\n\ninterface IWrapperProps {\n  $size: IBaseInputProps['size'];\n  $disabled?: boolean;\n  $renderAs: IBaseInputProps['renderAs'];\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent?: boolean;\n  $colorTheme?: IBaseInputProps['colorTheme'];\n}\n\nconst Wrapper = styled.div<IWrapperProps>(\n  ({ theme, $size, $renderAs, $disabled, $shape, $isTransparent, $colorTheme }) => {\n    const { colors, input } = theme;\n    const { height, marginTop, paddingLeft, paddingRight, borderRadius } = input.sizes[$size];\n    const { borderColorName, backgroundColorName } =\n      $colorTheme === 'dark' ? input.darkVariants[$renderAs] : input.variants[$renderAs];\n\n    const isBorderLessShape = $shape === 'borderLess';\n    const isCurvedShape = $shape === 'curved';\n    const defaultBorderRadius = isBorderLessShape ? 0 : borderRadius;\n\n    const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n    return `\n    position: relative;\n    display: flex;\n    height: ${height}px;\n    margin-top: ${marginTop}px;\n    padding-left: ${isBorderLessShape ? 0 : paddingLeft}px;\n    padding-right: ${isBorderLessShape ? 0 : paddingRight}px;\n    padding-top: ${isCurvedShape ? 1 : 0}px;\n    padding-bottom: ${isCurvedShape ? 1 : 0}px;\n   ${\n     isBorderLessShape\n       ? `\n      border: none;\n      border-bottom: 1px solid ${colors[borderColorName[$disabled ? 'disabled' : 'inactive']]};\n    `\n       : `border: 1px solid ${\n           colors[borderColorName[$disabled ? 'disabled' : isCurvedShape ? 'active' : 'inactive']]\n         };`\n   }\n    border-radius: ${isCurvedShape ? 40 : defaultBorderRadius}px;\n    transition: border-color 0.2s ease-in-out;\n    \n    background: ${background};\n    \n    &:focus-within {\n      border-color: ${colors[borderColorName.active]};\n    }\n    \n    &:hover {\n      ${!$disabled ? `border-color: ${colors[borderColorName.active]};` : ''}\n    }\n  `;\n  },\n);\n\nconst InputWrapper = styled.div`\n  flex-grow: 1;\n`;\n\ninterface ISiblingWrapperProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $siblingPosition: NonNullable<IBaseInputProps['siblingPosition']>;\n  $disabled?: boolean;\n}\n\nconst SiblingWrapper = styled.div<ISiblingWrapperProps>(\n  ({ theme, $inputRenderAs, $disabled, $size, $siblingPosition }) => {\n    const { colors, input } = theme;\n    const { iconPadding } = input.sizes[$size];\n    const { labelColorName } = input.variants[$inputRenderAs];\n\n    return `\n      order: ${$siblingPosition === 'left' ? -1 : 1};\n      padding-${$siblingPosition === 'left' ? 'right' : 'left'}: ${iconPadding}px;\n      align-self: center;\n      color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n\n      ${Wrapper}:focus-within & {\n        color: ${colors[labelColorName.active]};\n      }\n      \n      ${Wrapper}:hover & {\n        ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n      }\n    `;\n  },\n);\n\ninterface ILabelProps {\n  $size: IBaseInputProps['size'];\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $stickyLabel: IBaseInputProps['stickyLabel'];\n  $disabled?: boolean;\n  $shape?: IBaseInputProps['shape'];\n  $isTransparent: IBaseInputProps['isTransparent'];\n  $colorTheme: IBaseInputProps['colorTheme'];\n}\n\nconst Label = styled(Text)<ILabelProps>(({\n  theme,\n  $size,\n  $inputRenderAs,\n  $stickyLabel,\n  $disabled,\n  $shape,\n  $isTransparent,\n  $colorTheme,\n}) => {\n  const { colors, input, text, layout } = theme;\n  const { gutter } = layout;\n  const { height, paddingLeft } = input.sizes[$size];\n  const { lineHeight } = text[input.sizes[$size].labelTextVariant];\n  const { labelColorName, labelBackgroundColorName } =\n    $colorTheme === 'dark' ? input.darkVariants[$inputRenderAs] : input.variants[$inputRenderAs];\n  const topPosition = height / 2 - lineHeight / 2 - 1;\n  const topPositionWhenActive = -topPosition - lineHeight / 2 - 1;\n\n  const isBorderLessShape = $shape === 'borderLess';\n\n  const backgroundColor = $isTransparent\n    ? 'transparent'\n    : colors[labelBackgroundColorName ?? 'WHITE'];\n\n  return `\n    position: absolute;\n    top: ${topPosition}px;\n    left: ${(isBorderLessShape ? 0 : paddingLeft) - gutter * 0.375}px;\n    padding: 0 ${gutter * 0.375}px;\n    background-color: ${backgroundColor};\n    color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n    pointer-events: none;\n    transform-origin: left;\n    transform: translateY(${$stickyLabel ? topPositionWhenActive : 0}px) scale(${\n      $stickyLabel ? 0.75 : 1\n    });\n    transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;\n\n    ${Wrapper}:focus-within & {\n      color: ${colors[labelColorName.active]};\n      transform: translateY(${topPositionWhenActive}px) scale(0.75);\n    }\n    \n    ${Wrapper}:hover & {\n      ${!$disabled ? `color: ${colors[labelColorName.active]};` : ''}\n    }\n\n    & span {\n      color: ${colors.RED};\n      margin-left: 2px;\n    }\n  `;\n});\n\ninterface IErrorProps {\n  $colorTheme?: IBaseInputProps['colorTheme'];\n}\n\nconst Error = styled(Text)<IErrorProps>(\n  ({ theme: { colors }, $colorTheme }) => `\nposition: absolute;\nbottom: -2px;\ntransform: translateY(calc(100%));\ncolor: ${colors[$colorTheme === 'dark' ? 'ORANGE_4' : 'RED']};\n`,\n);\n\nexport { Container, Wrapper, InputWrapper, SiblingWrapper, Label, Error };\n"],"names":["Container","styled","theme","$size","$willShowMessage","$width","$widthX","height","marginTop","marginBottom","containerHeight","Wrapper","$renderAs","$disabled","$shape","$isTransparent","$colorTheme","colors","input","paddingLeft","paddingRight","borderRadius","borderColorName","backgroundColorName","isBorderLessShape","isCurvedShape","defaultBorderRadius","background","InputWrapper","SiblingWrapper","$inputRenderAs","$siblingPosition","iconPadding","labelColorName","Label","Text","$stickyLabel","text","layout","gutter","lineHeight","labelBackgroundColorName","topPosition","topPositionWhenActive","backgroundColor","Error"],"mappings":"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"}

package/dist/features/ui/inputs/base-input/base-input.js

@@ -1,60 +1,63 @@
-import { jsx as s, jsxs as a } from "react/jsx-runtime";
+import { jsx as r, jsxs as l } from "react/jsx-runtime";
 import { useTheme as z } from "styled-components";
-import { Container as A, Wrapper as f, InputWrapper as L, Error as T, SiblingWrapper as x, Label as y } from "./base-input-styled.js";
-const j = (p) => {
+import { Container as A, Wrapper as f, InputWrapper as L, Error as x, SiblingWrapper as y, Label as E } from "./base-input-styled.js";
+const k = ($) => {
   const {
     label: t,
-    stickyLabel: $,
-    renderAs: i,
-    width: h,
+    stickyLabel: p,
+    renderAs: s,
+    width: c,
     widthX: b,
-    disabled: r,
-    willShowMessage: c,
-    inputElement: m,
-    siblingElement: l,
-    siblingPosition: u,
+    disabled: i,
+    willShowMessage: m,
+    inputElement: u,
+    siblingElement: o,
+    siblingPosition: w,
     size: e,
     errorMessage: d,
-    mandatory: w,
+    mandatory: T,
     shape: n,
-    isTransparent: o = !1
-  } = p, { input: g } = z();
-  return /* @__PURE__ */ s(A, { $width: h, $widthX: b, $size: e, $willShowMessage: c, children: /* @__PURE__ */ a(
+    isTransparent: h = !1,
+    colorTheme: a
+  } = $, { input: g } = z();
+  return /* @__PURE__ */ r(A, { $width: c, $widthX: b, $size: e, $willShowMessage: m, children: /* @__PURE__ */ l(
     f,
     {
-      $renderAs: i,
+      $renderAs: s,
       $size: e,
-      $disabled: r,
+      $disabled: i,
       $shape: n,
-      $isTransparent: o,
+      $isTransparent: h,
+      $colorTheme: a,
       children: [
-        /* @__PURE__ */ a(L, { children: [
-          m,
-          d && /* @__PURE__ */ s(T, { $renderAs: "body3", children: d })
+        /* @__PURE__ */ l(L, { children: [
+          u,
+          d && /* @__PURE__ */ r(x, { $renderAs: "body3", $colorTheme: a, children: d })
         ] }),
-        l ? /* @__PURE__ */ s(
-          x,
+        o ? /* @__PURE__ */ r(
+          y,
           {
-            $inputRenderAs: i,
-            $disabled: r,
+            $inputRenderAs: s,
+            $disabled: i,
             $size: e,
-            $siblingPosition: u ?? "right",
-            children: l
+            $siblingPosition: w ?? "right",
+            children: o
           }
         ) : void 0,
-        t && n !== "curved" && /* @__PURE__ */ a(
-          y,
+        t && n !== "curved" && /* @__PURE__ */ l(
+          E,
           {
             $renderAs: g.sizes[e].labelTextVariant,
-            $inputRenderAs: i,
+            $inputRenderAs: s,
             $size: e,
-            $stickyLabel: $,
-            $disabled: r,
+            $stickyLabel: p,
+            $disabled: i,
             $shape: n,
-            $isTransparent: o,
+            $isTransparent: h,
+            $colorTheme: a,
             children: [
               t,
-              w && /* @__PURE__ */ s("span", { children: "*" })
+              T && /* @__PURE__ */ r("span", { children: "*" })
             ]
           }
         )
@@ -63,6 +66,6 @@ const j = (p) => {
   ) });
 };
 export {
-  j as default
+  k as default
 };
 //# sourceMappingURL=base-input.js.map