mimir-ui-kit 1.27.5 → 1.27.6

package/dist/{Input-6mudFqTb.js → Input-ChCIy5oY.js}

@@ -5,36 +5,37 @@ import { EInputVariant } from "./components/Input/constants.js";
 import { useMergeRefs } from "./hooks/useMergeRefs/useMergeRefs.js";
 import { Icon } from "./icons/Icon.js";
 import { Button } from "./components/Button/Button.js";
-import './assets/Input.css';const label = "_label_1oj7p_16";
-const input = "_input_1oj7p_3";
-const focused = "_focused_1oj7p_65";
-const disabled = "_disabled_1oj7p_71";
-const clear = "_clear_1oj7p_104";
-const s = "_s_1oj7p_152";
-const m = "_m_1oj7p_167";
-const l = "_l_1oj7p_16";
-const success = "_success_1oj7p_224";
-const alarm = "_alarm_1oj7p_242";
-const error = "_error_1oj7p_260";
+import './assets/Input.css';const label = "_label_ed5ll_27";
+const input = "_input_ed5ll_3";
+const focused = "_focused_ed5ll_82";
+const disabled = "_disabled_ed5ll_88";
+const clear = "_clear_ed5ll_121";
+const s = "_s_ed5ll_169";
+const m = "_m_ed5ll_184";
+const l = "_l_ed5ll_27";
+const success = "_success_ed5ll_241";
+const alarm = "_alarm_ed5ll_259";
+const error = "_error_ed5ll_277";
 const cls = {
-  "input-wrapper": "_input-wrapper_1oj7p_3",
+  "input-wrapper": "_input-wrapper_ed5ll_3",
+  "required-mark": "_required-mark_ed5ll_17",
   label,
-  "has-left-slot": "_has-left-slot_1oj7p_29",
-  "active-label": "_active-label_1oj7p_32",
+  "has-left-slot": "_has-left-slot_ed5ll_42",
+  "active-label": "_active-label_ed5ll_45",
   input,
-  "has-right-slot": "_has-right-slot_1oj7p_62",
+  "has-right-slot": "_has-right-slot_ed5ll_79",
   focused,
-  "has-label": "_has-label_1oj7p_68",
+  "has-label": "_has-label_ed5ll_85",
   disabled,
-  "left-slot": "_left-slot_1oj7p_77",
-  "right-slot": "_right-slot_1oj7p_78",
-  "addon-icon": "_addon-icon_1oj7p_100",
+  "left-slot": "_left-slot_ed5ll_94",
+  "right-slot": "_right-slot_ed5ll_95",
+  "addon-icon": "_addon-icon_ed5ll_117",
   clear,
   s,
   m,
   l,
-  "default-gray": "_default-gray_1oj7p_197",
-  "default-white": "_default-white_1oj7p_209",
+  "default-gray": "_default-gray_ed5ll_214",
+  "default-white": "_default-white_ed5ll_226",
   success,
   alarm,
   error
@@ -92,6 +93,7 @@ const Input = memo(
         leftAddon,
         size = "m",
         numbersOnly,
+        required,
         maxLength,
         ...otherProps
       } = props;
@@ -173,7 +175,10 @@ const Input = memo(
             wrapperClassName
           ),
           children: [
-            label2 && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label2 }),
+            label2 && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: labelClassNames, children: [
+              label2,
+              required && (withValue || isFocused) && /* @__PURE__ */ jsx("span", { className: cls["required-mark"] })
+            ] }),
             currentLeftAddon && /* @__PURE__ */ jsx(
               "span",
               {
@@ -198,6 +203,7 @@ const Input = memo(
                 onChange: handleChange,
                 maxLength,
                 disabled: disabled2,
+                required,
                 ...otherProps
               }
             ),
@@ -211,6 +217,7 @@ const Input = memo(
                 children: currentRightAddon
               }
             ),
+            required && !withValue && !isFocused && /* @__PURE__ */ jsx("span", { className: cls["required-mark"] }),
             withClearButton && withValue && /* @__PURE__ */ jsx(
               Button,
               {

package/dist/assets/Input.css

@@ -1 +1 @@
-._input-wrapper_1oj7p_3{--input-border-radius-l: 8px;--input-border-radius-m: 6px;--input-border-radius-s: 6px;position:relative;display:flex;padding:0 var(--space-m);overflow:hidden;background-color:var(--input-bg-color);border-bottom:1px solid transparent;border-radius:var(--input-border-radius);transition:background-color .2s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease}._input-wrapper_1oj7p_3 ._label_1oj7p_16{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_1oj7p_3 ._label_1oj7p_16._has-left-slot_1oj7p_29{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._input-wrapper_1oj7p_3 ._label_1oj7p_16._active-label_1oj7p_32{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_1oj7p_3 ._label_1oj7p_16._active-label_1oj7p_32._has-left-slot_1oj7p_29{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--input-font-size) * -1))}._input-wrapper_1oj7p_3 ._input_1oj7p_3{position:relative;display:block;flex:1;width:100%;min-width:0;height:var(--input-height);color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;background-color:inherit;border-radius:var(--input-border-radius);outline:none;cursor:var(--input-cursor);transition:border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-feature-settings:"zero"}._input-wrapper_1oj7p_3 ._input_1oj7p_3._has-left-slot_1oj7p_29{padding-left:0}._input-wrapper_1oj7p_3 ._input_1oj7p_3._has-right-slot_1oj7p_62{padding-right:0}._input-wrapper_1oj7p_3 ._input_1oj7p_3._focused_1oj7p_65{padding-top:0}._input-wrapper_1oj7p_3 ._input_1oj7p_3._has-label_1oj7p_68{padding-top:var(--input-padding-position)}._input-wrapper_1oj7p_3 ._input_1oj7p_3._disabled_1oj7p_71{color:var(--light-text)}._input-wrapper_1oj7p_3 ._input_1oj7p_3._disabled_1oj7p_71:hover,._input-wrapper_1oj7p_3 ._input_1oj7p_3._disabled_1oj7p_71:active,._input-wrapper_1oj7p_3 ._input_1oj7p_3._disabled_1oj7p_71:focus{color:var(--light-text)}._input-wrapper_1oj7p_3 ._left-slot_1oj7p_77,._input-wrapper_1oj7p_3 ._right-slot_1oj7p_78{display:flex;align-items:center;height:var(--input-height);color:var(--black-60);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);background-color:inherit;transition:padding-top .15s ease-out}._input-wrapper_1oj7p_3 ._left-slot_1oj7p_77._focused_1oj7p_65._has-label_1oj7p_68,._input-wrapper_1oj7p_3 ._right-slot_1oj7p_78._focused_1oj7p_65._has-label_1oj7p_68{padding-top:var(--input-padding-position)}._input-wrapper_1oj7p_3 ._left-slot_1oj7p_77{justify-content:flex-end;margin-right:var(--clear-button-mg)}._input-wrapper_1oj7p_3 ._right-slot_1oj7p_78{margin-left:var(--clear-button-mg)}._input-wrapper_1oj7p_3 ._addon-icon_1oj7p_100{width:var(--icon-size);height:var(--icon-size)}._input-wrapper_1oj7p_3 ._clear_1oj7p_104{align-self:center;width:16px;height:16px;margin-left:var(--clear-button-mg)}._input-wrapper_1oj7p_3 svg{color:currentcolor;fill:currentcolor}._input-wrapper_1oj7p_3:hover ._label_1oj7p_16,._input-wrapper_1oj7p_3:focus-within ._label_1oj7p_16{color:var(--label-color)}._input-wrapper_1oj7p_3:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_1oj7p_3:focus-within{background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._input-wrapper_1oj7p_3._focused_1oj7p_65{color:var(--input-color-active);background-color:var(--input-bg-color-active)}._input-wrapper_1oj7p_3._focused_1oj7p_65:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_1oj7p_3._disabled_1oj7p_71{--input-cursor: not-allowed;--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border-bottom:1px solid transparent}._input-wrapper_1oj7p_3._disabled_1oj7p_71:hover,._input-wrapper_1oj7p_3._disabled_1oj7p_71:active,._input-wrapper_1oj7p_3._disabled_1oj7p_71:focus{--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border-bottom:1px solid transparent;box-shadow:none}._input-wrapper_1oj7p_3._disabled_1oj7p_71::-moz-placeholder{color:var(--light-text)}._input-wrapper_1oj7p_3._disabled_1oj7p_71::placeholder{color:var(--light-text)}._input-wrapper_1oj7p_3._disabled_1oj7p_71:hover::-moz-placeholder{color:var(--light-text)}._input-wrapper_1oj7p_3._disabled_1oj7p_71:hover::placeholder{color:var(--light-text)}._s_1oj7p_152{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-m);--input-line-height: var(--line-height-text-xs);--input-padding: var(--space-m);--input-padding-position: var(--space-1xs);--input-border-radius: var(--input-border-radius-s);--label-font-size: var(--size-text-xs);--label-scaled: .85;--label-spacing: var(--space-1xs);--clear-button-mg: var(--space-2xs);--icon-size: 16px;--left-addon-position: 0px}._m_1oj7p_167{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-l);--input-line-height: var(--line-height-text-s1);--input-padding: var(--space-m);--input-padding-position: var(--space-xs);--input-border-radius: var(--input-border-radius-m);--label-font-size: var(--size-text-s);--label-scaled: .75;--label-spacing: var(--space-xs);--clear-button-mg: var(--space-2xs);--icon-size: 16px;--left-addon-position: var(--space-3xs)}._l_1oj7p_16{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-line-height: var(--line-height-text-l);--input-padding: var(--space-m);--input-padding-position: var(--space-s);--input-border-radius: var(--input-border-radius-l);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-s);--clear-button-mg: var(--space-xs);--icon-size: 24px;--left-addon-position: var(--space-s)}._default-gray_1oj7p_197{--input-bg-color: var(--black-5);--input-bg-color-active: var(--black-10);--input-bg-color-hover: var(--black-10);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_1oj7p_209{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-10);--input-bg-color-active: var(--white);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_1oj7p_209:hover{--label-color: var(--dark-text)}._success_1oj7p_224{--input-bg-color: var(--success-normal);--input-bg-color-hover: var(--success-bg-hover);--input-bg-color-active: var(--success-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--success-normal);--label-color: var(--black-60)}._success_1oj7p_224::-moz-placeholder{color:var(--input-color)}._success_1oj7p_224::placeholder{color:var(--input-color)}._success_1oj7p_224:hover::-moz-placeholder{color:var(--input-color)}._success_1oj7p_224:hover::placeholder{color:var(--input-color)}._alarm_1oj7p_242{--input-bg-color: var(--alarm-normal);--input-bg-color-hover: var(--alarm-bg-hover);--input-bg-color-active: var(--alarm-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--alarm-normal);--label-color: var(--black-60)}._alarm_1oj7p_242::-moz-placeholder{color:var(--input-color)}._alarm_1oj7p_242::placeholder{color:var(--input-color)}._alarm_1oj7p_242:hover::-moz-placeholder{color:var(--input-color)}._alarm_1oj7p_242:hover::placeholder{color:var(--input-color)}._error_1oj7p_260{--input-bg-color: var(--error-normal);--input-bg-color-hover: var(--error-bg-hover);--input-bg-color-active: var(--error-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--error-normal);--label-color: var(--black-60)}._error_1oj7p_260::-moz-placeholder{color:var(--input-color)}._error_1oj7p_260::placeholder{color:var(--input-color)}._error_1oj7p_260:hover::-moz-placeholder{color:var(--input-color)}._error_1oj7p_260:hover::placeholder{color:var(--input-color)}
+._input-wrapper_ed5ll_3{--input-border-radius-l: 8px;--input-border-radius-m: 6px;--input-border-radius-s: 6px;--input-required-mark-size: 8px;position:relative;display:flex;padding:0 var(--space-m);overflow:hidden;background-color:var(--input-bg-color);border-bottom:1px solid transparent;border-radius:var(--input-border-radius);transition:background-color .2s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease}._input-wrapper_ed5ll_3 ._required-mark_ed5ll_17{display:block;flex:0 0 var(--input-required-mark-size);align-self:center;width:var(--input-required-mark-size);height:var(--input-required-mark-size);margin-left:var(--space-m);background-color:var(--citrine-normal);border-radius:50%}._input-wrapper_ed5ll_3 ._label_ed5ll_27{--input-required-mark-size: 6px;position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:flex;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;-moz-column-gap:var(--space-xs);column-gap:var(--space-xs);transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_ed5ll_3 ._label_ed5ll_27._has-left-slot_ed5ll_42{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._input-wrapper_ed5ll_3 ._label_ed5ll_27._active-label_ed5ll_45{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_ed5ll_3 ._label_ed5ll_27._active-label_ed5ll_45._has-left-slot_ed5ll_42{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--input-font-size) * -1))}._input-wrapper_ed5ll_3 ._label_ed5ll_27._active-label_ed5ll_45 ._required-mark_ed5ll_17{margin-left:0;transform:scale(1.7)}._input-wrapper_ed5ll_3 ._input_ed5ll_3{position:relative;display:block;flex:1;width:100%;min-width:0;height:var(--input-height);color:var(--dark-text);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;background-color:inherit;border-radius:var(--input-border-radius);outline:none;cursor:var(--input-cursor);transition:border-color .15s ease,box-shadow .15s ease,color .15s ease,fill .15s ease;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-feature-settings:"zero"}._input-wrapper_ed5ll_3 ._input_ed5ll_3._has-left-slot_ed5ll_42{padding-left:0}._input-wrapper_ed5ll_3 ._input_ed5ll_3._has-right-slot_ed5ll_79{padding-right:0}._input-wrapper_ed5ll_3 ._input_ed5ll_3._focused_ed5ll_82{padding-top:0}._input-wrapper_ed5ll_3 ._input_ed5ll_3._has-label_ed5ll_85{padding-top:var(--input-padding-position)}._input-wrapper_ed5ll_3 ._input_ed5ll_3._disabled_ed5ll_88{color:var(--light-text)}._input-wrapper_ed5ll_3 ._input_ed5ll_3._disabled_ed5ll_88:hover,._input-wrapper_ed5ll_3 ._input_ed5ll_3._disabled_ed5ll_88:active,._input-wrapper_ed5ll_3 ._input_ed5ll_3._disabled_ed5ll_88:focus{color:var(--light-text)}._input-wrapper_ed5ll_3 ._left-slot_ed5ll_94,._input-wrapper_ed5ll_3 ._right-slot_ed5ll_95{display:flex;align-items:center;height:var(--input-height);color:var(--black-60);font-size:var(--input-font-size);font-family:var(--font-inter);line-height:var(--input-line-height);background-color:inherit;transition:padding-top .15s ease-out}._input-wrapper_ed5ll_3 ._left-slot_ed5ll_94._focused_ed5ll_82._has-label_ed5ll_85,._input-wrapper_ed5ll_3 ._right-slot_ed5ll_95._focused_ed5ll_82._has-label_ed5ll_85{padding-top:var(--input-padding-position)}._input-wrapper_ed5ll_3 ._left-slot_ed5ll_94{justify-content:flex-end;margin-right:var(--clear-button-mg)}._input-wrapper_ed5ll_3 ._right-slot_ed5ll_95{margin-left:var(--clear-button-mg)}._input-wrapper_ed5ll_3 ._addon-icon_ed5ll_117{width:var(--icon-size);height:var(--icon-size)}._input-wrapper_ed5ll_3 ._clear_ed5ll_121{align-self:center;width:16px;height:16px;margin-left:var(--clear-button-mg)}._input-wrapper_ed5ll_3 svg{color:currentcolor;fill:currentcolor}._input-wrapper_ed5ll_3:hover ._label_ed5ll_27,._input-wrapper_ed5ll_3:focus-within ._label_ed5ll_27{color:var(--label-color)}._input-wrapper_ed5ll_3:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_ed5ll_3:focus-within{background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._input-wrapper_ed5ll_3._focused_ed5ll_82{color:var(--input-color-active);background-color:var(--input-bg-color-active)}._input-wrapper_ed5ll_3._focused_ed5ll_82:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_ed5ll_3._disabled_ed5ll_88{--input-cursor: not-allowed;--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border-bottom:1px solid transparent}._input-wrapper_ed5ll_3._disabled_ed5ll_88:hover,._input-wrapper_ed5ll_3._disabled_ed5ll_88:active,._input-wrapper_ed5ll_3._disabled_ed5ll_88:focus{--label-color: var(--light-text);color:var(--light-text);background-color:var(--black-20);border-bottom:1px solid transparent;box-shadow:none}._input-wrapper_ed5ll_3._disabled_ed5ll_88::-moz-placeholder{color:var(--light-text)}._input-wrapper_ed5ll_3._disabled_ed5ll_88::placeholder{color:var(--light-text)}._input-wrapper_ed5ll_3._disabled_ed5ll_88:hover::-moz-placeholder{color:var(--light-text)}._input-wrapper_ed5ll_3._disabled_ed5ll_88:hover::placeholder{color:var(--light-text)}._s_ed5ll_169{--input-height: var(--space-xxl);--input-font-size: var(--control-text-size-m);--input-line-height: var(--line-height-text-xs);--input-padding: var(--space-m);--input-padding-position: var(--space-1xs);--input-border-radius: var(--input-border-radius-s);--label-font-size: var(--size-text-xs);--label-scaled: .85;--label-spacing: var(--space-1xs);--clear-button-mg: var(--space-2xs);--icon-size: 16px;--left-addon-position: 0px}._m_ed5ll_184{--input-height: var(--space-4xl);--input-font-size: var(--control-text-size-l);--input-line-height: var(--line-height-text-s1);--input-padding: var(--space-m);--input-padding-position: var(--space-xs);--input-border-radius: var(--input-border-radius-m);--label-font-size: var(--size-text-s);--label-scaled: .75;--label-spacing: var(--space-xs);--clear-button-mg: var(--space-2xs);--icon-size: 16px;--left-addon-position: var(--space-3xs)}._l_ed5ll_27{--input-height: var(--space-4xxl);--input-font-size: var(--control-text-size-2xl);--input-line-height: var(--line-height-text-l);--input-padding: var(--space-m);--input-padding-position: var(--space-s);--input-border-radius: var(--input-border-radius-l);--label-font-size: var(--size-text-s);--label-scaled: .6;--label-spacing: var(--space-s);--clear-button-mg: var(--space-xs);--icon-size: 24px;--left-addon-position: var(--space-s)}._default-gray_ed5ll_214{--input-bg-color: var(--black-5);--input-bg-color-active: var(--black-10);--input-bg-color-hover: var(--black-10);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_ed5ll_226{--input-bg-color: var(--white);--input-bg-color-hover: var(--black-10);--input-bg-color-active: var(--white);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--citrine-normal);--label-color: var(--black-60)}._default-white_ed5ll_226:hover{--label-color: var(--dark-text)}._success_ed5ll_241{--input-bg-color: var(--success-normal);--input-bg-color-hover: var(--success-bg-hover);--input-bg-color-active: var(--success-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--success-normal);--label-color: var(--black-60)}._success_ed5ll_241::-moz-placeholder{color:var(--input-color)}._success_ed5ll_241::placeholder{color:var(--input-color)}._success_ed5ll_241:hover::-moz-placeholder{color:var(--input-color)}._success_ed5ll_241:hover::placeholder{color:var(--input-color)}._alarm_ed5ll_259{--input-bg-color: var(--alarm-normal);--input-bg-color-hover: var(--alarm-bg-hover);--input-bg-color-active: var(--alarm-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--alarm-normal);--label-color: var(--black-60)}._alarm_ed5ll_259::-moz-placeholder{color:var(--input-color)}._alarm_ed5ll_259::placeholder{color:var(--input-color)}._alarm_ed5ll_259:hover::-moz-placeholder{color:var(--input-color)}._alarm_ed5ll_259:hover::placeholder{color:var(--input-color)}._error_ed5ll_277{--input-bg-color: var(--error-normal);--input-bg-color-hover: var(--error-bg-hover);--input-bg-color-active: var(--error-bg-active);--input-color: var(--dark-text);--input-color-hover: var(--dark-text);--input-color-active: var(--dark-text);--input-border: transparent;--input-bottom-color-active: var(--error-normal);--label-color: var(--black-60)}._error_ed5ll_277::-moz-placeholder{color:var(--input-color)}._error_ed5ll_277::placeholder{color:var(--input-color)}._error_ed5ll_277:hover::-moz-placeholder{color:var(--input-color)}._error_ed5ll_277:hover::placeholder{color:var(--input-color)}

package/dist/assets/TextArea.css

@@ -1 +1 @@
-._textarea-wrapper_191db_2 ._textarea_191db_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_191db_2 ._textarea_191db_2._has-label_191db_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_191db_2 ._label_191db_11{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:block;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}._textarea-wrapper_191db_2 ._label_191db_11._has-left-slot_191db_25{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_191db_2 ._label_191db_11._active-label_191db_28{transform:scale(var(--label-scaled)) translateY(calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_191db_2 ._label_191db_11._active-label_191db_28._has-left-slot_191db_25{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--textarea-transform-label) * -1))}._s_191db_36{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-xss);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._m_191db_44{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-s);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._l_191db_11{--textarea-space: var(--space-2m);--textarea-top-space: 25px;--textarea-transform-label: var(--space-m);--textarea-height: 120px;--textarea-padding: var(--space-2m)}
+._textarea-wrapper_1axu4_2 ._textarea_1axu4_2{min-height:var(--textarea-height);padding-top:var(--textarea-space)!important;padding-bottom:var(--textarea-space);resize:none}._textarea-wrapper_1axu4_2 ._textarea_1axu4_2._has-label_1axu4_8{padding-top:var(--textarea-top-space)!important}._textarea-wrapper_1axu4_2 ._required-mark_1axu4_11{display:block;flex:0 0 var(--input-required-mark-size);align-self:flex-start;width:var(--input-required-mark-size);height:var(--input-required-mark-size);margin-top:var(--textarea-space);margin-left:var(--space-m);background-color:var(--citrine-normal);border-radius:50%}._textarea-wrapper_1axu4_2 ._label_1axu4_22{position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--space-m);z-index:1;display:flex;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;-moz-column-gap:var(--space-xs);column-gap:var(--space-xs);transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;-webkit-appearance:none;-moz-appearance:none;appearance:none;pointer-events:none}._textarea-wrapper_1axu4_2 ._label_1axu4_22._has-left-slot_1axu4_37{left:calc(var(--space-m) + var(--icon-size) + var(--clear-button-mg))}._textarea-wrapper_1axu4_2 ._label_1axu4_22._active-label_1axu4_40{transform:scale(var(--label-scaled)) translateY(calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_1axu4_2 ._label_1axu4_22._active-label_1axu4_40._has-left-slot_1axu4_37{left:calc(var(--space-m) + var(--icon-size) + var(--space-s));transform:scale(var(--label-scaled)) translate(calc((var(--space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--textarea-transform-label) * -1))}._textarea-wrapper_1axu4_2 ._label_1axu4_22._active-label_1axu4_40 ._required-mark_1axu4_11{align-self:center;margin-top:0;margin-left:0;transform:scale(1.7)}._s_1axu4_54{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-xss);--textarea-height: 76px;--textarea-padding: var(--space-xs) var(--space-s)}._m_1axu4_62{--textarea-space: var(--space-2s);--textarea-top-space: var(--space-l);--textarea-transform-label: var(--space-s);--textarea-height: 88px;--textarea-padding: var(--space-xs) var(--space-s)}._l_1axu4_22{--textarea-space: var(--space-2m);--textarea-top-space: 25px;--textarea-transform-label: var(--space-m);--textarea-height: 120px;--textarea-padding: var(--space-2m)}

package/dist/components/DatePicker/DatePicker.js

@@ -8,7 +8,7 @@ import { YearPickerModal } from "./YearPickerModal.js";
 import { useClickOutside } from "../../hooks/useClickOutside/useClickOutside.js";
 import { formating } from "../../utils/index.js";
 import { Button } from "../Button/Button.js";
-import { I as Input } from "../../Input-6mudFqTb.js";
+import { I as Input } from "../../Input-ChCIy5oY.js";
 import { EInputVariant } from "../Input/constants.js";
 import { parseDate } from "../../utils/formating/Date.js";
 const DatePicker = memo(

package/dist/components/Input/Input.js

@@ -2,7 +2,7 @@ import "react/jsx-runtime";
 import "../../index-CweZ_OcN.js";
 import "react";
 import "./constants.js";
-import { I } from "../../Input-6mudFqTb.js";
+import { I } from "../../Input-ChCIy5oY.js";
 import "../../hooks/useMergeRefs/useMergeRefs.js";
 import "../../icons/Icon.js";
 import "../Button/Button.js";

package/dist/components/Input/index.js

@@ -1,4 +1,4 @@
-import { I } from "../../Input-6mudFqTb.js";
+import { I } from "../../Input-ChCIy5oY.js";
 import { EInputSize, EInputVariant } from "./constants.js";
 export {
   EInputSize,

package/dist/components/InputPassword/InputPassword.js

@@ -3,7 +3,7 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
 import { memo, forwardRef, useState } from "react";
 import { Icon } from "../../icons/Icon.js";
 import { Button } from "../Button/Button.js";
-import { I as Input } from "../../Input-6mudFqTb.js";
+import { I as Input } from "../../Input-ChCIy5oY.js";
 import '../../assets/InputPassword.css';const input = "_input_34v9n_2";
 const wrapper = "_wrapper_34v9n_6";
 const button = "_button_34v9n_17";

package/dist/components/InputPhoneNumber/InputPhoneNumber.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import { memo, forwardRef, useState, useCallback, useImperativeHandle } from "react";
 import { getMaskedInputPhoneValue, getUnmaskedInputValue } from "./utils.js";
-import { I as Input } from "../../Input-6mudFqTb.js";
+import { I as Input } from "../../Input-ChCIy5oY.js";
 const InputPhoneNumber = memo(
   forwardRef(
     ({ value = "", onChange, ...props }, ref) => {

package/dist/components/OtpInput/OtpInput.js

@@ -3,7 +3,7 @@ import { c as classNames } from "../../index-CweZ_OcN.js";
 import { forwardRef, useImperativeHandle, Fragment } from "react";
 import { ITEMS_PER_SEPARATOR, DEFAULT_VALUE_LENGTH } from "./constants.js";
 import { useOTPInput } from "./hooks.js";
-import { I as Input } from "../../Input-6mudFqTb.js";
+import { I as Input } from "../../Input-ChCIy5oY.js";
 import '../../assets/OtpInput.css';const otp = "_otp_19unm_3";
 const input = "_input_19unm_14";
 const separator = "_separator_19unm_28";

package/dist/components/SelectSearch/SelectSearch.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import React__default, { useReducer, useMemo, useSyncExternalStore, useId as useId$1, useEffect, useCallback, useRef, useLayoutEffect, createContext, useContext, useState, Fragment, createRef, forwardRef } from "react";
 import { ESelectSearchSize } from "./constants.js";
 import { Icon } from "../../icons/Icon.js";
-import { I as Input } from "../../Input-6mudFqTb.js";
+import { I as Input } from "../../Input-ChCIy5oY.js";
 import { EInputVariant, EInputSize } from "../Input/constants.js";
 import { n as n$2, u as u$3, d as o$1, s as s$3, o as o$2, p as p$1, t as t$3, e as s$4, W as W$1, y as y$3, T, H, M as M$1, a as u$5, $ as $f7dceffc5ad7768b$export$4e328f61c538687f, b as $6179b936705e76d3$export$ae780daf29e6d456, D as D$2, c as o$3 } from "../../keyboard-B256ZoM-.js";
 import * as ReactDOM from "react-dom";

package/dist/components/TextArea/TextArea.js

@@ -5,20 +5,21 @@ import { useAutoResizeTextArea } from "./hooks.js";
 import { useMergeRefs } from "../../hooks/useMergeRefs/useMergeRefs.js";
 import { Icon } from "../../icons/Icon.js";
 import { Button } from "../Button/Button.js";
-import { c as cls } from "../../Input-6mudFqTb.js";
+import { c as cls } from "../../Input-ChCIy5oY.js";
 import { EInputVariant } from "../Input/constants.js";
-import '../../assets/TextArea.css';const textarea = "_textarea_191db_2";
-const label = "_label_191db_11";
-const s = "_s_191db_36";
-const m = "_m_191db_44";
-const l = "_l_191db_11";
+import '../../assets/TextArea.css';const textarea = "_textarea_1axu4_2";
+const label = "_label_1axu4_22";
+const s = "_s_1axu4_54";
+const m = "_m_1axu4_62";
+const l = "_l_1axu4_22";
 const textareaCls = {
-  "textarea-wrapper": "_textarea-wrapper_191db_2",
+  "textarea-wrapper": "_textarea-wrapper_1axu4_2",
   textarea,
-  "has-label": "_has-label_191db_8",
+  "has-label": "_has-label_1axu4_8",
+  "required-mark": "_required-mark_1axu4_11",
   label,
-  "has-left-slot": "_has-left-slot_191db_25",
-  "active-label": "_active-label_191db_28",
+  "has-left-slot": "_has-left-slot_1axu4_37",
+  "active-label": "_active-label_1axu4_40",
   s,
   m,
   l
@@ -74,6 +75,7 @@ const TextArea = memo(
         rightAddon,
         leftAddon,
         size = "m",
+        required,
         ...otherProps
       } = props;
       const [isFocused, setIsFocused] = useState(autofocus);
@@ -161,7 +163,10 @@ const TextArea = memo(
             wrapperClassName
           ),
           children: [
-            label2 && /* @__PURE__ */ jsx("label", { htmlFor: id, className: labelClassNames, children: label2 }),
+            label2 && /* @__PURE__ */ jsxs("label", { htmlFor: id, className: labelClassNames, children: [
+              label2,
+              required && (withValue || isFocused) && /* @__PURE__ */ jsx("span", { className: textareaCls["required-mark"] })
+            ] }),
             currentLeftAddon && /* @__PURE__ */ jsx(
               "span",
               {
@@ -183,6 +188,7 @@ const TextArea = memo(
                 readOnly: readonly,
                 value,
                 onChange: handleChange,
+                required,
                 ...otherProps
               }
             ),
@@ -196,6 +202,7 @@ const TextArea = memo(
                 children: currentRightAddon
               }
             ),
+            required && !withValue && !isFocused && /* @__PURE__ */ jsx("span", { className: textareaCls["required-mark"] }),
             withClearButton && withValue && /* @__PURE__ */ jsx(
               Button,
               {

package/dist/components/index.js

@@ -1,6 +1,6 @@
 import { Button } from "./Button/Button.js";
 import { EButtonForm, EButtonSize, EButtonVariantBorderless, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./Button/constants.js";
-import { I } from "../Input-6mudFqTb.js";
+import { I } from "../Input-ChCIy5oY.js";
 import { EInputSize, EInputVariant } from "./Input/constants.js";
 import { TextArea } from "./TextArea/TextArea.js";
 import { InputPassword } from "./InputPassword/InputPassword.js";

package/dist/index.js

@@ -1,6 +1,6 @@
 import { Button } from "./components/Button/Button.js";
 import { EButtonForm, EButtonSize, EButtonVariantBorderless, EButtonVariantDefault, EButtonVariantOutline, EButtonVariantRound } from "./components/Button/constants.js";
-import { I } from "./Input-6mudFqTb.js";
+import { I } from "./Input-ChCIy5oY.js";
 import { EInputSize, EInputVariant } from "./components/Input/constants.js";
 import { TextArea } from "./components/TextArea/TextArea.js";
 import { InputPassword } from "./components/InputPassword/InputPassword.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "mimir-ui-kit",
   "private": false,
-  "version": "1.27.5",
+  "version": "1.27.6",
   "type": "module",
   "exports": {
     ".": {