@cuemath/leap 3.0.7-hg1 → 3.0.7-hg2

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

@@ -0,0 +1,84 @@
+import t from "styled-components";
+import l from "../../text/text.js";
+const g = t.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+`, m = t.input(({ theme: s, $size: d, $renderAs: f }) => {
+  const { colors: e, input: r, text: h } = s, { valueColorName: i, labelColorName: n } = r.variants[f], { inputTextVariant: u } = r.sizes[d], { fontFamily: a, fontSize: p, lineHeight: c, letterSpacing: o } = h[u];
+  return `
+    width: 100%;
+    height: 100%;
+    border: 0;
+    padding: 0;
+    outline: none;
+
+    font-family: ${a};
+    font-size: ${p}px;
+    line-height: ${c}px;
+    ${typeof o == "number" ? `letter-spacing: ${o}px;` : ""}
+
+    background-color: ${e.WHITE};
+    color: ${e[i.inactive]};
+    
+    &::placeholder {
+      color: ${e[n.inactive]};
+      font-family: ${a};
+      font-size: ${p}px;
+      line-height: ${c}px;
+      ${typeof o == "number" ? `letter-spacing: ${o}px;` : ""}
+    }
+
+    &:hover, &:focus {
+      color: ${e[i.active]};
+    }
+
+    &:disabled {
+      color: ${e[i.disabled]};
+      cursor: not-allowed;
+
+      &::placeholder {
+        color: ${e[n.disabled]};
+      }
+    }
+
+    &:read-only {
+      cursor: pointer;
+    }
+
+    &:hover:not([disabled, focused])::placeholder {
+      color: ${e[n.active]};
+    }
+
+    &:focus::placeholder {
+      color: transparent;
+    }
+  `;
+}), v = t.div`
+  position: absolute;
+  pointer-events: none;
+  display: flex;
+`, y = t(l)`
+  pointer-events: none;
+  padding-left: 8px;
+`, b = t(l)`
+  visibility: hidden;
+  white-space: nowrap;
+  font-family: inherit;
+  font-size: inherit;
+`, w = t(l)`
+  margin-top: 8px;
+  margin-left: 12px;
+`;
+export {
+  v as HiddenBox,
+  g as InputContainer,
+  b as InputReplicaText,
+  w as PercentileLabel,
+  m as StyledInput,
+  y as ThOverlay
+};
+//# sourceMappingURL=percentile-styled.js.map

package/dist/features/ui/inputs/percentile-input/percentile-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"percentile-styled.js","sources":["../../../../../src/features/ui/inputs/percentile-input/percentile-styled.ts"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\nimport type { ITextInputProps } from '../text-input/text-input-types';\n\nimport styled from 'styled-components';\n\nimport Text from '../../text/text';\n\nconst InputContainer = styled.div`\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  padding: 0;\n`;\n\ninterface IInputProps {\n  $renderAs: ITextInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n}\n\nconst StyledInput = styled.input<IInputProps>(({ theme, $size, $renderAs }) => {\n  const { colors, input, text } = theme;\n  const { valueColorName, labelColorName } = input.variants[$renderAs];\n  const { inputTextVariant } = input.sizes[$size];\n  const { fontFamily, fontSize, lineHeight, letterSpacing } = text[inputTextVariant];\n\n  return `\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    background-color: ${colors.WHITE};\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    &:disabled {\n      color: ${colors[valueColorName.disabled]};\n      cursor: not-allowed;\n\n      &::placeholder {\n        color: ${colors[labelColorName.disabled]};\n      }\n    }\n\n    &:read-only {\n      cursor: pointer;\n    }\n\n    &:hover:not([disabled, focused])::placeholder {\n      color: ${colors[labelColorName.active]};\n    }\n\n    &:focus::placeholder {\n      color: transparent;\n    }\n  `;\n});\n\nconst HiddenBox = styled.div`\n  position: absolute;\n  pointer-events: none;\n  display: flex;\n`;\n\nconst ThOverlay = styled(Text)`\n  pointer-events: none;\n  padding-left: 8px;\n`;\n\nconst InputReplicaText = styled(Text)`\n  visibility: hidden;\n  white-space: nowrap;\n  font-family: inherit;\n  font-size: inherit;\n`;\n\nconst PercentileLabel = styled(Text)`\n  margin-top: 8px;\n  margin-left: 12px;\n`;\n\nexport { InputContainer, StyledInput, HiddenBox, ThOverlay, InputReplicaText, PercentileLabel };\n"],"names":["InputContainer","styled","StyledInput","theme","$size","$renderAs","colors","input","text","valueColorName","labelColorName","inputTextVariant","fontFamily","fontSize","lineHeight","letterSpacing","HiddenBox","ThOverlay","Text","InputReplicaText","PercentileLabel"],"mappings":";;AAOA,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAcxBC,IAAcD,EAAO,MAAmB,CAAC,EAAE,OAAAE,GAAO,OAAAC,GAAO,WAAAC,QAAgB;AAC7E,QAAM,EAAE,QAAAC,GAAQ,OAAAC,GAAO,MAAAC,EAAA,IAASL,GAC1B,EAAE,gBAAAM,GAAgB,gBAAAC,EAAA,IAAmBH,EAAM,SAASF,CAAS,GAC7D,EAAE,kBAAAM,EAAqB,IAAAJ,EAAM,MAAMH,CAAK,GACxC,EAAE,YAAAQ,GAAY,UAAAC,GAAU,YAAAC,GAAY,eAAAC,MAAkBP,EAAKG,CAAgB;AAE1E,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOUC,CAAU;AAAA,iBACZC,CAAQ;AAAA,mBACNC,CAAU;AAAA,MACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA,wBAE5DT,EAAO,KAAK;AAAA,aACvBA,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA,eAG7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA,qBACzBE,CAAU;AAAA,mBACZC,CAAQ;AAAA,qBACNC,CAAU;AAAA,QACvB,OAAOC,KAAkB,WAAW,mBAAmBA,CAAa,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIvET,EAAOG,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA,eAI7BH,EAAOG,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA,iBAI7BH,EAAOI,EAAe,QAAQ,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eASjCJ,EAAOI,EAAe,MAAM,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAO5C,CAAC,GAEKM,IAAYf,EAAO;AAAA;AAAA;AAAA;AAAA,GAMnBgB,IAAYhB,EAAOiB,CAAI;AAAA;AAAA;AAAA,GAKvBC,IAAmBlB,EAAOiB,CAAI;AAAA;AAAA;AAAA;AAAA;AAAA,GAO9BE,IAAkBnB,EAAOiB,CAAI;AAAA;AAAA;AAAA;"}

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

@@ -0,0 +1,10 @@
+import o from "styled-components";
+import e from "../../layout/flex-view.js";
+const a = o(e)(({ theme: t, $numColumns: r }) => `
+    flex-basis: calc((100% - ${t.layout.gutter * 1.5 * (r - 1)}px)/${r});
+    cursor: pointer;
+  `);
+export {
+  a as RadioOptionWrapper
+};
+//# sourceMappingURL=radio-input-styled.js.map

package/dist/features/ui/inputs/radio-input/radio-input-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-input-styled.js","sources":["../../../../../src/features/ui/inputs/radio-input/radio-input-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../layout/flex-view';\n\ninterface IRadioOptionWrapperProps {\n  $numColumns: number;\n}\nconst RadioOptionWrapper = styled(FlexView)<IRadioOptionWrapperProps>(({ theme, $numColumns }) => {\n  return `\n    flex-basis: calc((100% - ${theme.layout.gutter * 1.5 * ($numColumns - 1)}px)/${$numColumns});\n    cursor: pointer;\n  `;\n});\n\nexport { RadioOptionWrapper };\n"],"names":["RadioOptionWrapper","styled","FlexView","theme","$numColumns"],"mappings":";;AAOM,MAAAA,IAAqBC,EAAOC,CAAQ,EAA4B,CAAC,EAAE,OAAAC,GAAO,aAAAC,QACvE;AAAA,+BACsBD,EAAM,OAAO,SAAS,OAAOC,IAAc,EAAE,OAAOA,CAAW;AAAA;AAAA,GAG7F;"}

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

@@ -0,0 +1,26 @@
+import { jsx as o } from "react/jsx-runtime";
+import l from "../../layout/flex-view.js";
+import { RadioOptionWrapper as m } from "./radio-input-styled.js";
+import c from "./radio-option/radio-option.js";
+const d = ({
+  options: e,
+  value: t,
+  onChange: i,
+  numColumns: n
+}) => /* @__PURE__ */ o(l, { $width: "100%", $flexDirection: "row", $flexWrap: !0, $flexGapX: 1.5, children: e.map((p) => {
+  const { label: a, id: r } = p;
+  return /* @__PURE__ */ o(
+    m,
+    {
+      $flexDirection: "row",
+      $numColumns: n ?? 1,
+      $alignItems: "center",
+      children: /* @__PURE__ */ o(c, { id: r, label: a, checked: t === r, onChange: i })
+    },
+    r
+  );
+}) }), x = d;
+export {
+  x as default
+};
+//# sourceMappingURL=radio-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"radio-input.js","sources":["../../../../../src/features/ui/inputs/radio-input/radio-input.tsx"],"sourcesContent":["import type { IRadioInputProps } from './radio-input-types';\n\nimport FlexView from '../../layout/flex-view';\nimport * as Styled from './radio-input-styled';\nimport RadioOption from './radio-option/radio-option';\n\nconst RadioInput = <IDType extends string | number>({\n  options,\n  value,\n  onChange,\n  numColumns,\n}: IRadioInputProps<IDType>): JSX.Element => {\n  return (\n    <FlexView $width=\"100%\" $flexDirection=\"row\" $flexWrap $flexGapX={1.5}>\n      {options.map(option => {\n        const { label, id } = option;\n\n        return (\n          <Styled.RadioOptionWrapper\n            key={id}\n            $flexDirection=\"row\"\n            $numColumns={numColumns ?? 1}\n            $alignItems=\"center\"\n          >\n            <RadioOption<IDType> id={id} label={label} checked={value === id} onChange={onChange} />\n          </Styled.RadioOptionWrapper>\n        );\n      })}\n    </FlexView>\n  );\n};\n\nexport default RadioInput;\n"],"names":["RadioInput","options","value","onChange","numColumns","jsx","FlexView","option","label","id","Styled.RadioOptionWrapper","RadioOption","RadioInput$1"],"mappings":";;;;AAMA,MAAMA,IAAa,CAAiC;AAAA,EAClD,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,YAAAC;AACF,MAEK,gBAAAC,EAAAC,GAAA,EAAS,QAAO,QAAO,gBAAe,OAAM,WAAS,IAAC,WAAW,KAC/D,UAAQL,EAAA,IAAI,CAAUM,MAAA;AACf,QAAA,EAAE,OAAAC,GAAO,IAAAC,EAAO,IAAAF;AAGpB,SAAA,gBAAAF;AAAA,IAACK;AAAAA,IAAA;AAAA,MAEC,gBAAe;AAAA,MACf,aAAaN,KAAc;AAAA,MAC3B,aAAY;AAAA,MAEZ,4BAACO,GAAoB,EAAA,IAAAF,GAAQ,OAAAD,GAAc,SAASN,MAAUO,GAAI,UAAAN,GAAoB;AAAA,IAAA;AAAA,IALjFM;AAAA,EAAA;AAQV,CAAA,EACH,CAAA,GAIJG,IAAeZ;"}

package/dist/features/ui/inputs/radio-input/radio-option/radio-option-styled.js

@@ -0,0 +1,38 @@
+import r from "styled-components";
+import i from "../../../text/text.js";
+const p = r.div(
+  ({ theme: o }) => `
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: ${o.layout.gutter * 0.5}px;
+  `
+), a = r.div(
+  ({ theme: o, $size: t, $innerCircle: e }) => `
+    position: relative;
+    flex-shrink: 0;
+    width: ${t}px;
+    height: ${t}px;
+    margin: 0 ${o.layout.gutter * 0.25}px;
+    border-radius: ${t / 2}px;
+    background-color: ${o.colors[e ? "BLACK" : "WHITE"]};
+    border-color: ${o.colors.BLACK};
+    border-width: ${e ? 0 : 2}px;
+    border-style: solid;
+  `
+), d = r.div`
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`, s = r(i)`
+  word-break: break-all;
+`;
+export {
+  a as InputOptionCircle,
+  d as InputOptionInnerCircleWrraper,
+  s as Label,
+  p as RadioOptionWrapper
+};
+//# sourceMappingURL=radio-option-styled.js.map

package/dist/features/ui/inputs/radio-input/radio-option/radio-option-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-option-styled.js","sources":["../../../../../../src/features/ui/inputs/radio-input/radio-option/radio-option-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Text from '../../../text/text';\n\nconst RadioOptionWrapper = styled.div(\n  ({ theme }) => `\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    gap: ${theme.layout.gutter * 0.5}px;\n  `,\n);\n\ninterface IInputOptionProps {\n  $size: number;\n  $innerCircle: boolean;\n}\n\nconst InputOptionCircle = styled.div<IInputOptionProps>(\n  ({ theme, $size, $innerCircle }) => `\n    position: relative;\n    flex-shrink: 0;\n    width: ${$size}px;\n    height: ${$size}px;\n    margin: 0 ${theme.layout.gutter * 0.25}px;\n    border-radius: ${$size / 2}px;\n    background-color: ${theme.colors[$innerCircle ? 'BLACK' : 'WHITE']};\n    border-color: ${theme.colors.BLACK};\n    border-width: ${$innerCircle ? 0 : 2}px;\n    border-style: solid;\n  `,\n);\n\nconst InputOptionInnerCircleWrraper = styled.div`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n\nconst Label = styled(Text)`\n  word-break: break-all;\n`;\n\nexport { InputOptionCircle, Label, RadioOptionWrapper, InputOptionInnerCircleWrraper };\n"],"names":["RadioOptionWrapper","styled","theme","InputOptionCircle","$size","$innerCircle","InputOptionInnerCircleWrraper","Label","Text"],"mappings":";;AAIA,MAAMA,IAAqBC,EAAO;AAAA,EAChC,CAAC,EAAE,OAAAC,EAAA,MAAY;AAAA;AAAA;AAAA;AAAA,WAINA,EAAM,OAAO,SAAS,GAAG;AAAA;AAEpC,GAOMC,IAAoBF,EAAO;AAAA,EAC/B,CAAC,EAAE,OAAAC,GAAO,OAAAE,GAAO,cAAAC,EAAmB,MAAA;AAAA;AAAA;AAAA,aAGzBD,CAAK;AAAA,cACJA,CAAK;AAAA,gBACHF,EAAM,OAAO,SAAS,IAAI;AAAA,qBACrBE,IAAQ,CAAC;AAAA,wBACNF,EAAM,OAAOG,IAAe,UAAU,OAAO,CAAC;AAAA,oBAClDH,EAAM,OAAO,KAAK;AAAA,oBAClBG,IAAe,IAAI,CAAC;AAAA;AAAA;AAGxC,GAEMC,IAAgCL,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAQvCM,IAAQN,EAAOO,CAAI;AAAA;AAAA;"}

package/dist/features/ui/inputs/radio-input/radio-option/radio-option.js

@@ -0,0 +1,26 @@
+import { jsxs as s, jsx as i } from "react/jsx-runtime";
+import { useCallback as u } from "react";
+import { useTheme as a } from "styled-components";
+import { RadioOptionWrapper as f, InputOptionCircle as t, InputOptionInnerCircleWrraper as m, Label as c } from "./radio-option-styled.js";
+const $ = ({
+  id: e,
+  label: l,
+  checked: r,
+  onChange: n
+}) => {
+  const {
+    layout: { gutter: o }
+  } = a(), p = u(() => {
+    if (typeof n != "function")
+      throw new Error("onChange must be a function");
+    r || n(e);
+  }, [r, n, e]);
+  return /* @__PURE__ */ s(f, { onClick: p, children: [
+    /* @__PURE__ */ i(t, { $size: o, $innerCircle: !1, children: r && /* @__PURE__ */ i(m, { children: /* @__PURE__ */ i(t, { $size: o * 0.5, $innerCircle: !0 }) }) }),
+    /* @__PURE__ */ i(c, { $renderAs: r ? "body1Medium" : "body1", children: l })
+  ] });
+};
+export {
+  $ as default
+};
+//# sourceMappingURL=radio-option.js.map

package/dist/features/ui/inputs/radio-input/radio-option/radio-option.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-option.js","sources":["../../../../../../src/features/ui/inputs/radio-input/radio-option/radio-option.tsx"],"sourcesContent":["import type { IRadioOptionProps } from './radio-option-types';\n\nimport { useCallback } from 'react';\nimport { useTheme } from 'styled-components';\n\nimport * as Styled from './radio-option-styled';\n\nconst RadioOption = <IDType extends string | number>({\n  id,\n  label,\n  checked,\n  onChange,\n}: IRadioOptionProps<IDType>): JSX.Element => {\n  const {\n    layout: { gutter },\n  } = useTheme();\n  const handleOnClick = useCallback(() => {\n    if (typeof onChange !== 'function') {\n      throw new Error('onChange must be a function');\n    }\n\n    if (!checked) onChange(id);\n  }, [checked, onChange, id]);\n\n  return (\n    <Styled.RadioOptionWrapper onClick={handleOnClick}>\n      <Styled.InputOptionCircle $size={gutter} $innerCircle={false}>\n        {checked && (\n          <Styled.InputOptionInnerCircleWrraper>\n            <Styled.InputOptionCircle $size={gutter * 0.5} $innerCircle={true} />\n          </Styled.InputOptionInnerCircleWrraper>\n        )}\n      </Styled.InputOptionCircle>\n      <Styled.Label $renderAs={checked ? 'body1Medium' : 'body1'}>{label}</Styled.Label>\n    </Styled.RadioOptionWrapper>\n  );\n};\n\nexport default RadioOption;\n"],"names":["RadioOption","id","label","checked","onChange","gutter","useTheme","handleOnClick","useCallback","jsxs","Styled.RadioOptionWrapper","jsx","Styled.InputOptionCircle","Styled.InputOptionInnerCircleWrraper","Styled.Label"],"mappings":";;;;AAOA,MAAMA,IAAc,CAAiC;AAAA,EACnD,IAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC;AAAA,EACA,UAAAC;AACF,MAA8C;AACtC,QAAA;AAAA,IACJ,QAAQ,EAAE,QAAAC,EAAO;AAAA,MACfC,EAAS,GACPC,IAAgBC,EAAY,MAAM;AAClC,QAAA,OAAOJ,KAAa;AAChB,YAAA,IAAI,MAAM,6BAA6B;AAG3C,IAACD,KAASC,EAASH,CAAE;AAAA,EACxB,GAAA,CAACE,GAASC,GAAUH,CAAE,CAAC;AAE1B,SACG,gBAAAQ,EAAAC,GAAA,EAA0B,SAASH,GAClC,UAAA;AAAA,IAAC,gBAAAI,EAAAC,GAAA,EAAyB,OAAOP,GAAQ,cAAc,IACpD,UACCF,KAAA,gBAAAQ,EAACE,GAAA,EACC,UAAC,gBAAAF,EAAAC,GAAA,EAAyB,OAAOP,IAAS,KAAK,cAAc,GAAM,CAAA,EACrE,CAAA,GAEJ;AAAA,IACA,gBAAAM,EAACG,GAAA,EAAa,WAAWX,IAAU,gBAAgB,SAAU,UAAMD,GAAA;AAAA,EACrE,EAAA,CAAA;AAEJ;"}

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

@@ -0,0 +1,28 @@
+import r from "styled-components";
+import p from "../../../../assets/line-icons/icons/cross.js";
+const h = r.div(
+  ({ theme: n, $size: s, $disabled: o, $inputRenderAs: i }) => {
+    const { colors: c, input: t } = n, { iconsize: e } = t.sizes[s], { labelColorName: l } = t.variants[i];
+    return `
+        cursor: pointer;
+        width: ${e}px;
+        height: ${e}px;
+
+        align-self: center;
+        color: ${c[l[o ? "disabled" : "inactive"]]};
+        pointer-events: ${o ? "none" : "auto"};
+
+        & svg {
+          width: 100%;
+          height: 100%;
+        }
+    `;
+  }
+), m = r(p)`
+  cursor: pointer;
+`;
+export {
+  m as StyledCrossIcon,
+  h as StyledPrefixElementWrapper
+};
+//# sourceMappingURL=searchable-input-styled.js.map

package/dist/features/ui/inputs/searchable-input/searchable-input-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-input-styled.js","sources":["../../../../../src/features/ui/inputs/searchable-input/searchable-input-styled.tsx"],"sourcesContent":["import type { IBaseInputProps } from '../base-input/base-input-types';\n\nimport styled from 'styled-components';\n\nimport CrossIcon from '../../../../assets/line-icons/icons/cross';\n\ninterface IStyledBackIconProps {\n  $inputRenderAs: IBaseInputProps['renderAs'];\n  $size: IBaseInputProps['size'];\n  $disabled?: boolean;\n}\n\nconst StyledPrefixElementWrapper = styled.div<IStyledBackIconProps>(\n  ({ theme, $size, $disabled, $inputRenderAs }) => {\n    const { colors, input } = theme;\n    const { iconsize } = input.sizes[$size];\n    const { labelColorName } = input.variants[$inputRenderAs];\n\n    return `\n        cursor: pointer;\n        width: ${iconsize}px;\n        height: ${iconsize}px;\n\n        align-self: center;\n        color: ${colors[labelColorName[$disabled ? 'disabled' : 'inactive']]};\n        pointer-events: ${$disabled ? 'none' : 'auto'};\n\n        & svg {\n          width: 100%;\n          height: 100%;\n        }\n    `;\n  },\n);\n\nconst StyledCrossIcon = styled(CrossIcon)`\n  cursor: pointer;\n`;\n\nexport { StyledPrefixElementWrapper, StyledCrossIcon };\n"],"names":["StyledPrefixElementWrapper","styled","theme","$size","$disabled","$inputRenderAs","colors","input","iconsize","labelColorName","StyledCrossIcon","CrossIcon"],"mappings":";;AAYA,MAAMA,IAA6BC,EAAO;AAAA,EACxC,CAAC,EAAE,OAAAC,GAAO,OAAAC,GAAO,WAAAC,GAAW,gBAAAC,QAAqB;AACzC,UAAA,EAAE,QAAAC,GAAQ,OAAAC,EAAU,IAAAL,GACpB,EAAE,UAAAM,EAAa,IAAAD,EAAM,MAAMJ,CAAK,GAChC,EAAE,gBAAAM,EAAmB,IAAAF,EAAM,SAASF,CAAc;AAEjD,WAAA;AAAA;AAAA,iBAEMG,CAAQ;AAAA,kBACPA,CAAQ;AAAA;AAAA;AAAA,iBAGTF,EAAOG,EAAeL,IAAY,aAAa,UAAU,CAAC,CAAC;AAAA,0BAClDA,IAAY,SAAS,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAOnD;AACF,GAEMM,IAAkBT,EAAOU,CAAS;AAAA;AAAA;"}

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

@@ -0,0 +1,101 @@
+import { jsx as r, jsxs as I } from "react/jsx-runtime";
+import { useRef as O, useCallback as i } from "react";
+import v from "../../buttons/clickable/clickable.js";
+import S from "../../layout/flex-view.js";
+import z from "../base-input/base-input.js";
+import { Input as A } from "../text-input/text-input-styled.js";
+import { StyledPrefixElementWrapper as D, StyledCrossIcon as R } from "./searchable-input-styled.js";
+const G = (u) => {
+  const {
+    renderAs: s,
+    value: h,
+    disabled: t,
+    label: o,
+    width: f,
+    widthX: $,
+    shape: b = "curved",
+    size: c = "regular",
+    onSearchTextChange: a,
+    onPrefixElementClick: l,
+    onEnter: e,
+    searchOnClear: d,
+    analyticsLabel: C,
+    analyticsProps: x,
+    prefixElement: p
+  } = u, m = O(null), g = i(
+    (n) => {
+      a(n.target.value);
+    },
+    [a]
+  ), w = i(
+    (n) => {
+      n.key === "Enter" && (e == null || e());
+    },
+    [e]
+  ), y = i(() => {
+    l == null || l();
+  }, [l]), k = i(() => {
+    var n;
+    a(""), d && (e == null || e(d)), (n = m.current) == null || n.focus();
+  }, [a, d, e]);
+  return /* @__PURE__ */ r(
+    v,
+    {
+      label: o ?? "searchable_input",
+      analyticsLabel: C,
+      analyticsProps: x,
+      disabled: t,
+      children: /* @__PURE__ */ r(
+        z,
+        {
+          renderAs: s,
+          size: c,
+          shape: b,
+          disabled: t,
+          label: o,
+          inputElement: /* @__PURE__ */ I(
+            S,
+            {
+              $flexDirection: "row",
+              $alignItems: "center",
+              $height: "100%",
+              $flexGap: 12,
+              $width: f,
+              $widthX: $,
+              children: [
+                l && p && /* @__PURE__ */ r(
+                  D,
+                  {
+                    $inputRenderAs: s,
+                    $disabled: t,
+                    $size: c,
+                    onClick: y,
+                    children: p
+                  }
+                ),
+                /* @__PURE__ */ r(
+                  A,
+                  {
+                    $renderAs: s,
+                    placeholder: o,
+                    ref: m,
+                    $size: c,
+                    value: h ?? "",
+                    disabled: t,
+                    onChange: g,
+                    onKeyDown: w
+                  }
+                )
+              ]
+            }
+          ),
+          siblingElement: h && /* @__PURE__ */ r(R, { onClick: k })
+        }
+      )
+    }
+  );
+};
+export {
+  G as default
+};
+//# sourceMappingURL=searchable-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-input.js","sources":["../../../../../src/features/ui/inputs/searchable-input/searchable-input.tsx"],"sourcesContent":["import type { ISearchableInputProps } from './searchable-input-types';\nimport type { ChangeEvent } from 'react';\n\nimport { useCallback, useRef } from 'react';\n\nimport Clickable from '../../buttons/clickable/clickable';\nimport FlexView from '../../layout/flex-view';\nimport BaseInput from '../base-input/base-input';\nimport { Input } from '../text-input/text-input-styled';\nimport * as Styled from './searchable-input-styled';\n\nconst SearchableInput = <IDType extends string>(props: ISearchableInputProps<IDType>) => {\n  const {\n    renderAs,\n    value,\n    disabled,\n    label,\n    width,\n    widthX,\n    shape = 'curved',\n    size = 'regular',\n    onSearchTextChange,\n    onPrefixElementClick,\n    onEnter,\n    searchOnClear,\n    analyticsLabel,\n    analyticsProps,\n    prefixElement,\n  } = props;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const handleOnChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      onSearchTextChange(e.target.value);\n    },\n    [onSearchTextChange],\n  );\n\n  const handleOnKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === 'Enter') {\n        onEnter?.();\n      }\n    },\n    [onEnter],\n  );\n\n  const handleOnPrefixElementClick = useCallback(() => {\n    onPrefixElementClick?.();\n  }, [onPrefixElementClick]);\n\n  const handleOnClear = useCallback(() => {\n    onSearchTextChange('');\n\n    if (searchOnClear) {\n      onEnter?.(searchOnClear);\n    }\n\n    inputRef.current?.focus();\n  }, [onSearchTextChange, searchOnClear, onEnter]);\n\n  return (\n    <Clickable\n      label={label ?? 'searchable_input'}\n      analyticsLabel={analyticsLabel}\n      analyticsProps={analyticsProps}\n      disabled={disabled}\n    >\n      <BaseInput\n        renderAs={renderAs}\n        size={size}\n        shape={shape}\n        disabled={disabled}\n        label={label}\n        inputElement={\n          <FlexView\n            $flexDirection=\"row\"\n            $alignItems=\"center\"\n            $height=\"100%\"\n            $flexGap={12}\n            $width={width}\n            $widthX={widthX}\n          >\n            {onPrefixElementClick && prefixElement && (\n              <Styled.StyledPrefixElementWrapper\n                $inputRenderAs={renderAs}\n                $disabled={disabled}\n                $size={size}\n                onClick={handleOnPrefixElementClick}\n              >\n                {prefixElement}\n              </Styled.StyledPrefixElementWrapper>\n            )}\n            <Input\n              $renderAs={renderAs}\n              placeholder={label}\n              ref={inputRef}\n              $size={size}\n              value={value ?? ''}\n              disabled={disabled}\n              onChange={handleOnChange}\n              onKeyDown={handleOnKeyDown}\n            />\n          </FlexView>\n        }\n        siblingElement={value && <Styled.StyledCrossIcon onClick={handleOnClear} />}\n      />\n    </Clickable>\n  );\n};\n\nexport default SearchableInput;\n"],"names":["SearchableInput","props","renderAs","value","disabled","label","width","widthX","shape","size","onSearchTextChange","onPrefixElementClick","onEnter","searchOnClear","analyticsLabel","analyticsProps","prefixElement","inputRef","useRef","handleOnChange","useCallback","e","handleOnKeyDown","handleOnPrefixElementClick","handleOnClear","_a","jsx","Clickable","BaseInput","jsxs","FlexView","Styled.StyledPrefixElementWrapper","Input","Styled.StyledCrossIcon"],"mappings":";;;;;;;AAWM,MAAAA,IAAkB,CAAwBC,MAAyC;AACjF,QAAA;AAAA,IACJ,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,MAAAC,IAAO;AAAA,IACP,oBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,SAAAC;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,eAAAC;AAAA,EACE,IAAAf,GAEEgB,IAAWC,EAAyB,IAAI,GAExCC,IAAiBC;AAAA,IACrB,CAACC,MAAqC;AACjB,MAAAX,EAAAW,EAAE,OAAO,KAAK;AAAA,IACnC;AAAA,IACA,CAACX,CAAkB;AAAA,EAAA,GAGfY,IAAkBF;AAAA,IACtB,CAACC,MAA6C;AACxC,MAAAA,EAAE,QAAQ,YACFT,KAAA,QAAAA;AAAA,IAEd;AAAA,IACA,CAACA,CAAO;AAAA,EAAA,GAGJW,IAA6BH,EAAY,MAAM;AAC5B,IAAAT,KAAA,QAAAA;AAAA,EAAA,GACtB,CAACA,CAAoB,CAAC,GAEnBa,IAAgBJ,EAAY,MAAM;;AACtC,IAAAV,EAAmB,EAAE,GAEjBG,MACFD,KAAA,QAAAA,EAAUC,MAGZY,IAAAR,EAAS,YAAT,QAAAQ,EAAkB;AAAA,EACjB,GAAA,CAACf,GAAoBG,GAAeD,CAAO,CAAC;AAG7C,SAAA,gBAAAc;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAOtB,KAAS;AAAA,MAChB,gBAAAS;AAAA,MACA,gBAAAC;AAAA,MACA,UAAAX;AAAA,MAEA,UAAA,gBAAAsB;AAAA,QAACE;AAAA,QAAA;AAAA,UACC,UAAA1B;AAAA,UACA,MAAAO;AAAA,UACA,OAAAD;AAAA,UACA,UAAAJ;AAAA,UACA,OAAAC;AAAA,UACA,cACE,gBAAAwB;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,gBAAe;AAAA,cACf,aAAY;AAAA,cACZ,SAAQ;AAAA,cACR,UAAU;AAAA,cACV,QAAQxB;AAAA,cACR,SAASC;AAAA,cAER,UAAA;AAAA,gBAAAI,KAAwBK,KACvB,gBAAAU;AAAA,kBAACK;AAAAA,kBAAA;AAAA,oBACC,gBAAgB7B;AAAA,oBAChB,WAAWE;AAAA,oBACX,OAAOK;AAAA,oBACP,SAASc;AAAA,oBAER,UAAAP;AAAA,kBAAA;AAAA,gBACH;AAAA,gBAEF,gBAAAU;AAAA,kBAACM;AAAA,kBAAA;AAAA,oBACC,WAAW9B;AAAA,oBACX,aAAaG;AAAA,oBACb,KAAKY;AAAA,oBACL,OAAOR;AAAA,oBACP,OAAON,KAAS;AAAA,oBAChB,UAAAC;AAAA,oBACA,UAAUe;AAAA,oBACV,WAAWG;AAAA,kBAAA;AAAA,gBACb;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UAEF,gBAAgBnB,KAAS,gBAAAuB,EAACO,GAAA,EAAuB,SAAST,GAAe;AAAA,QAAA;AAAA,MAC3E;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/features/ui/inputs/searchable-select-input/searchable-select-input.js

@@ -0,0 +1,55 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useState as g, useMemo as v, useCallback as i, useEffect as u } from "react";
+import y from "../../../hooks/use-previous.js";
+import I from "../base-select-input/base-select-input.js";
+import O from "./use-filtered-options.js";
+const W = (f) => {
+  const {
+    defaultSearchText: n,
+    controlled: d = !1,
+    options: s,
+    onChange: r,
+    onClear: l,
+    value: t,
+    ...p
+  } = f, [o, a] = g(n), h = y(t), S = v(
+    () => {
+      var e;
+      return o === void 0 && s instanceof Array ? (e = s.find((c) => c.id === t)) == null ? void 0 : e.label : void 0;
+    },
+    [o, s, t]
+  ), m = O(s, o), x = i(() => {
+    l && l();
+  }, [l]), C = i(
+    (e, c) => {
+      a(c.label), r(e, c);
+    },
+    [r]
+  ), T = i(
+    (e) => {
+      a(e), e || r(e, {});
+    },
+    [r]
+  );
+  return u(() => {
+    a(n);
+  }, [n]), u(() => {
+    h && t === void 0 && o && a("");
+  }, [t, a, o, h]), /* @__PURE__ */ b(
+    I,
+    {
+      ...p,
+      value: t,
+      searchable: !0,
+      searchText: d ? n : o ?? S ?? "",
+      onSearchTextChange: T,
+      options: m,
+      onChange: C,
+      onCloseWithoutSelection: x
+    }
+  );
+}, M = W;
+export {
+  M as default
+};
+//# sourceMappingURL=searchable-select-input.js.map

package/dist/features/ui/inputs/searchable-select-input/searchable-select-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchable-select-input.js","sources":["../../../../../src/features/ui/inputs/searchable-select-input/searchable-select-input.tsx"],"sourcesContent":["import type { ISelectOption } from '../base-select-input/base-select-input-types';\nimport type { ISearchableSelectInputProps } from './searchable-select-input-types';\n\nimport { useCallback, useEffect, useMemo, useState } from 'react';\n\nimport usePrevious from '../../../hooks/use-previous';\nimport BaseSelectInput from '../base-select-input/base-select-input';\nimport useFilteredOptions from './use-filtered-options';\n\nconst SearchableSelectInput = <IDType extends string | number>(\n  props: ISearchableSelectInputProps<IDType>,\n): JSX.Element => {\n  const {\n    defaultSearchText,\n    controlled = false,\n    options,\n    onChange,\n    onClear,\n    value,\n    ...rest\n  } = props;\n\n  const [searchText, setSearchText] = useState<undefined | string>(defaultSearchText);\n  const prevValue = usePrevious(value);\n  const label = useMemo(\n    () =>\n      searchText === undefined && options instanceof Array\n        ? options.find(option => option.id === value)?.label\n        : undefined,\n    [searchText, options, value],\n  );\n  const filteredOptions = useFilteredOptions(options, searchText);\n\n  const handleCloseWithoutSelection = useCallback(() => {\n    if (onClear) {\n      onClear();\n    }\n  }, [onClear]);\n\n  const handleChange = useCallback<ISearchableSelectInputProps<IDType>['onChange']>(\n    (id, option) => {\n      setSearchText(option.label);\n      onChange(id, option);\n    },\n    [onChange],\n  );\n\n  const handleSearchText = useCallback(\n    (val: string) => {\n      setSearchText(val);\n\n      if (!val) {\n        onChange(val as IDType, {} as ISelectOption<IDType>);\n      }\n    },\n    [onChange],\n  );\n\n  useEffect(() => {\n    setSearchText(defaultSearchText);\n  }, [defaultSearchText]);\n\n  useEffect(() => {\n    if (prevValue && value === undefined && searchText) {\n      setSearchText('');\n    }\n  }, [value, setSearchText, searchText, prevValue]);\n\n  const displaySearchText = controlled ? defaultSearchText : searchText ?? label ?? '';\n\n  return (\n    <BaseSelectInput<IDType>\n      {...rest}\n      value={value}\n      searchable\n      searchText={displaySearchText}\n      onSearchTextChange={handleSearchText}\n      options={filteredOptions}\n      onChange={handleChange}\n      onCloseWithoutSelection={handleCloseWithoutSelection}\n    />\n  );\n};\n\nexport default SearchableSelectInput;\n"],"names":["SearchableSelectInput","props","defaultSearchText","controlled","options","onChange","onClear","value","rest","searchText","setSearchText","useState","prevValue","usePrevious","label","useMemo","_a","option","filteredOptions","useFilteredOptions","handleCloseWithoutSelection","useCallback","handleChange","id","handleSearchText","val","useEffect","jsx","BaseSelectInput","SearchableSelectInput$1"],"mappings":";;;;;AASA,MAAMA,IAAwB,CAC5BC,MACgB;AACV,QAAA;AAAA,IACJ,mBAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,GAAGC;AAAA,EACD,IAAAP,GAEE,CAACQ,GAAYC,CAAa,IAAIC,EAA6BT,CAAiB,GAC5EU,IAAYC,EAAYN,CAAK,GAC7BO,IAAQC;AAAA,IACZ,MAAA;;AACE,aAAAN,MAAe,UAAaL,aAAmB,SAC3CY,IAAAZ,EAAQ,KAAK,CAAAa,MAAUA,EAAO,OAAOV,CAAK,MAA1C,gBAAAS,EAA6C,QAC7C;AAAA;AAAA,IACN,CAACP,GAAYL,GAASG,CAAK;AAAA,EAAA,GAEvBW,IAAkBC,EAAmBf,GAASK,CAAU,GAExDW,IAA8BC,EAAY,MAAM;AACpD,IAAIf,KACMA;EACV,GACC,CAACA,CAAO,CAAC,GAENgB,IAAeD;AAAA,IACnB,CAACE,GAAIN,MAAW;AACd,MAAAP,EAAcO,EAAO,KAAK,GAC1BZ,EAASkB,GAAIN,CAAM;AAAA,IACrB;AAAA,IACA,CAACZ,CAAQ;AAAA,EAAA,GAGLmB,IAAmBH;AAAA,IACvB,CAACI,MAAgB;AACf,MAAAf,EAAce,CAAG,GAEZA,KACMpB,EAAAoB,GAAe,CAAA,CAA2B;AAAA,IAEvD;AAAA,IACA,CAACpB,CAAQ;AAAA,EAAA;AAGX,SAAAqB,EAAU,MAAM;AACd,IAAAhB,EAAcR,CAAiB;AAAA,EAAA,GAC9B,CAACA,CAAiB,CAAC,GAEtBwB,EAAU,MAAM;AACV,IAAAd,KAAaL,MAAU,UAAaE,KACtCC,EAAc,EAAE;AAAA,KAEjB,CAACH,GAAOG,GAAeD,GAAYG,CAAS,CAAC,GAK9C,gBAAAe;AAAA,IAACC;AAAA,IAAA;AAAA,MACE,GAAGpB;AAAA,MACJ,OAAAD;AAAA,MACA,YAAU;AAAA,MACV,YAPsBJ,IAAaD,IAAoBO,KAAcK,KAAS;AAAA,MAQ9E,oBAAoBU;AAAA,MACpB,SAASN;AAAA,MACT,UAAUI;AAAA,MACV,yBAAyBF;AAAA,IAAA;AAAA,EAAA;AAG/B,GAEAS,IAAe7B;"}

package/dist/features/ui/inputs/searchable-select-input/use-filtered-options.js

@@ -0,0 +1,28 @@
+import { useState as n, useEffect as s } from "react";
+const o = (e, t) => {
+  const [i, f] = n(e instanceof Array ? e : []);
+  return s(() => {
+    (async () => {
+      if (typeof e == "function") {
+        if (t !== void 0)
+          try {
+            const r = await e(t);
+            f(r);
+          } catch {
+          }
+      } else if (e instanceof Array)
+        if (!t)
+          f(e);
+        else {
+          const r = e.filter(
+            ({ label: l }) => l.toLowerCase().includes(t.toLowerCase())
+          );
+          f(r);
+        }
+    })();
+  }, [e, t]), i;
+};
+export {
+  o as default
+};
+//# sourceMappingURL=use-filtered-options.js.map

package/dist/features/ui/inputs/searchable-select-input/use-filtered-options.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-filtered-options.js","sources":["../../../../../src/features/ui/inputs/searchable-select-input/use-filtered-options.ts"],"sourcesContent":["import type { ISearchableSelectInputProps } from './searchable-select-input-types';\n\nimport { useEffect, useState } from 'react';\n\nconst useFilteredOptions = <IDType extends string | number>(\n  options: ISearchableSelectInputProps<IDType>['options'],\n  searchText?: string,\n) => {\n  const [filteredOptions, setFilteredOptions] = useState(options instanceof Array ? options : []);\n\n  useEffect(() => {\n    const filterOptions = async () => {\n      if (typeof options === 'function') {\n        if (searchText !== undefined) {\n          try {\n            const filtered = await options(searchText);\n\n            setFilteredOptions(filtered);\n          } catch (error) {\n            //TODO:SG - Handle error\n          }\n        }\n      } else if (options instanceof Array) {\n        if (!searchText) {\n          setFilteredOptions(options);\n        } else {\n          const filtered = options.filter(({ label }) =>\n            label.toLowerCase().includes(searchText.toLowerCase()),\n          );\n\n          setFilteredOptions(filtered);\n        }\n      }\n    };\n\n    filterOptions();\n  }, [options, searchText]);\n\n  return filteredOptions;\n};\n\nexport default useFilteredOptions;\n"],"names":["useFilteredOptions","options","searchText","filteredOptions","setFilteredOptions","useState","useEffect","filtered","label"],"mappings":";AAIM,MAAAA,IAAqB,CACzBC,GACAC,MACG;AACG,QAAA,CAACC,GAAiBC,CAAkB,IAAIC,EAASJ,aAAmB,QAAQA,IAAU,CAAA,CAAE;AAE9F,SAAAK,EAAU,MAAM;AAyBA,KAxBQ,YAAY;AAC5B,UAAA,OAAOL,KAAY;AACrB,YAAIC,MAAe;AACb,cAAA;AACI,kBAAAK,IAAW,MAAMN,EAAQC,CAAU;AAEzC,YAAAE,EAAmBG,CAAQ;AAAA,kBACb;AAAA,UAEhB;AAAA,iBAEON,aAAmB;AAC5B,YAAI,CAACC;AACH,UAAAE,EAAmBH,CAAO;AAAA,aACrB;AACL,gBAAMM,IAAWN,EAAQ;AAAA,YAAO,CAAC,EAAE,OAAAO,EACjC,MAAAA,EAAM,YAAc,EAAA,SAASN,EAAW,aAAa;AAAA,UAAA;AAGvD,UAAAE,EAAmBG,CAAQ;AAAA,QAC7B;AAAA,IACF;EAGY,GACb,CAACN,GAASC,CAAU,CAAC,GAEjBC;AACT;"}

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

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import o from "../base-select-input/base-select-input.js";
+const r = (t) => /* @__PURE__ */ e(o, { ...t }), c = r;
+export {
+  c as default
+};
+//# sourceMappingURL=select-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-input.js","sources":["../../../../../src/features/ui/inputs/select-input/select-input.tsx"],"sourcesContent":["import type { ISelectInputProps } from './select-input-types';\n\nimport BaseSelectInput from '../base-select-input/base-select-input';\n\nconst SelectInput = <IDType extends string | number>(\n  props: ISelectInputProps<IDType>,\n): JSX.Element => {\n  return <BaseSelectInput<IDType> {...props} />;\n};\n\nexport default SelectInput;\n"],"names":["SelectInput","props","jsx","BaseSelectInput","SelectInput$1"],"mappings":";;AAIA,MAAMA,IAAc,CAClBC,MAEO,gBAAAC,EAACC,GAAyB,EAAA,GAAGF,EAAO,CAAA,GAG7CG,IAAeJ;"}

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

@@ -0,0 +1,68 @@
+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 `
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    padding: 0;
+    outline: none;
+
+    font-family: ${i};
+    font-size: ${a}px;
+    line-height: ${l}px;
+    ${typeof o == "number" ? `letter-spacing: ${o}px;` : ""}
+
+   
+    background-color: ${h};
+    color: ${e[t.inactive]};
+    
+    &::placeholder {
+      color: ${e[n.inactive]};
+      font-family: ${i};
+      font-size: ${a}px;
+      line-height: ${l}px;
+      ${typeof o == "number" ? `letter-spacing: ${o}px;` : ""}
+    }
+
+    &:hover, &:focus {
+      color: ${e[t.active]};
+    }
+
+    &:read-only {
+      cursor: pointer;
+    }
+      
+    &:disabled {
+      color: ${e[t.disabled]};
+      cursor: not-allowed;
+
+      &::placeholder {
+        color: ${e[n.disabled]};
+      }
+    }
+      
+    &:hover:not([disabled, focused])::placeholder {
+      color: ${e[n.active]};
+    }
+
+    &:focus::placeholder {
+      color: transparent;
+    }
+
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    &[type="date"]:not(:placeholder-shown){
+      color: ${e.BLACK_T_60};
+      text-transform: uppercase;
+    }
+  `;
+});
+export {
+  m as Input
+};
+//# sourceMappingURL=text-input-styled.js.map

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

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

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

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

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

@@ -0,0 +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    helperText,\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      helperText={helperText}\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","helperText","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,YAAAG;AAAA,MACA,eAAAD;AAAA,MACA,cACE,gBAAAG;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,UACf,GAAGE;AAAA,QAAA;AAAA,MACN;AAAA,MAEF,gBAAAL;AAAA,IAAA;AAAA,EAAA;AAGN,CAAC,GAEDS,IAAerB;"}