@jiwambe/components 0.2.0

package/dist/components/UploadInput/UploadInput.js

@@ -0,0 +1,297 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+function UploadIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 8L12 3M12 3L7 8M12 3V15" })
+    }
+  );
+}
+function FileIcon({ className, disabled }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "20",
+      height: "20",
+      viewBox: "0 0 20 20",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M11.6668 1.89136V5.33348C11.6668 5.80018 11.6668 6.03354 11.7577 6.2118C11.8376 6.3686 11.965 6.49608 12.1218 6.57598C12.3001 6.66681 12.5335 6.66681 13.0002 6.66681H16.4423M11.6668 14.1667H6.66683M13.3335 10.8334H6.66683M16.6668 8.3236V14.3334C16.6668 15.7335 16.6668 16.4336 16.3943 16.9684C16.1547 17.4388 15.7722 17.8212 15.3018 18.0609C14.767 18.3334 14.067 18.3334 12.6668 18.3334H7.3335C5.93336 18.3334 5.2333 18.3334 4.69852 18.0609C4.22811 17.8212 3.84566 17.4388 3.60598 16.9684C3.3335 16.4336 3.3335 15.7335 3.3335 14.3334V5.66675C3.3335 4.26662 3.3335 3.56655 3.60598 3.03177C3.84566 2.56137 4.22811 2.17892 4.69852 1.93923C5.2333 1.66675 5.93336 1.66675 7.3335 1.66675H10.01C10.6215 1.66675 10.9272 1.66675 11.2149 1.73582C11.47 1.79707 11.7139 1.89808 11.9375 2.03515C12.1898 2.18975 12.406 2.40594 12.8384 2.83832L15.4953 5.49517C15.9276 5.92755 16.1438 6.14374 16.2984 6.39604C16.4355 6.61972 16.5365 6.86358 16.5978 7.11867C16.6668 7.40639 16.6668 7.71213 16.6668 8.3236Z",
+          strokeOpacity: disabled ? 0.5 : void 0
+        }
+      )
+    }
+  );
+}
+function FileIconDisabled({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "14",
+      height: "17",
+      viewBox: "0 0 15 19",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          d: "M9.08333 0.974609V4.41673C9.08333 4.88344 9.08333 5.11679 9.17416 5.29505C9.25406 5.45185 9.38154 5.57934 9.53834 5.65923C9.7166 5.75006 9.94996 5.75006 10.4167 5.75006H13.8588M9.08333 13.25H4.08333M10.75 9.91667H4.08333M14.0833 7.40685V13.4167C14.0833 14.8168 14.0833 15.5169 13.8108 16.0516C13.5712 16.522 13.1887 16.9045 12.7183 17.1442C12.1835 17.4167 11.4835 17.4167 10.0833 17.4167H4.75C3.34987 17.4167 2.6498 17.4167 2.11502 17.1442C1.64462 16.9045 1.26217 16.522 1.02248 16.0516C0.75 15.5169 0.75 14.8168 0.75 13.4167V4.75C0.75 3.34987 0.75 2.6498 1.02248 2.11502C1.26217 1.64462 1.64462 1.26217 2.11502 1.02248C2.6498 0.75 3.34987 0.75 4.75 0.75H7.42648C8.03796 0.75 8.34369 0.75 8.63141 0.819075C8.8865 0.880317 9.13036 0.981328 9.35405 1.1184C9.60634 1.273 9.82253 1.48919 10.2549 1.92157L12.9118 4.57843C13.3441 5.01081 13.5603 5.227 13.7149 5.47929C13.852 5.70297 13.953 5.94683 14.0143 6.20192C14.0833 6.48964 14.0833 6.79538 14.0833 7.40685Z",
+          strokeOpacity: 0.5
+        }
+      )
+    }
+  );
+}
+function CloseIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx("path", { d: "M17 7L7 17M7 7L17 17" })
+    }
+  );
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 20 20",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        "path",
+        {
+          fillRule: "evenodd",
+          d: "M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",
+          clipRule: "evenodd"
+        }
+      )
+    }
+  );
+}
+function UploadListItem({ file, onRemove, disabled }) {
+  const closeBtnClasses = [
+    "flex w-12 h-12 shrink-0 items-center justify-center rounded-rad-md outline-none transition-all duration-150",
+    !disabled && "bg-fill-action-secondary text-text-action-secondary",
+    !disabled && "hover:bg-fill-action-secondary-hover active:bg-fill-action-secondary-active",
+    !disabled && "focus-visible:bg-fill-action-secondary-focus",
+    !disabled && "focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px] focus-visible:rounded-rad-lg",
+    disabled && "bg-fill-action-secondary-disabled text-text-action-secondary-disabled cursor-not-allowed"
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-space-2", children: [
+    /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 self-stretch items-center", children: /* @__PURE__ */ jsxs("div", { className: "flex h-full min-w-0 flex-1 items-center gap-space-2 rounded-rad-md border border-border-form-primary bg-fill-bg-primary px-space-4", children: [
+      disabled ? /* @__PURE__ */ jsx("span", { className: "text-icon-primary-disabled shrink-0", children: /* @__PURE__ */ jsx(FileIconDisabled, { className: "h-[16.667px] w-[13.333px]" }) }) : /* @__PURE__ */ jsx("span", { className: "text-icon-primary shrink-0", children: /* @__PURE__ */ jsx(FileIcon, { className: "w-5 h-5", disabled: false }) }),
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `min-w-0 flex-1 truncate text-text-sm ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+          title: file.name,
+          children: file.name
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: onRemove,
+        "aria-label": `Remove ${file.name}`,
+        className: closeBtnClasses,
+        children: /* @__PURE__ */ jsx(
+          CloseIcon,
+          {
+            className: `w-6 h-6 shrink-0 ${disabled ? "opacity-50" : ""}`
+          }
+        )
+      }
+    )
+  ] });
+}
+function UploadInput({
+  label,
+  secondaryLabel,
+  supportText,
+  uploadLabel = "Upload",
+  onFilesChange,
+  error = false,
+  errorMessage,
+  disabled,
+  className,
+  id: idProp,
+  multiple,
+  accept,
+  ref,
+  ...rest
+}) {
+  const autoId = useId();
+  const id = idProp ?? autoId;
+  const inputRef = useRef(null);
+  const [files, setFiles] = useState([]);
+  const handleInputChange = (e) => {
+    const selected = e.target.files;
+    if (!(selected == null ? void 0 : selected.length)) return;
+    const next = multiple ? [...files, ...Array.from(selected)] : [selected[0]];
+    setFiles(next);
+    onFilesChange == null ? void 0 : onFilesChange(next);
+    e.target.value = "";
+  };
+  const removeFile = (index) => {
+    const next = files.filter((_, i) => i !== index);
+    setFiles(next);
+    onFilesChange == null ? void 0 : onFilesChange(next);
+  };
+  const triggerClick = () => {
+    var _a;
+    if (disabled) return;
+    (_a = inputRef.current) == null ? void 0 : _a.click();
+  };
+  const showErrorAlert = error && errorMessage;
+  const hasFiles = files.length > 0;
+  const buttonClasses = [
+    "flex h-12 items-center justify-center gap-space-2 self-stretch rounded-rad-md px-space-5 outline-none transition-all duration-150",
+    "text-form-text font-medium leading-[1.4]",
+    !disabled && !hasFiles && "bg-fill-action-secondary text-text-action-secondary",
+    !disabled && hasFiles && "bg-fill-action-secondary-active text-text-action-secondary",
+    !disabled && "hover:bg-fill-action-secondary-hover",
+    !disabled && "active:bg-fill-action-secondary-active",
+    !disabled && "focus-visible:bg-fill-action-secondary-focus",
+    !disabled && "focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]",
+    disabled && "cursor-not-allowed bg-fill-action-secondary-disabled text-text-action-secondary-disabled",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-2 w-full", children: [
+    (label || supportText) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-space-1", children: [
+      label && /* @__PURE__ */ jsxs(
+        "span",
+        {
+          className: `text-form-label ${disabled ? "text-text-disabled" : "text-text-primary"}`,
+          children: [
+            label,
+            secondaryLabel && /* @__PURE__ */ jsx("span", { className: "ml-1 font-normal text-text-secondary", children: secondaryLabel })
+          ]
+        }
+      ),
+      supportText && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-secondary"}`,
+          children: supportText
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputRef.current = el;
+          if (typeof ref === "function") ref(el);
+          else if (ref != null) {
+            const r = ref;
+            r.current = el;
+          }
+        },
+        type: "file",
+        id,
+        disabled,
+        multiple,
+        accept,
+        onChange: handleInputChange,
+        className: "sr-only",
+        "aria-invalid": error || void 0,
+        "aria-describedby": showErrorAlert ? `${id}-error` : void 0,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: triggerClick,
+        className: buttonClasses,
+        "aria-label": uploadLabel,
+        children: [
+          /* @__PURE__ */ jsx("span", { children: uploadLabel }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: disabled ? "text-icon-primary-disabled" : "text-icon-primary",
+              children: /* @__PURE__ */ jsx(UploadIcon, { className: "h-6 w-6 shrink-0" })
+            }
+          )
+        ]
+      }
+    ),
+    hasFiles && /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-space-2", "aria-label": "Uploaded files", children: files.map((file, index) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      UploadListItem,
+      {
+        file,
+        onRemove: () => removeFile(index),
+        disabled
+      }
+    ) }, `${file.name}-${index}`)) }),
+    showErrorAlert && /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: `${id}-error`,
+        role: "alert",
+        className: `flex items-start gap-space-4 rounded-rad-md p-space-4 ${disabled ? "bg-fill-bg-secondary" : "bg-fill-bg-err"}`,
+        children: [
+          /* @__PURE__ */ jsx(
+            ErrorIcon,
+            {
+              className: `h-5 w-5 shrink-0 ${disabled ? "text-icon-primary-disabled" : "text-icon-err"}`
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: `text-text-xs ${disabled ? "text-text-disabled" : "text-text-err"}`,
+              children: errorMessage
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+export {
+  UploadInput
+};
+//# sourceMappingURL=UploadInput.js.map

package/dist/components/UploadInput/UploadInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UploadInput.js","sources":["../../../src/components/UploadInput/UploadInput.tsx"],"sourcesContent":["'use client';\n\nimport React, { useId, useRef, useState } from 'react';\n\n// ---------------------------------------------------------------------------\n// Types\n// ---------------------------------------------------------------------------\n\ntype InputRef = React.MutableRefObject<HTMLInputElement | null>;\n\n/**\n * Props for the UploadInput component. Renders a file input (hidden) plus a visible\n * upload button and a list of selected files with remove. Use accept to limit file types\n * (e.g. \"image/*\", \".pdf\"); use multiple for multi-file selection. No drag-and-drop;\n * user clicks the button to open the file picker. onFilesChange is called after add or remove.\n */\nexport interface UploadInputProps\n  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'value' | 'onChange'> {\n  /** Label text displayed above the upload button. @default undefined */\n  label?: string;\n  /** Secondary label shown lighter beside the main label. @default undefined */\n  secondaryLabel?: string;\n  /** Supportive text rendered below the label. @default undefined */\n  supportText?: string;\n  /** Label on the upload button. @default 'Upload' */\n  uploadLabel?: string;\n  /** Called when the file list changes (user adds or removes a file). Receives the new File[]. @default undefined */\n  onFilesChange?: (files: File[]) => void;\n  /** Places the component in an error state. @default false */\n  error?: boolean;\n  /** Error message shown in the alert below when error is true. @default undefined */\n  errorMessage?: string;\n  /** Forwarded ref for the native file input. @default undefined */\n  ref?: React.Ref<HTMLInputElement>;\n}\n\n// ---------------------------------------------------------------------------\n// Icons\n// ---------------------------------------------------------------------------\n\nfunction UploadIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.25\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M21 15V16.2C21 17.8802 21 18.7202 20.673 19.362C20.3854 19.9265 19.9265 20.3854 19.362 20.673C18.7202 21 17.8802 21 16.2 21H7.8C6.11984 21 5.27976 21 4.63803 20.673C4.07354 20.3854 3.6146 19.9265 3.32698 19.362C3 18.7202 3 17.8802 3 16.2V15M17 8L12 3M12 3L7 8M12 3V15\" />\n    </svg>\n  );\n}\n\nfunction FileIcon({ className, disabled }: { className?: string; disabled?: boolean }) {\n  return (\n    <svg\n      className={className}\n      width=\"20\"\n      height=\"20\"\n      viewBox=\"0 0 20 20\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M11.6668 1.89136V5.33348C11.6668 5.80018 11.6668 6.03354 11.7577 6.2118C11.8376 6.3686 11.965 6.49608 12.1218 6.57598C12.3001 6.66681 12.5335 6.66681 13.0002 6.66681H16.4423M11.6668 14.1667H6.66683M13.3335 10.8334H6.66683M16.6668 8.3236V14.3334C16.6668 15.7335 16.6668 16.4336 16.3943 16.9684C16.1547 17.4388 15.7722 17.8212 15.3018 18.0609C14.767 18.3334 14.067 18.3334 12.6668 18.3334H7.3335C5.93336 18.3334 5.2333 18.3334 4.69852 18.0609C4.22811 17.8212 3.84566 17.4388 3.60598 16.9684C3.3335 16.4336 3.3335 15.7335 3.3335 14.3334V5.66675C3.3335 4.26662 3.3335 3.56655 3.60598 3.03177C3.84566 2.56137 4.22811 2.17892 4.69852 1.93923C5.2333 1.66675 5.93336 1.66675 7.3335 1.66675H10.01C10.6215 1.66675 10.9272 1.66675 11.2149 1.73582C11.47 1.79707 11.7139 1.89808 11.9375 2.03515C12.1898 2.18975 12.406 2.40594 12.8384 2.83832L15.4953 5.49517C15.9276 5.92755 16.1438 6.14374 16.2984 6.39604C16.4355 6.61972 16.5365 6.86358 16.5978 7.11867C16.6668 7.40639 16.6668 7.71213 16.6668 8.3236Z\"\n        strokeOpacity={disabled ? 0.5 : undefined}\n      />\n    </svg>\n  );\n}\n\nfunction FileIconDisabled({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"14\"\n      height=\"17\"\n      viewBox=\"0 0 15 19\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.5\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path\n        d=\"M9.08333 0.974609V4.41673C9.08333 4.88344 9.08333 5.11679 9.17416 5.29505C9.25406 5.45185 9.38154 5.57934 9.53834 5.65923C9.7166 5.75006 9.94996 5.75006 10.4167 5.75006H13.8588M9.08333 13.25H4.08333M10.75 9.91667H4.08333M14.0833 7.40685V13.4167C14.0833 14.8168 14.0833 15.5169 13.8108 16.0516C13.5712 16.522 13.1887 16.9045 12.7183 17.1442C12.1835 17.4167 11.4835 17.4167 10.0833 17.4167H4.75C3.34987 17.4167 2.6498 17.4167 2.11502 17.1442C1.64462 16.9045 1.26217 16.522 1.02248 16.0516C0.75 15.5169 0.75 14.8168 0.75 13.4167V4.75C0.75 3.34987 0.75 2.6498 1.02248 2.11502C1.26217 1.64462 1.64462 1.26217 2.11502 1.02248C2.6498 0.75 3.34987 0.75 4.75 0.75H7.42648C8.03796 0.75 8.34369 0.75 8.63141 0.819075C8.8865 0.880317 9.13036 0.981328 9.35405 1.1184C9.60634 1.273 9.82253 1.48919 10.2549 1.92157L12.9118 4.57843C13.3441 5.01081 13.5603 5.227 13.7149 5.47929C13.852 5.70297 13.953 5.94683 14.0143 6.20192C14.0833 6.48964 14.0833 6.79538 14.0833 7.40685Z\"\n        strokeOpacity={0.5}\n      />\n    </svg>\n  );\n}\n\nfunction CloseIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      width=\"24\"\n      height=\"24\"\n      viewBox=\"0 0 24 24\"\n      fill=\"none\"\n      stroke=\"currentColor\"\n      strokeWidth=\"1.25\"\n      strokeLinecap=\"round\"\n      strokeLinejoin=\"round\"\n      aria-hidden=\"true\"\n    >\n      <path d=\"M17 7L7 17M7 7L17 17\" />\n    </svg>\n  );\n}\n\nfunction ErrorIcon({ className }: { className?: string }) {\n  return (\n    <svg\n      className={className}\n      viewBox=\"0 0 20 20\"\n      fill=\"currentColor\"\n      aria-hidden=\"true\"\n    >\n      <path\n        fillRule=\"evenodd\"\n        d=\"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z\"\n        clipRule=\"evenodd\"\n      />\n    </svg>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Upload list item\n// ---------------------------------------------------------------------------\n\ninterface UploadListItemProps {\n  file: File;\n  onRemove: () => void;\n  disabled?: boolean;\n}\n\nfunction UploadListItem({ file, onRemove, disabled }: UploadListItemProps) {\n  const closeBtnClasses = [\n    'flex w-12 h-12 shrink-0 items-center justify-center rounded-rad-md outline-none transition-all duration-150',\n    !disabled && 'bg-fill-action-secondary text-text-action-secondary',\n    !disabled && 'hover:bg-fill-action-secondary-hover active:bg-fill-action-secondary-active',\n    !disabled && 'focus-visible:bg-fill-action-secondary-focus',\n    !disabled && 'focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px] focus-visible:rounded-rad-lg',\n    disabled && 'bg-fill-action-secondary-disabled text-text-action-secondary-disabled cursor-not-allowed',\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className=\"flex items-center gap-space-2\">\n      <div className=\"flex min-w-0 flex-1 self-stretch items-center\">\n        <div className=\"flex h-full min-w-0 flex-1 items-center gap-space-2 rounded-rad-md border border-border-form-primary bg-fill-bg-primary px-space-4\">\n          {disabled ? (\n            <span className=\"text-icon-primary-disabled shrink-0\">\n              <FileIconDisabled className=\"h-[16.667px] w-[13.333px]\" />\n            </span>\n          ) : (\n            <span className=\"text-icon-primary shrink-0\">\n              <FileIcon className=\"w-5 h-5\" disabled={false} />\n            </span>\n          )}\n          <span\n            className={`min-w-0 flex-1 truncate text-text-sm ${\n              disabled ? 'text-text-disabled' : 'text-text-primary'\n            }`}\n            title={file.name}\n          >\n            {file.name}\n          </span>\n        </div>\n      </div>\n\n      <button\n        type=\"button\"\n        disabled={disabled}\n        onClick={onRemove}\n        aria-label={`Remove ${file.name}`}\n        className={closeBtnClasses}\n      >\n        <CloseIcon\n          className={`w-6 h-6 shrink-0 ${\n            disabled ? 'opacity-50' : ''\n          }`}\n        />\n      </button>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * File upload control: a visible upload button (opens the file picker) and a list of\n * selected files with remove buttons. Pass accept (e.g. \"image/*\") to limit types;\n * pass multiple to allow multiple selection. onFilesChange is called when files are\n * added or removed. No drag-and-drop; use the button to select files.\n *\n * @example\n * <UploadInput label=\"Document\" uploadLabel=\"Choose file\" onFilesChange={setFiles} accept=\".pdf\" />\n *\n * @example\n * <UploadInput label=\"Images\" multiple accept=\"image/*\" error={!!err} errorMessage={err} />\n */\nexport function UploadInput({\n  label,\n  secondaryLabel,\n  supportText,\n  uploadLabel = 'Upload',\n  onFilesChange,\n  error = false,\n  errorMessage,\n  disabled,\n  className,\n  id: idProp,\n  multiple,\n  accept,\n  ref,\n  ...rest\n}: UploadInputProps) {\n  const autoId = useId();\n  const id = idProp ?? autoId;\n  const inputRef = useRef<HTMLInputElement | null>(null) as React.MutableRefObject<HTMLInputElement | null>;\n\n  const [files, setFiles] = useState<File[]>([]);\n\n  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    const selected = e.target.files;\n    if (!selected?.length) return;\n    const next = multiple ? [...files, ...Array.from(selected)] : [selected[0]!];\n    setFiles(next);\n    onFilesChange?.(next);\n    e.target.value = '';\n  };\n\n  const removeFile = (index: number) => {\n    const next = files.filter((_, i) => i !== index);\n    setFiles(next);\n    onFilesChange?.(next);\n  };\n\n  const triggerClick = () => {\n    if (disabled) return;\n    inputRef.current?.click();\n  };\n\n  const showErrorAlert = error && errorMessage;\n  const hasFiles = files.length > 0;\n\n  const buttonClasses = [\n    'flex h-12 items-center justify-center gap-space-2 self-stretch rounded-rad-md px-space-5 outline-none transition-all duration-150',\n    'text-form-text font-medium leading-[1.4]',\n    !disabled && !hasFiles && 'bg-fill-action-secondary text-text-action-secondary',\n    !disabled && hasFiles && 'bg-fill-action-secondary-active text-text-action-secondary',\n    !disabled && 'hover:bg-fill-action-secondary-hover',\n    !disabled && 'active:bg-fill-action-secondary-active',\n    !disabled && 'focus-visible:bg-fill-action-secondary-focus',\n    !disabled && 'focus-visible:ring-[1.5px] focus-visible:ring-border-focus focus-visible:ring-offset-[3px]',\n    disabled && 'cursor-not-allowed bg-fill-action-secondary-disabled text-text-action-secondary-disabled',\n    className,\n  ]\n    .filter(Boolean)\n    .join(' ');\n\n  return (\n    <div className=\"flex flex-col gap-space-2 w-full\">\n      {/* Label + support text */}\n      {(label || supportText) && (\n        <div className=\"flex flex-col gap-space-1\">\n          {label && (\n            <span\n              className={`text-form-label ${\n                disabled ? 'text-text-disabled' : 'text-text-primary'\n              }`}\n            >\n              {label}\n              {secondaryLabel && (\n                <span className=\"ml-1 font-normal text-text-secondary\">\n                  {secondaryLabel}\n                </span>\n              )}\n            </span>\n          )}\n          {supportText && (\n            <p\n              className={`text-text-xs ${\n                disabled ? 'text-text-disabled' : 'text-text-secondary'\n              }`}\n            >\n              {supportText}\n            </p>\n          )}\n        </div>\n      )}\n\n      {/* Hidden file input */}\n      <input\n        ref={(el) => {\n          inputRef.current = el;\n          if (typeof ref === 'function') ref(el);\n          else if (ref != null) {\n            const r = (ref as unknown) as InputRef;\n            r.current = el;\n          }\n        }}\n        type=\"file\"\n        id={id}\n        disabled={disabled}\n        multiple={multiple}\n        accept={accept}\n        onChange={handleInputChange}\n        className=\"sr-only\"\n        aria-invalid={error || undefined}\n        aria-describedby={showErrorAlert ? `${id}-error` : undefined}\n        {...rest}\n      />\n\n      {/* Upload button (triggers file input) */}\n      <button\n        type=\"button\"\n        disabled={disabled}\n        onClick={triggerClick}\n        className={buttonClasses}\n        aria-label={uploadLabel}\n      >\n        <span>{uploadLabel}</span>\n        <span\n          className={\n            disabled ? 'text-icon-primary-disabled' : 'text-icon-primary'\n          }\n        >\n          <UploadIcon className=\"h-6 w-6 shrink-0\" />\n        </span>\n      </button>\n\n      {/* Upload list */}\n      {hasFiles && (\n        <ul className=\"flex flex-col gap-space-2\" aria-label=\"Uploaded files\">\n          {files.map((file, index) => (\n            <li key={`${file.name}-${index}`}>\n              <UploadListItem\n                file={file}\n                onRemove={() => removeFile(index)}\n                disabled={disabled}\n              />\n            </li>\n          ))}\n        </ul>\n      )}\n\n      {/* Error alert */}\n      {showErrorAlert && (\n        <div\n          id={`${id}-error`}\n          role=\"alert\"\n          className={`flex items-start gap-space-4 rounded-rad-md p-space-4 ${\n            disabled ? 'bg-fill-bg-secondary' : 'bg-fill-bg-err'\n          }`}\n        >\n          <ErrorIcon\n            className={`h-5 w-5 shrink-0 ${\n              disabled ? 'text-icon-primary-disabled' : 'text-icon-err'\n            }`}\n          />\n          <span\n            className={`text-text-xs ${\n              disabled ? 'text-text-disabled' : 'text-text-err'\n            }`}\n          >\n            {errorMessage}\n          </span>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAwCA;AACE;AACE;AAAC;AAAA;AACC;AACM;AACC;AACC;AACH;AACE;AACK;AACE;AACC;AACH;AAE0Q;AAAA;AAG5R;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACM;AACC;AACC;AACH;AACE;AACK;AACE;AACC;AACH;AAEZ;AAAC;AAAA;AACG;AAC8B;AAAA;AAAA;AAClC;AAGN;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACM;AACC;AACC;AACH;AACE;AACK;AACE;AACC;AACH;AAEZ;AAAC;AAAA;AACG;AACa;AAAA;AAAA;AACjB;AAGN;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACM;AACC;AACC;AACH;AACE;AACK;AACE;AACC;AACH;AAEmB;AAAA;AAGrC;AAEA;AACE;AACE;AAAC;AAAA;AACC;AACQ;AACH;AACO;AAEZ;AAAC;AAAA;AACU;AACP;AACO;AAAA;AAAA;AACX;AAGN;AAYA;AACE;AAAwB;AACtB;AACa;AACA;AACA;AACA;AACD;AAKd;AAEI;AAEK;AAOC;AAEF;AAAC;AAAA;AAGC;AACY;AAEN;AAAA;AAAA;AAGZ;AAEA;AAAC;AAAA;AACM;AACL;AACS;AACsB;AACpB;AAEX;AAAC;AAAA;AAGC;AAAA;AAAA;AACF;AAAA;AAIR;AAkBO;AAAqB;AAC1B;AACA;AACA;AACc;AACd;AACQ;AACR;AACA;AACA;AACI;AACJ;AACA;AACA;AAEF;AACE;AACA;AACA;AAEA;AAEA;AACE;AACA;AACA;AACA;AACA;AACA;AAAiB;AAGnB;AACE;AACA;AACA;AAAgB;AAGlB;;AACE;AACA;AAAkB;AAGpB;AACA;AAEA;AAAsB;AACpB;AACA;AAC0B;AACD;AACZ;AACA;AACA;AACA;AACD;AACZ;AAKF;AAGM;AAEG;AACC;AAAC;AAAA;AAGC;AAEC;AAAA;AAIC;AAAA;AAAA;AAAA;AAKJ;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AAGP;AAIF;AAAC;AAAA;AAEG;AACA;AAAqC;AAEnC;AACA;AAAY;AACd;AACF;AACK;AACL;AACA;AACA;AACA;AACU;AACA;AACa;AAC4B;AAC/C;AAAA;AAAA;AAIN;AAAC;AAAA;AACM;AACL;AACS;AACE;AACC;AAEZ;AAAmB;AACnB;AAAC;AAAA;AAE6C;AAGH;AAAA;AAAA;AAC3C;AAAA;AAAA;AAQM;AAAC;AAAA;AACC;AACgC;AAChC;AAAA;AAIR;AAKA;AAAC;AAAA;AACU;AACJ;AAGL;AAEA;AAAA;AAAC;AAAA;AAGC;AAAA;AAAA;AAEF;AAAC;AAAA;AAGC;AAEC;AAAA;AAAA;AACH;AAAA;AAAA;AAKV;;;;"}

package/dist/components/index.d.ts

@@ -0,0 +1,65 @@
+export { Typography } from './Typography/Typography';
+export type { TypographyProps } from './Typography/Typography';
+export { Button } from './Button/Button';
+export type { ButtonProps } from './Button/Button';
+export { Link } from './Link/Link';
+export type { LinkProps } from './Link/Link';
+export { Breadcrumb } from './Breadcrumb/Breadcrumb';
+export type { BreadcrumbProps, BreadcrumbItem, BreadcrumbSeparator } from './Breadcrumb/Breadcrumb';
+export { Accordion, AccordionSpecs } from './Accordion/Accordion';
+export type { AccordionProps, AccordionSpecsProps } from './Accordion/Accordion';
+export { FAQ } from './FAQ/FAQ';
+export type { FAQProps } from './FAQ/FAQ';
+export { Tab } from './Tab/Tab';
+export type { TabProps } from './Tab/Tab';
+export { Grid } from './Grid/Grid';
+export type { GridProps } from './Grid/Grid';
+export { Container } from './Container/Container';
+export type { ContainerProps, ContainerMaxWidth } from './Container/Container';
+export { TextInput } from './TextInput/TextInput';
+export type { TextInputProps } from './TextInput/TextInput';
+export { TextArea } from './TextArea/TextArea';
+export type { TextAreaProps } from './TextArea/TextArea';
+export { Select } from './Select/Select';
+export type { SelectProps, SelectOption } from './Select/Select';
+export { SelectTab } from './SelectTab/SelectTab';
+export type { SelectTabProps, SelectTabOption } from './SelectTab/SelectTab';
+export { DateInput } from './DateInput/DateInput';
+export type { DateInputProps, DateValue } from './DateInput/DateInput';
+export { PhoneInput, EAST_AFRICA_COUNTRIES } from './PhoneInput/PhoneInput';
+export type { PhoneInputProps, PhoneCountry } from './PhoneInput/PhoneInput';
+export { UploadInput } from './UploadInput/UploadInput';
+export type { UploadInputProps } from './UploadInput/UploadInput';
+export { RadioGroup } from './RadioGroup/RadioGroup';
+export type { RadioGroupProps, RadioOption } from './RadioGroup/RadioGroup';
+export { CheckboxGroup } from './CheckboxGroup/CheckboxGroup';
+export type { CheckboxGroupProps, CheckboxOption } from './CheckboxGroup/CheckboxGroup';
+export { Slider } from './Slider/Slider';
+export type { SliderProps } from './Slider/Slider';
+export { Toggle, ToggleButton } from './Toggle/Toggle';
+export type { ToggleProps, ToggleButtonProps, ToggleOption, ToggleSize } from './Toggle/Toggle';
+export { Card } from './Card/Card';
+export type { CardProps, CardType } from './Card/Card';
+export { ProductImage, ProductImageGallery } from './ProductImage/ProductImage';
+export type { ProductImageProps, ProductImageGalleryProps, GalleryImage } from './ProductImage/ProductImage';
+export { Box } from './Box/Box';
+export type { BoxProps, ResponsiveValue } from './Box/Box';
+export { Stack } from './Stack/Stack';
+export type { StackProps, StackDirection, StackAlign, StackJustify } from './Stack/Stack';
+export { Divider } from './Divider/Divider';
+export type { DividerProps, DividerOrientation, DividerVariant } from './Divider/Divider';
+export { Overlay } from './Overlay/Overlay';
+export type { OverlayProps } from './Overlay/Overlay';
+export { Drawer } from './Drawer/Drawer';
+export type { DrawerProps, DrawerAnchor } from './Drawer/Drawer';
+export { Popover } from './Popover/Popover';
+export type { PopoverProps, PopoverAlign } from './Popover/Popover';
+export { Icon } from './Icon/Icon';
+export type { IconProps, IconName } from './Icon/Icon';
+export { Section } from './Section/Section';
+export type { SectionProps, SectionSize } from './Section/Section';
+export { Skeleton } from './Skeleton';
+export type { SkeletonProps, SkeletonRadius } from './Skeleton';
+export { List } from './List';
+export type { ListProps, ListItemProps, ListMarker, ListItemSize } from './List';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { Typography, Button, Link, Accordion, AccordionSpecs, FAQ, Tab, Grid, Container, Box, Stack, Divider, Overlay, Drawer, Popover, TextInput, TextArea, Select, SelectTab, DateInput, PhoneInput, EAST_AFRICA_COUNTRIES, UploadInput, RadioGroup, CheckboxGroup, Slider, Toggle, ToggleButton, Card, ProductImage, ProductImageGallery, Icon, Section, Skeleton, List, } from './components';
+export type { TypographyProps, ButtonProps, LinkProps, AccordionProps, AccordionSpecsProps, FAQProps, TabProps, GridProps, ContainerProps, ContainerMaxWidth, BoxProps, ResponsiveValue, StackProps, StackDirection, StackAlign, StackJustify, DividerProps, DividerOrientation, DividerVariant, OverlayProps, DrawerProps, DrawerAnchor, PopoverProps, PopoverAlign, TextInputProps, TextAreaProps, SelectProps, SelectOption, SelectTabProps, SelectTabOption, DateInputProps, DateValue, PhoneInputProps, PhoneCountry, UploadInputProps, RadioGroupProps, RadioOption, CheckboxGroupProps, CheckboxOption, SliderProps, ToggleProps, ToggleButtonProps, ToggleOption, ToggleSize, CardProps, CardType, ProductImageProps, ProductImageGalleryProps, GalleryImage, IconProps, IconName, SectionProps, SectionSize, SkeletonProps, SkeletonRadius, ListProps, ListItemProps, ListMarker, ListItemSize, } from './components';
+export type { TypographyVariant, TypographyElement, ButtonVariant, ButtonSize, LinkVariant, LinkSize, AccordionItem, AccordionVariant, AccordionSpecItem, FAQItem, TabItem, } from './types';
+export type { FixedSpacingToken, FluidSpacingToken, SpacingToken, MarginToken, SpacingProps, GapProps, } from './types/spacing';
+export type { DisplayValue, AlignItemsValue, JustifyContentValue, FlexDirectionValue, FlexWrapValue, AlignSelfValue, LayoutProps, StackLayoutProps, } from './types/layout';
+export type { JiwambePluginOptions, TypographyDef, } from './plugin/jiwambe-plugin';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EACL,UAAU,EACV,MAAM,EACN,IAAI,EACJ,SAAS,EACT,cAAc,EACd,GAAG,EACH,GAAG,EACH,IAAI,EACJ,SAAS,EACT,GAAG,EACH,KAAK,EACL,OAAO,EACP,OAAO,EACP,MAAM,EACN,OAAO,EACP,SAAS,EACT,QAAQ,EACR,MAAM,EACN,SAAS,EACT,SAAS,EACT,UAAU,EACV,qBAAqB,EACrB,WAAW,EACX,UAAU,EACV,aAAa,EACb,MAAM,EACN,MAAM,EACN,YAAY,EACZ,IAAI,EACJ,YAAY,EACZ,mBAAmB,EACnB,IAAI,EACJ,OAAO,EACP,QAAQ,EACR,IAAI,GACL,MAAM,cAAc,CAAC;AAGtB,YAAY,EACV,eAAe,EACf,WAAW,EACX,SAAS,EACT,cAAc,EACd,mBAAmB,EACnB,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,cAAc,EACd,iBAAiB,EACjB,QAAQ,EACR,eAAe,EACf,UAAU,EACV,cAAc,EACd,UAAU,EACV,YAAY,EACZ,YAAY,EACZ,kBAAkB,EAClB,cAAc,EACd,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,cAAc,EACd,aAAa,EACb,WAAW,EACX,YAAY,EACZ,cAAc,EACd,eAAe,EACf,cAAc,EACd,SAAS,EACT,eAAe,EACf,YAAY,EACZ,gBAAgB,EAChB,eAAe,EACf,WAAW,EACX,kBAAkB,EAClB,cAAc,EACd,WAAW,EACX,WAAW,EACX,iBAAiB,EACjB,YAAY,EACZ,UAAU,EACV,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,wBAAwB,EACxB,YAAY,EACZ,SAAS,EACT,QAAQ,EACR,YAAY,EACZ,WAAW,EACX,aAAa,EACb,cAAc,EACd,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,GACb,MAAM,cAAc,CAAC;AAGtB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,aAAa,EACb,UAAU,EACV,WAAW,EACX,QAAQ,EACR,aAAa,EACb,gBAAgB,EAChB,iBAAiB,EACjB,OAAO,EACP,OAAO,GACR,MAAM,SAAS,CAAC;AAGjB,YAAY,EACV,iBAAiB,EACjB,iBAAiB,EACjB,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,QAAQ,GACT,MAAM,iBAAiB,CAAC;AAGzB,YAAY,EACV,YAAY,EACZ,eAAe,EACf,mBAAmB,EACnB,kBAAkB,EAClB,aAAa,EACb,cAAc,EACd,WAAW,EACX,gBAAgB,GACjB,MAAM,gBAAgB,CAAC;AAGxB,YAAY,EACV,oBAAoB,EACpB,aAAa,GACd,MAAM,yBAAyB,CAAC"}

package/dist/index.js

@@ -0,0 +1,69 @@
+import { Accordion, AccordionSpecs } from "./components/Accordion/Accordion.js";
+import { Box } from "./components/Box/Box.js";
+import { Button } from "./components/Button/Button.js";
+import { Card } from "./components/Card/Card.js";
+import { CheckboxGroup } from "./components/CheckboxGroup/CheckboxGroup.js";
+import { Container } from "./components/Container/Container.js";
+import { DateInput } from "./components/DateInput/DateInput.js";
+import { Divider } from "./components/Divider/Divider.js";
+import { Drawer } from "./components/Drawer/Drawer.js";
+import { EAST_AFRICA_COUNTRIES, PhoneInput } from "./components/PhoneInput/PhoneInput.js";
+import { FAQ } from "./components/FAQ/FAQ.js";
+import { Grid } from "./components/Grid/Grid.js";
+import { Icon } from "./components/Icon/Icon.js";
+import { Link } from "./components/Link/Link.js";
+import { List } from "./components/List/List.js";
+import { Overlay } from "./components/Overlay/Overlay.js";
+import { Popover } from "./components/Popover/Popover.js";
+import { ProductImage, ProductImageGallery } from "./components/ProductImage/ProductImage.js";
+import { RadioGroup } from "./components/RadioGroup/RadioGroup.js";
+import { Section } from "./components/Section/Section.js";
+import { Select } from "./components/Select/Select.js";
+import { SelectTab } from "./components/SelectTab/SelectTab.js";
+import { Skeleton } from "./components/Skeleton/Skeleton.js";
+import { Slider } from "./components/Slider/Slider.js";
+import { Stack } from "./components/Stack/Stack.js";
+import { Tab } from "./components/Tab/Tab.js";
+import { TextArea } from "./components/TextArea/TextArea.js";
+import { TextInput } from "./components/TextInput/TextInput.js";
+import { Toggle, ToggleButton } from "./components/Toggle/Toggle.js";
+import { Typography } from "./components/Typography/Typography.js";
+import { UploadInput } from "./components/UploadInput/UploadInput.js";
+export {
+  Accordion,
+  AccordionSpecs,
+  Box,
+  Button,
+  Card,
+  CheckboxGroup,
+  Container,
+  DateInput,
+  Divider,
+  Drawer,
+  EAST_AFRICA_COUNTRIES,
+  FAQ,
+  Grid,
+  Icon,
+  Link,
+  List,
+  Overlay,
+  PhoneInput,
+  Popover,
+  ProductImage,
+  ProductImageGallery,
+  RadioGroup,
+  Section,
+  Select,
+  SelectTab,
+  Skeleton,
+  Slider,
+  Stack,
+  Tab,
+  TextArea,
+  TextInput,
+  Toggle,
+  ToggleButton,
+  Typography,
+  UploadInput
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/plugin/jiwambe-plugin.d.ts

@@ -0,0 +1,37 @@
+export interface TypographyDef {
+    fontFamily: string;
+    fontSize: string;
+    fontWeight: string;
+    lineHeight: string;
+    letterSpacing?: string;
+    textWrap?: string;
+}
+export interface JiwambePluginOptions {
+    /** Override or extend semantic color token mappings. */
+    colors?: Record<string, string>;
+    /** Override or extend spacing tokens. */
+    spacing?: Record<string, string>;
+    /** Override or extend border width tokens. */
+    borderWidth?: Record<string, string>;
+    /** Override or extend border radius tokens. */
+    borderRadius?: Record<string, string>;
+    /** Override or extend elevation (box-shadow) tokens. */
+    elevation?: Record<string, string>;
+    /** Override or extend typography definitions. Partial overrides are merged with defaults. */
+    typography?: Record<string, Partial<TypographyDef>>;
+    /** Override primary and/or secondary font families. */
+    fontFamily?: {
+        primary?: string;
+        secondary?: string;
+    };
+}
+export declare function resolve(ref: string, opacity?: number): string;
+declare const jiwambePlugin: {
+    (options: JiwambePluginOptions | undefined): {
+        handler: import('tailwindcss/types/config').PluginCreator;
+        config?: Partial<import('tailwindcss/types/config').Config>;
+    };
+    __isOptionsFunction: true;
+};
+export default jiwambePlugin;
+//# sourceMappingURL=jiwambe-plugin.d.ts.map

package/dist/plugin/jiwambe-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"jiwambe-plugin.d.ts","sourceRoot":"","sources":["../../src/plugin/jiwambe-plugin.ts"],"names":[],"mappings":"AAMA,MAAM,WAAW,aAAa;IAC5B,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,MAAM,WAAW,oBAAoB;IACnC,wDAAwD;IACxD,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAChC,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACjC,8CAA8C;IAC9C,WAAW,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACrC,+CAA+C;IAC/C,YAAY,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,wDAAwD;IACxD,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACnC,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC;IACpD,uDAAuD;IACvD,UAAU,CAAC,EAAE;QAAE,OAAO,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CACvD;AAmGD,wBAAgB,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAW7D;AA2cD,QAAA,MAAM,aAAa;;;cAjlBD,CAAC;;;CAuwBlB,CAAC;AAEF,eAAe,aAAa,CAAC"}