@plumile/ui 0.1.56 → 0.1.57

package/lib/esm/components/select/SimpleSelect.js

@@ -1,185 +1,185 @@
-import { jsx as a, jsxs as d, Fragment as X } from "react/jsx-runtime";
-import { useState as T, useRef as k, useId as Y, useMemo as Z, useEffect as p, useCallback as _ } from "react";
-import { ChevronDownSvg as $ } from "../../icons/ChevronDownSvg.js";
-import { optionDescription as ee, menuSeparator as ne, actionsContainer as re, trigger as te, valueText as le, optionSelected as ae, optionButton as ce, triggerOpen as se, triggerIconBrand as oe, triggerIconOpen as ie, triggerIcon as de, label as ue, menuOpen as fe, menu as me, container as he } from "./SimpleSelect.css.js";
-import { cx as u } from "../../theme/tools.js";
-import { useUiTranslation as pe } from "../../i18n/useUiTranslation.js";
-const Ne = ({
-  actionsSlot: f,
-  className: F,
-  isDisabled: g = !1,
-  label: b,
-  onChange: M,
-  options: n,
-  placeholder: U,
-  value: o,
-  variant: N = "default"
-}) => {
-  const { t: j } = pe(), [t, s] = T(!1), B = U ?? j("common.select.placeholder"), [l, i] = T(-1), y = k(null), m = k(null), w = k(/* @__PURE__ */ new Map()), x = Y(), q = Z(() => n.find((e) => e.value === o) ?? null, [n, o]);
-  p(() => {
-    if (!t)
-      return;
-    const e = n.findIndex((c) => c.value === o);
-    let r = 0;
-    e >= 0 && (r = e), i(r);
-  }, [t, n, o]), p(() => {
-    if (!t || l < 0 || l >= n.length)
-      return;
-    const e = n[l];
-    if (e == null)
-      return;
-    w.current.get(e.id)?.focus();
-  }, [l, t, n]), p(() => {
-    if (!t)
-      return () => {
-      };
-    const e = (c) => {
-      y.current?.contains(c.target) || s(!1);
-    }, r = (c) => {
-      c.key === "Escape" && (s(!1), m.current?.focus());
-    };
-    return document.addEventListener("mousedown", e), window.addEventListener("keydown", r), () => {
-      document.removeEventListener("mousedown", e), window.removeEventListener("keydown", r);
-    };
-  }, [t]), p(() => {
-    w.current.clear();
-  }, [n]);
-  const v = _(() => {
-    s(!1), requestAnimationFrame(() => {
-      m.current?.focus();
-    });
-  }, []), H = () => {
-    g || s((e) => !e);
-  }, D = (e) => {
-    M(e), v();
-  }, P = (e) => {
-    g || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), s(!0));
-  }, C = (e) => {
-    n.length !== 0 && i((r) => {
-      if (r < 0) {
-        let h = n.length - 1;
-        return e === 1 && (h = 0), h;
-      }
-      return (r + e + n.length) % n.length;
-    });
-  }, z = (e) => {
-    switch (e.key) {
-      case "ArrowDown":
-        e.preventDefault(), C(1);
-        break;
-      case "ArrowUp":
-        e.preventDefault(), C(-1);
-        break;
-      case "Home":
-        e.preventDefault(), i(0);
-        break;
-      case "End":
-        e.preventDefault(), i(n.length - 1);
-        break;
-      case "Enter":
-      case " ": {
-        if (e.preventDefault(), l >= 0 && l < n.length) {
-          const r = n[l];
-          r != null && D(r.value);
-        }
-        break;
-      }
-      case "Escape":
-        e.preventDefault(), s(!1), m.current?.focus();
-        break;
-    }
-  }, G = (e) => (r) => {
-    w.current.set(e, r);
-  };
-  let I;
-  b != null && (I = `${x}-label`);
-  const J = () => typeof f == "function" ? f(v) : f ?? null, Q = n.map((e, r) => {
-    const c = e.value === o, h = u(ce, {
-      [ae]: c
-    });
-    let L = -1;
-    l === r && (L = 0);
-    let R = null;
-    return e.description != null && e.description !== "" && (R = /* @__PURE__ */ a("span", { className: ee, children: e.description })), /* @__PURE__ */ a("li", { role: "presentation", children: /* @__PURE__ */ d(
-      "button",
-      {
-        ref: G(e.id),
-        type: "button",
-        role: "option",
-        "aria-selected": c,
-        className: h,
-        tabIndex: L,
-        onClick: () => {
-          D(e.value);
-        },
-        onMouseEnter: () => {
-          i(r);
-        },
-        children: [
-          /* @__PURE__ */ a("span", { children: e.label }),
-          R
-        ]
-      }
-    ) }, e.id);
-  });
-  let E;
-  l >= 0 && l < n.length && (E = n[l]?.id);
-  let O = null;
-  b != null && (O = /* @__PURE__ */ a("span", { id: I, className: ue, children: b }));
-  let S;
-  t && (S = x);
-  let A = null;
-  f != null && (A = /* @__PURE__ */ d(X, { children: [
-    /* @__PURE__ */ a("li", { role: "presentation", children: /* @__PURE__ */ a("div", { className: ne, role: "separator" }) }),
-    /* @__PURE__ */ a("li", { role: "presentation", children: /* @__PURE__ */ a("div", { className: re, children: J() }) })
-  ] }));
-  let K = null;
-  t && (K = /* @__PURE__ */ d(
-    "ul",
-    {
-      id: x,
-      className: u(me, fe),
-      role: "listbox",
-      "aria-activedescendant": E,
-      tabIndex: -1,
-      onKeyDown: z,
-      children: [
-        Q,
-        A
-      ]
-    }
-  ));
-  const V = u(te({ variant: N }), {
-    [se]: t
-  }), W = u(de, {
-    [ie]: t,
-    [oe]: N === "brand"
-  });
-  return /* @__PURE__ */ d("div", { className: u(he, F), ref: y, children: [
-    O,
-    /* @__PURE__ */ d(
-      "button",
-      {
-        ref: m,
-        type: "button",
-        className: V,
-        "aria-haspopup": "listbox",
-        "aria-expanded": t,
-        "aria-controls": S,
-        "aria-labelledby": I,
-        onClick: H,
-        onKeyDown: P,
-        disabled: g,
-        children: [
-          /* @__PURE__ */ a("span", { className: le, children: q?.label ?? B }),
-          /* @__PURE__ */ a("span", { className: W, children: /* @__PURE__ */ a($, { width: 16, height: 16, "aria-hidden": "true" }) })
-        ]
-      }
-    ),
-    K
-  ] });
+import { cx as e } from "../../theme/tools.js";
+import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
+import { ChevronDownSvg as n } from "../../icons/ChevronDownSvg.js";
+import { actionsContainer as r, container as i, label as a, menu as o, menuOpen as s, menuSeparator as c, optionButton as l, optionDescription as u, optionSelected as d, trigger as f, triggerIcon as ee, triggerIconBrand as te, triggerIconOpen as ne, triggerOpen as re, valueText as ie } from "./SimpleSelect.css.js";
+import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useCallback as g, useEffect as _, useId as v, useMemo as y, useRef as b, useState as x } from "react";
+//#region src/components/select/SimpleSelect.tsx
+var S = ({ actionsSlot: S, className: C, isDisabled: w = !1, label: T, onChange: ae, options: E, placeholder: oe, value: D, variant: O = "default" }) => {
+	let { t: k } = t(), [A, j] = x(!1), M = oe ?? k("common.select.placeholder"), [N, P] = x(-1), F = b(null), I = b(null), L = b(/* @__PURE__ */ new Map()), R = v(), z = y(() => E.find((e) => e.value === D) ?? null, [E, D]);
+	_(() => {
+		if (!A) return;
+		let e = E.findIndex((e) => e.value === D), t = 0;
+		e >= 0 && (t = e), P(t);
+	}, [
+		A,
+		E,
+		D
+	]), _(() => {
+		if (!A || N < 0 || N >= E.length) return;
+		let e = E[N];
+		e != null && L.current.get(e.id)?.focus();
+	}, [
+		N,
+		A,
+		E
+	]), _(() => {
+		if (!A) return () => {};
+		let e = (e) => {
+			F.current?.contains(e.target) || j(!1);
+		}, t = (e) => {
+			e.key === "Escape" && (j(!1), I.current?.focus());
+		};
+		return document.addEventListener("mousedown", e), window.addEventListener("keydown", t), () => {
+			document.removeEventListener("mousedown", e), window.removeEventListener("keydown", t);
+		};
+	}, [A]), _(() => {
+		L.current.clear();
+	}, [E]);
+	let B = g(() => {
+		j(!1), requestAnimationFrame(() => {
+			I.current?.focus();
+		});
+	}, []), V = () => {
+		w || j((e) => !e);
+	}, H = (e) => {
+		ae(e), B();
+	}, U = (e) => {
+		w || (e.key === "ArrowDown" || e.key === "ArrowUp") && (e.preventDefault(), j(!0));
+	}, W = (e) => {
+		E.length !== 0 && P((t) => {
+			if (t < 0) {
+				let t = E.length - 1;
+				return e === 1 && (t = 0), t;
+			}
+			return (t + e + E.length) % E.length;
+		});
+	}, G = (e) => {
+		switch (e.key) {
+			case "ArrowDown":
+				e.preventDefault(), W(1);
+				break;
+			case "ArrowUp":
+				e.preventDefault(), W(-1);
+				break;
+			case "Home":
+				e.preventDefault(), P(0);
+				break;
+			case "End":
+				e.preventDefault(), P(E.length - 1);
+				break;
+			case "Enter":
+			case " ":
+				if (e.preventDefault(), N >= 0 && N < E.length) {
+					let e = E[N];
+					e != null && H(e.value);
+				}
+				break;
+			case "Escape":
+				e.preventDefault(), j(!1), I.current?.focus();
+				break;
+			default: break;
+		}
+	}, K = (e) => (t) => {
+		L.current.set(e, t);
+	}, q;
+	T != null && (q = `${R}-label`);
+	let se = () => typeof S == "function" ? S(B) : S ?? null, ce = E.map((t, n) => {
+		let r = t.value === D, i = e(l, { [d]: r }), a = -1;
+		N === n && (a = 0);
+		let o = null;
+		return t.description != null && t.description !== "" && (o = /* @__PURE__ */ m("span", {
+			className: u,
+			children: t.description
+		})), /* @__PURE__ */ m("li", {
+			role: "presentation",
+			children: /* @__PURE__ */ h("button", {
+				ref: K(t.id),
+				type: "button",
+				role: "option",
+				"aria-selected": r,
+				className: i,
+				tabIndex: a,
+				onClick: () => {
+					H(t.value);
+				},
+				onMouseEnter: () => {
+					P(n);
+				},
+				children: [/* @__PURE__ */ m("span", { children: t.label }), o]
+			})
+		}, t.id);
+	}), J;
+	N >= 0 && N < E.length && (J = E[N]?.id);
+	let Y = null;
+	T != null && (Y = /* @__PURE__ */ m("span", {
+		id: q,
+		className: a,
+		children: T
+	}));
+	let X;
+	A && (X = R);
+	let Z = null;
+	S != null && (Z = /* @__PURE__ */ h(p, { children: [/* @__PURE__ */ m("li", {
+		role: "presentation",
+		children: /* @__PURE__ */ m("div", {
+			className: c,
+			role: "separator"
+		})
+	}), /* @__PURE__ */ m("li", {
+		role: "presentation",
+		children: /* @__PURE__ */ m("div", {
+			className: r,
+			children: se()
+		})
+	})] }));
+	let Q = null;
+	A && (Q = /* @__PURE__ */ h("ul", {
+		id: R,
+		className: e(o, s),
+		role: "listbox",
+		"aria-activedescendant": J,
+		tabIndex: -1,
+		onKeyDown: G,
+		children: [ce, Z]
+	}));
+	let le = e(f({ variant: O }), { [re]: A }), $ = e(ee, {
+		[ne]: A,
+		[te]: O === "brand"
+	});
+	return /* @__PURE__ */ h("div", {
+		className: e(i, C),
+		ref: F,
+		children: [
+			Y,
+			/* @__PURE__ */ h("button", {
+				ref: I,
+				type: "button",
+				className: le,
+				"aria-haspopup": "listbox",
+				"aria-expanded": A,
+				"aria-controls": X,
+				"aria-labelledby": q,
+				onClick: V,
+				onKeyDown: U,
+				disabled: w,
+				children: [/* @__PURE__ */ m("span", {
+					className: ie,
+					children: z?.label ?? M
+				}), /* @__PURE__ */ m("span", {
+					className: $,
+					children: /* @__PURE__ */ m(n, {
+						width: 16,
+						height: 16,
+						"aria-hidden": "true"
+					})
+				})]
+			}),
+			Q
+		]
+	});
 };
-export {
-  Ne as SimpleSelect
-};
-//# sourceMappingURL=SimpleSelect.js.map
+//#endregion
+export { S as SimpleSelect };
+
+//# sourceMappingURL=SimpleSelect.js.map

package/lib/esm/components/select/SimpleSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"SimpleSelect.js","sources":["../../../../src/components/select/SimpleSelect.tsx"],"sourcesContent":["import {\n  type JSX,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ChevronDownSvg } from '../../icons/ChevronDownSvg.js';\n\nimport * as styles from './SimpleSelect.css.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nexport type SimpleSelectOption = {\n  id: string;\n  label: string;\n  value: string;\n  description?: string | null;\n};\n\ntype ActionSlot = ReactNode | ((closeMenu: () => void) => ReactNode);\n\ntype Props = {\n  options: readonly SimpleSelectOption[];\n  value: string;\n  onChange: (value: string) => void;\n  label?: ReactNode;\n  placeholder?: string;\n  actionsSlot?: ActionSlot;\n  isDisabled?: boolean;\n  className?: string;\n  variant?: 'default' | 'brand';\n};\n\nexport const SimpleSelect = ({\n  actionsSlot,\n  className,\n  isDisabled = false,\n  label,\n  onChange,\n  options,\n  placeholder,\n  value,\n  variant = 'default',\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [isOpen, setIsOpen] = useState(false);\n  const resolvedPlaceholder = placeholder ?? t('common.select.placeholder');\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const optionRefs = useRef<Map<string, HTMLButtonElement | null>>(new Map());\n  const listboxId = useId();\n\n  const selectedOption = useMemo(() => {\n    return (\n      options.find((option) => {\n        return option.value === value;\n      }) ?? null\n    );\n  }, [options, value]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const selectedIndex = options.findIndex((option) => {\n      return option.value === value;\n    });\n    let nextIndex = 0;\n    if (selectedIndex >= 0) {\n      nextIndex = selectedIndex;\n    }\n    setFocusedIndex(nextIndex);\n  }, [isOpen, options, value]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n    if (focusedIndex < 0 || focusedIndex >= options.length) {\n      return;\n    }\n    const option = options[focusedIndex];\n    if (option == null) {\n      return;\n    }\n    const node = optionRefs.current.get(option.id);\n    node?.focus();\n  }, [focusedIndex, isOpen, options]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return () => {};\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (containerRef.current?.contains(event.target as Node)) {\n        return;\n      }\n      setIsOpen(false);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    optionRefs.current.clear();\n  }, [options]);\n\n  const closeMenu = useCallback(() => {\n    setIsOpen(false);\n    requestAnimationFrame(() => {\n      triggerRef.current?.focus();\n    });\n  }, []);\n\n  const handleToggle = (): void => {\n    if (isDisabled) {\n      return;\n    }\n    setIsOpen((prev) => {\n      return !prev;\n    });\n  };\n\n  const handleSelect = (nextValue: string): void => {\n    onChange(nextValue);\n    closeMenu();\n  };\n\n  const handleTriggerKeyDown = (\n    event: ReactKeyboardEvent<HTMLButtonElement>,\n  ) => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      setIsOpen(true);\n    }\n  };\n\n  const moveFocus = (direction: 1 | -1): void => {\n    if (options.length === 0) {\n      return;\n    }\n    setFocusedIndex((prev) => {\n      if (prev < 0) {\n        let fallbackIndex = options.length - 1;\n        if (direction === 1) {\n          fallbackIndex = 0;\n        }\n        return fallbackIndex;\n      }\n      const nextIndex = (prev + direction + options.length) % options.length;\n      return nextIndex;\n    });\n  };\n\n  const handleListKeyDown = (event: ReactKeyboardEvent<HTMLUListElement>) => {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        moveFocus(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        moveFocus(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        setFocusedIndex(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        setFocusedIndex(options.length - 1);\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        if (focusedIndex >= 0 && focusedIndex < options.length) {\n          const option = options[focusedIndex];\n          if (option != null) {\n            handleSelect(option.value);\n          }\n        }\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        setIsOpen(false);\n        triggerRef.current?.focus();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const registerOptionRef = (optionId: string) => {\n    return (node: HTMLButtonElement | null) => {\n      optionRefs.current.set(optionId, node);\n    };\n  };\n\n  let labelId: string | undefined;\n  if (label != null) {\n    labelId = `${listboxId}-label`;\n  }\n\n  const renderActionsSlot = (): ReactNode | null => {\n    if (typeof actionsSlot === 'function') {\n      return actionsSlot(closeMenu);\n    }\n    return actionsSlot ?? null;\n  };\n\n  const optionItems = options.map((option, index) => {\n    const isSelected = option.value === value;\n    const optionClassName = cx(styles.optionButton, {\n      [styles.optionSelected]: isSelected,\n    });\n    let optionTabIndex = -1;\n    if (focusedIndex === index) {\n      optionTabIndex = 0;\n    }\n\n    let descriptionNode: JSX.Element | null = null;\n    if (option.description != null && option.description !== '') {\n      descriptionNode = (\n        <span className={styles.optionDescription}>{option.description}</span>\n      );\n    }\n\n    return (\n      <li key={option.id} role=\"presentation\">\n        <button\n          ref={registerOptionRef(option.id)}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          className={optionClassName}\n          tabIndex={optionTabIndex}\n          onClick={() => {\n            handleSelect(option.value);\n          }}\n          onMouseEnter={() => {\n            setFocusedIndex(index);\n          }}\n        >\n          <span>{option.label}</span>\n          {descriptionNode}\n        </button>\n      </li>\n    );\n  });\n\n  let activeOptionId: string | undefined;\n  if (focusedIndex >= 0 && focusedIndex < options.length) {\n    activeOptionId = options[focusedIndex]?.id;\n  }\n\n  let labelNode: JSX.Element | null = null;\n  if (label != null) {\n    labelNode = (\n      <span id={labelId} className={styles.label}>\n        {label}\n      </span>\n    );\n  }\n\n  let ariaControls: string | undefined;\n  if (isOpen) {\n    ariaControls = listboxId;\n  }\n\n  let actionsSlotNode: ReactNode | null = null;\n  if (actionsSlot != null) {\n    actionsSlotNode = (\n      <>\n        <li role=\"presentation\">\n          <div className={styles.menuSeparator} role=\"separator\" />\n        </li>\n        <li role=\"presentation\">\n          <div className={styles.actionsContainer}>{renderActionsSlot()}</div>\n        </li>\n      </>\n    );\n  }\n\n  let menuNode: JSX.Element | null = null;\n  if (isOpen) {\n    menuNode = (\n      <ul\n        id={listboxId}\n        className={cx(styles.menu, styles.menuOpen)}\n        role=\"listbox\"\n        aria-activedescendant={activeOptionId}\n        tabIndex={-1}\n        onKeyDown={handleListKeyDown}\n      >\n        {optionItems}\n        {actionsSlotNode}\n      </ul>\n    );\n  }\n\n  const triggerClassName = cx(styles.trigger({ variant }), {\n    [styles.triggerOpen]: isOpen,\n  });\n  const triggerIconClassName = cx(styles.triggerIcon, {\n    [styles.triggerIconOpen]: isOpen,\n    [styles.triggerIconBrand]: variant === 'brand',\n  });\n\n  return (\n    <div className={cx(styles.container, className)} ref={containerRef}>\n      {labelNode}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={triggerClassName}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={ariaControls}\n        aria-labelledby={labelId}\n        onClick={handleToggle}\n        onKeyDown={handleTriggerKeyDown}\n        disabled={isDisabled}\n      >\n        <span className={styles.valueText}>\n          {selectedOption?.label ?? resolvedPlaceholder}\n        </span>\n        <span className={triggerIconClassName}>\n          <ChevronDownSvg width={16} height={16} aria-hidden=\"true\" />\n        </span>\n      </button>\n      {menuNode}\n    </div>\n  );\n};\n"],"names":["SimpleSelect","actionsSlot","className","isDisabled","label","onChange","options","placeholder","value","variant","t","useUiTranslation","isOpen","setIsOpen","useState","resolvedPlaceholder","focusedIndex","setFocusedIndex","containerRef","useRef","triggerRef","optionRefs","listboxId","useId","selectedOption","useMemo","option","useEffect","selectedIndex","nextIndex","handleClick","event","handleKeyDown","closeMenu","useCallback","handleToggle","prev","handleSelect","nextValue","handleTriggerKeyDown","moveFocus","direction","fallbackIndex","handleListKeyDown","registerOptionRef","optionId","node","labelId","renderActionsSlot","optionItems","index","isSelected","optionClassName","cx","styles.optionButton","styles.optionSelected","optionTabIndex","descriptionNode","styles.optionDescription","jsx","jsxs","activeOptionId","labelNode","styles.label","ariaControls","actionsSlotNode","Fragment","styles.menuSeparator","styles.actionsContainer","menuNode","styles.menu","styles.menuOpen","triggerClassName","styles.trigger","styles.triggerOpen","triggerIconClassName","styles.triggerIcon","styles.triggerIconOpen","styles.triggerIconBrand","styles.container","styles.valueText","ChevronDownSvg"],"mappings":";;;;;;AAuCO,MAAMA,KAAe,CAAC;AAAA,EAC3B,aAAAC;AAAA,EACA,WAAAC;AAAA,EACA,YAAAC,IAAa;AAAA,EAAA,OACbC;AAAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC;AAAA,EACA,OAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,MAA0B;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,GAAA,GACR,CAACC,GAAQC,CAAS,IAAIC,EAAS,EAAK,GACpCC,IAAsBR,KAAeG,EAAE,2BAA2B,GAClE,CAACM,GAAcC,CAAe,IAAIH,EAAiB,EAAE,GACrDI,IAAeC,EAA8B,IAAI,GACjDC,IAAaD,EAAiC,IAAI,GAClDE,IAAaF,EAA8C,oBAAI,KAAK,GACpEG,IAAYC,EAAA,GAEZC,IAAiBC,EAAQ,MAE3BnB,EAAQ,KAAK,CAACoB,MACLA,EAAO,UAAUlB,CACzB,KAAK,MAEP,CAACF,GAASE,CAAK,CAAC;AAEnB,EAAAmB,EAAU,MAAM;AACd,QAAI,CAACf;AACH;AAGF,UAAMgB,IAAgBtB,EAAQ,UAAU,CAACoB,MAChCA,EAAO,UAAUlB,CACzB;AACD,QAAIqB,IAAY;AAChB,IAAID,KAAiB,MACnBC,IAAYD,IAEdX,EAAgBY,CAAS;AAAA,EAC3B,GAAG,CAACjB,GAAQN,GAASE,CAAK,CAAC,GAE3BmB,EAAU,MAAM;AAId,QAHI,CAACf,KAGDI,IAAe,KAAKA,KAAgBV,EAAQ;AAC9C;AAEF,UAAMoB,IAASpB,EAAQU,CAAY;AACnC,QAAIU,KAAU;AACZ;AAGF,IADaL,EAAW,QAAQ,IAAIK,EAAO,EAAE,GACvC,MAAA;AAAA,EACR,GAAG,CAACV,GAAcJ,GAAQN,CAAO,CAAC,GAElCqB,EAAU,MAAM;AACd,QAAI,CAACf;AACH,aAAO,MAAM;AAAA,MAAC;AAGhB,UAAMkB,IAAc,CAACC,MAAsB;AACzC,MAAIb,EAAa,SAAS,SAASa,EAAM,MAAc,KAGvDlB,EAAU,EAAK;AAAA,IACjB,GAEMmB,IAAgB,CAACD,MAAyB;AAC9C,MAAIA,EAAM,QAAQ,aAChBlB,EAAU,EAAK,GACfO,EAAW,SAAS,MAAA;AAAA,IAExB;AAEA,oBAAS,iBAAiB,aAAaU,CAAW,GAClD,OAAO,iBAAiB,WAAWE,CAAa,GAEzC,MAAM;AACX,eAAS,oBAAoB,aAAaF,CAAW,GACrD,OAAO,oBAAoB,WAAWE,CAAa;AAAA,IACrD;AAAA,EACF,GAAG,CAACpB,CAAM,CAAC,GAEXe,EAAU,MAAM;AACd,IAAAN,EAAW,QAAQ,MAAA;AAAA,EACrB,GAAG,CAACf,CAAO,CAAC;AAEZ,QAAM2B,IAAYC,EAAY,MAAM;AAClC,IAAArB,EAAU,EAAK,GACf,sBAAsB,MAAM;AAC1B,MAAAO,EAAW,SAAS,MAAA;AAAA,IACtB,CAAC;AAAA,EACH,GAAG,CAAA,CAAE,GAECe,IAAe,MAAY;AAC/B,IAAIhC,KAGJU,EAAU,CAACuB,MACF,CAACA,CACT;AAAA,EACH,GAEMC,IAAe,CAACC,MAA4B;AAChD,IAAAjC,EAASiC,CAAS,GAClBL,EAAA;AAAA,EACF,GAEMM,IAAuB,CAC3BR,MACG;AACH,IAAI5B,MAIA4B,EAAM,QAAQ,eAAeA,EAAM,QAAQ,eAC7CA,EAAM,eAAA,GACNlB,EAAU,EAAI;AAAA,EAElB,GAEM2B,IAAY,CAACC,MAA4B;AAC7C,IAAInC,EAAQ,WAAW,KAGvBW,EAAgB,CAACmB,MAAS;AACxB,UAAIA,IAAO,GAAG;AACZ,YAAIM,IAAgBpC,EAAQ,SAAS;AACrC,eAAImC,MAAc,MAChBC,IAAgB,IAEXA;AAAA,MACT;AAEA,cADmBN,IAAOK,IAAYnC,EAAQ,UAAUA,EAAQ;AAAA,IAElE,CAAC;AAAA,EACH,GAEMqC,IAAoB,CAACZ,MAAgD;AACzE,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AACH,QAAAA,EAAM,eAAA,GACNS,EAAU,CAAC;AACX;AAAA,MACF,KAAK;AACH,QAAAT,EAAM,eAAA,GACNS,EAAU,EAAE;AACZ;AAAA,MACF,KAAK;AACH,QAAAT,EAAM,eAAA,GACNd,EAAgB,CAAC;AACjB;AAAA,MACF,KAAK;AACH,QAAAc,EAAM,eAAA,GACNd,EAAgBX,EAAQ,SAAS,CAAC;AAClC;AAAA,MACF,KAAK;AAAA,MACL,KAAK,KAAK;AAER,YADAyB,EAAM,eAAA,GACFf,KAAgB,KAAKA,IAAeV,EAAQ,QAAQ;AACtD,gBAAMoB,IAASpB,EAAQU,CAAY;AACnC,UAAIU,KAAU,QACZW,EAAaX,EAAO,KAAK;AAAA,QAE7B;AACA;AAAA,MACF;AAAA,MACA,KAAK;AACH,QAAAK,EAAM,eAAA,GACNlB,EAAU,EAAK,GACfO,EAAW,SAAS,MAAA;AACpB;AAAA,IAEA;AAAA,EAEN,GAEMwB,IAAoB,CAACC,MAClB,CAACC,MAAmC;AACzC,IAAAzB,EAAW,QAAQ,IAAIwB,GAAUC,CAAI;AAAA,EACvC;AAGF,MAAIC;AACJ,EAAI3C,KAAS,SACX2C,IAAU,GAAGzB,CAAS;AAGxB,QAAM0B,IAAoB,MACpB,OAAO/C,KAAgB,aAClBA,EAAYgC,CAAS,IAEvBhC,KAAe,MAGlBgD,IAAc3C,EAAQ,IAAI,CAACoB,GAAQwB,MAAU;AACjD,UAAMC,IAAazB,EAAO,UAAUlB,GAC9B4C,IAAkBC,EAAGC,IAAqB;AAAA,MAC9C,CAACC,EAAqB,GAAGJ;AAAA,IAAA,CAC1B;AACD,QAAIK,IAAiB;AACrB,IAAIxC,MAAiBkC,MACnBM,IAAiB;AAGnB,QAAIC,IAAsC;AAC1C,WAAI/B,EAAO,eAAe,QAAQA,EAAO,gBAAgB,OACvD+B,sBACG,QAAA,EAAK,WAAWC,IAA2B,YAAO,aAAY,IAKjE,gBAAAC,EAAC,MAAA,EAAmB,MAAK,gBACvB,UAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKhB,EAAkBlB,EAAO,EAAE;AAAA,QAChC,MAAK;AAAA,QACL,MAAK;AAAA,QACL,iBAAeyB;AAAA,QACf,WAAWC;AAAA,QACX,UAAUI;AAAA,QACV,SAAS,MAAM;AACb,UAAAnB,EAAaX,EAAO,KAAK;AAAA,QAC3B;AAAA,QACA,cAAc,MAAM;AAClB,UAAAT,EAAgBiC,CAAK;AAAA,QACvB;AAAA,QAEA,UAAA;AAAA,UAAA,gBAAAS,EAAC,QAAA,EAAM,YAAO,MAAA,CAAM;AAAA,UACnBF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,EACH,GAjBO/B,EAAO,EAkBhB;AAAA,EAEJ,CAAC;AAED,MAAImC;AACJ,EAAI7C,KAAgB,KAAKA,IAAeV,EAAQ,WAC9CuD,IAAiBvD,EAAQU,CAAY,GAAG;AAG1C,MAAI8C,IAAgC;AACpC,EAAI1D,KAAS,SACX0D,sBACG,QAAA,EAAK,IAAIf,GAAS,WAAWgB,IAC3B,UAAA3D,GACH;AAIJ,MAAI4D;AACJ,EAAIpD,MACFoD,IAAe1C;AAGjB,MAAI2C,IAAoC;AACxC,EAAIhE,KAAe,SACjBgE,IACE,gBAAAL,EAAAM,GAAA,EACE,UAAA;AAAA,IAAA,gBAAAP,EAAC,MAAA,EAAG,MAAK,gBACP,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAWQ,IAAsB,MAAK,YAAA,CAAY,EAAA,CACzD;AAAA,IACA,gBAAAR,EAAC,MAAA,EAAG,MAAK,gBACP,UAAA,gBAAAA,EAAC,OAAA,EAAI,WAAWS,IAA0B,UAAApB,EAAA,EAAkB,CAAE,EAAA,CAChE;AAAA,EAAA,GACF;AAIJ,MAAIqB,IAA+B;AACnC,EAAIzD,MACFyD,IACE,gBAAAT;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAItC;AAAA,MACJ,WAAW+B,EAAGiB,IAAaC,EAAe;AAAA,MAC1C,MAAK;AAAA,MACL,yBAAuBV;AAAA,MACvB,UAAU;AAAA,MACV,WAAWlB;AAAA,MAEV,UAAA;AAAA,QAAAM;AAAA,QACAgB;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAKP,QAAMO,IAAmBnB,EAAGoB,GAAe,EAAE,SAAAhE,EAAA,CAAS,GAAG;AAAA,IACvD,CAACiE,EAAkB,GAAG9D;AAAA,EAAA,CACvB,GACK+D,IAAuBtB,EAAGuB,IAAoB;AAAA,IAClD,CAACC,EAAsB,GAAGjE;AAAA,IAC1B,CAACkE,EAAuB,GAAGrE,MAAY;AAAA,EAAA,CACxC;AAED,SACE,gBAAAmD,EAAC,SAAI,WAAWP,EAAG0B,IAAkB7E,CAAS,GAAG,KAAKgB,GACnD,UAAA;AAAA,IAAA4C;AAAA,IACD,gBAAAF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAKxC;AAAA,QACL,MAAK;AAAA,QACL,WAAWoD;AAAA,QACX,iBAAc;AAAA,QACd,iBAAe5D;AAAA,QACf,iBAAeoD;AAAA,QACf,mBAAiBjB;AAAA,QACjB,SAASZ;AAAA,QACT,WAAWI;AAAA,QACX,UAAUpC;AAAA,QAEV,UAAA;AAAA,UAAA,gBAAAwD,EAAC,UAAK,WAAWqB,IACd,UAAAxD,GAAgB,SAAST,GAC5B;AAAA,UACA,gBAAA4C,EAAC,QAAA,EAAK,WAAWgB,GACf,UAAA,gBAAAhB,EAACsB,GAAA,EAAe,OAAO,IAAI,QAAQ,IAAI,eAAY,OAAA,CAAO,EAAA,CAC5D;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAEDZ;AAAA,EAAA,GACH;AAEJ;"}
+{"version":3,"file":"SimpleSelect.js","names":[],"sources":["../../../../src/components/select/SimpleSelect.tsx"],"sourcesContent":["import {\n  type JSX,\n  type KeyboardEvent as ReactKeyboardEvent,\n  type ReactNode,\n  useCallback,\n  useEffect,\n  useId,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\n\nimport { ChevronDownSvg } from '../../icons/ChevronDownSvg.js';\n\nimport * as styles from './SimpleSelect.css.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nexport type SimpleSelectOption = {\n  id: string;\n  label: string;\n  value: string;\n  description?: string | null;\n};\n\ntype ActionSlot = ReactNode | ((closeMenu: () => void) => ReactNode);\n\ntype Props = {\n  options: readonly SimpleSelectOption[];\n  value: string;\n  onChange: (value: string) => void;\n  label?: ReactNode;\n  placeholder?: string;\n  actionsSlot?: ActionSlot;\n  isDisabled?: boolean;\n  className?: string;\n  variant?: 'default' | 'brand';\n};\n\nexport const SimpleSelect = ({\n  actionsSlot,\n  className,\n  isDisabled = false,\n  label,\n  onChange,\n  options,\n  placeholder,\n  value,\n  variant = 'default',\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  const [isOpen, setIsOpen] = useState(false);\n  const resolvedPlaceholder = placeholder ?? t('common.select.placeholder');\n  const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n  const containerRef = useRef<HTMLDivElement | null>(null);\n  const triggerRef = useRef<HTMLButtonElement | null>(null);\n  const optionRefs = useRef<Map<string, HTMLButtonElement | null>>(new Map());\n  const listboxId = useId();\n\n  const selectedOption = useMemo(() => {\n    return (\n      options.find((option) => {\n        return option.value === value;\n      }) ?? null\n    );\n  }, [options, value]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n\n    const selectedIndex = options.findIndex((option) => {\n      return option.value === value;\n    });\n    let nextIndex = 0;\n    if (selectedIndex >= 0) {\n      nextIndex = selectedIndex;\n    }\n    setFocusedIndex(nextIndex);\n  }, [isOpen, options, value]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return;\n    }\n    if (focusedIndex < 0 || focusedIndex >= options.length) {\n      return;\n    }\n    const option = options[focusedIndex];\n    if (option == null) {\n      return;\n    }\n    const node = optionRefs.current.get(option.id);\n    node?.focus();\n  }, [focusedIndex, isOpen, options]);\n\n  useEffect(() => {\n    if (!isOpen) {\n      return () => {};\n    }\n\n    const handleClick = (event: MouseEvent) => {\n      if (containerRef.current?.contains(event.target as Node)) {\n        return;\n      }\n      setIsOpen(false);\n    };\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        setIsOpen(false);\n        triggerRef.current?.focus();\n      }\n    };\n\n    document.addEventListener('mousedown', handleClick);\n    window.addEventListener('keydown', handleKeyDown);\n\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      window.removeEventListener('keydown', handleKeyDown);\n    };\n  }, [isOpen]);\n\n  useEffect(() => {\n    optionRefs.current.clear();\n  }, [options]);\n\n  const closeMenu = useCallback(() => {\n    setIsOpen(false);\n    requestAnimationFrame(() => {\n      triggerRef.current?.focus();\n    });\n  }, []);\n\n  const handleToggle = (): void => {\n    if (isDisabled) {\n      return;\n    }\n    setIsOpen((prev) => {\n      return !prev;\n    });\n  };\n\n  const handleSelect = (nextValue: string): void => {\n    onChange(nextValue);\n    closeMenu();\n  };\n\n  const handleTriggerKeyDown = (\n    event: ReactKeyboardEvent<HTMLButtonElement>,\n  ) => {\n    if (isDisabled) {\n      return;\n    }\n\n    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {\n      event.preventDefault();\n      setIsOpen(true);\n    }\n  };\n\n  const moveFocus = (direction: 1 | -1): void => {\n    if (options.length === 0) {\n      return;\n    }\n    setFocusedIndex((prev) => {\n      if (prev < 0) {\n        let fallbackIndex = options.length - 1;\n        if (direction === 1) {\n          fallbackIndex = 0;\n        }\n        return fallbackIndex;\n      }\n      const nextIndex = (prev + direction + options.length) % options.length;\n      return nextIndex;\n    });\n  };\n\n  const handleListKeyDown = (event: ReactKeyboardEvent<HTMLUListElement>) => {\n    switch (event.key) {\n      case 'ArrowDown':\n        event.preventDefault();\n        moveFocus(1);\n        break;\n      case 'ArrowUp':\n        event.preventDefault();\n        moveFocus(-1);\n        break;\n      case 'Home':\n        event.preventDefault();\n        setFocusedIndex(0);\n        break;\n      case 'End':\n        event.preventDefault();\n        setFocusedIndex(options.length - 1);\n        break;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        if (focusedIndex >= 0 && focusedIndex < options.length) {\n          const option = options[focusedIndex];\n          if (option != null) {\n            handleSelect(option.value);\n          }\n        }\n        break;\n      }\n      case 'Escape':\n        event.preventDefault();\n        setIsOpen(false);\n        triggerRef.current?.focus();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const registerOptionRef = (optionId: string) => {\n    return (node: HTMLButtonElement | null) => {\n      optionRefs.current.set(optionId, node);\n    };\n  };\n\n  let labelId: string | undefined;\n  if (label != null) {\n    labelId = `${listboxId}-label`;\n  }\n\n  const renderActionsSlot = (): ReactNode | null => {\n    if (typeof actionsSlot === 'function') {\n      return actionsSlot(closeMenu);\n    }\n    return actionsSlot ?? null;\n  };\n\n  const optionItems = options.map((option, index) => {\n    const isSelected = option.value === value;\n    const optionClassName = cx(styles.optionButton, {\n      [styles.optionSelected]: isSelected,\n    });\n    let optionTabIndex = -1;\n    if (focusedIndex === index) {\n      optionTabIndex = 0;\n    }\n\n    let descriptionNode: JSX.Element | null = null;\n    if (option.description != null && option.description !== '') {\n      descriptionNode = (\n        <span className={styles.optionDescription}>{option.description}</span>\n      );\n    }\n\n    return (\n      <li key={option.id} role=\"presentation\">\n        <button\n          ref={registerOptionRef(option.id)}\n          type=\"button\"\n          role=\"option\"\n          aria-selected={isSelected}\n          className={optionClassName}\n          tabIndex={optionTabIndex}\n          onClick={() => {\n            handleSelect(option.value);\n          }}\n          onMouseEnter={() => {\n            setFocusedIndex(index);\n          }}\n        >\n          <span>{option.label}</span>\n          {descriptionNode}\n        </button>\n      </li>\n    );\n  });\n\n  let activeOptionId: string | undefined;\n  if (focusedIndex >= 0 && focusedIndex < options.length) {\n    activeOptionId = options[focusedIndex]?.id;\n  }\n\n  let labelNode: JSX.Element | null = null;\n  if (label != null) {\n    labelNode = (\n      <span id={labelId} className={styles.label}>\n        {label}\n      </span>\n    );\n  }\n\n  let ariaControls: string | undefined;\n  if (isOpen) {\n    ariaControls = listboxId;\n  }\n\n  let actionsSlotNode: ReactNode | null = null;\n  if (actionsSlot != null) {\n    actionsSlotNode = (\n      <>\n        <li role=\"presentation\">\n          <div className={styles.menuSeparator} role=\"separator\" />\n        </li>\n        <li role=\"presentation\">\n          <div className={styles.actionsContainer}>{renderActionsSlot()}</div>\n        </li>\n      </>\n    );\n  }\n\n  let menuNode: JSX.Element | null = null;\n  if (isOpen) {\n    menuNode = (\n      <ul\n        id={listboxId}\n        className={cx(styles.menu, styles.menuOpen)}\n        role=\"listbox\"\n        aria-activedescendant={activeOptionId}\n        tabIndex={-1}\n        onKeyDown={handleListKeyDown}\n      >\n        {optionItems}\n        {actionsSlotNode}\n      </ul>\n    );\n  }\n\n  const triggerClassName = cx(styles.trigger({ variant }), {\n    [styles.triggerOpen]: isOpen,\n  });\n  const triggerIconClassName = cx(styles.triggerIcon, {\n    [styles.triggerIconOpen]: isOpen,\n    [styles.triggerIconBrand]: variant === 'brand',\n  });\n\n  return (\n    <div className={cx(styles.container, className)} ref={containerRef}>\n      {labelNode}\n      <button\n        ref={triggerRef}\n        type=\"button\"\n        className={triggerClassName}\n        aria-haspopup=\"listbox\"\n        aria-expanded={isOpen}\n        aria-controls={ariaControls}\n        aria-labelledby={labelId}\n        onClick={handleToggle}\n        onKeyDown={handleTriggerKeyDown}\n        disabled={isDisabled}\n      >\n        <span className={styles.valueText}>\n          {selectedOption?.label ?? resolvedPlaceholder}\n        </span>\n        <span className={triggerIconClassName}>\n          <ChevronDownSvg width={16} height={16} aria-hidden=\"true\" />\n        </span>\n      </button>\n      {menuNode}\n    </div>\n  );\n};\n"],"mappings":"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"}

package/lib/esm/components/subscriptions/RefetchNeededBanner.css.js

@@ -1,10 +1,8 @@
-/* empty css                                       */
-/* empty css                                       */
-var t = "_1onl44v0 txvbqbnvf txvbqboio txvbqbp5o txvbqblxf txvbqb9io txvbqbco txvbqbdoo txvbqbaof txvbqb1rf txvbqb1co txvbqb1qf txvbqbix txvbqbv09 txvbqbv69", x = "_1onl44v1 txvbqb9io txvbqbai6 txvbqbanx txvbqbk4x", q = "_1onl44v2 txvbqbfbo txvbqbamo txvbqb8x", o = "_1onl44v3 txvbqbfbo txvbqb8x txvbqbf4f";
-export {
-  x as content,
-  o as message,
-  t as root,
-  q as title
-};
-//# sourceMappingURL=RefetchNeededBanner.css.js.map
+/* empty css                                   */
+/* empty css                                   */
+//#region src/components/subscriptions/RefetchNeededBanner.css.ts
+var e = "_1onl44v0 txvbqbnvf txvbqboio txvbqbp5o txvbqblxf txvbqb9io txvbqbco txvbqbdoo txvbqbaof txvbqb1rf txvbqb1co txvbqb1qf txvbqbix txvbqbv09 txvbqbv69", t = "_1onl44v1 txvbqb9io txvbqbai6 txvbqbanx txvbqbk4x", n = "_1onl44v2 txvbqbfbo txvbqbamo txvbqb8x", r = "_1onl44v3 txvbqbfbo txvbqb8x txvbqbf4f";
+//#endregion
+export { t as content, r as message, e as root, n as title };
+
+//# sourceMappingURL=RefetchNeededBanner.css.js.map

package/lib/esm/components/subscriptions/RefetchNeededBanner.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"RefetchNeededBanner.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"RefetchNeededBanner.css.js","names":[],"sources":["../../../../src/components/subscriptions/RefetchNeededBanner.css.ts"],"sourcesContent":["import { sprinkles } from '../../theme/sprinkles.css.js';\n\nexport const root = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  gap: 3,\n  paddingY: 3,\n  paddingX: 4,\n  borderRadius: 'md',\n  borderWidth: 'default',\n  borderStyle: 'solid',\n  borderColor: 'amber-200',\n  backgroundColor: 'amber-50',\n  color: 'amber-900',\n});\n\nexport const content = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const title = sprinkles({\n  margin: 0,\n  fontWeight: 'semibold',\n  fontSize: 'sm',\n});\n\nexport const message = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  lineHeight: 1.4,\n});\n"],"mappings":""}

package/lib/esm/components/subscriptions/RefetchNeededBanner.js

@@ -1,24 +1,32 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
-import { Button as a } from "../../atomic/atoms/button/Button.js";
-import { cx as n } from "../../theme/tools.js";
-import { useUiTranslation as l } from "../../i18n/useUiTranslation.js";
-import { content as d, title as m, message as f, root as p } from "./RefetchNeededBanner.css.js";
-const g = ({
-  reason: r,
-  onReload: o,
-  className: c
-}) => {
-  const { t: e } = l();
-  let s = e("subscriptions.refetchNeeded.messages.default");
-  return r === "CURSOR_REPLAY_UNAVAILABLE" ? s = e("subscriptions.refetchNeeded.messages.cursorReplayUnavailable") : r === "BUFFER_OVERFLOW" && (s = e("subscriptions.refetchNeeded.messages.bufferOverflow")), /* @__PURE__ */ i("div", { className: n(p, c), children: [
-    /* @__PURE__ */ i("div", { className: d, children: [
-      /* @__PURE__ */ t("p", { className: m, children: e("subscriptions.refetchNeeded.title") }),
-      /* @__PURE__ */ t("p", { className: f, children: s })
-    ] }),
-    /* @__PURE__ */ t(a, { type: "button", variant: "secondary", size: "small", onClick: o, children: e("subscriptions.refetchNeeded.actions.reload") })
-  ] });
+import { cx as e } from "../../theme/tools.js";
+import { useUiTranslation as t } from "../../i18n/useUiTranslation.js";
+import { Button as n } from "../../atomic/atoms/button/Button.js";
+import { content as r, message as i, root as a, title as o } from "./RefetchNeededBanner.css.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/subscriptions/RefetchNeededBanner.tsx
+var l = ({ reason: l, onReload: u, className: d }) => {
+	let { t: f } = t(), p = f("subscriptions.refetchNeeded.messages.default");
+	return l === "CURSOR_REPLAY_UNAVAILABLE" ? p = f("subscriptions.refetchNeeded.messages.cursorReplayUnavailable") : l === "BUFFER_OVERFLOW" && (p = f("subscriptions.refetchNeeded.messages.bufferOverflow")), /* @__PURE__ */ c("div", {
+		className: e(a, d),
+		children: [/* @__PURE__ */ c("div", {
+			className: r,
+			children: [/* @__PURE__ */ s("p", {
+				className: o,
+				children: f("subscriptions.refetchNeeded.title")
+			}), /* @__PURE__ */ s("p", {
+				className: i,
+				children: p
+			})]
+		}), /* @__PURE__ */ s(n, {
+			type: "button",
+			variant: "secondary",
+			size: "small",
+			onClick: u,
+			children: f("subscriptions.refetchNeeded.actions.reload")
+		})]
+	});
 };
-export {
-  g as RefetchNeededBanner
-};
-//# sourceMappingURL=RefetchNeededBanner.js.map
+//#endregion
+export { l as RefetchNeededBanner };
+
+//# sourceMappingURL=RefetchNeededBanner.js.map

package/lib/esm/components/subscriptions/RefetchNeededBanner.js.map

@@ -1 +1 @@
-{"version":3,"file":"RefetchNeededBanner.js","sources":["../../../../src/components/subscriptions/RefetchNeededBanner.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '../../atomic/atoms/button/Button.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nimport * as styles from './RefetchNeededBanner.css.js';\n\ntype Props = {\n  reason: string;\n  onReload: () => void;\n  className?: string;\n};\n\nexport const RefetchNeededBanner = ({\n  reason,\n  onReload,\n  className,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  let message = t('subscriptions.refetchNeeded.messages.default');\n  if (reason === 'CURSOR_REPLAY_UNAVAILABLE') {\n    message = t('subscriptions.refetchNeeded.messages.cursorReplayUnavailable');\n  } else if (reason === 'BUFFER_OVERFLOW') {\n    message = t('subscriptions.refetchNeeded.messages.bufferOverflow');\n  }\n\n  return (\n    <div className={cx(styles.root, className)}>\n      <div className={styles.content}>\n        <p className={styles.title}>{t('subscriptions.refetchNeeded.title')}</p>\n        <p className={styles.message}>{message}</p>\n      </div>\n      <Button type=\"button\" variant=\"secondary\" size=\"small\" onClick={onReload}>\n        {t('subscriptions.refetchNeeded.actions.reload')}\n      </Button>\n    </div>\n  );\n};\n"],"names":["RefetchNeededBanner","reason","onReload","className","t","useUiTranslation","message","cx","styles.root","jsxs","styles.content","jsx","styles.title","styles.message","Button"],"mappings":";;;;;AAcO,MAAMA,IAAsB,CAAC;AAAA,EAClC,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AACF,MAA0B;AACxB,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA;AACd,MAAIC,IAAUF,EAAE,8CAA8C;AAC9D,SAAIH,MAAW,8BACbK,IAAUF,EAAE,8DAA8D,IACjEH,MAAW,sBACpBK,IAAUF,EAAE,qDAAqD,sBAIhE,OAAA,EAAI,WAAWG,EAAGC,GAAaL,CAAS,GACvC,UAAA;AAAA,IAAA,gBAAAM,EAAC,OAAA,EAAI,WAAWC,GACd,UAAA;AAAA,MAAA,gBAAAC,EAAC,OAAE,WAAWC,GAAe,UAAAR,EAAE,mCAAmC,GAAE;AAAA,MACpE,gBAAAO,EAAC,KAAA,EAAE,WAAWE,GAAiB,UAAAP,EAAA,CAAQ;AAAA,IAAA,GACzC;AAAA,IACA,gBAAAK,EAACG,GAAA,EAAO,MAAK,UAAS,SAAQ,aAAY,MAAK,SAAQ,SAASZ,GAC7D,UAAAE,EAAE,4CAA4C,EAAA,CACjD;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"RefetchNeededBanner.js","names":[],"sources":["../../../../src/components/subscriptions/RefetchNeededBanner.tsx"],"sourcesContent":["import { type JSX } from 'react';\n\nimport { Button } from '../../atomic/atoms/button/Button.js';\nimport { cx } from '../../theme/tools.js';\nimport { useUiTranslation } from '../../i18n/useUiTranslation.js';\n\nimport * as styles from './RefetchNeededBanner.css.js';\n\ntype Props = {\n  reason: string;\n  onReload: () => void;\n  className?: string;\n};\n\nexport const RefetchNeededBanner = ({\n  reason,\n  onReload,\n  className,\n}: Props): JSX.Element => {\n  const { t } = useUiTranslation();\n  let message = t('subscriptions.refetchNeeded.messages.default');\n  if (reason === 'CURSOR_REPLAY_UNAVAILABLE') {\n    message = t('subscriptions.refetchNeeded.messages.cursorReplayUnavailable');\n  } else if (reason === 'BUFFER_OVERFLOW') {\n    message = t('subscriptions.refetchNeeded.messages.bufferOverflow');\n  }\n\n  return (\n    <div className={cx(styles.root, className)}>\n      <div className={styles.content}>\n        <p className={styles.title}>{t('subscriptions.refetchNeeded.title')}</p>\n        <p className={styles.message}>{message}</p>\n      </div>\n      <Button type=\"button\" variant=\"secondary\" size=\"small\" onClick={onReload}>\n        {t('subscriptions.refetchNeeded.actions.reload')}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAcA,IAAa,KAAuB,EAClC,WACA,aACA,mBACwB;CACxB,IAAM,EAAE,SAAM,GAAkB,EAC5B,IAAU,EAAE,+CAA+C;AAO/D,QANI,MAAW,8BACb,IAAU,EAAE,+DAA+D,GAClE,MAAW,sBACpB,IAAU,EAAE,sDAAsD,GAIlE,kBAAC,OAAD;EAAK,WAAW,EAAG,GAAa,EAAU;YAA1C,CACE,kBAAC,OAAD;GAAK,WAAW;aAAhB,CACE,kBAAC,KAAD;IAAG,WAAW;cAAe,EAAE,oCAAoC;IAAK,CAAA,EACxE,kBAAC,KAAD;IAAG,WAAW;cAAiB;IAAY,CAAA,CACvC;MACN,kBAAC,GAAD;GAAQ,MAAK;GAAS,SAAQ;GAAY,MAAK;GAAQ,SAAS;aAC7D,EAAE,6CAA6C;GACzC,CAAA,CACL"}

package/lib/esm/components/tile/InfoTile.css.js

@@ -1,18 +1,8 @@
-/* empty css                                       */
-/* empty css                            */
-var t = "_1mkg78a0 txvbqbu6f txvbqb1s6 txvbqbv2d txvbqblax txvbqb9io txvbqbai6 txvbqbaoo txvbqb8pf", x = "_1mkg78a2 _1mkg78a1 txvbqb77 txvbqb6y txvbqb7k", q = "_1mkg78a3 txvbqb3b txvbqbu6f txvbqb9jf", a = "_1mkg78a6 _1mkg78a4 txvbqb4 _1mkg78a5 txvbqbv txvbqb9jf txvbqbu6f", o = "_1mkg78a7 txvbqb9io txvbqbajx txvbqbcf txvbqbdoo txvbqbaof", i = "_1mkg78a8 txvbqb9io txvbqbai6 txvbqbanx txvbqbk4x", r = "_1mkg78a9 txvbqb9o txvbqbf4f txvbqbamo txvbqbv8p txvbqbfbo", m = "_1mkg78aa txvbqbfbo txvbqb8x txvbqban6", k = "_1mkg78ab txvbqb8x txvbqbv8r txvbqb9io txvbqbajx txvbqbao6", g = "_1mkg78ac txvbqb96 txvbqbv8p txvbqb9io txvbqbai6 txvbqbao6", e = "_1mkg78ad txvbqb9io txvbqbajx txvbqbaof txvbqbco txvbqbdoo txvbqb8x txvbqbv8r", f = "_1mkg78ae txvbqb9io txvbqbco txvbqbao6 txvbqbgwf";
-export {
-  f as actions,
-  g as body,
-  e as footer,
-  o as header,
-  i as headingGroup,
-  x as interactive,
-  a as interactiveButton,
-  q as interactiveLink,
-  k as meta,
-  m as subtitle,
-  t as tile,
-  r as title
-};
-//# sourceMappingURL=InfoTile.css.js.map
+/* empty css                                   */
+/* empty css                        */
+//#region src/components/tile/InfoTile.css.ts
+var e = "_1mkg78a0 txvbqbu6f txvbqb1s6 txvbqbv2d txvbqblax txvbqb9io txvbqbai6 txvbqbaoo txvbqb8pf", t = "_1mkg78a2 _1mkg78a1 txvbqb77 txvbqb6y txvbqb7k", n = "_1mkg78a3 txvbqb3b txvbqbu6f txvbqb9jf", r = "_1mkg78a6 _1mkg78a4 txvbqb4 _1mkg78a5 txvbqbv txvbqb9jf txvbqbu6f", i = "_1mkg78a7 txvbqb9io txvbqbajx txvbqbcf txvbqbdoo txvbqbaof", a = "_1mkg78a8 txvbqb9io txvbqbai6 txvbqbanx txvbqbk4x", o = "_1mkg78a9 txvbqb9o txvbqbf4f txvbqbamo txvbqbv8p txvbqbfbo", s = "_1mkg78aa txvbqbfbo txvbqb8x txvbqban6", c = "_1mkg78ab txvbqb8x txvbqbv8r txvbqb9io txvbqbajx txvbqbao6", l = "_1mkg78ac txvbqb96 txvbqbv8p txvbqb9io txvbqbai6 txvbqbao6", u = "_1mkg78ad txvbqb9io txvbqbajx txvbqbaof txvbqbco txvbqbdoo txvbqb8x txvbqbv8r", d = "_1mkg78ae txvbqb9io txvbqbco txvbqbao6 txvbqbgwf";
+//#endregion
+export { d as actions, l as body, u as footer, i as header, a as headingGroup, t as interactive, r as interactiveButton, n as interactiveLink, c as meta, s as subtitle, e as tile, o as title };
+
+//# sourceMappingURL=InfoTile.css.js.map

package/lib/esm/components/tile/InfoTile.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoTile.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"InfoTile.css.js","names":[],"sources":["../../../../src/components/tile/InfoTile.css.ts"],"sourcesContent":["import { style } from '@vanilla-extract/css';\n\nimport { sprinkles } from '../../theme/sprinkles.css.js';\nimport { vars } from '../../theme/themeContract.js';\n\nexport const tile = sprinkles({\n  width: 'full',\n  borderRadius: '2xl',\n  backgroundColor: 'black-10',\n  padding: 6,\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 4,\n  boxShadow: 'sm',\n});\n\nexport const interactive = style([\n  sprinkles({\n    transitionProperty: 'default',\n    transitionDuration: 160,\n    transitionTimingFunction: 'ease',\n  }),\n  {\n    selectors: {\n      '&:hover': {\n        boxShadow: vars.boxShadow.md,\n        transform: 'translateY(-2px)',\n      },\n      '&:focus-visible': {\n        outline: `2px solid ${vars.colors['blue-500']}`,\n        outlineOffset: '2px',\n      },\n    },\n  },\n]);\n\nexport const interactiveLink = sprinkles({\n  textDecoration: 'none',\n  width: 'full',\n  display: 'inline-flex',\n});\n\nconst interactiveButtonReset = sprinkles({\n  all: 'unset',\n});\n\nexport const interactiveButton = style([\n  interactiveButtonReset,\n  sprinkles({\n    cursor: 'pointer',\n    display: 'inline-flex',\n    width: 'full',\n  }),\n]);\n\nexport const header = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: 3,\n});\n\nexport const headingGroup = sprinkles({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 1,\n  minWidth: 0,\n});\n\nexport const title = sprinkles({\n  fontSize: 'xl',\n  lineHeight: 1.4,\n  fontWeight: 'semibold',\n  color: 'text',\n  margin: 0,\n});\n\nexport const subtitle = sprinkles({\n  margin: 0,\n  fontSize: 'sm',\n  fontWeight: 'extrabold',\n});\n\nexport const meta = sprinkles({\n  fontSize: 'sm',\n  color: 'textSecondary',\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 2,\n});\n\nexport const body = sprinkles({\n  fontSize: 'base',\n  color: 'text',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: 2,\n});\n\nexport const footer = sprinkles({\n  display: 'flex',\n  flexWrap: 'wrap',\n  gap: 3,\n  alignItems: 'center',\n  justifyContent: 'space-between',\n  fontSize: 'sm',\n  color: 'textSecondary',\n});\n\nexport const actions = sprinkles({\n  display: 'flex',\n  alignItems: 'center',\n  gap: 2,\n  marginLeft: 'auto',\n});\n"],"mappings":""}