npm - @cuemath/leap - Versions diffs - 2.9.5-j1 → 2.9.5-j10 - Mend

@cuemath/leap 2.9.5-j1 → 2.9.5-j10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (59) hide show

package/dist/features/auth/signup/user-type-selector/user-type-card/user-type-card.js CHANGED Viewed

@@ -1,22 +1,22 @@
 import { jsxs as n, jsx as r } from "react/jsx-runtime";
-import { useRef as i, useMemo as A } from "react";
+import { useRef as i, useMemo as l } from "react";
 import { LOTTIE as e } from "../../../../../assets/lottie/lottie.js";
-import h from "../../../../ui/layout/flex-view.js";
+import A from "../../../../ui/layout/flex-view.js";
 import a from "../../../../ui/lottie-animation/lottie-animation.js";
-import l from "../../../../ui/separator/separator.js";
-import u from "../../../../ui/text/text.js";
-import { CardWrapper as T, SelectedAnimationWrapper as g } from "./user-type-card-styled.js";
+import h from "../../../../ui/separator/separator.js";
+import T from "../../../../ui/text/text.js";
+import { CardWrapper as g, SelectedAnimationWrapper as u } from "./user-type-card-styled.js";
 const m = {
   autoplay: !0,
-  loop: !0
+  loop: !1
 }, I = ({ onClick: s, userType: o, isSelected: t }) => {
-  const p = i(null), c = i(null), f = A(
+  const p = i(null), f = i(null), c = l(
     () => ({ ...m, loop: t, autoplay: t }),
     [t]
   );
-  return /* @__PURE__ */ n(h, { $alignItems: "center", $justifyContent: "center", children: [
+  return /* @__PURE__ */ n(A, { $alignItems: "center", $justifyContent: "center", children: [
     /* @__PURE__ */ n(
-      T,
+      g,
       {
         $widthX: 11,
         $heightX: 11,
@@ -34,25 +34,25 @@ const m = {
               width: 176,
               height: 176,
               src: o === "parent" ? e.PARENT_AVATAR : e.STUDENT_AVATAR,
-              settings: f,
+              settings: c,
               ref: p
             }
           ),
-          t && /* @__PURE__ */ r(g, { children: /* @__PURE__ */ r(
+          t && /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
             a,
             {
               width: 176,
               height: 176,
               src: e.AVATAR_SELECTED,
               settings: m,
-              ref: c
+              ref: f
             }
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ r(l, { heightX: 1 }),
-    /* @__PURE__ */ r(u, { $renderAs: "ac3", $color: t ? "WHITE" : "WHITE_T_60", children: o })
+    /* @__PURE__ */ r(h, { heightX: 1 }),
+    /* @__PURE__ */ r(T, { $renderAs: "ac3", $color: t ? "WHITE" : "WHITE_T_60", children: o })
   ] });
 };
 export {

package/dist/features/auth/signup/user-type-selector/user-type-card/user-type-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"user-type-card.js","sources":["../../../../../../src/features/auth/signup/user-type-selector/user-type-card/user-type-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { IUserTypeCardProps } from './user-type-card-types';\n\nimport { useMemo, useRef, type FC } from 'react';\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 './user-type-card-styled';\n\nconst animationSettings = {\n autoplay: true,\n loop: ~~true~~,\n};\n\nconst UserTypeCard: FC<IUserTypeCardProps> = ({ onClick, userType, isSelected }) => {\n const userTypeAnimationRef = useRef<ILottieAnimationRef \| null>(null);\n const selectedAnimationRef = useRef<ILottieAnimationRef \| null>(null);\n\n const avatarSettings = useMemo(\n () => ({ ...animationSettings, loop: isSelected, autoplay: isSelected }),\n [isSelected],\n );\n\n return (\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <Styled.CardWrapper\n $widthX={11}\n $heightX={11}\n $gutterX={2.375}\n $gapX={2.375}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $selected={isSelected}\n $background=\"BLACK_3\"\n onClick={onClick}\n >\n <LottieAnimation\n width={176}\n height={176}\n src={userType === 'parent' ? LOTTIE.PARENT_AVATAR : LOTTIE.STUDENT_AVATAR}\n settings={avatarSettings}\n ref={userTypeAnimationRef}\n />\n {isSelected && (\n <Styled.SelectedAnimationWrapper>\n <LottieAnimation\n width={176}\n height={176}\n src={LOTTIE.AVATAR_SELECTED}\n settings={animationSettings}\n ref={selectedAnimationRef}\n />\n </Styled.SelectedAnimationWrapper>\n )}\n </Styled.CardWrapper>\n <Separator heightX={1} />\n <Text $renderAs=\"ac3\" $color={isSelected ? 'WHITE' : 'WHITE_T_60'}>\n {userType}\n </Text>\n </FlexView>\n );\n};\n\nexport default UserTypeCard;\n"],"names":["animationSettings","UserTypeCard","onClick","userType","isSelected","userTypeAnimationRef","useRef","selectedAnimationRef","avatarSettings","useMemo","jsxs","FlexView","Styled.CardWrapper","jsx","LottieAnimation","LOTTIE","Styled.SelectedAnimationWrapper","Separator","Text"],"mappings":";;;;;;;;AAYA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AACR,GAEMC,IAAuC,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,YAAAC,QAAiB;AAC5E,QAAAC,IAAuBC,EAAmC,IAAI,GAC9DC,IAAuBD,EAAmC,IAAI,GAE9DE,IAAiBC;AAAA,IACrB,OAAO,EAAE,GAAGT,GAAmB,MAAMI,GAAY,UAAUA;IAC3D,CAACA,CAAU;AAAA,EAAA;AAGb,SACG,gBAAAM,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,WAAWR;AAAA,QACX,aAAY;AAAA,QACZ,SAAAF;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKX,MAAa,WAAWY,EAAO,gBAAgBA,EAAO;AAAA,cAC3D,UAAUP;AAAA,cACV,KAAKH;AAAA,YAAA;AAAA,UACP;AAAA,UACCD,KACC,gBAAAS,EAACG,GAAA,EACC,UAAA,gBAAAH;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKC,EAAO;AAAA,cACZ,UAAUf;AAAA,cACV,KAAKO;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,gBAAAM,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACvB,gBAAAJ,EAACK,KAAK,WAAU,OAAM,QAAQd,IAAa,UAAU,cAClD,UACHD,EAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"user-type-card.js","sources":["../../../../../../src/features/auth/signup/user-type-selector/user-type-card/user-type-card.tsx"],"sourcesContent":["import type { ILottieAnimationRef } from '../../../../ui/lottie-animation/types';\nimport type { IUserTypeCardProps } from './user-type-card-types';\n\nimport { useMemo, useRef, type FC } from 'react';\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 './user-type-card-styled';\n\nconst animationSettings = {\n autoplay: true,\n loop: false,\n};\n\nconst UserTypeCard: FC<IUserTypeCardProps> = ({ onClick, userType, isSelected }) => {\n const userTypeAnimationRef = useRef<ILottieAnimationRef \| null>(null);\n const selectedAnimationRef = useRef<ILottieAnimationRef \| null>(null);\n\n const avatarSettings = useMemo(\n () => ({ ...animationSettings, loop: isSelected, autoplay: isSelected }),\n [isSelected],\n );\n\n return (\n <FlexView $alignItems=\"center\" $justifyContent=\"center\">\n <Styled.CardWrapper\n $widthX={11}\n $heightX={11}\n $gutterX={2.375}\n $gapX={2.375}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $selected={isSelected}\n $background=\"BLACK_3\"\n onClick={onClick}\n >\n <LottieAnimation\n width={176}\n height={176}\n src={userType === 'parent' ? LOTTIE.PARENT_AVATAR : LOTTIE.STUDENT_AVATAR}\n settings={avatarSettings}\n ref={userTypeAnimationRef}\n />\n {isSelected && (\n <Styled.SelectedAnimationWrapper>\n <LottieAnimation\n width={176}\n height={176}\n src={LOTTIE.AVATAR_SELECTED}\n settings={animationSettings}\n ref={selectedAnimationRef}\n />\n </Styled.SelectedAnimationWrapper>\n )}\n </Styled.CardWrapper>\n <Separator heightX={1} />\n <Text $renderAs=\"ac3\" $color={isSelected ? 'WHITE' : 'WHITE_T_60'}>\n {userType}\n </Text>\n </FlexView>\n );\n};\n\nexport default UserTypeCard;\n"],"names":["animationSettings","UserTypeCard","onClick","userType","isSelected","userTypeAnimationRef","useRef","selectedAnimationRef","avatarSettings","useMemo","jsxs","FlexView","Styled.CardWrapper","jsx","LottieAnimation","LOTTIE","Styled.SelectedAnimationWrapper","Separator","Text"],"mappings":";;;;;;;;AAYA,MAAMA,IAAoB;AAAA,EACxB,UAAU;AAAA,EACV,MAAM;AACR,GAEMC,IAAuC,CAAC,EAAE,SAAAC,GAAS,UAAAC,GAAU,YAAAC,QAAiB;AAC5E,QAAAC,IAAuBC,EAAmC,IAAI,GAC9DC,IAAuBD,EAAmC,IAAI,GAE9DE,IAAiBC;AAAA,IACrB,OAAO,EAAE,GAAGT,GAAmB,MAAMI,GAAY,UAAUA;IAC3D,CAACA,CAAU;AAAA,EAAA;AAGb,SACG,gBAAAM,EAAAC,GAAA,EAAS,aAAY,UAAS,iBAAgB,UAC7C,UAAA;AAAA,IAAA,gBAAAD;AAAA,MAACE;AAAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,UAAU;AAAA,QACV,UAAU;AAAA,QACV,OAAO;AAAA,QACP,aAAY;AAAA,QACZ,iBAAgB;AAAA,QAChB,WAAWR;AAAA,QACX,aAAY;AAAA,QACZ,SAAAF;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAW;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKX,MAAa,WAAWY,EAAO,gBAAgBA,EAAO;AAAA,cAC3D,UAAUP;AAAA,cACV,KAAKH;AAAA,YAAA;AAAA,UACP;AAAA,UACCD,KACC,gBAAAS,EAACG,GAAA,EACC,UAAA,gBAAAH;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,OAAO;AAAA,cACP,QAAQ;AAAA,cACR,KAAKC,EAAO;AAAA,cACZ,UAAUf;AAAA,cACV,KAAKO;AAAA,YAAA;AAAA,UAAA,GAET;AAAA,QAAA;AAAA,MAAA;AAAA,IAEJ;AAAA,IACA,gBAAAM,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACvB,gBAAAJ,EAACK,KAAK,WAAU,OAAM,QAAQd,IAAa,UAAU,cAClD,UACHD,EAAA,CAAA;AAAA,EACF,EAAA,CAAA;AAEJ;"}

package/dist/features/auth/signup/user-type-selector/user-type-selector.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"user-type-selector.js","sources":["../../../../../src/features/auth/signup/user-type-selector/user-type-selector.tsx"],"sourcesContent":["import type { ~~TSignupUserType~~ } from '../signup-types';\nimport type { IUserTypeSelectorProps } from './user-type-selector-types';\n\nimport { memo, type FC } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\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 Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { USER_TYPES } from '../signup-constants';\nimport UserTypeCard from './user-type-card/user-type-card';\nimport * as Styled from './user-type-selector-styled';\n\nconst UserTypeSelector: FC<IUserTypeSelectorProps> = ({ onNext, onUserTypeChange, userType }) => {\n return (\n <Styled.Container\n $flex={1}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n $background=\"BLACK_1\"\n >\n <Styled.Logo src={ILLUSTRATIONS.CIRCLE_CUEMATH_LOGO} alt=\"Parent Signup\" withLoader={false} />\n <FlexView\n $flex={1}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n >\n <Separator heightX={9.5} />\n <Text $color=\"WHITE\" $renderAs=\"ab1\" $align=\"center\">\n Ready to explore? <br />\n First, tell us who you are.\n </Text>\n <Separator heightX={2.5} />\n <FlexView\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $flexDirection=\"row\"\n $flexColumnGapX={2.5}\n >\n {USER_TYPES.map(({ id }: { id: ~~TSignupUserType~~ }) => (\n <UserTypeCard\n userType={id}\n isSelected={userType === id}\n onClick={() => onUserTypeChange(id)}\n key={id}\n />\n ))}\n <Styled.NextButton>\n <IconButton\n Icon={Next2Icon}\n renderAs=\"secondary\"\n analyticsLabel=\"Next\"\n onClick={onNext}\n />\n </Styled.NextButton>\n </FlexView>\n <Separator heightX={6} />\n <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\" $align=\"center\">\n By continuing, you agree to our <br />\n <Text $inline $renderAs=\"ub2-bold\" $color=\"WHITE_T_60\">\n Terms of Use\n </Text>{' '}\n and{' '}\n <Text $inline $renderAs=\"ub2-bold\" $color=\"WHITE_T_60\">\n Privacy Policy\n </Text>\n </Text>\n </FlexView>\n </Styled.Container>\n );\n};\n\nexport default memo(UserTypeSelector);\n"],"names":["UserTypeSelector","onNext","onUserTypeChange","userType","jsxs","Styled.Container","jsx","Styled.Logo","ILLUSTRATIONS","FlexView","Separator","Text","USER_TYPES","id","UserTypeCard","Styled.NextButton","IconButton","Next2Icon","userTypeSelector","memo"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAA+C,CAAC,EAAE,QAAAC,GAAQ,kBAAAC,GAAkB,UAAAC,QAE9E,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,OAAO;AAAA,IACP,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,aAAY;AAAA,IAEZ,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAY,KAAKC,EAAc,qBAAqB,KAAI,iBAAgB,YAAY,IAAO;AAAA,MAC5F,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,QAAO;AAAA,UACP,SAAQ;AAAA,UAER,UAAA;AAAA,YAAC,gBAAAH,EAAAI,GAAA,EAAU,SAAS,IAAK,CAAA;AAAA,8BACxBC,GAAK,EAAA,QAAO,SAAQ,WAAU,OAAM,QAAO,UAAS,UAAA;AAAA,cAAA;AAAA,gCAChC,MAAG,EAAA;AAAA,cAAE;AAAA,YAAA,GAE1B;AAAA,YACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,YACzB,gBAAAN;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,iBAAgB;AAAA,gBAChB,gBAAe;AAAA,gBACf,iBAAiB;AAAA,gBAEhB,UAAA;AAAA,kBAAAG,EAAW,IAAI,CAAC,EAAE,IAAAC,EACjB,MAAA,gBAAAP;AAAA,oBAACQ;AAAA,oBAAA;AAAA,sBACC,UAAUD;AAAA,sBACV,YAAYV,MAAaU;AAAA,sBACzB,SAAS,MAAMX,EAAiBW,CAAE;AAAA,oBAAA;AAAA,oBAC7BA;AAAA,kBAAA,CAER;AAAA,kBACD,gBAAAP,EAACS,GAAA,EACC,UAAA,gBAAAT;AAAA,oBAACU;AAAA,oBAAA;AAAA,sBACC,MAAMC;AAAA,sBACN,UAAS;AAAA,sBACT,gBAAe;AAAA,sBACf,SAAShB;AAAA,oBAAA;AAAA,kBAAA,GAEb;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,YACA,gBAAAK,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,8BACtBC,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,UAAA;AAAA,cAAA;AAAA,gCACvB,MAAG,EAAA;AAAA,cACpC,gBAAAL,EAACK,KAAK,SAAO,IAAC,WAAU,YAAW,QAAO,cAAa,UAEvD,eAAA,CAAA;AAAA,cAAQ;AAAA,cAAI;AAAA,cACR;AAAA,cACJ,gBAAAL,EAACK,KAAK,SAAO,IAAC,WAAU,YAAW,QAAO,cAAa,UAEvD,iBAAA,CAAA;AAAA,YAAA,GACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAAA,GAKSO,IAAAC,EAAKnB,CAAgB;"}
1	+ {"version":3,"file":"user-type-selector.js","sources":["../../../../../src/features/auth/signup/user-type-selector/user-type-selector.tsx"],"sourcesContent":["import type { TAuthUserType } from '../signup-types';\nimport type { IUserTypeSelectorProps } from './user-type-selector-types';\n\nimport { memo, type FC } from 'react';\n\nimport { ILLUSTRATIONS } from '../../../../assets/illustrations/illustrations';\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 Separator from '../../../ui/separator/separator';\nimport Text from '../../../ui/text/text';\nimport { USER_TYPES } from '../signup-constants';\nimport UserTypeCard from './user-type-card/user-type-card';\nimport * as Styled from './user-type-selector-styled';\n\nconst UserTypeSelector: FC<IUserTypeSelectorProps> = ({ onNext, onUserTypeChange, userType }) => {\n return (\n <Styled.Container\n $flex={1}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n $background=\"BLACK_1\"\n >\n <Styled.Logo src={ILLUSTRATIONS.CIRCLE_CUEMATH_LOGO} alt=\"Parent Signup\" withLoader={false} />\n <FlexView\n $flex={1}\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $width=\"100%\"\n $height=\"100%\"\n >\n <Separator heightX={9.5} />\n <Text $color=\"WHITE\" $renderAs=\"ab1\" $align=\"center\">\n Ready to explore? <br />\n First, tell us who you are.\n </Text>\n <Separator heightX={2.5} />\n <FlexView\n $alignItems=\"center\"\n $justifyContent=\"center\"\n $flexDirection=\"row\"\n $flexColumnGapX={2.5}\n >\n {USER_TYPES.map(({ id }: { id: TAuthUserType }) => (\n <UserTypeCard\n userType={id}\n isSelected={userType === id}\n onClick={() => onUserTypeChange(id)}\n key={id}\n />\n ))}\n <Styled.NextButton>\n <IconButton\n Icon={Next2Icon}\n renderAs=\"secondary\"\n analyticsLabel=\"Next\"\n onClick={onNext}\n />\n </Styled.NextButton>\n </FlexView>\n <Separator heightX={6} />\n <Text $renderAs=\"ub2\" $color=\"WHITE_T_60\" $align=\"center\">\n By continuing, you agree to our <br />\n <Text $inline $renderAs=\"ub2-bold\" $color=\"WHITE_T_60\">\n Terms of Use\n </Text>{' '}\n and{' '}\n <Text $inline $renderAs=\"ub2-bold\" $color=\"WHITE_T_60\">\n Privacy Policy\n </Text>\n </Text>\n </FlexView>\n </Styled.Container>\n );\n};\n\nexport default memo(UserTypeSelector);\n"],"names":["UserTypeSelector","onNext","onUserTypeChange","userType","jsxs","Styled.Container","jsx","Styled.Logo","ILLUSTRATIONS","FlexView","Separator","Text","USER_TYPES","id","UserTypeCard","Styled.NextButton","IconButton","Next2Icon","userTypeSelector","memo"],"mappings":";;;;;;;;;;;AAeA,MAAMA,IAA+C,CAAC,EAAE,QAAAC,GAAQ,kBAAAC,GAAkB,UAAAC,QAE9E,gBAAAC;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,OAAO;AAAA,IACP,aAAY;AAAA,IACZ,iBAAgB;AAAA,IAChB,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,aAAY;AAAA,IAEZ,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAY,KAAKC,EAAc,qBAAqB,KAAI,iBAAgB,YAAY,IAAO;AAAA,MAC5F,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAO;AAAA,UACP,aAAY;AAAA,UACZ,iBAAgB;AAAA,UAChB,QAAO;AAAA,UACP,SAAQ;AAAA,UAER,UAAA;AAAA,YAAC,gBAAAH,EAAAI,GAAA,EAAU,SAAS,IAAK,CAAA;AAAA,8BACxBC,GAAK,EAAA,QAAO,SAAQ,WAAU,OAAM,QAAO,UAAS,UAAA;AAAA,cAAA;AAAA,gCAChC,MAAG,EAAA;AAAA,cAAE;AAAA,YAAA,GAE1B;AAAA,YACA,gBAAAL,EAACI,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,YACzB,gBAAAN;AAAA,cAACK;AAAA,cAAA;AAAA,gBACC,aAAY;AAAA,gBACZ,iBAAgB;AAAA,gBAChB,gBAAe;AAAA,gBACf,iBAAiB;AAAA,gBAEhB,UAAA;AAAA,kBAAAG,EAAW,IAAI,CAAC,EAAE,IAAAC,EACjB,MAAA,gBAAAP;AAAA,oBAACQ;AAAA,oBAAA;AAAA,sBACC,UAAUD;AAAA,sBACV,YAAYV,MAAaU;AAAA,sBACzB,SAAS,MAAMX,EAAiBW,CAAE;AAAA,oBAAA;AAAA,oBAC7BA;AAAA,kBAAA,CAER;AAAA,kBACD,gBAAAP,EAACS,GAAA,EACC,UAAA,gBAAAT;AAAA,oBAACU;AAAA,oBAAA;AAAA,sBACC,MAAMC;AAAA,sBACN,UAAS;AAAA,sBACT,gBAAe;AAAA,sBACf,SAAShB;AAAA,oBAAA;AAAA,kBAAA,GAEb;AAAA,gBAAA;AAAA,cAAA;AAAA,YACF;AAAA,YACA,gBAAAK,EAACI,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,8BACtBC,GAAK,EAAA,WAAU,OAAM,QAAO,cAAa,QAAO,UAAS,UAAA;AAAA,cAAA;AAAA,gCACvB,MAAG,EAAA;AAAA,cACpC,gBAAAL,EAACK,KAAK,SAAO,IAAC,WAAU,YAAW,QAAO,cAAa,UAEvD,eAAA,CAAA;AAAA,cAAQ;AAAA,cAAI;AAAA,cACR;AAAA,cACJ,gBAAAL,EAACK,KAAK,SAAO,IAAC,WAAU,YAAW,QAAO,cAAa,UAEvD,iBAAA,CAAA;AAAA,YAAA,GACF;AAAA,UAAA;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAAA;AAAA,GAKSO,IAAAC,EAAKnB,CAAgB;"}

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

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

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

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

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

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

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

	@@ -1 +1 @@
1	- {"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && <Error $renderAs=\"body3\">{errorMessage}</Error>}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","SiblingWrapper","Label"],"mappings":";;;AAcA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,~~EACd~~,~~IAAAf~~,GACE,EAAE,~~OAAAgB~~,MAAUC;AAIhB,SAAA,gBAAAC,EAACC,KAAU,~~QAAQf~~,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,~~gBAAAa~~;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,~~WAAWlB~~;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,~~MAEhB~~,UAAA;AAAA,QAAA,gBAAAK,EAACE,GACE,EAAA,UAAA;AAAA,~~UAAAd~~;AAAA,UACAI,~~KAAgB~~,~~gBAAAM~~,~~EAACK~~,~~GAAM~~,~~EAAA~~,WAAU,~~SAAS~~,~~UAAaX~~,GAAA;AAAA,QAAA,~~GAC1D~~;AAAA,QACCH,IACC,~~gBAAAS~~;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,~~gBAAgBrB~~;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,~~QAxBQR~~,KAASa,MAAU,~~YA0B7B~~,~~gBAAAM~~;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWT,EAAM,~~MAAML~~,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,~~YAEf~~,UAAA;AAAA,~~cAAAd~~;AAAA,cACAY,KAAc,~~gBAAAK~~,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}
1	+ {"version":3,"file":"base-input.js","sources":["../../../../../src/features/ui/inputs/base-input/base-input.tsx"],"sourcesContent":["import type { IBaseInputProps } from './base-input-types';\n\nimport React from 'react';\nimport { useTheme } from 'styled-components';\n\nimport {\n Container,\n Error,\n InputWrapper,\n Label,\n SiblingWrapper,\n Wrapper,\n} from './base-input-styled';\n\nconst BaseInput: React.FC<IBaseInputProps> = props => {\n const {\n label,\n stickyLabel,\n renderAs,\n width,\n widthX,\n disabled,\n willShowMessage,\n inputElement,\n siblingElement,\n siblingPosition,\n size,\n errorMessage,\n mandatory,\n shape,\n isTransparent = false,\n colorTheme,\n } = props;\n const { input } = useTheme();\n const showLabel = label && shape !== 'curved';\n\n return (\n <Container $width={width} $widthX={widthX} $size={size} $willShowMessage={willShowMessage}>\n <Wrapper\n $renderAs={renderAs}\n $size={size}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n $colorTheme={colorTheme}\n >\n <InputWrapper>\n {inputElement}\n {errorMessage && (\n <Error $renderAs=\"body3\" $colorTheme={colorTheme}>\n {errorMessage}\n </Error>\n )}\n </InputWrapper>\n {siblingElement ? (\n <SiblingWrapper\n $inputRenderAs={renderAs}\n $disabled={disabled}\n $size={size}\n $siblingPosition={siblingPosition ?? 'right'}\n >\n {siblingElement}\n </SiblingWrapper>\n ) : undefined}\n {showLabel && (\n <Label\n $renderAs={input.sizes[size].labelTextVariant}\n $inputRenderAs={renderAs}\n $size={size}\n $stickyLabel={stickyLabel}\n $disabled={disabled}\n $shape={shape}\n $isTransparent={isTransparent}\n $colorTheme={colorTheme}\n >\n {label}\n {mandatory && <span>*</span>}\n </Label>\n )}\n </Wrapper>\n </Container>\n );\n};\n\nexport default BaseInput;\n"],"names":["BaseInput","props","label","stickyLabel","renderAs","width","widthX","disabled","willShowMessage","inputElement","siblingElement","siblingPosition","size","errorMessage","mandatory","shape","isTransparent","colorTheme","input","useTheme","jsx","Container","jsxs","Wrapper","InputWrapper","Error","SiblingWrapper","Label"],"mappings":";;;AAcA,MAAMA,IAAuC,CAASC,MAAA;AAC9C,QAAA;AAAA,IACJ,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,MAAAC;AAAA,IACA,cAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,YAAAC;AAAA,EACE,IAAAhB,GACE,EAAE,OAAAiB,MAAUC;AAIhB,SAAA,gBAAAC,EAACC,KAAU,QAAQhB,GAAO,SAASC,GAAQ,OAAOM,GAAM,kBAAkBJ,GACxE,UAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWnB;AAAA,MACX,OAAOQ;AAAA,MACP,WAAWL;AAAA,MACX,QAAQQ;AAAA,MACR,gBAAgBC;AAAA,MAChB,aAAaC;AAAA,MAEb,UAAA;AAAA,QAAA,gBAAAK,EAACE,GACE,EAAA,UAAA;AAAA,UAAAf;AAAA,UACAI,KACE,gBAAAO,EAAAK,GAAA,EAAM,WAAU,SAAQ,aAAaR,GACnC,UACHJ,GAAA;AAAA,QAAA,GAEJ;AAAA,QACCH,IACC,gBAAAU;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,gBAAgBtB;AAAA,YAChB,WAAWG;AAAA,YACX,OAAOK;AAAA,YACP,kBAAkBD,KAAmB;AAAA,YAEpC,UAAAD;AAAA,UAAA;AAAA,QAED,IAAA;AAAA,QA7BQR,KAASa,MAAU,YA+B7B,gBAAAO;AAAA,UAACK;AAAA,UAAA;AAAA,YACC,WAAWT,EAAM,MAAMN,CAAI,EAAE;AAAA,YAC7B,gBAAgBR;AAAA,YAChB,OAAOQ;AAAA,YACP,cAAcT;AAAA,YACd,WAAWI;AAAA,YACX,QAAQQ;AAAA,YACR,gBAAgBC;AAAA,YAChB,aAAaC;AAAA,YAEZ,UAAA;AAAA,cAAAf;AAAA,cACAY,KAAc,gBAAAM,EAAA,QAAA,EAAK,UAAC,IAAA,CAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACvB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN,EAAA,CAAA;AAEJ;"}

package/dist/features/ui/inputs/text-input/text-input-styled.js CHANGED Viewed

@@ -1,7 +1,8 @@
-import f from "styled-components";
-const m = f.input(({ theme: c, $size: p, $renderAs: s, $isTransparent: d }) => {
-  const { colors: e, input: r, text: u } = c, { valueColorName: t, labelColorName: n, backgroundColorName: $ } = r.variants[s], { inputTextVariant: b } = r.sizes[p], { fontFamily: i, fontSize: a, lineHeight: l, letterSpacing: o } = u[b], h = d ? "transparent" : e[$ ?? "WHITE"];
-  return `
+import g from "styled-components";
+const x = g.input(
+  ({ theme: p, $size: s, $renderAs: a, $isTransparent: d, $colorTheme: u }) => {
+    const { colors: o, input: t, text: $ } = p, { valueColorName: n, labelColorName: r, backgroundColorName: b } = u === "dark" ? t.darkVariants[a] : t.variants[a], { inputTextVariant: h } = t.sizes[s], { fontFamily: i, fontSize: l, lineHeight: c, letterSpacing: e } = $[h], f = d ? "transparent" : o[b ?? "WHITE"];
+    return `
     position: relative;
     width: 100%;
     height: 100%;
@@ -10,24 +11,24 @@ const m = f.input(({ theme: c, $size: p, $renderAs: s, $isTransparent: d }) => {
     outline: none;
     font-family: ${i};
-    font-size: ${a}px;
-    line-height: ${l}px;
-    ${typeof o == "number" ? `letter-spacing: ${o}px;` : ""}
+    font-size: ${l}px;
+    line-height: ${c}px;
+    ${typeof e == "number" ? `letter-spacing: ${e}px;` : ""}
-    background-color: ${h};
-    color: ${e[t.inactive]};
+    background-color: ${f};
+    color: ${o[n.inactive]};
     &::placeholder {
-      color: ${e[n.inactive]};
+      color: ${o[r.inactive]};
       font-family: ${i};
-      font-size: ${a}px;
-      line-height: ${l}px;
-      ${typeof o == "number" ? `letter-spacing: ${o}px;` : ""}
+      font-size: ${l}px;
+      line-height: ${c}px;
+      ${typeof e == "number" ? `letter-spacing: ${e}px;` : ""}
     }
     &:hover, &:focus {
-      color: ${e[t.active]};
+      color: ${o[n.active]};
     }
     &:read-only {
@@ -35,16 +36,16 @@ const m = f.input(({ theme: c, $size: p, $renderAs: s, $isTransparent: d }) => {
     }
     &:disabled {
-      color: ${e[t.disabled]};
+      color: ${o[n.disabled]};
       cursor: not-allowed;
       &::placeholder {
-        color: ${e[n.disabled]};
+        color: ${o[r.disabled]};
       }
     }
     &:hover:not([disabled, focused])::placeholder {
-      color: ${e[n.active]};
+      color: ${o[r.active]};
     }
     &:focus::placeholder {
@@ -57,12 +58,13 @@ const m = f.input(({ theme: c, $size: p, $renderAs: s, $isTransparent: d }) => {
       margin: 0;
     }
     &[type="date"]:not(:placeholder-shown){
-      color: ${e.BLACK_T_60};
+      color: ${o.BLACK_T_60};
       text-transform: uppercase;
     }
   `;
-});
+  }
+);
 export {
-  m as Input
+  x as Input
 };
 //# sourceMappingURL=text-input-styled.js.map

package/dist/features/ui/inputs/text-input/text-input-styled.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"text-input-styled.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from './text-input-types';\n\nimport styled from 'styled-components';\n\ninterface IInputProps {\n $renderAs: ITextInputProps['renderAs'];\n $size: IBaseInputProps['size'];\n $isTransparent?: IBaseInputProps['isTransparent'];\n}\n\nconst Input = styled.input<IInputProps>(({ theme, $size, $renderAs, $isTransparent }) => {\n const { colors, input, text } = theme;\n const { valueColorName, labelColorName, backgroundColorName } = input.variants[$renderAs];\n const { inputTextVariant } = input.sizes[$size];\n const { fontFamily, fontSize, lineHeight, letterSpacing } = text[inputTextVariant];\n const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n return `\n position: relative;\n width: 100%;\n height: 100%;\n border: 0;\n padding: 0;\n outline: none;\n\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n\n \n background-color: ${background};\n color: ${colors[valueColorName.inactive]};\n \n &::placeholder {\n color: ${colors[labelColorName.inactive]};\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n }\n\n &:hover, &:focus {\n color: ${colors[valueColorName.active]};\n }\n\n &:read-only {\n cursor: pointer;\n }\n \n &:disabled {\n color: ${colors[valueColorName.disabled]};\n cursor: not-allowed;\n\n &::placeholder {\n color: ${colors[labelColorName.disabled]};\n }\n }\n \n &:hover:not([disabled, focused])::placeholder {\n color: ${colors[labelColorName.active]};\n }\n\n &:focus::placeholder {\n color: transparent;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type=\"date\"]:not(:placeholder-shown){\n color: ${colors.BLACK_T_60};\n text-transform: uppercase;\n }\n `;\n});\n\nexport { Input };\n"],"names":["Input","styled","theme","$size","$renderAs","$isTransparent","colors","input","text","valueColorName","labelColorName","backgroundColorName","inputTextVariant","fontFamily","fontSize","lineHeight","letterSpacing","background"],"mappings":";~~AAWM~~,~~MAAAA~~,IAAQC,EAAO,~~MAAmB~~,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,gBAAAC,~~QAAqB~~;~~AACvF~~,~~QAAM~~,EAAE,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,EAAA,~~IAASN~~,GAC1B,EAAE,~~gBAAAO~~,GAAgB,gBAAAC,GAAgB,qBAAAC,~~EAAwB~~,~~IAAAJ~~,EAAM,~~SAASH~~,CAAS,~~GAClF~~,EAAE,~~kBAAAQ~~,EAAqB,IAAAL,EAAM,~~MAAMJ~~,CAAK,GACxC,EAAE,~~YAAAU~~,GAAY,UAAAC,GAAU,YAAAC,GAAY,eAAAC,MAAkBR,EAAKI,CAAgB,GAC3EK,~~IAAaZ~~,IAAiB,~~gBAAgBC~~,EAAOK,KAAuB,OAAO;AAElF,~~SAAA~~;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,~~mBAQUE~~,CAAU;AAAA,iBACZC,CAAQ;AAAA,mBACNC,CAAU;AAAA,MACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA,wBAG5DC,CAAU;AAAA,aACrBX,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA,eAG7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA,qBACzBG,CAAU;AAAA,mBACZC,CAAQ;AAAA,qBACNC,CAAU;AAAA,QACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIvEV,EAAOG,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQ7BH,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjCJ,EAAOI,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAa7BJ,EAAO,UAAU;AAAA;AAAA;AAAA;~~AAIhC~~,~~CAAC~~;"}
1	+ {"version":3,"file":"text-input-styled.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from './text-input-types';\n\nimport styled from 'styled-components';\n\ninterface IInputProps {\n $renderAs: ITextInputProps['renderAs'];\n $size: IBaseInputProps['size'];\n $isTransparent?: IBaseInputProps['isTransparent'];\n $colorTheme?: IBaseInputProps['colorTheme'];\n}\n\nconst Input = styled.input<IInputProps>(\n ({ theme, $size, $renderAs, $isTransparent, $colorTheme }) => {\n const { colors, input, text } = theme;\n const { valueColorName, labelColorName, backgroundColorName } =\n $colorTheme === 'dark' ? input.darkVariants[$renderAs] : input.variants[$renderAs];\n const { inputTextVariant } = input.sizes[$size];\n const { fontFamily, fontSize, lineHeight, letterSpacing } = text[inputTextVariant];\n const background = $isTransparent ? 'transparent' : colors[backgroundColorName ?? 'WHITE'];\n\n return `\n position: relative;\n width: 100%;\n height: 100%;\n border: 0;\n padding: 0;\n outline: none;\n\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n\n \n background-color: ${background};\n color: ${colors[valueColorName.inactive]};\n \n &::placeholder {\n color: ${colors[labelColorName.inactive]};\n font-family: ${fontFamily};\n font-size: ${fontSize}px;\n line-height: ${lineHeight}px;\n ${typeof letterSpacing === 'number' ? `letter-spacing: ${letterSpacing}px;` : ''}\n }\n\n &:hover, &:focus {\n color: ${colors[valueColorName.active]};\n }\n\n &:read-only {\n cursor: pointer;\n }\n \n &:disabled {\n color: ${colors[valueColorName.disabled]};\n cursor: not-allowed;\n\n &::placeholder {\n color: ${colors[labelColorName.disabled]};\n }\n }\n \n &:hover:not([disabled, focused])::placeholder {\n color: ${colors[labelColorName.active]};\n }\n\n &:focus::placeholder {\n color: transparent;\n }\n\n &::-webkit-outer-spin-button,\n &::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n &[type=\"date\"]:not(:placeholder-shown){\n color: ${colors.BLACK_T_60};\n text-transform: uppercase;\n }\n `;\n },\n);\n\nexport { Input };\n"],"names":["Input","styled","theme","$size","$renderAs","$isTransparent","$colorTheme","colors","input","text","valueColorName","labelColorName","backgroundColorName","inputTextVariant","fontFamily","fontSize","lineHeight","letterSpacing","background"],"mappings":";AAYA,MAAMA,IAAQC,EAAO;AAAA,EACnB,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,gBAAAC,GAAgB,aAAAC,QAAkB;AAC5D,UAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,EAAA,IAASP,GAC1B,EAAE,gBAAAQ,GAAgB,gBAAAC,GAAgB,qBAAAC,EACtC,IAAAN,MAAgB,SAASE,EAAM,aAAaJ,CAAS,IAAII,EAAM,SAASJ,CAAS,GAC7E,EAAE,kBAAAS,EAAqB,IAAAL,EAAM,MAAML,CAAK,GACxC,EAAE,YAAAW,GAAY,UAAAC,GAAU,YAAAC,GAAY,eAAAC,MAAkBR,EAAKI,CAAgB,GAC3EK,IAAab,IAAiB,gBAAgBE,EAAOK,KAAuB,OAAO;AAElF,WAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAQQE,CAAU;AAAA,iBACZC,CAAQ;AAAA,mBACNC,CAAU;AAAA,MACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA,wBAG5DC,CAAU;AAAA,aACrBX,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA,eAG7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA,qBACzBG,CAAU;AAAA,mBACZC,CAAQ;AAAA,qBACNC,CAAU;AAAA,QACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIvEV,EAAOG,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQ7BH,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA,eAKjCJ,EAAOI,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAa7BJ,EAAO,UAAU;AAAA;AAAA;AAAA;AAAA,EAI9B;AACF;"}