@cuemath/leap 2.9.5-hg2 → 2.9.5-j10

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

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

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

@@ -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/lottie-animation/helper.js

@@ -1,13 +1,14 @@
-const c = async (o) => {
+const o = /* @__PURE__ */ new Map(), h = async (t) => {
+  if (o.has(t)) return o.get(t);
   let e = null;
   try {
-    e = await fetch(o).then((t) => t.json()).catch(() => null);
-  } catch (t) {
-    console.log("Error while fetching the lottie: ", t);
+    e = await fetch(t).then((n) => n.json()).catch(() => null), e && o.set(t, e);
+  } catch (n) {
+    console.log("Error while fetching the lottie: ", n);
   }
   return e;
 };
 export {
-  c as fetchLottie
+  h as fetchLottie
 };
 //# sourceMappingURL=helper.js.map

package/dist/features/ui/lottie-animation/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sources":["../../../../src/features/ui/lottie-animation/helper.ts"],"sourcesContent":["import type { AnimationItem } from 'lottie-web';\n\nexport const fetchLottie = async (lottieSrc: string): Promise<AnimationItem | null> => {\n  let lottieJson: AnimationItem | null = null;\n\n  try {\n    lottieJson = await fetch(lottieSrc)\n      .then(res => res.json())\n      .catch(() => null);\n  } catch (error) {\n    /* eslint-disable no-console */\n    console.log('Error while fetching the lottie: ', error);\n  }\n\n  return lottieJson;\n};\n"],"names":["fetchLottie","lottieSrc","lottieJson","res","error"],"mappings":"AAEa,MAAAA,IAAc,OAAOC,MAAqD;AACrF,MAAIC,IAAmC;AAEnC,MAAA;AACF,IAAAA,IAAa,MAAM,MAAMD,CAAS,EAC/B,KAAK,CAAAE,MAAOA,EAAI,KAAA,CAAM,EACtB,MAAM,MAAM,IAAI;AAAA,WACZC,GAAO;AAEN,YAAA,IAAI,qCAAqCA,CAAK;AAAA,EACxD;AAEO,SAAAF;AACT;"}
+{"version":3,"file":"helper.js","sources":["../../../../src/features/ui/lottie-animation/helper.ts"],"sourcesContent":["import type { AnimationItem } from 'lottie-web';\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst lottieCache = new Map<string, any>();\n\nexport const fetchLottie = async (lottieSrc: string): Promise<AnimationItem | null> => {\n  if (lottieCache.has(lottieSrc)) return lottieCache.get(lottieSrc);\n\n  let lottieJson: AnimationItem | null = null;\n\n  try {\n    lottieJson = await fetch(lottieSrc)\n      .then(res => res.json())\n      .catch(() => null);\n    if (lottieJson) {\n      lottieCache.set(lottieSrc, lottieJson);\n    }\n  } catch (error) {\n    /* eslint-disable no-console */\n    console.log('Error while fetching the lottie: ', error);\n  }\n\n  return lottieJson;\n};\n"],"names":["lottieCache","fetchLottie","lottieSrc","lottieJson","res","error"],"mappings":"AAGA,MAAMA,wBAAkB,OAEXC,IAAc,OAAOC,MAAqD;AACrF,MAAIF,EAAY,IAAIE,CAAS,EAAU,QAAAF,EAAY,IAAIE,CAAS;AAEhE,MAAIC,IAAmC;AAEnC,MAAA;AACF,IAAAA,IAAa,MAAM,MAAMD,CAAS,EAC/B,KAAK,CAAAE,MAAOA,EAAI,KAAA,CAAM,EACtB,MAAM,MAAM,IAAI,GACfD,KACUH,EAAA,IAAIE,GAAWC,CAAU;AAAA,WAEhCE,GAAO;AAEN,YAAA,IAAI,qCAAqCA,CAAK;AAAA,EACxD;AAEO,SAAAF;AACT;"}