@cuemath/leap 2.9.5-j8 → 2.9.5-j9

package/dist/assets/illustrations/loader-1.svg.js

@@ -0,0 +1,6 @@
+import * as e from "react";
+const i = (t) => /* @__PURE__ */ e.createElement("svg", { width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("path", { d: "M12 3.66675V7.00008", stroke: "white", strokeWidth: 1.66667, strokeLinecap: "square", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("animate", { attributeName: "opacity", values: "1;0", keyTimes: "0;1", dur: "1s", begin: "-0.875s", repeatCount: "indefinite" })), /* @__PURE__ */ e.createElement("path", { d: "M12 17V20.3333", stroke: "white", strokeWidth: 1.66667, strokeLinecap: "square", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("animate", { attributeName: "opacity", values: "1;0", keyTimes: "0;1", dur: "1s", begin: "-0.75s", repeatCount: "indefinite" })), /* @__PURE__ */ e.createElement("path", { d: "M6.1084 6.1084L8.46673 8.46673", stroke: "white", strokeWidth: 1.66667, strokeLinecap: "square", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("animate", { attributeName: "opacity", values: "1;0", keyTimes: "0;1", dur: "1s", begin: "-0.625s", repeatCount: "indefinite" })), /* @__PURE__ */ e.createElement("path", { d: "M15.5337 15.5332L17.892 17.8915", stroke: "white", strokeWidth: 1.66667, strokeLinecap: "square", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("animate", { attributeName: "opacity", values: "1;0", keyTimes: "0;1", dur: "1s", begin: "-0.5s", repeatCount: "indefinite" })), /* @__PURE__ */ e.createElement("path", { d: "M3.6665 12H6.99984", stroke: "white", strokeWidth: 1.66667, strokeLinecap: "square", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("animate", { attributeName: "opacity", values: "1;0", keyTimes: "0;1", dur: "1s", begin: "-0.375s", repeatCount: "indefinite" })), /* @__PURE__ */ e.createElement("path", { d: "M17 12H20.3333", stroke: "white", strokeWidth: 1.66667, strokeLinecap: "square", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("animate", { attributeName: "opacity", values: "1;0", keyTimes: "0;1", dur: "1s", begin: "-0.25s", repeatCount: "indefinite" })), /* @__PURE__ */ e.createElement("path", { d: "M6.1084 17.8915L8.46673 15.5332", stroke: "white", strokeWidth: 1.66667, strokeLinecap: "square", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("animate", { attributeName: "opacity", values: "1;0", keyTimes: "0;1", dur: "1s", begin: "-0.125s", repeatCount: "indefinite" })), /* @__PURE__ */ e.createElement("path", { d: "M15.5337 8.46673L17.892 6.1084", stroke: "white", strokeWidth: 1.66667, strokeLinecap: "square", strokeLinejoin: "round" }, /* @__PURE__ */ e.createElement("animate", { attributeName: "opacity", values: "1;0", keyTimes: "0;1", dur: "1s", begin: "0s", repeatCount: "indefinite" })));
+export {
+  i as ReactComponent
+};
+//# sourceMappingURL=loader-1.svg.js.map

package/dist/assets/illustrations/loader-1.svg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader-1.svg.js","sources":["../../../src/assets/illustrations/loader-1.svg"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%203.66675V7.00008'%20stroke='white'%20stroke-width='1.66667'%20stroke-linecap='square'%20stroke-linejoin='round'%3e%3canimate%20attributeName='opacity'%20values='1;0'%20keyTimes='0;1'%20dur='1s'%20begin='-0.875s'%20repeatCount='indefinite'%3e%3c/animate%3e%3c/path%3e%3cpath%20d='M12%2017V20.3333'%20stroke='white'%20stroke-width='1.66667'%20stroke-linecap='square'%20stroke-linejoin='round'%3e%3canimate%20attributeName='opacity'%20values='1;0'%20keyTimes='0;1'%20dur='1s'%20begin='-0.75s'%20repeatCount='indefinite'%3e%3c/animate%3e%3c/path%3e%3cpath%20d='M6.1084%206.1084L8.46673%208.46673'%20stroke='white'%20stroke-width='1.66667'%20stroke-linecap='square'%20stroke-linejoin='round'%3e%3canimate%20attributeName='opacity'%20values='1;0'%20keyTimes='0;1'%20dur='1s'%20begin='-0.625s'%20repeatCount='indefinite'%3e%3c/animate%3e%3c/path%3e%3cpath%20d='M15.5337%2015.5332L17.892%2017.8915'%20stroke='white'%20stroke-width='1.66667'%20stroke-linecap='square'%20stroke-linejoin='round'%3e%3canimate%20attributeName='opacity'%20values='1;0'%20keyTimes='0;1'%20dur='1s'%20begin='-0.5s'%20repeatCount='indefinite'%3e%3c/animate%3e%3c/path%3e%3cpath%20d='M3.6665%2012H6.99984'%20stroke='white'%20stroke-width='1.66667'%20stroke-linecap='square'%20stroke-linejoin='round'%3e%3canimate%20attributeName='opacity'%20values='1;0'%20keyTimes='0;1'%20dur='1s'%20begin='-0.375s'%20repeatCount='indefinite'%3e%3c/animate%3e%3c/path%3e%3cpath%20d='M17%2012H20.3333'%20stroke='white'%20stroke-width='1.66667'%20stroke-linecap='square'%20stroke-linejoin='round'%3e%3canimate%20attributeName='opacity'%20values='1;0'%20keyTimes='0;1'%20dur='1s'%20begin='-0.25s'%20repeatCount='indefinite'%3e%3c/animate%3e%3c/path%3e%3cpath%20d='M6.1084%2017.8915L8.46673%2015.5332'%20stroke='white'%20stroke-width='1.66667'%20stroke-linecap='square'%20stroke-linejoin='round'%3e%3canimate%20attributeName='opacity'%20values='1;0'%20keyTimes='0;1'%20dur='1s'%20begin='-0.125s'%20repeatCount='indefinite'%3e%3c/animate%3e%3c/path%3e%3cpath%20d='M15.5337%208.46673L17.892%206.1084'%20stroke='white'%20stroke-width='1.66667'%20stroke-linecap='square'%20stroke-linejoin='round'%3e%3canimate%20attributeName='opacity'%20values='1;0'%20keyTimes='0;1'%20dur='1s'%20begin='0s'%20repeatCount='indefinite'%3e%3c/animate%3e%3c/path%3e%3c/svg%3e\""],"names":["SvgLoader1","props","React"],"mappings":";AACK,MAACA,IAAa,CAACC,MAA0B,gBAAAC,EAAM,cAAc,OAAO,EAAE,OAAO,IAAI,QAAQ,IAAI,SAAS,aAAa,MAAM,QAAQ,OAAO,8BAA8B,GAAGD,EAAK,GAAoB,gBAAAC,EAAM,cAAc,QAAQ,EAAE,GAAG,uBAAuB,QAAQ,SAAS,aAAa,SAAS,eAAe,UAAU,gBAAgB,QAAS,GAAkB,gBAAAA,EAAM,cAAc,WAAW,EAAE,eAAe,WAAW,QAAQ,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,WAAW,aAAa,cAAc,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,kBAAkB,QAAQ,SAAS,aAAa,SAAS,eAAe,UAAU,gBAAgB,QAAS,GAAkB,gBAAAA,EAAM,cAAc,WAAW,EAAE,eAAe,WAAW,QAAQ,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,UAAU,aAAa,aAAY,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,kCAAkC,QAAQ,SAAS,aAAa,SAAS,eAAe,UAAU,gBAAgB,QAAO,GAAoB,gBAAAA,EAAM,cAAc,WAAW,EAAE,eAAe,WAAW,QAAQ,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,WAAW,aAAa,aAAc,CAAA,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,mCAAmC,QAAQ,SAAS,aAAa,SAAS,eAAe,UAAU,gBAAgB,QAAS,GAAkB,gBAAAA,EAAM,cAAc,WAAW,EAAE,eAAe,WAAW,QAAQ,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,SAAS,aAAa,aAAY,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,sBAAsB,QAAQ,SAAS,aAAa,SAAS,eAAe,UAAU,gBAAgB,QAAS,GAAkB,gBAAAA,EAAM,cAAc,WAAW,EAAE,eAAe,WAAW,QAAQ,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,WAAW,aAAa,aAAY,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,kBAAkB,QAAQ,SAAS,aAAa,SAAS,eAAe,UAAU,gBAAgB,QAAS,GAAkB,gBAAAA,EAAM,cAAc,WAAW,EAAE,eAAe,WAAW,QAAQ,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,UAAU,aAAa,aAAc,CAAA,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,mCAAmC,QAAQ,SAAS,aAAa,SAAS,eAAe,UAAU,gBAAgB,QAAO,GAAoB,gBAAAA,EAAM,cAAc,WAAW,EAAE,eAAe,WAAW,QAAQ,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,WAAW,aAAa,aAAY,CAAE,CAAC,GAAmB,gBAAAA,EAAM,cAAc,QAAQ,EAAE,GAAG,kCAAkC,QAAQ,SAAS,aAAa,SAAS,eAAe,UAAU,gBAAgB,QAAS,GAAkB,gBAAAA,EAAM,cAAc,WAAW,EAAE,eAAe,WAAW,QAAQ,OAAO,UAAU,OAAO,KAAK,MAAM,OAAO,MAAM,aAAa,aAAY,CAAE,CAAC,CAAC;"}

package/dist/features/auth/comps/input-status-icon/input-status-icon.js

@@ -0,0 +1,20 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useTheme as u } from "styled-components";
+import { ReactComponent as f } from "../../../../assets/illustrations/loader-1.svg.js";
+import i from "../../../../assets/line-icons/icons/check2.js";
+import p from "../../../../assets/line-icons/icons/cross.js";
+const a = ({
+  isLoading: n,
+  isValid: c,
+  isError: m,
+  size: o = 24,
+  successColor: e = "GREEN_4",
+  errorColor: h = "ORANGE_4"
+}) => {
+  const { colors: r } = u();
+  return n ? /* @__PURE__ */ t(f, { width: o, height: o }) : m ? /* @__PURE__ */ t(p, { color: r[h], width: o, height: o }) : c ? /* @__PURE__ */ t(i, { color: r[e], width: o, height: o }) : null;
+}, w = a;
+export {
+  w as default
+};
+//# sourceMappingURL=input-status-icon.js.map

package/dist/features/auth/comps/input-status-icon/input-status-icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-status-icon.js","sources":["../../../../../src/features/auth/comps/input-status-icon/input-status-icon.tsx"],"sourcesContent":["import type { IInputStatusIconProps } from './input-status-icon-types';\n\nimport { useTheme } from 'styled-components';\n\nimport { ReactComponent as LoaderSVG } from '../../../../assets/illustrations/loader-1.svg';\nimport Check2Icon from '../../../../assets/line-icons/icons/check2';\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\n\nconst InputStatusIcon: React.FC<IInputStatusIconProps> = ({\n  isLoading,\n  isValid,\n  isError,\n  size = 24,\n  successColor = 'GREEN_4',\n  errorColor = 'ORANGE_4',\n}) => {\n  const { colors } = useTheme();\n\n  if (isLoading) {\n    return <LoaderSVG width={size} height={size} />;\n  }\n\n  if (isError) {\n    return <CrossIcon color={colors[errorColor]} width={size} height={size} />;\n  }\n\n  if (isValid) {\n    return <Check2Icon color={colors[successColor]} width={size} height={size} />;\n  }\n\n  return null;\n};\n\nexport default InputStatusIcon;\n"],"names":["InputStatusIcon","isLoading","isValid","isError","size","successColor","errorColor","colors","useTheme","jsx","LoaderSVG","CrossIcon","Check2Icon","InputStatusIcon$1"],"mappings":";;;;;AAQA,MAAMA,IAAmD,CAAC;AAAA,EACxD,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,cAAAC,IAAe;AAAA,EACf,YAAAC,IAAa;AACf,MAAM;AACE,QAAA,EAAE,QAAAC,MAAWC;AAEnB,SAAIP,IACM,gBAAAQ,EAAAC,GAAA,EAAU,OAAON,GAAM,QAAQA,EAAM,CAAA,IAG3CD,IACK,gBAAAM,EAACE,KAAU,OAAOJ,EAAOD,CAAU,GAAG,OAAOF,GAAM,QAAQA,EAAM,CAAA,IAGtEF,IACK,gBAAAO,EAACG,KAAW,OAAOL,EAAOF,CAAY,GAAG,OAAOD,GAAM,QAAQA,EAAM,CAAA,IAGtE;AACT,GAEAS,IAAeb;"}

package/dist/features/auth/comps/tabs/tabs-styled.js

@@ -0,0 +1,23 @@
+import s from "styled-components";
+import p from "../../../ui/text/text.js";
+const d = s.div(({ theme: r, tabsCount: o }) => {
+  const { colors: t } = r;
+  return `
+    display: grid;
+    background: ${t.BLACK_4};
+    grid-template-columns: repeat(${o}, 1fr);
+  `;
+}), l = s(p)(({ theme: r, $selected: o }) => {
+  const { layout: t, colors: e } = r, { WHITE_T_15: n, WHITE: a } = e;
+  return `
+    cursor: pointer;
+    padding: ${t.gutter * 0.875}px 0;
+    border-bottom: 1.5px solid ${o ? a : n};
+    transition: all 0.3s ease;
+  `;
+});
+export {
+  l as TabsText,
+  d as TabsWrapper
+};
+//# sourceMappingURL=tabs-styled.js.map

package/dist/features/auth/comps/tabs/tabs-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs-styled.js","sources":["../../../../../src/features/auth/comps/tabs/tabs-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Text from '../../../ui/text/text';\n\ninterface TabsWrapperProps {\n  tabsCount: number;\n}\n\nconst TabsWrapper = styled.div<TabsWrapperProps>(({ theme, tabsCount }) => {\n  const { colors } = theme;\n\n  return `\n    display: grid;\n    background: ${colors.BLACK_4};\n    grid-template-columns: repeat(${tabsCount}, 1fr);\n  `;\n});\n\ninterface ITabsText {\n  $selected?: boolean;\n}\n\nconst TabsText = styled(Text)<ITabsText>(({ theme, $selected }) => {\n  const { layout, colors } = theme;\n  const { WHITE_T_15, WHITE } = colors;\n\n  return `\n    cursor: pointer;\n    padding: ${layout.gutter * 0.875}px 0;\n    border-bottom: 1.5px solid ${$selected ? WHITE : WHITE_T_15};\n    transition: all 0.3s ease;\n  `;\n});\n\nexport { TabsWrapper, TabsText };\n"],"names":["TabsWrapper","styled","theme","tabsCount","colors","TabsText","Text","$selected","layout","WHITE_T_15","WHITE"],"mappings":";;AAQA,MAAMA,IAAcC,EAAO,IAAsB,CAAC,EAAE,OAAAC,GAAO,WAAAC,QAAgB;AACnE,QAAA,EAAE,QAAAC,EAAW,IAAAF;AAEZ,SAAA;AAAA;AAAA,kBAESE,EAAO,OAAO;AAAA,oCACID,CAAS;AAAA;AAE7C,CAAC,GAMKE,IAAWJ,EAAOK,CAAI,EAAa,CAAC,EAAE,OAAAJ,GAAO,WAAAK,QAAgB;AAC3D,QAAA,EAAE,QAAAC,GAAQ,QAAAJ,EAAW,IAAAF,GACrB,EAAE,YAAAO,GAAY,OAAAC,EAAU,IAAAN;AAEvB,SAAA;AAAA;AAAA,eAEMI,EAAO,SAAS,KAAK;AAAA,iCACHD,IAAYG,IAAQD,CAAU;AAAA;AAAA;AAG/D,CAAC;"}

package/dist/features/auth/comps/tabs/tabs.js

@@ -0,0 +1,23 @@
+import { jsx as n } from "react/jsx-runtime";
+import { TabsWrapper as b, TabsText as i } from "./tabs-styled.js";
+function m({ selectedTab: o, onChange: c, tabs: t }) {
+  return /* @__PURE__ */ n(b, { tabsCount: Object.keys(t).length, children: Object.entries(t).map((s) => {
+    const [e, a] = s, { label: l } = a, r = e === o;
+    return /* @__PURE__ */ n(
+      i,
+      {
+        $renderAs: r ? "ub2-bold" : "ub2",
+        $align: "center",
+        $selected: r,
+        onClick: () => c(e),
+        $color: "WHITE",
+        children: l
+      },
+      e
+    );
+  }) });
+}
+export {
+  m as default
+};
+//# sourceMappingURL=tabs.js.map

package/dist/features/auth/comps/tabs/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sources":["../../../../../src/features/auth/comps/tabs/tabs.tsx"],"sourcesContent":["import type { ITabItem, ITabsProps } from './tabs-types';\n\nimport * as Styled from './tabs-styled';\n\nfunction Tabs<T extends string>({ selectedTab, onChange, tabs }: ITabsProps<T>) {\n  return (\n    <Styled.TabsWrapper tabsCount={Object.keys(tabs).length}>\n      {Object.entries(tabs).map(tabConfig => {\n        const [tabName, tabInfo] = tabConfig;\n        const { label } = tabInfo as ITabItem;\n        const isSelected = tabName === selectedTab;\n\n        return (\n          <Styled.TabsText\n            $renderAs={isSelected ? 'ub2-bold' : 'ub2'}\n            $align=\"center\"\n            key={tabName}\n            $selected={isSelected}\n            onClick={() => onChange(tabName as T)}\n            $color=\"WHITE\"\n          >\n            {label}\n          </Styled.TabsText>\n        );\n      })}\n    </Styled.TabsWrapper>\n  );\n}\n\nexport default Tabs;\n"],"names":["Tabs","selectedTab","onChange","tabs","jsx","Styled.TabsWrapper","tabConfig","tabName","tabInfo","label","isSelected","Styled.TabsText"],"mappings":";;AAIA,SAASA,EAAuB,EAAE,aAAAC,GAAa,UAAAC,GAAU,MAAAC,KAAuB;AAC9E,SACG,gBAAAC,EAAAC,GAAA,EAAmB,WAAW,OAAO,KAAKF,CAAI,EAAE,QAC9C,UAAO,OAAA,QAAQA,CAAI,EAAE,IAAI,CAAaG,MAAA;AAC/B,UAAA,CAACC,GAASC,CAAO,IAAIF,GACrB,EAAE,OAAAG,EAAU,IAAAD,GACZE,IAAaH,MAAYN;AAG7B,WAAA,gBAAAG;AAAA,MAACO;AAAAA,MAAA;AAAA,QACC,WAAWD,IAAa,aAAa;AAAA,QACrC,QAAO;AAAA,QAEP,WAAWA;AAAA,QACX,SAAS,MAAMR,EAASK,CAAY;AAAA,QACpC,QAAO;AAAA,QAEN,UAAAE;AAAA,MAAA;AAAA,MALIF;AAAA,IAAA;AAAA,EAQV,CAAA,EACH,CAAA;AAEJ;"}

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

@@ -73,7 +73,7 @@ const D = {
               $alignItems: "center",
               $justifyContent: "center",
               children: /* @__PURE__ */ o(O, { $isVisible: L, children: [
-                i ? /* @__PURE__ */ o(j, { $gutterX: 4, children: [
+                i ? /* @__PURE__ */ o(j, { $gutterX: 3.5, children: [
                   /* @__PURE__ */ e(z, { $renderAs: "ab2", $color: "WHITE", $align: "center", children: i }),
                   /* @__PURE__ */ e(T, { heightX: 1 })
                 ] }) : null,

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

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

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

@@ -13,7 +13,7 @@ const T = ({
 }) => /* @__PURE__ */ r(s, { children: [
   p,
   /* @__PURE__ */ r(l, { $alignItems: "center", $justifyContent: "center", children: [
-    n && /* @__PURE__ */ r(t, { $gutterX: 4, children: [
+    n && /* @__PURE__ */ r(t, { $gutterX: 3.5, children: [
       /* @__PURE__ */ e(a, { $renderAs: "ub3", $color: "WHITE_T_60", $align: "center", $whiteSpace: "pre-line", children: n }),
       /* @__PURE__ */ e(i, { heightX: 0.5 })
     ] }),

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

@@ -1 +1 @@
-{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/auth/signup/custom-input/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    <Styled.InputWrapper>\n      {children}\n      <Styled.ContentWrapper $alignItems=\"center\" $justifyContent=\"center\">\n        {helperText && (\n          <FlexView $gutterX={4}>\n            <Text $renderAs=\"ub3\" $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    </Styled.InputWrapper>\n  );\n};\n"],"names":["InputWrapper","children","helperText","actionElement","isLoading","jsxs","Styled.InputWrapper","Styled.ContentWrapper","FlexView","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,GAAA,EACE,UAAA;AAAA,EAAAL;AAAA,oBACAM,GAAA,EAAsB,aAAY,UAAS,iBAAgB,UACzD,UAAA;AAAA,IACCL,KAAA,gBAAAG,EAACG,GAAS,EAAA,UAAU,GAClB,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,aAAY,YACnE,UACHR,EAAA,CAAA;AAAA,MACA,gBAAAO,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,IAAA,GAC3B;AAAA,IAEDR,KACE,gBAAAE,EAAAG,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC5C,UAAA;AAAA,MAAAL;AAAA,MACD,gBAAAM,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IAAA,GACzB;AAAA,IAEDP,uBACEI,GACC,EAAA,UAAA;AAAA,MAAC,gBAAAC,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;"}
+{"version":3,"file":"input-wrapper.js","sources":["../../../../../../src/features/auth/signup/custom-input/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    <Styled.InputWrapper>\n      {children}\n      <Styled.ContentWrapper $alignItems=\"center\" $justifyContent=\"center\">\n        {helperText && (\n          <FlexView $gutterX={3.5}>\n            <Text $renderAs=\"ub3\" $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    </Styled.InputWrapper>\n  );\n};\n"],"names":["InputWrapper","children","helperText","actionElement","isLoading","jsxs","Styled.InputWrapper","Styled.ContentWrapper","FlexView","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,GAAA,EACE,UAAA;AAAA,EAAAL;AAAA,oBACAM,GAAA,EAAsB,aAAY,UAAS,iBAAgB,UACzD,UAAA;AAAA,IACCL,KAAA,gBAAAG,EAACG,GAAS,EAAA,UAAU,KAClB,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,aAAY,YACnE,UACHR,EAAA,CAAA;AAAA,MACA,gBAAAO,EAACE,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,IAAA,GAC3B;AAAA,IAEDR,KACE,gBAAAE,EAAAG,GAAA,EAAS,iBAAgB,UAAS,aAAY,UAC5C,UAAA;AAAA,MAAAL;AAAA,MACD,gBAAAM,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IAAA,GACzB;AAAA,IAEDP,uBACEI,GACC,EAAA,UAAA;AAAA,MAAC,gBAAAC,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/student-username/student-username.js

@@ -1,38 +1,38 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useCallback as a } from "react";
-import { useTheme as i } from "styled-components";
+import { jsx as r } from "react/jsx-runtime";
+import { useCallback as i } from "react";
+import { useTheme as f } from "styled-components";
 import { CustomInput as h } from "../custom-input-styled.js";
 import { InputWrapper as d } from "../input-wrapper/input-wrapper.js";
-const C = ({
-  value: n,
+const I = ({
+  value: a,
   onChange: m,
-  error: o,
-  helperText: l,
-  isLoading: c,
+  error: t,
+  helperText: s,
+  isLoading: u,
   onEnter: e,
-  isValid: u
+  isValid: n
 }) => {
-  const t = i(), p = a(
-    (r) => {
-      r.key === "Enter" && (e == null || e());
+  const p = f(), l = i(
+    (o) => {
+      o.key === "Enter" && (e == null || e());
     },
     [e]
-  ), f = a(() => o ? t.colors.RED : u ? t.colors.GREEN_4 : t.colors.WHITE, [o, u, t.colors]);
-  return /* @__PURE__ */ s(d, { helperText: o || l, isLoading: c, children: /* @__PURE__ */ s(
+  ), c = n ? "GREEN_4" : "WHITE";
+  return /* @__PURE__ */ r(d, { helperText: t || s, isLoading: u, children: /* @__PURE__ */ r(
     h,
     {
-      value: n,
-      onChange: (r) => m(r.target.value),
+      value: a,
+      onChange: (o) => m(o.target.value),
       autoFocus: !0,
       placeholder: "username_1412",
-      color: f(),
+      color: p.colors[t ? "RED" : c],
       autoCapitalize: "none",
       textTransform: "lowercase",
-      onKeyDown: p
+      onKeyDown: l
     }
   ) });
-}, y = C;
+}, D = I;
 export {
-  y as default
+  D as default
 };
 //# sourceMappingURL=student-username.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"student-username.js","sources":["../../../../../../src/features/auth/signup/custom-input/student-username/student-username.tsx"],"sourcesContent":["import type { ICustomInputProps } from '../custom-input-types';\n\nimport { useCallback, type FC, type KeyboardEvent } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport * as Styled from '../custom-input-styled';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\n\nconst StudentUsernameInput: FC<ICustomInputProps> = ({\n  value,\n  onChange,\n  error,\n  helperText,\n  isLoading,\n  onEnter,\n  isValid,\n}) => {\n  const theme = useTheme();\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const getStatusColor = useCallback(() => {\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  return (\n    <InputWrapper helperText={error || helperText} isLoading={isLoading}>\n      <Styled.CustomInput\n        value={value}\n        onChange={event => onChange(event.target.value)}\n        autoFocus\n        placeholder=\"username_1412\"\n        color={getStatusColor()}\n        autoCapitalize=\"none\"\n        textTransform=\"lowercase\"\n        onKeyDown={handleKeyDown}\n      />\n    </InputWrapper>\n  );\n};\n\nexport default StudentUsernameInput;\n"],"names":["StudentUsernameInput","value","onChange","error","helperText","isLoading","onEnter","isValid","theme","useTheme","handleKeyDown","useCallback","event","getStatusColor","jsx","InputWrapper","Styled.CustomInput","StudentUsernameInput$1"],"mappings":";;;;;AAQA,MAAMA,IAA8C,CAAC;AAAA,EACnD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACJ,QAAMC,IAAQC,KAERC,IAAgBC;AAAA,IACpB,CAACC,MAA2C;AACtC,MAAAA,EAAM,QAAQ,YACNN,KAAA,QAAAA;AAAA,IAEd;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJO,IAAiBF,EAAY,MAC7BR,IAAcK,EAAM,OAAO,MAE3BD,IAAgBC,EAAM,OAAO,UAE1BA,EAAM,OAAO,OACnB,CAACL,GAAOI,GAASC,EAAM,MAAM,CAAC;AAEjC,SACG,gBAAAM,EAAAC,GAAA,EAAa,YAAYZ,KAASC,GAAY,WAAAC,GAC7C,UAAA,gBAAAS;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,OAAAf;AAAA,MACA,UAAU,CAAAW,MAASV,EAASU,EAAM,OAAO,KAAK;AAAA,MAC9C,WAAS;AAAA,MACT,aAAY;AAAA,MACZ,OAAOC,EAAe;AAAA,MACtB,gBAAe;AAAA,MACf,eAAc;AAAA,MACd,WAAWH;AAAA,IAAA;AAAA,EAEf,EAAA,CAAA;AAEJ,GAEAO,IAAejB;"}
+{"version":3,"file":"student-username.js","sources":["../../../../../../src/features/auth/signup/custom-input/student-username/student-username.tsx"],"sourcesContent":["import type { ICustomInputProps } from '../custom-input-types';\n\nimport { useCallback, type FC, type KeyboardEvent } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport * as Styled from '../custom-input-styled';\nimport { InputWrapper } from '../input-wrapper/input-wrapper';\n\nconst StudentUsernameInput: FC<ICustomInputProps> = ({\n  value,\n  onChange,\n  error,\n  helperText,\n  isLoading,\n  onEnter,\n  isValid,\n}) => {\n  const theme = useTheme();\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLInputElement>) => {\n      if (event.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const colorKey = isValid ? 'GREEN_4' : 'WHITE';\n\n  return (\n    <InputWrapper helperText={error || helperText} isLoading={isLoading}>\n      <Styled.CustomInput\n        value={value}\n        onChange={event => onChange(event.target.value)}\n        autoFocus\n        placeholder=\"username_1412\"\n        color={theme.colors[error ? 'RED' : colorKey]}\n        autoCapitalize=\"none\"\n        textTransform=\"lowercase\"\n        onKeyDown={handleKeyDown}\n      />\n    </InputWrapper>\n  );\n};\n\nexport default StudentUsernameInput;\n"],"names":["StudentUsernameInput","value","onChange","error","helperText","isLoading","onEnter","isValid","theme","useTheme","handleKeyDown","useCallback","event","colorKey","jsx","InputWrapper","Styled.CustomInput","StudentUsernameInput$1"],"mappings":";;;;;AAQA,MAAMA,IAA8C,CAAC;AAAA,EACnD,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,YAAAC;AAAA,EACA,WAAAC;AAAA,EACA,SAAAC;AAAA,EACA,SAAAC;AACF,MAAM;AACJ,QAAMC,IAAQC,KAERC,IAAgBC;AAAA,IACpB,CAACC,MAA2C;AACtC,MAAAA,EAAM,QAAQ,YACNN,KAAA,QAAAA;AAAA,IAEd;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJO,IAAWN,IAAU,YAAY;AAEvC,SACG,gBAAAO,EAAAC,GAAA,EAAa,YAAYZ,KAASC,GAAY,WAAAC,GAC7C,UAAA,gBAAAS;AAAA,IAACE;AAAAA,IAAA;AAAA,MACC,OAAAf;AAAA,MACA,UAAU,CAAAW,MAASV,EAASU,EAAM,OAAO,KAAK;AAAA,MAC9C,WAAS;AAAA,MACT,aAAY;AAAA,MACZ,OAAOJ,EAAM,OAAOL,IAAQ,QAAQU,CAAQ;AAAA,MAC5C,gBAAe;AAAA,MACf,eAAc;AAAA,MACd,WAAWH;AAAA,IAAA;AAAA,EAEf,EAAA,CAAA;AAEJ,GAEAO,IAAejB;"}

package/dist/index.d.ts

@@ -1349,6 +1349,15 @@ export declare interface IInputSizeConfig {
     iconPadding: number;
 }
 
+declare interface IInputStatusIconProps {
+    isLoading: boolean;
+    isValid: boolean;
+    isError: boolean;
+    size?: number;
+    successColor?: TColorNames;
+    errorColor?: TColorNames;
+}
+
 export declare interface IInputVariantConfig {
     valueColorName: {
         inactive: TColorNames;
@@ -2153,6 +2162,8 @@ export declare const Info2Icon: React_2.FC<React_2.SVGProps<SVGSVGElement>>;
 
 export declare const InfoIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
+export declare const InputStatusIcon: React.FC<IInputStatusIconProps>;
+
 export declare interface INudgeProps {
     nudge: 'click';
     content: ReactNode;
@@ -2823,6 +2834,13 @@ declare interface ISyncableWebGameProps {
     enableSync?: boolean;
 }
 
+declare type ITabConfig<T extends string = string> = Record<T, ITabItem>;
+
+declare interface ITabItem {
+    label: string;
+    component?: JSX.Element;
+}
+
 export declare interface ITable {
     tableList: ITableInfo[];
     infiniteModeHighScore: number;
@@ -2886,6 +2904,12 @@ export declare interface ITabSizeConfig {
     textVariant: TTextVariants;
 }
 
+declare interface ITabsProps<T extends string> {
+    selectedTab: T;
+    onChange: (tab: T) => void;
+    tabs: ITabConfig<T>;
+}
+
 export declare interface ITabVariantConfig {
     backgroundColorName: {
         inactive: TColorNames;
@@ -4147,6 +4171,8 @@ declare const TAB_CODES: {
 
 export declare const TabComponent: React_2.FC<ITabProps>;
 
+export declare function Tabs<T extends string>({ selectedTab, onChange, tabs }: ITabsProps<T>): JSX_2.Element;
+
 export declare type TAction = EventToPayload<TInclassMessage>;
 
 declare type TActionListenerOptions = {