@dmitriikapustin/ui 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2973 @@
+'use strict';
+
+var react = require('react');
+var Lottie = require('lottie-react');
+var jsxRuntime = require('react/jsx-runtime');
+var recharts = require('recharts');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var Lottie__default = /*#__PURE__*/_interopDefault(Lottie);
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+var sizeMap = {
+  sm: 32,
+  md: 48,
+  lg: 64
+};
+var cachedData = null;
+function Spinner({ size = "md", className = "" }) {
+  const s = sizeMap[size];
+  const [data, setData] = react.useState(() => cachedData);
+  react.useEffect(() => {
+    if (data) return;
+    let cancelled = false;
+    fetch("/lottie/spinner.json").then((r) => r.ok ? r.json() : null).then((json) => {
+      if (json && !cancelled) {
+        cachedData = json;
+        setData(json);
+      }
+    }).catch(() => {
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [data]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `inline-flex items-center justify-center ${className}`,
+      style: { width: s, height: s },
+      "aria-label": "Loading",
+      children: data ? /* @__PURE__ */ jsxRuntime.jsx(
+        Lottie__default.default,
+        {
+          animationData: data,
+          loop: true,
+          autoplay: true,
+          style: { width: s, height: s }
+        }
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "rounded-full border-2 border-[var(--border-color)] border-t-[var(--fg)] animate-spin",
+          style: { width: s * 0.7, height: s * 0.7 }
+        }
+      )
+    }
+  );
+}
+var variantStyles = {
+  primary: "bg-[var(--fg)] text-[var(--bg)] border border-[var(--bg)] hover:opacity-90 active:opacity-80 shadow-[var(--shadow-sm)]",
+  secondary: "bg-[var(--bg-tertiary)] text-[var(--fg)] hover:bg-[var(--border-color)] active:bg-[var(--border-color-strong)]",
+  outline: "border border-[var(--fg-secondary)] text-[var(--fg-secondary)] hover:bg-[var(--bg-tertiary)] active:bg-[var(--border-color)]",
+  ghost: "text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--bg-tertiary)] active:bg-[var(--border-color)]"
+};
+var sizeStyles = {
+  sm: "text-[13px] px-4 py-2 gap-1.5 rounded-full tracking-[-0.25px]",
+  md: "text-[13px] px-4 py-2 gap-2 rounded-full tracking-[-0.25px]"
+};
+function Button(_a) {
+  var _b = _a, {
+    variant = "primary",
+    size = "md",
+    loading = false,
+    icon,
+    iconRight,
+    children,
+    disabled,
+    className = ""
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size",
+    "loading",
+    "icon",
+    "iconRight",
+    "children",
+    "disabled",
+    "className"
+  ]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      className: `inline-flex items-center justify-center font-medium transition-all duration-[var(--transition-fast)] cursor-pointer select-none whitespace-nowrap ${variantStyles[variant]} ${sizeStyles[size]} ${disabled || loading ? "opacity-50 cursor-not-allowed pointer-events-none" : ""} ${className}`,
+      disabled: disabled || loading
+    }, props), {
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: "sm" }) : icon,
+        children,
+        iconRight
+      ]
+    })
+  );
+}
+function Input(_a) {
+  var _b = _a, {
+    label,
+    error,
+    icon,
+    iconRight,
+    className = "",
+    id
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "icon",
+    "iconRight",
+    "className",
+    "id"
+  ]);
+  const inputId = id || (label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-"));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px]",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-3.5 top-1/2 -translate-y-1/2 text-[var(--fg-muted)]", children: icon }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        __spreadValues({
+          id: inputId,
+          className: `w-full border border-[var(--fg-muted)] bg-[var(--bg)] px-[15px] py-3 text-[13px] tracking-[-0.25px] text-[var(--fg-secondary)] placeholder:text-[var(--fg-muted)] transition-all duration-[var(--transition-fast)] focus:outline-none focus:border-[var(--fg)] rounded-full ${icon ? "pl-10" : ""} ${iconRight ? "pr-10" : ""} ${error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : ""} ${className}`
+        }, props)
+      ),
+      iconRight && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-3.5 top-1/2 -translate-y-1/2 text-[var(--fg-muted)]", children: iconRight })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] tracking-[-0.25px] text-[var(--color-error)]", children: error })
+  ] });
+}
+var colorStyles = {
+  default: "bg-[var(--bg-tertiary)] text-[var(--fg)]",
+  success: "bg-[var(--bg-tertiary)] text-[var(--color-success)]",
+  warning: "bg-[var(--bg-tertiary)] text-[var(--color-warning)]",
+  error: "bg-[var(--bg-tertiary)] text-[var(--color-error)]",
+  info: "bg-[var(--bg-tertiary)] text-[var(--color-info)]"
+};
+function Badge({ color = "default", children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className: `inline-flex items-center px-2.5 py-0.5 rounded-full text-[13px] font-semibold tracking-[-0.25px] ${colorStyles[color]} ${className}`,
+      children
+    }
+  );
+}
+var IconlyActivity = ({ size = 24, color = "currentColor" }) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.91711 14.8539L9.91011 10.9649L13.3241 13.6449L16.2531 9.86487", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M19.6671 2.34998C20.7291 2.34998 21.5891 3.20998 21.5891 4.27198C21.5891 5.33298 20.7291 6.19398 19.6671 6.19398C18.6051 6.19398 17.7451 5.33298 17.7451 4.27198C17.7451 3.20998 18.6051 2.34998 19.6671 2.34998Z", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.7555 9.26898C20.8885 10.164 20.9495 11.172 20.9495 12.303C20.9495 19.241 18.6375 21.553 11.6995 21.553C4.76246 21.553 2.44946 19.241 2.44946 12.303C2.44946 5.36598 4.76246 3.05298 11.6995 3.05298C12.8095 3.05298 13.8005 3.11198 14.6825 3.23998", stroke: color, strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
+var IconlySmile = IconlyActivity;
+var IconlyAttach = IconlyActivity;
+var IconlyInfo = IconlyActivity;
+var IconlySend = IconlyActivity;
+var IconlySearch = IconlyActivity;
+var IconlyMail = IconlyActivity;
+var IconlyLock = IconlyActivity;
+var IconlyStar = IconlyActivity;
+var IconlySun = IconlyActivity;
+var IconlyMoon = IconlyActivity;
+var IconlyRoadmap = IconlyActivity;
+var IconlyBook = IconlyActivity;
+var IconlySandbox = IconlyActivity;
+var IconlyHeart = IconlyActivity;
+var IconlyClose = IconlyActivity;
+var IconlyMenu = IconlyActivity;
+var IconlyCheck = IconlyActivity;
+var IconlyQuote = IconlyActivity;
+var IconlyInfoCircle = IconlyActivity;
+var IconlySuccess = IconlyActivity;
+var IconlyWarning = IconlyActivity;
+var IconlyError = IconlyActivity;
+var IconlyChevronDown = IconlyActivity;
+var IconlyLink = IconlyActivity;
+var IconlyEye = IconlyActivity;
+var IconlyEyeOff = IconlyActivity;
+var IconlyChevronRight = IconlyActivity;
+var IconlyChevronLeft = IconlyActivity;
+var colorStyles2 = {
+  default: "bg-[var(--bg-tertiary)] text-[var(--fg-secondary)] border-[var(--border-color)]",
+  primary: "bg-[var(--bg-tertiary)] text-[var(--fg)] border-[var(--border-color-strong)]",
+  success: "bg-[var(--bg-tertiary)] text-[var(--color-success)] border-[var(--border-color)]",
+  warning: "bg-[var(--bg-tertiary)] text-[var(--color-warning)] border-[var(--border-color)]",
+  error: "bg-[var(--bg-tertiary)] text-[var(--color-error)] border-[var(--border-color)]"
+};
+function Tag({ color = "default", closable = false, onClose, children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: `inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[13px] font-medium tracking-[-0.25px] border ${colorStyles2[color]} ${className}`,
+      children: [
+        children,
+        closable && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "hover:opacity-70 transition-opacity cursor-pointer",
+            "aria-label": "Remove tag",
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 12 })
+          }
+        )
+      ]
+    }
+  );
+}
+function Toggle({ checked = false, onChange, label, disabled = false, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: `inline-flex items-center gap-2.5 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        role: "switch",
+        type: "button",
+        "aria-checked": checked,
+        disabled,
+        onClick: () => onChange == null ? void 0 : onChange(!checked),
+        className: `relative inline-flex h-6 w-11 shrink-0 items-center rounded-full px-0.5 transition-colors duration-200 ease-in-out focus:outline-none cursor-pointer ${checked ? "bg-[var(--color-accent)] justify-end" : "bg-[var(--border-color)]"} ${disabled ? "cursor-not-allowed" : ""}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "pointer-events-none inline-block h-5 w-5 rounded-full bg-white transition-transform duration-200 ease-in-out"
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px]", children: label })
+  ] });
+}
+var sizeMap2 = {
+  sm: { container: "w-8 h-8", text: "text-xs" },
+  md: { container: "w-10 h-10", text: "text-sm" },
+  lg: { container: "w-12 h-12", text: "text-base" },
+  xl: { container: "w-16 h-16", text: "text-lg" }
+};
+function Avatar(_a) {
+  var _b = _a, { src, alt = "", initials, size = "md", className = "" } = _b, props = __objRest(_b, ["src", "alt", "initials", "size", "className"]);
+  const s = sizeMap2[size];
+  if (!src && initials) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: `${s.container} rounded-full bg-[var(--bg-tertiary)] border border-[var(--border-color)] flex items-center justify-center ${className}`,
+        "aria-label": alt || initials,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${s.text} font-medium text-[var(--fg-secondary)] select-none`, children: initials })
+      }
+    );
+  }
+  const imgSrc = src || "/assets/avatars/placeholder.webp";
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "img",
+      __spreadValues({
+        src: imgSrc,
+        alt,
+        className: `${s.container} rounded-full object-cover ${className}`
+      }, props)
+    )
+  );
+}
+function Divider({ className = "", label }) {
+  if (label) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-4 ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs font-medium text-[var(--fg-muted)] uppercase tracking-wider", children: label }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("hr", { className: `border-none h-px bg-[var(--border-color)] ${className}` });
+}
+function MenuItem({ text, active = false, onClick, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      onClick,
+      className: `inline-flex items-center px-[4px] py-[2px] text-[13px] font-medium tracking-[-0.25px] cursor-pointer border-none text-left whitespace-nowrap transition-colors duration-150 ${active ? "bg-[var(--bg-secondary)] text-[var(--fg)]" : "bg-transparent text-[var(--fg-muted)] hover:text-[var(--fg-secondary)]"} ${className}`,
+      children: text
+    }
+  );
+}
+var variantStyles2 = {
+  primary: "bg-[var(--fg)] text-[var(--bg)] border border-[var(--bg)] shadow-[var(--shadow-sm)]",
+  secondary: "bg-[var(--bg-tertiary)] text-[var(--fg-secondary)]",
+  clear: "bg-transparent text-[var(--fg-secondary)] shadow-[var(--shadow-sm)]",
+  disabled: "bg-[var(--bg-tertiary)] text-[var(--fg-muted)] opacity-50 cursor-not-allowed",
+  contrast: "bg-[var(--border-color)] text-[var(--fg-secondary)]"
+};
+function IconButton(_a) {
+  var _b = _a, { icon, variant = "primary", className = "", disabled } = _b, props = __objRest(_b, ["icon", "variant", "className", "disabled"]);
+  const isDisabled = variant === "disabled" || disabled;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    __spreadProps(__spreadValues({
+      className: `inline-flex items-center justify-center w-9 h-9 rounded-full transition-all duration-[var(--transition-fast)] cursor-pointer shrink-0 ${variantStyles2[variant]} ${isDisabled ? "cursor-not-allowed" : ""} ${className}`,
+      disabled: isDisabled
+    }, props), {
+      children: icon
+    })
+  );
+}
+function Logo({ version = "short", className = "" }) {
+  if (version === "short") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-[19px] h-5 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: "logo-img", src: "/assets/logos/logo-short.svg", alt: "aiacade.me", width: 19, height: 20 }) });
+  }
+  if (version === "third") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-1.5 ${className}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("img", { className: "logo-img", src: "/assets/logos/logo-icon.svg", alt: "", width: 20, height: 20 }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px]", children: "aiacade.me" })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `h-5 w-[130px] ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { className: "logo-img", src: "/assets/logos/logo-full.svg", alt: "aiacade.me", width: 130, height: 20 }) });
+}
+function StatBadge({ value, suffix, showBrackets = false, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `inline-flex items-center text-[13px] font-medium text-[var(--fg-secondary)] tracking-[-0.25px] whitespace-nowrap ${className}`, children: [
+    showBrackets && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--fg-muted)]", children: "[ " }),
+    value,
+    " ",
+    suffix,
+    showBrackets && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--fg-muted)]", children: " ]" })
+  ] });
+}
+function Textarea(_a) {
+  var _b = _a, {
+    label,
+    error,
+    className = "",
+    id,
+    rows = 3
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "className",
+    "id",
+    "rows"
+  ]);
+  const textareaId = id || (label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-"));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: textareaId,
+        className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px]",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "textarea",
+      __spreadValues({
+        id: textareaId,
+        rows,
+        className: `w-full border border-[var(--fg-muted)] bg-[var(--bg)] px-[15px] py-3 text-[13px] tracking-[-0.25px] text-[var(--fg-secondary)] placeholder:text-[var(--fg-muted)] transition-all duration-[var(--transition-fast)] focus:outline-none focus:border-[var(--fg)] rounded-[var(--radius-lg)] resize-vertical ${error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : ""} ${className}`
+      }, props)
+    ),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] tracking-[-0.25px] text-[var(--color-error)]", children: error })
+  ] });
+}
+function Select(_a) {
+  var _b = _a, {
+    label,
+    error,
+    options,
+    placeholder,
+    className = "",
+    id
+  } = _b, props = __objRest(_b, [
+    "label",
+    "error",
+    "options",
+    "placeholder",
+    "className",
+    "id"
+  ]);
+  const selectId = id || (label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-"));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: selectId,
+        className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px]",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        __spreadProps(__spreadValues(__spreadValues({
+          id: selectId,
+          className: `w-full appearance-none border border-[var(--fg-muted)] bg-[var(--bg)] px-[15px] py-3 pr-10 text-[13px] tracking-[-0.25px] text-[var(--fg-secondary)] transition-all duration-[var(--transition-fast)] focus:outline-none focus:border-[var(--fg)] rounded-full ${error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : ""} ${className}`
+        }, !("value" in props) && { defaultValue: "" }), props), {
+          children: [
+            placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
+            options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        })
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-3.5 top-1/2 -translate-y-1/2 pointer-events-none text-[var(--fg-muted)]", children: /* @__PURE__ */ jsxRuntime.jsx(IconlyChevronDown, { size: 16 }) })
+    ] }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] tracking-[-0.25px] text-[var(--color-error)]", children: error })
+  ] });
+}
+function Checkbox({
+  checked = false,
+  onChange,
+  label,
+  disabled = false,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: `inline-flex items-center gap-2.5 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked,
+            disabled,
+            onChange: () => onChange == null ? void 0 : onChange(!checked),
+            className: "absolute opacity-0 w-0 h-0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `flex items-center justify-center w-[18px] h-[18px] rounded-[5px] border transition-colors duration-200 shrink-0 ${checked ? "bg-[var(--color-accent)] border-[var(--color-accent)]" : "border-[var(--fg-muted)] bg-transparent"}`,
+            children: checked && /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                width: "12",
+                height: "9",
+                viewBox: "0 0 12 9",
+                fill: "none",
+                xmlns: "http://www.w3.org/2000/svg",
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M1 4L4.5 7.5L11 1",
+                    stroke: "white",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px]", children: label })
+      ]
+    }
+  );
+}
+function Radio({
+  checked = false,
+  onChange,
+  label,
+  disabled = false,
+  name,
+  value,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "label",
+    {
+      className: `inline-flex items-center gap-2.5 ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "radio",
+            checked,
+            disabled,
+            name,
+            value,
+            onChange: () => onChange == null ? void 0 : onChange(!checked),
+            className: "absolute opacity-0 w-0 h-0"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: `flex items-center justify-center w-[18px] h-[18px] rounded-full border transition-colors duration-200 shrink-0 ${checked ? "border-[var(--color-accent)]" : "border-[var(--fg-muted)]"}`,
+            children: checked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-[8px] h-[8px] rounded-full bg-[var(--color-accent)]" })
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px]", children: label })
+      ]
+    }
+  );
+}
+var variantStyles3 = {
+  default: "text-[var(--color-accent)] hover:underline",
+  muted: "text-[var(--fg-muted)] hover:text-[var(--fg)]",
+  underline: "text-[var(--fg)] underline underline-offset-2 hover:text-[var(--color-accent)]"
+};
+function Link(_a) {
+  var _b = _a, { variant = "default", className = "", children } = _b, rest = __objRest(_b, ["variant", "className", "children"]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "a",
+    __spreadProps(__spreadValues({
+      className: `text-[13px] tracking-[-0.25px] transition-colors duration-[var(--transition-fast)] inline-flex items-center gap-1 ${variantStyles3[variant]} ${className}`
+    }, rest), {
+      children
+    })
+  );
+}
+var positionStyles = {
+  top: "bottom-full left-1/2 -translate-x-1/2 mb-1.5",
+  bottom: "top-full left-1/2 -translate-x-1/2 mt-1.5",
+  left: "right-full top-1/2 -translate-y-1/2 mr-1.5",
+  right: "left-full top-1/2 -translate-y-1/2 ml-1.5"
+};
+function Tooltip({ content, position = "top", children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `relative inline-flex group ${className}`, children: [
+    children,
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        role: "tooltip",
+        className: `absolute invisible group-hover:visible opacity-0 group-hover:opacity-100 transition-opacity bg-[var(--fg)] text-[var(--bg)] text-[11px] px-2 py-1 rounded-md whitespace-nowrap z-50 pointer-events-none ${positionStyles[position]}`,
+        children: content
+      }
+    )
+  ] });
+}
+var variantStyles4 = {
+  line: "h-4 w-full rounded-full",
+  circle: "rounded-full",
+  rect: "rounded-[var(--radius-lg)]"
+};
+function Skeleton({ variant = "line", width, height, className = "" }) {
+  const style = {};
+  if (width != null) style.width = typeof width === "number" ? `${width}px` : width;
+  if (height != null) style.height = typeof height === "number" ? `${height}px` : height;
+  if (variant === "circle") {
+    if (width != null && height == null) style.height = style.width;
+    if (height != null && width == null) style.width = style.height;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `animate-pulse bg-[var(--bg-tertiary)] ${variantStyles4[variant]} ${className}`,
+      style: Object.keys(style).length > 0 ? style : void 0,
+      "aria-hidden": "true"
+    }
+  );
+}
+var DefaultIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "9 18 15 12 9 6" }) });
+function TicketButton(_a) {
+  var _b = _a, {
+    children,
+    icon,
+    variant = "primary",
+    className = ""
+  } = _b, props = __objRest(_b, [
+    "children",
+    "icon",
+    "variant",
+    "className"
+  ]);
+  const maskId = react.useId().replace(/:/g, "");
+  const isPrimary = variant === "primary";
+  const bg = isPrimary ? "var(--fg)" : "var(--bg)";
+  const fg = isPrimary ? "var(--bg)" : "var(--fg)";
+  const perfColor = isPrimary ? "var(--bg)" : "var(--border-color)";
+  const strokeAttr = isPrimary ? {} : { stroke: "var(--border-color-strong)", strokeWidth: 1.5 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      className: `group relative inline-flex items-stretch cursor-pointer border-none bg-transparent p-0 select-none ${className}`
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: "absolute inset-0 w-full h-full",
+              viewBox: "0 0 140 56",
+              fill: "none",
+              preserveAspectRatio: "none",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: `${maskId}-l`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "140", height: "56", fill: "white" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "140", height: "56", rx: "14", fill: "white" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "140", cy: "0", r: "7", fill: "black" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "140", cy: "56", r: "7", fill: "black" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  __spreadValues({
+                    width: "140",
+                    height: "56",
+                    rx: "14",
+                    fill: bg,
+                    mask: `url(#${maskId}-l)`
+                  }, strokeAttr)
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "139", y1: "10", x2: "139", y2: "46", stroke: perfColor, strokeWidth: "1.5", strokeDasharray: "3 3", opacity: "0.4" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 px-6 py-4 text-[13px] font-semibold tracking-[-0.25px] whitespace-nowrap", style: { color: fg }, children })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "relative flex items-center transition-transform duration-300 ease-[cubic-bezier(0.34,1.56,0.64,1)] group-hover:translate-x-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "svg",
+            {
+              className: "absolute inset-0 w-full h-full",
+              viewBox: "0 0 56 56",
+              fill: "none",
+              preserveAspectRatio: "none",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsxs("mask", { id: `${maskId}-r`, children: [
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "56", height: "56", fill: "white" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "0", y: "0", width: "56", height: "56", rx: "14", fill: "white" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "0", cy: "0", r: "7", fill: "black" }),
+                  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "0", cy: "56", r: "7", fill: "black" })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "rect",
+                  __spreadValues({
+                    width: "56",
+                    height: "56",
+                    rx: "14",
+                    fill: bg,
+                    mask: `url(#${maskId}-r)`
+                  }, strokeAttr)
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "relative z-10 w-[56px] h-[56px] flex items-center justify-center", style: { color: fg }, children: icon || /* @__PURE__ */ jsxRuntime.jsx(DefaultIcon, {}) })
+        ] })
+      ]
+    })
+  );
+}
+function Card({ image, title, description, footer, children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] overflow-hidden shadow-[var(--shadow-xs)] transition-all duration-[var(--transition-base)] hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5 ${className}`,
+      children: [
+        image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: title || "", className: "w-full h-full object-cover" }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-5", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-[var(--fg)] mb-1", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--fg-secondary)] leading-relaxed", children: description }),
+          children
+        ] }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 py-3 border-t border-[var(--border-color)] bg-[var(--bg-secondary)]", children: footer })
+      ]
+    }
+  );
+}
+function FormField(_a) {
+  var _b = _a, { label, error, hint, icon } = _b, inputProps = __objRest(_b, ["label", "error", "hint", "icon"]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Input, __spreadValues({ label, error, icon }, inputProps)),
+    hint && !error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[0.8125rem] text-[var(--fg-muted)]", children: hint })
+  ] });
+}
+function SearchBar({ placeholder = "Search...", value: controlledValue, onChange, className = "" }) {
+  const [internalValue, setInternalValue] = react.useState("");
+  const value = controlledValue != null ? controlledValue : internalValue;
+  const handleChange = (val) => {
+    setInternalValue(val);
+    onChange == null ? void 0 : onChange(val);
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative flex items-center ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute left-3 text-[var(--fg-muted)]", children: /* @__PURE__ */ jsxRuntime.jsx(IconlySearch, { size: 18 }) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => handleChange(e.target.value),
+        placeholder,
+        "aria-label": "Search",
+        className: "w-full rounded-[var(--radius-lg)] border border-[var(--border-color)] bg-[var(--bg)] pl-10 pr-10 py-2.5 text-sm text-[var(--fg)] placeholder:text-[var(--fg-muted)] transition-all duration-[var(--transition-fast)] focus:outline-none focus:ring-2 focus:ring-[var(--brand-primary)] focus:border-transparent"
+      }
+    ),
+    value && /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => handleChange(""),
+        className: "absolute right-3 text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors cursor-pointer",
+        "aria-label": "Clear search",
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 16 })
+      }
+    )
+  ] });
+}
+function Stat({ value, label, trend, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-2xl font-bold text-[var(--fg)]", children: value }),
+      trend && /* @__PURE__ */ jsxRuntime.jsxs(
+        "span",
+        {
+          className: `text-sm font-medium ${trend.positive ? "text-[var(--color-success)]" : "text-[var(--color-error)]"}`,
+          children: [
+            trend.positive ? "\u2191" : "\u2193",
+            " ",
+            trend.value
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm text-[var(--fg-muted)]", children: label })
+  ] });
+}
+var variantConfig = {
+  info: { accentColor: "text-[var(--color-info)]", Icon: IconlyInfoCircle },
+  success: { accentColor: "text-[var(--color-success)]", Icon: IconlySuccess },
+  warning: { accentColor: "text-[var(--color-warning)]", Icon: IconlyWarning },
+  error: { accentColor: "text-[var(--color-error)]", Icon: IconlyError }
+};
+function Alert({ variant = "info", title, children, closable = false, className = "" }) {
+  const [visible, setVisible] = react.useState(true);
+  if (!visible) return null;
+  const config = variantConfig[variant];
+  const { Icon } = config;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `flex gap-3 p-4 rounded-[var(--radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `shrink-0 mt-0.5 ${config.accentColor}`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 20 }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-[13px] font-medium tracking-[-0.25px] mb-0.5 ${config.accentColor}`, children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] tracking-[-0.25px] text-[var(--fg-secondary)]", children })
+        ] }),
+        closable && /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setVisible(false),
+            className: "shrink-0 text-[var(--fg-muted)] hover:text-[var(--fg)] transition-all duration-[var(--transition-fast)] cursor-pointer",
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+function Tabs({ tabs, defaultTab, onChange, className = "" }) {
+  var _a, _b;
+  const [activeTab, setActiveTab] = react.useState(defaultTab || ((_a = tabs[0]) == null ? void 0 : _a.id));
+  const tabRefs = react.useRef([]);
+  const activateTab = (tabId) => {
+    setActiveTab(tabId);
+    onChange == null ? void 0 : onChange(tabId);
+  };
+  const handleKeyDown = (e) => {
+    var _a2;
+    const currentIndex = tabs.findIndex((t) => t.id === activeTab);
+    let nextIndex = null;
+    if (e.key === "ArrowRight") {
+      nextIndex = (currentIndex + 1) % tabs.length;
+    } else if (e.key === "ArrowLeft") {
+      nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
+    }
+    if (nextIndex !== null) {
+      e.preventDefault();
+      const nextTab = tabs[nextIndex];
+      activateTab(nextTab.id);
+      (_a2 = tabRefs.current[nextIndex]) == null ? void 0 : _a2.focus();
+    }
+  };
+  const activeContent = (_b = tabs.find((t) => t.id === activeTab)) == null ? void 0 : _b.content;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "tablist",
+        className: "flex border-b border-[var(--border-color)]",
+        onKeyDown: handleKeyDown,
+        children: tabs.map((tab, index) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            ref: (el) => {
+              tabRefs.current[index] = el;
+            },
+            id: `tab-${tab.id}`,
+            role: "tab",
+            "aria-selected": activeTab === tab.id,
+            "aria-controls": `panel-${tab.id}`,
+            tabIndex: activeTab === tab.id ? 0 : -1,
+            onClick: () => activateTab(tab.id),
+            className: `px-4 py-2.5 text-sm font-medium transition-colors cursor-pointer relative ${activeTab === tab.id ? "text-[var(--brand-primary)]" : "text-[var(--fg-muted)] hover:text-[var(--fg)]"}`,
+            children: [
+              tab.label,
+              activeTab === tab.id && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute bottom-0 left-0 right-0 h-0.5 bg-[var(--brand-primary)] rounded-full" })
+            ]
+          },
+          tab.id
+        ))
+      }
+    ),
+    activeContent && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "tabpanel",
+        id: `panel-${activeTab}`,
+        "aria-labelledby": `tab-${activeTab}`,
+        className: "pt-4",
+        children: activeContent
+      }
+    )
+  ] });
+}
+function ChatInput({
+  placeholder = "\u0412\u0432\u0435\u0434\u0438 \u0441\u0432\u043E\u0439 email...",
+  buttonText = "\u041D\u0430\u0447\u0430\u0442\u044C \u0431\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E",
+  type = "easy",
+  contrast = true,
+  onSubmit,
+  className = ""
+}) {
+  const [value, setValue] = react.useState("");
+  const inputRef = react.useRef(null);
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (value.trim() && onSubmit) {
+      onSubmit(value.trim());
+      setValue("");
+    }
+  };
+  const containerStyles = contrast ? "bg-[var(--bg)] border border-[var(--bg-tertiary)] shadow-[var(--shadow-md)] px-[15px] py-[13px]" : "bg-[var(--bg-tertiary)] pl-3.5 pr-3 py-3";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      onSubmit: handleSubmit,
+      onClick: () => {
+        var _a;
+        return (_a = inputRef.current) == null ? void 0 : _a.focus();
+      },
+      className: `rounded-[16px] overflow-hidden flex flex-col gap-4 w-full max-w-[440px] cursor-text ${containerStyles} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            value,
+            onChange: (e) => setValue(e.target.value),
+            placeholder,
+            className: "w-full bg-transparent border-none outline-none text-[13px] tracking-[-0.25px] text-[var(--fg)] placeholder:text-[var(--fg-muted)] font-normal"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center ${type === "full" ? "justify-between" : "justify-end"}`, children: [
+          type === "full" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "secondary", icon: /* @__PURE__ */ jsxRuntime.jsx(IconlySmile, { size: 20 }), type: "button", "aria-label": "Emoji" }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "clear", icon: /* @__PURE__ */ jsxRuntime.jsx(IconlyAttach, { size: 20 }), type: "button", "aria-label": "Attach" }),
+            /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "clear", icon: /* @__PURE__ */ jsxRuntime.jsx(IconlyInfo, { size: 20 }), type: "button", "aria-label": "Info" })
+          ] }),
+          type === "easy" ? /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", type: "submit", children: buttonText }) : /* @__PURE__ */ jsxRuntime.jsx(IconButton, { variant: "primary", icon: /* @__PURE__ */ jsxRuntime.jsx(IconlySend, { size: 20 }), type: "submit", "aria-label": "Send" })
+        ] })
+      ]
+    }
+  );
+}
+function ChatMessage({ children, role = "user", size = "sm", className = "" }) {
+  const isUser = role === "user";
+  const isLarge = size === "lg";
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex ${isUser ? "justify-end" : "justify-start"} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `text-[13px] tracking-[-0.25px] font-normal px-4 rounded-tl-[16px] rounded-tr-[16px] ${isLarge ? "w-[225px] py-3" : "py-2"} ${isUser ? "bg-[var(--bg-secondary)] text-[var(--fg)] rounded-bl-[16px]" : "bg-[var(--color-accent)] text-[var(--bg)] rounded-br-[16px]"} ${isLarge ? "leading-normal" : "leading-normal"}`,
+      children
+    }
+  ) });
+}
+function TopPromo({ text, buttonText = "\u0421\u043C\u043E\u0442\u0440\u0435\u0442\u044C", onButtonClick, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-2.5 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] tracking-[-0.25px] text-[var(--fg-secondary)]", children: text }),
+    /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "sm", onClick: onButtonClick, children: buttonText })
+  ] });
+}
+function ProfileNav({ stats, avatarSrc, avatarInitials = "DK", className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex items-center gap-5 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center text-[13px] font-medium tracking-[-0.25px] whitespace-nowrap", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-[var(--fg-secondary)]", children: [
+        stat.value,
+        " ",
+        stat.suffix
+      ] }),
+      i < stats.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--fg-muted)]", children: " //" })
+    ] }, i)) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size: "sm", src: avatarSrc, initials: avatarInitials })
+  ] });
+}
+function IconWithText({ icon, text, side = "left", className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `inline-flex items-center gap-1.5 py-1 rounded-full ${className}`, children: [
+    side === "left" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 w-5 h-5 flex items-center justify-center", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px] whitespace-nowrap", children: text }),
+    side === "right" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 w-5 h-5 flex items-center justify-center", children: icon })
+  ] });
+}
+function StampCard({
+  children,
+  className = "",
+  stamp = true,
+  holeRadius = 4,
+  holeSpacing = 16
+}) {
+  const outerRef = react.useRef(null);
+  const [maskUrl, setMaskUrl] = react.useState(null);
+  const build = react.useCallback(() => {
+    if (!stamp) return;
+    const el = outerRef.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    if (w === 0 || h === 0) return;
+    const r = holeRadius;
+    const sp = holeSpacing;
+    let circles = "";
+    for (let x = sp / 2; x < w; x += sp) {
+      circles += `<circle cx="${x}" cy="0" r="${r}"/>`;
+    }
+    for (let x = sp / 2; x < w; x += sp) {
+      circles += `<circle cx="${x}" cy="${h}" r="${r}"/>`;
+    }
+    for (let y = sp / 2; y < h; y += sp) {
+      circles += `<circle cx="0" cy="${y}" r="${r}"/>`;
+    }
+    for (let y = sp / 2; y < h; y += sp) {
+      circles += `<circle cx="${w}" cy="${y}" r="${r}"/>`;
+    }
+    const maskSvg = `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+      <defs><mask id="m">
+        <rect width="${w}" height="${h}" fill="white"/>
+        ${circles}
+      </mask></defs>
+      <rect width="${w}" height="${h}" fill="white" mask="url(#m)"/>
+    </svg>`;
+    setMaskUrl(`data:image/svg+xml;base64,${btoa(maskSvg)}`);
+  }, [stamp, holeRadius, holeSpacing]);
+  react.useEffect(() => {
+    if (!stamp) return;
+    const frame = requestAnimationFrame(() => build());
+    const ro = new ResizeObserver(() => build());
+    if (outerRef.current) ro.observe(outerRef.current);
+    return () => {
+      cancelAnimationFrame(frame);
+      ro.disconnect();
+    };
+  }, [build, stamp]);
+  if (!stamp) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] overflow-hidden shadow-[var(--shadow-xs)] ${className}`, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref: outerRef, className: `relative ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.25)) drop-shadow(0 4px 12px rgba(0,0,0,0.20))" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        WebkitMaskImage: maskUrl ? `url("${maskUrl}")` : void 0,
+        maskImage: maskUrl ? `url("${maskUrl}")` : void 0,
+        WebkitMaskSize: "100% 100%",
+        maskSize: "100% 100%"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--bg)]", children })
+    }
+  ) }) });
+}
+function PasswordInput(_a) {
+  var props = __objRest(_a, []);
+  const [showPassword, setShowPassword] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input,
+    __spreadProps(__spreadValues({}, props), {
+      type: showPassword ? "text" : "password",
+      iconRight: /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => setShowPassword((prev) => !prev),
+          className: "flex items-center justify-center cursor-pointer",
+          "aria-label": showPassword ? "Hide password" : "Show password",
+          tabIndex: -1,
+          children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(IconlyEyeOff, { size: 18 }) : /* @__PURE__ */ jsxRuntime.jsx(IconlyEye, { size: 18 })
+        }
+      )
+    })
+  );
+}
+function Breadcrumbs({
+  items,
+  separator = /* @__PURE__ */ jsxRuntime.jsx(IconlyChevronRight, { size: 14 })
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsxRuntime.jsx("ol", { className: "flex items-center gap-1.5 text-[13px] tracking-[-0.25px]", children: items.map((item, index) => {
+    var _a;
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-center gap-1.5", children: [
+      index > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--fg-muted)]", "aria-hidden": "true", children: separator }),
+      isLast ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--fg)] font-medium", "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: (_a = item.href) != null ? _a : "#",
+          className: "text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors duration-[var(--transition-fast)]",
+          children: item.label
+        }
+      )
+    ] }, index);
+  }) }) });
+}
+var variantConfig2 = {
+  info: { accentColor: "text-[var(--color-info)]", Icon: IconlyInfoCircle },
+  success: { accentColor: "text-[var(--color-success)]", Icon: IconlySuccess },
+  warning: { accentColor: "text-[var(--color-warning)]", Icon: IconlyWarning },
+  error: { accentColor: "text-[var(--color-error)]", Icon: IconlyError }
+};
+function Toast({
+  variant = "info",
+  title,
+  message,
+  duration = 4e3,
+  visible,
+  onClose,
+  className = ""
+}) {
+  react.useEffect(() => {
+    if (!visible) return;
+    const timer = setTimeout(onClose, duration);
+    return () => clearTimeout(timer);
+  }, [visible, duration, onClose]);
+  if (!visible) return null;
+  const config = variantConfig2[variant];
+  const { Icon } = config;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "alert",
+      "aria-live": "assertive",
+      className: `fixed bottom-6 right-6 z-50 flex gap-3 p-4 rounded-[var(--radius-lg)] border border-[var(--border-color)] bg-[var(--bg-secondary)] shadow-lg max-w-sm ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `shrink-0 mt-0.5 ${config.accentColor}`, children: /* @__PURE__ */ jsxRuntime.jsx(Icon, { size: 20 }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 min-w-0", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-[13px] font-medium tracking-[-0.25px] mb-0.5 ${config.accentColor}`, children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] tracking-[-0.25px] text-[var(--fg-secondary)]", children: message })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: onClose,
+            className: "shrink-0 text-[var(--fg-muted)] hover:text-[var(--fg)] transition-all duration-[var(--transition-fast)] cursor-pointer",
+            "aria-label": "Dismiss",
+            children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 16 })
+          }
+        )
+      ]
+    }
+  );
+}
+function getPageRange(current, total, siblings) {
+  const range = /* @__PURE__ */ new Set();
+  range.add(1);
+  range.add(total);
+  for (let i = Math.max(2, current - siblings); i <= Math.min(total - 1, current + siblings); i++) {
+    range.add(i);
+  }
+  const sorted = Array.from(range).sort((a, b) => a - b);
+  const result = [];
+  for (let i = 0; i < sorted.length; i++) {
+    if (i > 0 && sorted[i] - sorted[i - 1] > 1) {
+      result.push("\u2026");
+    }
+    result.push(sorted[i]);
+  }
+  return result;
+}
+function Pagination({
+  currentPage,
+  totalPages,
+  onPageChange,
+  siblingCount = 1,
+  className = ""
+}) {
+  if (totalPages <= 1) return null;
+  const pages = getPageRange(currentPage, totalPages, siblingCount);
+  const isFirst = currentPage === 1;
+  const isLast = currentPage === totalPages;
+  const buttonBase = "min-w-[36px] h-[36px] flex items-center justify-center text-[13px] tracking-[-0.25px] transition-all duration-[var(--transition-fast)] cursor-pointer";
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": "Pagination", className: `flex items-center gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: isFirst,
+        "aria-label": "Previous page",
+        className: `${buttonBase} text-[var(--fg-secondary)] hover:text-[var(--fg)] ${isFirst ? "opacity-50 cursor-not-allowed" : ""}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconlyChevronLeft, { size: 18 })
+      }
+    ),
+    pages.map(
+      (page, i) => page === "\u2026" ? /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "min-w-[36px] h-[36px] flex items-center justify-center text-[13px] text-[var(--fg-muted)]",
+          children: "\u2026"
+        },
+        `ellipsis-${i}`
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => onPageChange(page),
+          "aria-current": page === currentPage ? "page" : void 0,
+          className: `${buttonBase} rounded-full ${page === currentPage ? "bg-[var(--fg)] text-[var(--bg)] font-medium" : "text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--bg-secondary)]"}`,
+          children: page
+        },
+        page
+      )
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: isLast,
+        "aria-label": "Next page",
+        className: `${buttonBase} text-[var(--fg-secondary)] hover:text-[var(--fg)] ${isLast ? "opacity-50 cursor-not-allowed" : ""}`,
+        children: /* @__PURE__ */ jsxRuntime.jsx(IconlyChevronRight, { size: 18 })
+      }
+    )
+  ] });
+}
+function CodeInput({
+  length,
+  value,
+  onChange,
+  error,
+  label,
+  className = ""
+}) {
+  const inputsRef = react.useRef([]);
+  const focusInput = react.useCallback((index) => {
+    var _a;
+    (_a = inputsRef.current[index]) == null ? void 0 : _a.focus();
+  }, []);
+  const updateValue = react.useCallback(
+    (index, char) => {
+      const chars = value.padEnd(length, " ").split("");
+      chars[index] = char;
+      onChange(chars.join("").trimEnd());
+    },
+    [value, length, onChange]
+  );
+  const handleChange = react.useCallback(
+    (index) => (e) => {
+      const char = e.target.value.slice(-1);
+      if (!/^\d$/.test(char) && char !== "") return;
+      updateValue(index, char);
+      if (char && index < length - 1) {
+        focusInput(index + 1);
+      }
+    },
+    [updateValue, length, focusInput]
+  );
+  const handleKeyDown = react.useCallback(
+    (index) => (e) => {
+      if (e.key === "Backspace" && !e.currentTarget.value && index > 0) {
+        focusInput(index - 1);
+      }
+    },
+    [focusInput]
+  );
+  const handlePaste = react.useCallback(
+    (e) => {
+      e.preventDefault();
+      const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+      if (!pasted) return;
+      onChange(pasted);
+      const focusIndex = Math.min(pasted.length, length - 1);
+      setTimeout(() => focusInput(focusIndex), 0);
+    },
+    [length, onChange, focusInput]
+  );
+  const inputId = label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1.5 ${className}`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx(
+      "label",
+      {
+        htmlFor: inputId,
+        className: "text-[13px] font-medium text-[var(--fg)] tracking-[-0.25px]",
+        children: label
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3", role: "group", "aria-label": label || "Code input", children: Array.from({ length }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+      "input",
+      {
+        id: i === 0 ? inputId : void 0,
+        ref: (el) => {
+          inputsRef.current[i] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        maxLength: 1,
+        value: value[i] || "",
+        onChange: handleChange(i),
+        onKeyDown: handleKeyDown(i),
+        onPaste: handlePaste,
+        autoComplete: "one-time-code",
+        className: `w-12 h-12 text-center text-lg border bg-[var(--bg)] text-[var(--fg)] rounded-[var(--radius-lg)] transition-all duration-[var(--transition-fast)] focus:outline-none focus:border-[var(--fg)] ${error ? "border-[var(--color-error)] focus:border-[var(--color-error)]" : "border-[var(--fg-muted)]"}`,
+        "aria-label": `Digit ${i + 1}`
+      },
+      i
+    )) }),
+    error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] tracking-[-0.25px] text-[var(--color-error)]", children: error })
+  ] });
+}
+function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+  className = ""
+}) {
+  const dialogRef = react.useRef(null);
+  react.useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+  const handleBackdropClick = (e) => {
+    if (e.target === dialogRef.current) {
+      onClose();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "dialog",
+    {
+      ref: dialogRef,
+      onClose,
+      onClick: handleBackdropClick,
+      className: `max-w-lg w-full p-0 rounded-[var(--radius-lg)] shadow-xl bg-[var(--bg)] border border-[var(--border-color)] backdrop:bg-black/50 ${className}`,
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start justify-between mb-4", children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-lg font-semibold text-[var(--fg)] tracking-[-0.25px]", children: title }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onClose,
+              className: "shrink-0 ml-auto text-[var(--fg-muted)] hover:text-[var(--fg)] transition-all duration-[var(--transition-fast)] cursor-pointer",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 20 })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[14px] text-[var(--fg-secondary)] leading-relaxed", children }),
+        footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-3 justify-end mt-6", children: footer })
+      ] })
+    }
+  );
+}
+function DropdownMenu({
+  trigger,
+  items,
+  align = "left",
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = react.useState(false);
+  const [focusedIndex, setFocusedIndex] = react.useState(-1);
+  const containerRef = react.useRef(null);
+  const triggerRef = react.useRef(null);
+  const itemRefs = react.useRef([]);
+  const openMenu = () => {
+    setIsOpen(true);
+    setFocusedIndex(0);
+  };
+  const closeMenu = () => {
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  react.useEffect(() => {
+    if (!isOpen) return;
+    const handleMouseDown = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        closeMenu();
+      }
+    };
+    document.addEventListener("mousedown", handleMouseDown);
+    return () => document.removeEventListener("mousedown", handleMouseDown);
+  }, [isOpen]);
+  react.useEffect(() => {
+    if (isOpen && focusedIndex >= 0) {
+      requestAnimationFrame(() => {
+        var _a;
+        (_a = itemRefs.current[focusedIndex]) == null ? void 0 : _a.focus();
+      });
+    }
+  }, [isOpen, focusedIndex]);
+  const handleMenuKeyDown = (e) => {
+    var _a, _b, _c;
+    switch (e.key) {
+      case "Escape":
+        e.preventDefault();
+        closeMenu();
+        (_a = triggerRef.current) == null ? void 0 : _a.focus();
+        break;
+      case "ArrowDown": {
+        e.preventDefault();
+        const next = (focusedIndex + 1) % items.length;
+        setFocusedIndex(next);
+        (_b = itemRefs.current[next]) == null ? void 0 : _b.focus();
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const prev = (focusedIndex - 1 + items.length) % items.length;
+        setFocusedIndex(prev);
+        (_c = itemRefs.current[prev]) == null ? void 0 : _c.focus();
+        break;
+      }
+    }
+  };
+  const handleTriggerKeyDown = (e) => {
+    if (e.key === "ArrowDown" && !isOpen) {
+      e.preventDefault();
+      openMenu();
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: `relative inline-block ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref: triggerRef,
+        role: "button",
+        tabIndex: 0,
+        onClick: () => isOpen ? closeMenu() : openMenu(),
+        onKeyDown: handleTriggerKeyDown,
+        className: "cursor-pointer inline-flex",
+        "aria-haspopup": "true",
+        "aria-expanded": isOpen,
+        children: trigger
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "menu",
+        onKeyDown: handleMenuKeyDown,
+        className: `absolute top-full mt-1 z-50 rounded-[var(--radius-lg)] shadow-lg border border-[var(--border-color)] bg-[var(--bg)] min-w-[180px] py-1 ${align === "right" ? "right-0" : "left-0"}`,
+        children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+          item.divider && /* @__PURE__ */ jsxRuntime.jsx("hr", { className: "my-1 border-[var(--border-color)]" }),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            "button",
+            {
+              ref: (el) => {
+                itemRefs.current[i] = el;
+              },
+              type: "button",
+              role: "menuitem",
+              tabIndex: focusedIndex === i ? 0 : -1,
+              onClick: () => {
+                item.onClick();
+                closeMenu();
+              },
+              className: "flex items-center gap-2 w-full px-3 py-2 text-[13px] tracking-[-0.25px] text-[var(--fg-secondary)] hover:bg-[var(--bg-secondary)] hover:text-[var(--fg)] transition-all duration-[var(--transition-fast)] cursor-pointer text-left",
+              children: [
+                item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 text-[var(--fg-muted)]", children: item.icon }),
+                item.label
+              ]
+            }
+          )
+        ] }, i))
+      }
+    )
+  ] });
+}
+function Header({ logo, navItems = [], className = "" }) {
+  const [mobileOpen, setMobileOpen] = react.useState(false);
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: `border-b border-[var(--border-color)] bg-[var(--bg)]/80 backdrop-blur-md sticky top-0 z-50 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between h-16", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-8", children: [
+        logo || /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-lg font-bold text-[var(--fg)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--brand-primary)]", children: "K" }),
+          "apustin"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "hidden md:flex items-center gap-1", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: item.href,
+            className: "px-3 py-2 text-sm text-[var(--fg-secondary)] hover:text-[var(--fg)] rounded-[var(--radius-md)] hover:bg-[var(--bg-tertiary)] transition-colors",
+            children: item.label
+          },
+          item.label
+        )) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:flex items-center gap-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: "Sign in" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", children: "Get started" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          className: "md:hidden p-2 text-[var(--fg-secondary)] hover:text-[var(--fg)] cursor-pointer",
+          onClick: () => setMobileOpen(!mobileOpen),
+          "aria-label": "Toggle menu",
+          children: mobileOpen ? /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 24 }) : /* @__PURE__ */ jsxRuntime.jsx(IconlyMenu, { size: 24 })
+        }
+      )
+    ] }) }),
+    mobileOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "md:hidden border-t border-[var(--border-color)] bg-[var(--bg)] px-4 py-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col gap-1", children: navItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: item.href,
+          className: "px-3 py-2 text-sm text-[var(--fg-secondary)] hover:text-[var(--fg)] rounded-[var(--radius-md)] hover:bg-[var(--bg-tertiary)] transition-colors",
+          children: item.label
+        },
+        item.label
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 mt-4 pt-4 border-t border-[var(--border-color)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "ghost", size: "sm", children: "Sign in" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { size: "sm", children: "Get started" })
+      ] })
+    ] })
+  ] });
+}
+var defaultColumns = [
+  {
+    title: "Product",
+    links: [
+      { label: "Components", href: "#" },
+      { label: "Templates", href: "#" },
+      { label: "Pricing", href: "#" },
+      { label: "Changelog", href: "#" }
+    ]
+  },
+  {
+    title: "Resources",
+    links: [
+      { label: "Documentation", href: "#" },
+      { label: "Guides", href: "#" },
+      { label: "API Reference", href: "#" },
+      { label: "Blog", href: "#" }
+    ]
+  },
+  {
+    title: "Company",
+    links: [
+      { label: "About", href: "#" },
+      { label: "Careers", href: "#" },
+      { label: "Contact", href: "#" },
+      { label: "Legal", href: "#" }
+    ]
+  }
+];
+function Footer({ columns = defaultColumns, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: `border-t border-[var(--border-color)] bg-[var(--bg)] ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-lg font-bold text-[var(--fg)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--brand-primary)]", children: "K" }),
+          "apustin"
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-[13px] text-[var(--fg-muted)] leading-relaxed tracking-[-0.25px]", children: "A modern design system for building beautiful interfaces." })
+      ] }),
+      columns.map((col) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h4", { className: "text-[13px] font-semibold text-[var(--fg-secondary)] mb-3 tracking-[-0.25px]", children: col.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-2.5", children: col.links.map((link) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsx(
+          "a",
+          {
+            href: link.href,
+            className: "text-[13px] text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors duration-[var(--transition-fast)] tracking-[-0.25px]",
+            children: link.label
+          }
+        ) }, link.label)) })
+      ] }, col.title))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-12 pt-8 border-t border-[var(--border-color)] flex flex-col sm:flex-row justify-between items-center gap-4", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[13px] text-[var(--fg-muted)] tracking-[-0.25px]", children: [
+        "\xA9 ",
+        (/* @__PURE__ */ new Date()).getFullYear(),
+        " Kapustin Team. All rights reserved."
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-4", children: ["Twitter", "GitHub", "Discord"].map((social) => /* @__PURE__ */ jsxRuntime.jsx(
+        "a",
+        {
+          href: "#",
+          className: "text-[13px] text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors duration-[var(--transition-fast)] tracking-[-0.25px]",
+          children: social
+        },
+        social
+      )) })
+    ] })
+  ] }) });
+}
+function PricingCard({
+  plan,
+  price,
+  period = "/mo",
+  description,
+  features,
+  highlighted = false,
+  badge,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `relative rounded-[var(--radius-xl)] border p-6 flex flex-col ${highlighted ? "border-[var(--brand-primary)] shadow-[0_0_0_1px_var(--brand-primary),var(--shadow-lg)] bg-[var(--bg)]" : "border-[var(--border-color)] bg-[var(--bg)] shadow-[var(--shadow-xs)]"} ${className}`,
+      children: [
+        badge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2", children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { color: "info", children: badge }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-[var(--fg)]", children: plan }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--fg-muted)] mt-1", children: description })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-6", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl font-bold text-[var(--fg)]", children: price }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--fg-muted)]", children: period })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "space-y-3 mb-8 flex-1", children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2.5 text-sm text-[var(--fg-secondary)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0 mt-0.5 text-[var(--color-success)]", children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 16 }) }),
+          feature
+        ] }, i)) }),
+        /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: highlighted ? "primary" : "outline", className: "w-full", children: "Get started" })
+      ]
+    }
+  );
+}
+function TestimonialCard({ quote, name, role, avatarSrc, className = "" }) {
+  const initials = name.split(" ").map((n) => n[0]).join("").toUpperCase();
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] p-6 shadow-[var(--shadow-xs)] ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[var(--brand-primary)] opacity-30 mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(IconlyQuote, { size: 32 }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-[var(--fg-secondary)] leading-relaxed mb-6", children: [
+      "\u201C",
+      quote,
+      "\u201D"
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Avatar, { src: avatarSrc, initials, size: "sm" }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-[var(--fg)]", children: name }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--fg-muted)]", children: role })
+      ] })
+    ] })
+  ] });
+}
+function FeatureGrid({ features, columns = 3, className = "" }) {
+  const gridCols = {
+    2: "md:grid-cols-2",
+    3: "md:grid-cols-3",
+    4: "md:grid-cols-2 lg:grid-cols-4"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid grid-cols-1 ${gridCols[columns]} gap-6 ${className}`, children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: "rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] p-6 transition-all duration-[var(--transition-base)] hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-[var(--radius-lg)] bg-[var(--brand-primary)]/10 flex items-center justify-center text-[var(--brand-primary)] mb-4", children: feature.icon }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold text-[var(--fg)] mb-1.5", children: feature.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--fg-muted)] leading-relaxed", children: feature.description })
+      ]
+    },
+    i
+  )) });
+}
+var defaultMenuItems = [
+  "\u0413\u043B\u0430\u0432\u043D\u0430\u044F",
+  "\u041C\u043E\u0438 \u043A\u0443\u0440\u0441\u044B",
+  "\u0414\u043E\u0440\u043E\u0436\u043D\u0430\u044F \u043A\u0430\u0440\u0442\u0430",
+  "\u0414\u043E\u0441\u0442\u0438\u0436\u0435\u043D\u0438\u044F",
+  "\u0422\u0430\u0431\u043B\u0438\u0446\u0430 \u043B\u0438\u0434\u0435\u0440\u043E\u0432",
+  "\u041F\u0435\u0441\u043E\u0447\u043D\u0438\u0446\u0430",
+  "\u041D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0438"
+];
+var courseMenuItems = [
+  "\u0413\u043B\u0430\u0432\u043D\u0430\u044F",
+  "\u041E\u0431\u0437\u043E\u0440",
+  "\u041E\u0442\u0437\u044B\u0432\u044B",
+  "\u0424\u0443\u043D\u043A\u0446\u0438\u043E\u043D\u0430\u043B",
+  "\u0421\u0442\u043E\u0438\u043C\u043E\u0441\u0442\u044C",
+  "\u0421\u043E\u0446. \u043F\u0440\u043E\u0433\u0440\u0430\u043C\u043C\u0430",
+  "\u041A\u043E\u043D\u0442\u0430\u043A\u0442\u044B"
+];
+function Sidebar({ type = "menu", menuItems, footer, className = "" }) {
+  const items = menuItems || (type === "courseSubmenu" ? courseMenuItems : defaultMenuItems);
+  const [active, setActive] = react.useState(0);
+  const width = type === "courseSubmenu" ? "w-[340px]" : "w-[240px]";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "aside",
+    {
+      className: `bg-[var(--bg)] border-r border-[var(--border-color)] flex flex-col justify-between p-8 shrink-0 h-full ${width} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("nav", { className: "flex flex-col gap-1 items-start", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          MenuItem,
+          {
+            text: item,
+            active: i === active,
+            onClick: () => setActive(i)
+          },
+          `${item}-${i}`
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 w-full", children: [
+          type === "menu" && footer,
+          /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[10px] text-[var(--fg-muted)] tracking-[-0.2px]", children: [
+            "kapustin.cc, 2026 ",
+            /* @__PURE__ */ jsxRuntime.jsx("br", {}),
+            "\u0418\u041F \u041A\u0430\u043F\u0443\u0441\u0442\u0438\u043D \u0414.\u0412., \u0418\u041D\u041D 7721250201"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+var HOLE_R = 4;
+var HOLE_SP = 16;
+function buildStampMask(w, h) {
+  const r = HOLE_R;
+  const sp = HOLE_SP;
+  let circles = "";
+  for (let x = sp / 2; x < w; x += sp) circles += `<circle cx="${x}" cy="0" r="${r}"/>`;
+  for (let x = sp / 2; x < w; x += sp) circles += `<circle cx="${x}" cy="${h}" r="${r}"/>`;
+  for (let y = sp / 2; y < h; y += sp) circles += `<circle cx="0" cy="${y}" r="${r}"/>`;
+  for (let y = sp / 2; y < h; y += sp) circles += `<circle cx="${w}" cy="${y}" r="${r}"/>`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" width="${w}" height="${h}">
+    <defs><mask id="m"><rect width="${w}" height="${h}" fill="white"/>${circles}</mask></defs>
+    <rect width="${w}" height="${h}" fill="white" mask="url(#m)"/>
+  </svg>`;
+}
+function CardContent({
+  title,
+  description,
+  buttonText,
+  buttonVariant = "primary",
+  image,
+  icons,
+  onButtonClick,
+  isStamp
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    image && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative w-full aspect-[16/9] overflow-hidden ${isStamp ? "" : "rounded-t-[16px]"}`, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: image, alt: title, className: "absolute inset-0 w-full h-full object-cover" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `bg-[var(--bg)] overflow-hidden flex flex-col justify-between px-[25px] pt-[25px] pb-[21px] flex-1 min-h-[220px] relative ${isStamp ? "" : `border border-[var(--bg-tertiary)] shadow-[var(--shadow-md)] ${image ? "rounded-b-[16px]" : "rounded-[16px]"}`}`,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3 pr-8", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-[var(--fg-secondary)] tracking-[-0.25px]", children: title }),
+            /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] text-[var(--fg-muted)] tracking-[-0.25px] leading-normal", children: description })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between mt-5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-1", children: icons }),
+            /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: buttonVariant === "outline" ? "outline" : "primary", size: "sm", onClick: onButtonClick, children: buttonText })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function AppCard(_a) {
+  var _b = _a, {
+    variant = "default",
+    className = ""
+  } = _b, contentProps = __objRest(_b, [
+    "variant",
+    "className"
+  ]);
+  if (variant === "default") {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `flex flex-col w-[320px] ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, __spreadProps(__spreadValues({}, contentProps), { isStamp: false })) });
+  }
+  const padded = variant === "stamp-padded";
+  return /* @__PURE__ */ jsxRuntime.jsx(StampWrapper, { className, padded, children: /* @__PURE__ */ jsxRuntime.jsx(CardContent, __spreadProps(__spreadValues({}, contentProps), { isStamp: true })) });
+}
+var STAMP_PADDING = 12;
+function StampWrapper({ children, className, padded }) {
+  const ref = react.useRef(null);
+  const [maskUrl, setMaskUrl] = react.useState(null);
+  const build = react.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    if (w === 0 || h === 0) return;
+    setMaskUrl(`data:image/svg+xml;base64,${btoa(buildStampMask(w, h))}`);
+  }, []);
+  react.useEffect(() => {
+    const frame = requestAnimationFrame(() => build());
+    const ro = new ResizeObserver(() => build());
+    if (ref.current) ro.observe(ref.current);
+    return () => {
+      cancelAnimationFrame(frame);
+      ro.disconnect();
+    };
+  }, [build]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: `flex flex-col w-[320px] relative ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { filter: "drop-shadow(0 1px 3px rgba(0,0,0,0.15)) drop-shadow(0 4px 12px rgba(0,0,0,0.12))" }, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        WebkitMaskImage: maskUrl ? `url("${maskUrl}")` : void 0,
+        maskImage: maskUrl ? `url("${maskUrl}")` : void 0,
+        WebkitMaskSize: "100% 100%",
+        maskSize: "100% 100%"
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-[var(--bg)]", style: padded ? { padding: STAMP_PADDING } : void 0, children })
+    }
+  ) }) });
+}
+function AppTopLine({
+  promoText = "\u0412\u0430\u043C \u0434\u043E\u0441\u0442\u0443\u043F\u043D\u0430 \u0441\u043A\u0438\u0434\u043A\u0430 10% \u043D\u0430 \u0432\u0441\u0435 \u043F\u043B\u0430\u0442\u043D\u044B\u0435 \u043A\u0443\u0440\u0441\u044B",
+  promoButtonText = "\u0421\u043C\u043E\u0442\u0440\u0435\u0442\u044C",
+  stats = [
+    { value: "232", suffix: "XP" },
+    { value: "1081", suffix: "\u20BD" },
+    { value: "72", suffix: "D" },
+    { value: "10 081", suffix: "Cr" }
+  ],
+  avatarSrc,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `bg-[var(--bg)] flex items-center justify-between w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TopPromo, { text: promoText, buttonText: promoButtonText }),
+    /* @__PURE__ */ jsxRuntime.jsx(ProfileNav, { stats, avatarSrc })
+  ] });
+}
+function EmptyState({ icon, title, description, action, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] p-8 shadow-[var(--shadow-xs)] flex flex-col items-center text-center ${className}`, children: [
+    icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-[var(--fg-muted)] mb-4", children: icon }),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-lg font-semibold text-[var(--fg)]", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[13px] text-[var(--fg-muted)] tracking-[-0.25px] mt-1 max-w-sm", children: description }),
+    action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-5", children: action })
+  ] });
+}
+function HeroSection({
+  eyebrow,
+  title,
+  subtitle,
+  actions,
+  media,
+  align = "center",
+  size = "default",
+  className = ""
+}) {
+  const isCenter = align === "center";
+  const isCompact = size === "compact";
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `relative overflow-hidden ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 pointer-events-none", "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-0 left-1/2 -translate-x-1/2 w-[800px] h-[600px] bg-[radial-gradient(ellipse_at_center,var(--brand-primary)_0%,transparent_70%)] opacity-[0.04]" }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `relative ${isCompact ? "py-16 md:py-20" : "py-20 md:py-32"}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `max-w-4xl ${isCenter ? "mx-auto text-center" : ""}`, children: [
+        eyebrow && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mb-4 md:mb-5 ${isCenter ? "flex justify-center" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-[0.08em] bg-[var(--brand-primary)]/10 text-[var(--brand-primary)] border border-[var(--brand-primary)]/15", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--brand-primary)] animate-pulse" }),
+          eyebrow
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("h1", { className: `text-[clamp(2rem,5vw,3.75rem)] font-bold leading-[1.08] tracking-[-0.035em] text-[var(--fg)] text-balance`, children: title }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-5 md:mt-6 text-base md:text-lg text-[var(--fg-secondary)] leading-relaxed max-w-2xl ${isCenter ? "mx-auto" : ""}`, children: subtitle }),
+        actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mt-8 md:mt-10 flex flex-wrap gap-3 ${isCenter ? "justify-center" : ""}`, children: actions })
+      ] }),
+      media && /* @__PURE__ */ jsxRuntime.jsx("div", { className: `mt-12 md:mt-16 ${isCenter ? "max-w-5xl mx-auto" : "max-w-4xl"}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[var(--radius-xl)] border border-[var(--border-color)] shadow-[var(--shadow-xl)] overflow-hidden bg-[var(--bg-secondary)]", children: media }) })
+    ] })
+  ] });
+}
+function LogoCloud({
+  label = "Trusted by teams at",
+  logos,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `py-10 md:py-14 ${className}`, children: [
+    label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-center text-[11px] font-semibold uppercase tracking-[0.1em] text-[var(--fg-muted)] mb-8", children: label }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-x-10 gap-y-6 md:gap-x-14", children: logos.map((logo) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 opacity-40 hover:opacity-70 transition-opacity duration-[var(--transition-base)]", children: logo.src ? (
+      // eslint-disable-next-line @next/next/no-img-element
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "img",
+        {
+          src: logo.src,
+          alt: logo.name,
+          width: logo.width || 100,
+          className: "h-6 md:h-7 w-auto object-contain logo-img"
+        }
+      )
+    ) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm md:text-base font-bold tracking-[-0.02em] text-[var(--fg)] select-none", children: logo.name }) }, logo.name)) })
+  ] });
+}
+function StatsBar({ stats, variant = "inline", className = "" }) {
+  if (variant === "cards") {
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-10 md:py-14 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-2 md:grid-cols-4 gap-4", children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] p-5 md:p-6 text-center transition-all duration-[var(--transition-base)] hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5",
+        children: [
+          stat.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center mb-3 text-[var(--brand-primary)]", children: stat.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl md:text-3xl font-bold text-[var(--fg)] tracking-[-0.03em] tabular-nums", children: stat.value }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-[13px] text-[var(--fg-muted)] tracking-[-0.25px]", children: stat.label })
+        ]
+      },
+      i
+    )) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-10 md:py-14 border-y border-[var(--border-color)] ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-wrap items-center justify-center gap-8 md:gap-16", children: stats.map((stat, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-2xl md:text-3xl font-bold text-[var(--fg)] tracking-[-0.03em] tabular-nums", children: stat.value }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 text-[13px] text-[var(--fg-muted)] tracking-[-0.25px]", children: stat.label })
+  ] }, i)) }) });
+}
+function CTASection({
+  title,
+  description,
+  actions,
+  variant = "default",
+  className = ""
+}) {
+  const variantStyles5 = {
+    default: "py-16 md:py-24",
+    filled: "py-12 md:py-16 px-6 md:px-12 rounded-[var(--radius-xl)] bg-[var(--fg)] text-[var(--bg)]",
+    bordered: "py-12 md:py-16 px-6 md:px-12 rounded-[var(--radius-xl)] border-2 border-dashed border-[var(--border-color-strong)]"
+  };
+  const isFilled = variant === "filled";
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `${variantStyles5[variant]} ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-2xl mx-auto text-center", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "h2",
+      {
+        className: `text-2xl md:text-4xl font-bold tracking-[-0.03em] leading-[1.1] ${isFilled ? "text-[var(--bg)]" : "text-[var(--fg)]"}`,
+        children: title
+      }
+    ),
+    description && /* @__PURE__ */ jsxRuntime.jsx(
+      "p",
+      {
+        className: `mt-4 text-base leading-relaxed ${isFilled ? "text-[var(--bg)]/70" : "text-[var(--fg-secondary)]"}`,
+        children: description
+      }
+    ),
+    actions && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-8 flex flex-wrap gap-3 justify-center", children: actions })
+  ] }) });
+}
+function BentoGrid({ items, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-10 md:py-14 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: items.map((item, i) => {
+    const colSpanClass = item.span === 2 ? "md:col-span-2" : "";
+    const rowSpanClass = item.rowSpan === 2 ? "md:row-span-2" : "";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: `group relative rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] overflow-hidden transition-all duration-[var(--transition-base)] hover:shadow-[var(--shadow-md)] hover:border-[var(--border-color-strong)] ${colSpanClass} ${rowSpanClass} ${item.className || ""}`,
+        children: [
+          item.media && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full overflow-hidden", children: item.media }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `p-5 md:p-6 ${item.rowSpan === 2 ? "flex flex-col h-full" : ""}`, children: [
+            item.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-9 h-9 rounded-[var(--radius-md)] bg-[var(--brand-primary)]/10 flex items-center justify-center text-[var(--brand-primary)] mb-3.5", children: item.icon }),
+            /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[15px] font-semibold text-[var(--fg)] tracking-[-0.01em]", children: item.title }),
+            item.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1.5 text-[13px] text-[var(--fg-muted)] leading-relaxed tracking-[-0.25px]", children: item.description })
+          ] })
+        ]
+      },
+      i
+    );
+  }) }) });
+}
+function FAQSection({
+  title = "Frequently asked questions",
+  subtitle,
+  items,
+  className = ""
+}) {
+  const [openIndex, setOpenIndex] = react.useState(null);
+  const toggle = (i) => setOpenIndex(openIndex === i ? null : i);
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-14 md:py-20 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-2xl mx-auto", children: [
+    title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl md:text-3xl font-bold text-[var(--fg)] tracking-[-0.03em] text-center", children: title }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-base text-[var(--fg-secondary)] text-center", children: subtitle }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `${title || subtitle ? "mt-10" : ""} divide-y divide-[var(--border-color)]`, children: items.map((item, i) => {
+      const isOpen = openIndex === i;
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "py-5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => toggle(i),
+            className: "w-full flex items-center justify-between gap-4 text-left cursor-pointer group",
+            "aria-expanded": isOpen,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[15px] font-medium text-[var(--fg)] group-hover:text-[var(--brand-primary)] transition-colors", children: item.question }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: `shrink-0 w-5 h-5 flex items-center justify-center text-[var(--fg-muted)] transition-transform duration-200 ${isOpen ? "rotate-45" : ""}`,
+                  children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 1v12M1 7h12", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" }) })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: `overflow-hidden transition-all duration-200 ease-out ${isOpen ? "max-h-96 opacity-100 mt-3" : "max-h-0 opacity-0"}`,
+            children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] text-[var(--fg-secondary)] leading-relaxed pr-8", children: item.answer })
+          }
+        )
+      ] }, i);
+    }) })
+  ] }) });
+}
+function ComparisonTable({ columns, rows, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-10 md:py-14 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-x-auto -mx-4 px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("table", { className: "w-full border-collapse min-w-[500px]", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("th", { className: "text-left py-4 px-4 text-[13px] font-medium text-[var(--fg-muted)] tracking-[-0.25px] w-[40%]" }),
+      columns.map((col, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "th",
+        {
+          className: `py-4 px-4 text-center text-sm font-semibold ${col.highlighted ? "text-[var(--brand-primary)] bg-[var(--brand-primary)]/5 rounded-t-[var(--radius-lg)]" : "text-[var(--fg)]"}`,
+          children: col.label
+        },
+        i
+      ))
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: rows.map((row, ri) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { className: "border-t border-[var(--border-color)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("td", { className: "py-3.5 px-4 text-[14px] text-[var(--fg-secondary)]", children: row.feature }),
+      row.values.map((val, vi) => {
+        var _a;
+        const isHighlighted = (_a = columns[vi]) == null ? void 0 : _a.highlighted;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "td",
+          {
+            className: `py-3.5 px-4 text-center ${isHighlighted ? "bg-[var(--brand-primary)]/5" : ""} ${ri === rows.length - 1 && isHighlighted ? "rounded-b-[var(--radius-lg)]" : ""}`,
+            children: typeof val === "boolean" ? val ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex text-[var(--color-success)]", children: /* @__PURE__ */ jsxRuntime.jsx(IconlyCheck, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex text-[var(--fg-muted)]/40", children: /* @__PURE__ */ jsxRuntime.jsx(IconlyClose, { size: 18 }) }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium text-[var(--fg)]", children: val })
+          },
+          vi
+        );
+      })
+    ] }, ri)) })
+  ] }) }) });
+}
+function PromoBentoCard({ pill, title, description, cta, media, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `relative flex flex-col rounded-[clamp(24px,3vw,48px)] bg-[var(--bg-secondary)] overflow-hidden group transition-shadow duration-[var(--transition-slow)] hover:shadow-[var(--shadow-lg)] ${className}`,
+      children: [
+        media && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1 min-h-[240px] md:min-h-[320px] overflow-hidden", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center p-6", children: media }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "absolute bottom-0 left-0 right-0 h-[140px] pointer-events-none",
+              style: {
+                background: "linear-gradient(to top, var(--bg-secondary) 0%, transparent 100%)"
+              }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col gap-4 p-6 md:p-8 pt-0", children: [
+          pill && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "inline-flex items-center gap-2 px-4 py-2 rounded-full bg-[var(--bg)] border border-[var(--border-color)] text-sm font-semibold text-[var(--fg)]", children: [
+            pill.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-5 h-5 flex items-center justify-center", children: pill.icon }),
+            pill.label
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-xl md:text-[28px] leading-[1.2] tracking-[-0.02em] text-[var(--fg)]", children: title }),
+          description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm md:text-base leading-relaxed text-[var(--fg-secondary)] max-w-[85%]", children: description }),
+          cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1", children: /* @__PURE__ */ jsxRuntime.jsx(
+            Button,
+            {
+              variant: "outline",
+              onClick: cta.onClick,
+              icon: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 3l5 5-5 5" }) }),
+              children: cta.label
+            }
+          ) })
+        ] })
+      ]
+    }
+  );
+}
+function PromoBento({ heading, subtitle, items, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `py-16 md:py-24 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-10 md:mb-14 max-w-xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[clamp(1.75rem,4vw,2.75rem)] font-bold leading-[1.1] tracking-[-0.03em] text-[var(--fg)] text-balance", children: heading }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-base text-[var(--fg-secondary)] leading-relaxed", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-9", children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx(PromoBentoCard, __spreadValues({}, item), i)) })
+  ] });
+}
+function PromoShowcase({ heading, steps, className = "" }) {
+  const [activeIndex, setActiveIndex] = react.useState(0);
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `py-16 md:py-24 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-10 md:mb-14 max-w-xl", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[clamp(1.75rem,4vw,2.75rem)] font-bold leading-[1.1] tracking-[-0.03em] text-[var(--fg)] text-balance", children: heading }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-6 md:gap-8", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex gap-1 p-1 rounded-full bg-[var(--bg-secondary)] border border-[var(--border-color)] w-fit", children: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          onClick: () => setActiveIndex(i),
+          className: `px-5 py-2.5 rounded-full text-sm font-medium transition-all duration-[var(--transition-base)] cursor-pointer ${i === activeIndex ? "bg-[var(--fg)] text-[var(--bg)] shadow-[var(--shadow-sm)]" : "text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--bg-tertiary)]"}`,
+          children: step.label
+        },
+        i
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative rounded-[clamp(16px,2vw,32px)] border border-[var(--border-color)] bg-[var(--bg-secondary)] overflow-hidden min-h-[300px] md:min-h-[480px]", children: steps.map((step, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: `absolute inset-0 transition-opacity duration-300 ease-out ${i === activeIndex ? "opacity-100 z-10" : "opacity-0 z-0 pointer-events-none"}`,
+          children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center p-6 md:p-10", children: step.content })
+        },
+        i
+      )) })
+    ] })
+  ] });
+}
+function PromoSplit({
+  heading,
+  description,
+  features,
+  media,
+  mediaPosition = "right",
+  className = ""
+}) {
+  const isLeft = mediaPosition === "left";
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-16 md:py-24 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 items-center ${isLeft ? "lg:[direction:rtl]" : ""}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-6 ${isLeft ? "lg:[direction:ltr]" : ""}`, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[clamp(1.75rem,4vw,2.75rem)] font-bold leading-[1.1] tracking-[-0.03em] text-[var(--fg)] text-balance", children: heading }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-base md:text-lg leading-relaxed text-[var(--fg-secondary)]", children: description }),
+      features && features.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col gap-5 mt-2", children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-[var(--fg)]", children: feature.title }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--fg-secondary)] leading-relaxed", children: feature.description })
+      ] }, i)) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `relative ${isLeft ? "lg:[direction:ltr]" : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative rounded-[clamp(16px,2vw,32px)] bg-[var(--bg-secondary)] border border-[var(--border-color)] overflow-hidden min-h-[280px] md:min-h-[380px]", children: media ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center p-6", children: media }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 rounded-full bg-[var(--bg-tertiary)] flex items-center justify-center", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", stroke: "var(--fg-muted)", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+      /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m21 15-5-5L5 21" })
+    ] }) }) }) }) })
+  ] }) });
+}
+function PromoTrustGrid({ heading, features, media, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `py-16 md:py-24 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-10 md:mb-14", children: /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[clamp(1.75rem,4vw,2.75rem)] font-bold leading-[1.1] tracking-[-0.03em] text-[var(--fg)] text-balance", children: heading }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-10 md:mb-14", children: features.map((feature, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "group relative flex flex-col gap-3 p-6 md:p-8 rounded-[var(--radius-xl)] bg-[var(--bg)] border border-[var(--border-color)] transition-all duration-[var(--transition-base)] hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5",
+        children: [
+          feature.icon && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-10 h-10 rounded-[var(--radius-lg)] bg-[var(--fg)]/5 flex items-center justify-center text-[var(--fg)] mb-1", children: feature.icon }),
+          /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-base font-semibold text-[var(--fg)] leading-snug", children: feature.title }),
+          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--fg-secondary)] leading-relaxed", children: feature.description })
+        ]
+      },
+      i
+    )) }),
+    media && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative rounded-[clamp(16px,2vw,32px)] bg-[var(--bg-secondary)] border border-[var(--border-color)] overflow-hidden min-h-[280px] md:min-h-[420px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 flex items-center justify-center p-6", children: media }) })
+  ] });
+}
+function PromoDevicesCTA({
+  heading,
+  description,
+  cta,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `py-16 md:py-24 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-2xl mx-auto text-center mb-8 md:mb-10", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[clamp(1.75rem,4vw,2.75rem)] font-bold leading-[1.1] tracking-[-0.03em] text-[var(--fg)] text-balance", children: heading }),
+      description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-4 text-base md:text-lg leading-relaxed text-[var(--fg-secondary)]", children: description }),
+      cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-6 flex justify-center", children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", onClick: cta.onClick, children: cta.label }) })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-end justify-center gap-6 md:gap-10 px-4 md:px-0 max-w-4xl mx-auto", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "hidden md:block relative w-[38%] max-w-[380px]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[16/10] rounded-t-[var(--radius-lg)] border border-b-0 border-[var(--border-color)] bg-[var(--bg-secondary)] overflow-hidden shadow-[var(--shadow-md)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-3 rounded-[var(--radius-md)] bg-[var(--bg-tertiary)]" }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-2.5 bg-[var(--bg-tertiary)] border border-[var(--border-color)] rounded-b-sm" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-1 bg-[var(--bg-tertiary)] border-x border-b border-[var(--border-color)] rounded-b-[var(--radius-sm)] mx-[-4%]" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[40%] md:w-[28%] max-w-[280px]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-[3/4] rounded-[var(--radius-xl)] border-2 border-[var(--border-color)] bg-[var(--bg-secondary)] overflow-hidden shadow-[var(--shadow-lg)]", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-2.5 rounded-[var(--radius-lg)] bg-[var(--bg-tertiary)]" }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative w-[24%] md:w-[14%] max-w-[140px]", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-[9/19] rounded-[clamp(12px,2vw,24px)] border-2 border-[var(--border-color)] bg-[var(--bg-secondary)] overflow-hidden shadow-[var(--shadow-lg)]", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-1.5 left-1/2 -translate-x-1/2 w-[40%] h-[3%] rounded-full bg-[var(--border-color)]" }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-1.5 top-[6%] rounded-[clamp(8px,1.5vw,16px)] bg-[var(--bg-tertiary)]" })
+      ] }) })
+    ] })
+  ] });
+}
+function PromoTestimonials({
+  heading,
+  subtitle,
+  testimonials,
+  media,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: `py-16 md:py-24 ${className}`, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative rounded-[clamp(20px,3vw,40px)] border border-[var(--border-color)] bg-[var(--bg)] overflow-hidden", children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex justify-center pt-10 md:pt-14 pb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex -space-x-3", children: [
+      testimonials.slice(0, 5).map((t, i) => {
+        const initials = t.name.split(" ").map((n) => n[0]).join("").toUpperCase();
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "relative ring-3 ring-[var(--bg)] rounded-full",
+            style: { zIndex: 10 - i },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              Avatar,
+              {
+                size: "md",
+                src: t.avatarSrc,
+                initials
+              }
+            )
+          },
+          i
+        );
+      }),
+      testimonials.length > 5 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative ring-3 ring-[var(--bg)] rounded-full z-0", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "w-10 h-10 rounded-full bg-[var(--bg-tertiary)] flex items-center justify-center text-xs font-semibold text-[var(--fg-secondary)]", children: [
+        "+",
+        testimonials.length - 5
+      ] }) })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center px-6 pb-8 md:pb-10", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[clamp(1.75rem,4vw,2.75rem)] font-bold leading-[1.1] tracking-[-0.03em] text-[var(--fg)] text-balance", children: heading }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-3 text-base text-[var(--fg-secondary)] leading-relaxed max-w-lg mx-auto", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 md:px-10 pb-8 md:pb-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-5", children: testimonials.map((t, i) => {
+      const initials = t.name.split(" ").map((n) => n[0]).join("").toUpperCase();
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "flex flex-col gap-4 p-5 md:p-6 rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] transition-shadow duration-[var(--transition-base)] hover:shadow-[var(--shadow-md)]",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm text-[var(--fg-secondary)] leading-relaxed flex-1", children: [
+              "\u201C",
+              t.quote,
+              "\u201D"
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3 pt-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size: "sm", src: t.avatarSrc, initials }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-[var(--fg)]", children: t.name }),
+                /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-[var(--fg-muted)]", children: t.role })
+              ] })
+            ] })
+          ]
+        },
+        i
+      );
+    }) }) }),
+    media && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 md:px-10 pb-8 md:pb-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "rounded-[var(--radius-xl)] bg-[var(--bg-secondary)] overflow-hidden", children: media }) })
+  ] }) });
+}
+function PromoHero({
+  title,
+  subtitle,
+  cta,
+  secondaryCta,
+  media,
+  variant = "dark",
+  className = ""
+}) {
+  const variantStyles5 = {
+    dark: "bg-[var(--neutral-900)] text-white",
+    light: "bg-[var(--bg)] text-[var(--fg)]",
+    gradient: "bg-gradient-to-br from-[var(--neutral-900)] via-[var(--neutral-800)] to-[var(--neutral-700)] text-white"
+  };
+  const subtitleColor = {
+    dark: "text-white/70",
+    light: "text-[var(--fg-secondary)]",
+    gradient: "text-white/70"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: `relative overflow-hidden rounded-[clamp(20px,3vw,40px)] min-h-[480px] md:min-h-[600px] flex items-center ${variantStyles5[variant]} ${className}`,
+      children: [
+        variant !== "light" && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 pointer-events-none", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute top-[-20%] right-[-10%] w-[600px] h-[600px] rounded-full bg-white/[0.03] blur-[100px]" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute bottom-[-30%] left-[-5%] w-[400px] h-[400px] rounded-full bg-white/[0.02] blur-[80px]" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 grid grid-cols-1 lg:grid-cols-2 gap-10 md:gap-16 w-full p-8 md:p-12 lg:p-16 items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-5 md:gap-6", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[clamp(2.25rem,5.5vw,5rem)] font-bold leading-[0.95] tracking-[-0.04em] text-balance", children: title }),
+            subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-base md:text-lg leading-relaxed max-w-lg ${subtitleColor[variant]}`, children: subtitle }),
+            (cta || secondaryCta) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-wrap gap-3 mt-2", children: [
+              cta && /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: variant === "light" ? "primary" : "outline",
+                  onClick: cta.onClick,
+                  className: variant !== "light" ? "border-white/20 text-white hover:bg-white/10" : "",
+                  children: cta.label
+                }
+              ),
+              secondaryCta && /* @__PURE__ */ jsxRuntime.jsx(
+                Button,
+                {
+                  variant: "ghost",
+                  onClick: secondaryCta.onClick,
+                  className: variant !== "light" ? "text-white/70 hover:text-white hover:bg-white/5" : "",
+                  children: secondaryCta.label
+                }
+              )
+            ] })
+          ] }),
+          media && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative flex items-center justify-center", children: media })
+        ] })
+      ]
+    }
+  );
+}
+function PromoPricing({
+  heading,
+  subtitle,
+  tiers,
+  variant = "light",
+  className = ""
+}) {
+  const isDark = variant === "dark";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: `py-16 md:py-24 px-6 md:px-12 rounded-[clamp(20px,3vw,40px)] ${isDark ? "bg-[var(--neutral-900)] text-white" : "bg-[var(--bg)]"} ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-10 md:mb-14 max-w-2xl mx-auto", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "h2",
+            {
+              className: `text-[clamp(2rem,5vw,4.75rem)] font-bold leading-[0.95] tracking-[-0.04em] text-balance ${isDark ? "text-white" : "text-[var(--fg)]"}`,
+              children: heading
+            }
+          ),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `mt-4 text-base md:text-lg leading-relaxed ${isDark ? "text-white/60" : "text-[var(--fg-secondary)]"}`, children: subtitle })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 md:gap-6 max-w-5xl mx-auto", children: tiers.map((tier, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: `relative flex flex-col rounded-[var(--radius-xl)] p-6 md:p-8 transition-all duration-[var(--transition-base)] ${tier.highlighted ? isDark ? "bg-white text-[var(--neutral-900)] shadow-[0_0_60px_rgba(255,255,255,0.1)]" : "bg-[var(--fg)] text-[var(--bg)] shadow-[var(--shadow-xl)]" : isDark ? "bg-white/[0.06] border border-white/10 text-white hover:bg-white/[0.1]" : "bg-[var(--bg)] border border-[var(--border-color)] hover:shadow-[var(--shadow-md)] hover:-translate-y-0.5"}`,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4", children: /* @__PURE__ */ jsxRuntime.jsx(
+                "h3",
+                {
+                  className: `text-sm font-semibold uppercase tracking-[0.06em] ${tier.highlighted ? isDark ? "text-[var(--neutral-500)]" : "text-[var(--bg)]/60" : isDark ? "text-white/50" : "text-[var(--fg-muted)]"}`,
+                  children: tier.name
+                }
+              ) }),
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-2", children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-4xl md:text-5xl font-bold tracking-[-0.03em]", children: tier.price }),
+                tier.period && /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-sm ml-1 ${tier.highlighted ? isDark ? "text-[var(--neutral-500)]" : "text-[var(--bg)]/50" : isDark ? "text-white/40" : "text-[var(--fg-muted)]"}`, children: tier.period })
+              ] }),
+              tier.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm mb-6 ${tier.highlighted ? isDark ? "text-[var(--neutral-600)]" : "text-[var(--bg)]/60" : isDark ? "text-white/50" : "text-[var(--fg-secondary)]"}`, children: tier.description }),
+              /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "flex flex-col gap-2.5 mb-8 flex-1", children: tier.features.map((feature, fi) => /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "flex items-start gap-2.5 text-sm", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "svg",
+                  {
+                    width: "16",
+                    height: "16",
+                    viewBox: "0 0 16 16",
+                    fill: "none",
+                    className: `shrink-0 mt-0.5 ${tier.highlighted ? isDark ? "text-[var(--color-success)]" : "text-[var(--color-success-light)]" : isDark ? "text-white/40" : "text-[var(--color-success)]"}`,
+                    children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8.5L6.5 11.5L12.5 4.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${tier.highlighted ? isDark ? "text-[var(--neutral-700)]" : "text-[var(--bg)]/80" : isDark ? "text-white/70" : "text-[var(--fg-secondary)]"}`, children: feature })
+              ] }, fi)) }),
+              tier.cta && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children: tier.cta })
+            ]
+          },
+          i
+        )) })
+      ]
+    }
+  );
+}
+function PromoActionCards({
+  heading,
+  subtitle,
+  cards,
+  columns = 3,
+  className = ""
+}) {
+  const gridCols = columns === 2 ? "md:grid-cols-2" : "md:grid-cols-2 lg:grid-cols-3";
+  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: `py-16 md:py-24 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mb-10 md:mb-14 max-w-xl", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-[clamp(1.25rem,3vw,1.5rem)] font-medium leading-[1.3] tracking-[-0.01em] text-[var(--fg-secondary)] text-balance", children: heading }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-2 text-sm text-[var(--fg-muted)]", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid grid-cols-1 ${gridCols} gap-4 md:gap-5`, children: cards.map((card, i) => {
+      var _a;
+      return /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          className: "group flex flex-col gap-4 p-5 md:p-6 rounded-[var(--radius-xl)] border border-[var(--border-color)] bg-[var(--bg)] transition-all duration-[var(--transition-base)] hover:shadow-[var(--shadow-md)] hover:border-[var(--border-color-strong)]",
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 flex-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-[15px] font-semibold text-[var(--fg)] leading-snug", children: card.title }),
+              /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-[var(--fg-secondary)] leading-relaxed", children: card.description })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-1", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2", children: (_a = card.icons) == null ? void 0 : _a.map((icon, ii) => /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  className: "w-7 h-7 rounded-full bg-[var(--bg-secondary)] flex items-center justify-center text-[var(--fg-secondary)]",
+                  children: icon
+                },
+                ii
+              )) }),
+              card.cta && /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  onClick: card.cta.onClick,
+                  className: "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium bg-[var(--fg)] text-[var(--bg)] hover:opacity-90 transition-opacity cursor-pointer",
+                  children: [
+                    card.cta.label,
+                    /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "11", height: "11", viewBox: "0 0 12 12", fill: "none", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 2.5l4 3.5-4 3.5" }) })
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        i
+      );
+    }) })
+  ] });
+}
+var DEFAULT_BG = "https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1600&h=900&fit=crop&q=80";
+function ArticleHero({
+  category,
+  title,
+  subtitle,
+  backgroundImage,
+  logo,
+  nav,
+  className = ""
+}) {
+  const bgSrc = backgroundImage != null ? backgroundImage : DEFAULT_BG;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "section",
+    {
+      className: `relative w-full rounded-[var(--radius-xl)] overflow-hidden min-h-[320px] md:min-h-[480px] flex flex-col justify-between p-5 md:p-10 ${className}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute inset-0 pointer-events-none", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "img",
+            {
+              src: bgSrc,
+              alt: "",
+              className: "absolute inset-0 w-full h-full object-cover"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "absolute inset-0 bg-black/40" })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 flex items-center w-full", children: [
+          logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 pr-4 md:pr-10", children: logo }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-px bg-white/30" }),
+          nav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 pl-4 md:pl-10", children: nav })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative z-10 max-w-[500px]", children: [
+          category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg text-white leading-7 mb-2", children: category }),
+          /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-[32px] leading-[34px] md:text-[60px] md:leading-[60px] font-normal text-white tracking-[-2px] md:tracking-[-3px] mb-4", children: title }),
+          subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-lg text-white/90 leading-[22.5px]", children: subtitle })
+        ] })
+      ]
+    }
+  );
+}
+function ArticleBody({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: `text-[16px] leading-7 text-[var(--fg-secondary)] font-normal ${className}`,
+      children
+    }
+  );
+}
+var levelStyles = {
+  2: "text-[24px] leading-8 font-bold pt-12",
+  3: "text-[20px] leading-8 font-semibold pt-8"
+};
+function ArticleHeading({
+  level = 2,
+  children,
+  subtitle,
+  action,
+  className = ""
+}) {
+  const Tag2 = `h${level}`;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex flex-col gap-1 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Tag2, { className: `text-[var(--fg)] tracking-tight ${levelStyles[level]}`, children }),
+      action && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: action })
+    ] }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] leading-5 text-[var(--fg-muted)]", children: subtitle })
+  ] });
+}
+function ArticleFigure({
+  src,
+  alt = "",
+  caption,
+  legend,
+  height = 384,
+  children,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: `w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "w-full rounded-[var(--radius-lg)] overflow-hidden bg-[var(--bg-secondary)] flex items-center justify-center",
+        style: { minHeight: height },
+        children: src ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsxRuntime.jsx("img", { src, alt, className: "w-full h-full object-contain" })
+        ) : children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full p-4", children }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center gap-2 text-[var(--fg-muted)]", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+            /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 16l5-5 4 4 4-6 5 7" })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm", children: "Figure placeholder" })
+        ] })
+      }
+    ),
+    legend && legend.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 mt-3 flex-wrap", children: legend.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "span",
+        {
+          className: "w-3 h-3 rounded-sm shrink-0",
+          style: { backgroundColor: item.color }
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] leading-4 text-[var(--fg-secondary)]", children: item.label })
+    ] }, item.label)) }),
+    caption && /* @__PURE__ */ jsxRuntime.jsx("figcaption", { className: "mt-2 text-[14px] leading-5 text-[var(--fg-muted)]", children: caption })
+  ] });
+}
+function ArticleTable({
+  columns,
+  rows,
+  initialVisible,
+  showRank = false,
+  className = ""
+}) {
+  const [expanded, setExpanded] = react.useState(false);
+  const limit = initialVisible != null ? initialVisible : rows.length;
+  const visibleRows = expanded ? rows : rows.slice(0, limit);
+  const hiddenCount = rows.length - limit;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center border-b border-[var(--border-color)] pb-px", children: [
+      showRank && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[120px] shrink-0" }),
+      columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 px-4 py-3.5", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] leading-5 font-medium text-[var(--fg-muted)]", children: col.label }) }, col.key))
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { children: visibleRows.map((row, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "flex items-center gap-4 border-b border-[var(--border-color)] last:border-b-0",
+        children: [
+          showRank && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-[120px] shrink-0 px-4 py-4", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] leading-5 text-[var(--fg-muted)]", children: i + 1 }) }),
+          columns.map((col) => {
+            const value = row[col.key];
+            const hasBadge = row._badge && row._badgeColumn === col.key;
+            return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 px-4 py-4 flex items-center gap-3", children: [
+              col.render ? col.render(value, row) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[14px] leading-5 text-[var(--fg-secondary)]", children: String(value != null ? value : "") }),
+              hasBadge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center px-2.5 py-0.5 rounded-full text-[12px] leading-4 font-semibold bg-[var(--bg-tertiary)] text-[var(--fg)]", children: row._badge })
+            ] }, col.key);
+          })
+        ]
+      },
+      i
+    )) }),
+    hiddenCount > 0 && !expanded && /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        onClick: () => setExpanded(true),
+        className: "mt-4 text-[14px] leading-5 font-medium text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors cursor-pointer",
+        children: [
+          "Show ",
+          hiddenCount,
+          " more"
+        ]
+      }
+    )
+  ] });
+}
+function ArticleList({
+  variant = "unordered",
+  items,
+  className = ""
+}) {
+  const Tag2 = variant === "ordered" ? "ol" : "ul";
+  const markerClass = variant === "ordered" ? "list-decimal" : "list-disc";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Tag2,
+    {
+      className: `pl-[26px] flex flex-col gap-2 text-[16px] leading-7 text-[var(--fg-secondary)] ${markerClass} ${className}`,
+      children: items.map((item, i) => /* @__PURE__ */ jsxRuntime.jsx("li", { className: "pl-1", children: item }, i))
+    }
+  );
+}
+function ArticleNote({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "p",
+    {
+      className: `text-[16px] leading-7 text-[var(--fg-secondary)] italic ${className}`,
+      children
+    }
+  );
+}
+var roleStyles = {
+  assistant: { bg: "bg-[var(--bg-secondary)]", label: "text-[var(--fg-secondary)]", gradient: "var(--bg-secondary)" },
+  system: { bg: "bg-[var(--bg-tertiary)]", label: "text-[var(--fg-secondary)]", gradient: "var(--bg-tertiary)" },
+  user: { bg: "bg-[var(--bg-secondary)]", label: "text-[var(--fg-secondary)]", gradient: "var(--bg-secondary)" }
+};
+function ArticleChatBlock({
+  role,
+  model,
+  toolCall,
+  children,
+  collapsible = false,
+  collapsedHeight = 160,
+  className = ""
+}) {
+  var _a;
+  const [expanded, setExpanded] = react.useState(false);
+  const styles = (_a = roleStyles[role]) != null ? _a : roleStyles.assistant;
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `w-full rounded-[var(--radius-lg)] overflow-hidden ${styles.bg} ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-2 px-5 pt-4 pb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: `text-[12px] leading-4 ${styles.label}`, children: [
+      role,
+      model && ` \u2022 ${model}`
+    ] }) }),
+    toolCall && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-5 pb-2", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-center gap-1.5 px-3 py-1 rounded-full border border-[var(--border-color)] bg-[var(--bg)]", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-1.5 h-1.5 rounded-full bg-[var(--color-accent)]" }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[13px] font-medium tracking-[-0.25px] text-[var(--fg-secondary)]", children: toolCall })
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-5 h-px bg-[var(--border-color)]" }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: "px-5 py-4 text-[14px] leading-6 text-[var(--fg-secondary)] overflow-hidden transition-all",
+          style: collapsible && !expanded ? { maxHeight: collapsedHeight, overflow: "hidden" } : void 0,
+          children
+        }
+      ),
+      collapsible && !expanded && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "absolute bottom-0 left-0 right-0", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: "h-16 pointer-events-none",
+            style: {
+              background: `linear-gradient(to top, ${styles.gradient}, transparent)`
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: `px-5 pb-4 ${styles.bg}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            onClick: () => setExpanded(true),
+            className: "text-[14px] leading-5 font-medium text-[var(--fg-muted)] hover:text-[var(--fg)] transition-colors cursor-pointer",
+            children: "Show more"
+          }
+        ) })
+      ] })
+    ] })
+  ] });
+}
+function ArticleLinkButton({
+  children,
+  href,
+  onClick,
+  className = ""
+}) {
+  const baseClass = `inline-flex items-center justify-center px-4 py-2 rounded-full bg-[var(--fg)] text-[13px] font-medium tracking-[-0.25px] text-[var(--bg)] border border-[var(--bg)] shadow-[var(--shadow-sm)] hover:opacity-90 active:opacity-80 transition-all duration-[var(--transition-fast)] cursor-pointer ${className}`;
+  if (href) {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: baseClass, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("button", { onClick, className: baseClass, children });
+}
+function ArticleFooter({
+  logo,
+  copyright = `\xA9 ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("footer", { className: `w-full px-20 py-10 flex flex-col gap-10 ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
+      logo && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 pr-10", children: logo }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1 h-px bg-[var(--fg)]" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[14px] leading-5 text-[var(--fg-muted)]", children: copyright })
+  ] });
+}
+function ArticleLayout({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("article", { className: `w-full max-w-[1100px] mx-auto flex flex-col gap-5 ${className}`, children });
+}
+function ArticleWide({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full ${className}`, children });
+}
+function ArticleNarrow({ children, className = "" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `w-full max-w-[720px] ${className}`, children });
+}
+function ChartTooltip({
+  active,
+  payload,
+  label,
+  xLabel,
+  yLabel,
+  valueFormatter
+}) {
+  if (!active || !(payload == null ? void 0 : payload.length)) return null;
+  const fmt = valueFormatter != null ? valueFormatter : ((v) => String(v));
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[var(--bg)] border border-[var(--border-color)] rounded-[var(--radius-md)] shadow-[var(--shadow-md)] px-3 py-2 text-[12px] leading-4", children: [
+    label !== void 0 && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[var(--fg-muted)] mb-1", children: [
+      xLabel ? `${xLabel}: ` : "",
+      label
+    ] }),
+    payload.map((entry, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-2 h-2 rounded-full shrink-0", style: { backgroundColor: entry.color } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[var(--fg-secondary)]", children: entry.name }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-[var(--fg)] ml-auto pl-3", children: yLabel ? `${fmt(entry.value)} ` : fmt(entry.value) })
+    ] }, i))
+  ] });
+}
+function ArticleLineChart({
+  data,
+  series,
+  xKey,
+  xLabel,
+  yLabel,
+  height = 384,
+  valueFormatter,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: `w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, margin: { top: 8, right: 16, bottom: 4, left: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border-color)" }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: xKey,
+          tick: { fontSize: 12, fill: "var(--fg-muted)" },
+          axisLine: { stroke: "var(--border-color)" },
+          tickLine: false,
+          label: xLabel ? { value: xLabel, position: "insideBottom", offset: -2, fontSize: 12, fill: "var(--fg-muted)" } : void 0
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          tick: { fontSize: 12, fill: "var(--fg-muted)" },
+          axisLine: { stroke: "var(--border-color)" },
+          tickLine: false,
+          label: yLabel ? { value: yLabel, angle: -90, position: "insideLeft", offset: 4, fontSize: 12, fill: "var(--fg-muted)" } : void 0
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Tooltip,
+        {
+          content: ({ active, payload, label }) => /* @__PURE__ */ jsxRuntime.jsx(
+            ChartTooltip,
+            {
+              active,
+              payload,
+              label,
+              xLabel,
+              valueFormatter
+            }
+          )
+        }
+      ),
+      series.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Line,
+        {
+          type: "monotone",
+          dataKey: s.dataKey,
+          name: s.name,
+          stroke: s.color,
+          strokeWidth: 2,
+          dot: false,
+          activeDot: { r: 4, strokeWidth: 0, fill: s.color }
+        },
+        s.dataKey
+      ))
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 mt-3 flex-wrap", children: series.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3 h-3 rounded-sm shrink-0", style: { backgroundColor: s.color } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] leading-4 text-[var(--fg-secondary)]", children: s.name })
+    ] }, s.dataKey)) })
+  ] });
+}
+function ArticleBarChart({
+  data,
+  series,
+  xKey,
+  xLabel,
+  yLabel,
+  height = 384,
+  stacked = false,
+  valueFormatter,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("figure", { className: `w-full ${className}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.BarChart, { data, margin: { top: 8, right: 16, bottom: 4, left: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border-color)", vertical: false }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: xKey,
+          tick: { fontSize: 12, fill: "var(--fg-muted)" },
+          axisLine: { stroke: "var(--border-color)" },
+          tickLine: false,
+          label: xLabel ? { value: xLabel, position: "insideBottom", offset: -2, fontSize: 12, fill: "var(--fg-muted)" } : void 0
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          tick: { fontSize: 12, fill: "var(--fg-muted)" },
+          axisLine: { stroke: "var(--border-color)" },
+          tickLine: false,
+          label: yLabel ? { value: yLabel, angle: -90, position: "insideLeft", offset: 4, fontSize: 12, fill: "var(--fg-muted)" } : void 0
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Tooltip,
+        {
+          content: ({ active, payload, label }) => /* @__PURE__ */ jsxRuntime.jsx(
+            ChartTooltip,
+            {
+              active,
+              payload,
+              label,
+              xLabel,
+              valueFormatter
+            }
+          )
+        }
+      ),
+      series.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Bar,
+        {
+          dataKey: s.dataKey,
+          name: s.name,
+          fill: s.color,
+          radius: [4, 4, 0, 0],
+          stackId: stacked ? "stack" : void 0
+        },
+        s.dataKey
+      ))
+    ] }) }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center gap-4 mt-3 flex-wrap", children: series.map((s) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "w-3 h-3 rounded-sm shrink-0", style: { backgroundColor: s.color } }),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-[12px] leading-4 text-[var(--fg-secondary)]", children: s.name })
+    ] }, s.dataKey)) })
+  ] });
+}
+function ArticleScatterChart({
+  data,
+  color = "#818cf8",
+  xLabel,
+  yLabel,
+  height = 384,
+  xScale = "auto",
+  valueFormatter,
+  className = ""
+}) {
+  const colors = data.map((d) => {
+    var _a;
+    return (_a = d.color) != null ? _a : color;
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx("figure", { className: `w-full ${className}`, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.ScatterChart, { margin: { top: 8, right: 16, bottom: 4, left: 8 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.CartesianGrid, { strokeDasharray: "3 3", stroke: "var(--border-color)" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.XAxis,
+      {
+        dataKey: "x",
+        type: "number",
+        scale: xScale,
+        domain: ["auto", "auto"],
+        tick: { fontSize: 12, fill: "var(--fg-muted)" },
+        axisLine: { stroke: "var(--border-color)" },
+        tickLine: false,
+        name: xLabel,
+        label: xLabel ? { value: xLabel, position: "insideBottom", offset: -2, fontSize: 12, fill: "var(--fg-muted)" } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.YAxis,
+      {
+        dataKey: "y",
+        type: "number",
+        tick: { fontSize: 12, fill: "var(--fg-muted)" },
+        axisLine: { stroke: "var(--border-color)" },
+        tickLine: false,
+        name: yLabel,
+        label: yLabel ? { value: yLabel, angle: -90, position: "insideLeft", offset: 4, fontSize: 12, fill: "var(--fg-muted)" } : void 0
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      recharts.Tooltip,
+      {
+        content: ({ active, payload }) => {
+          var _a;
+          if (!active || !(payload == null ? void 0 : payload.length)) return null;
+          const point = (_a = payload[0]) == null ? void 0 : _a.payload;
+          const fmt = valueFormatter != null ? valueFormatter : ((v) => String(v));
+          return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-[var(--bg)] border border-[var(--border-color)] rounded-[var(--radius-md)] shadow-[var(--shadow-md)] px-3 py-2 text-[12px] leading-4", children: [
+            point.label && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium text-[var(--fg)] mb-1", children: point.label }),
+            xLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[var(--fg-secondary)]", children: [
+              xLabel,
+              ": ",
+              fmt(point.x)
+            ] }),
+            yLabel && /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-[var(--fg-secondary)]", children: [
+              yLabel,
+              ": ",
+              fmt(point.y)
+            ] })
+          ] });
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(recharts.Scatter, { data, children: data.map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(recharts.Cell, { fill: colors[i], r: 6 }, i)) })
+  ] }) }) }) });
+}
+function LandingLayout({
+  mode = "header",
+  nav,
+  children,
+  className = ""
+}) {
+  if (mode === "sidebar") {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `flex min-h-screen bg-[var(--bg)] ${className}`, children: [
+      nav && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "hidden md:flex shrink-0", children: nav }),
+      /* @__PURE__ */ jsxRuntime.jsx("main", { className: "flex-1 overflow-y-auto", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 md:px-10 lg:px-16 max-w-5xl", children }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `min-h-screen bg-[var(--bg)] ${className}`, children: [
+    nav,
+    /* @__PURE__ */ jsxRuntime.jsx("main", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children })
+  ] });
+}
+
+exports.Alert = Alert;
+exports.AppCard = AppCard;
+exports.AppTopLine = AppTopLine;
+exports.ArticleBarChart = ArticleBarChart;
+exports.ArticleBody = ArticleBody;
+exports.ArticleChatBlock = ArticleChatBlock;
+exports.ArticleFigure = ArticleFigure;
+exports.ArticleFooter = ArticleFooter;
+exports.ArticleHeading = ArticleHeading;
+exports.ArticleHero = ArticleHero;
+exports.ArticleLayout = ArticleLayout;
+exports.ArticleLineChart = ArticleLineChart;
+exports.ArticleLinkButton = ArticleLinkButton;
+exports.ArticleList = ArticleList;
+exports.ArticleNarrow = ArticleNarrow;
+exports.ArticleNote = ArticleNote;
+exports.ArticleScatterChart = ArticleScatterChart;
+exports.ArticleTable = ArticleTable;
+exports.ArticleWide = ArticleWide;
+exports.Avatar = Avatar;
+exports.Badge = Badge;
+exports.BentoGrid = BentoGrid;
+exports.Breadcrumbs = Breadcrumbs;
+exports.Button = Button;
+exports.CTASection = CTASection;
+exports.Card = Card;
+exports.ChatInput = ChatInput;
+exports.ChatMessage = ChatMessage;
+exports.Checkbox = Checkbox;
+exports.CodeInput = CodeInput;
+exports.ComparisonTable = ComparisonTable;
+exports.Divider = Divider;
+exports.DropdownMenu = DropdownMenu;
+exports.EmptyState = EmptyState;
+exports.FAQSection = FAQSection;
+exports.FeatureGrid = FeatureGrid;
+exports.Footer = Footer;
+exports.FormField = FormField;
+exports.Header = Header;
+exports.HeroSection = HeroSection;
+exports.IconButton = IconButton;
+exports.IconWithText = IconWithText;
+exports.IconlyActivity = IconlyActivity;
+exports.IconlyAttach = IconlyAttach;
+exports.IconlyBook = IconlyBook;
+exports.IconlyCheck = IconlyCheck;
+exports.IconlyChevronDown = IconlyChevronDown;
+exports.IconlyChevronLeft = IconlyChevronLeft;
+exports.IconlyChevronRight = IconlyChevronRight;
+exports.IconlyClose = IconlyClose;
+exports.IconlyError = IconlyError;
+exports.IconlyEye = IconlyEye;
+exports.IconlyEyeOff = IconlyEyeOff;
+exports.IconlyHeart = IconlyHeart;
+exports.IconlyInfo = IconlyInfo;
+exports.IconlyInfoCircle = IconlyInfoCircle;
+exports.IconlyLink = IconlyLink;
+exports.IconlyLock = IconlyLock;
+exports.IconlyMail = IconlyMail;
+exports.IconlyMenu = IconlyMenu;
+exports.IconlyMoon = IconlyMoon;
+exports.IconlyQuote = IconlyQuote;
+exports.IconlyRoadmap = IconlyRoadmap;
+exports.IconlySandbox = IconlySandbox;
+exports.IconlySearch = IconlySearch;
+exports.IconlySend = IconlySend;
+exports.IconlySmile = IconlySmile;
+exports.IconlyStar = IconlyStar;
+exports.IconlySuccess = IconlySuccess;
+exports.IconlySun = IconlySun;
+exports.IconlyWarning = IconlyWarning;
+exports.Input = Input;
+exports.LandingLayout = LandingLayout;
+exports.Logo = Logo;
+exports.LogoCloud = LogoCloud;
+exports.MenuItem = MenuItem;
+exports.Modal = Modal;
+exports.Pagination = Pagination;
+exports.PasswordInput = PasswordInput;
+exports.PricingCard = PricingCard;
+exports.ProfileNav = ProfileNav;
+exports.PromoActionCards = PromoActionCards;
+exports.PromoBento = PromoBento;
+exports.PromoDevicesCTA = PromoDevicesCTA;
+exports.PromoHero = PromoHero;
+exports.PromoPricing = PromoPricing;
+exports.PromoShowcase = PromoShowcase;
+exports.PromoSplit = PromoSplit;
+exports.PromoTestimonials = PromoTestimonials;
+exports.PromoTrustGrid = PromoTrustGrid;
+exports.Radio = Radio;
+exports.SearchBar = SearchBar;
+exports.Select = Select;
+exports.Sidebar = Sidebar;
+exports.Skeleton = Skeleton;
+exports.Spinner = Spinner;
+exports.StampCard = StampCard;
+exports.Stat = Stat;
+exports.StatBadge = StatBadge;
+exports.StatsBar = StatsBar;
+exports.StyledLink = Link;
+exports.Tabs = Tabs;
+exports.Tag = Tag;
+exports.TestimonialCard = TestimonialCard;
+exports.Textarea = Textarea;
+exports.TicketButton = TicketButton;
+exports.Toast = Toast;
+exports.Toggle = Toggle;
+exports.Tooltip = Tooltip;
+exports.TopPromo = TopPromo;