@cuemath/leap 2.9.5-j4 → 2.9.5-j6

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

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

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

@@ -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;"}
+{"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

@@ -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

@@ -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;"}
+{"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;"}

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

@@ -1,55 +1,58 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import g from "../base-input/base-input.js";
-import { Input as h } from "./text-input-styled.js";
-const i = "regular", x = b((o, p) => {
+import { forwardRef as I } from "react";
+import $ from "../base-input/base-input.js";
+import { Input as b } from "./text-input-styled.js";
+const i = "regular", g = I((l, p) => {
   const {
     type: e,
-    label: l,
-    value: t,
-    renderAs: r,
-    width: m,
-    widthX: u,
+    label: m,
+    value: r,
+    renderAs: t,
+    width: u,
+    widthX: d,
     disabled: s,
-    willShowMessage: d,
+    willShowMessage: c,
     siblingElement: f,
-    errorMessage: c,
-    shape: w,
-    isTransparent: n,
-    ...I
-  } = o;
+    errorMessage: h,
+    shape: T,
+    isTransparent: o,
+    colorTheme: n,
+    ...w
+  } = l;
   return /* @__PURE__ */ a(
-    g,
+    $,
     {
-      renderAs: r,
-      label: l,
-      stickyLabel: !!t || e === "date",
-      width: m,
-      widthX: u,
+      renderAs: t,
+      label: m,
+      stickyLabel: !!r || e === "date",
+      width: u,
+      widthX: d,
       disabled: s,
-      willShowMessage: d,
+      willShowMessage: c,
       size: i,
-      shape: w,
-      errorMessage: c,
-      isTransparent: n,
+      shape: T,
+      errorMessage: h,
+      isTransparent: o,
+      colorTheme: n,
       inputElement: /* @__PURE__ */ a(
-        h,
+        b,
         {
           ref: p,
           type: e,
-          value: t ?? "",
-          $renderAs: r,
+          value: r ?? "",
+          $renderAs: t,
           $size: i,
           disabled: s,
-          $isTransparent: n,
-          ...I
+          $isTransparent: o,
+          $colorTheme: n,
+          ...w
         }
       ),
       siblingElement: f
     }
   );
-}), y = x;
+}), z = g;
 export {
-  y as default
+  z as default
 };
 //# sourceMappingURL=text-input.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    type,\n    label,\n    value,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    siblingElement,\n    errorMessage,\n    shape,\n    isTransparent,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date'}\n      width={width}\n      widthX={widthX}\n      disabled={disabled}\n      willShowMessage={willShowMessage}\n      size={SIZE}\n      shape={shape}\n      errorMessage={errorMessage}\n      isTransparent={isTransparent}\n      inputElement={\n        <Styled.Input\n          ref={ref}\n          type={type}\n          value={value ?? ''}\n          $renderAs={renderAs}\n          $size={SIZE}\n          disabled={disabled}\n          $isTransparent={isTransparent}\n          {...rest}\n        />\n      }\n      siblingElement={siblingElement}\n    />\n  );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAd;AAGF,SAAA,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAX;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,eAAAE;AAAA,MACA,cACE,gBAAAE;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAhB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UACf,GAAGC;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAJ;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDQ,IAAepB;"}
+{"version":3,"file":"text-input.js","sources":["../../../../../src/features/ui/inputs/text-input/text-input.tsx"],"sourcesContent":["import type { ITextInputProps } from './text-input-types';\nimport type { Ref } from 'react';\n\nimport { forwardRef } from 'react';\n\nimport BaseInput from '../base-input/base-input';\nimport * as Styled from './text-input-styled';\n\nconst SIZE = 'regular';\n\nconst TextInput = forwardRef((props: ITextInputProps, ref: Ref<HTMLInputElement>) => {\n  const {\n    type,\n    label,\n    value,\n    renderAs,\n    width,\n    widthX,\n    disabled,\n    willShowMessage,\n    siblingElement,\n    errorMessage,\n    shape,\n    isTransparent,\n    colorTheme,\n    ...rest\n  } = props;\n\n  return (\n    <BaseInput\n      renderAs={renderAs}\n      label={label}\n      stickyLabel={!!value || type === 'date'}\n      width={width}\n      widthX={widthX}\n      disabled={disabled}\n      willShowMessage={willShowMessage}\n      size={SIZE}\n      shape={shape}\n      errorMessage={errorMessage}\n      isTransparent={isTransparent}\n      colorTheme={colorTheme}\n      inputElement={\n        <Styled.Input\n          ref={ref}\n          type={type}\n          value={value ?? ''}\n          $renderAs={renderAs}\n          $size={SIZE}\n          disabled={disabled}\n          $isTransparent={isTransparent}\n          $colorTheme={colorTheme}\n          {...rest}\n        />\n      }\n      siblingElement={siblingElement}\n    />\n  );\n});\n\nexport default TextInput;\n"],"names":["SIZE","TextInput","forwardRef","props","ref","type","label","value","renderAs","width","widthX","disabled","willShowMessage","siblingElement","errorMessage","shape","isTransparent","colorTheme","rest","jsx","BaseInput","Styled.Input","TextInput$1"],"mappings":";;;;AAQA,MAAMA,IAAO,WAEPC,IAAYC,EAAW,CAACC,GAAwBC,MAA+B;AAC7E,QAAA;AAAA,IACJ,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,UAAAC;AAAA,IACA,iBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,cAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAf;AAGF,SAAA,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,UAAAZ;AAAA,MACA,OAAAF;AAAA,MACA,aAAa,CAAC,CAACC,KAASF,MAAS;AAAA,MACjC,OAAAI;AAAA,MACA,QAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,MAAMZ;AAAA,MACN,OAAAe;AAAA,MACA,cAAAD;AAAA,MACA,eAAAE;AAAA,MACA,YAAAC;AAAA,MACA,cACE,gBAAAE;AAAA,QAACE;AAAAA,QAAA;AAAA,UACC,KAAAjB;AAAA,UACA,MAAAC;AAAA,UACA,OAAOE,KAAS;AAAA,UAChB,WAAWC;AAAA,UACX,OAAOR;AAAA,UACP,UAAAW;AAAA,UACA,gBAAgBK;AAAA,UAChB,aAAaC;AAAA,UACZ,GAAGC;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDS,IAAerB;"}

package/dist/features/ui/theme/input.js

@@ -1,5 +1,5 @@
 const n = (a) => {
-  const e = {
+  const o = {
     regular: {
       height: a * 2.75,
       // height of input
@@ -51,7 +51,7 @@ const n = (a) => {
       iconPadding: a * 0.5
       // padding between left of icon and input
     }
-  }, i = {
+  }, e = {
     valueColorName: {
       inactive: "BLACK",
       active: "BLACK",
@@ -76,8 +76,8 @@ const n = (a) => {
       disabled: 0.5,
       enabled: 1
     }
-  }, o = {
-    ...i,
+  }, l = {
+    ...e,
     backgroundColorName: "GREY_1",
     optionHoverColorName: "WHITE",
     borderColorName: {
@@ -86,11 +86,11 @@ const n = (a) => {
       disabled: "TRANSPARENT"
     }
   }, d = {
-    primary: i,
-    secondary: o,
+    primary: e,
+    secondary: l,
     success: {
-      opacity: i.opacity,
-      valueColorName: i.valueColorName,
+      opacity: e.opacity,
+      valueColorName: e.valueColorName,
       borderColorName: {
         inactive: "GREEN_5",
         active: "GREEN_5",
@@ -108,8 +108,8 @@ const n = (a) => {
       }
     },
     error: {
-      opacity: i.opacity,
-      valueColorName: i.valueColorName,
+      opacity: e.opacity,
+      valueColorName: e.valueColorName,
       borderColorName: {
         inactive: "RED",
         active: "RED",
@@ -126,8 +126,81 @@ const n = (a) => {
         disabled: "RED"
       }
     }
+  }, i = {
+    ...e,
+    labelBackgroundColorName: "TRANSPARENT",
+    backgroundColorName: "TRANSPARENT",
+    valueColorName: {
+      inactive: "WHITE",
+      active: "WHITE",
+      disabled: "WHITE_T_10"
+    },
+    borderColorName: {
+      inactive: "WHITE_T_15",
+      active: "WHITE",
+      disabled: "WHITE_T_15"
+    },
+    labelColorName: {
+      inactive: "WHITE_T_60",
+      active: "WHITE_T_60",
+      disabled: "WHITE_T_15"
+    }
+  }, r = {
+    ...i,
+    backgroundColorName: "WHITE_T_60",
+    optionHoverColorName: "WHITE",
+    borderColorName: {
+      active: "TRANSPARENT",
+      inactive: "TRANSPARENT",
+      disabled: "TRANSPARENT"
+    }
+  }, N = {
+    primary: i,
+    secondary: r,
+    success: {
+      labelBackgroundColorName: "TRANSPARENT",
+      backgroundColorName: "TRANSPARENT",
+      opacity: i.opacity,
+      valueColorName: i.valueColorName,
+      borderColorName: {
+        inactive: "GREEN_4",
+        active: "GREEN_4",
+        disabled: "GREEN_4"
+      },
+      labelColorName: {
+        inactive: "GREEN_4",
+        active: "GREEN_4",
+        disabled: "GREEN_4"
+      },
+      messageColorName: {
+        inactive: "GREEN_4",
+        active: "GREEN_4",
+        disabled: "GREEN_4"
+      }
+    },
+    error: {
+      labelBackgroundColorName: "TRANSPARENT",
+      backgroundColorName: "TRANSPARENT",
+      opacity: i.opacity,
+      valueColorName: i.valueColorName,
+      borderColorName: {
+        inactive: "ORANGE_4",
+        active: "ORANGE_4",
+        disabled: "ORANGE_4"
+      },
+      labelColorName: {
+        inactive: "ORANGE_4",
+        active: "ORANGE_4",
+        disabled: "ORANGE_4"
+      },
+      messageColorName: {
+        inactive: "ORANGE_4",
+        active: "ORANGE_4",
+        disabled: "ORANGE_4"
+      }
+    }
   };
-  return { sizes: e, variants: d };
+  return { sizes: o, variants: d, darkVariants: N };
 };
 export {
   n as default

package/dist/features/ui/theme/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../src/features/ui/theme/input.ts"],"sourcesContent":["import type { IInputSizeConfig, IInputVariantConfig, TInputSizes, TInputVariants } from '../types';\n\ninterface IGetInputConfig {\n  (gutter: number): {\n    sizes: Record<TInputSizes, IInputSizeConfig>;\n    variants: Record<TInputVariants, IInputVariantConfig>;\n  };\n}\nconst getInputConfig: IGetInputConfig = gutter => {\n  const sizes: Record<TInputSizes, IInputSizeConfig> = {\n    regular: {\n      height: gutter * 2.75, // height of input\n      marginTop: gutter * 0.5, // extra space when label is on top of input\n      marginBottom: gutter * 1.5, // extra space for message comes on bottom of input\n      paddingLeft: gutter,\n      paddingRight: gutter * 0.75,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body1',\n      labelTextVariant: 'body1',\n      messageTextVariant: 'body3',\n      iconsize: gutter * 1.5,\n      iconPadding: gutter, // padding between left of icon and input\n    },\n    small: {\n      height: gutter * 2.125, // height of input\n      marginTop: gutter * 0.5, // extra space when label is on top of input\n      marginBottom: 0, // extra space for message comes on bottom of input\n      paddingLeft: gutter * 0.5,\n      paddingRight: gutter * 0.5,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body3',\n      labelTextVariant: 'body3',\n      messageTextVariant: 'body3',\n      iconsize: gutter * 1.25,\n      iconPadding: gutter * 0.5, // padding between left of icon and input\n    },\n    xsmall: {\n      height: gutter * 1.75, // height of input\n      marginTop: 0, // extra space when label is on top of input\n      marginBottom: 0, // extra space for message comes on bottom of input\n      paddingLeft: gutter * 0.75,\n      paddingRight: gutter * 0.5,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body3',\n      labelTextVariant: 'body3',\n      messageTextVariant: 'body3',\n      iconsize: gutter,\n      iconPadding: gutter * 0.5, // padding between left of icon and input\n    },\n  };\n  const primaryVariant: IInputVariantConfig = {\n    valueColorName: {\n      inactive: 'BLACK',\n      active: 'BLACK',\n      disabled: 'BLACK_50',\n    },\n    borderColorName: {\n      inactive: 'BLACK_T_15',\n      active: 'BLACK_T_87',\n      disabled: 'BLACK_T_15',\n    },\n    labelColorName: {\n      inactive: 'BLACK_75',\n      active: 'BLACK',\n      disabled: 'BLACK_50',\n    },\n    messageColorName: {\n      inactive: 'BLACK_75',\n      active: 'BLACK_75',\n      disabled: 'BLACK_50',\n    },\n    opacity: {\n      disabled: 0.5,\n      enabled: 1,\n    },\n  };\n\n  const secondaryVariant: IInputVariantConfig = {\n    ...primaryVariant,\n    backgroundColorName: 'GREY_1',\n    optionHoverColorName: 'WHITE',\n    borderColorName: {\n      active: 'TRANSPARENT',\n      inactive: 'TRANSPARENT',\n      disabled: 'TRANSPARENT',\n    },\n  };\n\n  const variants: Record<TInputVariants, IInputVariantConfig> = {\n    primary: primaryVariant,\n    secondary: secondaryVariant,\n    success: {\n      opacity: primaryVariant.opacity,\n      valueColorName: primaryVariant.valueColorName,\n      borderColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n      labelColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n      messageColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n    },\n    error: {\n      opacity: primaryVariant.opacity,\n      valueColorName: primaryVariant.valueColorName,\n      borderColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n      labelColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n      messageColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n    },\n  };\n\n  return { sizes, variants };\n};\n\nexport default getInputConfig;\n"],"names":["getInputConfig","gutter","sizes","primaryVariant","secondaryVariant","variants"],"mappings":"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"}
+{"version":3,"file":"input.js","sources":["../../../../src/features/ui/theme/input.ts"],"sourcesContent":["import type { IInputSizeConfig, IInputVariantConfig, TInputSizes, TInputVariants } from '../types';\n\ninterface IGetInputConfig {\n  (gutter: number): {\n    sizes: Record<TInputSizes, IInputSizeConfig>;\n    variants: Record<TInputVariants, IInputVariantConfig>;\n    darkVariants: Record<TInputVariants, IInputVariantConfig>;\n  };\n}\nconst getInputConfig: IGetInputConfig = gutter => {\n  const sizes: Record<TInputSizes, IInputSizeConfig> = {\n    regular: {\n      height: gutter * 2.75, // height of input\n      marginTop: gutter * 0.5, // extra space when label is on top of input\n      marginBottom: gutter * 1.5, // extra space for message comes on bottom of input\n      paddingLeft: gutter,\n      paddingRight: gutter * 0.75,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body1',\n      labelTextVariant: 'body1',\n      messageTextVariant: 'body3',\n      iconsize: gutter * 1.5,\n      iconPadding: gutter, // padding between left of icon and input\n    },\n    small: {\n      height: gutter * 2.125, // height of input\n      marginTop: gutter * 0.5, // extra space when label is on top of input\n      marginBottom: 0, // extra space for message comes on bottom of input\n      paddingLeft: gutter * 0.5,\n      paddingRight: gutter * 0.5,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body3',\n      labelTextVariant: 'body3',\n      messageTextVariant: 'body3',\n      iconsize: gutter * 1.25,\n      iconPadding: gutter * 0.5, // padding between left of icon and input\n    },\n    xsmall: {\n      height: gutter * 1.75, // height of input\n      marginTop: 0, // extra space when label is on top of input\n      marginBottom: 0, // extra space for message comes on bottom of input\n      paddingLeft: gutter * 0.75,\n      paddingRight: gutter * 0.5,\n      borderRadius: gutter * 0.5,\n      inputTextVariant: 'body3',\n      labelTextVariant: 'body3',\n      messageTextVariant: 'body3',\n      iconsize: gutter,\n      iconPadding: gutter * 0.5, // padding between left of icon and input\n    },\n  };\n  const primaryVariant: IInputVariantConfig = {\n    valueColorName: {\n      inactive: 'BLACK',\n      active: 'BLACK',\n      disabled: 'BLACK_50',\n    },\n    borderColorName: {\n      inactive: 'BLACK_T_15',\n      active: 'BLACK_T_87',\n      disabled: 'BLACK_T_15',\n    },\n    labelColorName: {\n      inactive: 'BLACK_75',\n      active: 'BLACK',\n      disabled: 'BLACK_50',\n    },\n    messageColorName: {\n      inactive: 'BLACK_75',\n      active: 'BLACK_75',\n      disabled: 'BLACK_50',\n    },\n    opacity: {\n      disabled: 0.5,\n      enabled: 1,\n    },\n  };\n\n  const secondaryVariant: IInputVariantConfig = {\n    ...primaryVariant,\n    backgroundColorName: 'GREY_1',\n    optionHoverColorName: 'WHITE',\n    borderColorName: {\n      active: 'TRANSPARENT',\n      inactive: 'TRANSPARENT',\n      disabled: 'TRANSPARENT',\n    },\n  };\n\n  const variants: Record<TInputVariants, IInputVariantConfig> = {\n    primary: primaryVariant,\n    secondary: secondaryVariant,\n    success: {\n      opacity: primaryVariant.opacity,\n      valueColorName: primaryVariant.valueColorName,\n      borderColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n      labelColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n      messageColorName: {\n        inactive: 'GREEN_5',\n        active: 'GREEN_5',\n        disabled: 'GREEN_5',\n      },\n    },\n    error: {\n      opacity: primaryVariant.opacity,\n      valueColorName: primaryVariant.valueColorName,\n      borderColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n      labelColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n      messageColorName: {\n        inactive: 'RED',\n        active: 'RED',\n        disabled: 'RED',\n      },\n    },\n  };\n\n  const primaryDarkVariant: IInputVariantConfig = {\n    ...primaryVariant,\n    labelBackgroundColorName: 'TRANSPARENT',\n    backgroundColorName: 'TRANSPARENT',\n    valueColorName: {\n      inactive: 'WHITE',\n      active: 'WHITE',\n      disabled: 'WHITE_T_10',\n    },\n    borderColorName: {\n      inactive: 'WHITE_T_15',\n      active: 'WHITE',\n      disabled: 'WHITE_T_15',\n    },\n    labelColorName: {\n      inactive: 'WHITE_T_60',\n      active: 'WHITE_T_60',\n      disabled: 'WHITE_T_15',\n    },\n  };\n\n  const secondaryDarkVariant: IInputVariantConfig = {\n    ...primaryDarkVariant,\n    backgroundColorName: 'WHITE_T_60',\n    optionHoverColorName: 'WHITE',\n    borderColorName: {\n      active: 'TRANSPARENT',\n      inactive: 'TRANSPARENT',\n      disabled: 'TRANSPARENT',\n    },\n  };\n\n  const darkVariants: Record<TInputVariants, IInputVariantConfig> = {\n    primary: primaryDarkVariant,\n    secondary: secondaryDarkVariant,\n    success: {\n      labelBackgroundColorName: 'TRANSPARENT',\n      backgroundColorName: 'TRANSPARENT',\n      opacity: primaryDarkVariant.opacity,\n      valueColorName: primaryDarkVariant.valueColorName,\n      borderColorName: {\n        inactive: 'GREEN_4',\n        active: 'GREEN_4',\n        disabled: 'GREEN_4',\n      },\n      labelColorName: {\n        inactive: 'GREEN_4',\n        active: 'GREEN_4',\n        disabled: 'GREEN_4',\n      },\n      messageColorName: {\n        inactive: 'GREEN_4',\n        active: 'GREEN_4',\n        disabled: 'GREEN_4',\n      },\n    },\n    error: {\n      labelBackgroundColorName: 'TRANSPARENT',\n      backgroundColorName: 'TRANSPARENT',\n      opacity: primaryDarkVariant.opacity,\n      valueColorName: primaryDarkVariant.valueColorName,\n      borderColorName: {\n        inactive: 'ORANGE_4',\n        active: 'ORANGE_4',\n        disabled: 'ORANGE_4',\n      },\n      labelColorName: {\n        inactive: 'ORANGE_4',\n        active: 'ORANGE_4',\n        disabled: 'ORANGE_4',\n      },\n      messageColorName: {\n        inactive: 'ORANGE_4',\n        active: 'ORANGE_4',\n        disabled: 'ORANGE_4',\n      },\n    },\n  };\n\n  return { sizes, variants, darkVariants };\n};\n\nexport default getInputConfig;\n"],"names":["getInputConfig","gutter","sizes","primaryVariant","secondaryVariant","variants","primaryDarkVariant","secondaryDarkVariant","darkVariants"],"mappings":"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"}

package/dist/index.d.ts

@@ -607,6 +607,7 @@ declare interface IBaseInputProps {
     mandatory?: boolean;
     shape?: TInputShapes;
     isTransparent?: boolean;
+    colorTheme?: 'light' | 'dark';
 }
 
 declare interface IBaseLeaderboardDetails {
@@ -912,15 +913,15 @@ declare interface ICircularStepsProps {
 
 declare interface ICircularStepWrapperProps {
     children: ReactNode;
-    onGoBack?: () => void;
-    onNext?: () => void;
-    label?: string;
-    showNext: boolean;
-    showPrevious: boolean;
     animation: string;
     introFrames: [number, number];
     outroFrames: [number, number];
-    isNextLoading: boolean;
+    onGoBack?: () => void;
+    onNext?: () => void;
+    label?: string;
+    showNext?: boolean;
+    showPrevious?: boolean;
+    isNextLoading?: boolean;
 }
 
 declare interface IClaimUserAccountProps {
@@ -1248,6 +1249,7 @@ declare interface IGetInputConfig {
     (gutter: number): {
         sizes: Record<TInputSizes, IInputSizeConfig>;
         variants: Record<TInputVariants, IInputVariantConfig>;
+        darkVariants: Record<TInputVariants, IInputVariantConfig>;
     };
 }
 
@@ -1373,6 +1375,7 @@ export declare interface IInputVariantConfig {
     };
     backgroundColorName?: TColorNames;
     optionHoverColorName?: TColorNames;
+    labelBackgroundColorName?: TColorNames;
 }
 
 declare interface IIsOkayTypeQuestion {
@@ -2713,6 +2716,18 @@ export declare interface ISignUpProps {
     onSignupStepsComplete: (data: IUpdateUserPayloadDal | ICreateUserResponseDal | null) => void;
 }
 
+declare interface ISocialAccountNotFoundProps {
+    provider: TSocialAuthProvider;
+    onRetryLogin: () => void;
+    onGoToSignup: () => void;
+}
+
+declare interface ISocialLoginMethodsProps {
+    onGoogleLogin: () => void;
+    onAppleLogin: () => void;
+    loadingProvider: TSocialAuthProvider | null;
+}
+
 export declare const isOkayTypeQuestion: IIsOkayTypeQuestion;
 
 export declare enum IStatsToAwardErrorCode {
@@ -4058,6 +4073,10 @@ export declare const Skip2Icon: React.FC<React.SVGProps<SVGSVGElement>>;
 
 export declare const SkipIcon: React.FC<React.SVGProps<SVGSVGElement>>;
 
+export declare const SocialAccountNotFound: ({ provider, onRetryLogin, onGoToSignup, }: ISocialAccountNotFoundProps) => JSX_2.Element;
+
+export declare const SocialLoginMethods: FC<ISocialLoginMethodsProps>;
+
 export declare const SplashScreen: ({ animationCompleted }: {
     animationCompleted: () => void;
 }) => JSX_2.Element;