@acronis-platform/ui-react 0.62.0 → 2.0.0

package/dist/components/ui/input-date-picker/input-date-picker.js

@@ -1,104 +1,114 @@
-import { jsxs as i, jsx as r } from "react/jsx-runtime";
-import * as m from "react";
-import { CalendarIcon as C } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as p } from "../../../lib/utils.js";
-const E = m.forwardRef(
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import * as h from "react";
+import { CalendarIcon as E } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as i } from "../../../lib/utils.js";
+const F = h.forwardRef(
   ({
     className: k,
-    id: h,
-    label: e,
-    required: s,
-    description: f,
-    error: a,
-    pickerType: N = "date",
-    placeholder: w,
-    value: o,
+    style: m,
+    id: f,
+    label: a,
+    required: v,
+    description: N,
+    error: o,
+    pickerType: w = "date",
+    placeholder: I,
+    value: t,
     startDate: l,
-    endDate: t,
-    separator: I = "–",
-    open: b,
+    endDate: n,
+    separator: y = "–",
+    open: s,
     disabled: d,
-    "aria-invalid": y,
-    ...R
-  }, j) => {
-    const P = m.useId(), n = h ?? P, v = `${n}-message`, c = a != null && a !== "", q = c || y, u = c ? a : f, g = u != null && u !== "", x = N === "dateRange", z = x ? l != null && l !== "" || t != null && t !== "" : o != null && o !== "";
-    return /* @__PURE__ */ i("div", { className: "flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]", children: [
-      e != null && e !== "" && /* @__PURE__ */ i(
-        "label",
-        {
-          htmlFor: n,
-          className: p(
-            "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
-            d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)]"
+    "aria-invalid": R,
+    ...j
+  }, z) => {
+    const P = h.useId(), u = f ?? P, g = `${u}-message`, p = o != null && o !== "", q = p || R, c = p ? o : N, b = c != null && c !== "", x = w === "dateRange", C = x ? l != null && l !== "" || n != null && n !== "" : t != null && t !== "";
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        className: i(
+          "group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]",
+          k
+        ),
+        style: m,
+        children: [
+          a != null && a !== "" && /* @__PURE__ */ e(
+            "label",
+            {
+              htmlFor: u,
+              className: i(
+                "flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4",
+                d ? "text-[var(--ui-input-date-picker-global-label-color-disabled)]" : "text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]"
+              ),
+              children: [
+                a,
+                v && /* @__PURE__ */ r(
+                  "span",
+                  {
+                    "aria-hidden": "true",
+                    className: "text-[var(--ui-input-date-picker-global-required-color)]",
+                    children: "*"
+                  }
+                )
+              ]
+            }
           ),
-          children: [
-            e,
-            s && /* @__PURE__ */ r(
-              "span",
-              {
-                "aria-hidden": "true",
-                className: "text-[var(--ui-input-date-picker-global-required-color)]",
-                children: "*"
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ i(
-        "button",
-        {
-          ref: j,
-          id: n,
-          type: "button",
-          disabled: d,
-          "aria-invalid": q || void 0,
-          "aria-required": s || void 0,
-          "aria-haspopup": "dialog",
-          "aria-expanded": b || void 0,
-          "aria-describedby": g ? v : void 0,
-          "data-open": b || void 0,
-          className: p(
-            "group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors",
-            "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]",
-            "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]",
-            "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
-            "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
-            "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]",
-            k
+          /* @__PURE__ */ e(
+            "button",
+            {
+              ref: z,
+              id: u,
+              type: "button",
+              disabled: d,
+              "aria-invalid": q || void 0,
+              "aria-required": v || void 0,
+              "aria-haspopup": "dialog",
+              "aria-expanded": s || void 0,
+              "aria-describedby": b ? g : void 0,
+              "data-open": s || void 0,
+              className: i(
+                "group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors",
+                "enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]",
+                "not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]",
+                "not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]",
+                "aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]",
+                "disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]"
+              ),
+              ...j,
+              children: [
+                C ? x ? /* @__PURE__ */ e("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
+                  /* @__PURE__ */ r("span", { children: l }),
+                  /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: y }),
+                  /* @__PURE__ */ r("span", { children: n })
+                ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: t }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]", children: I }),
+                /* @__PURE__ */ r("span", { className: "flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center", children: /* @__PURE__ */ r(
+                  E,
+                  {
+                    size: 16,
+                    className: "text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]"
+                  }
+                ) })
+              ]
+            }
           ),
-          ...R,
-          children: [
-            z ? x ? /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate", children: [
-              /* @__PURE__ */ r("span", { children: l }),
-              /* @__PURE__ */ r("span", { className: "text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]", children: I }),
-              /* @__PURE__ */ r("span", { children: t })
-            ] }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate", children: o }) : /* @__PURE__ */ r("span", { className: "min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]", children: w }),
-            /* @__PURE__ */ r(
-              C,
-              {
-                size: 16,
-                className: "shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]"
-              }
-            )
-          ]
-        }
-      ),
-      g && /* @__PURE__ */ r(
-        "p",
-        {
-          id: v,
-          className: p(
-            "text-xs leading-4",
-            c ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)]"
-          ),
-          children: u
-        }
-      )
-    ] });
+          b && /* @__PURE__ */ r(
+            "p",
+            {
+              id: g,
+              className: i(
+                "text-xs leading-4",
+                p ? "text-[var(--ui-input-date-picker-error-error-msg-color)]" : d ? "text-[var(--ui-input-date-picker-normal-description-color-disabled)]" : "text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]"
+              ),
+              children: c
+            }
+          )
+        ]
+      }
+    );
   }
 );
-E.displayName = "InputDatePicker";
+F.displayName = "InputDatePicker";
 export {
-  E as InputDatePicker
+  F as InputDatePicker
 };
 //# sourceMappingURL=input-date-picker.js.map

package/dist/components/ui/input-date-picker/input-date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]\">\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]',\n            className\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-disabled:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <CalendarIcon\n            size={16}\n            className=\"shrink-0 text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-disabled:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]:text-[var(--ui-input-date-picker-error-icon-color-idle)]\"\n          />\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":";;;;AA2CA,MAAMA,IAAkBC,EAAM;AAAA,EAC5B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,YAAAC,IAAa;AAAA,IACb,aAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,WAAAC,IAAY;AAAA,IACZ,MAAAC;AAAA,IACA,UAAAC;AAAA,IACA,gBAAgBC;AAAA,IAChB,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUlB,EAAM,MAAA,GAChBmB,IAAUjB,KAAMgB,GAChBE,IAAY,GAAGD,CAAO,YAEtBE,IAAWf,KAAS,QAAQA,MAAU,IACtCgB,IAAUD,KAAYN,GACtBQ,IAAUF,IAAWf,IAAQD,GAC7BmB,IAAaD,KAAW,QAAQA,MAAY,IAE5CE,IAAUlB,MAAe,aACzBmB,IAAWD,IACZf,KAAa,QAAQA,MAAc,MACnCC,KAAW,QAAQA,MAAY,KAChCF,KAAS,QAAQA,MAAU;AAE/B,WACE,gBAAAkB,EAAC,OAAA,EAAI,WAAU,8IACZ,UAAA;AAAA,MAAAxB,KAAS,QAAQA,MAAU,MAC1B,gBAAAwB;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASR;AAAA,UACT,WAAWS;AAAA,YACT;AAAA,YACAd,IACI,mEACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAX;AAAA,YACAC,KACC,gBAAAyB;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAKN,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAAV;AAAA,UACA,IAAIE;AAAA,UACJ,MAAK;AAAA,UACL,UAAAL;AAAA,UACA,gBAAcQ,KAAW;AAAA,UACzB,iBAAelB,KAAY;AAAA,UAC3B,iBAAc;AAAA,UACd,iBAAeS,KAAQ;AAAA,UACvB,oBAAkBW,IAAaJ,IAAY;AAAA,UAC3C,aAAWP,KAAQ;AAAA,UACnB,WAAWe;AAAA,YACT;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,YACA3B;AAAA,UAAA;AAAA,UAED,GAAGe;AAAA,UAEH,UAAA;AAAA,YAAAU,IACCD,IACE,gBAAAE,EAAC,QAAA,EAAK,WAAU,oGACd,UAAA;AAAA,cAAA,gBAAAE,EAAC,UAAM,UAAAnB,EAAA,CAAU;AAAA,cACjB,gBAAAmB,EAAC,QAAA,EAAK,WAAU,oJACb,UAAAjB,GACH;AAAA,cACA,gBAAAiB,EAAC,UAAM,UAAAlB,EAAA,CAAQ;AAAA,YAAA,EAAA,CACjB,IAEA,gBAAAkB,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAApB,EAAA,CAAM,IAGnD,gBAAAoB,EAAC,QAAA,EAAK,WAAU,gLACb,UAAArB,GACH;AAAA,YAEF,gBAAAqB;AAAA,cAACC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,UACZ;AAAA,QAAA;AAAA,MAAA;AAAA,MAGDN,KACC,gBAAAK;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,IAAIT;AAAA,UACJ,WAAWQ;AAAA,YACT;AAAA,YACAP,IACI,6DACAP,IACE,yEACA;AAAA,UAAA;AAAA,UAGP,UAAAS;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GAEJ;AAAA,EAEJ;AACF;AACAxB,EAAgB,cAAc;"}
+{"version":3,"file":"input-date-picker.js","sources":["../../../../src/components/ui/input-date-picker/input-date-picker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { CalendarIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\n\n// Mirrors the Figma \"InputDatePicker\" component: the date-field **trigger** — a\n// button box that displays a formatted date `value` (or a `startDate – endDate`\n// range when `pickerType=\"dateRange\"`) and a trailing calendar icon, with the field\n// furniture (optional `label` + required `*`, optional `description` / `error`).\n// Themed by the `--ui-input-date-picker-*` tier. The box border is wired per state:\n// idle / hover / open (`open` → `-active`) / focus (`-active` + a 3px\n// `--ui-focus-primary` ring) / disabled; `error` (or `aria-invalid`) swaps the\n// border to `error-box-border-color-*` and the ring to `--ui-focus-error`. The\n// label / value / placeholder / separator / description / icon text colors switch\n// to their `-hover` token on trigger hover **or** `open` — the Figma design groups\n// hover and the open (active) state under one visual treatment for these parts.\n//\n// `ref` targets the trigger `<button>`; `className` and `style` both target the field\n// wrapper (label + box + message), so sizing the field works the same way whichever\n// one a consumer reaches for.\n//\n// This is the trigger only — the calendar popup is NOT in the Figma design or the\n// token tier yet, so the consumer renders the date `value`/range as formatted\n// strings and wires their own calendar to `open` / `onClick`.\nexport interface InputDatePickerProps\n  extends Omit<React.ComponentPropsWithoutRef<'button'>, 'value'> {\n  /** Field label, rendered above the box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the box. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /** Error message below the box. Its presence switches the field to the error treatment. */\n  error?: React.ReactNode;\n  /** Single date or a start–end range. */\n  pickerType?: 'date' | 'dateRange';\n  /** Hint shown when no value is selected. */\n  placeholder?: React.ReactNode;\n  /** Formatted selected date (`pickerType=\"date\"`). */\n  value?: React.ReactNode;\n  /** Formatted range start (`pickerType=\"dateRange\"`). */\n  startDate?: React.ReactNode;\n  /** Formatted range end (`pickerType=\"dateRange\"`). */\n  endDate?: React.ReactNode;\n  /** Separator between range dates. */\n  separator?: React.ReactNode;\n  /** Whether the (consumer-owned) calendar popup is open — paints the active border. */\n  open?: boolean;\n}\n\nconst InputDatePicker = React.forwardRef<HTMLButtonElement, InputDatePickerProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\n      pickerType = 'date',\n      placeholder,\n      value,\n      startDate,\n      endDate,\n      separator = '–',\n      open,\n      disabled,\n      'aria-invalid': ariaInvalid,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n\n    const hasError = error != null && error !== '';\n    const invalid = hasError || ariaInvalid;\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    const isRange = pickerType === 'dateRange';\n    const hasValue = isRange\n      ? (startDate != null && startDate !== '') ||\n        (endDate != null && endDate !== '')\n      : value != null && value !== '';\n\n    return (\n      <div\n        className={cn(\n          'group/field flex min-w-[var(--ui-input-date-picker-global-container-width-min)] flex-col gap-[var(--ui-input-date-picker-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\n        {label != null && label !== '' && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-date-picker-global-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-date-picker-global-label-color-disabled)]'\n                : 'text-[var(--ui-input-date-picker-global-label-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-global-label-color-hover)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-date-picker-global-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n\n        <button\n          ref={ref}\n          id={inputId}\n          type=\"button\"\n          disabled={disabled}\n          aria-invalid={invalid || undefined}\n          aria-required={required || undefined}\n          aria-haspopup=\"dialog\"\n          aria-expanded={open || undefined}\n          aria-describedby={hasMessage ? messageId : undefined}\n          data-open={open || undefined}\n          className={cn(\n            'group/trigger flex h-[var(--ui-input-date-picker-global-box-height)] w-full min-w-0 cursor-pointer items-center gap-[var(--ui-input-date-picker-global-box-gap)] rounded-[var(--ui-input-date-picker-global-box-border-radius)] border bg-[var(--ui-input-date-picker-global-box-color-idle)] border-[var(--ui-input-date-picker-normal-box-border-color-idle)] px-[var(--ui-input-date-picker-global-box-padding-x)] text-start text-sm leading-6 text-[var(--ui-input-date-picker-global-value-color-idle)] outline-none transition-colors',\n            'enabled:not-aria-[invalid=true]:hover:bg-[var(--ui-input-date-picker-global-box-color-hover)] enabled:not-aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-normal-box-border-color-hover)] enabled:not-aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)]',\n            'not-aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-normal-box-border-color-active)] not-aria-[invalid=true]:focus-visible:ring-[3px] not-aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-primary)]',\n            'aria-[invalid=true]:border-[var(--ui-input-date-picker-error-box-border-color-idle)] enabled:aria-[invalid=true]:hover:border-[var(--ui-input-date-picker-error-box-border-color-hover)] enabled:aria-[invalid=true]:hover:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:data-[open]:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:data-[open]:text-[var(--ui-input-date-picker-global-value-color-hover)] aria-[invalid=true]:focus-visible:border-[var(--ui-input-date-picker-error-box-border-color-active)] aria-[invalid=true]:focus-visible:ring-[3px] aria-[invalid=true]:focus-visible:ring-[var(--ui-focus-error)]',\n            'disabled:cursor-not-allowed disabled:border-[var(--ui-input-date-picker-normal-box-border-color-disabled)] disabled:bg-[var(--ui-input-date-picker-global-box-color-disabled)] disabled:text-[var(--ui-input-date-picker-global-value-color-disabled)]'\n          )}\n          {...props}\n        >\n          {hasValue ? (\n            isRange ? (\n              <span className=\"flex min-w-0 flex-1 items-center gap-[var(--ui-input-date-picker-global-box-gap-range)] truncate\">\n                <span>{startDate}</span>\n                <span className=\"text-[var(--ui-input-date-picker-global-separator-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-separator-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-separator-color-disabled)]\">\n                  {separator}\n                </span>\n                <span>{endDate}</span>\n              </span>\n            ) : (\n              <span className=\"min-w-0 flex-1 truncate\">{value}</span>\n            )\n          ) : (\n            <span className=\"min-w-0 flex-1 truncate text-[var(--ui-input-date-picker-global-placeholder-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-global-placeholder-color-disabled)]\">\n              {placeholder}\n            </span>\n          )}\n          <span className=\"flex size-[var(--ui-input-date-picker-global-icon-box-size)] shrink-0 items-center justify-center\">\n            <CalendarIcon\n              size={16}\n              className=\"text-[var(--ui-input-date-picker-normal-icon-color-idle)] group-hover/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-data-[open]/trigger:text-[var(--ui-input-date-picker-normal-icon-color-hover)] group-disabled/trigger:text-[var(--ui-input-date-picker-normal-icon-color-disabled)] group-aria-[invalid=true]/trigger:text-[var(--ui-input-date-picker-error-icon-color-idle)] group-aria-[invalid=true]/trigger:group-hover/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)] group-aria-[invalid=true]/trigger:group-data-[open]/trigger:text-[var(--ui-input-date-picker-error-icon-color-hover)]\"\n            />\n          </span>\n        </button>\n\n        {hasMessage && (\n          <p\n            id={messageId}\n            className={cn(\n              'text-xs leading-4',\n              hasError\n                ? 'text-[var(--ui-input-date-picker-error-error-msg-color)]'\n                : disabled\n                  ? 'text-[var(--ui-input-date-picker-normal-description-color-disabled)]'\n                  : 'text-[var(--ui-input-date-picker-normal-description-color-idle)] group-has-[button:hover,button[data-open]]/field:text-[var(--ui-input-date-picker-normal-description-color-hover)]'\n            )}\n          >\n            {message}\n          </p>\n        )}\n      </div>\n    );\n  }\n);\nInputDatePicker.displayName = 'InputDatePicker';\n\nexport { InputDatePicker };\n"],"names":["InputDatePicker","React","className","style","id","label","required","description","error","pickerType","placeholder","value","startDate","endDate","separator","open","disabled","ariaInvalid","props","ref","reactId","inputId","messageId","hasError","invalid","message","hasMessage","isRange","hasValue","jsxs","cn","jsx","CalendarIcon"],"mappings":"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"}

package/dist/components/ui/input-password/input-password.js

@@ -1,25 +1,25 @@
 import { jsxs as b, jsx as o } from "react/jsx-runtime";
 import * as c from "react";
-import { EyeIcon as P, EyeCrossedIcon as C } from "@acronis-platform/icons-react/stroke-mono";
-import { cn as t } from "../../../lib/utils.js";
-import { ButtonIconInput as E } from "../button-icon-input/button-icon-input.js";
-function j({
+import { EyeIcon as E, EyeOffIcon as j } from "@acronis-platform/icons-react/stroke-mono";
+import { cn as e } from "../../../lib/utils.js";
+import { ButtonIconInput as k } from "../button-icon-input/button-icon-input.js";
+function B({
   htmlFor: a,
   disabled: r,
-  required: s,
-  children: i
+  required: l,
+  children: s
 }) {
   return /* @__PURE__ */ b(
     "label",
     {
       htmlFor: a,
-      className: t(
+      className: e(
         "flex gap-[var(--ui-input-password-global-container-label-gap)] text-sm leading-4",
         r ? "text-[var(--ui-input-password-global-label-color-disabled)]" : "text-[var(--ui-input-password-global-label-color-idle)]"
       ),
       children: [
-        i,
-        s && /* @__PURE__ */ o(
+        s,
+        l && /* @__PURE__ */ o(
           "span",
           {
             "aria-hidden": "true",
@@ -31,28 +31,28 @@ function j({
     }
   );
 }
-function k({
+function C({
   id: a,
   hasError: r,
-  disabled: s,
-  children: i
+  disabled: l,
+  children: s
 }) {
   return /* @__PURE__ */ o(
     "p",
     {
       id: a,
-      className: t(
+      className: e(
         "text-xs leading-4",
-        r ? "text-[var(--ui-input-password-error-msg-error-color)]" : s ? "text-[var(--ui-input-password-normal-description-color-disabled)]" : "text-[var(--ui-input-password-normal-description-color-idle)]"
+        r ? "text-[var(--ui-input-password-error-msg-error-color)]" : l ? "text-[var(--ui-input-password-normal-description-color-disabled)]" : "text-[var(--ui-input-password-normal-description-color-idle)]"
       ),
-      children: i
+      children: s
     }
   );
 }
-function B(a, r) {
-  return t(
+function M(a, r) {
+  return e(
     "flex h-[var(--ui-input-password-global-box-height)] items-center gap-[var(--ui-input-password-global-box-gap)] rounded-[var(--ui-input-password-global-box-border-radius)] border-[length:var(--ui-input-password-global-box-border-width)] px-[var(--ui-input-password-global-box-padding-x)] py-[var(--ui-input-password-global-box-padding-y)] transition-colors",
-    a ? "border-[var(--ui-input-password-error-msg-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)] has-[:focus-visible]:border-[var(--ui-input-password-error-msg-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-error)]" : t(
+    a ? "border-[var(--ui-input-password-error-msg-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)] has-[:focus-visible]:border-[var(--ui-input-password-error-msg-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-error)]" : e(
       "border-[var(--ui-input-password-normal-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)]",
       !r && "hover:border-[var(--ui-input-password-normal-box-border-color-hover)] hover:bg-[var(--ui-input-password-global-box-color-hover)]",
       "has-[:focus-visible]:border-[var(--ui-input-password-normal-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-primary)]"
@@ -60,61 +60,71 @@ function B(a, r) {
     r && "cursor-not-allowed border-[var(--ui-input-password-normal-box-border-color-disabled)] bg-[var(--ui-input-password-global-box-color-disabled)]"
   );
 }
-const M = c.forwardRef(
+const R = c.forwardRef(
   ({
     className: a,
-    id: r,
+    style: r,
+    id: l,
     label: s,
-    required: i,
-    description: w,
+    required: v,
+    description: x,
     error: d,
-    disabled: e,
-    showPasswordLabel: x = "Show password",
-    hidePasswordLabel: m = "Hide password",
-    ...h
-  }, f) => {
-    const I = c.useId(), p = r ?? I, v = `${p}-message`, [n, N] = c.useState(!1), l = d != null && d !== "", u = l ? d : w, g = u != null && u !== "";
-    return /* @__PURE__ */ b("div", { className: "flex w-full min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]", children: [
-      s != null && s !== "" && /* @__PURE__ */ o(j, { htmlFor: p, disabled: e, required: i, children: s }),
-      /* @__PURE__ */ b("div", { className: B(l, e), children: [
-        /* @__PURE__ */ o(
-          "input",
-          {
-            ref: f,
-            id: p,
-            type: n ? "text" : "password",
-            disabled: e,
-            "aria-invalid": l || void 0,
-            "aria-required": i || void 0,
-            "aria-describedby": g ? v : void 0,
-            className: t(
-              "min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none",
-              e ? "text-[var(--ui-input-password-global-value-color-disabled)] placeholder:text-[var(--ui-input-password-global-placeholder-color-disabled)]" : "text-[var(--ui-input-password-global-value-color-idle)] placeholder:text-[var(--ui-input-password-global-placeholder-color-idle)]",
-              a
-            ),
-            ...h
-          }
+    disabled: i,
+    showPasswordLabel: m = "Show password",
+    hidePasswordLabel: h = "Hide password",
+    ...f
+  }, I) => {
+    const N = c.useId(), p = l ?? N, g = `${p}-message`, [n, y] = c.useState(!1), t = d != null && d !== "", u = t ? d : x, w = u != null && u !== "";
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        className: e(
+          "flex min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]",
+          a
         ),
-        /* @__PURE__ */ o(
-          E,
-          {
-            variant: l ? "error" : "normal",
-            onClick: () => N((y) => !y),
-            disabled: e,
-            "aria-label": n ? m : x,
-            "aria-pressed": n,
-            className: "shrink-0",
-            children: n ? /* @__PURE__ */ o(P, {}) : /* @__PURE__ */ o(C, {})
-          }
-        )
-      ] }),
-      g && /* @__PURE__ */ o(k, { id: v, hasError: l, disabled: e, children: u })
-    ] });
+        style: r,
+        children: [
+          s != null && s !== "" && /* @__PURE__ */ o(B, { htmlFor: p, disabled: i, required: v, children: s }),
+          /* @__PURE__ */ b("div", { className: M(t, i), children: [
+            /* @__PURE__ */ o(
+              "input",
+              {
+                ref: I,
+                id: p,
+                type: n ? "text" : "password",
+                disabled: i,
+                "aria-invalid": t || void 0,
+                "aria-required": v || void 0,
+                "aria-describedby": w ? g : void 0,
+                className: e(
+                  "min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none",
+                  i ? "text-[var(--ui-input-password-global-value-color-disabled)] placeholder:text-[var(--ui-input-password-global-placeholder-color-disabled)]" : "text-[var(--ui-input-password-global-value-color-idle)] placeholder:text-[var(--ui-input-password-global-placeholder-color-idle)]"
+                ),
+                ...f
+              }
+            ),
+            /* @__PURE__ */ o(
+              k,
+              {
+                variant: t ? "error" : "normal",
+                onClick: () => y((P) => !P),
+                disabled: i,
+                "aria-label": n ? h : m,
+                "aria-pressed": n,
+                className: "shrink-0",
+                children: n ? /* @__PURE__ */ o(E, {}) : /* @__PURE__ */ o(j, {})
+              }
+            )
+          ] }),
+          w && /* @__PURE__ */ o(C, { id: g, hasError: t, disabled: i, children: u })
+        ]
+      }
+    );
   }
 );
-M.displayName = "InputPassword";
+R.displayName = "InputPassword";
 export {
-  M as InputPassword,
-  B as getInputPasswordBoxClassName
+  R as InputPassword,
+  M as getInputPasswordBoxClassName
 };
 //# sourceMappingURL=input-password.js.map

package/dist/components/ui/input-password/input-password.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-password.js","sources":["../../../../src/components/ui/input-password/input-password.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  EyeIcon,\n  EyeCrossedIcon,\n} from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIconInput } from '../button-icon-input';\n\n// Mirrors the Figma \"InputPassword\" component: an `InputText`-shaped field\n// (label / required / description / error) with a built-in show/hide toggle.\n// Unlike `InputText`, the box itself isn't the bare `Input` primitive — the\n// design gives InputPassword its own token tier (`--ui-input-password-*`)\n// down to the box fill/border, so the value input renders borderless/\n// transparent inside a themed flex container alongside the toggle button\n// (the tier's own `global-box-gap` token implies this layout, not an\n// absolutely-positioned overlay). The toggle is the Figma \"ButtonIconInput\"\n// instance, rendered here via the `ButtonIconInput` component. Visibility is\n// fully internal state; nothing in the design calls for a consumer-controlled\n// mode.\nexport interface InputPasswordProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children' | 'type'> {\n  /** Field label, rendered above the input. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the input. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /**\n   * Error message below the input. Its presence switches the field to the error\n   * treatment (red box border + red message).\n   */\n  error?: React.ReactNode;\n  /** Accessible label for the toggle button while the password is hidden. */\n  showPasswordLabel?: string;\n  /** Accessible label for the toggle button while the password is shown. */\n  hidePasswordLabel?: string;\n}\n\ninterface InputPasswordLabelProps {\n  htmlFor: string;\n  disabled?: boolean;\n  required?: boolean;\n  children: React.ReactNode;\n}\n\nfunction InputPasswordLabel({\n  htmlFor,\n  disabled,\n  required,\n  children,\n}: InputPasswordLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'flex gap-[var(--ui-input-password-global-container-label-gap)] text-sm leading-4',\n        disabled\n          ? 'text-[var(--ui-input-password-global-label-color-disabled)]'\n          : 'text-[var(--ui-input-password-global-label-color-idle)]'\n      )}\n    >\n      {children}\n      {required && (\n        <span\n          aria-hidden=\"true\"\n          className=\"text-[var(--ui-input-password-global-required-color)]\"\n        >\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\ninterface InputPasswordMessageProps {\n  id: string;\n  hasError: boolean;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nfunction InputPasswordMessage({\n  id,\n  hasError,\n  disabled,\n  children,\n}: InputPasswordMessageProps) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        'text-xs leading-4',\n        hasError\n          ? 'text-[var(--ui-input-password-error-msg-error-color)]'\n          : disabled\n            ? 'text-[var(--ui-input-password-normal-description-color-disabled)]'\n            : 'text-[var(--ui-input-password-normal-description-color-idle)]'\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\n// The box's border/background/focus-ring classes branch on `hasError` and\n// `disabled` independently, so inlining it is a 3-way nested ternary. Pulled\n// out as a pure function so the branches can be unit-tested directly.\nexport function getInputPasswordBoxClassName(\n  hasError: boolean,\n  disabled?: boolean\n) {\n  return cn(\n    'flex h-[var(--ui-input-password-global-box-height)] items-center gap-[var(--ui-input-password-global-box-gap)] rounded-[var(--ui-input-password-global-box-border-radius)] border-[length:var(--ui-input-password-global-box-border-width)] px-[var(--ui-input-password-global-box-padding-x)] py-[var(--ui-input-password-global-box-padding-y)] transition-colors',\n    hasError\n      ? 'border-[var(--ui-input-password-error-msg-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)] has-[:focus-visible]:border-[var(--ui-input-password-error-msg-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-error)]'\n      : cn(\n          'border-[var(--ui-input-password-normal-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)]',\n          !disabled &&\n            'hover:border-[var(--ui-input-password-normal-box-border-color-hover)] hover:bg-[var(--ui-input-password-global-box-color-hover)]',\n          'has-[:focus-visible]:border-[var(--ui-input-password-normal-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-primary)]'\n        ),\n    disabled &&\n      'cursor-not-allowed border-[var(--ui-input-password-normal-box-border-color-disabled)] bg-[var(--ui-input-password-global-box-color-disabled)]'\n  );\n}\n\nconst InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      description,\n      error,\n      disabled,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n    const [visible, setVisible] = React.useState(false);\n\n    const hasError = error != null && error !== '';\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    return (\n      <div className=\"flex w-full min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]\">\n        {label != null && label !== '' && (\n          <InputPasswordLabel htmlFor={inputId} disabled={disabled} required={required}>\n            {label}\n          </InputPasswordLabel>\n        )}\n\n        <div className={getInputPasswordBoxClassName(hasError, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            type={visible ? 'text' : 'password'}\n            disabled={disabled}\n            aria-invalid={hasError || undefined}\n            aria-required={required || undefined}\n            aria-describedby={hasMessage ? messageId : undefined}\n            className={cn(\n              'min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none',\n              disabled\n                ? 'text-[var(--ui-input-password-global-value-color-disabled)] placeholder:text-[var(--ui-input-password-global-placeholder-color-disabled)]'\n                : 'text-[var(--ui-input-password-global-value-color-idle)] placeholder:text-[var(--ui-input-password-global-placeholder-color-idle)]',\n              className\n            )}\n            {...props}\n          />\n          <ButtonIconInput\n            variant={hasError ? 'error' : 'normal'}\n            onClick={() => setVisible((prev) => !prev)}\n            disabled={disabled}\n            aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n            aria-pressed={visible}\n            className=\"shrink-0\"\n          >\n            {visible ? <EyeIcon /> : <EyeCrossedIcon />}\n          </ButtonIconInput>\n        </div>\n\n        {hasMessage && (\n          <InputPasswordMessage id={messageId} hasError={hasError} disabled={disabled}>\n            {message}\n          </InputPasswordMessage>\n        )}\n      </div>\n    );\n  }\n);\nInputPassword.displayName = 'InputPassword';\n\nexport { InputPassword };\n"],"names":["InputPasswordLabel","htmlFor","disabled","required","children","jsxs","cn","jsx","InputPasswordMessage","id","hasError","getInputPasswordBoxClassName","InputPassword","React","className","label","description","error","showPasswordLabel","hidePasswordLabel","props","ref","reactId","inputId","messageId","visible","setVisible","message","hasMessage","ButtonIconInput","prev","EyeIcon","EyeCrossedIcon"],"mappings":"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"}
+{"version":3,"file":"input-password.js","sources":["../../../../src/components/ui/input-password/input-password.tsx"],"sourcesContent":["import * as React from 'react';\nimport { EyeIcon, EyeOffIcon } from '@acronis-platform/icons-react/stroke-mono';\n\nimport { cn } from '@/lib/utils';\nimport { ButtonIconInput } from '../button-icon-input';\n\n// Mirrors the Figma \"InputPassword\" component: an `InputText`-shaped field\n// (label / required / description / error) with a built-in show/hide toggle.\n// Unlike `InputText`, the box itself isn't the bare `Input` primitive — the\n// design gives InputPassword its own token tier (`--ui-input-password-*`)\n// down to the box fill/border, so the value input renders borderless/\n// transparent inside a themed flex container alongside the toggle button\n// (the tier's own `global-box-gap` token implies this layout, not an\n// absolutely-positioned overlay). The toggle is the Figma \"ButtonIconInput\"\n// instance, rendered here via the `ButtonIconInput` component. Visibility is\n// fully internal state; nothing in the design calls for a consumer-controlled\n// mode. `ref` targets the underlying `<input>`; `className` and `style` both\n// target the field wrapper (label + box + message), so sizing the field works\n// the same way whichever one a consumer reaches for.\nexport interface InputPasswordProps\n  extends Omit<React.ComponentPropsWithoutRef<'input'>, 'children' | 'type'> {\n  /** Field label, rendered above the input. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n  /** Helper text below the input. Hidden while `error` is set. */\n  description?: React.ReactNode;\n  /**\n   * Error message below the input. Its presence switches the field to the error\n   * treatment (red box border + red message).\n   */\n  error?: React.ReactNode;\n  /** Accessible label for the toggle button while the password is hidden. */\n  showPasswordLabel?: string;\n  /** Accessible label for the toggle button while the password is shown. */\n  hidePasswordLabel?: string;\n}\n\ninterface InputPasswordLabelProps {\n  htmlFor: string;\n  disabled?: boolean;\n  required?: boolean;\n  children: React.ReactNode;\n}\n\nfunction InputPasswordLabel({\n  htmlFor,\n  disabled,\n  required,\n  children,\n}: InputPasswordLabelProps) {\n  return (\n    <label\n      htmlFor={htmlFor}\n      className={cn(\n        'flex gap-[var(--ui-input-password-global-container-label-gap)] text-sm leading-4',\n        disabled\n          ? 'text-[var(--ui-input-password-global-label-color-disabled)]'\n          : 'text-[var(--ui-input-password-global-label-color-idle)]'\n      )}\n    >\n      {children}\n      {required && (\n        <span\n          aria-hidden=\"true\"\n          className=\"text-[var(--ui-input-password-global-required-color)]\"\n        >\n          *\n        </span>\n      )}\n    </label>\n  );\n}\n\ninterface InputPasswordMessageProps {\n  id: string;\n  hasError: boolean;\n  disabled?: boolean;\n  children: React.ReactNode;\n}\n\nfunction InputPasswordMessage({\n  id,\n  hasError,\n  disabled,\n  children,\n}: InputPasswordMessageProps) {\n  return (\n    <p\n      id={id}\n      className={cn(\n        'text-xs leading-4',\n        hasError\n          ? 'text-[var(--ui-input-password-error-msg-error-color)]'\n          : disabled\n            ? 'text-[var(--ui-input-password-normal-description-color-disabled)]'\n            : 'text-[var(--ui-input-password-normal-description-color-idle)]'\n      )}\n    >\n      {children}\n    </p>\n  );\n}\n\n// The box's border/background/focus-ring classes branch on `hasError` and\n// `disabled` independently, so inlining it is a 3-way nested ternary. Pulled\n// out as a pure function so the branches can be unit-tested directly.\nexport function getInputPasswordBoxClassName(\n  hasError: boolean,\n  disabled?: boolean\n) {\n  return cn(\n    'flex h-[var(--ui-input-password-global-box-height)] items-center gap-[var(--ui-input-password-global-box-gap)] rounded-[var(--ui-input-password-global-box-border-radius)] border-[length:var(--ui-input-password-global-box-border-width)] px-[var(--ui-input-password-global-box-padding-x)] py-[var(--ui-input-password-global-box-padding-y)] transition-colors',\n    hasError\n      ? 'border-[var(--ui-input-password-error-msg-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)] has-[:focus-visible]:border-[var(--ui-input-password-error-msg-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-error)]'\n      : cn(\n          'border-[var(--ui-input-password-normal-box-border-color-idle)] bg-[var(--ui-input-password-global-box-color-idle)]',\n          !disabled &&\n            'hover:border-[var(--ui-input-password-normal-box-border-color-hover)] hover:bg-[var(--ui-input-password-global-box-color-hover)]',\n          'has-[:focus-visible]:border-[var(--ui-input-password-normal-box-border-color-hover)] has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-[var(--ui-focus-primary)]'\n        ),\n    disabled &&\n      'cursor-not-allowed border-[var(--ui-input-password-normal-box-border-color-disabled)] bg-[var(--ui-input-password-global-box-color-disabled)]'\n  );\n}\n\nconst InputPassword = React.forwardRef<HTMLInputElement, InputPasswordProps>(\n  (\n    {\n      className,\n      style,\n      id,\n      label,\n      required,\n      description,\n      error,\n      disabled,\n      showPasswordLabel = 'Show password',\n      hidePasswordLabel = 'Hide password',\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const messageId = `${inputId}-message`;\n    const [visible, setVisible] = React.useState(false);\n\n    const hasError = error != null && error !== '';\n    const message = hasError ? error : description;\n    const hasMessage = message != null && message !== '';\n\n    return (\n      <div\n        className={cn(\n          'flex min-w-[var(--ui-input-password-global-container-width-min)] flex-col gap-[var(--ui-input-password-global-container-gap)]',\n          className\n        )}\n        style={style}\n      >\n        {label != null && label !== '' && (\n          <InputPasswordLabel htmlFor={inputId} disabled={disabled} required={required}>\n            {label}\n          </InputPasswordLabel>\n        )}\n\n        <div className={getInputPasswordBoxClassName(hasError, disabled)}>\n          <input\n            ref={ref}\n            id={inputId}\n            type={visible ? 'text' : 'password'}\n            disabled={disabled}\n            aria-invalid={hasError || undefined}\n            aria-required={required || undefined}\n            aria-describedby={hasMessage ? messageId : undefined}\n            className={cn(\n              'min-w-0 flex-1 bg-transparent text-sm leading-6 outline-none',\n              disabled\n                ? 'text-[var(--ui-input-password-global-value-color-disabled)] placeholder:text-[var(--ui-input-password-global-placeholder-color-disabled)]'\n                : 'text-[var(--ui-input-password-global-value-color-idle)] placeholder:text-[var(--ui-input-password-global-placeholder-color-idle)]'\n            )}\n            {...props}\n          />\n          <ButtonIconInput\n            variant={hasError ? 'error' : 'normal'}\n            onClick={() => setVisible((prev) => !prev)}\n            disabled={disabled}\n            aria-label={visible ? hidePasswordLabel : showPasswordLabel}\n            aria-pressed={visible}\n            className=\"shrink-0\"\n          >\n            {visible ? <EyeIcon /> : <EyeOffIcon />}\n          </ButtonIconInput>\n        </div>\n\n        {hasMessage && (\n          <InputPasswordMessage id={messageId} hasError={hasError} disabled={disabled}>\n            {message}\n          </InputPasswordMessage>\n        )}\n      </div>\n    );\n  }\n);\nInputPassword.displayName = 'InputPassword';\n\nexport { InputPassword };\n"],"names":["InputPasswordLabel","htmlFor","disabled","required","children","jsxs","cn","jsx","InputPasswordMessage","id","hasError","getInputPasswordBoxClassName","InputPassword","React","className","style","label","description","error","showPasswordLabel","hidePasswordLabel","props","ref","reactId","inputId","messageId","visible","setVisible","message","hasMessage","ButtonIconInput","prev","EyeIcon","EyeOffIcon"],"mappings":"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"}

package/dist/components/ui/input-search/input-search.js

@@ -1,19 +1,19 @@
-import { jsxs as c, jsx as l } from "react/jsx-runtime";
-import * as o from "react";
+import { jsxs as c, jsx as o } from "react/jsx-runtime";
+import * as l from "react";
 import { cn as s } from "../../../lib/utils.js";
 import { SearchBox as f } from "../search/search.js";
-const v = o.forwardRef(
+const v = l.forwardRef(
   ({
-    className: u,
-    id: p,
+    className: p,
+    id: u,
     label: a,
     required: r,
     disabled: e,
     "aria-label": i,
     ...d
   }, h) => {
-    const m = o.useId(), t = p ?? m, n = a != null && a !== "", x = n ? { "aria-label": void 0 } : i != null ? { "aria-label": i } : {};
-    return /* @__PURE__ */ c("div", { className: s("flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]", u), children: [
+    const m = l.useId(), t = u ?? m, n = a != null && a !== "", x = n ? { "aria-label": void 0 } : i != null ? { "aria-label": i } : {};
+    return /* @__PURE__ */ c("div", { className: s("flex min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]", p), children: [
       n && /* @__PURE__ */ c(
         "label",
         {
@@ -24,7 +24,7 @@ const v = o.forwardRef(
           ),
           children: [
             a,
-            r && /* @__PURE__ */ l(
+            r && /* @__PURE__ */ o(
               "span",
               {
                 "aria-hidden": "true",
@@ -35,7 +35,7 @@ const v = o.forwardRef(
           ]
         }
       ),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ o(
         f,
         {
           ref: h,

package/dist/components/ui/input-search/input-search.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-search.js","sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { SearchBox, type SearchBoxProps } from '../search';\n\n// Mirrors the Figma \"InputSearch\" component: a full search field built around the\n// bare `SearchBox` (themed by the `--ui-input-search-*` tier). It adds the field\n// furniture — an optional `label` above the box (with an optional `required` `*`).\n// Every other prop (placeholder, value, onClear, disabled, …) passes straight\n// through to `Search`. Label colors come from `--ui-input-search-color-{idle,disabled}`\n// and the required marker from `--ui-input-search-required-color`, so brand overrides\n// are honored. When a visible label is present it names the field via `htmlFor`/`id`,\n// and `Search`'s built-in `aria-label=\"Search\"` is cleared so it doesn't shadow the\n// visible label.\nexport interface InputSearchProps extends SearchBoxProps {\n  /** Field label, rendered above the search box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n}\n\nconst InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const hasLabel = label != null && label !== '';\n\n    // A visible label names the field via `htmlFor`/`id`, so clear `Search`'s\n    // default `aria-label`. With no label, forward the caller's `aria-label` (if\n    // any) and otherwise let `Search`'s default stand.\n    const ariaLabelProps = hasLabel\n      ? { 'aria-label': undefined }\n      : ariaLabel != null\n        ? { 'aria-label': ariaLabel }\n        : {};\n\n    return (\n      <div className={cn('flex w-full min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]', className)}>\n        {hasLabel && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-search-color-disabled)]'\n                : 'text-[var(--ui-input-search-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-search-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <SearchBox\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-required={required || undefined}\n          {...ariaLabelProps}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nInputSearch.displayName = 'InputSearch';\n\nexport { InputSearch };\n"],"names":["InputSearch","React","className","id","label","required","disabled","ariaLabel","props","ref","reactId","inputId","hasLabel","ariaLabelProps","cn","jsxs","jsx","SearchBox"],"mappings":";;;;AAqBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUT,EAAM,MAAA,GAChBU,IAAUR,KAAMO,GAChBE,IAAWR,KAAS,QAAQA,MAAU,IAKtCS,IAAiBD,IACnB,EAAE,cAAc,OAAA,IAChBL,KAAa,OACX,EAAE,cAAcA,EAAA,IAChB,CAAA;AAEN,6BACG,OAAA,EAAI,WAAWO,EAAG,sHAAsHZ,CAAS,GAC/I,UAAA;AAAA,MAAAU,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASJ;AAAA,UACT,WAAWG;AAAA,YACT;AAAA,YACAR,IACI,iDACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAF;AAAA,YACAC,KACC,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,iBAAeD,KAAY;AAAA,UAC1B,GAAGQ;AAAA,UACH,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AACAR,EAAY,cAAc;"}
+{"version":3,"file":"input-search.js","sources":["../../../../src/components/ui/input-search/input-search.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\nimport { SearchBox, type SearchBoxProps } from '../search';\n\n// Mirrors the Figma \"InputSearch\" component: a full search field built around the\n// bare `SearchBox` (themed by the `--ui-input-search-*` tier). It adds the field\n// furniture — an optional `label` above the box (with an optional `required` `*`).\n// Every other prop (placeholder, value, onClear, disabled, …) passes straight\n// through to `Search`. Label colors come from `--ui-input-search-color-{idle,disabled}`\n// and the required marker from `--ui-input-search-required-color`, so brand overrides\n// are honored. When a visible label is present it names the field via `htmlFor`/`id`,\n// and `Search`'s built-in `aria-label=\"Search\"` is cleared so it doesn't shadow the\n// visible label.\nexport interface InputSearchProps extends SearchBoxProps {\n  /** Field label, rendered above the search box. */\n  label?: React.ReactNode;\n  /** Marks the field required — appends a `*` after the label. */\n  required?: boolean;\n}\n\nconst InputSearch = React.forwardRef<HTMLInputElement, InputSearchProps>(\n  (\n    {\n      className,\n      id,\n      label,\n      required,\n      disabled,\n      'aria-label': ariaLabel,\n      ...props\n    },\n    ref\n  ) => {\n    const reactId = React.useId();\n    const inputId = id ?? reactId;\n    const hasLabel = label != null && label !== '';\n\n    // A visible label names the field via `htmlFor`/`id`, so clear `Search`'s\n    // default `aria-label`. With no label, forward the caller's `aria-label` (if\n    // any) and otherwise let `Search`'s default stand.\n    const ariaLabelProps = hasLabel\n      ? { 'aria-label': undefined }\n      : ariaLabel != null\n        ? { 'aria-label': ariaLabel }\n        : {};\n\n    return (\n      <div className={cn('flex min-w-[var(--ui-input-search-container-width-min)] flex-col gap-[var(--ui-input-search-container-gap)]', className)}>\n        {hasLabel && (\n          <label\n            htmlFor={inputId}\n            className={cn(\n              'flex gap-[var(--ui-input-search-container-label-gap)] text-sm leading-4',\n              disabled\n                ? 'text-[var(--ui-input-search-color-disabled)]'\n                : 'text-[var(--ui-input-search-color-idle)]'\n            )}\n          >\n            {label}\n            {required && (\n              <span\n                aria-hidden=\"true\"\n                className=\"text-[var(--ui-input-search-required-color)]\"\n              >\n                *\n              </span>\n            )}\n          </label>\n        )}\n        <SearchBox\n          ref={ref}\n          id={inputId}\n          disabled={disabled}\n          aria-required={required || undefined}\n          {...ariaLabelProps}\n          {...props}\n        />\n      </div>\n    );\n  }\n);\nInputSearch.displayName = 'InputSearch';\n\nexport { InputSearch };\n"],"names":["InputSearch","React","className","id","label","required","disabled","ariaLabel","props","ref","reactId","inputId","hasLabel","ariaLabelProps","cn","jsxs","jsx","SearchBox"],"mappings":";;;;AAqBA,MAAMA,IAAcC,EAAM;AAAA,EACxB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,IAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,cAAcC;AAAA,IACd,GAAGC;AAAA,EAAA,GAELC,MACG;AACH,UAAMC,IAAUT,EAAM,MAAA,GAChBU,IAAUR,KAAMO,GAChBE,IAAWR,KAAS,QAAQA,MAAU,IAKtCS,IAAiBD,IACnB,EAAE,cAAc,OAAA,IAChBL,KAAa,OACX,EAAE,cAAcA,EAAA,IAChB,CAAA;AAEN,6BACG,OAAA,EAAI,WAAWO,EAAG,+GAA+GZ,CAAS,GACxI,UAAA;AAAA,MAAAU,KACC,gBAAAG;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,SAASJ;AAAA,UACT,WAAWG;AAAA,YACT;AAAA,YACAR,IACI,iDACA;AAAA,UAAA;AAAA,UAGL,UAAA;AAAA,YAAAF;AAAA,YACAC,KACC,gBAAAW;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,eAAY;AAAA,gBACZ,WAAU;AAAA,gBACX,UAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UAED;AAAA,QAAA;AAAA,MAAA;AAAA,MAIN,gBAAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,KAAAR;AAAA,UACA,IAAIE;AAAA,UACJ,UAAAL;AAAA,UACA,iBAAeD,KAAY;AAAA,UAC1B,GAAGQ;AAAA,UACH,GAAGL;AAAA,QAAA;AAAA,MAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AACAR,EAAY,cAAc;"}