@cuemath/leap 3.5.41 → 3.5.42

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

@@ -1,29 +1,39 @@
-import { jsxs as I, jsx as f } from "react/jsx-runtime";
-import { memo as w, useRef as y, useCallback as a } from "react";
-import { LOTTIE as D } from "../../../../assets/lottie/lottie.js";
-import E from "../../../ui/lottie-animation/lottie-animation.js";
-import { Wrapper as T, InputBox as $ } from "./otp-input-styled.js";
-const j = ({ length: n = 4, value: e, onChange: c, error: m, isBusy: i = !1 }) => {
-  const s = y([]), l = a(
+import { jsxs as k, jsx as n } from "react/jsx-runtime";
+import { memo as w, useRef as D, useCallback as c } from "react";
+import { InputBox as L } from "./otp-input-styled.js";
+import y from "../../../ui/layout/flex-view.js";
+import E from "../../../ui/image/image.js";
+import { ILLUSTRATIONS as R } from "../../../../assets/illustrations/illustrations.js";
+import $ from "../../../ui/lottie-animation/lottie-animation.js";
+import { LOTTIE as A } from "../../../../assets/lottie/lottie.js";
+const O = ({
+  length: a = 4,
+  value: e,
+  onChange: m,
+  error: f,
+  isBusy: l = !1,
+  renderThemeAs: h = "dark"
+}) => {
+  const i = h === "dark", s = D([]), I = c(
     (r, t) => {
       var u;
       const o = t.replace(/\D/g, "").slice(-1), p = e.split("");
-      p[r] = o, c(p.join("")), o && r < n - 1 && ((u = s.current[r + 1]) == null || u.focus());
+      p[r] = o, m(p.join("")), o && r < a - 1 && ((u = s.current[r + 1]) == null || u.focus());
     },
-    [n, c, e]
-  ), g = a(
+    [a, m, e]
+  ), g = c(
     (r, t) => {
       var o;
       r.key === "Backspace" && !e[t] && t > 0 && ((o = s.current[t - 1]) == null || o.focus());
     },
     [e]
-  ), h = a((r) => {
+  ), T = c((r) => {
     const t = r.target;
     t.value.length > 1 && (t.value = t.value.slice(-1));
   }, []);
-  return /* @__PURE__ */ I(T, { $flexDirection: "row", $flexColumnGapX: 1, $alignItems: "center", children: [
-    Array.from({ length: n }).map((r, t) => /* @__PURE__ */ f(
-      $,
+  return /* @__PURE__ */ k(y, { $flexDirection: "row", $flexColumnGapX: 1, $alignItems: "center", children: [
+    Array.from({ length: a }).map((r, t) => /* @__PURE__ */ n(
+      L,
       {
         autoFocus: t === 0,
         type: "text",
@@ -31,21 +41,22 @@ const j = ({ length: n = 4, value: e, onChange: c, error: m, isBusy: i = !1 }) =
         pattern: "[0-9]*",
         maxLength: 1,
         value: e[t] || "",
-        onChange: (o) => l(t, o.target.value),
-        onInput: h,
+        onChange: (o) => I(t, o.target.value),
+        $isDarkTheme: i,
+        onInput: T,
         onFocus: (o) => o.target.select(),
         onKeyDown: (o) => g(o, t),
-        $hasError: !!m,
+        $hasError: !!f,
         ref: (o) => {
           o && (s.current[t] = o);
         }
       },
       t
     )),
-    i && /* @__PURE__ */ f(E, { src: D.SPINNER_WHITE, height: 24, width: 24 })
+    l && (i ? /* @__PURE__ */ n($, { src: A.SPINNER_WHITE, height: 24, width: 24 }) : /* @__PURE__ */ n(E, { src: R.LOADER, height: 40, width: 40, alt: "loader" }))
   ] });
-}, B = w(j);
+}, P = w(O);
 export {
-  B as default
+  P as default
 };
 //# sourceMappingURL=otp-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","sources":["../../../../../src/features/auth/comps/otp-input/otp-input.tsx"],"sourcesContent":["import { useCallback, useRef, memo, type FC, type KeyboardEvent, type FormEvent } from 'react';\n\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as styled from './otp-input-styled';\nimport type { IOTPInputProps } from './otp-input-types';\n\nconst OTPInput: FC<IOTPInputProps> = ({ length = 4, value, onChange, error, isBusy = false }) => {\n  const inputsRef = useRef<HTMLInputElement[]>([]);\n\n  const handleChange = useCallback(\n    (index: number, val: string) => {\n      // Only allow single digit numbers\n      const digit = val.replace(/\\D/g, '').slice(-1);\n\n      const newValue = value.split('');\n\n      newValue[index] = digit;\n      onChange(newValue.join(''));\n\n      if (digit && index < length - 1) {\n        inputsRef.current[index + 1]?.focus();\n      }\n    },\n    [length, onChange, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>, index: number) => {\n      if (e.key === 'Backspace' && !value[index] && index > 0) {\n        inputsRef.current[index - 1]?.focus();\n      }\n    },\n    [value],\n  );\n\n  const handleInput = useCallback((e: FormEvent<HTMLInputElement>) => {\n    // Prevent more than 1 character\n    const target = e.target as HTMLInputElement;\n\n    if (target.value.length > 1) {\n      target.value = target.value.slice(-1);\n    }\n  }, []);\n\n  return (\n    <styled.Wrapper $flexDirection=\"row\" $flexColumnGapX={1} $alignItems=\"center\">\n      {Array.from({ length }).map((_, index) => (\n        <styled.InputBox\n          autoFocus={index === 0}\n          key={index}\n          type=\"text\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxLength={1}\n          value={value[index] || ''}\n          onChange={e => handleChange(index, e.target.value)}\n          onInput={handleInput}\n          onFocus={e => e.target.select()}\n          onKeyDown={e => handleKeyDown(e, index)}\n          $hasError={!!error}\n          ref={el => {\n            if (el) inputsRef.current[index] = el;\n          }}\n        />\n      ))}\n      {isBusy && <LottieAnimation src={LOTTIE.SPINNER_WHITE} height={24} width={24} />}\n    </styled.Wrapper>\n  );\n};\n\nexport default memo(OTPInput);\n"],"names":["OTPInput","length","value","onChange","error","isBusy","inputsRef","useRef","handleChange","useCallback","index","val","digit","newValue","_a","handleKeyDown","e","handleInput","target","jsxs","styled.Wrapper","_","jsx","styled.InputBox","el","LottieAnimation","LOTTIE","otpInput","memo"],"mappings":";;;;;AAOA,MAAMA,IAA+B,CAAC,EAAE,QAAAC,IAAS,GAAG,OAAAC,GAAO,UAAAC,GAAU,OAAAC,GAAO,QAAAC,IAAS,SAAY;AACzF,QAAAC,IAAYC,EAA2B,CAAA,CAAE,GAEzCC,IAAeC;AAAA,IACnB,CAACC,GAAeC,MAAgB;;AAE9B,YAAMC,IAAQD,EAAI,QAAQ,OAAO,EAAE,EAAE,MAAM,EAAE,GAEvCE,IAAWX,EAAM,MAAM,EAAE;AAE/B,MAAAW,EAASH,CAAK,IAAIE,GACTT,EAAAU,EAAS,KAAK,EAAE,CAAC,GAEtBD,KAASF,IAAQT,IAAS,OAC5Ba,IAAAR,EAAU,QAAQI,IAAQ,CAAC,MAA3B,QAAAI,EAA8B;AAAA,IAElC;AAAA,IACA,CAACb,GAAQE,GAAUD,CAAK;AAAA,EAAA,GAGpBa,IAAgBN;AAAA,IACpB,CAACO,GAAoCN,MAAkB;;AACjD,MAAAM,EAAE,QAAQ,eAAe,CAACd,EAAMQ,CAAK,KAAKA,IAAQ,OACpDI,IAAAR,EAAU,QAAQI,IAAQ,CAAC,MAA3B,QAAAI,EAA8B;AAAA,IAElC;AAAA,IACA,CAACZ,CAAK;AAAA,EAAA,GAGFe,IAAcR,EAAY,CAACO,MAAmC;AAElE,UAAME,IAASF,EAAE;AAEb,IAAAE,EAAO,MAAM,SAAS,MACxBA,EAAO,QAAQA,EAAO,MAAM,MAAM,EAAE;AAAA,EAExC,GAAG,CAAE,CAAA;AAGH,SAAA,gBAAAC,EAACC,GAAA,EAAe,gBAAe,OAAM,iBAAiB,GAAG,aAAY,UAClE,UAAA;AAAA,IAAM,MAAA,KAAK,EAAE,QAAAnB,EAAQ,CAAA,EAAE,IAAI,CAACoB,GAAGX,MAC9B,gBAAAY;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAWb,MAAU;AAAA,QAErB,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,WAAW;AAAA,QACX,OAAOR,EAAMQ,CAAK,KAAK;AAAA,QACvB,UAAU,CAAKM,MAAAR,EAAaE,GAAOM,EAAE,OAAO,KAAK;AAAA,QACjD,SAASC;AAAA,QACT,SAAS,CAAAD,MAAKA,EAAE,OAAO,OAAO;AAAA,QAC9B,WAAW,CAAAA,MAAKD,EAAcC,GAAGN,CAAK;AAAA,QACtC,WAAW,CAAC,CAACN;AAAA,QACb,KAAK,CAAMoB,MAAA;AACT,UAAIA,MAAIlB,EAAU,QAAQI,CAAK,IAAIc;AAAA,QACrC;AAAA,MAAA;AAAA,MAbKd;AAAA,IAAA,CAeR;AAAA,IACAL,uBAAWoB,GAAgB,EAAA,KAAKC,EAAO,eAAe,QAAQ,IAAI,OAAO,GAAI,CAAA;AAAA,EAChF,EAAA,CAAA;AAEJ,GAEeC,IAAAC,EAAK5B,CAAQ;"}
+{"version":3,"file":"otp-input.js","sources":["../../../../../src/features/auth/comps/otp-input/otp-input.tsx"],"sourcesContent":["import { useCallback, useRef, memo, type FC, type KeyboardEvent, type FormEvent } from 'react';\n\nimport * as Styled from './otp-input-styled';\nimport type { IOTPInputProps } from './otp-input-types';\nimport FlexView from '../../../ui/layout/flex-view';\nimport Image from '../../../ui/image/image';\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport { LOTTIE } from '../../../../assets/lottie/lottie';\n\nconst OTPInput: FC<IOTPInputProps> = ({\n  length = 4,\n  value,\n  onChange,\n  error,\n  isBusy = false,\n  renderThemeAs = 'dark',\n}) => {\n  const isDarkTheme = renderThemeAs === 'dark';\n  const inputsRef = useRef<HTMLInputElement[]>([]);\n\n  const handleChange = useCallback(\n    (index: number, val: string) => {\n      // Only allow single digit numbers\n      const digit = val.replace(/\\D/g, '').slice(-1);\n\n      const newValue = value.split('');\n\n      newValue[index] = digit;\n      onChange(newValue.join(''));\n\n      if (digit && index < length - 1) {\n        inputsRef.current[index + 1]?.focus();\n      }\n    },\n    [length, onChange, value],\n  );\n\n  const handleKeyDown = useCallback(\n    (e: KeyboardEvent<HTMLInputElement>, index: number) => {\n      if (e.key === 'Backspace' && !value[index] && index > 0) {\n        inputsRef.current[index - 1]?.focus();\n      }\n    },\n    [value],\n  );\n\n  const handleInput = useCallback((e: FormEvent<HTMLInputElement>) => {\n    // Prevent more than 1 character\n    const target = e.target as HTMLInputElement;\n\n    if (target.value.length > 1) {\n      target.value = target.value.slice(-1);\n    }\n  }, []);\n\n  return (\n    <FlexView $flexDirection=\"row\" $flexColumnGapX={1} $alignItems=\"center\">\n      {Array.from({ length }).map((_, index) => (\n        <Styled.InputBox\n          autoFocus={index === 0}\n          key={index}\n          type=\"text\"\n          inputMode=\"numeric\"\n          pattern=\"[0-9]*\"\n          maxLength={1}\n          value={value[index] || ''}\n          onChange={e => handleChange(index, e.target.value)}\n          $isDarkTheme={isDarkTheme}\n          onInput={handleInput}\n          onFocus={e => e.target.select()}\n          onKeyDown={e => handleKeyDown(e, index)}\n          $hasError={!!error}\n          ref={el => {\n            if (el) inputsRef.current[index] = el;\n          }}\n        />\n      ))}\n      {isBusy &&\n        (isDarkTheme ? (\n          <LottieAnimation src={LOTTIE.SPINNER_WHITE} height={24} width={24} />\n        ) : (\n          <Image src={ILLUSTRATIONS.LOADER} height={40} width={40} alt=\"loader\" />\n        ))}\n    </FlexView>\n  );\n};\n\nexport default memo(OTPInput);\n"],"names":["OTPInput","length","value","onChange","error","isBusy","renderThemeAs","isDarkTheme","inputsRef","useRef","handleChange","useCallback","index","val","digit","newValue","_a","handleKeyDown","e","handleInput","target","FlexView","_","jsx","Styled.InputBox","el","LottieAnimation","LOTTIE","Image","ILLUSTRATIONS","otpInput","memo"],"mappings":";;;;;;;;AAUA,MAAMA,IAA+B,CAAC;AAAA,EACpC,QAAAC,IAAS;AAAA,EACT,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,eAAAC,IAAgB;AAClB,MAAM;AACJ,QAAMC,IAAcD,MAAkB,QAChCE,IAAYC,EAA2B,CAAA,CAAE,GAEzCC,IAAeC;AAAA,IACnB,CAACC,GAAeC,MAAgB;;AAE9B,YAAMC,IAAQD,EAAI,QAAQ,OAAO,EAAE,EAAE,MAAM,EAAE,GAEvCE,IAAWb,EAAM,MAAM,EAAE;AAE/B,MAAAa,EAASH,CAAK,IAAIE,GACTX,EAAAY,EAAS,KAAK,EAAE,CAAC,GAEtBD,KAASF,IAAQX,IAAS,OAC5Be,IAAAR,EAAU,QAAQI,IAAQ,CAAC,MAA3B,QAAAI,EAA8B;AAAA,IAElC;AAAA,IACA,CAACf,GAAQE,GAAUD,CAAK;AAAA,EAAA,GAGpBe,IAAgBN;AAAA,IACpB,CAACO,GAAoCN,MAAkB;;AACjD,MAAAM,EAAE,QAAQ,eAAe,CAAChB,EAAMU,CAAK,KAAKA,IAAQ,OACpDI,IAAAR,EAAU,QAAQI,IAAQ,CAAC,MAA3B,QAAAI,EAA8B;AAAA,IAElC;AAAA,IACA,CAACd,CAAK;AAAA,EAAA,GAGFiB,IAAcR,EAAY,CAACO,MAAmC;AAElE,UAAME,IAASF,EAAE;AAEb,IAAAE,EAAO,MAAM,SAAS,MACxBA,EAAO,QAAQA,EAAO,MAAM,MAAM,EAAE;AAAA,EAExC,GAAG,CAAE,CAAA;AAEL,2BACGC,GAAS,EAAA,gBAAe,OAAM,iBAAiB,GAAG,aAAY,UAC5D,UAAA;AAAA,IAAM,MAAA,KAAK,EAAE,QAAApB,EAAQ,CAAA,EAAE,IAAI,CAACqB,GAAGV,MAC9B,gBAAAW;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,WAAWZ,MAAU;AAAA,QAErB,MAAK;AAAA,QACL,WAAU;AAAA,QACV,SAAQ;AAAA,QACR,WAAW;AAAA,QACX,OAAOV,EAAMU,CAAK,KAAK;AAAA,QACvB,UAAU,CAAKM,MAAAR,EAAaE,GAAOM,EAAE,OAAO,KAAK;AAAA,QACjD,cAAcX;AAAA,QACd,SAASY;AAAA,QACT,SAAS,CAAAD,MAAKA,EAAE,OAAO,OAAO;AAAA,QAC9B,WAAW,CAAAA,MAAKD,EAAcC,GAAGN,CAAK;AAAA,QACtC,WAAW,CAAC,CAACR;AAAA,QACb,KAAK,CAAMqB,MAAA;AACT,UAAIA,MAAIjB,EAAU,QAAQI,CAAK,IAAIa;AAAA,QACrC;AAAA,MAAA;AAAA,MAdKb;AAAA,IAAA,CAgBR;AAAA,IACAP,MACEE,IACE,gBAAAgB,EAAAG,GAAA,EAAgB,KAAKC,EAAO,eAAe,QAAQ,IAAI,OAAO,GAAI,CAAA,IAElE,gBAAAJ,EAAAK,GAAA,EAAM,KAAKC,EAAc,QAAQ,QAAQ,IAAI,OAAO,IAAI,KAAI,SAAS,CAAA;AAAA,EAE5E,EAAA,CAAA;AAEJ,GAEeC,IAAAC,EAAK/B,CAAQ;"}

package/dist/features/auth/comps/pill-button/pill-button-styled.js

@@ -1,31 +1,31 @@
-import l, { css as p } from "styled-components";
-import $ from "../../../ui/layout/flex-view.js";
-import u from "../../../ui/text/text.js";
-const g = l.button`
-  ${({ selected: o, disabled: r, width: t, height: n, borderColor: e, theme: i, isTransparent: s }) => {
-  const c = r ? i.colors.WHITE_T_10 : o ? i.colors.WHITE_1 : s ? i.colors.TRANSPARENT : i.colors.BLACK_1, a = r ? i.colors.WHITE_T_15 : e;
+import e, { css as p } from "styled-components";
+import u from "../../../ui/layout/flex-view.js";
+import $ from "../../../ui/text/text.js";
+const d = e.button`
+  ${({ selected: o, disabled: t, width: l, height: i, borderColor: s, theme: r, isTransparent: c, isDarkTheme: n }) => {
+  const _ = t ? r.colors[n ? "WHITE_T_10" : "REAL_BLACK_10"] : o ? r.colors[n ? "WHITE_1" : "BLACK_1"] : c ? r.colors.TRANSPARENT : r.colors[n ? "BLACK_1" : "WHITE_1"], a = t ? r.colors[n ? "WHITE_T_15" : "REAL_BLACK_15"] : s;
   return p`
       position: relative;
       display: inline-flex;
       align-items: center;
       justify-content: center;
-      cursor: ${r ? "not-allowed" : "pointer"};
+      cursor: ${t ? "not-allowed" : "pointer"};
       transition: all 0.3s ease;
       padding: 7.5px 16px;
       border-radius: 40px;
       border: 1px solid ${a};
-      width: ${t ? `${t}` : "auto"}${typeof t == "number" ? "px" : ""};
-      height: ${n ? `${n}px` : "auto"};
+      width: ${l ? `${l}` : "auto"}${typeof l == "number" ? "px" : ""};
+      height: ${i ? `${i}px` : "auto"};
       min-height: 37px;
-      background-color: ${c};
+      background-color: ${_};
       &:hover {
-        background-color: ${!o && !r ? i.colors.WHITE_T_10 : void 0};
+        background-color: ${!o && !t ? r.colors[n ? "WHITE_T_10" : "REAL_BLACK_10"] : void 0};
       }
     `;
 }}
-`, d = l($)`
+`, E = e(u)`
   visibility: ${({ $showLottie: o }) => o ? "visible" : "hidden"};
-`, b = l(u)`
+`, L = e($)`
   transition:
     color 0.3s ease,
     left 0.3s ease,
@@ -38,13 +38,16 @@ const g = l.button`
     left: ${o ? "0" : "-10px"};
   `};
 
-  ${({ selected: o, disabled: r, theme: t, textColor: n }) => `
-    color: ${r ? t.colors.WHITE_T_38 : o ? t.colors.BLACK_1 : n};
-  `};
+  ${({ selected: o, disabled: t, theme: l, textColor: i, isDarkTheme: s }) => {
+  const r = l.colors[s ? "WHITE_T_38" : "BLACK_T_38"], c = l.colors[s ? "BLACK_1" : "WHITE_1"];
+  return p`
+      color: ${t ? r : o ? c : i};
+    `;
+}};
 `;
 export {
-  d as IconWrapper,
-  b as Label,
-  g as Wrapper
+  E as IconWrapper,
+  L as Label,
+  d as Wrapper
 };
 //# sourceMappingURL=pill-button-styled.js.map

package/dist/features/auth/comps/pill-button/pill-button-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill-button-styled.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled.button<{\n  selected: boolean;\n  disabled: boolean;\n  width?: number | string;\n  height?: number;\n  borderColor?: string;\n  isTransparent?: boolean;\n}>`\n  ${({ selected, disabled, width, height, borderColor, theme, isTransparent }) => {\n    const getDefaultBgColor = () => {\n      if (disabled) return theme.colors.WHITE_T_10;\n\n      if (selected) return theme.colors.WHITE_1;\n\n      if (isTransparent) return theme.colors.TRANSPARENT;\n\n      return theme.colors.BLACK_1;\n    };\n\n    const defaultBgColor = getDefaultBgColor();\n\n    const borderColorVal = disabled ? theme.colors.WHITE_T_15 : borderColor;\n\n    return css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      transition: all 0.3s ease;\n      padding: 7.5px 16px;\n      border-radius: 40px;\n      border: 1px solid ${borderColorVal};\n      width: ${width ? `${width}` : 'auto'}${typeof width === 'number' ? 'px' : ''};\n      height: ${height ? `${height}px` : 'auto'};\n      min-height: 37px;\n      background-color: ${defaultBgColor};\n      &:hover {\n        background-color: ${!selected && !disabled ? theme.colors.WHITE_T_10 : undefined};\n      }\n    `;\n  }}\n`;\n\nexport const IconWrapper = styled(FlexView)<{\n  $showLottie: boolean;\n}>`\n  visibility: ${({ $showLottie }) => ($showLottie ? 'visible' : 'hidden')};\n`;\n\nexport const Label = styled(Text)<{\n  selected: boolean;\n  disabled: boolean;\n  shouldOffsetLabel: boolean;\n  textColor: string;\n  isVisible: boolean;\n  width?: string;\n}>`\n  transition:\n    color 0.3s ease,\n    left 0.3s ease,\n    opacity 0.8s ease;\n  position: relative;\n  ${({ width }) => width && `min-width: ${width};`}\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n\n  ${({ shouldOffsetLabel }) => `\n    left: ${shouldOffsetLabel ? '0' : '-10px'};\n  `};\n\n  ${({ selected, disabled, theme, textColor }) => `\n    color: ${disabled ? theme.colors.WHITE_T_38 : selected ? theme.colors.BLACK_1 : textColor};\n  `};\n`;\n"],"names":["Wrapper","styled","selected","disabled","width","height","borderColor","theme","isTransparent","defaultBgColor","borderColorVal","css","IconWrapper","FlexView","$showLottie","Label","Text","isVisible","shouldOffsetLabel","textColor"],"mappings":";;;AAKO,MAAMA,IAAUC,EAAO;AAAA,IAQ1B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,aAAAC,GAAa,OAAAC,GAAO,eAAAC,QAAoB;AAW9E,QAAMC,IATAN,IAAiBI,EAAM,OAAO,aAE9BL,IAAiBK,EAAM,OAAO,UAE9BC,IAAsBD,EAAM,OAAO,cAEhCA,EAAM,OAAO,SAKhBG,IAAiBP,IAAWI,EAAM,OAAO,aAAaD;AAErD,SAAAK;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKR,IAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,0BAI1BO,CAAc;AAAA,eACzBN,IAAQ,GAAGA,CAAK,KAAK,MAAM,GAAG,OAAOA,KAAU,WAAW,OAAO,EAAE;AAAA,gBAClEC,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA;AAAA,0BAErBI,CAAc;AAAA;AAAA,4BAEZ,CAACP,KAAY,CAACC,IAAWI,EAAM,OAAO,aAAa,MAAS;AAAA;AAAA;AAGtF,CAAC;AAAA,GAGUK,IAAcX,EAAOY,CAAQ;AAAA,gBAG1B,CAAC,EAAE,aAAAC,EAAA,MAAmBA,IAAc,YAAY,QAAS;AAAA,GAG5DC,IAAQd,EAAOe,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAa5B,CAAC,EAAE,OAAAZ,QAAYA,KAAS,cAAcA,CAAK,GAAG;AAAA,aACrC,CAAC,EAAE,WAAAa,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA;AAAA,IAE/C,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAAA,YACnBA,IAAoB,MAAM,OAAO;AAAA,GAC1C;AAAA;AAAA,IAEC,CAAC,EAAE,UAAAhB,GAAU,UAAAC,GAAU,OAAAI,GAAO,WAAAY,EAAgB,MAAA;AAAA,aACrChB,IAAWI,EAAM,OAAO,aAAaL,IAAWK,EAAM,OAAO,UAAUY,CAAS;AAAA,GAC1F;AAAA;"}
+{"version":3,"file":"pill-button-styled.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button-styled.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport Text from '../../../ui/text/text';\n\nexport const Wrapper = styled.button<{\n  selected: boolean;\n  disabled: boolean;\n  width?: number | string;\n  height?: number;\n  borderColor?: string;\n  isTransparent?: boolean;\n  isDarkTheme?: boolean;\n}>`\n  ${({ selected, disabled, width, height, borderColor, theme, isTransparent, isDarkTheme }) => {\n    const getDefaultBgColor = () => {\n      if (disabled) return theme.colors[isDarkTheme ? 'WHITE_T_10' : 'REAL_BLACK_10'];\n\n      if (selected) return theme.colors[isDarkTheme ? 'WHITE_1' : 'BLACK_1'];\n\n      if (isTransparent) return theme.colors.TRANSPARENT;\n\n      return theme.colors[isDarkTheme ? 'BLACK_1' : 'WHITE_1'];\n    };\n\n    const defaultBgColor = getDefaultBgColor();\n\n    const borderColorVal = disabled\n      ? theme.colors[isDarkTheme ? 'WHITE_T_15' : 'REAL_BLACK_15']\n      : borderColor;\n\n    return css`\n      position: relative;\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      cursor: ${disabled ? 'not-allowed' : 'pointer'};\n      transition: all 0.3s ease;\n      padding: 7.5px 16px;\n      border-radius: 40px;\n      border: 1px solid ${borderColorVal};\n      width: ${width ? `${width}` : 'auto'}${typeof width === 'number' ? 'px' : ''};\n      height: ${height ? `${height}px` : 'auto'};\n      min-height: 37px;\n      background-color: ${defaultBgColor};\n      &:hover {\n        background-color: ${!selected && !disabled\n          ? theme.colors[isDarkTheme ? 'WHITE_T_10' : 'REAL_BLACK_10']\n          : undefined};\n      }\n    `;\n  }}\n`;\n\nexport const IconWrapper = styled(FlexView)<{\n  $showLottie: boolean;\n}>`\n  visibility: ${({ $showLottie }) => ($showLottie ? 'visible' : 'hidden')};\n`;\n\nexport const Label = styled(Text)<{\n  selected: boolean;\n  disabled: boolean;\n  shouldOffsetLabel: boolean;\n  textColor: string;\n  isVisible: boolean;\n  width?: string;\n  isDarkTheme?: boolean;\n}>`\n  transition:\n    color 0.3s ease,\n    left 0.3s ease,\n    opacity 0.8s ease;\n  position: relative;\n  ${({ width }) => width && `min-width: ${width};`}\n  opacity: ${({ isVisible }) => (isVisible ? 1 : 0)};\n\n  ${({ shouldOffsetLabel }) => `\n    left: ${shouldOffsetLabel ? '0' : '-10px'};\n  `};\n\n  ${({ selected, disabled, theme, textColor, isDarkTheme }) => {\n    const disabledColor = theme.colors[isDarkTheme ? 'WHITE_T_38' : 'BLACK_T_38'];\n    const selectedColor = theme.colors[isDarkTheme ? 'BLACK_1' : 'WHITE_1'];\n\n    return css`\n      color: ${disabled ? disabledColor : selected ? selectedColor : textColor};\n    `;\n  }};\n`;\n"],"names":["Wrapper","styled","selected","disabled","width","height","borderColor","theme","isTransparent","isDarkTheme","defaultBgColor","borderColorVal","css","IconWrapper","FlexView","$showLottie","Label","Text","isVisible","shouldOffsetLabel","textColor","disabledColor","selectedColor"],"mappings":";;;AAKO,MAAMA,IAAUC,EAAO;AAAA,IAS1B,CAAC,EAAE,UAAAC,GAAU,UAAAC,GAAU,OAAAC,GAAO,QAAAC,GAAQ,aAAAC,GAAa,OAAAC,GAAO,eAAAC,GAAe,aAAAC,QAAkB;AAW3F,QAAMC,IATAP,IAAiBI,EAAM,OAAOE,IAAc,eAAe,eAAe,IAE1EP,IAAiBK,EAAM,OAAOE,IAAc,YAAY,SAAS,IAEjED,IAAsBD,EAAM,OAAO,cAEhCA,EAAM,OAAOE,IAAc,YAAY,SAAS,GAKnDE,IAAiBR,IACnBI,EAAM,OAAOE,IAAc,eAAe,eAAe,IACzDH;AAEG,SAAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKKT,IAAW,gBAAgB,SAAS;AAAA;AAAA;AAAA;AAAA,0BAI1BQ,CAAc;AAAA,eACzBP,IAAQ,GAAGA,CAAK,KAAK,MAAM,GAAG,OAAOA,KAAU,WAAW,OAAO,EAAE;AAAA,gBAClEC,IAAS,GAAGA,CAAM,OAAO,MAAM;AAAA;AAAA,0BAErBK,CAAc;AAAA;AAAA,4BAEZ,CAACR,KAAY,CAACC,IAC9BI,EAAM,OAAOE,IAAc,eAAe,eAAe,IACzD,MAAS;AAAA;AAAA;AAGnB,CAAC;AAAA,GAGUI,IAAcZ,EAAOa,CAAQ;AAAA,gBAG1B,CAAC,EAAE,aAAAC,EAAA,MAAmBA,IAAc,YAAY,QAAS;AAAA,GAG5DC,IAAQf,EAAOgB,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAc5B,CAAC,EAAE,OAAAb,QAAYA,KAAS,cAAcA,CAAK,GAAG;AAAA,aACrC,CAAC,EAAE,WAAAc,EAAA,MAAiBA,IAAY,IAAI,CAAE;AAAA;AAAA,IAE/C,CAAC,EAAE,mBAAAC,EAAA,MAAwB;AAAA,YACnBA,IAAoB,MAAM,OAAO;AAAA,GAC1C;AAAA;AAAA,IAEC,CAAC,EAAE,UAAAjB,GAAU,UAAAC,GAAU,OAAAI,GAAO,WAAAa,GAAW,aAAAX,QAAkB;AAC3D,QAAMY,IAAgBd,EAAM,OAAOE,IAAc,eAAe,YAAY,GACtEa,IAAgBf,EAAM,OAAOE,IAAc,YAAY,SAAS;AAE/D,SAAAG;AAAA,eACIT,IAAWkB,IAAgBnB,IAAWoB,IAAgBF,CAAS;AAAA;AAE5E,CAAC;AAAA;"}

package/dist/features/auth/comps/pill-button/pill-button.js

@@ -1,71 +1,74 @@
-import { jsx as r, jsxs as k } from "react/jsx-runtime";
-import { memo as y, useState as l, useCallback as c, useEffect as B } from "react";
-import { useTheme as O } from "styled-components";
-import S from "../../../ui/arrow-tooltip/arrow-tooltip.js";
-import V from "../../../ui/hooks/use-click-handler.js";
-import X from "../../../ui/layout/flex-view.js";
-import Y from "../../../ui/lottie-animation/lottie-animation.js";
-import { Wrapper as D, IconWrapper as F, Label as G } from "./pill-button-styled.js";
-const q = {
+import { jsx as r, jsxs as O } from "react/jsx-runtime";
+import { memo as S, useState as l, useCallback as a, useEffect as V } from "react";
+import { useTheme as X } from "styled-components";
+import D from "../../../ui/arrow-tooltip/arrow-tooltip.js";
+import Y from "../../../ui/hooks/use-click-handler.js";
+import F from "../../../ui/layout/flex-view.js";
+import G from "../../../ui/lottie-animation/lottie-animation.js";
+import { Wrapper as K, IconWrapper as q, Label as z } from "./pill-button-styled.js";
+const J = {
   autoplay: !0,
   loop: !0,
   renderer: "canvas"
-}, z = ({
-  id: a,
+}, N = ({
+  id: h,
   label: n,
   selected: t = !1,
   disabled: e = !1,
   animatedLabel: u = "",
   icon: s,
   onClick: f,
-  tooltip: h,
+  tooltip: m,
   width: w,
-  analyticsLabel: A,
-  analyticsProps: C,
-  isTransparent: $ = !1
+  analyticsLabel: $,
+  analyticsProps: g,
+  isTransparent: I = !1,
+  renderThemeAs: T = "dark"
 }) => {
-  const [g, m] = l(!1), [o, I] = l(!1), [E, p] = l(!0), [L, T] = l(n), { colors: d } = O(), i = !!u, b = c(() => {
-    f(a);
-  }, [a, f]), { handleClick: H } = V({ label: n, analyticsLabel: A, analyticsProps: C }, b);
-  B(() => {
+  const [b, p] = l(!1), [o, k] = l(!1), [E, d] = l(!0), [L, H] = l(n), { colors: x } = X(), i = !!u, c = T === "dark", W = a(() => {
+    f(h);
+  }, [h, f]), { handleClick: B } = Y({ label: n, analyticsLabel: $, analyticsProps: g }, W);
+  V(() => {
     if (!i || e) return;
-    const _ = setInterval(() => {
-      p(!1), setTimeout(() => {
-        I((j) => !j), T(o ? n : u), p(!0);
+    const j = setInterval(() => {
+      d(!1), setTimeout(() => {
+        k((y) => !y), H(o ? n : u), d(!0);
       }, 400);
     }, 1500);
-    return () => clearInterval(_);
+    return () => clearInterval(j);
   }, [u, e, o, n, i]);
-  const W = c(() => m(!0), []), M = c(() => m(!1), []), x = !!s && !e && (i || t || g), P = d[o ? "YELLOW_4" : "WHITE_1"], R = d[o && !t ? "YELLOW_4" : "WHITE_1"], v = /* @__PURE__ */ r(
-    D,
+  const M = a(() => p(!0), []), P = a(() => p(!1), []), C = !!s && !e && (i || t || b), A = c ? "WHITE_1" : "BLACK_1", R = x[o ? "YELLOW_4" : A], _ = x[o && !t ? "YELLOW_4" : A], v = /* @__PURE__ */ r(
+    K,
     {
       selected: t,
       disabled: e,
-      onClick: H,
-      onMouseEnter: W,
-      onMouseLeave: M,
+      onClick: B,
+      onMouseEnter: M,
+      onMouseLeave: P,
       width: w,
-      borderColor: P,
-      isTransparent: $,
-      children: /* @__PURE__ */ k(
-        X,
+      borderColor: R,
+      isTransparent: I,
+      isDarkTheme: c,
+      children: /* @__PURE__ */ O(
+        F,
         {
           $flexDirection: "row",
           $alignItems: "center",
           $justifyContent: "center",
           $flexColumnGapX: 0.25,
           children: [
-            s && /* @__PURE__ */ r(F, { $widthX: 1, $heightX: 1, $showLottie: x, children: /* @__PURE__ */ r(Y, { src: s, settings: q }) }),
+            s && /* @__PURE__ */ r(q, { $widthX: 1, $heightX: 1, $showLottie: C, children: /* @__PURE__ */ r(G, { src: s, settings: J }) }),
             /* @__PURE__ */ r(
-              G,
+              z,
               {
-                shouldOffsetLabel: x || !s,
+                shouldOffsetLabel: C || !s,
                 selected: t,
                 disabled: e,
                 $renderAs: o ? t ? "ub3-bold" : "ub3" : t ? "ub2-bold" : "ub2",
-                textColor: R,
+                textColor: _,
                 isVisible: E,
                 width: i ? "85px" : void 0,
+                isDarkTheme: c,
                 children: L
               },
               L
@@ -75,9 +78,9 @@ const q = {
       )
     }
   );
-  return e && h ? /* @__PURE__ */ r(S, { renderAs: "primary", tooltipItem: h, position: "top", children: v }) : v;
-}, st = y(z);
+  return e && m ? /* @__PURE__ */ r(D, { renderAs: "primary", tooltipItem: m, position: "top", children: v }) : v;
+}, ut = S(N);
 export {
-  st as default
+  ut as default
 };
 //# sourceMappingURL=pill-button.js.map

package/dist/features/auth/comps/pill-button/pill-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"pill-button.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button.tsx"],"sourcesContent":["import { useCallback, useEffect, useState, type FC, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport useClickHandler from '../../../ui/hooks/use-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './pill-button-styled';\nimport type { IPillButtonProps } from './pill-button-types';\n\nconst lottieSettings = {\n  autoplay: true,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PillButton: FC<IPillButtonProps> = ({\n  id,\n  label,\n  selected = false,\n  disabled = false,\n  animatedLabel = '',\n  icon,\n  onClick,\n  tooltip,\n  width,\n  analyticsLabel,\n  analyticsProps,\n  isTransparent = false,\n}) => {\n  const [isHovered, setHovered] = useState(false);\n  const [highlightPhase, setHighlightPhase] = useState(false);\n  const [isVisible, setIsVisible] = useState(true);\n  const [currentLabel, setCurrentLabel] = useState(label);\n  const { colors } = useTheme();\n  const shouldAnimate = !!animatedLabel;\n\n  const handleSelect = useCallback(() => {\n    onClick(id);\n  }, [id, onClick]);\n\n  const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, handleSelect);\n\n  useEffect(() => {\n    if (!shouldAnimate || disabled) return;\n\n    const interval = setInterval(() => {\n      setIsVisible(false);\n\n      setTimeout(() => {\n        setHighlightPhase(prev => !prev);\n        const newLabel = !highlightPhase ? animatedLabel : label;\n\n        setCurrentLabel(newLabel);\n        setIsVisible(true);\n      }, 400);\n    }, 1500);\n\n    return () => clearInterval(interval);\n  }, [animatedLabel, disabled, highlightPhase, label, shouldAnimate]);\n\n  const handleMouseEnter = useCallback(() => setHovered(true), []);\n  const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n  const showLottie = !!icon && !disabled && (shouldAnimate || selected || isHovered);\n\n  const borderColor = colors[highlightPhase ? 'YELLOW_4' : 'WHITE_1'];\n  const textColor = colors[highlightPhase && !selected ? 'YELLOW_4' : 'WHITE_1'];\n  const defaultTextRenderAs = selected ? 'ub2-bold' : 'ub2';\n  const textRenderAs = highlightPhase ? (selected ? 'ub3-bold' : 'ub3') : defaultTextRenderAs;\n\n  const ButtonContent = (\n    <Styled.Wrapper\n      selected={selected}\n      disabled={disabled}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      width={width}\n      borderColor={borderColor}\n      isTransparent={isTransparent}\n    >\n      <FlexView\n        $flexDirection=\"row\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $flexColumnGapX={0.25}\n      >\n        {icon && (\n          <Styled.IconWrapper $widthX={1} $heightX={1} $showLottie={showLottie}>\n            <LottieAnimation src={icon} settings={lottieSettings} />\n          </Styled.IconWrapper>\n        )}\n        <Styled.Label\n          key={currentLabel}\n          shouldOffsetLabel={showLottie || !icon}\n          selected={selected}\n          disabled={disabled}\n          $renderAs={textRenderAs}\n          textColor={textColor}\n          isVisible={isVisible}\n          width={shouldAnimate ? '85px' : undefined}\n        >\n          {currentLabel}\n        </Styled.Label>\n      </FlexView>\n    </Styled.Wrapper>\n  );\n\n  return disabled && tooltip ? (\n    <ArrowTooltip renderAs=\"primary\" tooltipItem={tooltip} position=\"top\">\n      {ButtonContent}\n    </ArrowTooltip>\n  ) : (\n    ButtonContent\n  );\n};\n\nexport default memo(PillButton);\n"],"names":["lottieSettings","PillButton","id","label","selected","disabled","animatedLabel","icon","onClick","tooltip","width","analyticsLabel","analyticsProps","isTransparent","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","isVisible","setIsVisible","currentLabel","setCurrentLabel","colors","useTheme","shouldAnimate","handleSelect","useCallback","handleClick","useClickHandler","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","borderColor","textColor","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","PillButton$1","memo"],"mappings":"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"}
+{"version":3,"file":"pill-button.js","sources":["../../../../../src/features/auth/comps/pill-button/pill-button.tsx"],"sourcesContent":["import { useCallback, useEffect, useState, type FC, memo } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport ArrowTooltip from '../../../ui/arrow-tooltip/arrow-tooltip';\nimport useClickHandler from '../../../ui/hooks/use-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport * as Styled from './pill-button-styled';\nimport type { IPillButtonProps } from './pill-button-types';\n\nconst lottieSettings = {\n  autoplay: true,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst PillButton: FC<IPillButtonProps> = ({\n  id,\n  label,\n  selected = false,\n  disabled = false,\n  animatedLabel = '',\n  icon,\n  onClick,\n  tooltip,\n  width,\n  analyticsLabel,\n  analyticsProps,\n  isTransparent = false,\n  renderThemeAs = 'dark',\n}) => {\n  const [isHovered, setHovered] = useState(false);\n  const [highlightPhase, setHighlightPhase] = useState(false);\n  const [isVisible, setIsVisible] = useState(true);\n  const [currentLabel, setCurrentLabel] = useState(label);\n  const { colors } = useTheme();\n  const shouldAnimate = !!animatedLabel;\n  const isDarkTheme = renderThemeAs === 'dark';\n\n  const handleSelect = useCallback(() => {\n    onClick(id);\n  }, [id, onClick]);\n\n  const { handleClick } = useClickHandler({ label, analyticsLabel, analyticsProps }, handleSelect);\n\n  useEffect(() => {\n    if (!shouldAnimate || disabled) return;\n\n    const interval = setInterval(() => {\n      setIsVisible(false);\n\n      setTimeout(() => {\n        setHighlightPhase(prev => !prev);\n        const newLabel = !highlightPhase ? animatedLabel : label;\n\n        setCurrentLabel(newLabel);\n        setIsVisible(true);\n      }, 400);\n    }, 1500);\n\n    return () => clearInterval(interval);\n  }, [animatedLabel, disabled, highlightPhase, label, shouldAnimate]);\n\n  const handleMouseEnter = useCallback(() => setHovered(true), []);\n  const handleMouseLeave = useCallback(() => setHovered(false), []);\n\n  const showLottie = !!icon && !disabled && (shouldAnimate || selected || isHovered);\n\n  const themeColor = isDarkTheme ? 'WHITE_1' : 'BLACK_1';\n  const borderColor = colors[highlightPhase ? 'YELLOW_4' : themeColor];\n  const textColor = colors[highlightPhase && !selected ? 'YELLOW_4' : themeColor];\n  const defaultTextRenderAs = selected ? 'ub2-bold' : 'ub2';\n  const textRenderAs = highlightPhase ? (selected ? 'ub3-bold' : 'ub3') : defaultTextRenderAs;\n\n  const ButtonContent = (\n    <Styled.Wrapper\n      selected={selected}\n      disabled={disabled}\n      onClick={handleClick}\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      width={width}\n      borderColor={borderColor}\n      isTransparent={isTransparent}\n      isDarkTheme={isDarkTheme}\n    >\n      <FlexView\n        $flexDirection=\"row\"\n        $alignItems=\"center\"\n        $justifyContent=\"center\"\n        $flexColumnGapX={0.25}\n      >\n        {icon && (\n          <Styled.IconWrapper $widthX={1} $heightX={1} $showLottie={showLottie}>\n            <LottieAnimation src={icon} settings={lottieSettings} />\n          </Styled.IconWrapper>\n        )}\n        <Styled.Label\n          key={currentLabel}\n          shouldOffsetLabel={showLottie || !icon}\n          selected={selected}\n          disabled={disabled}\n          $renderAs={textRenderAs}\n          textColor={textColor}\n          isVisible={isVisible}\n          width={shouldAnimate ? '85px' : undefined}\n          isDarkTheme={isDarkTheme}\n        >\n          {currentLabel}\n        </Styled.Label>\n      </FlexView>\n    </Styled.Wrapper>\n  );\n\n  return disabled && tooltip ? (\n    <ArrowTooltip renderAs=\"primary\" tooltipItem={tooltip} position=\"top\">\n      {ButtonContent}\n    </ArrowTooltip>\n  ) : (\n    ButtonContent\n  );\n};\n\nexport default memo(PillButton);\n"],"names":["lottieSettings","PillButton","id","label","selected","disabled","animatedLabel","icon","onClick","tooltip","width","analyticsLabel","analyticsProps","isTransparent","renderThemeAs","isHovered","setHovered","useState","highlightPhase","setHighlightPhase","isVisible","setIsVisible","currentLabel","setCurrentLabel","colors","useTheme","shouldAnimate","isDarkTheme","handleSelect","useCallback","handleClick","useClickHandler","useEffect","interval","prev","handleMouseEnter","handleMouseLeave","showLottie","themeColor","borderColor","textColor","ButtonContent","jsx","Styled.Wrapper","jsxs","FlexView","Styled.IconWrapper","LottieAnimation","Styled.Label","ArrowTooltip","PillButton$1","memo"],"mappings":"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"}

package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js

@@ -1,16 +1,16 @@
-import e from "styled-components";
-import t from "../../../ui/layout/flex-view.js";
-const l = e(t)`
-  ${({ selected: r, theme: o }) => `
+import t from "styled-components";
+import i from "../../../ui/layout/flex-view.js";
+const n = t(i)`
+  ${({ selected: r, theme: o, hoverBackground: e }) => `
     cursor: pointer;
     transition: all 0.3s ease;
 
     &:hover {
-        background-color: ${r ? void 0 : o.colors.BLACK_5};
+      background-color: ${r ? void 0 : o.colors[e]};
     }
   `}
 `;
 export {
-  l as Wrapper
+  n as Wrapper
 };
 //# sourceMappingURL=selectable-info-card-styled.js.map

package/dist/features/auth/comps/selectable-info-card/selectable-info-card-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectable-info-card-styled.js","sources":["../../../../../src/features/auth/comps/selectable-info-card/selectable-info-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const Wrapper = styled(FlexView)<{ selected: boolean }>`\n  ${({ selected, theme }) => {\n    return `\n    cursor: pointer;\n    transition: all 0.3s ease;\n\n    &:hover {\n        background-color: ${!selected ? theme.colors.BLACK_5 : undefined};\n    }\n  `;\n  }}\n`;\n"],"names":["Wrapper","styled","FlexView","selected","theme"],"mappings":";;AAIa,MAAAA,IAAUC,EAAOC,CAAQ;AAAA,IAClC,CAAC,EAAE,UAAAC,GAAU,OAAAC,QACN;AAAA;AAAA;AAAA;AAAA;AAAA,4BAKkBD,IAAkC,SAAvBC,EAAM,OAAO,OAAmB;AAAA;AAAA,GAGrE;AAAA;"}
+{"version":3,"file":"selectable-info-card-styled.js","sources":["../../../../../src/features/auth/comps/selectable-info-card/selectable-info-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\nimport type { TColorNames } from '../../../ui/types';\n\nexport const Wrapper = styled(FlexView)<{ selected: boolean; hoverBackground: TColorNames }>`\n  ${({ selected, theme, hoverBackground }) => {\n    return `\n    cursor: pointer;\n    transition: all 0.3s ease;\n\n    &:hover {\n      background-color: ${!selected ? theme.colors[hoverBackground] : undefined};\n    }\n  `;\n  }}\n`;\n"],"names":["Wrapper","styled","FlexView","selected","theme","hoverBackground"],"mappings":";;AAKa,MAAAA,IAAUC,EAAOC,CAAQ;AAAA,IAClC,CAAC,EAAE,UAAAC,GAAU,OAAAC,GAAO,iBAAAC,QACb;AAAA;AAAA;AAAA;AAAA;AAAA,0BAKgBF,IAA2C,SAAhCC,EAAM,OAAOC,CAAe,CAAa;AAAA;AAAA,GAG5E;AAAA;"}

package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js

@@ -1,32 +1,33 @@
-import { jsxs as m, jsx as n } from "react/jsx-runtime";
-import { memo as g, useRef as x, useCallback as t, useMemo as I } from "react";
-import T from "../../../ui/hooks/use-click-handler.js";
-import _ from "../../../ui/layout/flex-view.js";
-import A from "../../../ui/lottie-animation/lottie-animation.js";
+import { jsxs as c, jsx as t } from "react/jsx-runtime";
+import { memo as g, useRef as k, useCallback as a, useMemo as A } from "react";
+import I from "../../../ui/hooks/use-click-handler.js";
+import L from "../../../ui/layout/flex-view.js";
+import x from "../../../ui/lottie-animation/lottie-animation.js";
 import u from "../../../ui/text/text.js";
 import { Wrapper as E } from "./selectable-info-card-styled.js";
-const L = ({
-  id: a,
-  title: l,
-  description: c,
-  icon: i,
+const B = ({
+  id: l,
+  title: i,
+  description: f,
+  icon: s,
   selected: r,
-  onClick: s,
-  analyticsLabel: f,
-  analyticsProps: p
+  onClick: m,
+  analyticsLabel: p,
+  analyticsProps: d,
+  renderThemeAs: h = "dark"
 }) => {
-  const e = x(null), d = t(() => {
-    s(a);
-  }, [a, s]), { handleClick: h } = T(
-    { label: l, analyticsLabel: f, analyticsProps: p },
-    d
-  ), $ = t(() => {
-    var o;
-    (o = e.current) == null || o.play();
-  }, []), C = t(() => {
-    var o;
-    r || (o = e.current) == null || o.stop();
-  }, [r]), b = I(
+  const n = k(null), o = h === "dark", C = a(() => {
+    m(l);
+  }, [l, m]), { handleClick: $ } = I(
+    { label: i, analyticsLabel: p, analyticsProps: d },
+    C
+  ), T = a(() => {
+    var e;
+    (e = n.current) == null || e.play();
+  }, []), _ = a(() => {
+    var e;
+    r || (e = n.current) == null || e.stop();
+  }, [r]), b = A(
     () => ({
       autoplay: r,
       loop: !0,
@@ -34,40 +35,41 @@ const L = ({
     }),
     [r]
   );
-  return /* @__PURE__ */ m(
+  return /* @__PURE__ */ c(
     E,
     {
       $gutterX: 1,
       $gapX: 1,
-      $borderColor: "WHITE",
+      $borderColor: o ? "WHITE" : "BLACK",
       $flexDirection: "row",
-      $background: r ? "WHITE_1" : "BLACK_1",
-      onMouseEnter: $,
-      onMouseLeave: C,
-      onClick: h,
+      $background: r && !o ? "BLACK_1" : "WHITE_1",
+      onMouseEnter: T,
+      onMouseLeave: _,
+      onClick: $,
       $flexColumnGapX: 0.5,
       selected: r,
       $alignItems: "center",
+      hoverBackground: o ? "BLACK_5" : "WHITE_5",
       children: [
-        i && /* @__PURE__ */ n(
-          A,
+        s && /* @__PURE__ */ t(
+          x,
           {
-            src: i,
-            ref: e,
+            src: s,
+            ref: n,
             settings: b,
             width: 40,
             height: 40
           }
         ),
-        /* @__PURE__ */ m(_, { children: [
-          /* @__PURE__ */ n(u, { $renderAs: "ab3", $color: r ? "BLACK_1" : "WHITE", children: l }),
-          /* @__PURE__ */ n(u, { $renderAs: "ub3", $color: r ? "BLACK_T_60" : "WHITE_T_60", children: c })
+        /* @__PURE__ */ c(L, { children: [
+          /* @__PURE__ */ t(u, { $renderAs: "ab3", $color: r && !o ? "WHITE" : "BLACK_1", children: i }),
+          /* @__PURE__ */ t(u, { $renderAs: "ub3", $color: r && !o ? "WHITE_T_60" : "BLACK_T_60", children: f })
         ] })
       ]
     }
   );
-}, K = g(L);
+}, X = g(B);
 export {
-  K as default
+  X as default
 };
 //# sourceMappingURL=selectable-info-card.js.map

package/dist/features/auth/comps/selectable-info-card/selectable-info-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"selectable-info-card.js","sources":["../../../../../src/features/auth/comps/selectable-info-card/selectable-info-card.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, memo } from 'react';\n\nimport useClickHandler from '../../../ui/hooks/use-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './selectable-info-card-styled';\nimport type { ISelectableInfoCardProps } from './selectable-info-card-types';\n\nconst SelectableInfoCard = ({\n  id,\n  title,\n  description,\n  icon,\n  selected,\n  onClick,\n  analyticsLabel,\n  analyticsProps,\n}: ISelectableInfoCardProps) => {\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n\n  const handleSelect = useCallback(() => {\n    onClick(id);\n  }, [id, onClick]);\n\n  const { handleClick } = useClickHandler(\n    { label: title, analyticsLabel, analyticsProps },\n    handleSelect,\n  );\n\n  const handleOnMouseEnter = useCallback(() => {\n    animationRef.current?.play();\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (selected) return;\n    animationRef.current?.stop();\n  }, [selected]);\n\n  const renderSettings = useMemo(\n    () => ({\n      autoplay: selected,\n      loop: true,\n      renderer: 'canvas',\n    }),\n    [selected],\n  );\n\n  return (\n    <Styled.Wrapper\n      $gutterX={1}\n      $gapX={1}\n      $borderColor=\"WHITE\"\n      $flexDirection=\"row\"\n      $background={selected ? 'WHITE_1' : 'BLACK_1'}\n      onMouseEnter={handleOnMouseEnter}\n      onMouseLeave={handleOnMouseLeave}\n      onClick={handleClick}\n      $flexColumnGapX={0.5}\n      selected={selected}\n      $alignItems=\"center\"\n    >\n      {icon && (\n        <LottieAnimation\n          src={icon}\n          ref={animationRef}\n          settings={renderSettings}\n          width={40}\n          height={40}\n        />\n      )}\n\n      <FlexView>\n        <Text $renderAs=\"ab3\" $color={selected ? 'BLACK_1' : 'WHITE'}>\n          {title}\n        </Text>\n        <Text $renderAs=\"ub3\" $color={selected ? 'BLACK_T_60' : 'WHITE_T_60'}>\n          {description}\n        </Text>\n      </FlexView>\n    </Styled.Wrapper>\n  );\n};\n\nexport default memo(SelectableInfoCard);\n"],"names":["SelectableInfoCard","id","title","description","icon","selected","onClick","analyticsLabel","analyticsProps","animationRef","useRef","handleSelect","useCallback","handleClick","useClickHandler","handleOnMouseEnter","_a","handleOnMouseLeave","renderSettings","useMemo","jsxs","Styled.Wrapper","jsx","LottieAnimation","FlexView","Text","selectableInfoCard","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAAqB,CAAC;AAAA,EAC1B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AACF,MAAgC;AACxB,QAAAC,IAAeC,EAAmC,IAAI,GAEtDC,IAAeC,EAAY,MAAM;AACrC,IAAAN,EAAQL,CAAE;AAAA,EAAA,GACT,CAACA,GAAIK,CAAO,CAAC,GAEV,EAAE,aAAAO,MAAgBC;AAAA,IACtB,EAAE,OAAOZ,GAAO,gBAAAK,GAAgB,gBAAAC,EAAe;AAAA,IAC/CG;AAAA,EAAA,GAGII,IAAqBH,EAAY,MAAM;;AAC3C,KAAAI,IAAAP,EAAa,YAAb,QAAAO,EAAsB;AAAA,EACxB,GAAG,CAAE,CAAA,GAECC,IAAqBL,EAAY,MAAM;;AAC3C,IAAIP,MACJW,IAAAP,EAAa,YAAb,QAAAO,EAAsB;AAAA,EAAK,GAC1B,CAACX,CAAQ,CAAC,GAEPa,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,UAAUd;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAQ;AAAA,EAAA;AAIT,SAAA,gBAAAe;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,cAAa;AAAA,MACb,gBAAe;AAAA,MACf,aAAahB,IAAW,YAAY;AAAA,MACpC,cAAcU;AAAA,MACd,cAAcE;AAAA,MACd,SAASJ;AAAA,MACT,iBAAiB;AAAA,MACjB,UAAAR;AAAA,MACA,aAAY;AAAA,MAEX,UAAA;AAAA,QACCD,KAAA,gBAAAkB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKnB;AAAA,YACL,KAAKK;AAAA,YACL,UAAUS;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,0BAGDM,GACC,EAAA,UAAA;AAAA,UAAA,gBAAAF,EAACG,KAAK,WAAU,OAAM,QAAQpB,IAAW,YAAY,SAClD,UACHH,EAAA,CAAA;AAAA,UACA,gBAAAoB,EAACG,KAAK,WAAU,OAAM,QAAQpB,IAAW,eAAe,cACrD,UACHF,EAAA,CAAA;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeuB,IAAAC,EAAK3B,CAAkB;"}
+{"version":3,"file":"selectable-info-card.js","sources":["../../../../../src/features/auth/comps/selectable-info-card/selectable-info-card.tsx"],"sourcesContent":["import { useCallback, useMemo, useRef, memo } from 'react';\n\nimport useClickHandler from '../../../ui/hooks/use-click-handler';\nimport FlexView from '../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../ui/lottie-animation/lottie-animation';\nimport type { ILottieAnimationRef } from '../../../ui/lottie-animation/types';\nimport Text from '../../../ui/text/text';\nimport * as Styled from './selectable-info-card-styled';\nimport type { ISelectableInfoCardProps } from './selectable-info-card-types';\n\nconst SelectableInfoCard = ({\n  id,\n  title,\n  description,\n  icon,\n  selected,\n  onClick,\n  analyticsLabel,\n  analyticsProps,\n  renderThemeAs = 'dark',\n}: ISelectableInfoCardProps) => {\n  const animationRef = useRef<ILottieAnimationRef | null>(null);\n  const isDarkTheme = renderThemeAs === 'dark';\n\n  const handleSelect = useCallback(() => {\n    onClick(id);\n  }, [id, onClick]);\n\n  const { handleClick } = useClickHandler(\n    { label: title, analyticsLabel, analyticsProps },\n    handleSelect,\n  );\n\n  const handleOnMouseEnter = useCallback(() => {\n    animationRef.current?.play();\n  }, []);\n\n  const handleOnMouseLeave = useCallback(() => {\n    if (selected) return;\n    animationRef.current?.stop();\n  }, [selected]);\n\n  const renderSettings = useMemo(\n    () => ({\n      autoplay: selected,\n      loop: true,\n      renderer: 'canvas',\n    }),\n    [selected],\n  );\n\n  return (\n    <Styled.Wrapper\n      $gutterX={1}\n      $gapX={1}\n      $borderColor={isDarkTheme ? 'WHITE' : 'BLACK'}\n      $flexDirection=\"row\"\n      $background={selected && !isDarkTheme ? 'BLACK_1' : 'WHITE_1'}\n      onMouseEnter={handleOnMouseEnter}\n      onMouseLeave={handleOnMouseLeave}\n      onClick={handleClick}\n      $flexColumnGapX={0.5}\n      selected={selected}\n      $alignItems=\"center\"\n      hoverBackground={isDarkTheme ? 'BLACK_5' : 'WHITE_5'}\n    >\n      {icon && (\n        <LottieAnimation\n          src={icon}\n          ref={animationRef}\n          settings={renderSettings}\n          width={40}\n          height={40}\n        />\n      )}\n\n      <FlexView>\n        <Text $renderAs=\"ab3\" $color={selected && !isDarkTheme ? 'WHITE' : 'BLACK_1'}>\n          {title}\n        </Text>\n        <Text $renderAs=\"ub3\" $color={selected && !isDarkTheme ? 'WHITE_T_60' : 'BLACK_T_60'}>\n          {description}\n        </Text>\n      </FlexView>\n    </Styled.Wrapper>\n  );\n};\n\nexport default memo(SelectableInfoCard);\n"],"names":["SelectableInfoCard","id","title","description","icon","selected","onClick","analyticsLabel","analyticsProps","renderThemeAs","animationRef","useRef","isDarkTheme","handleSelect","useCallback","handleClick","useClickHandler","handleOnMouseEnter","_a","handleOnMouseLeave","renderSettings","useMemo","jsxs","Styled.Wrapper","jsx","LottieAnimation","FlexView","Text","selectableInfoCard","memo"],"mappings":";;;;;;;AAUA,MAAMA,IAAqB,CAAC;AAAA,EAC1B,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC;AAAA,EACA,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC,IAAgB;AAClB,MAAgC;AACxB,QAAAC,IAAeC,EAAmC,IAAI,GACtDC,IAAcH,MAAkB,QAEhCI,IAAeC,EAAY,MAAM;AACrC,IAAAR,EAAQL,CAAE;AAAA,EAAA,GACT,CAACA,GAAIK,CAAO,CAAC,GAEV,EAAE,aAAAS,MAAgBC;AAAA,IACtB,EAAE,OAAOd,GAAO,gBAAAK,GAAgB,gBAAAC,EAAe;AAAA,IAC/CK;AAAA,EAAA,GAGII,IAAqBH,EAAY,MAAM;;AAC3C,KAAAI,IAAAR,EAAa,YAAb,QAAAQ,EAAsB;AAAA,EACxB,GAAG,CAAE,CAAA,GAECC,IAAqBL,EAAY,MAAM;;AAC3C,IAAIT,MACJa,IAAAR,EAAa,YAAb,QAAAQ,EAAsB;AAAA,EAAK,GAC1B,CAACb,CAAQ,CAAC,GAEPe,IAAiBC;AAAA,IACrB,OAAO;AAAA,MACL,UAAUhB;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,IAAA;AAAA,IAEZ,CAACA,CAAQ;AAAA,EAAA;AAIT,SAAA,gBAAAiB;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,cAAcX,IAAc,UAAU;AAAA,MACtC,gBAAe;AAAA,MACf,aAAaP,KAAY,CAACO,IAAc,YAAY;AAAA,MACpD,cAAcK;AAAA,MACd,cAAcE;AAAA,MACd,SAASJ;AAAA,MACT,iBAAiB;AAAA,MACjB,UAAAV;AAAA,MACA,aAAY;AAAA,MACZ,iBAAiBO,IAAc,YAAY;AAAA,MAE1C,UAAA;AAAA,QACCR,KAAA,gBAAAoB;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAKrB;AAAA,YACL,KAAKM;AAAA,YACL,UAAUU;AAAA,YACV,OAAO;AAAA,YACP,QAAQ;AAAA,UAAA;AAAA,QACV;AAAA,0BAGDM,GACC,EAAA,UAAA;AAAA,UAAC,gBAAAF,EAAAG,GAAA,EAAK,WAAU,OAAM,QAAQtB,KAAY,CAACO,IAAc,UAAU,WAChE,UACHV,EAAA,CAAA;AAAA,UACA,gBAAAsB,EAACG,GAAK,EAAA,WAAU,OAAM,QAAQtB,KAAY,CAACO,IAAc,eAAe,cACrE,UACHT,EAAA,CAAA;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN,GAEeyB,IAAAC,EAAK7B,CAAkB;"}