@cuemath/leap 2.9.11 → 2.9.12-j2

package/dist/features/auth/signup/custom-input-field/custom-input-field-styled.js

@@ -0,0 +1,38 @@
+import o from "styled-components";
+import e from "../../../ui/layout/flex-view.js";
+const r = o.input`
+  width: 100%;
+  max-width: 330px;
+  padding: 0;
+  line-height: 40px;
+  text-transform: ${({ textTransform: t }) => t || "none"};
+  border: none;
+  outline: none;
+  background-color: transparent;
+  font-size: 32px;
+  text-align: ${({ align: t }) => t ?? "center"};
+  caret-color: ${({ theme: t }) => t.colors.WHITE};
+  color: ${({ theme: t }) => t.colors.WHITE};
+  font-family: 'Athletics-Light';
+  color: ${({ color: t }) => t};
+
+  &::placeholder {
+    font-family: 'Athletics-Light';
+    font-size: 32px;
+  }
+  &::-webkit-outer-spin-button,
+  &::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+  }
+`;
+o(e)`
+  width: 100%;
+`;
+const p = o(e)`
+  position: relative;
+`;
+export {
+  r as CustomInput,
+  p as PasswordInputWrapper
+};
+//# sourceMappingURL=custom-input-field-styled.js.map

package/dist/features/auth/signup/custom-input-field/custom-input-field-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-input-field-styled.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../ui/layout/flex-view';\n\nexport const CustomInput = styled.input<{ color: string; align?: string; textTransform?: string }>`\n  width: 100%;\n  max-width: 330px;\n  padding: 0;\n  line-height: 40px;\n  text-transform: ${({ textTransform }) => textTransform || 'none'};\n  border: none;\n  outline: none;\n  background-color: transparent;\n  font-size: 32px;\n  text-align: ${({ align }) => align ?? 'center'};\n  caret-color: ${({ theme }) => theme.colors.WHITE};\n  color: ${({ theme }) => theme.colors.WHITE};\n  font-family: 'Athletics-Light';\n  color: ${({ color }) => color};\n\n  &::placeholder {\n    font-family: 'Athletics-Light';\n    font-size: 32px;\n  }\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n  }\n`;\n\nexport const CountryCodeSelector = styled(FlexView)`\n  width: 100%;\n`;\n\nexport const PasswordInputWrapper = styled(FlexView)`\n  position: relative;\n`;\n"],"names":["CustomInput","styled","textTransform","align","theme","color","FlexView","PasswordInputWrapper"],"mappings":";;AAIO,MAAMA,IAAcC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA,oBAKd,CAAC,EAAE,eAAAC,QAAoBA,KAAiB,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA,gBAKlD,CAAC,EAAE,OAAAC,QAAYA,KAAS,QAAQ;AAAA,iBAC/B,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,WACvC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA,WAEjC,CAAC,EAAE,OAAAC,EAAM,MAAMA,CAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYIJ,EAAOK,CAAQ;AAAA;AAAA;AAIrC,MAAAC,IAAuBN,EAAOK,CAAQ;AAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/custom-input-field.js

@@ -0,0 +1,85 @@
+import { jsx as o, jsxs as W } from "react/jsx-runtime";
+import { useState as y, useCallback as x, useMemo as $ } from "react";
+import { useTheme as D } from "styled-components";
+import E from "../../../../assets/line-icons/icons/eye.js";
+import F from "../../../../assets/line-icons/icons/striked-eye.js";
+import H from "../../../ui/buttons/clickable/clickable.js";
+import P from "../../../ui/layout/flex-view.js";
+import { CustomInput as j, PasswordInputWrapper as G } from "./custom-input-field-styled.js";
+import { InputWrapper as K } from "./input-wrapper/input-wrapper.js";
+const R = ({
+  value: n,
+  onChange: c,
+  error: i,
+  helperText: b,
+  onEnter: r,
+  isLoading: g,
+  isValid: p,
+  type: t = "text",
+  placeholder: u,
+  actionElement: k,
+  maxLength: m,
+  width: a,
+  textTransform: d,
+  textAlign: f = "center"
+}) => {
+  const s = D(), [l, T] = y(!1), w = x(
+    (e) => {
+      e.key === "Enter" && (r == null || r());
+    },
+    [r]
+  ), h = $(() => t === "password" ? l ? "text" : "password" : t, [t, l]), I = $(() => i ? s.colors.RED : p ? s.colors.GREEN_4 : s.colors.WHITE, [i, p, s.colors]), C = x(
+    () => /* @__PURE__ */ o(
+      j,
+      {
+        value: n,
+        onChange: (e) => c(e.target.value),
+        autoFocus: !0,
+        placeholder: u,
+        color: I,
+        autoCapitalize: "none",
+        textTransform: d,
+        type: h,
+        onKeyDown: w,
+        maxLength: m,
+        align: f
+      }
+    ),
+    [
+      w,
+      I,
+      h,
+      m,
+      c,
+      u,
+      f,
+      d,
+      n
+    ]
+  );
+  return /* @__PURE__ */ o(
+    K,
+    {
+      helperText: i || b,
+      isLoading: g,
+      actionElement: k,
+      children: t === "password" ? /* @__PURE__ */ W(
+        G,
+        {
+          $width: a ?? 220,
+          $alignItems: "center",
+          $flexDirection: "row",
+          $flexGapX: 0.5,
+          children: [
+            C(),
+            /* @__PURE__ */ o(H, { label: "password-toggle", onClick: () => T((e) => !e), children: l ? /* @__PURE__ */ o(E, { color: "WHITE", width: 24, height: 24 }) : /* @__PURE__ */ o(F, { color: "WHITE", width: 24, height: 24 }) })
+          ]
+        }
+      ) : /* @__PURE__ */ o(P, { $width: a ?? "100%", $flex: 1, children: C() })
+    }
+  );
+}, B = R;
+export {
+  B as default
+};
+//# sourceMappingURL=custom-input-field.js.map

package/dist/features/auth/signup/custom-input-field/custom-input-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"custom-input-field.js","sources":["../../../../../src/features/auth/signup/custom-input-field/custom-input-field.tsx"],"sourcesContent":["import type { ICustomInputFieldProps } from './custom-input-field-types';\n\nimport { useCallback, useMemo, useState, type FC, type KeyboardEvent } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport EyeIcon from '../../../../assets/line-icons/icons/eye';\nimport StrikedEyeIcon from '../../../../assets/line-icons/icons/striked-eye';\nimport Clickable from '../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../ui/layout/flex-view';\nimport * as Styled from './custom-input-field-styled';\nimport { InputWrapper } from './input-wrapper/input-wrapper';\n\nconst CustomInputField: FC<ICustomInputFieldProps> = ({\n  value,\n  onChange,\n  error,\n  helperText,\n  onEnter,\n  isLoading,\n  isValid,\n  type = 'text',\n  placeholder,\n  actionElement,\n  maxLength,\n  width,\n  textTransform,\n  textAlign = 'center',\n}) => {\n  const theme = useTheme();\n  const [isPasswordVisible, setIsPasswordVisible] = useState(false);\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const inputType = useMemo(() => {\n    if (type === 'password') return isPasswordVisible ? 'text' : 'password';\n\n    return type;\n  }, [type, isPasswordVisible]);\n\n  const inputColor = useMemo(() => {\n    if (error) return theme.colors.RED;\n\n    if (isValid) return theme.colors.GREEN_4;\n\n    return theme.colors.WHITE;\n  }, [error, isValid, theme.colors]);\n\n  const renderInput = useCallback(\n    () => (\n      <Styled.CustomInput\n        value={value}\n        onChange={event => onChange(event.target.value)}\n        autoFocus\n        placeholder={placeholder}\n        color={inputColor}\n        autoCapitalize=\"none\"\n        textTransform={textTransform}\n        type={inputType}\n        onKeyDown={handleKeyDown}\n        maxLength={maxLength}\n        align={textAlign}\n      />\n    ),\n    [\n      handleKeyDown,\n      inputColor,\n      inputType,\n      maxLength,\n      onChange,\n      placeholder,\n      textAlign,\n      textTransform,\n      value,\n    ],\n  );\n\n  return (\n    <InputWrapper\n      helperText={error || helperText}\n      isLoading={isLoading}\n      actionElement={actionElement}\n    >\n      {type === 'password' ? (\n        <Styled.PasswordInputWrapper\n          $width={width ?? 220}\n          $alignItems=\"center\"\n          $flexDirection=\"row\"\n          $flexGapX={0.5}\n        >\n          {renderInput()}\n          <Clickable label=\"password-toggle\" onClick={() => setIsPasswordVisible(prev => !prev)}>\n            {isPasswordVisible ? (\n              <EyeIcon color=\"WHITE\" width={24} height={24} />\n            ) : (\n              <StrikedEyeIcon color=\"WHITE\" width={24} height={24} />\n            )}\n          </Clickable>\n        </Styled.PasswordInputWrapper>\n      ) : (\n        <FlexView $width={width ?? '100%'} $flex={1}>\n          {renderInput()}\n        </FlexView>\n      )}\n    </InputWrapper>\n  );\n};\n\nexport default CustomInputField;\n"],"names":["CustomInputField","value","onChange","error","helperText","onEnter","isLoading","isValid","type","placeholder","actionElement","maxLength","width","textTransform","textAlign","theme","useTheme","isPasswordVisible","setIsPasswordVisible","useState","handleKeyDown","useCallback","event","inputType","useMemo","inputColor","renderInput","jsx","Styled.CustomInput","InputWrapper","jsxs","Styled.PasswordInputWrapper","Clickable","prev","EyeIcon","StrikedEyeIcon","FlexView","CustomInputField$1"],"mappings":";;;;;;;;;AAYA,MAAMA,IAA+C,CAAC;AAAA,EACpD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,aAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC,IAAY;AACd,MAAM;AACJ,QAAMC,IAAQC,KACR,CAACC,GAAmBC,CAAoB,IAAIC,EAAS,EAAK,GAE1DC,IAAgBC;AAAA,IACpB,CAACC,MAA2C;AACtC,MAAAA,EAAM,QAAQ,YACNjB,KAAA,QAAAA;AAAA,IAEd;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJkB,IAAYC,EAAQ,MACpBhB,MAAS,aAAmBS,IAAoB,SAAS,aAEtDT,GACN,CAACA,GAAMS,CAAiB,CAAC,GAEtBQ,IAAaD,EAAQ,MACrBrB,IAAcY,EAAM,OAAO,MAE3BR,IAAgBQ,EAAM,OAAO,UAE1BA,EAAM,OAAO,OACnB,CAACZ,GAAOI,GAASQ,EAAM,MAAM,CAAC,GAE3BW,IAAcL;AAAA,IAClB,MACE,gBAAAM;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC,OAAA3B;AAAA,QACA,UAAU,CAAAqB,MAASpB,EAASoB,EAAM,OAAO,KAAK;AAAA,QAC9C,WAAS;AAAA,QACT,aAAAb;AAAA,QACA,OAAOgB;AAAA,QACP,gBAAe;AAAA,QACf,eAAAZ;AAAA,QACA,MAAMU;AAAA,QACN,WAAWH;AAAA,QACX,WAAAT;AAAA,QACA,OAAOG;AAAA,MAAA;AAAA,IACT;AAAA,IAEF;AAAA,MACEM;AAAA,MACAK;AAAA,MACAF;AAAA,MACAZ;AAAA,MACAT;AAAA,MACAO;AAAA,MACAK;AAAA,MACAD;AAAA,MACAZ;AAAA,IACF;AAAA,EAAA;AAIA,SAAA,gBAAA0B;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,YAAY1B,KAASC;AAAA,MACrB,WAAAE;AAAA,MACA,eAAAI;AAAA,MAEC,gBAAS,aACR,gBAAAoB;AAAA,QAACC;AAAAA,QAAA;AAAA,UACC,QAAQnB,KAAS;AAAA,UACjB,aAAY;AAAA,UACZ,gBAAe;AAAA,UACf,WAAW;AAAA,UAEV,UAAA;AAAA,YAAYc,EAAA;AAAA,YACZ,gBAAAC,EAAAK,GAAA,EAAU,OAAM,mBAAkB,SAAS,MAAMd,EAAqB,CAAAe,MAAQ,CAACA,CAAI,GACjF,UAAAhB,IACE,gBAAAU,EAAAO,GAAA,EAAQ,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,IAE9C,gBAAAP,EAACQ,GAAe,EAAA,OAAM,SAAQ,OAAO,IAAI,QAAQ,GAAI,CAAA,GAEzD;AAAA,UAAA;AAAA,QAAA;AAAA,MACF,sBAECC,GAAS,EAAA,QAAQxB,KAAS,QAAQ,OAAO,GACvC,UAAAc,EACH,EAAA,CAAA;AAAA,IAAA;AAAA,EAAA;AAIR,GAEAW,IAAerC;"}

package/dist/features/auth/signup/custom-input-field/date-picker-input/date-picker-input-styled.js

@@ -0,0 +1,86 @@
+import r from "styled-components";
+const a = r.div`
+  .react-datepicker {
+    font-family: UntitledSans-Medium;
+    font-size: 14px;
+    background-color: ${({ theme: e }) => e.colors.BLACK_3};
+    border: 1px solid ${({ theme: e }) => e.colors.BLACK_5};
+    padding: 16px;
+    border-radius: 8px;
+    transition: all 0.3s ease-in-out;
+  }
+
+  .react-datepicker__aria-live {
+    display: none;
+  }
+  .react-datepicker__header {
+    color: ${({ theme: e }) => e.colors.WHITE};
+    text-align: center;
+  }
+
+  .react-datepicker__month-wrapper {
+    display: flex;
+  }
+  .react-datepicker__month-text {
+    color: ${({ theme: e }) => e.colors.WHITE_T_38};
+    cursor: pointer;
+    padding: 8px;
+    border-radius: 4px;
+    &:hover {
+      color: ${({ theme: e }) => e.colors.WHITE};
+    }
+  }
+  .react-datepicker__month-text--disabled {
+    color: ${({ theme: e }) => e.colors.WHITE_T_10};
+    cursor: not-allowed;
+    &:hover {
+      color: ${({ theme: e }) => e.colors.WHITE_T_10};
+    }
+  }
+  .react-datepicker__month-text--selected {
+    color: ${({ theme: e }) => e.colors.WHITE};
+  }
+
+  .react-datepicker__navigation--previous {
+    background: url('/path/to/your/custom-left-arrow.svg') no-repeat center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background-size: contain;
+  }
+
+  .react-datepicker__navigation--next {
+    background: url('/path/to/your/custom-right-arrow.svg') no-repeat center;
+    width: 20px;
+    height: 20px;
+    border: none;
+    background-size: contain;
+  }
+
+  .react-datepicker__navigation-icon::before {
+    content: none;
+  }
+
+  .react-datepicker__input-container input {
+    max-width: 320px;
+    padding: 0;
+    line-height: 40px;
+    border: none;
+    outline: none;
+    background-color: transparent;
+    font-size: 32px;
+    text-align: center;
+    caret-color: ${({ theme: e }) => e.colors.WHITE};
+    color: ${({ theme: e, color: o }) => o || e.colors.WHITE};
+    font-family: 'Athletics-Light';
+
+    &::placeholder {
+      font-family: 'Athletics-Light';
+      font-size: 32px;
+    }
+  }
+`;
+export {
+  a as StyledDatePickerWrapper
+};
+//# sourceMappingURL=date-picker-input-styled.js.map

package/dist/features/auth/signup/custom-input-field/date-picker-input/date-picker-input-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-input-styled.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/date-picker-input/date-picker-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledDatePickerWrapper = styled.div`\n  .react-datepicker {\n    font-family: UntitledSans-Medium;\n    font-size: 14px;\n    background-color: ${({ theme }) => theme.colors.BLACK_3};\n    border: 1px solid ${({ theme }) => theme.colors.BLACK_5};\n    padding: 16px;\n    border-radius: 8px;\n    transition: all 0.3s ease-in-out;\n  }\n\n  .react-datepicker__aria-live {\n    display: none;\n  }\n  .react-datepicker__header {\n    color: ${({ theme }) => theme.colors.WHITE};\n    text-align: center;\n  }\n\n  .react-datepicker__month-wrapper {\n    display: flex;\n  }\n  .react-datepicker__month-text {\n    color: ${({ theme }) => theme.colors.WHITE_T_38};\n    cursor: pointer;\n    padding: 8px;\n    border-radius: 4px;\n    &:hover {\n      color: ${({ theme }) => theme.colors.WHITE};\n    }\n  }\n  .react-datepicker__month-text--disabled {\n    color: ${({ theme }) => theme.colors.WHITE_T_10};\n    cursor: not-allowed;\n    &:hover {\n      color: ${({ theme }) => theme.colors.WHITE_T_10};\n    }\n  }\n  .react-datepicker__month-text--selected {\n    color: ${({ theme }) => theme.colors.WHITE};\n  }\n\n  .react-datepicker__navigation--previous {\n    background: url('/path/to/your/custom-left-arrow.svg') no-repeat center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    background-size: contain;\n  }\n\n  .react-datepicker__navigation--next {\n    background: url('/path/to/your/custom-right-arrow.svg') no-repeat center;\n    width: 20px;\n    height: 20px;\n    border: none;\n    background-size: contain;\n  }\n\n  .react-datepicker__navigation-icon::before {\n    content: none;\n  }\n\n  .react-datepicker__input-container input {\n    max-width: 320px;\n    padding: 0;\n    line-height: 40px;\n    border: none;\n    outline: none;\n    background-color: transparent;\n    font-size: 32px;\n    text-align: center;\n    caret-color: ${({ theme }) => theme.colors.WHITE};\n    color: ${({ theme, color }) => color || theme.colors.WHITE};\n    font-family: 'Athletics-Light';\n\n    &::placeholder {\n      font-family: 'Athletics-Light';\n      font-size: 32px;\n    }\n  }\n`;\n"],"names":["StyledDatePickerWrapper","styled","theme","color"],"mappings":";AAEO,MAAMA,IAA0BC,EAAO;AAAA;AAAA;AAAA;AAAA,wBAItB,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,wBACnC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAU9C,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAQjC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA,eAKpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA,aAInC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA,eAGpC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,UAAU;AAAA;AAAA;AAAA;AAAA,aAIxC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAgC3B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,KAAK;AAAA,aACvC,CAAC,EAAE,OAAAA,GAAO,OAAAC,EAAA,MAAYA,KAASD,EAAM,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/date-picker-input/date-picker-input.js

@@ -0,0 +1,58 @@
+import { jsx as e, jsxs as d } from "react/jsx-runtime";
+import f from "../../../../../node_modules/react-datepicker/dist/index.es.js";
+import { useTheme as h } from "styled-components";
+import I from "../../../../../assets/line-icons/icons/left.js";
+import T from "../../../../../assets/line-icons/icons/right.js";
+import l from "../../../../ui/buttons/clickable/clickable.js";
+import u from "../../../../ui/layout/flex-view.js";
+import k from "../../../../ui/text/text.js";
+import { InputWrapper as w } from "../input-wrapper/input-wrapper.js";
+import { StyledDatePickerWrapper as x } from "./date-picker-input-styled.js";
+import { subYears as c } from "../../../../../node_modules/date-fns/subYears.js";
+const y = ({ value: a, onChange: m, error: n }) => {
+  const o = h();
+  return /* @__PURE__ */ e(w, { helperText: n, children: /* @__PURE__ */ e(x, { children: /* @__PURE__ */ e(
+    f,
+    {
+      selected: a,
+      showMonthYearPicker: !0,
+      showPopperArrow: !1,
+      dateFormat: "MM/yyyy",
+      placeholderText: "MM / YYYY",
+      onChange: (r) => m(r),
+      minDate: c(/* @__PURE__ */ new Date(), 22),
+      maxDate: c(/* @__PURE__ */ new Date(), 2),
+      renderCustomHeader: ({
+        date: r,
+        decreaseYear: p,
+        increaseYear: s,
+        prevYearButtonDisabled: t,
+        nextYearButtonDisabled: i
+      }) => /* @__PURE__ */ d(u, { $alignItems: "center", $flexDirection: "row", $justifyContent: "space-between", children: [
+        /* @__PURE__ */ e(
+          l,
+          {
+            onClick: p,
+            label: "increase-year",
+            disabled: t,
+            children: /* @__PURE__ */ e(I, { color: o.colors[t ? "WHITE_T_10" : "WHITE"] })
+          }
+        ),
+        /* @__PURE__ */ e(k, { $renderAs: "ub2-bold", $color: "WHITE", children: r.getFullYear() }),
+        /* @__PURE__ */ e(
+          l,
+          {
+            onClick: s,
+            label: "decrease-year",
+            disabled: i,
+            children: /* @__PURE__ */ e(T, { color: o.colors[i ? "WHITE_T_10" : "WHITE"] })
+          }
+        )
+      ] })
+    }
+  ) }) });
+}, _ = y;
+export {
+  _ as default
+};
+//# sourceMappingURL=date-picker-input.js.map

package/dist/features/auth/signup/custom-input-field/date-picker-input/date-picker-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-input.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/date-picker-input/date-picker-input.tsx"],"sourcesContent":["import type { IDatePickerInputProps } from './date-picker-input-types';\n\nimport { subYears } from 'date-fns';\nimport { type FC } from 'react';\nimport DatePicker from 'react-datepicker';\nimport { useTheme } from 'styled-components';\n\nimport LeftIcon from '../../../../../assets/line-icons/icons/left';\nimport RightIcon from '../../../../../assets/line-icons/icons/right';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport * as Styled from './date-picker-input-styled';\n\nconst DatePickerInput: FC<IDatePickerInputProps> = ({ value, onChange, error }) => {\n  const theme = useTheme();\n\n  return (\n    <InputWrapper helperText={error}>\n      <Styled.StyledDatePickerWrapper>\n        <DatePicker\n          selected={value}\n          showMonthYearPicker\n          showPopperArrow={false}\n          dateFormat=\"MM/yyyy\"\n          placeholderText=\"MM / YYYY\"\n          onChange={date => onChange(date)}\n          minDate={subYears(new Date(), 22)}\n          maxDate={subYears(new Date(), 2)}\n          renderCustomHeader={({\n            date,\n            decreaseYear,\n            increaseYear,\n            prevYearButtonDisabled,\n            nextYearButtonDisabled,\n          }) => (\n            <FlexView $alignItems=\"center\" $flexDirection=\"row\" $justifyContent=\"space-between\">\n              <Clickable\n                onClick={decreaseYear}\n                label=\"increase-year\"\n                disabled={prevYearButtonDisabled}\n              >\n                <LeftIcon color={theme.colors[prevYearButtonDisabled ? 'WHITE_T_10' : 'WHITE']} />\n              </Clickable>\n              <Text $renderAs=\"ub2-bold\" $color=\"WHITE\">\n                {date.getFullYear()}\n              </Text>\n              <Clickable\n                onClick={increaseYear}\n                label=\"decrease-year\"\n                disabled={nextYearButtonDisabled}\n              >\n                <RightIcon color={theme.colors[nextYearButtonDisabled ? 'WHITE_T_10' : 'WHITE']} />\n              </Clickable>\n            </FlexView>\n          )}\n        />\n      </Styled.StyledDatePickerWrapper>\n    </InputWrapper>\n  );\n};\n\nexport default DatePickerInput;\n"],"names":["DatePickerInput","value","onChange","error","theme","useTheme","InputWrapper","jsx","Styled.StyledDatePickerWrapper","DatePicker","date","subYears","decreaseYear","increaseYear","prevYearButtonDisabled","nextYearButtonDisabled","FlexView","Clickable","LeftIcon","Text","RightIcon","DatePickerInput$1"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAA6C,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,QAAY;AACjF,QAAMC,IAAQC;AAEd,2BACGC,GAAa,EAAA,YAAYH,GACxB,UAAC,gBAAAI,EAAAC,GAAA,EACC,UAAA,gBAAAD;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAUR;AAAA,MACV,qBAAmB;AAAA,MACnB,iBAAiB;AAAA,MACjB,YAAW;AAAA,MACX,iBAAgB;AAAA,MAChB,UAAU,CAAQS,MAAAR,EAASQ,CAAI;AAAA,MAC/B,SAASC,EAAa,oBAAA,KAAA,GAAQ,EAAE;AAAA,MAChC,SAASA,EAAa,oBAAA,KAAA,GAAQ,CAAC;AAAA,MAC/B,oBAAoB,CAAC;AAAA,QACnB,MAAAD;AAAA,QACA,cAAAE;AAAA,QACA,cAAAC;AAAA,QACA,wBAAAC;AAAA,QACA,wBAAAC;AAAA,MAAA,wBAECC,GAAS,EAAA,aAAY,UAAS,gBAAe,OAAM,iBAAgB,iBAClE,UAAA;AAAA,QAAA,gBAAAT;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,SAASL;AAAA,YACT,OAAM;AAAA,YACN,UAAUE;AAAA,YAEV,UAAA,gBAAAP,EAACW,KAAS,OAAOd,EAAM,OAAOU,IAAyB,eAAe,OAAO,GAAG;AAAA,UAAA;AAAA,QAClF;AAAA,QACA,gBAAAP,EAACY,KAAK,WAAU,YAAW,QAAO,SAC/B,UAAAT,EAAK,eACR;AAAA,QACA,gBAAAH;AAAA,UAACU;AAAA,UAAA;AAAA,YACC,SAASJ;AAAA,YACT,OAAM;AAAA,YACN,UAAUE;AAAA,YAEV,UAAA,gBAAAR,EAACa,KAAU,OAAOhB,EAAM,OAAOW,IAAyB,eAAe,OAAO,GAAG;AAAA,UAAA;AAAA,QACnF;AAAA,MAAA,GACF;AAAA,IAAA;AAAA,EAAA,EAGN,CAAA,EACF,CAAA;AAEJ,GAEAM,IAAerB;"}

package/dist/features/auth/signup/custom-input-field/grade-input/grade-input-styled.js

@@ -0,0 +1,31 @@
+import c from "styled-components";
+import s from "../../../../ui/layout/flex-view.js";
+const p = c(s)`
+  max-width: 264px;
+`, x = c(s)(({ selected: r, theme: o }) => {
+  const t = o.colors[r ? "WHITE" : "REAL_BLACK"], l = o.colors[r ? "REAL_BLACK" : "WHITE_T_38"], n = o.colors.WHITE, d = o.colors.REAL_BLACK, i = o.colors.WHITE;
+  return `
+      cursor: pointer;
+      transition: all 0.3s ease;
+      background-color: ${t};
+      border-width: 2px;
+
+      > div {
+        color: ${l};
+      }
+
+      &:hover {
+        background-color: ${n};
+        border-color: ${i};
+
+        > div {
+          color: ${d};
+        }
+      }
+    `;
+});
+export {
+  x as GradeItem,
+  p as GradeListWrapper
+};
+//# sourceMappingURL=grade-input-styled.js.map

package/dist/features/auth/signup/custom-input-field/grade-input/grade-input-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grade-input-styled.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/grade-input/grade-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const GradeListWrapper = styled(FlexView)`\n  max-width: 264px;\n`;\n\nexport const GradeItem = styled(FlexView)<{ selected: boolean }>(({ selected, theme }) => {\n  const bgColor = theme.colors[selected ? 'WHITE' : 'REAL_BLACK'];\n  const textColor = theme.colors[selected ? 'REAL_BLACK' : 'WHITE_T_38'];\n  const hoverBg = theme.colors.WHITE;\n  const hoverText = theme.colors.REAL_BLACK;\n  const hoverBorder = theme.colors.WHITE;\n\n  return `\n      cursor: pointer;\n      transition: all 0.3s ease;\n      background-color: ${bgColor};\n      border-width: 2px;\n\n      > div {\n        color: ${textColor};\n      }\n\n      &:hover {\n        background-color: ${hoverBg};\n        border-color: ${hoverBorder};\n\n        > div {\n          color: ${hoverText};\n        }\n      }\n    `;\n});\n"],"names":["GradeListWrapper","styled","FlexView","GradeItem","selected","theme","bgColor","textColor","hoverBg","hoverText","hoverBorder"],"mappings":";;AAIa,MAAAA,IAAmBC,EAAOC,CAAQ;AAAA;AAAA,GAIlCC,IAAYF,EAAOC,CAAQ,EAAyB,CAAC,EAAE,UAAAE,GAAU,OAAAC,QAAY;AACxF,QAAMC,IAAUD,EAAM,OAAOD,IAAW,UAAU,YAAY,GACxDG,IAAYF,EAAM,OAAOD,IAAW,eAAe,YAAY,GAC/DI,IAAUH,EAAM,OAAO,OACvBI,IAAYJ,EAAM,OAAO,YACzBK,IAAcL,EAAM,OAAO;AAE1B,SAAA;AAAA;AAAA;AAAA,0BAGiBC,CAAO;AAAA;AAAA;AAAA;AAAA,iBAIhBC,CAAS;AAAA;AAAA;AAAA;AAAA,4BAIEC,CAAO;AAAA,wBACXE,CAAW;AAAA;AAAA;AAAA,mBAGhBD,CAAS;AAAA;AAAA;AAAA;AAI5B,CAAC;"}

package/dist/features/auth/signup/custom-input-field/grade-input/grade-input.js

@@ -0,0 +1,30 @@
+import { jsx as r } from "react/jsx-runtime";
+import a from "../../../../ui/text/text.js";
+import { STUDENT_GRADE_OPTIONS as c } from "../../signup-constants.js";
+import { InputWrapper as p } from "../input-wrapper/input-wrapper.js";
+import { GradeListWrapper as $, GradeItem as l } from "./grade-input-styled.js";
+const m = ({ value: n, onChange: d, error: i }) => /* @__PURE__ */ r(p, { helperText: i, children: /* @__PURE__ */ r($, { $flexDirection: "row", $flexWrap: !0, $flexGapX: 1, children: [...c].map(({ label: o, value: e }) => {
+  const t = e === n;
+  return /* @__PURE__ */ r(
+    l,
+    {
+      selected: t,
+      onClick: () => d(e),
+      $borderRadius: 48,
+      $gutter: 13,
+      $gap: 6,
+      $alignItems: "center",
+      $justifyContent: "center",
+      $background: t ? "WHITE" : "REAL_BLACK",
+      $borderColor: t ? "WHITE" : "BLACK_5",
+      $width: e === "-1" ? 96 : 40,
+      $height: 40,
+      children: /* @__PURE__ */ r(a, { $align: "center", $renderAs: "ab1", children: o })
+    },
+    e
+  );
+}) }) }), x = m;
+export {
+  x as default
+};
+//# sourceMappingURL=grade-input.js.map

package/dist/features/auth/signup/custom-input-field/grade-input/grade-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grade-input.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/grade-input/grade-input.tsx"],"sourcesContent":["import type { ICustomInputFieldProps } from '../custom-input-field-types';\nimport type { FC } from 'react';\n\nimport Text from '../../../../ui/text/text';\nimport { STUDENT_GRADE_OPTIONS } from '../../signup-constants';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\nimport * as Styled from './grade-input-styled';\n\nconst GradeInput: FC<ICustomInputFieldProps> = ({ value, onChange, error }) => {\n  return (\n    <InputWrapper helperText={error}>\n      <Styled.GradeListWrapper $flexDirection=\"row\" $flexWrap $flexGapX={1}>\n        {[...STUDENT_GRADE_OPTIONS].map(({ label, value: optionVal }) => {\n          const isSelected = optionVal === value;\n\n          return (\n            <Styled.GradeItem\n              key={optionVal}\n              selected={isSelected}\n              onClick={() => onChange(optionVal)}\n              $borderRadius={48}\n              $gutter={13}\n              $gap={6}\n              $alignItems=\"center\"\n              $justifyContent=\"center\"\n              $background={isSelected ? 'WHITE' : 'REAL_BLACK'}\n              $borderColor={isSelected ? 'WHITE' : 'BLACK_5'}\n              $width={optionVal === '-1' ? 96 : 40}\n              $height={40}\n            >\n              <Text $align=\"center\" $renderAs=\"ab1\">\n                {label}\n              </Text>\n            </Styled.GradeItem>\n          );\n        })}\n      </Styled.GradeListWrapper>\n    </InputWrapper>\n  );\n};\n\nexport default GradeInput;\n"],"names":["GradeInput","value","onChange","error","jsx","InputWrapper","Styled.GradeListWrapper","STUDENT_GRADE_OPTIONS","label","optionVal","isSelected","Styled.GradeItem","Text","GradeInput$1"],"mappings":";;;;;AAQA,MAAMA,IAAyC,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,OAAAC,QAE/D,gBAAAC,EAACC,GAAa,EAAA,YAAYF,GACxB,UAAA,gBAAAC,EAACE,GAAA,EAAwB,gBAAe,OAAM,WAAS,IAAC,WAAW,GAChE,UAAA,CAAC,GAAGC,CAAqB,EAAE,IAAI,CAAC,EAAE,OAAAC,GAAO,OAAOC,EAAA,MAAgB;AAC/D,QAAMC,IAAaD,MAAcR;AAG/B,SAAA,gBAAAG;AAAA,IAACO;AAAAA,IAAA;AAAA,MAEC,UAAUD;AAAA,MACV,SAAS,MAAMR,EAASO,CAAS;AAAA,MACjC,eAAe;AAAA,MACf,SAAS;AAAA,MACT,MAAM;AAAA,MACN,aAAY;AAAA,MACZ,iBAAgB;AAAA,MAChB,aAAaC,IAAa,UAAU;AAAA,MACpC,cAAcA,IAAa,UAAU;AAAA,MACrC,QAAQD,MAAc,OAAO,KAAK;AAAA,MAClC,SAAS;AAAA,MAET,4BAACG,GAAK,EAAA,QAAO,UAAS,WAAU,OAC7B,UACHJ,GAAA;AAAA,IAAA;AAAA,IAfKC;AAAA,EAAA;AAgBP,CAEH,GACH,EACF,CAAA,GAIJI,IAAeb;"}

package/dist/features/auth/signup/custom-input-field/input-wrapper/input-wrapper-styled.js

@@ -0,0 +1,11 @@
+import o from "styled-components";
+import t from "../../../../ui/layout/flex-view.js";
+const r = o(t)`
+  position: absolute;
+  top: 56px;
+  max-width: 100%;
+`;
+export {
+  r as ContentWrapper
+};
+//# sourceMappingURL=input-wrapper-styled.js.map

package/dist/features/auth/signup/custom-input-field/input-wrapper/input-wrapper-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-wrapper-styled.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/input-wrapper/input-wrapper-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const ContentWrapper = styled(FlexView)`\n  position: absolute;\n  top: 56px;\n  max-width: 100%;\n`;\n"],"names":["ContentWrapper","styled","FlexView"],"mappings":";;AAIa,MAAAA,IAAiBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.js

@@ -0,0 +1,33 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { LOTTIE as h } from "../../../../../assets/lottie/lottie.js";
+import r from "../../../../ui/layout/flex-view.js";
+import p from "../../../../ui/lottie-animation/lottie-animation.js";
+import i from "../../../../ui/separator/separator.js";
+import $ from "../../../../ui/text/text.js";
+import { ContentWrapper as l } from "./input-wrapper-styled.js";
+const j = ({
+  children: m,
+  helperText: n,
+  actionElement: o,
+  isLoading: c
+}) => /* @__PURE__ */ t(r, { $flex: 1, $gutterX: 2, $alignItems: "center", $justifyContent: "center", $width: "100%", children: [
+  m,
+  /* @__PURE__ */ t(l, { $alignItems: "center", $justifyContent: "center", children: [
+    n && /* @__PURE__ */ t(r, { $gutterX: 3.5, children: [
+      /* @__PURE__ */ e($, { $renderAs: "ub2", $color: "WHITE_T_60", $align: "center", $whiteSpace: "pre-line", children: n }),
+      /* @__PURE__ */ e(i, { heightX: 0.5 })
+    ] }),
+    o && /* @__PURE__ */ t(r, { $justifyContent: "center", $alignItems: "center", children: [
+      o,
+      /* @__PURE__ */ e(i, { heightX: 1 })
+    ] }),
+    c && /* @__PURE__ */ t(r, { children: [
+      /* @__PURE__ */ e(i, { heightX: 2 }),
+      /* @__PURE__ */ e(p, { src: h.SPINNER_WHITE, height: 20, width: 40 })
+    ] })
+  ] })
+] });
+export {
+  j as InputWrapper
+};
+//# sourceMappingURL=input-wrapper.js.map

package/dist/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import type { IInputWrapperProps } from './input-wrapper-types';\n\nimport { LOTTIE } from '../../../../../assets/lottie/lottie';\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 './input-wrapper-styled';\n\nexport const InputWrapper = ({\n  children,\n  helperText,\n  actionElement,\n  isLoading,\n}: IInputWrapperProps) => {\n  return (\n    <FlexView $flex={1} $gutterX={2} $alignItems=\"center\" $justifyContent=\"center\" $width=\"100%\">\n      {children}\n      <Styled.ContentWrapper $alignItems=\"center\" $justifyContent=\"center\">\n        {helperText && (\n          <FlexView $gutterX={3.5}>\n            <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\" $align=\"center\" $whiteSpace=\"pre-line\">\n              {helperText}\n            </Text>\n            <Separator heightX={0.5} />\n          </FlexView>\n        )}\n        {actionElement && (\n          <FlexView $justifyContent=\"center\" $alignItems=\"center\">\n            {actionElement}\n            <Separator heightX={1} />\n          </FlexView>\n        )}\n        {isLoading && (\n          <FlexView>\n            <Separator heightX={2} />\n            <LottieAnimation src={LOTTIE.SPINNER_WHITE} height={20} width={40} />\n          </FlexView>\n        )}\n      </Styled.ContentWrapper>\n    </FlexView>\n  );\n};\n"],"names":["InputWrapper","children","helperText","actionElement","isLoading","jsxs","FlexView","Styled.ContentWrapper","jsx","Text","Separator","LottieAnimation","LOTTIE"],"mappings":";;;;;;;AASO,MAAMA,IAAe,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AACF,MAEI,gBAAAC,EAACC,GAAS,EAAA,OAAO,GAAG,UAAU,GAAG,aAAY,UAAS,iBAAgB,UAAS,QAAO,QACnF,UAAA;AAAA,EAAAL;AAAA,oBACAM,GAAA,EAAsB,aAAY,UAAS,iBAAgB,UACzD,UAAA;AAAA,IACCL,KAAA,gBAAAG,EAACC,GAAS,EAAA,UAAU,KAClB,UAAA;AAAA,MAAC,gBAAAE,EAAAC,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,aAAY,YACnE,UACHP,EAAA,CAAA;AAAA,MACA,gBAAAM,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,IAAA,GAC3B;AAAA,IAEDP,KACE,gBAAAE,EAAAC,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC5C,UAAA;AAAA,MAAAH;AAAA,MACD,gBAAAK,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IAAA,GACzB;AAAA,IAEDN,uBACEE,GACC,EAAA,UAAA;AAAA,MAAC,gBAAAE,EAAAE,GAAA,EAAU,SAAS,EAAG,CAAA;AAAA,MACvB,gBAAAF,EAACG,KAAgB,KAAKC,EAAO,eAAe,QAAQ,IAAI,OAAO,IAAI;AAAA,IAAA,GACrE;AAAA,EAAA,GAEJ;AACF,EAAA,CAAA;"}

package/dist/features/auth/signup/custom-input-field/phone-input/country-selector/country-code-button.js

@@ -0,0 +1,33 @@
+import { jsxs as o, jsx as r } from "react/jsx-runtime";
+import n from "../../../../../../assets/line-icons/icons/chevron-down.js";
+import i from "../../../../../ui/layout/flex-view.js";
+import d from "../../../../../ui/text/text.js";
+import { CountryCodeButton as $ } from "../phone-input-styled.js";
+const C = ({
+  value: t,
+  menuVisible: e
+}) => /* @__PURE__ */ o(
+  $,
+  {
+    $background: "BLACK_5",
+    $borderRadius: 4,
+    $gutterX: 0.5,
+    $gap: 5,
+    $alignItems: "center",
+    $justifyContent: "space-between",
+    $borderColor: e ? "WHITE_T_38" : "BLACK_5",
+    $flexDirection: "row",
+    $flexGap: 2,
+    children: [
+      /* @__PURE__ */ o(d, { $renderAs: "ab1", $color: "WHITE", children: [
+        "+",
+        t
+      ] }),
+      /* @__PURE__ */ r(i, { $width: 20, children: /* @__PURE__ */ r(n, { width: 20, height: 20, color: "WHITE" }) })
+    ]
+  }
+);
+export {
+  C as default
+};
+//# sourceMappingURL=country-code-button.js.map

package/dist/features/auth/signup/custom-input-field/phone-input/country-selector/country-code-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-code-button.js","sources":["../../../../../../../src/features/auth/signup/custom-input-field/phone-input/country-selector/country-code-button.tsx"],"sourcesContent":["import type { FC } from 'react';\n\nimport ChevronDownIcon from '../../../../../../assets/line-icons/icons/chevron-down';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport Text from '../../../../../ui/text/text';\nimport * as Styled from '../phone-input-styled';\n\nconst CountryCodeButton: FC<{ value?: string; menuVisible?: boolean }> = ({\n  value,\n  menuVisible,\n}) => {\n  return (\n    <Styled.CountryCodeButton\n      $background=\"BLACK_5\"\n      $borderRadius={4}\n      $gutterX={0.5}\n      $gap={5}\n      $alignItems=\"center\"\n      $justifyContent=\"space-between\"\n      $borderColor={menuVisible ? 'WHITE_T_38' : 'BLACK_5'}\n      $flexDirection=\"row\"\n      $flexGap={2}\n    >\n      <Text $renderAs=\"ab1\" $color=\"WHITE\">\n        +{value}\n      </Text>\n      <FlexView $width={20}>\n        <ChevronDownIcon width={20} height={20} color=\"WHITE\" />\n      </FlexView>\n    </Styled.CountryCodeButton>\n  );\n};\n\nexport default CountryCodeButton;\n"],"names":["CountryCodeButton","value","menuVisible","jsxs","Styled.CountryCodeButton","Text","jsx","FlexView","ChevronDownIcon"],"mappings":";;;;;AAOA,MAAMA,IAAmE,CAAC;AAAA,EACxE,OAAAC;AAAA,EACA,aAAAC;AACF,MAEI,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,aAAY;AAAA,IACZ,eAAe;AAAA,IACf,UAAU;AAAA,IACV,MAAM;AAAA,IACN,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,cAAcF,IAAc,eAAe;AAAA,IAC3C,gBAAe;AAAA,IACf,UAAU;AAAA,IAEV,UAAA;AAAA,MAAA,gBAAAC,EAACE,GAAK,EAAA,WAAU,OAAM,QAAO,SAAQ,UAAA;AAAA,QAAA;AAAA,QACjCJ;AAAA,MAAA,GACJ;AAAA,MACC,gBAAAK,EAAAC,GAAA,EAAS,QAAQ,IAChB,UAAC,gBAAAD,EAAAE,GAAA,EAAgB,OAAO,IAAI,QAAQ,IAAI,OAAM,QAAQ,CAAA,GACxD;AAAA,IAAA;AAAA,EAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/phone-input/country-selector/country-list-menu.js

@@ -0,0 +1,28 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+import a from "../../../../../ui/text/text.js";
+import { MenuWrapper as s, MenuItem as p, Icon as u } from "../phone-input-styled.js";
+const g = ({ options: o, selectedCountry: t, onChange: n }) => /* @__PURE__ */ e(s, { $widthX: 10, $gapX: 0.5, $background: "BLACK_2", $borderColor: "BLACK_5", children: o.map((i) => {
+  const { id: r, value: c, icon: d, code: $ } = i;
+  return /* @__PURE__ */ l(
+    p,
+    {
+      $gutterX: 0.5,
+      $gapX: 0.75,
+      onClick: () => n({ code: $, id: r }),
+      $width: "100%",
+      $flexDirection: "row",
+      $alignItems: "center",
+      $flexGap: 8,
+      $isSelected: t.id === r,
+      children: [
+        /* @__PURE__ */ e(u, { src: d }),
+        /* @__PURE__ */ e(a, { $renderAs: "ab3", $color: "WHITE", children: c })
+      ]
+    },
+    r
+  );
+}) });
+export {
+  g as default
+};
+//# sourceMappingURL=country-list-menu.js.map

package/dist/features/auth/signup/custom-input-field/phone-input/country-selector/country-list-menu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"country-list-menu.js","sources":["../../../../../../../src/features/auth/signup/custom-input-field/phone-input/country-selector/country-list-menu.tsx"],"sourcesContent":["import type { ICountryListMenuProps } from '../phone-input-types';\nimport type { FC } from 'react';\n\nimport Text from '../../../../../ui/text/text';\nimport * as Styled from '../phone-input-styled';\n\nconst CountryListMenu: FC<ICountryListMenuProps> = ({ options, selectedCountry, onChange }) => {\n  return (\n    <Styled.MenuWrapper $widthX={10} $gapX={0.5} $background={'BLACK_2'} $borderColor={'BLACK_5'}>\n      {options.map(option => {\n        const { id, value, icon, code } = option;\n\n        return (\n          <Styled.MenuItem\n            key={id}\n            $gutterX={0.5}\n            $gapX={0.75}\n            onClick={() => onChange({ code, id })}\n            $width=\"100%\"\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $flexGap={8}\n            $isSelected={selectedCountry.id === id}\n          >\n            <Styled.Icon src={icon} />\n            <Text $renderAs=\"ab3\" $color={'WHITE'}>\n              {value}\n            </Text>\n          </Styled.MenuItem>\n        );\n      })}\n    </Styled.MenuWrapper>\n  );\n};\n\nexport default CountryListMenu;\n"],"names":["CountryListMenu","options","selectedCountry","onChange","jsx","Styled.MenuWrapper","option","id","value","icon","code","jsxs","Styled.MenuItem","Styled.Icon","Text"],"mappings":";;;AAMA,MAAMA,IAA6C,CAAC,EAAE,SAAAC,GAAS,iBAAAC,GAAiB,UAAAC,QAE3E,gBAAAC,EAAAC,GAAA,EAAmB,SAAS,IAAI,OAAO,KAAK,aAAa,WAAW,cAAc,WAChF,UAAAJ,EAAQ,IAAI,CAAUK,MAAA;AACrB,QAAM,EAAE,IAAAC,GAAI,OAAAC,GAAO,MAAAC,GAAM,MAAAC,MAASJ;AAGhC,SAAA,gBAAAK;AAAA,IAACC;AAAAA,IAAA;AAAA,MAEC,UAAU;AAAA,MACV,OAAO;AAAA,MACP,SAAS,MAAMT,EAAS,EAAE,MAAAO,GAAM,IAAAH,GAAI;AAAA,MACpC,QAAO;AAAA,MACP,gBAAe;AAAA,MACf,aAAY;AAAA,MACZ,UAAU;AAAA,MACV,aAAaL,EAAgB,OAAOK;AAAA,MAEpC,UAAA;AAAA,QAAA,gBAAAH,EAACS,GAAA,EAAY,KAAKJ,EAAM,CAAA;AAAA,0BACvBK,GAAK,EAAA,WAAU,OAAM,QAAQ,SAC3B,UACHN,GAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAbKD;AAAA,EAAA;AAgBV,CAAA,EACH,CAAA;"}

package/dist/features/auth/signup/custom-input-field/phone-input/phone-input-styled.js

@@ -0,0 +1,29 @@
+import r from "styled-components";
+import o from "../../../../ui/layout/flex-view.js";
+const i = r(o)`
+  border-radius: 2px;
+  max-height: 220px;
+  overflow-y: scroll;
+  width: 271px;
+`, c = r(o)(({ theme: t, $isSelected: n }) => `
+      cursor: pointer;
+      background: ${n ? t.colors.BLACK_5 : "transparent"};
+      &:hover {
+            background: ${t.colors.BLACK_5};
+      }
+   `), d = r.img`
+  width: 20px;
+  height: 20px;
+`, s = r(o)`
+  cursor: pointer;
+  padding-right: 4px;
+  max-width: 100px;
+  min-width: 80px;
+`;
+export {
+  s as CountryCodeButton,
+  d as Icon,
+  c as MenuItem,
+  i as MenuWrapper
+};
+//# sourceMappingURL=phone-input-styled.js.map

package/dist/features/auth/signup/custom-input-field/phone-input/phone-input-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-input-styled.js","sources":["../../../../../../src/features/auth/signup/custom-input-field/phone-input/phone-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const MenuWrapper = styled(FlexView)`\n  border-radius: 2px;\n  max-height: 220px;\n  overflow-y: scroll;\n  width: 271px;\n`;\n\nexport const MenuItem = styled(FlexView)<{ $isSelected: boolean }>(({ theme, $isSelected }) => {\n  return `\n      cursor: pointer;\n      background: ${$isSelected ? theme.colors.BLACK_5 : 'transparent'};\n      &:hover {\n            background: ${theme.colors.BLACK_5};\n      }\n   `;\n});\n\nexport const Icon = styled.img`\n  width: 20px;\n  height: 20px;\n`;\n\nexport const CountryCodeButton = styled(FlexView)`\n  cursor: pointer;\n  padding-right: 4px;\n  max-width: 100px;\n  min-width: 80px;\n`;\n"],"names":["MenuWrapper","styled","FlexView","MenuItem","theme","$isSelected","Icon","CountryCodeButton"],"mappings":";;AAIa,MAAAA,IAAcC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAO7BC,IAAWF,EAAOC,CAAQ,EAA4B,CAAC,EAAE,OAAAE,GAAO,aAAAC,QACpE;AAAA;AAAA,oBAEWA,IAAcD,EAAM,OAAO,UAAU,aAAa;AAAA;AAAA,0BAE5CA,EAAM,OAAO,OAAO;AAAA;AAAA,IAG7C,GAEYE,IAAOL,EAAO;AAAA;AAAA;AAAA,GAKdM,IAAoBN,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/auth/signup/custom-input-field/phone-input/phone-input.js

@@ -0,0 +1,67 @@
+import { jsx as e, jsxs as C } from "react/jsx-runtime";
+import { useState as x, useCallback as l } from "react";
+import { useTheme as y } from "styled-components";
+import { InputWrapper as b } from "../../../../circle-games/sign-up/comp/input-wrapper/input-wrapper.js";
+import g from "../../../../ui/context-menu/context-menu.js";
+import n from "../../../../ui/layout/flex-view.js";
+import w from "../../../../ui/separator/separator.js";
+import { COUNTRY_CODE_MAP as I } from "../../signup-constants.js";
+import { CustomInput as M } from "../custom-input-field-styled.js";
+import D from "./country-selector/country-code-button.js";
+import V from "./country-selector/country-list-menu.js";
+const T = ({
+  error: i,
+  value: u,
+  onChange: a,
+  selectedCountry: r,
+  onCountryChange: p,
+  onEnter: o
+}) => {
+  var m;
+  const s = y(), [f, h] = x(!1), c = l(
+    (t) => {
+      t.key === "Enter" && (o == null || o());
+    },
+    [o]
+  ), d = l((t) => {
+    h(t);
+  }, []);
+  return /* @__PURE__ */ e(b, { helperText: i, children: /* @__PURE__ */ C(n, { $flexDirection: "row", children: [
+    /* @__PURE__ */ e(n, { children: /* @__PURE__ */ e(
+      g,
+      {
+        startLeft: !0,
+        targetElement: /* @__PURE__ */ e(D, { value: r.code, menuVisible: f }),
+        menuElement: /* @__PURE__ */ e(
+          V,
+          {
+            options: I,
+            onChange: p,
+            selectedCountry: r
+          }
+        ),
+        menuOffset: 5,
+        menuZIndex: 1,
+        onMenuVisibilityChange: d
+      }
+    ) }),
+    /* @__PURE__ */ e(w, { width: 8 }),
+    /* @__PURE__ */ e(n, { $width: 224, children: /* @__PURE__ */ e(
+      M,
+      {
+        value: u,
+        onChange: (t) => a(t.target.value),
+        placeholder: "00000 00000",
+        type: "number",
+        align: "left",
+        autoCapitalize: "none",
+        color: (m = s.colors) == null ? void 0 : m[i ? "RED" : "WHITE"],
+        onKeyDown: c
+      }
+    ) })
+  ] }) });
+}, _ = T;
+export {
+  _ as default
+};
+//# sourceMappingURL=phone-input.js.map