npm - @acronis-platform/ui-react - Versions diffs - 0.62.0 → 1.0.0 - Mend

@acronis-platform/ui-react 0.62.0 → 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (190) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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":"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"}
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`. 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":";;;;AAkDA,MAAMA,IAAkBC,EAAM;AAAA,EAC5B,CACE;AAAA,IACE,WAAAC;AAAA,IACA,OAAAC;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,IAAUnB,EAAM,MAAA,GAChBoB,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;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC;AAAA,UACT;AAAA,UACA5B;AAAA,QAAA;AAAA,QAEF,OAAAC;AAAA,QAEC,UAAA;AAAA,UAAAE,KAAS,QAAQA,MAAU,MAC1B,gBAAAwB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,SAASR;AAAA,cACT,WAAWS;AAAA,gBACT;AAAA,gBACAd,IACI,mEACA;AAAA,cAAA;AAAA,cAGL,UAAA;AAAA,gBAAAX;AAAA,gBACAC,KACC,gBAAAyB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,eAAY;AAAA,oBACZ,WAAU;AAAA,oBACX,UAAA;AAAA,kBAAA;AAAA,gBAAA;AAAA,cAED;AAAA,YAAA;AAAA,UAAA;AAAA,UAKN,gBAAAF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAAV;AAAA,cACA,IAAIE;AAAA,cACJ,MAAK;AAAA,cACL,UAAAL;AAAA,cACA,gBAAcQ,KAAW;AAAA,cACzB,iBAAelB,KAAY;AAAA,cAC3B,iBAAc;AAAA,cACd,iBAAeS,KAAQ;AAAA,cACvB,oBAAkBW,IAAaJ,IAAY;AAAA,cAC3C,aAAWP,KAAQ;AAAA,cACnB,WAAWe;AAAA,gBACT;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,gBACA;AAAA,cAAA;AAAA,cAED,GAAGZ;AAAA,cAEH,UAAA;AAAA,gBAAAU,IACCD,IACE,gBAAAE,EAAC,QAAA,EAAK,WAAU,oGACd,UAAA;AAAA,kBAAA,gBAAAE,EAAC,UAAM,UAAAnB,EAAA,CAAU;AAAA,kBACjB,gBAAAmB,EAAC,QAAA,EAAK,WAAU,0UACb,UAAAjB,GACH;AAAA,kBACA,gBAAAiB,EAAC,UAAM,UAAAlB,EAAA,CAAQ;AAAA,gBAAA,EAAA,CACjB,IAEA,gBAAAkB,EAAC,QAAA,EAAK,WAAU,2BAA2B,UAAApB,EAAA,CAAM,IAGnD,gBAAAoB,EAAC,QAAA,EAAK,WAAU,0WACb,UAAArB,GACH;AAAA,gBAEF,gBAAAqB,EAAC,QAAA,EAAK,WAAU,qGACd,UAAA,gBAAAA;AAAA,kBAACC;AAAA,kBAAA;AAAA,oBACC,MAAM;AAAA,oBACN,WAAU;AAAA,kBAAA;AAAA,gBAAA,EACZ,CACF;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAGDN,KACC,gBAAAK;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAIT;AAAA,cACJ,WAAWQ;AAAA,gBACT;AAAA,gBACAP,IACI,6DACAP,IACE,yEACA;AAAA,cAAA;AAAA,cAGP,UAAAS;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AACAzB,EAAgB,cAAc;"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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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"}
1	+ {"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 CHANGED Viewed

@@ -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 CHANGED Viewed

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