@elcrm/components 0.1.1 → 0.2.0

package/dist/Popover-D0m5JWIt.js

@@ -0,0 +1,142 @@
+import c, { useRef as g, useId as G, useState as q, useLayoutEffect as S, useEffect as W } from "react";
+import { createPortal as J } from "react-dom";
+import { c as C } from "./cx-CcykAxZN.js";
+import { u as Q } from "./useControllableValue-CWqH1kpM.js";
+import './Popover.css';const T = 1e3, U = 10;
+function M() {
+  const e = globalThis;
+  return e.elcrm || (e.elcrm = {}), e.elcrm.overlayZ || (e.elcrm.overlayZ = { seq: 0, active: /* @__PURE__ */ new Set() }), e.elcrm.overlayZ;
+}
+function X() {
+  const e = M();
+  e.seq += 1;
+  const n = T + e.seq * U;
+  return e.active.add(n), n;
+}
+function H(e) {
+  const n = M();
+  n.active.delete(e), n.active.size === 0 && (n.seq = 0);
+}
+function se() {
+  const e = M();
+  return e.active.size === 0 ? T : Math.max(...e.active);
+}
+const Y = "c3r", _ = "c3t", $ = "c3p", L = {
+  r: Y,
+  t: _,
+  p: $
+};
+function ee(e, n, v, h) {
+  if (!c.isValidElement(e)) return e;
+  const l = e.props.onClick;
+  return c.cloneElement(e, {
+    "aria-haspopup": "menu",
+    "aria-expanded": n,
+    "aria-controls": n ? v : void 0,
+    onClick: (f) => {
+      l == null || l(f), h();
+    }
+  });
+}
+function ie({
+  trigger: e,
+  children: n,
+  open: v,
+  defaultOpen: h = !1,
+  onOpenChange: l,
+  align: f = "end",
+  disabled: R = !1,
+  label: B,
+  role: N = "menu",
+  className: V,
+  panelClassName: D
+}) {
+  const w = g(null), z = g(null), E = G(), [o = !1, A] = Q(
+    v,
+    h,
+    l
+  ), [u, b] = q(null), [i, P] = q(null), x = g(null);
+  x.current = i;
+  const y = (t) => {
+    R && t || A(t);
+  };
+  S(() => {
+    if (o) {
+      i == null && P(X());
+      return;
+    }
+    i != null && (H(i), P(null));
+  }, [o, i]), W(() => () => {
+    x.current != null && H(x.current);
+  }, []);
+  const Z = () => {
+    const t = w.current;
+    if (!t) return;
+    const r = t.getBoundingClientRect(), s = 8, a = window.innerHeight - r.bottom - s - 8, d = r.top - s - 8, m = a >= 160 || a >= d, O = Math.min(420, Math.max(120, m ? a : d)), p = Math.max(200, r.width), K = m ? r.bottom + s : Math.max(8, r.top - s - O), j = f === "end" ? Math.max(8, Math.min(r.right - p, window.innerWidth - p - 8)) : Math.max(8, Math.min(r.left, window.innerWidth - p - 8));
+    b({ top: K, left: j, minWidth: p, maxHeight: O });
+  };
+  S(() => {
+    if (!o) {
+      b(null);
+      return;
+    }
+    Z();
+    const t = () => Z();
+    return window.addEventListener("resize", t), window.addEventListener("scroll", t, !0), () => {
+      window.removeEventListener("resize", t), window.removeEventListener("scroll", t, !0);
+    };
+  }, [o, f]), W(() => {
+    if (!o) return;
+    const t = (s) => {
+      var d, m;
+      const a = s.target;
+      (d = w.current) != null && d.contains(a) || (m = z.current) != null && m.contains(a) || y(!1);
+    }, r = (s) => {
+      s.key === "Escape" && y(!1);
+    };
+    return document.addEventListener("mousedown", t), document.addEventListener("keydown", r), () => {
+      document.removeEventListener("mousedown", t), document.removeEventListener("keydown", r);
+    };
+  }, [o]);
+  const F = {
+    position: "fixed",
+    zIndex: i ?? 1e3,
+    ...u ? {
+      top: u.top,
+      left: u.left,
+      minWidth: u.minWidth,
+      maxHeight: u.maxHeight
+    } : { visibility: "hidden", pointerEvents: "none" }
+  }, k = o ? /* @__PURE__ */ c.createElement(
+    "div",
+    {
+      ref: z,
+      id: E,
+      role: N,
+      "aria-label": B,
+      className: C(L.p, D),
+      style: F,
+      onMouseDown: (t) => t.stopPropagation()
+    },
+    n
+  ) : null, I = () => {
+    R || y(!o);
+  };
+  return /* @__PURE__ */ c.createElement("div", { ref: w, className: C(L.r, V) }, /* @__PURE__ */ c.createElement(
+    "div",
+    {
+      className: L.t,
+      "aria-haspopup": "menu",
+      "aria-expanded": o,
+      "aria-controls": o ? E : void 0,
+      onClick: c.isValidElement(e) ? void 0 : I
+    },
+    ee(e, o, E, I)
+  ), k && typeof document < "u" ? J(k, document.body) : null);
+}
+export {
+  ie as P,
+  X as a,
+  se as p,
+  H as r
+};

package/dist/Popover.css

@@ -0,0 +1 @@
+@layer elcrm-components{.c3r{position:relative;display:inline-flex;vertical-align:middle}.c3t{display:inline-flex;align-items:center;min-width:0}.c3p{box-sizing:border-box;overflow:auto;padding:var(--shell-gap-sm);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--popup-shadow);color:var(--shell-color);min-width:var(--dropdown-min-width);max-width:var(--dropdown-max-width);max-height:var(--dropdown-max-height)}}

package/dist/Popover.d.ts

@@ -0,0 +1,54 @@
+import { default as React } from 'react';
+/**
+ * Портал у якоря: Escape, клик снаружи, z-index (`globalThis.elcrm.overlayZ`).
+ *
+ * Роли: Popover = свой попап (слот `children`).
+ * Типовое меню пунктов — {@link Dropdown}.
+ * Инлайн-навигация — {@link Menu} (не путать).
+ *
+ * Бывший `@elcrm/overlay` `Menu` — этот компонент (`Popover`).
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Ещё</Button>}
+ *   label="Действия"
+ *   align="end"
+ * >
+ *   <List>
+ *     <Item as="button">Скачать</Item>
+ *   </List>
+ * </Popover>
+ * ```
+ *
+ * Токены: `--shell-*`, `--popup-shadow`, `--dropdown-min-width`.
+ */
+export type PopoverProps = {
+    /** Якорь (кнопка / иконка) */
+    trigger: React.ReactNode;
+    /** Содержимое панели */
+    children?: React.ReactNode;
+    /** Контролируемое открытие */
+    open?: boolean;
+    /** Начальное открытие */
+    defaultOpen?: boolean;
+    /** Смена open */
+    onOpenChange?: (open: boolean) => void;
+    /** Выравнивание панели */
+    align?: "start" | "end";
+    /** Не открывать по клику на якорь */
+    disabled?: boolean;
+    /** aria-label панели */
+    label?: string;
+    /** role панели */
+    role?: React.AriaRole;
+    className?: string;
+    /** Класс панели (portal) */
+    panelClassName?: string;
+};
+/**
+ * Панель в portal рядом с триггером.
+ *
+ * @see Dropdown, Menu
+ */
+export declare function Popover({ trigger, children, open: openProp, defaultOpen, onOpenChange, align, disabled, label, role, className, panelClassName, }: PopoverProps): React.JSX.Element;

package/dist/Popover.js

@@ -0,0 +1,4 @@
+import { P as e } from "./Popover-D0m5JWIt.js";
+export {
+  e as Popover
+};

package/dist/PricingGroup-Czuhe81Z.js

@@ -0,0 +1,120 @@
+import e from "react";
+import { C } from "./CheckIcon-FdB8fMEF.js";
+import { c as o } from "./cx-CcykAxZN.js";
+import { u as F } from "./useControllableValue-CWqH1kpM.js";
+import './PricingGroup.css';const z = "cur", S = "cui", L = "cus", O = "cub", V = "cug", I = "cua", R = "cum", j = "cuh", A = "cut", G = "cup", K = "cuz", M = "cuo", T = "cue", $ = "cud", q = "cux", H = "cuf", J = "cuy", Q = "cul", U = "cuu", W = "cun", X = "cuc", Y = "cuk", Z = "cuw", a = {
+  r: z,
+  i: S,
+  s: L,
+  b: O,
+  g: V,
+  a: I,
+  m: R,
+  h: j,
+  t: A,
+  p: G,
+  z: K,
+  o: M,
+  e: T,
+  d: $,
+  x: q,
+  f: H,
+  y: J,
+  l: Q,
+  u: U,
+  n: W,
+  c: X,
+  k: Y,
+  w: Z
+};
+function g() {
+  return /* @__PURE__ */ e.createElement("span", { className: a.k, "aria-hidden": !0 }, /* @__PURE__ */ e.createElement(C, { className: a.w }));
+}
+function _({ feature: l }) {
+  if (l != null && typeof l == "object" && !e.isValidElement(l) && "label" in l) {
+    const c = l;
+    return /* @__PURE__ */ e.createElement("li", { className: a.c }, c.icon != null ? c.icon : /* @__PURE__ */ e.createElement(g, null), /* @__PURE__ */ e.createElement("span", null, c.label));
+  }
+  return /* @__PURE__ */ e.createElement("li", { className: a.c }, /* @__PURE__ */ e.createElement(g, null), /* @__PURE__ */ e.createElement("span", null, l));
+}
+function h({ item: l }) {
+  const c = l.badge != null && (l.badgePlacement ?? "pill") === "pill";
+  return l.title == null && !c ? null : /* @__PURE__ */ e.createElement("div", { className: a.h }, l.title != null ? /* @__PURE__ */ e.createElement("h3", { className: a.t }, l.title) : null, c ? /* @__PURE__ */ e.createElement("span", { className: a.g }, l.badge) : null);
+}
+function v({ item: l }) {
+  return l.price == null && l.priceOld == null && l.meta == null ? null : /* @__PURE__ */ e.createElement("div", { className: a.p }, l.priceOld != null ? /* @__PURE__ */ e.createElement("span", { className: a.o }, l.priceOld) : null, l.price != null ? /* @__PURE__ */ e.createElement("span", { className: a.z }, l.price) : null, l.meta != null ? /* @__PURE__ */ e.createElement("span", { className: a.e }, l.meta) : null);
+}
+function i({ item: l }) {
+  return l.description == null ? null : /* @__PURE__ */ e.createElement("p", { className: a.d }, l.description);
+}
+function ee({
+  actions: l,
+  placement: c
+}) {
+  return /* @__PURE__ */ e.createElement(
+    "div",
+    {
+      className: c === "footer" ? a.f : a.x,
+      onClick: (t) => t.stopPropagation(),
+      onMouseDown: (t) => t.preventDefault()
+    },
+    l
+  );
+}
+function le({ item: l }) {
+  return l.features == null && l.featuresLabel == null && l.featuresSummary == null ? null : /* @__PURE__ */ e.createElement("div", { className: a.y }, l.featuresLabel != null ? /* @__PURE__ */ e.createElement("p", { className: a.l }, l.featuresLabel) : null, l.featuresSummary != null ? /* @__PURE__ */ e.createElement("p", { className: a.u }, l.featuresSummary) : null, l.features != null && l.features.length > 0 ? /* @__PURE__ */ e.createElement("ul", { className: a.n }, l.features.map((c, t) => /* @__PURE__ */ e.createElement(_, { key: t, feature: c }))) : null);
+}
+function re({
+  items: l,
+  value: c,
+  defaultValue: t,
+  selectable: N = !1,
+  disabled: k = !1,
+  onValueChange: y,
+  className: P,
+  ...w
+}) {
+  const [x, d] = F(
+    c,
+    t,
+    y
+  );
+  return /* @__PURE__ */ e.createElement("div", { className: o(a.r, P), role: "list", ...w }, l.map((n) => {
+    const m = x === n.value, p = k || !!n.disabled, D = !!n.highlighted || m, f = n.badgePlacement ?? "pill", r = n.actionsPlacement ?? "after", E = n.descriptionPlacement ?? "after-price", s = N && !p, b = n.actions != null ? /* @__PURE__ */ e.createElement(
+      ee,
+      {
+        actions: n.actions,
+        placement: r
+      }
+    ) : null, B = /* @__PURE__ */ e.createElement(e.Fragment, null, n.priceFirst ? /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(v, { item: n }), /* @__PURE__ */ e.createElement(h, { item: n }), /* @__PURE__ */ e.createElement(i, { item: n })) : /* @__PURE__ */ e.createElement(e.Fragment, null, /* @__PURE__ */ e.createElement(h, { item: n }), E === "before-price" ? /* @__PURE__ */ e.createElement(i, { item: n }) : null, /* @__PURE__ */ e.createElement(v, { item: n }), E === "after-price" ? /* @__PURE__ */ e.createElement(i, { item: n }) : null));
+    return /* @__PURE__ */ e.createElement(
+      "div",
+      {
+        key: n.value,
+        role: "listitem",
+        className: o(a.i, D && a.s),
+        "data-selected": m ? "true" : void 0,
+        "data-highlighted": n.highlighted ? "true" : void 0,
+        "data-selectable": s ? "true" : void 0,
+        "aria-disabled": p || void 0,
+        tabIndex: s ? 0 : void 0,
+        onClick: () => {
+          s && d(n.value);
+        },
+        onKeyDown: (u) => {
+          s && (u.key === "Enter" || u.key === " ") && (u.preventDefault(), d(n.value));
+        }
+      },
+      n.badge != null && f === "banner" ? /* @__PURE__ */ e.createElement("div", { className: a.b }, n.badge) : null,
+      n.badge != null && f === "float" ? /* @__PURE__ */ e.createElement("div", { className: o(a.g, a.a) }, n.badge) : null,
+      n.icon != null ? /* @__PURE__ */ e.createElement("div", { className: a.m }, n.icon) : null,
+      B,
+      r === "before" ? b : null,
+      /* @__PURE__ */ e.createElement(le, { item: n }),
+      r === "after" || r === "footer" ? b : null
+    );
+  }));
+}
+export {
+  re as P
+};

package/dist/PricingGroup.css

@@ -1 +1 @@
-@layer elcrm-components{.cur{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pricing-card-min-width),1fr));gap:var(--shell-gap-lg);align-items:stretch}.cui{position:relative;display:flex;flex-direction:column;gap:var(--shell-gap);padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--shell-shadow)}.cui[data-selectable=true]{cursor:pointer}.cui:disabled,.cui[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cus,.cui[data-selected=true],.cui[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected);box-shadow:var(--shell-shadow)}.cub{display:flex;align-items:center;justify-content:center;margin:calc(-1 * var(--shell-padding-block)) calc(-1 * var(--shell-padding-inline)) 0;padding:var(--shell-gap-sm) var(--shell-padding-inline);border-radius:var(--shell-radius) var(--shell-radius) 0 0;background:var(--shell-color-accent);color:#fff;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);text-align:center}.cug{display:inline-flex;align-items:center;width:fit-content;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);line-height:1.2}.cua{position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.cum{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.6);height:calc(var(--shell-icon-size) * 1.6);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:50%;overflow:hidden}.cuh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cut{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cup{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cuz{font-size:calc(var(--shell-font-size-lg) * 1.35);font-weight:700;color:var(--shell-color);line-height:1.15}.cui[data-highlighted=true] .cuz,.cui[data-selected=true] .cuz{color:var(--shell-color-accent)}.cuo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cue{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cud{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cux{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cuf{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:auto calc(-1 * var(--shell-padding-inline)) calc(-1 * var(--shell-padding-block));padding:var(--shell-padding);background:var(--shell-background-muted);border-top:1px solid var(--shell-border);border-radius:0 0 var(--shell-radius) var(--shell-radius)}.cuy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin-top:auto}.cul{margin:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted)}.cuu{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.4}.cun{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cuc{display:flex;align-items:flex-start;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cuk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-top:.1em;color:#fff;background:var(--shell-color-success);border-radius:50%}.cuw{width:60%;height:60%;display:block}}
+@layer elcrm-components{.cur{display:grid;grid-template-columns:repeat(auto-fit,minmax(var(--pricing-card-min-width),1fr));gap:var(--shell-gap-lg);align-items:stretch}.cui{position:relative;display:flex;flex-direction:column;gap:var(--shell-gap);padding:var(--shell-padding);box-sizing:border-box;text-align:left;font:inherit;color:var(--shell-color);background:var(--shell-background);border:1px solid var(--shell-border);border-radius:var(--shell-radius);box-shadow:var(--shell-shadow)}.cui[data-selectable=true]{cursor:pointer}.cui:disabled,.cui[aria-disabled=true]{opacity:var(--shell-disabled-opacity);cursor:not-allowed}.cus,.cui[data-selected=true],.cui[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected);box-shadow:var(--shell-shadow)}.cub{display:flex;align-items:center;justify-content:center;margin:calc(-1 * var(--shell-padding-block)) calc(-1 * var(--shell-padding-inline)) 0;padding:var(--shell-gap-sm) var(--shell-padding-inline);border-radius:var(--shell-radius) var(--shell-radius) 0 0;background:var(--shell-color-accent);color:var(--avatar-color);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);text-align:center}.cug{display:inline-flex;align-items:center;width:fit-content;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);line-height:1.2}.cua{position:absolute;top:0;left:50%;transform:translate(-50%,-50%)}.cum{display:flex;flex-shrink:0;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.6);height:calc(var(--shell-icon-size) * 1.6);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:50%;overflow:hidden}.cuh{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cut{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cup{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cuz{font-size:calc(var(--shell-font-size-lg) * 1.35);font-weight:700;color:var(--shell-color);line-height:1.15}.cui[data-highlighted=true] .cuz,.cui[data-selected=true] .cuz{color:var(--shell-color-accent)}.cuo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cue{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cud{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cux{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cuf{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:auto calc(-1 * var(--shell-padding-inline)) calc(-1 * var(--shell-padding-block));padding:var(--shell-padding);background:var(--shell-background-muted);border-top:1px solid var(--shell-border);border-radius:0 0 var(--shell-radius) var(--shell-radius)}.cuy{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin-top:auto}.cul{margin:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);letter-spacing:.04em;text-transform:uppercase;color:var(--shell-color-muted)}.cuu{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.4}.cun{display:flex;flex-direction:column;gap:var(--shell-gap-sm);margin:0;padding:0;list-style:none}.cuc{display:flex;align-items:flex-start;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cuk{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);margin-top:.1em;color:var(--avatar-color);background:var(--shell-color-success);border-radius:50%}.cuw{width:60%;height:60%;display:block}}

package/dist/PricingGroup.js

@@ -1,4 +1,4 @@
-import { P as i } from "./PricingGroup-DgcdVSq8.js";
+import { P as i } from "./PricingGroup-Czuhe81Z.js";
 export {
   i as PricingGroup
 };

package/dist/{PricingTable-DALddSwM.js → PricingTable-BuLC0opK.js}

@@ -1,53 +1,45 @@
 import l from "react";
-import { c as z } from "./cx-CcykAxZN.js";
-import './PricingTable.css';const B = "cxr", C = "cxh", M = "cxm", O = "cxn", T = "cxt", I = "cxg", L = "cxp", S = "cxz", j = "cxo", H = "cxe", K = "cxd", R = "cxx", U = "cxb", W = "cxy", $ = "cxl", A = "cxw", G = "cxc", J = "cxk", Q = "cxv", X = "cxa", Y = "cxu", Z = "cxq", n = {
-  r: B,
-  h: C,
-  m: M,
-  n: O,
-  t: T,
-  g: I,
-  p: L,
-  z: S,
-  o: j,
-  e: H,
-  d: K,
-  x: R,
-  b: U,
-  y: W,
-  l: $,
-  w: A,
-  c: G,
-  k: J,
+import { C as w } from "./CheckIcon-FdB8fMEF.js";
+import { c as D } from "./cx-CcykAxZN.js";
+import { u as F } from "./useControllableValue-CWqH1kpM.js";
+import './PricingTable.css';const q = "cxr", z = "cxh", B = "cxm", I = "cxn", O = "cxt", T = "cxg", V = "cxp", M = "cxz", H = "cxo", K = "cxe", R = "cxd", S = "cxx", $ = "cxb", j = "cxy", A = "cxl", G = "cxw", J = "cxc", L = "cxk", Q = "cxv", U = "cxa", W = "cxu", X = "cxq", n = {
+  r: q,
+  h: z,
+  m: B,
+  n: I,
+  t: O,
+  g: T,
+  p: V,
+  z: M,
+  o: H,
+  e: K,
+  d: R,
+  x: S,
+  b: $,
+  y: j,
+  l: A,
+  w: G,
+  c: J,
+  k: L,
   v: Q,
-  a: X,
-  u: Y,
-  q: Z
+  a: U,
+  u: W,
+  q: X
 };
-function _() {
-  return /* @__PURE__ */ l.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ l.createElement("svg", { className: n.v, viewBox: "0 0 12 12" }, /* @__PURE__ */ l.createElement(
-    "path",
-    {
-      d: "M2.5 6.2 4.8 8.5 9.5 3.5",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.8",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
-    }
-  )));
+function Y() {
+  return /* @__PURE__ */ l.createElement("span", { className: n.k, "aria-hidden": !0 }, /* @__PURE__ */ l.createElement(w, { className: n.v }));
 }
-function V({ value: e }) {
-  return e === !0 ? /* @__PURE__ */ l.createElement(_, null) : e === !1 || e == null || e === "" ? /* @__PURE__ */ l.createElement("span", { className: n.a }, "—") : /* @__PURE__ */ l.createElement(l.Fragment, null, e);
+function Z({ value: e }) {
+  return e === !0 ? /* @__PURE__ */ l.createElement(Y, null) : e === !1 || e == null || e === "" ? /* @__PURE__ */ l.createElement("span", { className: n.a }, "—") : /* @__PURE__ */ l.createElement(l.Fragment, null, e);
 }
-function ee({
+function _({
   item: e,
   highlighted: r,
   selectable: o,
   disabled: u,
   onSelect: d
 }) {
-  const i = e.badge != null && (e.badgePlacement ?? "pill") === "pill", m = e.badge != null && e.badgePlacement === "banner";
+  const m = e.badge != null && (e.badgePlacement ?? "pill") === "pill", p = e.badge != null && e.badgePlacement === "banner";
   return /* @__PURE__ */ l.createElement(
     "div",
     {
@@ -58,31 +50,31 @@ function ee({
       onClick: () => {
         o && !u && d();
       },
-      onKeyDown: (a) => {
-        !o || u || (a.key === "Enter" || a.key === " ") && (a.preventDefault(), d());
+      onKeyDown: (t) => {
+        !o || u || (t.key === "Enter" || t.key === " ") && (t.preventDefault(), d());
       }
     },
-    m ? /* @__PURE__ */ l.createElement("span", { className: n.g }, e.badge) : null,
+    p ? /* @__PURE__ */ l.createElement("span", { className: n.g }, e.badge) : null,
     e.icon != null ? /* @__PURE__ */ l.createElement("div", { className: n.m }, e.icon) : null,
-    e.priceFirst ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(N, { item: e }), /* @__PURE__ */ l.createElement(x, { item: e, pill: i }), e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null) : /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(x, { item: e, pill: i }), e.descriptionPlacement === "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null, /* @__PURE__ */ l.createElement(N, { item: e }), e.descriptionPlacement !== "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null),
+    e.priceFirst ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(x, { item: e }), /* @__PURE__ */ l.createElement(v, { item: e, pill: m }), e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null) : /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement(v, { item: e, pill: m }), e.descriptionPlacement === "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null, /* @__PURE__ */ l.createElement(x, { item: e }), e.descriptionPlacement !== "before-price" && e.description != null ? /* @__PURE__ */ l.createElement("p", { className: n.d }, e.description) : null),
     e.actions != null ? /* @__PURE__ */ l.createElement(
       "div",
       {
         className: n.x,
-        onClick: (a) => a.stopPropagation(),
-        onMouseDown: (a) => a.preventDefault()
+        onClick: (t) => t.stopPropagation(),
+        onMouseDown: (t) => t.preventDefault()
       },
       e.actions
     ) : null
   );
 }
-function x({
+function v({
   item: e,
   pill: r
 }) {
   return e.title == null && !r ? null : /* @__PURE__ */ l.createElement("div", { className: n.n }, e.title != null ? /* @__PURE__ */ l.createElement("h3", { className: n.t }, e.title) : null, r ? /* @__PURE__ */ l.createElement("span", { className: n.g }, e.badge) : null);
 }
-function N({ item: e }) {
+function x({ item: e }) {
   return e.price == null && e.priceOld == null && e.meta == null ? null : /* @__PURE__ */ l.createElement("div", { className: n.p }, e.priceOld != null ? /* @__PURE__ */ l.createElement("span", { className: n.o }, e.priceOld) : null, e.price != null ? /* @__PURE__ */ l.createElement("span", { className: n.z }, e.price) : null, e.meta != null ? /* @__PURE__ */ l.createElement("span", { className: n.e }, e.meta) : null);
 }
 function te({
@@ -91,41 +83,43 @@ function te({
   footerActions: o = !0,
   value: u,
   defaultValue: d,
-  selectable: i = !1,
-  disabled: m = !1,
-  onValueChange: a,
-  className: f,
-  style: g,
-  ...h
+  selectable: m = !1,
+  disabled: p = !1,
+  onValueChange: t,
+  className: g,
+  style: h,
+  ...N
 }) {
-  const [b, k] = l.useState(d), p = u !== void 0, y = p ? u : b, w = (t) => {
-    p || k(t), a == null || a(t);
-  }, P = e.length, D = {
-    ...g,
-    gridTemplateColumns: `var(--pricing-table-label-width) repeat(${P}, minmax(12rem, 1fr))`
+  const [f, b] = F(
+    u,
+    d,
+    t
+  ), k = e.length, y = {
+    ...h,
+    gridTemplateColumns: `var(--pricing-table-label-width) repeat(${k}, minmax(12rem, 1fr))`
   };
-  let F = 0;
-  return /* @__PURE__ */ l.createElement("div", { className: z(n.r, f), style: D, role: "table", ...h }, /* @__PURE__ */ l.createElement("div", { className: n.q, role: "columnheader" }), e.map((t) => {
-    const s = y === t.value, c = !!t.highlighted || s;
+  let P = 0;
+  return /* @__PURE__ */ l.createElement("div", { className: D(n.r, g), style: y, role: "table", ...N }, /* @__PURE__ */ l.createElement("div", { className: n.q, role: "columnheader" }), e.map((a) => {
+    const s = f === a.value, c = !!a.highlighted || s;
     return /* @__PURE__ */ l.createElement(
-      ee,
+      _,
       {
-        key: t.value,
-        item: t,
+        key: a.value,
+        item: a,
         highlighted: c,
-        selectable: i && !m && !t.disabled,
-        disabled: m || !!t.disabled,
-        onSelect: () => w(t.value)
+        selectable: m && !p && !a.disabled,
+        disabled: p || !!a.disabled,
+        onSelect: () => b(a.value)
       }
     );
-  }), r == null ? void 0 : r.map((t, s) => /* @__PURE__ */ l.createElement(l.Fragment, { key: s }, t.title != null ? /* @__PURE__ */ l.createElement("div", { className: n.b, role: "rowheader" }, t.title) : null, t.rows.map((c) => {
-    const q = F++ % 2 === 1;
+  }), r == null ? void 0 : r.map((a, s) => /* @__PURE__ */ l.createElement(l.Fragment, { key: s }, a.title != null ? /* @__PURE__ */ l.createElement("div", { className: n.b, role: "rowheader" }, a.title) : null, a.rows.map((c) => {
+    const C = P++ % 2 === 1;
     return /* @__PURE__ */ l.createElement(
       "div",
       {
         key: c.key,
         className: n.y,
-        "data-alt": q ? "true" : void 0,
+        "data-alt": C ? "true" : void 0,
         role: "row"
       },
       /* @__PURE__ */ l.createElement("div", { className: n.l, role: "rowheader" }, /* @__PURE__ */ l.createElement("span", null, c.label), c.hint != null && c.hint !== "" ? /* @__PURE__ */ l.createElement(
@@ -138,19 +132,19 @@ function te({
         },
         "?"
       ) : null),
-      e.map((E) => {
-        var v;
-        return /* @__PURE__ */ l.createElement("div", { key: E.value, className: n.c, role: "cell" }, /* @__PURE__ */ l.createElement(V, { value: (v = c.values) == null ? void 0 : v[E.value] }));
+      e.map((i) => {
+        var E;
+        return /* @__PURE__ */ l.createElement("div", { key: i.value, className: n.c, role: "cell" }, /* @__PURE__ */ l.createElement(Z, { value: (E = c.values) == null ? void 0 : E[i.value] }));
       })
     );
-  }))), o ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", { className: n.q }), e.map((t) => /* @__PURE__ */ l.createElement("div", { key: t.value, className: n.u }, t.actions != null ? /* @__PURE__ */ l.createElement(
+  }))), o ? /* @__PURE__ */ l.createElement(l.Fragment, null, /* @__PURE__ */ l.createElement("div", { className: n.q }), e.map((a) => /* @__PURE__ */ l.createElement("div", { key: a.value, className: n.u }, a.actions != null ? /* @__PURE__ */ l.createElement(
     "div",
     {
       className: n.x,
       onClick: (s) => s.stopPropagation(),
       onMouseDown: (s) => s.preventDefault()
     },
-    t.actions
+    a.actions
   ) : null))) : null);
 }
 export {

package/dist/PricingTable.css

@@ -1 +1 @@
-@layer elcrm-components{.cxr{display:grid;width:100%;column-gap:var(--shell-gap);row-gap:0;align-items:stretch;overflow-x:auto}.cxh{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box;color:var(--shell-color);background:var(--shell-background);border:1px solid transparent;border-radius:var(--shell-radius)}.cxh[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cxm{display:flex;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.4);height:calc(var(--shell-icon-size) * 1.4);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:var(--shell-radius);overflow:hidden}.cxn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cxt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cxg{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight)}.cxp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cxz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.15}.cxo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cxe{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cxd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cxx{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cxb{grid-column:1 / -1;margin:var(--shell-gap) 0 var(--shell-gap-sm);padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-accent)}.cxf,.cxy{display:contents}.cxy>*{padding:var(--shell-padding);box-sizing:border-box;border-bottom:1px solid var(--shell-border);background:var(--shell-background)}.cxy[data-alt=true]>*{background:var(--shell-background-muted)}.cxl{display:flex;align-items:center;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cxw{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-status-size);height:var(--shell-status-size);padding:0;border:1px solid var(--shell-border);border-radius:50%;background:transparent;color:var(--shell-color-muted);font-size:9px;line-height:1;cursor:help}.cxc{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--shell-font-size-sm);color:var(--shell-color);font-weight:500}.cxk{display:inline-flex;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);color:#fff;background:var(--shell-color-success);border-radius:50%}.cxv{width:60%;height:60%;display:block}.cxa{color:var(--shell-color-muted)}.cxu{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box}.cxq{min-width:var(--pricing-table-label-width)}}
+@layer elcrm-components{.cxr{display:grid;width:100%;column-gap:var(--shell-gap);row-gap:0;align-items:stretch;overflow-x:auto}.cxh{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box;color:var(--shell-color);background:var(--shell-background);border:1px solid transparent;border-radius:var(--shell-radius)}.cxh[data-highlighted=true]{border-color:var(--shell-color-accent);background:var(--shell-background-selected)}.cxm{display:flex;align-items:center;justify-content:center;width:calc(var(--shell-icon-size) * 1.4);height:calc(var(--shell-icon-size) * 1.4);color:var(--shell-color-accent);background:var(--shell-background-hover);border-radius:var(--shell-radius);overflow:hidden}.cxn{display:flex;flex-wrap:wrap;align-items:center;gap:var(--shell-gap-sm)}.cxt{margin:0;font-size:var(--shell-font-size);font-weight:var(--shell-font-weight);color:var(--shell-color);line-height:1.3}.cxg{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;background:var(--shell-background-hover);color:var(--shell-color-accent);font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight)}.cxp{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--shell-gap-sm)}.cxz{font-size:var(--shell-font-size-lg);font-weight:700;color:var(--shell-color);line-height:1.15}.cxo{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);text-decoration:line-through}.cxe{font-size:var(--shell-font-size-sm);color:var(--shell-color-muted)}.cxd{margin:0;font-size:var(--shell-font-size-sm);color:var(--shell-color-muted);line-height:1.45}.cxx{display:flex;flex-direction:column;gap:var(--shell-gap-sm)}.cxb{grid-column:1 / -1;margin:var(--shell-gap) 0 var(--shell-gap-sm);padding:0;font-size:var(--shell-font-size-sm);font-weight:var(--shell-font-weight);color:var(--shell-color-accent)}.cxf,.cxy{display:contents}.cxy>*{padding:var(--shell-padding);box-sizing:border-box;border-bottom:1px solid var(--shell-border);background:var(--shell-background)}.cxy[data-alt=true]>*{background:var(--shell-background-muted)}.cxl{display:flex;align-items:center;gap:var(--shell-gap-sm);font-size:var(--shell-font-size-sm);color:var(--shell-color);line-height:1.4}.cxw{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:var(--shell-status-size);height:var(--shell-status-size);padding:0;border:1px solid var(--shell-border);border-radius:50%;background:transparent;color:var(--shell-color-muted);font-size:9px;line-height:1;cursor:help}.cxc{display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--shell-font-size-sm);color:var(--shell-color);font-weight:500}.cxk{display:inline-flex;align-items:center;justify-content:center;width:var(--shell-check-size);height:var(--shell-check-size);color:var(--avatar-color);background:var(--shell-color-success);border-radius:50%}.cxv{width:60%;height:60%;display:block}.cxa{color:var(--shell-color-muted)}.cxu{display:flex;flex-direction:column;gap:var(--shell-gap-sm);padding:var(--shell-padding);box-sizing:border-box}.cxq{min-width:var(--pricing-table-label-width)}}

package/dist/PricingTable.js

@@ -1,4 +1,4 @@
-import { P as e } from "./PricingTable-DALddSwM.js";
+import { P as e } from "./PricingTable-BuLC0opK.js";
 export {
   e as PricingTable
 };