@stackone/malachite 2.70.0 → 2.72.0

package/dist/components/PopoverParts.js

@@ -1,5 +1,5 @@
-import { jsx as n, jsxs as u, Fragment as f } from "react/jsx-runtime";
-import { forwardRef as v, useContext as x, useRef as h, useLayoutEffect as b } from "react";
+import { jsx as n, jsxs as u, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as x, useContext as f, useRef as h, useLayoutEffect as b } from "react";
 import { Button as g } from "./Button.js";
 import T from "./Tooltip.js";
 import { BORDER as c, NO_SCROLLBAR as N } from "./chromeStyles.js";
@@ -7,26 +7,26 @@ import { FOCUS_RING_INSET as y } from "./focusRing.js";
 import { isPlainClick as S } from "./linkClick.js";
 import { PopoverShownContext as w } from "./popoverTree.js";
 import { safeHref as R } from "./safeHref.js";
-const F = ({ title: e, action: t }) => /* @__PURE__ */ u(
+const F = ({ title: e, action: r, divider: t = !0 }) => /* @__PURE__ */ u(
   "div",
   {
-    className: `flex items-center justify-between border-0 border-b border-solid ${c} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`,
+    className: `flex items-center justify-between border-0 ${t ? `border-b border-solid ${c} px-5 py-4` : "px-5 pt-4 pb-[4px]"} text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`,
     children: [
       /* @__PURE__ */ n("span", { children: e }),
-      t
+      r
     ]
   }
 ), E = '[aria-current]:not([aria-current="false"]):not([aria-current=""]), [aria-selected="true"], [role="radio"][aria-checked="true"]', P = ["aria-current", "aria-selected", "aria-checked"], m = (e) => {
-  const t = e.querySelector(E);
-  if (!t)
+  const r = e.querySelector(E);
+  if (!r)
     return !1;
-  const r = e.getBoundingClientRect().top + e.clientTop, { top: l, bottom: o } = t.getBoundingClientRect(), a = l - r + e.scrollTop, i = o - r + e.scrollTop;
+  const t = e.getBoundingClientRect().top + e.clientTop, { top: l, bottom: o } = r.getBoundingClientRect(), a = l - t + e.scrollTop, i = o - t + e.scrollTop;
   return a < e.scrollTop ? e.scrollTop = a : i > e.scrollTop + e.clientHeight && (e.scrollTop = i - e.clientHeight), !0;
-}, U = ({ children: e, scrollToSelected: t = !1 }) => {
-  const r = x(w), l = h(null);
+}, U = ({ children: e, scrollToSelected: r = !1 }) => {
+  const t = f(w), l = h(null);
   return b(() => {
     const o = l.current;
-    if (!t || !r || !o || m(o))
+    if (!r || !t || !o || m(o))
       return;
     const a = new MutationObserver(() => {
       m(o) && a.disconnect();
@@ -37,7 +37,7 @@ const F = ({ title: e, action: t }) => /* @__PURE__ */ u(
       attributes: !0,
       attributeFilter: P
     }), () => a.disconnect();
-  }, [t, r]), /* @__PURE__ */ n(
+  }, [r, t]), /* @__PURE__ */ n(
     "div",
     {
       ref: l,
@@ -45,8 +45,8 @@ const F = ({ title: e, action: t }) => /* @__PURE__ */ u(
       children: e
     }
   );
-}, C = v(
-  ({ children: e }, t) => /* @__PURE__ */ n("div", { ref: t, className: `border-0 border-t border-solid ${c} p-2`, children: e })
+}, C = x(
+  ({ children: e }, r) => /* @__PURE__ */ n("div", { ref: r, className: `border-0 border-t border-solid ${c} p-2`, children: e })
 );
 C.displayName = "Popover.Section";
 const M = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none", children: e }), q = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-2 pt-2", children: e }), G = ({ children: e }) => /* @__PURE__ */ n(
@@ -55,13 +55,13 @@ const M = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2
     className: `border-0 border-t border-solid ${c} px-5 py-3 text-[length:var(--malachite-font-size-xsmall,11px)] leading-4 text-[var(--malachite-text-secondary,rgb(123,123,123))]`,
     children: e
   }
-), O = {
+), $ = {
   default: "text-[var(--malachite-text-secondary,rgb(123,123,123))]",
   error: "text-[var(--malachite-text-error,rgb(237,53,54))]"
-}, _ = (e) => e != null && e !== !1 && e !== "", $ = v(
-  ({ message: e, tone: t = "default", action: r, focusable: l = !1 }, o) => {
-    const a = _(e);
-    return /* @__PURE__ */ u(f, { children: [
+}, O = (e) => e != null && e !== !1 && e !== "", _ = x(
+  ({ message: e, tone: r = "default", action: t, focusable: l = !1 }, o) => {
+    const a = O(e);
+    return /* @__PURE__ */ u(v, { children: [
       /* @__PURE__ */ n(
         "div",
         {
@@ -72,41 +72,41 @@ const M = ({ children: e }) => /* @__PURE__ */ n("div", { className: "px-3 py-2
           children: a && /* @__PURE__ */ n(
             "div",
             {
-              className: `px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${O[t]}`,
+              className: `px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${$[r]}`,
               children: e
             }
           )
         }
       ),
-      a && r && /* @__PURE__ */ n("div", { className: "px-3 pb-2", children: /* @__PURE__ */ n(
+      a && t && /* @__PURE__ */ n("div", { className: "px-3 pb-2", children: /* @__PURE__ */ n(
         g,
         {
           variant: "outline",
           size: "small",
-          loading: r.pending,
-          onClick: r.onClick,
-          children: r.label
+          loading: t.pending,
+          onClick: t.onClick,
+          children: t.label
         }
       ) })
     ] });
   }
 );
-$.displayName = "Popover.Status";
+_.displayName = "Popover.Status";
 const V = ({
   icon: e,
-  "aria-label": t,
-  onClick: r,
+  "aria-label": r,
+  onClick: t,
   href: l,
   disabled: o = !1,
   tooltip: a
 }) => {
-  const i = o ? void 0 : R(l), s = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${o ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${y}`, d = i !== void 0 ? /* @__PURE__ */ n(
+  const i = o ? void 0 : R(l), s = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${o ? "cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50" : "cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]"} ${y}`, p = i !== void 0 ? /* @__PURE__ */ n(
     "a",
     {
       href: i,
-      "aria-label": t,
-      onClick: (p) => {
-        S(p) && r && (p.preventDefault(), r());
+      "aria-label": r,
+      onClick: (d) => {
+        S(d) && t && (d.preventDefault(), t());
       },
       className: `no-underline ${s}`,
       children: e
@@ -115,14 +115,14 @@ const V = ({
     "button",
     {
       type: "button",
-      "aria-label": t,
+      "aria-label": r,
       "aria-disabled": o || void 0,
-      onClick: o ? void 0 : r,
+      onClick: o ? void 0 : t,
       className: s,
       children: e
     }
   );
-  return a ? /* @__PURE__ */ n(T, { text: a, children: d }) : d;
+  return a ? /* @__PURE__ */ n(T, { text: a, children: p }) : p;
 };
 export {
   V as PopoverAction,
@@ -132,6 +132,6 @@ export {
   G as PopoverNote,
   q as PopoverSearch,
   C as PopoverSection,
-  $ as PopoverStatus
+  _ as PopoverStatus
 };
 //# sourceMappingURL=PopoverParts.js.map

package/dist/components/PopoverParts.js.map

@@ -1 +1 @@
-{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useLayoutEffect, useRef } from 'react';\nimport Button from './Button';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { PopoverShownContext } from './popoverTree';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action }) => (\n    <div\n        className={`flex items-center justify-between border-0 border-b border-solid ${BORDER} px-5 py-4 text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nconst SELECTED_ROW =\n    '[aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"]), [aria-selected=\"true\"], [role=\"radio\"][aria-checked=\"true\"]';\nconst SELECTION_ATTRIBUTES = ['aria-current', 'aria-selected', 'aria-checked'];\n\n// Not `scrollIntoView`: that also scrolls every scrollable ancestor, the page included.\nconst scrollSelectedRowIntoView = (list: HTMLElement): boolean => {\n    const row = list.querySelector<HTMLElement>(SELECTED_ROW);\n    if (!row) {\n        return false;\n    }\n    const listTop = list.getBoundingClientRect().top + list.clientTop;\n    const { top, bottom } = row.getBoundingClientRect();\n    const rowTop = top - listTop + list.scrollTop;\n    const rowBottom = bottom - listTop + list.scrollTop;\n    if (rowTop < list.scrollTop) {\n        list.scrollTop = rowTop;\n    } else if (rowBottom > list.scrollTop + list.clientHeight) {\n        list.scrollTop = rowBottom - list.clientHeight;\n    }\n    return true;\n};\n\nexport interface PopoverListProps {\n    children: React.ReactNode;\n    /**\n     * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)\n     * each time the popover is shown, once that row mounts. Only the list scrolls.\n     */\n    scrollToSelected?: boolean;\n}\n\nexport const PopoverList: React.FC<PopoverListProps> = ({ children, scrollToSelected = false }) => {\n    const shown = useContext(PopoverShownContext);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // Before paint, so a shown panel never draws a frame at the top and then jumps.\n    useLayoutEffect(() => {\n        const list = listRef.current;\n        if (!scrollToSelected || !shown || !list || scrollSelectedRowIntoView(list)) {\n            return;\n        }\n        const observer = new MutationObserver(() => {\n            if (scrollSelectedRowIntoView(list)) {\n                observer.disconnect();\n            }\n        });\n        observer.observe(list, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: SELECTION_ATTRIBUTES,\n        });\n        return () => observer.disconnect();\n    }, [scrollToSelected, shown]);\n\n    return (\n        <div\n            ref={listRef}\n            className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport const PopoverSearch: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-2 pt-2\">{children}</div>\n);\n\nexport const PopoverNote: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className={`border-0 border-t border-solid ${BORDER} px-5 py-3 text-[length:var(--malachite-font-size-xsmall,11px)] leading-4 text-[var(--malachite-text-secondary,rgb(123,123,123))]`}\n    >\n        {children}\n    </div>\n);\n\nexport type PopoverStatusTone = 'default' | 'error';\n\nexport interface PopoverStatusAction {\n    label: string;\n    onClick: () => void;\n    /** Shows the button's spinner and ignores clicks, e.g. while a retry is in flight. */\n    pending?: boolean;\n}\n\nexport interface PopoverStatusProps {\n    /**\n     * What the panel is waiting on, or why it is empty. Clear it rather than unmount the part:\n     * only a region already in the tree announces a new message.\n     */\n    message?: React.ReactNode;\n    tone?: PopoverStatusTone;\n    /** A button under the message that resolves it, such as Retry. Shown only with a message. */\n    action?: PopoverStatusAction;\n    /** Lets the region take focus from script (`tabIndex={-1}`), e.g. from `initialFocus`. */\n    focusable?: boolean;\n}\n\nconst STATUS_TONE_TEXT: Record<PopoverStatusTone, string> = {\n    default: 'text-[var(--malachite-text-secondary,rgb(123,123,123))]',\n    error: 'text-[var(--malachite-text-error,rgb(237,53,54))]',\n};\n\nconst hasMessage = (message: React.ReactNode): boolean =>\n    message !== undefined && message !== null && message !== false && message !== '';\n\nexport const PopoverStatus = forwardRef<HTMLDivElement, PopoverStatusProps>(\n    ({ message, tone = 'default', action, focusable = false }, ref) => {\n        const shown = hasMessage(message);\n        return (\n            <>\n                {/* Stays `status` while empty and for errors: a role or aria-hidden changed with the\n                    text is not reliably announced. No ring: a focus target, not a control. */}\n                <div\n                    ref={ref}\n                    role=\"status\"\n                    tabIndex={focusable ? -1 : undefined}\n                    className={shown ? 'outline-none' : 'sr-only'}\n                >\n                    {shown && (\n                        <div\n                            className={`px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${STATUS_TONE_TEXT[tone]}`}\n                        >\n                            {message}\n                        </div>\n                    )}\n                </div>\n                {shown && action && (\n                    <div className=\"px-3 pb-2\">\n                        <Button\n                            variant=\"outline\"\n                            size=\"small\"\n                            loading={action.pending}\n                            onClick={action.onClick}\n                        >\n                            {action.label}\n                        </Button>\n                    </div>\n                )}\n            </>\n        );\n    },\n);\nPopoverStatus.displayName = 'Popover.Status';\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","jsxs","BORDER","jsx","SELECTED_ROW","SELECTION_ATTRIBUTES","scrollSelectedRowIntoView","list","row","listTop","top","bottom","rowTop","rowBottom","PopoverList","children","scrollToSelected","shown","useContext","PopoverShownContext","listRef","useRef","useLayoutEffect","observer","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverSearch","PopoverNote","STATUS_TONE_TEXT","hasMessage","message","PopoverStatus","tone","focusable","Fragment","Button","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":"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"}
+{"version":3,"file":"PopoverParts.js","sources":["../../src/components/PopoverParts.tsx"],"sourcesContent":["import React, { forwardRef, useContext, useLayoutEffect, useRef } from 'react';\nimport Button from './Button';\nimport Tooltip from './Tooltip';\nimport { BORDER, NO_SCROLLBAR } from './chromeStyles';\nimport { FOCUS_RING_INSET } from './focusRing';\nimport { isPlainClick } from './linkClick';\nimport { PopoverShownContext } from './popoverTree';\nimport { safeHref } from './safeHref';\n\nexport interface PopoverHeaderProps {\n    title: string;\n    action?: React.ReactNode;\n    /** `false` drops the rule and sits the header 4px over the list. */\n    divider?: boolean;\n}\n\nexport const PopoverHeader: React.FC<PopoverHeaderProps> = ({ title, action, divider = true }) => (\n    <div\n        className={`flex items-center justify-between border-0 ${divider ? `border-b border-solid ${BORDER} px-5 py-4` : 'px-5 pt-4 pb-[4px]'} text-[12px] leading-[15px] font-normal text-[var(--malachite-text-dimmed,rgb(161,161,161))]`}\n    >\n        <span>{title}</span>\n        {action}\n    </div>\n);\n\nconst SELECTED_ROW =\n    '[aria-current]:not([aria-current=\"false\"]):not([aria-current=\"\"]), [aria-selected=\"true\"], [role=\"radio\"][aria-checked=\"true\"]';\nconst SELECTION_ATTRIBUTES = ['aria-current', 'aria-selected', 'aria-checked'];\n\n// Not `scrollIntoView`: that also scrolls every scrollable ancestor, the page included.\nconst scrollSelectedRowIntoView = (list: HTMLElement): boolean => {\n    const row = list.querySelector<HTMLElement>(SELECTED_ROW);\n    if (!row) {\n        return false;\n    }\n    const listTop = list.getBoundingClientRect().top + list.clientTop;\n    const { top, bottom } = row.getBoundingClientRect();\n    const rowTop = top - listTop + list.scrollTop;\n    const rowBottom = bottom - listTop + list.scrollTop;\n    if (rowTop < list.scrollTop) {\n        list.scrollTop = rowTop;\n    } else if (rowBottom > list.scrollTop + list.clientHeight) {\n        list.scrollTop = rowBottom - list.clientHeight;\n    }\n    return true;\n};\n\nexport interface PopoverListProps {\n    children: React.ReactNode;\n    /**\n     * Scrolls the list to its selected row (`aria-current`, `aria-selected` or a checked radio)\n     * each time the popover is shown, once that row mounts. Only the list scrolls.\n     */\n    scrollToSelected?: boolean;\n}\n\nexport const PopoverList: React.FC<PopoverListProps> = ({ children, scrollToSelected = false }) => {\n    const shown = useContext(PopoverShownContext);\n    const listRef = useRef<HTMLDivElement>(null);\n\n    // Before paint, so a shown panel never draws a frame at the top and then jumps.\n    useLayoutEffect(() => {\n        const list = listRef.current;\n        if (!scrollToSelected || !shown || !list || scrollSelectedRowIntoView(list)) {\n            return;\n        }\n        const observer = new MutationObserver(() => {\n            if (scrollSelectedRowIntoView(list)) {\n                observer.disconnect();\n            }\n        });\n        observer.observe(list, {\n            childList: true,\n            subtree: true,\n            attributes: true,\n            attributeFilter: SELECTION_ATTRIBUTES,\n        });\n        return () => observer.disconnect();\n    }, [scrollToSelected, shown]);\n\n    return (\n        <div\n            ref={listRef}\n            className={`flex max-h-80 flex-col gap-[2px] overflow-y-auto p-2 ${NO_SCROLLBAR}`}\n        >\n            {children}\n        </div>\n    );\n};\n\nexport const PopoverSection = forwardRef<HTMLDivElement, { children: React.ReactNode }>(\n    ({ children }, ref) => (\n        <div ref={ref} className={`border-0 border-t border-solid ${BORDER} p-2`}>\n            {children}\n        </div>\n    ),\n);\nPopoverSection.displayName = 'Popover.Section';\n\nexport const PopoverEmpty: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] text-[var(--malachite-text-dimmed,rgb(161,161,161))] select-none\">\n        {children}\n    </div>\n);\n\nexport const PopoverSearch: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div className=\"px-2 pt-2\">{children}</div>\n);\n\nexport const PopoverNote: React.FC<{ children: React.ReactNode }> = ({ children }) => (\n    <div\n        className={`border-0 border-t border-solid ${BORDER} px-5 py-3 text-[length:var(--malachite-font-size-xsmall,11px)] leading-4 text-[var(--malachite-text-secondary,rgb(123,123,123))]`}\n    >\n        {children}\n    </div>\n);\n\nexport type PopoverStatusTone = 'default' | 'error';\n\nexport interface PopoverStatusAction {\n    label: string;\n    onClick: () => void;\n    /** Shows the button's spinner and ignores clicks, e.g. while a retry is in flight. */\n    pending?: boolean;\n}\n\nexport interface PopoverStatusProps {\n    /**\n     * What the panel is waiting on, or why it is empty. Clear it rather than unmount the part:\n     * only a region already in the tree announces a new message.\n     */\n    message?: React.ReactNode;\n    tone?: PopoverStatusTone;\n    /** A button under the message that resolves it, such as Retry. Shown only with a message. */\n    action?: PopoverStatusAction;\n    /** Lets the region take focus from script (`tabIndex={-1}`), e.g. from `initialFocus`. */\n    focusable?: boolean;\n}\n\nconst STATUS_TONE_TEXT: Record<PopoverStatusTone, string> = {\n    default: 'text-[var(--malachite-text-secondary,rgb(123,123,123))]',\n    error: 'text-[var(--malachite-text-error,rgb(237,53,54))]',\n};\n\nconst hasMessage = (message: React.ReactNode): boolean =>\n    message !== undefined && message !== null && message !== false && message !== '';\n\nexport const PopoverStatus = forwardRef<HTMLDivElement, PopoverStatusProps>(\n    ({ message, tone = 'default', action, focusable = false }, ref) => {\n        const shown = hasMessage(message);\n        return (\n            <>\n                {/* Stays `status` while empty and for errors: a role or aria-hidden changed with the\n                    text is not reliably announced. No ring: a focus target, not a control. */}\n                <div\n                    ref={ref}\n                    role=\"status\"\n                    tabIndex={focusable ? -1 : undefined}\n                    className={shown ? 'outline-none' : 'sr-only'}\n                >\n                    {shown && (\n                        <div\n                            className={`px-3 py-2 text-[length:var(--malachite-font-size-small,13px)] ${STATUS_TONE_TEXT[tone]}`}\n                        >\n                            {message}\n                        </div>\n                    )}\n                </div>\n                {shown && action && (\n                    <div className=\"px-3 pb-2\">\n                        <Button\n                            variant=\"outline\"\n                            size=\"small\"\n                            loading={action.pending}\n                            onClick={action.onClick}\n                        >\n                            {action.label}\n                        </Button>\n                    </div>\n                )}\n            </>\n        );\n    },\n);\nPopoverStatus.displayName = 'Popover.Status';\n\nexport interface PopoverActionProps {\n    icon: React.ReactNode;\n    'aria-label': string;\n    onClick?: () => void;\n    /** Renders a link; a plain click runs `onClick` instead of following it, when one is given. */\n    href?: string;\n    disabled?: boolean;\n    tooltip?: string;\n}\n\nexport const PopoverAction: React.FC<PopoverActionProps> = ({\n    icon,\n    'aria-label': ariaLabel,\n    onClick,\n    href: rawHref,\n    disabled = false,\n    tooltip,\n}) => {\n    const href = disabled ? undefined : safeHref(rawHref);\n    const className = `m-0 inline-flex size-5 items-center justify-center rounded-[var(--malachite-radius-sm,4px)] border-0 bg-transparent p-0 transition-colors duration-150 [&_svg]:size-3! ${disabled ? 'cursor-not-allowed text-[var(--malachite-text-placeholder,rgb(187,187,187))] opacity-50' : `cursor-pointer text-[var(--malachite-text-placeholder,rgb(187,187,187))] hover:bg-[var(--malachite-pillbutton-background,rgb(241,241,241))] hover:text-[var(--malachite-text-secondary,rgb(123,123,123))]`} ${FOCUS_RING_INSET}`;\n    const button =\n        href !== undefined ? (\n            <a\n                href={href}\n                aria-label={ariaLabel}\n                onClick={(event) => {\n                    if (isPlainClick(event) && onClick) {\n                        event.preventDefault();\n                        onClick();\n                    }\n                }}\n                className={`no-underline ${className}`}\n            >\n                {icon}\n            </a>\n        ) : (\n            <button\n                type=\"button\"\n                aria-label={ariaLabel}\n                aria-disabled={disabled || undefined}\n                onClick={disabled ? undefined : onClick}\n                className={className}\n            >\n                {icon}\n            </button>\n        );\n    return tooltip ? <Tooltip text={tooltip}>{button}</Tooltip> : button;\n};\n"],"names":["PopoverHeader","title","action","divider","jsxs","BORDER","jsx","SELECTED_ROW","SELECTION_ATTRIBUTES","scrollSelectedRowIntoView","list","row","listTop","top","bottom","rowTop","rowBottom","PopoverList","children","scrollToSelected","shown","useContext","PopoverShownContext","listRef","useRef","useLayoutEffect","observer","NO_SCROLLBAR","PopoverSection","forwardRef","ref","PopoverEmpty","PopoverSearch","PopoverNote","STATUS_TONE_TEXT","hasMessage","message","PopoverStatus","tone","focusable","Fragment","Button","PopoverAction","icon","ariaLabel","onClick","rawHref","disabled","tooltip","href","safeHref","className","FOCUS_RING_INSET","button","event","isPlainClick","Tooltip"],"mappings":"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"}

package/dist/components/Search.js

@@ -1,56 +1,57 @@
-import { jsxs as M, jsx as a } from "react/jsx-runtime";
-import { forwardRef as T, useState as Z, useRef as A, useMemo as B } from "react";
-import D from "./CustomIcons/DismissIcon.js";
-import P from "./CustomIcons/SearchIcon.js";
-import { composeRefs as z } from "./composeRefs.js";
-import { CONTROL_TEXT_SIZE_CLASS as G } from "./controlTextSize.js";
-import { controlWidthStyle as L } from "./controlWidth.js";
+import { jsxs as A, jsx as a } from "react/jsx-runtime";
+import { forwardRef as B, useState as D, useRef as M, useMemo as Z } from "react";
+import z from "./CustomIcons/DismissIcon.js";
+import L from "./CustomIcons/SearchIcon.js";
+import { composeRefs as P } from "./composeRefs.js";
+import { CONTROL_TEXT_SIZE_CLASS as X } from "./controlTextSize.js";
+import { controlWidthStyle as G } from "./controlWidth.js";
 import { FOCUS_RING as U } from "./focusRing.js";
-const W = {
+const W = "text-[length:var(--malachite-font-size-medium,14px)]", Y = {
   small: "h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]",
   medium: "h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl",
   large: "h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]"
-}, X = 15, q = (c) => c.preventDefault(), te = T(function({
+}, q = 15, H = (c) => c.preventDefault(), oe = B(function({
   value: s,
   onChange: n,
   placeholder: i,
   size: p = "large",
   variant: g = "default",
+  textSize: S = "control",
   disabled: t = !1,
-  autoFocus: S = !1,
-  className: C = "",
-  width: y,
-  style: $,
-  clearable: E = !1,
+  autoFocus: C = !1,
+  className: y = "",
+  width: $,
+  style: E,
+  clearable: I = !1,
   onClear: o,
   onKeyDown: l,
   "aria-label": m,
   "aria-labelledby": d
 }, h) {
-  const [x, u] = Z(!1), f = A(null), I = B(() => z(h, f), [h]), b = E && s.length > 0 && !t, v = () => {
+  const [x, u] = D(!1), f = M(null), _ = Z(() => P(h, f), [h]), b = I && s.length > 0 && !t, v = () => {
     var e;
     n(""), o == null || o(), (e = f.current) == null || e.focus();
   }, k = (e) => {
     l == null || l(e);
     const j = e.nativeEvent.isComposing || e.nativeEvent.keyCode === 229;
     e.key !== "Escape" || e.defaultPrevented || j || !b || (e.preventDefault(), e.stopPropagation(), v());
-  }, r = g === "muted", w = r ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", N = r ? "border-transparent" : "border-[var(--malachite-card-border)]", R = t ? "" : "hover:border-[var(--malachite-text-placeholder)]", _ = r ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", F = r ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", O = r ? "none" : x ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
-  return /* @__PURE__ */ M(
+  }, r = g === "muted", w = r ? "bg-[var(--malachite-card-border)]" : "bg-[var(--malachite-card-background)]", N = r ? "border-transparent" : "border-[var(--malachite-card-border)]", R = t ? "" : "hover:border-[var(--malachite-text-placeholder)]", O = r ? "text-[var(--malachite-text-secondary)]" : "text-[var(--malachite-text-placeholder)]", T = r ? "placeholder:text-[var(--malachite-text-secondary)]" : "placeholder:text-[var(--malachite-text-placeholder)]", F = r ? "none" : x ? "var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))" : "0px 1px 1px 0px rgba(0, 0, 0, 0.15)";
+  return /* @__PURE__ */ A(
     "div",
     {
-      className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${W[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${C}`,
+      className: `w-full ${w} border border-solid ${N} ${R} transition-colors flex items-center ${Y[p]} ${t ? "opacity-60 cursor-not-allowed" : ""} ${y}`,
       style: {
-        boxShadow: O,
+        boxShadow: F,
         borderColor: x ? "var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))" : void 0,
-        ...L(y),
-        ...$
+        ...G($),
+        ...E
       },
       children: [
-        /* @__PURE__ */ a(P, { size: X, className: `${_} shrink-0` }),
+        /* @__PURE__ */ a(L, { size: q, className: `${O} shrink-0` }),
         /* @__PURE__ */ a(
           "input",
           {
-            ref: I,
+            ref: _,
             type: "text",
             value: s,
             onChange: (e) => n(e.target.value),
@@ -61,8 +62,8 @@ const W = {
             "aria-label": d ? m : m ?? i ?? "Search",
             "aria-labelledby": d,
             disabled: t,
-            autoFocus: S,
-            className: `flex-1 bg-transparent border-none outline-none ${G[p]} font-medium text-[var(--malachite-text-primary)] ${F} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
+            autoFocus: C,
+            className: `flex-1 bg-transparent border-none outline-none ${S === "body" ? W : X[p]} font-medium text-[var(--malachite-text-primary)] ${T} placeholder:font-medium disabled:cursor-not-allowed min-w-0`
           }
         ),
         b && /* @__PURE__ */ a(
@@ -70,10 +71,10 @@ const W = {
           {
             type: "button",
             "aria-label": "Clear search",
-            onMouseDown: q,
+            onMouseDown: H,
             onClick: v,
             className: `shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${U}`,
-            children: /* @__PURE__ */ a(D, { size: 10 })
+            children: /* @__PURE__ */ a(z, { size: 10 })
           }
         )
       ]
@@ -81,7 +82,7 @@ const W = {
   );
 });
 export {
-  te as Search,
-  te as default
+  oe as Search,
+  oe as default
 };
 //# sourceMappingURL=Search.js.map

package/dist/components/Search.js.map

@@ -1 +1 @@
-{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { composeRefs } from './composeRefs';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { FOCUS_RING } from './focusRing';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n    size?: SearchSize;\n    variant?: SearchVariant;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    className?: string;\n    width?: string | number;\n    style?: React.CSSProperties;\n    /**\n     * Shows a clear button while the field has text, and lets Escape clear it. Either way focus\n     * stays in the field, and Escape that clears is not also passed to a surrounding panel.\n     */\n    clearable?: boolean;\n    /** Called after `onChange('')` when the clear button or Escape empties the field. */\n    onClear?: () => void;\n    /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    /** The field's accessible name. Falls back to the placeholder, then \"Search\". */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n/** Forwards a ref to the input, so a consumer can focus the field. */\nconst Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n    {\n        value,\n        onChange,\n        placeholder,\n        size = 'large',\n        variant = 'default',\n        disabled = false,\n        autoFocus = false,\n        className = '',\n        width,\n        style,\n        clearable = false,\n        onClear,\n        onKeyDown,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const setInputRef = useMemo(() => composeRefs(ref, inputRef), [ref]);\n    const canClear = clearable && value.length > 0 && !disabled;\n\n    const clear = () => {\n        onChange('');\n        onClear?.();\n        inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(event);\n        // Escape mid-composition cancels the IME's candidate text, not the query.\n        const composing = event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n        if (event.key !== 'Escape' || event.defaultPrevented || composing || !canClear) {\n            return;\n        }\n        // Both, as Dropdown does: an ancestor's own onKeyDown runs before the escape layers.\n        event.preventDefault();\n        event.stopPropagation();\n        clear();\n    };\n    const isMuted = variant === 'muted';\n\n    // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n    // white field with border + subtle shadow. Both keep a visible focus border.\n    // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n    const bgClass = isMuted\n        ? 'bg-[var(--malachite-card-border)]'\n        : 'bg-[var(--malachite-card-background)]';\n    const restingBorderClass = isMuted\n        ? 'border-transparent'\n        : 'border-[var(--malachite-card-border)]';\n    // Hover darkens the border; focus (inline below) takes precedence.\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n    const iconColorClass = isMuted\n        ? 'text-[var(--malachite-text-secondary)]'\n        : 'text-[var(--malachite-text-placeholder)]';\n    const placeholderColorClass = isMuted\n        ? 'placeholder:text-[var(--malachite-text-secondary)]'\n        : 'placeholder:text-[var(--malachite-text-placeholder)]';\n    const boxShadow = isMuted\n        ? 'none'\n        : focused\n          ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n          : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n    return (\n        <div\n            className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow,\n                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...controlWidthStyle(width),\n                ...style,\n            }}\n        >\n            <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n            <input\n                ref={setInputRef}\n                type=\"text\"\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocused(true)}\n                onBlur={() => setFocused(false)}\n                placeholder={placeholder}\n                aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? placeholder ?? 'Search')}\n                aria-labelledby={ariaLabelledBy}\n                disabled={disabled}\n                autoFocus={autoFocus}\n                className={`flex-1 bg-transparent border-none outline-none ${CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n            />\n            {canClear && (\n                <button\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    onMouseDown={keepFocus}\n                    onClick={clear}\n                    className={`shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${FOCUS_RING}`}\n                >\n                    <DismissIcon size={10} />\n                </button>\n            )}\n        </div>\n    );\n});\n\nexport default Search;\nexport { Search };\n"],"names":["SIZE_CLASSES","ICON_SIZE","keepFocus","event","Search","forwardRef","value","onChange","placeholder","size","variant","disabled","autoFocus","className","width","style","clearable","onClear","onKeyDown","ariaLabel","ariaLabelledBy","ref","focused","setFocused","useState","inputRef","useRef","setInputRef","useMemo","composeRefs","canClear","clear","_a","handleKeyDown","composing","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","CONTROL_TEXT_SIZE_CLASS","FOCUS_RING","DismissIcon"],"mappings":"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"}
+{"version":3,"file":"Search.js","sources":["../../src/components/Search.tsx"],"sourcesContent":["import React, { forwardRef, useMemo, useRef, useState } from 'react';\nimport DismissIcon from './CustomIcons/DismissIcon';\nimport SearchIcon from './CustomIcons/SearchIcon';\nimport { composeRefs } from './composeRefs';\nimport { CONTROL_TEXT_SIZE_CLASS } from './controlTextSize';\nimport { controlWidthStyle } from './controlWidth';\nimport { FOCUS_RING } from './focusRing';\n\nexport type SearchSize = 'small' | 'medium' | 'large';\nexport type SearchVariant = 'default' | 'muted';\n/** `body` is the 14px body step at any size. */\nexport type SearchTextSize = 'control' | 'body';\n\nconst BODY_TEXT_CLASS = 'text-[length:var(--malachite-font-size-medium,14px)]';\n\n// Figma \"Search Element - Standard\": Small 28px, Medium 32px, Large 42px, with the radius\n// tracking the tier (10/12/14) and the icon staying 15px throughout.\nconst SIZE_CLASSES: Record<SearchSize, string> = {\n    small: 'h-[var(--malachite-control-height-small,28px)] gap-[6px] px-[10px] rounded-[var(--malachite-radius-10,10px)]',\n    medium: 'h-[var(--malachite-control-height-medium,32px)] gap-[10px] px-[10px] rounded-xl',\n    large: 'h-[var(--malachite-control-height-large,42px)] gap-[12px] px-[12px] rounded-[var(--malachite-radius-xxl,14px)]',\n};\n\nconst ICON_SIZE = 15;\n\nexport interface SearchProps {\n    value: string;\n    onChange: (value: string) => void;\n    placeholder?: string;\n    /** 'large' (42px) for form inputs; 'medium' (32px) for toolbars; 'small' (28px) in a table. */\n    size?: SearchSize;\n    variant?: SearchVariant;\n    textSize?: SearchTextSize;\n    disabled?: boolean;\n    autoFocus?: boolean;\n    className?: string;\n    width?: string | number;\n    style?: React.CSSProperties;\n    /**\n     * Shows a clear button while the field has text, and lets Escape clear it. Either way focus\n     * stays in the field, and Escape that clears is not also passed to a surrounding panel.\n     */\n    clearable?: boolean;\n    /** Called after `onChange('')` when the clear button or Escape empties the field. */\n    onClear?: () => void;\n    /** Runs before Search's own Escape handling; call `preventDefault()` to skip it. */\n    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;\n    /** The field's accessible name. Falls back to the placeholder, then \"Search\". */\n    'aria-label'?: string;\n    'aria-labelledby'?: string;\n}\n\nconst keepFocus = (event: React.MouseEvent) => event.preventDefault();\n\n/** Forwards a ref to the input, so a consumer can focus the field. */\nconst Search = forwardRef<HTMLInputElement, SearchProps>(function Search(\n    {\n        value,\n        onChange,\n        placeholder,\n        size = 'large',\n        variant = 'default',\n        textSize = 'control',\n        disabled = false,\n        autoFocus = false,\n        className = '',\n        width,\n        style,\n        clearable = false,\n        onClear,\n        onKeyDown,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n    },\n    ref,\n) {\n    const [focused, setFocused] = useState(false);\n    const inputRef = useRef<HTMLInputElement>(null);\n    const setInputRef = useMemo(() => composeRefs(ref, inputRef), [ref]);\n    const canClear = clearable && value.length > 0 && !disabled;\n\n    const clear = () => {\n        onChange('');\n        onClear?.();\n        inputRef.current?.focus();\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        onKeyDown?.(event);\n        // Escape mid-composition cancels the IME's candidate text, not the query.\n        const composing = event.nativeEvent.isComposing || event.nativeEvent.keyCode === 229;\n        if (event.key !== 'Escape' || event.defaultPrevented || composing || !canClear) {\n            return;\n        }\n        // Both, as Dropdown does: an ancestor's own onKeyDown runs before the escape layers.\n        event.preventDefault();\n        event.stopPropagation();\n        clear();\n    };\n    const isMuted = variant === 'muted';\n\n    // Muted variant: a borderless search that sits on a surface (no shadow). Default:\n    // white field with border + subtle shadow. Both keep a visible focus border.\n    // The fill is the Border colour by design; the dimmed grey vanishes on a sunken page.\n    const bgClass = isMuted\n        ? 'bg-[var(--malachite-card-border)]'\n        : 'bg-[var(--malachite-card-background)]';\n    const restingBorderClass = isMuted\n        ? 'border-transparent'\n        : 'border-[var(--malachite-card-border)]';\n    // Hover darkens the border; focus (inline below) takes precedence.\n    const hoverBorderClass = disabled ? '' : 'hover:border-[var(--malachite-text-placeholder)]';\n    const iconColorClass = isMuted\n        ? 'text-[var(--malachite-text-secondary)]'\n        : 'text-[var(--malachite-text-placeholder)]';\n    const placeholderColorClass = isMuted\n        ? 'placeholder:text-[var(--malachite-text-secondary)]'\n        : 'placeholder:text-[var(--malachite-text-placeholder)]';\n    const boxShadow = isMuted\n        ? 'none'\n        : focused\n          ? 'var(--malachite-shadow-accent, 0px 1px 0px 0px rgba(0, 175, 102, 0.15))'\n          : '0px 1px 1px 0px rgba(0, 0, 0, 0.15)';\n\n    return (\n        <div\n            className={`w-full ${bgClass} border border-solid ${restingBorderClass} ${hoverBorderClass} transition-colors flex items-center ${SIZE_CLASSES[size]} ${disabled ? 'opacity-60 cursor-not-allowed' : ''} ${className}`}\n            style={{\n                boxShadow,\n                borderColor: focused\n                    ? 'var(--malachite-control-border-hover, rgba(0, 175, 102, 0.4))'\n                    : undefined,\n                ...controlWidthStyle(width),\n                ...style,\n            }}\n        >\n            <SearchIcon size={ICON_SIZE} className={`${iconColorClass} shrink-0`} />\n            <input\n                ref={setInputRef}\n                type=\"text\"\n                value={value}\n                onChange={(e) => onChange(e.target.value)}\n                onKeyDown={handleKeyDown}\n                onFocus={() => setFocused(true)}\n                onBlur={() => setFocused(false)}\n                placeholder={placeholder}\n                aria-label={ariaLabelledBy ? ariaLabel : (ariaLabel ?? placeholder ?? 'Search')}\n                aria-labelledby={ariaLabelledBy}\n                disabled={disabled}\n                autoFocus={autoFocus}\n                className={`flex-1 bg-transparent border-none outline-none ${textSize === 'body' ? BODY_TEXT_CLASS : CONTROL_TEXT_SIZE_CLASS[size]} font-medium text-[var(--malachite-text-primary)] ${placeholderColorClass} placeholder:font-medium disabled:cursor-not-allowed min-w-0`}\n            />\n            {canClear && (\n                <button\n                    type=\"button\"\n                    aria-label=\"Clear search\"\n                    onMouseDown={keepFocus}\n                    onClick={clear}\n                    className={`shrink-0 flex items-center justify-center w-6 h-6 -mr-[5px] bg-transparent border-none rounded text-[var(--malachite-text-placeholder)] hover:text-[var(--malachite-text-primary)] cursor-pointer ${FOCUS_RING}`}\n                >\n                    <DismissIcon size={10} />\n                </button>\n            )}\n        </div>\n    );\n});\n\nexport default Search;\nexport { Search };\n"],"names":["BODY_TEXT_CLASS","SIZE_CLASSES","ICON_SIZE","keepFocus","event","Search","forwardRef","value","onChange","placeholder","size","variant","textSize","disabled","autoFocus","className","width","style","clearable","onClear","onKeyDown","ariaLabel","ariaLabelledBy","ref","focused","setFocused","useState","inputRef","useRef","setInputRef","useMemo","composeRefs","canClear","clear","_a","handleKeyDown","composing","isMuted","bgClass","restingBorderClass","hoverBorderClass","iconColorClass","placeholderColorClass","boxShadow","jsxs","controlWidthStyle","jsx","SearchIcon","CONTROL_TEXT_SIZE_CLASS","FOCUS_RING","DismissIcon"],"mappings":"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"}