mimir-ui-kit 1.36.4 → 1.36.6

package/dist/Input-WnjLXNpw.js

@@ -0,0 +1,224 @@
+import { jsxs as B, jsx as c, Fragment as Y } from "react/jsx-runtime";
+import { c as o } from "./index-DIxK0V-G.js";
+import { memo as Z, forwardRef as $, useState as R, useRef as ee, useEffect as z } from "react";
+import { EInputVariant as te } from "./components/Input/constants.js";
+import { useMergeRefs as se } from "./hooks/useMergeRefs/useMergeRefs.js";
+import { Icon as ae } from "./icons/Icon.js";
+import { Button as le } from "./components/Button/Button.js";
+import './assets/Input.css';const re = "_label_1bpoc_27", oe = "_input_1bpoc_3", ce = "_focused_1bpoc_82", ne = "_disabled_1bpoc_88", ie = "_clear_1bpoc_137", de = "_s_1bpoc_188", ue = "_m_1bpoc_203", _e = "_l_1bpoc_27", pe = "_success_1bpoc_259", me = "_alarm_1bpoc_279", be = "_error_1bpoc_299", e = {
+  "input-wrapper": "_input-wrapper_1bpoc_3",
+  "required-mark": "_required-mark_1bpoc_17",
+  label: re,
+  "has-left-slot": "_has-left-slot_1bpoc_42",
+  "active-label": "_active-label_1bpoc_45",
+  input: oe,
+  "has-right-slot": "_has-right-slot_1bpoc_79",
+  focused: ce,
+  "has-label": "_has-label_1bpoc_85",
+  disabled: ne,
+  "auto-height": "_auto-height_1bpoc_94",
+  "addon-icon": "_addon-icon_1bpoc_101",
+  "left-slot": "_left-slot_1bpoc_105",
+  "right-slot": "_right-slot_1bpoc_106",
+  clear: ie,
+  s: de,
+  m: ue,
+  l: _e,
+  "default-gray": "_default-gray_1bpoc_232",
+  "default-white": "_default-white_1bpoc_244",
+  success: pe,
+  alarm: me,
+  error: be
+}, L = (t) => {
+  var p, a;
+  if (!t)
+    return null;
+  switch (t.addonType) {
+    case "icon": {
+      const m = (p = t.addonContent) == null ? void 0 : p.includes("16px"), g = (a = t.addonContent) == null ? void 0 : a.includes("24px");
+      return /* @__PURE__ */ c(
+        ae,
+        {
+          style: {
+            "--icon-size": o({
+              "16px": m,
+              "24px": g
+            })
+          },
+          className: e["addon-icon"],
+          iconName: t.addonContent
+        }
+      );
+    }
+    case "text":
+      return t.addonContent;
+    case "react-node":
+      return /* @__PURE__ */ c(Y, { children: t.addonContent });
+    default:
+      return null;
+  }
+}, fe = Z(
+  $(
+    (t, p) => {
+      const {
+        value: a,
+        className: m,
+        wrapperClassName: g,
+        rightSlotClassName: j,
+        requiredMarkClassName: D,
+        variant: A = te.DefaultGray,
+        type: E = "text",
+        autofocus: N,
+        readonly: n,
+        id: F,
+        onFocus: x,
+        onBlur: y,
+        label: u,
+        withClearButton: M,
+        disabled: s,
+        onChange: i,
+        rightAddon: O,
+        status: V,
+        leftAddon: S,
+        size: C = "m",
+        numbersOnly: T,
+        required: v,
+        maxLength: w,
+        ...G
+      } = t, [_, I] = R(N), [b, f] = R(!!a), d = ee(null), P = se(d, p);
+      z(() => {
+        N && I(!0);
+      }, [N]), z(() => {
+        f(!!a);
+      }, [a]);
+      const W = (l) => {
+        const r = l.currentTarget.value;
+        y == null || y(l), I(!1), f(!!r);
+      }, H = (l) => {
+        n || (I(!0), x == null || x(l));
+      }, J = () => {
+        d != null && d.current && (d.current.value = "", d.current.focus(), f(!1), i == null || i({
+          target: { value: "" }
+        }));
+      }, K = (l) => {
+        let r = l.target.value;
+        T && (r = r.replace(/\D/g, "")), w !== void 0 && (r = r.slice(0, w)), l.target.value = r, i == null || i(l), f(!!r);
+      }, h = L(S), k = L(O), Q = {
+        [e.readonly]: s || n,
+        [e.focused]: _,
+        [e.disabled]: s || n,
+        [e["has-label"]]: !!u,
+        [e["has-left-slot"]]: !!h,
+        [e["has-right-slot"]]: !!k
+      }, q = _ || b || !!a, U = o(e.label, m, e[C], {
+        [e["active-label"]]: q,
+        [e.disabled]: s || n,
+        [e["has-left-slot"]]: !!h
+      }), X = o(e.input, Q, m, [
+        e[A],
+        e[V ?? ""],
+        e[C]
+      ]);
+      return /* @__PURE__ */ B(
+        "div",
+        {
+          className: o(
+            e["input-wrapper"],
+            e[A],
+            e[V ?? ""],
+            e[C],
+            {
+              [e.disabled]: s || n,
+              [e.focused]: _
+            },
+            g
+          ),
+          children: [
+            u && /* @__PURE__ */ B("label", { htmlFor: F, className: U, children: [
+              u,
+              v && (b || _) && /* @__PURE__ */ c(
+                "span",
+                {
+                  className: e["required-mark"],
+                  "data-testid": "required-mark"
+                }
+              )
+            ] }),
+            h && /* @__PURE__ */ c(
+              "span",
+              {
+                className: o(e["left-slot"], {
+                  [e.focused]: q,
+                  [e["has-label"]]: !!u,
+                  [e.disabled]: s
+                }),
+                children: h
+              }
+            ),
+            /* @__PURE__ */ c(
+              "input",
+              {
+                ref: P,
+                type: E,
+                id: F,
+                className: X,
+                onFocus: H,
+                onBlur: W,
+                readOnly: n,
+                value: a,
+                onChange: K,
+                maxLength: w,
+                disabled: s,
+                required: v,
+                ...G
+              }
+            ),
+            k && /* @__PURE__ */ c(
+              "span",
+              {
+                className: o(e["right-slot"], j, {
+                  [e.focused]: q,
+                  [e["has-label"]]: !!u,
+                  [e.disabled]: s
+                }),
+                children: k
+              }
+            ),
+            v && !b && !_ && /* @__PURE__ */ c(
+              "span",
+              {
+                className: o(
+                  e["required-mark"],
+                  D
+                ),
+                "data-testid": "required-mark"
+              }
+            ),
+            M && b && /* @__PURE__ */ c(
+              le,
+              {
+                tabIndex: -1,
+                className: o(e.clear, {
+                  [e.disabled]: s
+                }),
+                isIconButton: !0,
+                iconName: "Close16px",
+                size: "m-s",
+                clear: !0,
+                disabled: s || n,
+                variant: "secondary-gray",
+                onClick: J,
+                "data-testid": "clear-button"
+              }
+            )
+          ]
+        }
+      );
+    }
+  )
+);
+fe.displayName = "Input";
+export {
+  fe as I,
+  e as c
+};

package/dist/assets/Input.css

@@ -1 +1 @@
-._input-wrapper_1son2_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(--mimir-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_1son2_3 ._required-mark_1son2_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(--mimir-space-m);background-color:var(--citrine-normal);border-radius:50%}._input-wrapper_1son2_3 ._label_1son2_27{--input-required-mark-size: 6px;position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--mimir-space-m);z-index:1;display:flex;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;-moz-column-gap:var(--mimir-space-xs);column-gap:var(--mimir-space-xs);transform-origin:left center;transition:transform .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_1son2_3 ._label_1son2_27._has-left-slot_1son2_42{left:calc(var(--mimir-space-m) + var(--icon-size) + var(--clear-button-mg))}._input-wrapper_1son2_3 ._label_1son2_27._active-label_1son2_45{transform:scale(var(--label-scaled)) translateY(calc(var(--input-font-size) * -1))}._input-wrapper_1son2_3 ._label_1son2_27._active-label_1son2_45._has-left-slot_1son2_42{left:calc(var(--mimir-space-m) + var(--icon-size) + var(--mimir-space-s));transform:scale(var(--label-scaled)) translate(calc((var(--mimir-space-m) + var(--left-addon-position)) * 2 * -1),calc(var(--input-font-size) * -1))}._input-wrapper_1son2_3 ._label_1son2_27._active-label_1son2_45 ._required-mark_1son2_17{margin-left:0;transform:scale(1.7)}._input-wrapper_1son2_3 ._input_1son2_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(--mimir-font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;text-overflow:ellipsis;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_1son2_3 ._input_1son2_3._has-left-slot_1son2_42{padding-left:0}._input-wrapper_1son2_3 ._input_1son2_3._has-right-slot_1son2_80{padding-right:0}._input-wrapper_1son2_3 ._input_1son2_3._focused_1son2_83{padding-top:0}._input-wrapper_1son2_3 ._input_1son2_3._has-label_1son2_86{padding-top:var(--input-padding-position)}._input-wrapper_1son2_3 ._input_1son2_3._disabled_1son2_89{color:var(--light-text)}._input-wrapper_1son2_3 ._input_1son2_3._disabled_1son2_89:hover,._input-wrapper_1son2_3 ._input_1son2_3._disabled_1son2_89:active,._input-wrapper_1son2_3 ._input_1son2_3._disabled_1son2_89:focus{color:var(--light-text)}._input-wrapper_1son2_3 ._input_1son2_3._auto-height_1son2_95{height:auto;min-height:var(--input-height);overflow:hidden!important;transition:height .2s ease;resize:none}._input-wrapper_1son2_3 ._addon-icon_1son2_102{width:var(--icon-size);height:var(--icon-size)}._input-wrapper_1son2_3 ._left-slot_1son2_106,._input-wrapper_1son2_3 ._right-slot_1son2_107{display:flex;align-items:center;height:var(--input-height);color:var(--black-60);font-size:var(--input-font-size);font-family:var(--mimir-font-inter);line-height:var(--input-line-height);background-color:inherit;transition:padding-top .15s ease-out}._input-wrapper_1son2_3 ._left-slot_1son2_106._focused_1son2_83._has-label_1son2_86,._input-wrapper_1son2_3 ._right-slot_1son2_107._focused_1son2_83._has-label_1son2_86{padding-top:var(--input-padding-position)}._input-wrapper_1son2_3 ._left-slot_1son2_106._disabled_1son2_89,._input-wrapper_1son2_3 ._right-slot_1son2_107._disabled_1son2_89{color:var(--white);cursor:not-allowed}._input-wrapper_1son2_3 ._left-slot_1son2_106._disabled_1son2_89 ._addon-icon_1son2_102 path,._input-wrapper_1son2_3 ._right-slot_1son2_107._disabled_1son2_89 ._addon-icon_1son2_102 path{fill:var(--white)}._input-wrapper_1son2_3 ._left-slot_1son2_106{justify-content:flex-end;margin-right:var(--clear-button-mg)}._input-wrapper_1son2_3 ._right-slot_1son2_107{margin-left:var(--clear-button-mg)}._input-wrapper_1son2_3 ._clear_1son2_138{align-self:center;width:16px;height:16px;margin-left:var(--clear-button-mg)}._input-wrapper_1son2_3 ._clear_1son2_138._disabled_1son2_89{cursor:not-allowed}._input-wrapper_1son2_3 svg{color:currentcolor;fill:currentcolor}._input-wrapper_1son2_3:hover ._label_1son2_27,._input-wrapper_1son2_3:focus-within ._label_1son2_27{color:var(--label-color)}._input-wrapper_1son2_3:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_1son2_3:focus-within{background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._input-wrapper_1son2_3._focused_1son2_83{color:var(--input-color-active);background-color:var(--input-bg-color-active)}._input-wrapper_1son2_3._focused_1son2_83:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_1son2_3._disabled_1son2_89{--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_1son2_3._disabled_1son2_89:hover,._input-wrapper_1son2_3._disabled_1son2_89:active,._input-wrapper_1son2_3._disabled_1son2_89: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_1son2_3._disabled_1son2_89::-moz-placeholder{color:var(--light-text)}._input-wrapper_1son2_3._disabled_1son2_89::placeholder{color:var(--light-text)}._input-wrapper_1son2_3._disabled_1son2_89:hover::-moz-placeholder{color:var(--light-text)}._input-wrapper_1son2_3._disabled_1son2_89:hover::placeholder{color:var(--light-text)}._s_1son2_189{--input-height: var(--mimir-space-xxl);--input-font-size: var(--mimir-control-text-size-m);--input-line-height: var(--mimir-line-height-text-xs);--input-padding: var(--mimir-space-m);--input-padding-position: var(--mimir-space-1xs);--input-border-radius: var(--input-border-radius-s);--label-font-size: var(--mimir-size-text-xs);--label-scaled: .85;--label-spacing: var(--mimir-space-1xs);--clear-button-mg: var(--mimir-space-2xs);--icon-size: 16px;--left-addon-position: 0px}._m_1son2_204{--input-height: var(--mimir-space-4xl);--input-font-size: var(--mimir-control-text-size-l);--input-line-height: var(--mimir-line-height-text-s1);--input-padding: var(--mimir-space-m);--input-padding-position: var(--mimir-space-xs);--input-border-radius: var(--input-border-radius-m);--label-font-size: var(--mimir-size-text-s);--label-scaled: .75;--label-spacing: var(--mimir-space-xs);--clear-button-mg: var(--mimir-space-2xs);--icon-size: 16px;--left-addon-position: var(--mimir-space-3xs)}._l_1son2_27{--input-height: var(--mimir-space-4xxl);--input-font-size: var(--mimir-control-text-size-2xl);--input-line-height: var(--mimir-line-height-text-l);--input-padding: var(--mimir-space-m);--input-padding-position: var(--mimir-space-s);--input-border-radius: var(--input-border-radius-l);--label-font-size: var(--mimir-size-text-s);--label-scaled: .6;--label-spacing: var(--mimir-space-s);--clear-button-mg: var(--mimir-space-xs);--icon-size: 24px;--left-addon-position: var(--mimir-space-s)}._default-gray_1son2_234{--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_1son2_246{--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_1son2_246:hover{--label-color: var(--dark-text)}._default-gray_1son2_234._success_1son2_261,._default-white_1son2_246._success_1son2_261{--input-bg-color: var(--success-bg-active);--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)}._default-gray_1son2_234._success_1son2_261::-moz-placeholder,._default-white_1son2_246._success_1son2_261::-moz-placeholder{color:var(--input-color)}._default-gray_1son2_234._success_1son2_261::placeholder,._default-white_1son2_246._success_1son2_261::placeholder{color:var(--input-color)}._default-gray_1son2_234._success_1son2_261:hover::-moz-placeholder,._default-white_1son2_246._success_1son2_261:hover::-moz-placeholder{color:var(--input-color)}._default-gray_1son2_234._success_1son2_261:hover::placeholder,._default-white_1son2_246._success_1son2_261:hover::placeholder{color:var(--input-color)}._default-gray_1son2_234._alarm_1son2_281,._default-white_1son2_246._alarm_1son2_281{--input-bg-color: var(--alarm-bg-active);--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)}._default-gray_1son2_234._alarm_1son2_281::-moz-placeholder,._default-white_1son2_246._alarm_1son2_281::-moz-placeholder{color:var(--input-color)}._default-gray_1son2_234._alarm_1son2_281::placeholder,._default-white_1son2_246._alarm_1son2_281::placeholder{color:var(--input-color)}._default-gray_1son2_234._alarm_1son2_281:hover::-moz-placeholder,._default-white_1son2_246._alarm_1son2_281:hover::-moz-placeholder{color:var(--input-color)}._default-gray_1son2_234._alarm_1son2_281:hover::placeholder,._default-white_1son2_246._alarm_1son2_281:hover::placeholder{color:var(--input-color)}._default-gray_1son2_234._error_1son2_301,._default-white_1son2_246._error_1son2_301{--input-bg-color: var(--error-bg-active);--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)}._default-gray_1son2_234._error_1son2_301::-moz-placeholder,._default-white_1son2_246._error_1son2_301::-moz-placeholder{color:var(--input-color)}._default-gray_1son2_234._error_1son2_301::placeholder,._default-white_1son2_246._error_1son2_301::placeholder{color:var(--input-color)}._default-gray_1son2_234._error_1son2_301:hover::-moz-placeholder,._default-white_1son2_246._error_1son2_301:hover::-moz-placeholder{color:var(--input-color)}._default-gray_1son2_234._error_1son2_301:hover::placeholder,._default-white_1son2_246._error_1son2_301:hover::placeholder{color:var(--input-color)}
+._input-wrapper_1bpoc_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(--mimir-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_1bpoc_3 ._required-mark_1bpoc_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(--mimir-space-m);background-color:var(--citrine-normal);border-radius:50%}._input-wrapper_1bpoc_3 ._label_1bpoc_27{--input-required-mark-size: 6px;position:absolute;top:calc(var(--input-height) / 2 - var(--input-font-size) / 2);left:var(--mimir-space-m);z-index:1;display:flex;color:var(--label-color);font-size:var(--input-font-size);white-space:nowrap;-moz-column-gap:var(--mimir-space-xs);column-gap:var(--mimir-space-xs);transform-origin:left center;transition:transform .15s ease-out,font-size .15s ease-out,left .15s ease-out,color .15s ease-out;pointer-events:none}._input-wrapper_1bpoc_3 ._label_1bpoc_27._has-left-slot_1bpoc_42{left:calc(var(--mimir-space-m) + var(--icon-size) + var(--clear-button-mg))}._input-wrapper_1bpoc_3 ._label_1bpoc_27._active-label_1bpoc_45{font-size:var(--label-font-size-active);transform:translateY(calc(var(--label-font-size-active) * -1))}._input-wrapper_1bpoc_3 ._label_1bpoc_27._active-label_1bpoc_45._has-left-slot_1bpoc_42{left:var(--mimir-space-m)}._input-wrapper_1bpoc_3 ._label_1bpoc_27._active-label_1bpoc_45 ._required-mark_1bpoc_17{margin-left:0}._input-wrapper_1bpoc_3 ._input_1bpoc_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(--mimir-font-inter);line-height:var(--input-line-height);letter-spacing:-.42px;text-overflow:ellipsis;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_1bpoc_3 ._input_1bpoc_3._has-left-slot_1bpoc_42{padding-left:0}._input-wrapper_1bpoc_3 ._input_1bpoc_3._has-right-slot_1bpoc_79{padding-right:0}._input-wrapper_1bpoc_3 ._input_1bpoc_3._focused_1bpoc_82{padding-top:0}._input-wrapper_1bpoc_3 ._input_1bpoc_3._has-label_1bpoc_85{padding-top:var(--input-padding-position)}._input-wrapper_1bpoc_3 ._input_1bpoc_3._disabled_1bpoc_88{color:var(--light-text)}._input-wrapper_1bpoc_3 ._input_1bpoc_3._disabled_1bpoc_88:hover,._input-wrapper_1bpoc_3 ._input_1bpoc_3._disabled_1bpoc_88:active,._input-wrapper_1bpoc_3 ._input_1bpoc_3._disabled_1bpoc_88:focus{color:var(--light-text)}._input-wrapper_1bpoc_3 ._input_1bpoc_3._auto-height_1bpoc_94{height:auto;min-height:var(--input-height);overflow:hidden!important;transition:height .2s ease;resize:none}._input-wrapper_1bpoc_3 ._addon-icon_1bpoc_101{width:var(--icon-size);height:var(--icon-size)}._input-wrapper_1bpoc_3 ._left-slot_1bpoc_105,._input-wrapper_1bpoc_3 ._right-slot_1bpoc_106{display:flex;align-items:center;height:var(--input-height);color:var(--black-60);font-size:var(--input-font-size);font-family:var(--mimir-font-inter);line-height:var(--input-line-height);background-color:inherit;transition:padding-top .15s ease-out}._input-wrapper_1bpoc_3 ._left-slot_1bpoc_105._focused_1bpoc_82._has-label_1bpoc_85,._input-wrapper_1bpoc_3 ._right-slot_1bpoc_106._focused_1bpoc_82._has-label_1bpoc_85{padding-top:var(--input-padding-position)}._input-wrapper_1bpoc_3 ._left-slot_1bpoc_105._disabled_1bpoc_88,._input-wrapper_1bpoc_3 ._right-slot_1bpoc_106._disabled_1bpoc_88{color:var(--white);cursor:not-allowed}._input-wrapper_1bpoc_3 ._left-slot_1bpoc_105._disabled_1bpoc_88 ._addon-icon_1bpoc_101 path,._input-wrapper_1bpoc_3 ._right-slot_1bpoc_106._disabled_1bpoc_88 ._addon-icon_1bpoc_101 path{fill:var(--white)}._input-wrapper_1bpoc_3 ._left-slot_1bpoc_105{justify-content:flex-end;margin-right:var(--clear-button-mg)}._input-wrapper_1bpoc_3 ._right-slot_1bpoc_106{margin-left:var(--clear-button-mg)}._input-wrapper_1bpoc_3 ._clear_1bpoc_137{align-self:center;width:16px;height:16px;margin-left:var(--clear-button-mg)}._input-wrapper_1bpoc_3 ._clear_1bpoc_137._disabled_1bpoc_88{cursor:not-allowed}._input-wrapper_1bpoc_3 svg{color:currentcolor;fill:currentcolor}._input-wrapper_1bpoc_3:hover ._label_1bpoc_27,._input-wrapper_1bpoc_3:focus-within ._label_1bpoc_27{color:var(--label-color)}._input-wrapper_1bpoc_3:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_1bpoc_3:focus-within{background-color:var(--input-bg-color-active);border-bottom:1px solid var(--input-bottom-color-active)}._input-wrapper_1bpoc_3._focused_1bpoc_82{color:var(--input-color-active);background-color:var(--input-bg-color-active)}._input-wrapper_1bpoc_3._focused_1bpoc_82:hover{background-color:var(--input-bg-color-hover)}._input-wrapper_1bpoc_3._disabled_1bpoc_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_1bpoc_3._disabled_1bpoc_88:hover,._input-wrapper_1bpoc_3._disabled_1bpoc_88:active,._input-wrapper_1bpoc_3._disabled_1bpoc_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_1bpoc_3._disabled_1bpoc_88::-moz-placeholder{color:var(--light-text)}._input-wrapper_1bpoc_3._disabled_1bpoc_88::placeholder{color:var(--light-text)}._input-wrapper_1bpoc_3._disabled_1bpoc_88:hover::-moz-placeholder{color:var(--light-text)}._input-wrapper_1bpoc_3._disabled_1bpoc_88:hover::placeholder{color:var(--light-text)}._s_1bpoc_188{--input-height: var(--mimir-space-xxl);--input-font-size: var(--mimir-control-text-size-m);--input-line-height: var(--mimir-line-height-text-xs);--input-padding: var(--mimir-space-m);--input-padding-position: var(--mimir-space-1xs);--input-border-radius: var(--input-border-radius-s);--label-font-size-active: var(--mimir-size-text-xs);--label-spacing: var(--mimir-space-1xs);--input-required-mark-size: 6px;--clear-button-mg: var(--mimir-space-2xs);--icon-size: 16px;--left-addon-position: 0px}._m_1bpoc_203{--input-height: var(--mimir-space-4xl);--input-font-size: var(--mimir-control-text-size-l);--input-line-height: var(--mimir-line-height-text-s1);--input-padding: var(--mimir-space-m);--input-padding-position: var(--mimir-space-xs);--input-border-radius: var(--input-border-radius-m);--label-font-size-active: var(--mimir-size-text-s);--label-spacing: var(--mimir-space-xs);--input-required-mark-size: 6px;--clear-button-mg: var(--mimir-space-2xs);--icon-size: 16px;--left-addon-position: var(--mimir-space-3xs)}._l_1bpoc_27{--input-height: var(--mimir-space-4xxl);--input-font-size: var(--mimir-control-text-size-2xl);--input-line-height: var(--mimir-line-height-text-l);--input-padding: var(--mimir-space-m);--input-padding-position: var(--mimir-space-s);--input-border-radius: var(--input-border-radius-l);--label-font-size-active: var(--mimir-size-text-s);--label-spacing: var(--mimir-space-s);--clear-button-mg: var(--mimir-space-xs);--icon-size: 24px;--left-addon-position: var(--mimir-space-s)}._default-gray_1bpoc_232{--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_1bpoc_244{--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_1bpoc_244:hover{--label-color: var(--dark-text)}._default-gray_1bpoc_232._success_1bpoc_259,._default-white_1bpoc_244._success_1bpoc_259{--input-bg-color: var(--success-bg-active);--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)}._default-gray_1bpoc_232._success_1bpoc_259::-moz-placeholder,._default-white_1bpoc_244._success_1bpoc_259::-moz-placeholder{color:var(--input-color)}._default-gray_1bpoc_232._success_1bpoc_259::placeholder,._default-white_1bpoc_244._success_1bpoc_259::placeholder{color:var(--input-color)}._default-gray_1bpoc_232._success_1bpoc_259:hover::-moz-placeholder,._default-white_1bpoc_244._success_1bpoc_259:hover::-moz-placeholder{color:var(--input-color)}._default-gray_1bpoc_232._success_1bpoc_259:hover::placeholder,._default-white_1bpoc_244._success_1bpoc_259:hover::placeholder{color:var(--input-color)}._default-gray_1bpoc_232._alarm_1bpoc_279,._default-white_1bpoc_244._alarm_1bpoc_279{--input-bg-color: var(--alarm-bg-active);--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)}._default-gray_1bpoc_232._alarm_1bpoc_279::-moz-placeholder,._default-white_1bpoc_244._alarm_1bpoc_279::-moz-placeholder{color:var(--input-color)}._default-gray_1bpoc_232._alarm_1bpoc_279::placeholder,._default-white_1bpoc_244._alarm_1bpoc_279::placeholder{color:var(--input-color)}._default-gray_1bpoc_232._alarm_1bpoc_279:hover::-moz-placeholder,._default-white_1bpoc_244._alarm_1bpoc_279:hover::-moz-placeholder{color:var(--input-color)}._default-gray_1bpoc_232._alarm_1bpoc_279:hover::placeholder,._default-white_1bpoc_244._alarm_1bpoc_279:hover::placeholder{color:var(--input-color)}._default-gray_1bpoc_232._error_1bpoc_299,._default-white_1bpoc_244._error_1bpoc_299{--input-bg-color: var(--error-bg-active);--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)}._default-gray_1bpoc_232._error_1bpoc_299::-moz-placeholder,._default-white_1bpoc_244._error_1bpoc_299::-moz-placeholder{color:var(--input-color)}._default-gray_1bpoc_232._error_1bpoc_299::placeholder,._default-white_1bpoc_244._error_1bpoc_299::placeholder{color:var(--input-color)}._default-gray_1bpoc_232._error_1bpoc_299:hover::-moz-placeholder,._default-white_1bpoc_244._error_1bpoc_299:hover::-moz-placeholder{color:var(--input-color)}._default-gray_1bpoc_232._error_1bpoc_299:hover::placeholder,._default-white_1bpoc_244._error_1bpoc_299:hover::placeholder{color:var(--input-color)}