@stackone/malachite 2.20.1 → 2.22.0

package/dist/components/InlineConfirm.js

@@ -0,0 +1,129 @@
+import { jsxs as U, jsx as l } from "react/jsx-runtime";
+import { useRef as f, useId as $, useState as j, useLayoutEffect as p } from "react";
+import { getDeepActiveElement as k } from "./activeElement.js";
+import { pushEscapeLayer as A } from "./escapeLayers.js";
+import { FOCUS_RING_INLINE_CONFIRM_INSET as K } from "./focusRing.js";
+import { isUnplaceable as M, placementKey as O, computeChipPlacement as P } from "./inlineConfirmPosition.js";
+const G = "bg-[var(--malachite-inline-confirm-background)] text-[var(--malachite-inline-confirm-foreground)]", q = "text-[color-mix(in_srgb,var(--malachite-inline-confirm-foreground)_80%,var(--malachite-inline-confirm-background))] hover:text-[var(--malachite-inline-confirm-foreground)]", C = "w-px shrink-0 self-stretch bg-[var(--malachite-inline-confirm-divider)]";
+let s = null;
+const z = () => /* @__PURE__ */ l(
+  "span",
+  {
+    "aria-hidden": "true",
+    className: "size-[13px] shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70 motion-reduce:animate-none"
+  }
+), Z = ({
+  open: c,
+  message: D,
+  confirmLabel: S = "Yes",
+  onConfirm: W,
+  onDismiss: w,
+  anchorTo: i,
+  icon: _ = /* @__PURE__ */ l(z, {}),
+  className: F = "",
+  style: H
+}) => {
+  const a = f(null), v = f(null), h = f(null), b = $(), [t, y] = j(null), x = f(""), g = f(w);
+  if (p(() => {
+    g.current = w;
+  }), p(() => {
+    if (!c)
+      return;
+    const e = () => g.current(), n = (r) => {
+      if (r.button !== 0)
+        return;
+      const u = r.composedPath(), m = a.current, d = i == null ? void 0 : i.current;
+      m && u.includes(m) || d && u.includes(d) || e();
+    };
+    s == null || s(), s = e;
+    const o = A(e);
+    return document.addEventListener("mousedown", n, !0), () => {
+      document.removeEventListener("mousedown", n, !0), o(), s === e && (s = null);
+    };
+  }, [c, i]), p(() => {
+    if (!c || !i) {
+      y(null), x.current = "";
+      return;
+    }
+    let e = 0;
+    const n = () => {
+      var R, I;
+      const o = i.current, r = o == null ? void 0 : o.getBoundingClientRect();
+      if (!r || M(r, window.innerWidth, window.innerHeight)) {
+        g.current();
+        return;
+      }
+      const u = ((R = a.current) == null ? void 0 : R.offsetWidth) ?? 0, m = ((I = a.current) == null ? void 0 : I.offsetHeight) ?? 0, { clientWidth: d, clientHeight: N } = document.documentElement, E = O(r, u, m, d, N);
+      E !== x.current && (x.current = E, y(
+        P({
+          anchorRect: r,
+          chipWidth: u,
+          chipHeight: m,
+          viewportWidth: d,
+          viewportHeight: N
+        })
+      )), e = requestAnimationFrame(n);
+    };
+    return n(), () => cancelAnimationFrame(e);
+  }, [c, i]), p(() => {
+    var e;
+    if (c)
+      return h.current = k(), (e = v.current) == null || e.focus(), () => {
+        const n = h.current, o = a.current, r = k();
+        h.current = null, !(!(n != null && n.isConnected) || r && o && !o.contains(r)) && n.focus({ preventScroll: !0 });
+      };
+  }, [c]), !c)
+    return null;
+  const L = i ? {
+    position: "fixed",
+    top: (t == null ? void 0 : t.top) ?? 0,
+    left: (t == null ? void 0 : t.left) ?? 0,
+    maxWidth: t == null ? void 0 : t.maxWidth,
+    opacity: t ? 1 : 0
+  } : void 0;
+  return /* @__PURE__ */ U(
+    "div",
+    {
+      ref: a,
+      role: "alertdialog",
+      "aria-labelledby": b,
+      className: `flex h-[33px] w-fit items-center gap-3 overflow-clip rounded-xl pl-[10px] ${G} ${F}`.trim(),
+      style: {
+        boxShadow: "var(--malachite-inline-confirm-shadow)",
+        ...L,
+        ...H
+      },
+      children: [
+        _,
+        /* @__PURE__ */ l(
+          "p",
+          {
+            id: b,
+            className: "m-0 min-w-0 truncate text-[13px] font-medium leading-[1.6] tracking-[0.13px]",
+            children: D
+          }
+        ),
+        /* @__PURE__ */ l("span", { "aria-hidden": "true", className: C }),
+        /* @__PURE__ */ l(
+          "button",
+          {
+            ref: v,
+            type: "button",
+            onClick: W,
+            onKeyDown: (e) => {
+              e.repeat && e.key === "Enter" && e.preventDefault();
+            },
+            className: `${q} flex h-full min-w-[39px] shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border-0 bg-transparent px-2 text-[13px] font-normal leading-[1.6] tracking-[0.13px] transition-colors ${K}`,
+            children: S
+          }
+        ),
+        /* @__PURE__ */ l("span", { "aria-hidden": "true", className: C })
+      ]
+    }
+  );
+};
+export {
+  Z as InlineConfirm,
+  Z as default
+};
+//# sourceMappingURL=InlineConfirm.js.map

package/dist/components/InlineConfirm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineConfirm.js","sources":["../../src/components/InlineConfirm.tsx"],"sourcesContent":["import React, { useId, useLayoutEffect, useRef, useState } from 'react';\nimport { getDeepActiveElement } from './activeElement';\nimport { pushEscapeLayer } from './escapeLayers';\nimport { FOCUS_RING_INLINE_CONFIRM_INSET } from './focusRing';\nimport {\n    type ChipPlacement,\n    computeChipPlacement,\n    isUnplaceable,\n    placementKey,\n} from './inlineConfirmPosition';\n\nexport interface InlineConfirmProps {\n    /** Mounts the chip and moves focus into it. Nothing renders while false. */\n    open: boolean;\n    /** What is being confirmed, e.g. \"Confirm Remove All\". Becomes the chip's name. */\n    message: string;\n    /** Defaults to \"Yes\". */\n    confirmLabel?: string;\n    onConfirm: () => void;\n    /** Called on Escape, on a click outside, and when the anchor scrolls out of view. */\n    onDismiss: () => void;\n    /** The control being answered for. The chip pins to its left and follows it. */\n    anchorTo?: React.RefObject<HTMLElement | null>;\n    /** Replaces the leading spinner. `null` drops it. */\n    icon?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n}\n\nconst GROUND =\n    'bg-[var(--malachite-inline-confirm-background)] text-[var(--malachite-inline-confirm-foreground)]';\n\nconst CONFIRM_QUIET =\n    'text-[color-mix(in_srgb,var(--malachite-inline-confirm-foreground)_80%,var(--malachite-inline-confirm-background))] hover:text-[var(--malachite-inline-confirm-foreground)]';\n\nconst DIVIDER = 'w-px shrink-0 self-stretch bg-[var(--malachite-inline-confirm-divider)]';\n\nlet dismissOpenInstance: (() => void) | null = null;\n\nconst ConfirmSpinner: React.FC = () => (\n    <span\n        aria-hidden=\"true\"\n        className=\"size-[13px] shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-70 motion-reduce:animate-none\"\n    />\n);\n\n/**\n * A confirmation asked on the control that triggered it, rather than in a modal.\n *\n * With `anchorTo` the chip places and tracks itself. Without it the chip renders in flow, and\n * must not sit in a container that clips its overflow — `Table`'s header cells among them.\n */\nexport const InlineConfirm: React.FC<InlineConfirmProps> = ({\n    open,\n    message,\n    confirmLabel = 'Yes',\n    onConfirm,\n    onDismiss,\n    anchorTo,\n    icon = <ConfirmSpinner />,\n    className = '',\n    style,\n}) => {\n    const pillRef = useRef<HTMLDivElement | null>(null);\n    const confirmRef = useRef<HTMLButtonElement>(null);\n    const previousFocusRef = useRef<HTMLElement | null>(null);\n    const messageId = useId();\n    const [placement, setPlacement] = useState<ChipPlacement | null>(null);\n    const lastKey = useRef('');\n\n    const onDismissRef = useRef(onDismiss);\n    useLayoutEffect(() => {\n        onDismissRef.current = onDismiss;\n    });\n\n    useLayoutEffect(() => {\n        if (!open) {\n            return;\n        }\n\n        const dismiss = () => onDismissRef.current();\n\n        const handleMouseDown = (event: MouseEvent) => {\n            if (event.button !== 0) {\n                return;\n            }\n\n            const path = event.composedPath();\n            const pill = pillRef.current;\n            const anchor = anchorTo?.current;\n            if ((pill && path.includes(pill)) || (anchor && path.includes(anchor))) {\n                return;\n            }\n\n            dismiss();\n        };\n\n        dismissOpenInstance?.();\n        dismissOpenInstance = dismiss;\n        const releaseEscape = pushEscapeLayer(dismiss);\n        document.addEventListener('mousedown', handleMouseDown, true);\n\n        return () => {\n            document.removeEventListener('mousedown', handleMouseDown, true);\n            releaseEscape();\n            if (dismissOpenInstance === dismiss) {\n                dismissOpenInstance = null;\n            }\n        };\n    }, [open, anchorTo]);\n\n    // `scroll` does not cross a shadow boundary, so the rect is polled, as `Dropdown` does.\n    // Layout, not passive: the first pass must measure before the chip is painted.\n    useLayoutEffect(() => {\n        if (!open || !anchorTo) {\n            setPlacement(null);\n            lastKey.current = '';\n            return;\n        }\n\n        let frame = 0;\n        const follow = () => {\n            const anchor = anchorTo.current;\n            const rect = anchor?.getBoundingClientRect();\n\n            // An anchor that has unmounted is as unpointable as one scrolled out of view,\n            // and leaving the chip up would leave it focused and detached from any control.\n            if (!rect || isUnplaceable(rect, window.innerWidth, window.innerHeight)) {\n                onDismissRef.current();\n                return;\n            }\n\n            const chipWidth = pillRef.current?.offsetWidth ?? 0;\n            const chipHeight = pillRef.current?.offsetHeight ?? 0;\n            const { clientWidth: viewportWidth, clientHeight: viewportHeight } =\n                document.documentElement;\n            const key = placementKey(rect, chipWidth, chipHeight, viewportWidth, viewportHeight);\n            if (key !== lastKey.current) {\n                lastKey.current = key;\n                setPlacement(\n                    computeChipPlacement({\n                        anchorRect: rect,\n                        chipWidth,\n                        chipHeight,\n                        viewportWidth,\n                        viewportHeight,\n                    }),\n                );\n            }\n\n            frame = requestAnimationFrame(follow);\n        };\n        follow();\n\n        return () => cancelAnimationFrame(frame);\n    }, [open, anchorTo]);\n\n    useLayoutEffect(() => {\n        if (!open) {\n            return;\n        }\n\n        previousFocusRef.current = getDeepActiveElement();\n        confirmRef.current?.focus();\n\n        return () => {\n            const previous = previousFocusRef.current;\n            const pill = pillRef.current;\n            const active = getDeepActiveElement();\n            previousFocusRef.current = null;\n\n            if (!previous?.isConnected || (active && pill && !pill.contains(active))) {\n                return;\n            }\n\n            // Without `preventScroll` a scroll-away dismissal would focus the anchor the user\n            // just scrolled past, and the browser would jump the page back to it.\n            previous.focus({ preventScroll: true });\n        };\n    }, [open]);\n\n    if (!open) {\n        return null;\n    }\n\n    const placementStyle: React.CSSProperties | undefined = anchorTo\n        ? {\n              position: 'fixed',\n              top: placement?.top ?? 0,\n              left: placement?.left ?? 0,\n              maxWidth: placement?.maxWidth,\n              opacity: placement ? 1 : 0,\n          }\n        : undefined;\n\n    return (\n        <div\n            ref={pillRef}\n            role=\"alertdialog\"\n            aria-labelledby={messageId}\n            className={`flex h-[33px] w-fit items-center gap-3 overflow-clip rounded-xl pl-[10px] ${GROUND} ${className}`.trim()}\n            style={{\n                boxShadow: 'var(--malachite-inline-confirm-shadow)',\n                ...placementStyle,\n                ...style,\n            }}\n        >\n            {icon}\n            <p\n                id={messageId}\n                className=\"m-0 min-w-0 truncate text-[13px] font-medium leading-[1.6] tracking-[0.13px]\"\n            >\n                {message}\n            </p>\n            <span aria-hidden=\"true\" className={DIVIDER} />\n            <button\n                ref={confirmRef}\n                type=\"button\"\n                onClick={onConfirm}\n                onKeyDown={(event) => {\n                    // A held Enter on the control that opened this must not confirm it.\n                    if (event.repeat && event.key === 'Enter') {\n                        event.preventDefault();\n                    }\n                }}\n                className={`${CONFIRM_QUIET} flex h-full min-w-[39px] shrink-0 cursor-pointer items-center justify-center whitespace-nowrap border-0 bg-transparent px-2 text-[13px] font-normal leading-[1.6] tracking-[0.13px] transition-colors ${FOCUS_RING_INLINE_CONFIRM_INSET}`}\n            >\n                {confirmLabel}\n            </button>\n            <span aria-hidden=\"true\" className={DIVIDER} />\n        </div>\n    );\n};\n\nexport default InlineConfirm;\n"],"names":["GROUND","CONFIRM_QUIET","DIVIDER","dismissOpenInstance","ConfirmSpinner","jsx","InlineConfirm","open","message","confirmLabel","onConfirm","onDismiss","anchorTo","icon","className","style","pillRef","useRef","confirmRef","previousFocusRef","messageId","useId","placement","setPlacement","useState","lastKey","onDismissRef","useLayoutEffect","dismiss","handleMouseDown","event","path","pill","anchor","releaseEscape","pushEscapeLayer","frame","follow","rect","isUnplaceable","chipWidth","_a","chipHeight","_b","viewportWidth","viewportHeight","key","placementKey","computeChipPlacement","getDeepActiveElement","previous","active","placementStyle","jsxs","FOCUS_RING_INLINE_CONFIRM_INSET"],"mappings":"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"}

package/dist/components/Input/Input.js

@@ -0,0 +1,302 @@
+import { jsx as a, jsxs as n, Fragment as K } from "react/jsx-runtime";
+import { useState as j, useEffect as xe, useRef as ge } from "react";
+import be, { useFormFieldIds as we } from "../BaseFormComponent.js";
+import { Button as Q } from "../Button.js";
+import Ie from "../CustomIcons/CheckCircleFilled.js";
+import ye from "../CustomIcons/CopyIcon.js";
+import Ce from "../CustomIcons/EyeClosedIcon.js";
+import Ne from "../CustomIcons/EyeIcon.js";
+import ke from "../CustomIcons/InfoIcon.js";
+import { FieldMessage as Ee } from "../FieldMessage.js";
+import ze from "../LoadingInput.js";
+import { paintedFieldValue as Se } from "../devWarning.js";
+const J = {
+  small: "h-[var(--malachite-control-height-small,28px)]",
+  medium: "h-[var(--malachite-control-height-medium,32px)]",
+  large: "h-[var(--malachite-control-height-large,42px)]"
+}, je = {
+  small: "text-[length:var(--malachite-font-size-small,13px)]",
+  medium: "text-[length:var(--malachite-font-size-small,13px)]",
+  large: "text-[length:var(--malachite-font-size-15,15px)] leading-[1.4]"
+}, Re = {
+  small: "px-[10px]",
+  medium: "px-[10px]",
+  large: "px-[16px]"
+}, Ve = {
+  small: "rounded-[var(--malachite-radius-10,10px)]",
+  medium: "rounded-xl",
+  large: "rounded-[var(--malachite-radius-xxl,14px)]"
+}, $e = (r, e) => {
+  switch (r) {
+    case "ghost":
+      return {
+        wrapper: [
+          e ? "border-0 border-b border-solid  border-[var(--malachite-destructive-border)]" : "",
+          e ? "focus-within:border-[var(--malachite-destructive-border-hover)] hover:border-[var(--malachite-destructive-border-hover)]" : ""
+        ],
+        shadow: "shadow-none",
+        borderRadius: "rounded-none"
+      };
+    case "default":
+    default:
+      return {
+        wrapper: [
+          "border border-solid",
+          e ? "border-[var(--malachite-destructive-border)]" : "border-[var(--malachite-card-border)]",
+          e ? "focus-within:border-[var(--malachite-destructive-border-hover)] hover:border-[var(--malachite-destructive-border-hover)]" : "focus-within:border-[var(--malachite-control-border-hover)] hover:border-[var(--malachite-control-border-hover)]"
+        ],
+        shadow: e ? "shadow-error" : "shadow-default",
+        borderRadius: ""
+      };
+  }
+}, Je = ({
+  label: r,
+  hint: e,
+  tooltip: i,
+  placeholder: x,
+  icon: m,
+  name: s,
+  required: h,
+  requiredIndicator: g,
+  error: p,
+  description: R,
+  loading: Y = !1,
+  readOnly: V = !1,
+  type: o = "text",
+  size: d = "large",
+  variant: F = "default",
+  defaultValue: $,
+  disabled: u,
+  prefixValue: Z,
+  prefixSecondaryValue: _,
+  ellipsis: O = !1,
+  formControl: D,
+  buttons: v,
+  onCopyClick: M,
+  showCopyButton: ee,
+  onChange: b,
+  value: ae,
+  onBlur: w,
+  helperText: f,
+  showPasswordToggle: I = !0,
+  id: re,
+  "aria-label": te,
+  "aria-labelledby": ie,
+  "aria-describedby": le
+}) => {
+  const { controlId: P, labelId: se, descriptionId: A, hintId: G, helperTextId: y } = we({
+    id: re,
+    label: r,
+    description: R,
+    hint: e,
+    helperText: !0
+  }), [C, oe] = j(!1), [de, ce] = j($ || ""), [N, H] = j(!1);
+  xe(() => {
+    if (N) {
+      const t = setTimeout(() => {
+        H(!1);
+      }, 1e3);
+      return () => clearTimeout(t);
+    }
+  }, [N]);
+  const ne = (t) => (l) => {
+    const c = l.target.value;
+    ce(c), b == null || b(c), t == null || t(c);
+  }, T = ge(void 0), B = (t) => Se({
+    component: "Input",
+    name: s,
+    value: ae,
+    formValue: t,
+    defaultValue: $,
+    bound: !!D,
+    uncontrolledValue: de
+  }), L = M ? () => {
+    const t = B(T.current);
+    t && (navigator.clipboard.writeText(t), H(!0), M());
+  } : void 0, me = o === "password" ? C ? "text" : "password" : o, he = m || Z || _, pe = J[d], ue = (t) => {
+    const l = $e(F, t);
+    return [
+      "relative",
+      "flex items-center",
+      "w-full",
+      l.borderRadius || Ve[d],
+      u ? "bg-[var(--malachite-card-dimmed-background)]" : "bg-[var(--malachite-card-background)]",
+      "transition-colors duration-200 ease-in-out",
+      l.shadow,
+      ...u ? [] : l.wrapper,
+      J[d]
+    ].filter(Boolean).join(" ");
+  };
+  return /* @__PURE__ */ a(
+    be,
+    {
+      label: r,
+      hint: e,
+      tooltip: i,
+      name: s,
+      required: h,
+      requiredIndicator: g,
+      loading: Y,
+      formControl: D,
+      description: R,
+      controlId: P,
+      labelId: se,
+      descriptionId: A,
+      hintId: G,
+      loadingComponent: /* @__PURE__ */ a(ze, { heightClass: pe, helperText: !!f }),
+      children: ({ error: t, message: l, onFieldChange: c, onFieldBlur: k, value: U }) => {
+        T.current = U;
+        const E = B(U), W = ee ?? !!(L && u && E), z = p ?? t, S = p === !1 ? void 0 : l, X = z && !S, ve = X || W || (v == null ? void 0 : v.length) || o === "password" && I, q = `${y}-error`, fe = [
+          A,
+          G,
+          f ? y : void 0,
+          S ? q : void 0,
+          le
+        ].filter(Boolean).join(" ") || void 0;
+        return /* @__PURE__ */ n(K, { children: [
+          /* @__PURE__ */ n("div", { className: ue(z), children: [
+            he && /* @__PURE__ */ a("div", { className: "flex items-center pl-3 pr-1 flex-shrink-0 pointer-events-none", children: /* @__PURE__ */ a(
+              Ze,
+              {
+                prefixValue: Z,
+                prefixSecondaryValue: _,
+                icon: m
+              }
+            ) }),
+            /* @__PURE__ */ a(
+              "input",
+              {
+                id: P,
+                type: me,
+                placeholder: x,
+                value: E,
+                onChange: ne(c),
+                onBlur: () => {
+                  w == null || w(), k == null || k();
+                },
+                disabled: u || V,
+                readOnly: V,
+                autoComplete: "off",
+                "aria-label": te,
+                "aria-labelledby": ie,
+                "aria-invalid": z || void 0,
+                "aria-required": h || void 0,
+                "aria-describedby": fe,
+                className: `flex-1 bg-transparent border-none outline-none text-[var(--malachite-text-primary)] placeholder:text-[var(--malachite-text-placeholder)] disabled:text-[var(--malachite-text-primary)] disabled:cursor-not-allowed ${je[d]} ${Re[d]} ${O ? "min-w-0 truncate" : ""}`,
+                name: s
+              }
+            ),
+            ve && /* @__PURE__ */ n(
+              "div",
+              {
+                className: `flex items-center pl-1 flex-shrink-0 ${o === "password" && I ? "pr-0" : "pr-3"}`,
+                children: [
+                  /* @__PURE__ */ a(
+                    _e,
+                    {
+                      error: X,
+                      defaultValue: E,
+                      onCopyClick: L,
+                      showCopyButton: W,
+                      copied: N,
+                      type: o,
+                      showPassword: C,
+                      showPasswordToggle: I,
+                      onTogglePassword: () => oe(!C)
+                    }
+                  ),
+                  /* @__PURE__ */ a(De, { buttons: v })
+                ]
+              }
+            )
+          ] }),
+          f && /* @__PURE__ */ a(
+            "div",
+            {
+              id: y,
+              className: "text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]",
+              children: f
+            }
+          ),
+          /* @__PURE__ */ a(Ee, { id: q, message: S })
+        ] });
+      }
+    }
+  );
+}, Ze = ({ prefixValue: r, prefixSecondaryValue: e, icon: i }) => /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
+  i && /* @__PURE__ */ a("span", { className: "flex items-center justify-center text-[var(--malachite-text-dimmed)] w-4 h-4 flex-shrink-0", children: i }),
+  r && /* @__PURE__ */ a("span", { className: "text-[length:var(--malachite-font-size-medium,14px)] leading-[1.4] text-[var(--malachite-text-dimmed)] whitespace-nowrap", children: r }),
+  e && /* @__PURE__ */ a("span", { className: "text-[length:var(--malachite-font-size-medium,14px)] leading-[1.4] text-[var(--malachite-text-dimmed)] whitespace-nowrap", children: e })
+] }), _e = ({
+  error: r,
+  defaultValue: e,
+  onCopyClick: i,
+  showCopyButton: x = !1,
+  copied: m = !1,
+  type: s,
+  showPassword: h,
+  showPasswordToggle: g = !0,
+  onTogglePassword: p
+}) => /* @__PURE__ */ n("div", { className: "flex items-center gap-1", children: [
+  r && // Decorative: the rejection is carried by the message beneath the field, so
+  // announcing an unnamed icon here would only repeat it as "info".
+  /* @__PURE__ */ a(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "flex items-center justify-center w-5 h-5 flex-shrink-0",
+      children: /* @__PURE__ */ a(
+        ke,
+        {
+          size: 16,
+          className: "text-[var(--malachite-destructive-foreground,rgb(196,62,62))]"
+        }
+      )
+    }
+  ),
+  x && i && e && /* @__PURE__ */ a(
+    "button",
+    {
+      onClick: i,
+      type: "button",
+      className: "flex items-center justify-center w-5 h-5 hover:bg-[var(--malachite-primary-border)] rounded transition-colors flex-shrink-0 cursor-pointer",
+      children: m ? /* @__PURE__ */ a(
+        Ie,
+        {
+          size: 16,
+          style: { color: "var(--malachite-success-foreground)" }
+        }
+      ) : /* @__PURE__ */ a(ye, { size: 16 })
+    }
+  ),
+  s === "password" && g && /* @__PURE__ */ a(Q, { variant: "no-style", onClick: p, type: "button", size: "small", children: h ? /* @__PURE__ */ a(
+    Ce,
+    {
+      size: 16,
+      style: { color: "var(--malachite-text-dimmed)" }
+    }
+  ) : /* @__PURE__ */ a(
+    Ne,
+    {
+      size: 16,
+      style: { color: "var(--malachite-text-dimmed)" }
+    }
+  ) })
+] }), De = ({ buttons: r }) => r != null && r.length ? /* @__PURE__ */ a(K, { children: r.map((e) => /* @__PURE__ */ a(
+  Q,
+  {
+    variant: e.variant || (e.danger ? "destructive" : "outline"),
+    size: e.size || "small",
+    disabled: e.disabled,
+    icon: e.icon,
+    tooltip: e.tooltip,
+    onClick: e.onClick,
+    className: "ml-1",
+    children: e.label
+  },
+  e.label
+)) }) : null;
+export {
+  Je as default
+};
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Input.js","sources":["../../../src/components/Input/Input.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport type { Control, FieldPath, FieldValues } from 'react-hook-form';\nimport BaseFormComponent, { type RequiredIndicator, useFormFieldIds } from '../BaseFormComponent';\nimport { Button } from '../Button';\nimport CheckCircleFilled from '../CustomIcons/CheckCircleFilled';\nimport CopyIcon from '../CustomIcons/CopyIcon';\nimport EyeClosedIcon from '../CustomIcons/EyeClosedIcon';\nimport EyeIcon from '../CustomIcons/EyeIcon';\nimport InfoIcon from '../CustomIcons/InfoIcon';\nimport FieldMessage from '../FieldMessage';\nimport LoadingInput from '../LoadingInput';\nimport { paintedFieldValue } from '../devWarning';\nimport type { ButtonDefinition, InputSize, InputType, InputVariant } from './types';\n\ninterface InputProps {\n    label?: string;\n    hint?: string;\n    tooltip?: string;\n    placeholder?: string;\n    icon?: React.ReactNode;\n    readOnly?: boolean;\n    name: FieldPath<FieldValues> | string;\n    type?: InputType;\n    description?: string;\n    size?: InputSize;\n    variant?: InputVariant;\n    required?: boolean;\n    requiredIndicator?: RequiredIndicator;\n    error?: boolean;\n    loading?: boolean;\n    defaultValue?: string;\n    disabled?: boolean;\n    prefixValue?: string;\n    prefixSecondaryValue?: string;\n    ellipsis?: boolean;\n    formControl?: Control<FieldValues, unknown>;\n    buttons?: ButtonDefinition[];\n    onCopyClick?: () => void;\n    showCopyButton?: boolean;\n    onChange?: (value: string) => void;\n    /** Controlled value, for a source of truth outside the form (URL, app state). */\n    value?: string;\n    onBlur?: () => void;\n    helperText?: string;\n    showPasswordToggle?: boolean;\n    id?: string;\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n    'aria-describedby'?: string;\n}\n\n// Figma specs one Input, at 42px / px-16 / 15px / radius 14 — the large tier. The smaller\n// tiers have no Input master, so they follow Search, which shares the field chrome.\nconst SIZE_HEIGHT: Record<InputSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)]',\n    large: 'h-[var(--malachite-control-height-large,42px)]',\n};\n\nconst SIZE_TEXT: Record<InputSize, string> = {\n    small: 'text-[length:var(--malachite-font-size-small,13px)]',\n    medium: 'text-[length:var(--malachite-font-size-small,13px)]',\n    large: 'text-[length:var(--malachite-font-size-15,15px)] leading-[1.4]',\n};\n\nconst SIZE_PADDING: Record<InputSize, string> = {\n    small: 'px-[10px]',\n    medium: 'px-[10px]',\n    large: 'px-[16px]',\n};\n\nconst SIZE_RADIUS: Record<InputSize, string> = {\n    small: 'rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'rounded-xl',\n    large: 'rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst getVariantClasses = (\n    variant: InputVariant,\n    error?: boolean,\n): {\n    wrapper: string[];\n    shadow: string;\n    borderRadius: string;\n} => {\n    switch (variant) {\n        case 'ghost':\n            return {\n                wrapper: [\n                    error\n                        ? 'border-0 border-b border-solid  border-[var(--malachite-destructive-border)]'\n                        : '',\n                    error\n                        ? 'focus-within:border-[var(--malachite-destructive-border-hover)] hover:border-[var(--malachite-destructive-border-hover)]'\n                        : '',\n                ],\n                shadow: 'shadow-none',\n                borderRadius: 'rounded-none',\n            };\n        case 'default':\n        default:\n            return {\n                wrapper: [\n                    'border border-solid',\n                    error\n                        ? 'border-[var(--malachite-destructive-border)]'\n                        : 'border-[var(--malachite-card-border)]',\n                    error\n                        ? 'focus-within:border-[var(--malachite-destructive-border-hover)] hover:border-[var(--malachite-destructive-border-hover)]'\n                        : 'focus-within:border-[var(--malachite-control-border-hover)] hover:border-[var(--malachite-control-border-hover)]',\n                ],\n                shadow: error ? 'shadow-error' : 'shadow-default',\n                borderRadius: '',\n            };\n    }\n};\n\nconst Input: React.FC<InputProps> = ({\n    label,\n    hint,\n    tooltip,\n    placeholder,\n    icon,\n    name,\n    required,\n    requiredIndicator,\n    error,\n    description,\n    loading = false,\n    readOnly = false,\n    type = 'text',\n    size = 'large',\n    variant = 'default',\n    defaultValue,\n    disabled,\n    prefixValue,\n    prefixSecondaryValue,\n    ellipsis = false,\n    formControl,\n    buttons,\n    onCopyClick,\n    showCopyButton,\n    onChange,\n    value,\n    onBlur,\n    helperText,\n    showPasswordToggle = true,\n    id,\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledBy,\n    'aria-describedby': ariaDescribedBy,\n}) => {\n    const { controlId, labelId, descriptionId, hintId, helperTextId } = useFormFieldIds({\n        id,\n        label,\n        description,\n        hint,\n        helperText: true,\n    });\n    const [showPassword, setShowPassword] = useState(false);\n    const [inputValue, setInputValue] = useState(defaultValue || '');\n    const [copied, setCopied] = useState(false);\n\n    useEffect(() => {\n        if (copied) {\n            const timer = setTimeout(() => {\n                setCopied(false);\n            }, 1000);\n            return () => clearTimeout(timer);\n        }\n    }, [copied]);\n\n    const handleChange =\n        (reportToForm?: (value: unknown) => void) => (e: React.ChangeEvent<HTMLInputElement>) => {\n            const newValue = e.target.value;\n            setInputValue(newValue);\n            onChange?.(newValue);\n            reportToForm?.(newValue);\n        };\n\n    const formValueRef = useRef<unknown>(undefined);\n    const paintedValue = (formValue: unknown): string =>\n        paintedFieldValue({\n            component: 'Input',\n            name,\n            value,\n            formValue,\n            defaultValue,\n            bound: !!formControl,\n            uncontrolledValue: inputValue,\n        });\n\n    const handleCopyClick = onCopyClick\n        ? () => {\n              const copyValue = paintedValue(formValueRef.current);\n              if (copyValue) {\n                  navigator.clipboard.writeText(copyValue);\n                  setCopied(true);\n                  onCopyClick();\n              }\n          }\n        : undefined;\n\n    const actualInputType = type === 'password' ? (showPassword ? 'text' : 'password') : type;\n\n    const hasPrefix = icon || prefixValue || prefixSecondaryValue;\n\n    // The skeleton stands in for the field, so it reads the same height the wrapper does.\n    const heightClass = SIZE_HEIGHT[size];\n\n    const buildWrapperClasses = (isError: boolean): string => {\n        const variantStyles = getVariantClasses(variant, isError);\n\n        return [\n            'relative',\n            'flex items-center',\n            'w-full',\n            variantStyles.borderRadius || SIZE_RADIUS[size],\n            disabled\n                ? 'bg-[var(--malachite-card-dimmed-background)]'\n                : 'bg-[var(--malachite-card-background)]',\n            'transition-colors duration-200 ease-in-out',\n            variantStyles.shadow,\n            ...(disabled ? [] : variantStyles.wrapper),\n            SIZE_HEIGHT[size],\n        ]\n            .filter(Boolean)\n            .join(' ');\n    };\n\n    return (\n        <BaseFormComponent\n            label={label}\n            hint={hint}\n            tooltip={tooltip}\n            name={name}\n            required={required}\n            requiredIndicator={requiredIndicator}\n            loading={loading}\n            formControl={formControl}\n            description={description}\n            controlId={controlId}\n            labelId={labelId}\n            descriptionId={descriptionId}\n            hintId={hintId}\n            loadingComponent={<LoadingInput heightClass={heightClass} helperText={!!helperText} />}\n        >\n            {({ error: fieldError, message, onFieldChange, onFieldBlur, value: formValue }) => {\n                formValueRef.current = formValue;\n                const displayValue = paintedValue(formValue);\n                const shouldShowCopyButton =\n                    showCopyButton ?? !!(handleCopyClick && disabled && displayValue);\n                const isError = error ?? fieldError;\n                // `error={false}` opts out of the resolver entirely, message included: a\n                // screen that has dealt with the rejection its own way would otherwise keep\n                // reporting it in destructive text and through `aria-describedby`.\n                // The message is its own line rather than a replacement for the helper text:\n                // a field that explains where to find its value still has to say why what was\n                // typed was rejected, and dropping one for the other left the field marked red\n                // with nothing anywhere saying what was wrong.\n                const errorMessage = error === false ? undefined : message;\n                // The icon is the only signal a consumer-forced `error` has; beside a message it\n                // is duplication, and it crowds the suffix next to a reveal or copy control.\n                const showErrorIcon = isError && !errorMessage;\n                const hasSuffix =\n                    showErrorIcon ||\n                    shouldShowCopyButton ||\n                    buttons?.length ||\n                    (type === 'password' && showPasswordToggle);\n                const errorMessageId = `${helperTextId}-error`;\n                const describedBy =\n                    [\n                        descriptionId,\n                        hintId,\n                        helperText ? helperTextId : undefined,\n                        errorMessage ? errorMessageId : undefined,\n                        ariaDescribedBy,\n                    ]\n                        .filter(Boolean)\n                        .join(' ') || undefined;\n\n                return (\n                    <>\n                        <div className={buildWrapperClasses(isError)}>\n                            {hasPrefix && (\n                                <div className=\"flex items-center pl-3 pr-1 flex-shrink-0 pointer-events-none\">\n                                    <CompositeIcon\n                                        prefixValue={prefixValue}\n                                        prefixSecondaryValue={prefixSecondaryValue}\n                                        icon={icon}\n                                    />\n                                </div>\n                            )}\n\n                            <input\n                                id={controlId}\n                                type={actualInputType}\n                                placeholder={placeholder}\n                                value={displayValue}\n                                onChange={handleChange(onFieldChange)}\n                                onBlur={() => {\n                                    onBlur?.();\n                                    onFieldBlur?.();\n                                }}\n                                disabled={disabled || readOnly}\n                                readOnly={readOnly}\n                                autoComplete=\"off\"\n                                aria-label={ariaLabel}\n                                aria-labelledby={ariaLabelledBy}\n                                aria-invalid={isError || undefined}\n                                aria-required={required || undefined}\n                                aria-describedby={describedBy}\n                                className={`flex-1 bg-transparent border-none outline-none text-[var(--malachite-text-primary)] placeholder:text-[var(--malachite-text-placeholder)] disabled:text-[var(--malachite-text-primary)] disabled:cursor-not-allowed ${SIZE_TEXT[size]} ${SIZE_PADDING[size]} ${ellipsis ? 'min-w-0 truncate' : ''}`}\n                                name={name}\n                            />\n\n                            {hasSuffix && (\n                                <div\n                                    className={`flex items-center pl-1 flex-shrink-0 ${type === 'password' && showPasswordToggle ? 'pr-0' : 'pr-3'}`}\n                                >\n                                    <Suffix\n                                        error={showErrorIcon}\n                                        defaultValue={displayValue}\n                                        onCopyClick={handleCopyClick}\n                                        showCopyButton={shouldShowCopyButton}\n                                        copied={copied}\n                                        type={type}\n                                        showPassword={showPassword}\n                                        showPasswordToggle={showPasswordToggle}\n                                        onTogglePassword={() => setShowPassword(!showPassword)}\n                                    />\n                                    <InputButtons buttons={buttons} />\n                                </div>\n                            )}\n                        </div>\n                        {helperText && (\n                            <div\n                                id={helperTextId}\n                                className=\"text-[length:var(--malachite-font-size-small,13px)] text-left pl-2 text-[var(--malachite-text-dimmed,rgb(161,161,161))]\"\n                            >\n                                {helperText}\n                            </div>\n                        )}\n                        <FieldMessage id={errorMessageId} message={errorMessage} />\n                    </>\n                );\n            }}\n        </BaseFormComponent>\n    );\n};\n\nconst CompositeIcon: React.FC<{\n    prefixValue?: string;\n    prefixSecondaryValue?: string;\n    icon?: React.ReactNode;\n}> = ({ prefixValue, prefixSecondaryValue, icon }) => {\n    return (\n        <div className=\"flex items-center gap-1\">\n            {icon && (\n                <span className=\"flex items-center justify-center text-[var(--malachite-text-dimmed)] w-4 h-4 flex-shrink-0\">\n                    {icon}\n                </span>\n            )}\n            {prefixValue && (\n                <span className=\"text-[length:var(--malachite-font-size-medium,14px)] leading-[1.4] text-[var(--malachite-text-dimmed)] whitespace-nowrap\">\n                    {prefixValue}\n                </span>\n            )}\n            {prefixSecondaryValue && (\n                <span className=\"text-[length:var(--malachite-font-size-medium,14px)] leading-[1.4] text-[var(--malachite-text-dimmed)] whitespace-nowrap\">\n                    {prefixSecondaryValue}\n                </span>\n            )}\n        </div>\n    );\n};\n\nconst Suffix: React.FC<{\n    error?: boolean;\n    defaultValue?: string;\n    onCopyClick?: () => void;\n    showCopyButton?: boolean;\n    copied?: boolean;\n    type?: InputType;\n    showPassword?: boolean;\n    showPasswordToggle?: boolean;\n    onTogglePassword?: () => void;\n}> = ({\n    error,\n    defaultValue,\n    onCopyClick,\n    showCopyButton = false,\n    copied = false,\n    type,\n    showPassword,\n    showPasswordToggle = true,\n    onTogglePassword,\n}) => {\n    return (\n        <div className=\"flex items-center gap-1\">\n            {error && (\n                // Decorative: the rejection is carried by the message beneath the field, so\n                // announcing an unnamed icon here would only repeat it as \"info\".\n                <div\n                    aria-hidden=\"true\"\n                    className=\"flex items-center justify-center w-5 h-5 flex-shrink-0\"\n                >\n                    <InfoIcon\n                        size={16}\n                        className=\"text-[var(--malachite-destructive-foreground,rgb(196,62,62))]\"\n                    />\n                </div>\n            )}\n            {showCopyButton && onCopyClick && defaultValue && (\n                <button\n                    onClick={onCopyClick}\n                    type=\"button\"\n                    className=\"flex items-center justify-center w-5 h-5 hover:bg-[var(--malachite-primary-border)] rounded transition-colors flex-shrink-0 cursor-pointer\"\n                >\n                    {copied ? (\n                        <CheckCircleFilled\n                            size={16}\n                            style={{ color: 'var(--malachite-success-foreground)' }}\n                        />\n                    ) : (\n                        <CopyIcon size={16} />\n                    )}\n                </button>\n            )}\n            {type === 'password' && showPasswordToggle && (\n                <Button variant=\"no-style\" onClick={onTogglePassword} type=\"button\" size=\"small\">\n                    {showPassword ? (\n                        <EyeClosedIcon\n                            size={16}\n                            style={{ color: 'var(--malachite-text-dimmed)' }}\n                        />\n                    ) : (\n                        <EyeIcon\n                            size={16}\n                            style={{ color: 'var(--malachite-text-dimmed)' }}\n                        />\n                    )}\n                </Button>\n            )}\n        </div>\n    );\n};\n\nconst InputButtons: React.FC<{\n    buttons?: ButtonDefinition[];\n}> = ({ buttons }) => {\n    if (!buttons?.length) {\n        return null;\n    }\n\n    return (\n        <>\n            {buttons.map((button) => (\n                <Button\n                    key={button.label}\n                    variant={button.variant || (button.danger ? 'destructive' : 'outline')}\n                    size={button.size || 'small'}\n                    disabled={button.disabled}\n                    icon={button.icon}\n                    tooltip={button.tooltip}\n                    onClick={button.onClick}\n                    className=\"ml-1\"\n                >\n                    {button.label}\n                </Button>\n            ))}\n        </>\n    );\n};\n\nexport default Input;\n"],"names":["SIZE_HEIGHT","SIZE_TEXT","SIZE_PADDING","SIZE_RADIUS","getVariantClasses","variant","error","Input","label","hint","tooltip","placeholder","icon","name","required","requiredIndicator","description","loading","readOnly","type","size","defaultValue","disabled","prefixValue","prefixSecondaryValue","ellipsis","formControl","buttons","onCopyClick","showCopyButton","onChange","value","onBlur","helperText","showPasswordToggle","id","ariaLabel","ariaLabelledBy","ariaDescribedBy","controlId","labelId","descriptionId","hintId","helperTextId","useFormFieldIds","showPassword","setShowPassword","useState","inputValue","setInputValue","copied","setCopied","useEffect","timer","handleChange","reportToForm","e","newValue","formValueRef","useRef","paintedValue","formValue","paintedFieldValue","handleCopyClick","copyValue","actualInputType","hasPrefix","heightClass","buildWrapperClasses","isError","variantStyles","jsx","BaseFormComponent","LoadingInput","fieldError","message","onFieldChange","onFieldBlur","displayValue","shouldShowCopyButton","errorMessage","showErrorIcon","hasSuffix","errorMessageId","describedBy","jsxs","Fragment","CompositeIcon","Suffix","InputButtons","FieldMessage","onTogglePassword","InfoIcon","CheckCircleFilled","CopyIcon","Button","EyeClosedIcon","EyeIcon","button"],"mappings":"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"}

package/dist/components/KeyValueList.js

@@ -0,0 +1,26 @@
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+const d = ({ label: e, className: r = "", children: l }) => /* @__PURE__ */ t(
+  "div",
+  {
+    className: `flex min-h-[52px] w-full items-start border-0 border-b border-solid border-[var(--malachite-card-border)] last:border-b-0 ${r}`,
+    children: [
+      /* @__PURE__ */ a("dt", { className: "m-0 w-[200px] shrink-0 p-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-secondary)]", children: e }),
+      /* @__PURE__ */ a("dd", { className: "m-0 flex min-w-0 flex-1 flex-wrap items-center gap-[6px] py-[16px] pr-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-primary)]", children: l })
+    ]
+  }
+), o = ({
+  className: e = "",
+  children: r
+}) => /* @__PURE__ */ a(
+  "dl",
+  {
+    className: `m-0 flex w-full flex-col overflow-hidden rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] ${e}`,
+    children: r
+  }
+);
+o.Row = d;
+export {
+  o as KeyValueList,
+  o as default
+};
+//# sourceMappingURL=KeyValueList.js.map

package/dist/components/KeyValueList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"KeyValueList.js","sources":["../../src/components/KeyValueList.tsx"],"sourcesContent":["import React from 'react';\n\nexport interface KeyValueListProps {\n    className?: string;\n    children: React.ReactNode;\n}\n\nexport interface KeyValueListRowProps {\n    label: React.ReactNode;\n    className?: string;\n    children: React.ReactNode;\n}\n\nconst Row: React.FC<KeyValueListRowProps> = ({ label, className = '', children }) => (\n    <div\n        className={`flex min-h-[52px] w-full items-start border-0 border-b border-solid border-[var(--malachite-card-border)] last:border-b-0 ${className}`}\n    >\n        <dt className=\"m-0 w-[200px] shrink-0 p-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-secondary)]\">\n            {label}\n        </dt>\n        <dd className=\"m-0 flex min-w-0 flex-1 flex-wrap items-center gap-[6px] py-[16px] pr-[16px] text-[13px] leading-[1.6] tracking-[0.13px] text-[var(--malachite-text-primary)]\">\n            {children}\n        </dd>\n    </div>\n);\n\nconst KeyValueList: React.FC<KeyValueListProps> & { Row: typeof Row } = ({\n    className = '',\n    children,\n}) => (\n    <dl\n        className={`m-0 flex w-full flex-col overflow-hidden rounded-lg border border-solid border-[var(--malachite-card-border)] bg-[var(--malachite-card-background)] ${className}`}\n    >\n        {children}\n    </dl>\n);\n\nKeyValueList.Row = Row;\n\nexport default KeyValueList;\nexport { KeyValueList };\n"],"names":["Row","label","className","children","jsxs","jsx","KeyValueList"],"mappings":";AAaA,MAAMA,IAAsC,CAAC,EAAE,OAAAC,GAAO,WAAAC,IAAY,IAAI,UAAAC,QAClE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,6HAA6HF,CAAS;AAAA,IAEjJ,UAAA;AAAA,MAAA,gBAAAG,EAAC,MAAA,EAAG,WAAU,sHACT,UAAAJ,GACL;AAAA,MACA,gBAAAI,EAAC,MAAA,EAAG,WAAU,iKACT,UAAAF,EAAA,CACL;AAAA,IAAA;AAAA,EAAA;AACJ,GAGEG,IAAkE,CAAC;AAAA,EACrE,WAAAJ,IAAY;AAAA,EACZ,UAAAC;AACJ,MACI,gBAAAE;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,uJAAuJH,CAAS;AAAA,IAE1K,UAAAC;AAAA,EAAA;AACL;AAGJG,EAAa,MAAMN;"}

package/dist/components/Link.js

@@ -0,0 +1,47 @@
+import { jsx as c } from "react/jsx-runtime";
+import { FOCUS_RING as u } from "./focusRing.js";
+const x = (e) => {
+  if (!e) return "";
+  switch (e) {
+    case "xsmall":
+      return "text-[length:var(--malachite-font-size-xsmall)]";
+    case "small":
+      return "text-[length:var(--malachite-font-size-small)]";
+    case "medium":
+      return "text-[length:var(--malachite-font-size-medium)]";
+    case "large":
+      return "text-[length:var(--malachite-font-size-large)]";
+    case "xlarge":
+      return "text-[length:var(--malachite-font-size-xlarge)]";
+    case "xxlarge":
+      return "text-[length:var(--malachite-font-size-xxlarge)]";
+    default:
+      return "";
+  }
+}, f = ({
+  children: e,
+  href: t,
+  target: r = "_blank",
+  rel: a = "noopener noreferrer",
+  className: n = "",
+  color: l = "default",
+  size: o,
+  underline: s = !0
+}) => {
+  const i = l === "dimmed" ? "text-[var(--malachite-text-dimmed)]" : "text-[var(--malachite-text-link-foreground)] hover:text-[var(--malachite-text-link-foreground-hover)]", m = x(o);
+  return /* @__PURE__ */ c(
+    "a",
+    {
+      href: t,
+      target: r,
+      rel: a,
+      className: `${s ? "underline" : "no-underline"} rounded-xs cursor-pointer transition-colors duration-200 ease-in-out ${u} ${i} ${m} ${n}`,
+      children: e
+    }
+  );
+};
+export {
+  f as Link,
+  f as default
+};
+//# sourceMappingURL=Link.js.map

package/dist/components/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","sources":["../../src/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport { FOCUS_RING } from './focusRing';\nimport type { FontSize } from './Typography/Text';\n\nexport interface LinkProps {\n    href: string;\n    target?: '_blank' | '_self' | '_parent' | '_top';\n    rel?: string;\n    children: React.ReactNode;\n    className?: string;\n    color?: 'default' | 'dimmed';\n    size?: FontSize;\n    underline?: boolean;\n}\n\nconst getFontSizeClass = (size?: FontSize): string => {\n    if (!size) return '';\n    switch (size) {\n        case 'xsmall':\n            return 'text-[length:var(--malachite-font-size-xsmall)]';\n        case 'small':\n            return 'text-[length:var(--malachite-font-size-small)]';\n        case 'medium':\n            return 'text-[length:var(--malachite-font-size-medium)]';\n        case 'large':\n            return 'text-[length:var(--malachite-font-size-large)]';\n        case 'xlarge':\n            return 'text-[length:var(--malachite-font-size-xlarge)]';\n        case 'xxlarge':\n            return 'text-[length:var(--malachite-font-size-xxlarge)]';\n        default:\n            return '';\n    }\n};\n\nexport const Link: React.FC<LinkProps> = ({\n    children,\n    href,\n    target = '_blank',\n    rel = 'noopener noreferrer',\n    className = '',\n    color = 'default',\n    size,\n    underline = true,\n}) => {\n    const colorClasses =\n        color === 'dimmed'\n            ? 'text-[var(--malachite-text-dimmed)]'\n            : 'text-[var(--malachite-text-link-foreground)] hover:text-[var(--malachite-text-link-foreground-hover)]';\n\n    const fontSizeClasses = getFontSizeClass(size);\n\n    return (\n        <a\n            href={href}\n            target={target}\n            rel={rel}\n            className={`${underline ? 'underline' : 'no-underline'} rounded-xs cursor-pointer transition-colors duration-200 ease-in-out ${FOCUS_RING} ${colorClasses} ${fontSizeClasses} ${className}`}\n        >\n            {children}\n        </a>\n    );\n};\n\nexport default Link;\n\n"],"names":["getFontSizeClass","size","Link","children","href","target","rel","className","color","underline","colorClasses","fontSizeClasses","jsx","FOCUS_RING"],"mappings":";;AAeA,MAAMA,IAAmB,CAACC,MAA4B;AAClD,MAAI,CAACA,EAAM,QAAO;AAClB,UAAQA,GAAA;AAAA,IACJ,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX,KAAK;AACD,aAAO;AAAA,IACX;AACI,aAAO;AAAA,EAAA;AAEnB,GAEaC,IAA4B,CAAC;AAAA,EACtC,UAAAC;AAAA,EACA,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,KAAAC,IAAM;AAAA,EACN,WAAAC,IAAY;AAAA,EACZ,OAAAC,IAAQ;AAAA,EACR,MAAAP;AAAA,EACA,WAAAQ,IAAY;AAChB,MAAM;AACF,QAAMC,IACFF,MAAU,WACJ,wCACA,yGAEJG,IAAkBX,EAAiBC,CAAI;AAE7C,SACI,gBAAAW;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAAR;AAAA,MACA,QAAAC;AAAA,MACA,KAAAC;AAAA,MACA,WAAW,GAAGG,IAAY,cAAc,cAAc,yEAAyEI,CAAU,IAAIH,CAAY,IAAIC,CAAe,IAAIJ,CAAS;AAAA,MAExL,UAAAJ;AAAA,IAAA;AAAA,EAAA;AAGb;"}