se-design 0.0.129 → 0.0.130

package/dist/components/Input/index.d.ts

@@ -4,6 +4,7 @@ export interface InputProps {
     disabled?: boolean;
     maxLength?: number | undefined;
     onChange: (value: string) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     tag?: string;
     error?: boolean;
     errorMessage?: string;
@@ -12,4 +13,4 @@ export interface InputProps {
     style?: React.CSSProperties;
     inputStyle?: React.CSSProperties;
 }
-export declare function Input({ value, onChange, disabled, maxLength, tag, error, errorMessage, label, placeholder, style, inputStyle }: InputProps): React.JSX.Element;
+export declare function Input({ value, onChange, onBlur, disabled, maxLength, tag, error, errorMessage, label, placeholder, style, inputStyle }: InputProps): React.JSX.Element;

package/dist/index31.js

@@ -24,7 +24,7 @@ function N(e) {
     radioContainerClassName: f = ""
   } = e, n = v(null);
   return /* @__PURE__ */ l.createElement("div", {
-    className: `flex items-start gap-2 ${r ? "cursor-not-allowed" : "cursor-pointer"} bg-[var(--color-white)] border ${o ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] transition-colors duration-300 ${r ? "opacity-50" : ""} ${f}`,
+    className: `flex flex-col justify-center items-start gap-2 ${r ? "cursor-not-allowed" : "cursor-pointer"} bg-[var(--color-white)] border ${o ? "border-[#1088E7]" : "border-[#C9D4E3]"} rounded-[6px] transition-colors duration-300 ${r ? "opacity-50" : ""} ${f}`,
     onClick: () => {
       var c;
       return (c = n.current) == null ? void 0 : c.click();

package/dist/index31.js.map

@@ -1 +1 @@
-{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = ''\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex items-start gap-2 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n    >\n      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', padding: '16px', gap: '6px' }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>\n          <input\n            ref={radioRef}\n            type=\"radio\"\n            id={value}\n            name={name}\n            value={value}\n            checked={checked}\n            disabled={disabled}\n            className=\"cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n            style={{\n              color: '#1088E7',\n              width: '14px',\n              height: '14px',\n              padding: '3px'\n            }}\n            onChange={() => {\n              onChange && onChange({ ...props, checked: true });\n            }}\n          />\n          <label\n            htmlFor={value}\n            className={`${props.helperLabel ? 'flex flex-col gap-[6px]' : ''} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}\n          >\n            <span\n              className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n              style={{ fontSize: '16px', fontWeight: '400' }}\n            >\n              {label}\n            </span>\n          </label>\n        </div>\n\n        {props.helperLabel && (\n          <span\n            className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n            style={{ fontSize: '14px', fontWeight: '400' }}\n          >\n            {props.helperLabel}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","display","flexDirection","padding","gap","alignItems","ref","type","id","color","height","__spreadProps","__spreadValues","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,0BAA0BV,IAAW,uBAAuB,gBAAgB,mCAAmCD,IAAU,qBAAqB,kBAAkB,iDAAiDC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IACnRM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKK,OAAO;AAAA,MAAEX,OAAO;AAAA,MAAQY,SAAS;AAAA,MAAQC,eAAe;AAAA,MAAUC,SAAS;AAAA,MAAQC,KAAK;AAAA,IAAA;AAAA,EAAM,GACjGT,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKK,OAAO;AAAA,MAAEC,SAAS;AAAA,MAAQI,YAAY;AAAA,MAAUD,KAAK;AAAA,IAAA;AAAA,EAAO,GAC/DT,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEW,KAAKd;AAAAA,IACLe,MAAK;AAAA,IACLC,IAAIxB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVI,OAAO;AAAA,MACLS,OAAO;AAAA,MACPpB,OAAO;AAAA,MACPqB,QAAQ;AAAA,MACRP,SAAS;AAAA,IACX;AAAA,IACAf,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASuB,EAAAC,EAAA,IAAK9B,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEkB,SAAS7B;AAAAA,IACTY,WAAW,GAAGd,EAAMgC,cAAc,4BAA4B,EAAE,IAAI5B,IAAW,uBAAuB,gBAAgB;AAAA,EAAA,GAEtHS,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCN,CAAmB;AAAA,IACtEU,OAAO;AAAA,MAAEe,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5CjC,CACG,CACD,CACJ,GAEJD,EAAMgC,eACLnB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAMmC,WAAW,UAAUnC,EAAMmC,QAAQ,MAAM,cAAc;AAAA,IAChHjB,OAAO;AAAA,MAAEe,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5ClC,EAAMgC,WACH,CAEL,CACF;AAET;"}
+{"version":3,"file":"index31.js","sources":["../src/components/Radio/index.tsx"],"sourcesContent":["import React, { useRef } from 'react';\n\nexport interface RadioProps {\n  label: string;\n  value: string;\n  checked: boolean;\n  disabled: boolean;\n  name: string;\n  onChange?: (props: RadioProps) => void;\n  helperLabel?: string;\n  maxWidth?: string;\n  width?: string;\n  radioLabelClassName?: string;\n  radioContainerClassName?: string;\n}\n\nexport function Radio(props: RadioProps) {\n  const {\n    label,\n    value,\n    checked,\n    disabled,\n    name,\n    onChange,\n    width,\n    radioLabelClassName = '',\n    radioContainerClassName = ''\n  } = props;\n  const radioRef = useRef<HTMLInputElement>(null);\n\n  return (\n    <div\n      className={`flex flex-col justify-center items-start gap-2 ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'} bg-[var(--color-white)] border ${checked ? 'border-[#1088E7]' : 'border-[#C9D4E3]'} rounded-[6px] transition-colors duration-300 ${disabled ? 'opacity-50' : ''} ${radioContainerClassName}`}\n      onClick={() => radioRef.current?.click()}\n      style={{ width: width || '20vw' }}\n    >\n      <div style={{ width: '100%', display: 'flex', flexDirection: 'column', padding: '16px', gap: '6px' }}>\n        <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>\n          <input\n            ref={radioRef}\n            type=\"radio\"\n            id={value}\n            name={name}\n            value={value}\n            checked={checked}\n            disabled={disabled}\n            className=\"cursor-pointer accent-[#1088E7] disabled:cursor-not-allowed disabled:opacity-50\"\n            style={{\n              color: '#1088E7',\n              width: '14px',\n              height: '14px',\n              padding: '3px'\n            }}\n            onChange={() => {\n              onChange && onChange({ ...props, checked: true });\n            }}\n          />\n          <label\n            htmlFor={value}\n            className={`${props.helperLabel ? 'flex flex-col gap-[6px]' : ''} ${disabled ? 'cursor-not-allowed' : 'cursor-pointer'}`}\n          >\n            <span\n              className={`text-sm text-[var(--color-gray-800)] ${radioLabelClassName} `}\n              style={{ fontSize: '16px', fontWeight: '400' }}\n            >\n              {label}\n            </span>\n          </label>\n        </div>\n\n        {props.helperLabel && (\n          <span\n            className={`text-xs text-[var(--color-gray-600)] ${props.maxWidth ? `max-w-[${props.maxWidth}]` : 'max-w-[20vw]'} break-words whitespace-normal`}\n            style={{ fontSize: '14px', fontWeight: '400' }}\n          >\n            {props.helperLabel}\n          </span>\n        )}\n      </div>\n    </div>\n  );\n}\n"],"names":["Radio","props","label","value","checked","disabled","name","onChange","width","radioLabelClassName","radioContainerClassName","radioRef","useRef","React","createElement","className","onClick","current","click","style","display","flexDirection","padding","gap","alignItems","ref","type","id","color","height","__spreadProps","__spreadValues","htmlFor","helperLabel","fontSize","fontWeight","maxWidth"],"mappings":";;;;;;;;;;;;;AAgBO,SAASA,EAAMC,GAAmB;AACjC,QAAA;AAAA,IACJC,OAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,MAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,OAAAA;AAAAA,IACAC,qBAAAA,IAAsB;AAAA,IACtBC,yBAAAA,IAA0B;AAAA,EAAA,IACxBT,GACEU,IAAWC,EAAyB,IAAI;AAG5CC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IACEC,WAAW,kDAAkDV,IAAW,uBAAuB,gBAAgB,mCAAmCD,IAAU,qBAAqB,kBAAkB,iDAAiDC,IAAW,eAAe,EAAE,IAAIK,CAAuB;AAAA,IAC3SM,SAASA,MAAML;;AAAAA,cAAAA,IAAAA,EAASM,YAATN,gBAAAA,EAAkBO;AAAAA;AAAAA,IACjCC,OAAO;AAAA,MAAEX,OAAOA,KAAS;AAAA,IAAA;AAAA,EAAO,GAEhCM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKK,OAAO;AAAA,MAAEX,OAAO;AAAA,MAAQY,SAAS;AAAA,MAAQC,eAAe;AAAA,MAAUC,SAAS;AAAA,MAAQC,KAAK;AAAA,IAAA;AAAA,EAAM,GACjGT,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKK,OAAO;AAAA,MAAEC,SAAS;AAAA,MAAQI,YAAY;AAAA,MAAUD,KAAK;AAAA,IAAA;AAAA,EAAO,GAC/DT,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEW,KAAKd;AAAAA,IACLe,MAAK;AAAA,IACLC,IAAIxB;AAAAA,IACJG,MAAAA;AAAAA,IACAH,OAAAA;AAAAA,IACAC,SAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAU,WAAU;AAAA,IACVI,OAAO;AAAA,MACLS,OAAO;AAAA,MACPpB,OAAO;AAAA,MACPqB,QAAQ;AAAA,MACRP,SAAS;AAAA,IACX;AAAA,IACAf,UAAUA,MAAM;AACdA,MAAAA,KAAYA,EAASuB,EAAAC,EAAA,IAAK9B,IAAL;AAAA,QAAYG,SAAS;AAAA,MAAA,EAAM;AAAA,IAAA;AAAA,EAClD,CACD,GACDU,gBAAAA,EAAAA,cAAA,SAAA;AAAA,IACEkB,SAAS7B;AAAAA,IACTY,WAAW,GAAGd,EAAMgC,cAAc,4BAA4B,EAAE,IAAI5B,IAAW,uBAAuB,gBAAgB;AAAA,EAAA,GAEtHS,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCN,CAAmB;AAAA,IACtEU,OAAO;AAAA,MAAEe,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5CjC,CACG,CACD,CACJ,GAEJD,EAAMgC,eACLnB,gBAAAA,EAAAA,cAAA,QAAA;AAAA,IACEC,WAAW,wCAAwCd,EAAMmC,WAAW,UAAUnC,EAAMmC,QAAQ,MAAM,cAAc;AAAA,IAChHjB,OAAO;AAAA,MAAEe,UAAU;AAAA,MAAQC,YAAY;AAAA,IAAA;AAAA,EAAM,GAE5ClC,EAAMgC,WACH,CAEL,CACF;AAET;"}

package/dist/index32.js

@@ -1,40 +1,40 @@
 var d = Object.defineProperty, m = Object.defineProperties;
 var f = Object.getOwnPropertyDescriptors;
-var l = Object.getOwnPropertySymbols;
-var g = Object.prototype.hasOwnProperty, s = Object.prototype.propertyIsEnumerable;
-var o = (n, a, e) => a in n ? d(n, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[a] = e, c = (n, a) => {
+var c = Object.getOwnPropertySymbols;
+var s = Object.prototype.hasOwnProperty, g = Object.prototype.propertyIsEnumerable;
+var o = (n, a, e) => a in n ? d(n, a, { enumerable: !0, configurable: !0, writable: !0, value: e }) : n[a] = e, u = (n, a) => {
   for (var e in a || (a = {}))
-    g.call(a, e) && o(n, e, a[e]);
-  if (l)
-    for (var e of l(a))
-      s.call(a, e) && o(n, e, a[e]);
+    s.call(a, e) && o(n, e, a[e]);
+  if (c)
+    for (var e of c(a))
+      g.call(a, e) && o(n, e, a[e]);
   return n;
-}, u = (n, a) => m(n, f(a));
-import i from "react";
+}, i = (n, a) => m(n, f(a));
+import r from "react";
 import { Radio as h } from "./index31.js";
-function t() {
-  return t = Object.assign ? Object.assign.bind() : function(n) {
+function l() {
+  return l = Object.assign ? Object.assign.bind() : function(n) {
     for (var a = 1; a < arguments.length; a++) {
       var e = arguments[a];
-      for (var r in e) ({}).hasOwnProperty.call(e, r) && (n[r] = e[r]);
+      for (var t in e) ({}).hasOwnProperty.call(e, t) && (n[t] = e[t]);
     }
     return n;
-  }, t.apply(null, arguments);
+  }, l.apply(null, arguments);
 }
 function b(n) {
   const a = (e) => {
-    n.onRadioGroupChange(u(c({}, e), {
+    n.onRadioGroupChange(i(u({}, e), {
       checked: !0
     }));
   };
-  return /* @__PURE__ */ i.createElement("div", {
+  return /* @__PURE__ */ r.createElement("div", null, /* @__PURE__ */ r.createElement("fieldset", {
     className: `flex gap-2 ${n.direction === "column" ? "flex-col" : "flex-row"}`
-  }, n.options.map((e) => /* @__PURE__ */ i.createElement(h, t({
+  }, n.options.map((e) => /* @__PURE__ */ r.createElement(h, l({
     key: e.value
   }, e, {
     onChange: a,
     checked: e.value === n.value
-  }))));
+  })))));
 }
 export {
   b as RadioGroup

package/dist/index32.js.map

@@ -1 +1 @@
-{"version":3,"file":"index32.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n  options: RadioProps[];\n  onRadioGroupChange: (obj: RadioProps) => void;\n  value?: string;\n  direction?: 'row' | 'column';\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  return (\n    <div className={`flex gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`}>\n      {props.options.map((option) => (\n        <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} />\n      ))}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","handleRadioChange","obj","onRadioGroupChange","__spreadProps","__spreadValues","checked","React","createElement","className","direction","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAWC,GAAwB;AAC3CC,QAAAA,IAAoBA,CAACC,MAAoB;AAC7CF,IAAAA,EAAMG,mBAAmBC,EAAAC,EAAA,IAAKH,IAAL;AAAA,MAAUI,SAAS;AAAA,IAAA,EAAM;AAAA,EACpD;AAEEC,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAW,cAAcT,EAAMU,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GACjFV,EAAMW,QAAQC,IAAKC,OAClBL,gBAAAA,EAAAA,cAACM,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUjB;AAAAA,IAAmBK,SAASO,EAAOI,UAAUjB,EAAMiB;AAAAA,EAAQ,CAAA,CAAA,CAC5G,CACE;AAET;"}
+{"version":3,"file":"index32.js","sources":["../src/components/RadioGroup/index.tsx"],"sourcesContent":["import React from 'react';\nimport { Radio, RadioProps } from '../Radio';\n\nexport interface RadioGroupProps {\n  options: RadioProps[];\n  onRadioGroupChange: (obj: RadioProps) => void;\n  value?: string;\n  direction?: 'row' | 'column';\n}\n\nexport function RadioGroup(props: RadioGroupProps) {\n  const handleRadioChange = (obj: RadioProps) => {\n    props.onRadioGroupChange({ ...obj, checked: true });\n  };\n  return (\n    <div>\n      <fieldset className={`flex gap-2 ${props.direction === 'column' ? 'flex-col' : 'flex-row'}`}>\n        {props.options.map((option) => (\n          <Radio key={option.value} {...option} onChange={handleRadioChange} checked={option.value === props.value} />\n        ))}\n      </fieldset>\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","handleRadioChange","obj","onRadioGroupChange","__spreadProps","__spreadValues","checked","createElement","React","className","direction","options","map","option","Radio","_extends","key","value","onChange"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAUO,SAASA,EAAWC,GAAwB;AAC3CC,QAAAA,IAAoBA,CAACC,MAAoB;AAC7CF,IAAAA,EAAMG,mBAAmBC,EAAAC,EAAA,IAAKH,IAAL;AAAA,MAAUI,SAAS;AAAA,IAAA,EAAM;AAAA,EACpD;AACA,2BACEC,cACEC,OAAAA,MAAAA,gBAAAA,EAAAD,cAAA,YAAA;AAAA,IAAUE,WAAW,cAAcT,EAAMU,cAAc,WAAW,aAAa,UAAU;AAAA,EAAA,GACtFV,EAAMW,QAAQC,IAAKC,OAClBN,gBAAAA,EAAAA,cAACO,GAAKC,EAAA;AAAA,IAACC,KAAKH,EAAOI;AAAAA,KAAWJ,GAAM;AAAA,IAAEK,UAAUjB;AAAAA,IAAmBK,SAASO,EAAOI,UAAUjB,EAAMiB;AAAAA,EAAAA,CAAQ,CAAA,CAC5G,CACO,CACP;AAET;"}

package/dist/index37.js

@@ -1,41 +1,43 @@
 import e from "react";
 /* empty css         */
-function f({
+function w({
   value: n,
   onChange: i,
+  onBlur: m,
   disabled: r,
   maxLength: t,
-  tag: m,
+  tag: o,
   error: a,
-  errorMessage: o,
+  errorMessage: s,
   label: c,
-  placeholder: s,
-  style: d,
-  inputStyle: l
+  placeholder: d,
+  style: l,
+  inputStyle: p
 }) {
-  const p = m || "input";
+  const u = o || "input";
   return /* @__PURE__ */ e.createElement("div", {
     className: "input-main-container",
-    style: d
+    style: l
   }, c && /* @__PURE__ */ e.createElement("div", {
     className: "label-container"
-  }, c), /* @__PURE__ */ e.createElement(p, {
+  }, c), /* @__PURE__ */ e.createElement(u, {
     value: n,
-    onChange: (u) => i(u.target.value),
+    onChange: (E) => i(E.target.value),
+    onBlur: m,
     disabled: r,
     className: `${a ? "input-container-error" : "input-container-default"} ${r ? "input-container-disabled" : ""}`,
     maxLength: t || void 0,
-    placeholder: s,
-    style: l
+    placeholder: d,
+    style: p
   }), /* @__PURE__ */ e.createElement("div", {
     className: `${a ? "error-and-max-word" : "max-word-container"}`
   }, a && /* @__PURE__ */ e.createElement("div", {
     className: "error-message"
-  }, o), t && /* @__PURE__ */ e.createElement("div", {
+  }, s), t && /* @__PURE__ */ e.createElement("div", {
     className: "max-word"
   }, t && (n == null ? void 0 : n.length) + "/" + t)));
 }
 export {
-  f as Input
+  w as Input
 };
 //# sourceMappingURL=index37.js.map

package/dist/index37.js.map

@@ -1 +1 @@
-{"version":3,"file":"index37.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n  value,\n  onChange,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"input-main-container\" style={style}>\n      {label && <div className=\"label-container\">{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxLength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n        {error && <div className=\"error-message\">{errorMessage}</div>}\n        {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","undefined","length"],"mappings":"AAiBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAuBL,OAAAA;AAAAA,EACnCF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BX,OAAAA;AAAAA,IACAC,UAAUA,CAACc,MAA2Cd,EAASc,EAAEC,OAAOhB,KAAK;AAAA,IAC7EE,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHC,WAAWA,KAAwBc;AAAAA,IACnCT,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaH,KAAAA,gBAAAA,EAAOkB,UAAS,MAAMf,CAAe,CACxF,CACF;AAET;"}
+{"version":3,"file":"index37.js","sources":["../src/components/Input/index.tsx"],"sourcesContent":["import React from 'react';\nimport './style.scss';\n\nexport interface InputProps {\n  value: string;\n  disabled?: boolean;\n  maxLength?: number | undefined;\n  onChange: (value: string) => void;\n  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;\n  tag?: string;\n  error?: boolean;\n  errorMessage?: string;\n  label?: string;\n  placeholder?: string;\n  style?: React.CSSProperties;\n  inputStyle?: React.CSSProperties;\n}\n\nexport function Input({\n  value,\n  onChange,\n  onBlur,\n  disabled,\n  maxLength,\n  tag,\n  error,\n  errorMessage,\n  label,\n  placeholder,\n  style,\n  inputStyle\n}: InputProps) {\n  const Element = tag || 'input';\n\n  return (\n    <div className=\"input-main-container\" style={style}>\n      {label && <div className=\"label-container\">{label}</div>}\n      {React.createElement(Element, {\n        value,\n        onChange: (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value),\n        onBlur,\n        disabled,\n        className: `${error ? 'input-container-error' : 'input-container-default'} ${disabled ? 'input-container-disabled' : ''}`,\n        maxLength: maxLength ? maxLength : undefined,\n        placeholder: placeholder,\n        style: inputStyle\n      })}\n      <div className={`${error ? 'error-and-max-word' : 'max-word-container'}`}>\n        {error && <div className=\"error-message\">{errorMessage}</div>}\n        {maxLength && <div className=\"max-word\">{maxLength && value?.length + '/' + maxLength}</div>}\n      </div>\n    </div>\n  );\n}\n"],"names":["React__default","Input","value","onChange","onBlur","disabled","maxLength","tag","error","errorMessage","label","placeholder","style","inputStyle","Element","React","createElement","className","e","target","undefined","length"],"mappings":"AAkBO,OAAAA,OAAA;AAAA,OAAA;AAAA,SAASC,EAAM;AAAA,EACpBC,OAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,YAAAA;AACU,GAAG;AACb,QAAMC,IAAUP,KAAO;AAGrBQ,SAAAA,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,IAAuBL,OAAAA;AAAAA,EACnCF,GAAAA,KAASM,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAmBP,GAAAA,CAAW,GACtDK,gBAAAA,EAAMC,cAAcF,GAAS;AAAA,IAC5BZ,OAAAA;AAAAA,IACAC,UAAUA,CAACe,MAA2Cf,EAASe,EAAEC,OAAOjB,KAAK;AAAA,IAC7EE,QAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAY,WAAW,GAAGT,IAAQ,0BAA0B,yBAAyB,IAAIH,IAAW,6BAA6B,EAAE;AAAA,IACvHC,WAAWA,KAAwBc;AAAAA,IACnCT,aAAAA;AAAAA,IACAC,OAAOC;AAAAA,EAAAA,CACR,GACDG,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAW,GAAGT,IAAQ,uBAAuB,oBAAoB;AAAA,EACnEA,GAAAA,KAASQ,gBAAAA,EAAAA,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,KAAiBR,CAAkB,GAC3DH,KAAaS,gBAAAA,EAAAC,cAAA,OAAA;AAAA,IAAKC,WAAU;AAAA,EAAA,GAAYX,MAAaJ,KAAAA,gBAAAA,EAAOmB,UAAS,MAAMf,CAAe,CACxF,CACF;AAET;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "se-design",
-  "version": "0.0.129",
+  "version": "0.0.130",
   "type": "module",
   "module": "dist/index.js",
   "exports": {