@lukeashford/aurelius 1.0.0 → 1.1.0

package/dist/index.js

@@ -59,6 +59,9 @@ __export(index_exports, {
 });
 module.exports = __toCommonJS(index_exports);
 
+// src/tailwind.preset.ts
+var import_plugin = __toESM(require("tailwindcss/plugin"));
+
 // src/tokens/colors.ts
 var colors = {
   // Black spectrum
@@ -200,37 +203,142 @@ var radii = {
 };
 
 // src/tailwind.preset.ts
+var aureliusPlugin = (0, import_plugin.default)(function({ addBase, addUtilities, theme }) {
+  addBase({
+    "html": {
+      fontFamily: theme("fontFamily.body"),
+      backgroundColor: theme("colors.obsidian"),
+      color: theme("colors.white"),
+      "-webkit-font-smoothing": "antialiased",
+      "-moz-osx-font-smoothing": "grayscale"
+    },
+    "body": {
+      minHeight: "100vh",
+      lineHeight: "1.5"
+    },
+    "table": {
+      borderCollapse: "collapse",
+      width: "100%"
+    },
+    "table, th, td": {
+      border: `1px solid ${theme("colors.gold.muted")}`
+    },
+    "th, td": {
+      padding: "0.5rem 0.75rem"
+    },
+    "table:hover": {
+      boxShadow: theme("boxShadow.glow")
+    },
+    "progress": {
+      appearance: "none",
+      "-webkit-appearance": "none",
+      border: `1px solid ${theme("colors.gold.muted")}`,
+      borderRadius: "0",
+      backgroundColor: theme("colors.charcoal"),
+      width: "100%",
+      height: "0.5rem"
+    },
+    "progress::-webkit-progress-bar": {
+      backgroundColor: theme("colors.charcoal")
+    },
+    "progress::-webkit-progress-value": {
+      backgroundColor: theme("colors.gold.DEFAULT")
+    },
+    "progress::-moz-progress-bar": {
+      backgroundColor: theme("colors.gold.DEFAULT")
+    },
+    "h1, h2, h3, h4, h5, h6": {
+      fontFamily: theme("fontFamily.heading"),
+      fontWeight: "600",
+      letterSpacing: "-0.025em",
+      color: theme("colors.white")
+    },
+    "h1": { fontSize: "2.25rem", lineHeight: "1.25" },
+    "h2": { fontSize: "1.875rem", lineHeight: "1.25" },
+    "h3": { fontSize: "1.5rem", lineHeight: "1.375" },
+    "h4": { fontSize: "1.25rem", lineHeight: "1.375" },
+    "h5": { fontSize: "1.125rem", lineHeight: "1.5" },
+    "h6": { fontSize: "1rem", lineHeight: "1.5" },
+    "code, pre, kbd, samp": {
+      fontFamily: theme("fontFamily.mono"),
+      fontSize: "0.875em"
+    },
+    "a": {
+      color: theme("colors.gold.DEFAULT"),
+      textDecoration: "none",
+      transition: `color ${theme("transitionDuration.fast")} ease-out`
+    },
+    "a:hover": {
+      color: theme("colors.gold.light")
+    },
+    ":focus-visible": {
+      outline: `2px solid ${theme("colors.gold.DEFAULT")}`,
+      outlineOffset: "2px"
+    },
+    "::selection": {
+      backgroundColor: theme("colors.gold.DEFAULT"),
+      color: theme("colors.obsidian")
+    },
+    "::-webkit-scrollbar": { width: "8px", height: "8px" },
+    "::-webkit-scrollbar-track": { background: theme("colors.charcoal") },
+    "::-webkit-scrollbar-thumb": {
+      background: theme("colors.ash"),
+      borderRadius: theme("borderRadius.full")
+    },
+    "::-webkit-scrollbar-thumb:hover": { background: theme("colors.silver") }
+  });
+  addUtilities({
+    ".text-gradient-gold": {
+      background: `linear-gradient(to right, ${theme("colors.gold.DEFAULT")}, ${theme(
+        "colors.gold.light"
+      )}, ${theme("colors.gold.DEFAULT")})`,
+      "-webkit-background-clip": "text",
+      "background-clip": "text",
+      color: "transparent"
+    },
+    ".glow": { boxShadow: theme("boxShadow.glow") },
+    ".glow-sm": { boxShadow: theme("boxShadow.glow-sm") },
+    ".glow-lg": { boxShadow: theme("boxShadow.glow-lg") },
+    ".scroll-smooth": {
+      scrollBehavior: "smooth",
+      "-webkit-overflow-scrolling": "touch"
+    },
+    ".scrollbar-hide": {
+      "-ms-overflow-style": "none",
+      "scrollbar-width": "none",
+      "&::-webkit-scrollbar": { display: "none" }
+    },
+    ".backdrop-glass": {
+      backdropFilter: "blur(12px)",
+      backgroundColor: "rgba(20, 20, 20, 0.8)"
+    },
+    ".focus-ring": {
+      "&:focus-visible": {
+        outline: "2px solid #c9a227",
+        outlineOffset: "2px"
+      }
+    },
+    ".line-clamp-2": {
+      display: "-webkit-box",
+      "-webkit-line-clamp": "2",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden"
+    },
+    ".line-clamp-3": {
+      display: "-webkit-box",
+      "-webkit-line-clamp": "3",
+      "-webkit-box-orient": "vertical",
+      overflow: "hidden"
+    },
+    ".center-absolute": {
+      position: "absolute",
+      top: "50%",
+      left: "50%",
+      transform: "translate(-50%, -50%)"
+    }
+  });
+});
 var preset = {
-  // Safelist color utilities used dynamically in the demo so Tailwind doesn't purge them
-  safelist: [
-    // Black spectrum
-    "bg-void",
-    "bg-obsidian",
-    "bg-charcoal",
-    "bg-graphite",
-    "bg-slate",
-    "bg-ash",
-    // Gold spectrum
-    "bg-gold",
-    "bg-gold-light",
-    "bg-gold-bright",
-    "bg-gold-muted",
-    "bg-gold-pale",
-    // Neutrals
-    "bg-white",
-    "bg-silver",
-    "bg-zinc",
-    "bg-dim",
-    // Semantic
-    "bg-success",
-    "bg-success-muted",
-    "bg-error",
-    "bg-error-muted",
-    "bg-warning",
-    "bg-warning-muted",
-    "bg-info",
-    "bg-info-muted"
-  ],
   theme: {
     extend: {
       colors: {
@@ -317,7 +425,8 @@ var preset = {
         }
       }
     }
-  }
+  },
+  plugins: [aureliusPlugin]
 };
 var tailwind_preset_default = preset;
 
@@ -329,13 +438,29 @@ function cx(...classes) {
 var Button = import_react.default.forwardRef(
   ({ variant = "primary", size = "md", loading = false, className, disabled, children, ...rest }, ref) => {
     const isDisabled = disabled || loading;
-    const variantClass = variant === "primary" ? "btn-primary" : variant === "important" ? "btn-important" : variant === "elevated" ? "btn-elevated" : variant === "outlined" ? "btn-outlined" : variant === "featured" ? "btn-featured" : variant === "ghost" ? "btn-ghost" : "btn-danger";
-    const sizeClass = `btn-${size}`;
+    const base = "inline-flex items-center justify-center font-semibold tracking-wide transition-all duration-fast rounded-none disabled:opacity-50 disabled:cursor-not-allowed";
+    const variantClasses = {
+      primary: "bg-charcoal text-white border border-gold/30 hover:border-gold hover:shadow-glow hover:text-gold-light active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      important: "bg-gold text-obsidian border border-gold hover:bg-gold-light hover:text-obsidian active:bg-gold-bright focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      elevated: "bg-charcoal text-white border-0 shadow-lg hover:shadow-xl hover:text-gold-light active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      outlined: "bg-transparent text-white border border-ash hover:border-white hover:text-white active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      featured: "bg-charcoal text-white border border-gold shadow-[0_0_10px_rgba(201,162,39,0.2)] hover:shadow-[0_0_15px_rgba(201,162,39,0.4)] hover:text-gold-light active:bg-white/5 focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      ghost: "bg-transparent text-gold border-0 hover:text-gold-light active:text-gold-bright focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+      danger: "bg-error text-white border-0 hover:bg-error/90 active:bg-error/80 focus-visible:ring-2 focus-visible:ring-error focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian"
+    };
+    const sizeClasses = {
+      sm: "h-8 px-3 text-sm",
+      md: "h-10 px-4 text-sm",
+      lg: "h-12 px-6 text-base",
+      xl: "h-14 px-8 text-lg"
+    };
+    const variantClass = variantClasses[variant];
+    const sizeClass = sizeClasses[size];
     return /* @__PURE__ */ import_react.default.createElement(
       "button",
       {
         ref,
-        className: cx("btn", variantClass, sizeClass, loading && "opacity-80", className),
+        className: cx(base, variantClass, sizeClass, loading && "opacity-80", className),
         disabled: isDisabled,
         ...rest
       },
@@ -359,8 +484,8 @@ function cx2(...classes) {
 }
 var Input = import_react2.default.forwardRef(
   ({ error = false, className, leadingIcon, trailingIcon, disabled, ...rest }, ref) => {
-    const base = "input";
-    const errorCls = error ? "input-error" : "";
+    const base = "w-full h-10 px-3 bg-graphite border border-ash rounded-none text-white placeholder:text-zinc transition-all duration-fast focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none disabled:bg-slate disabled:text-dim disabled:cursor-not-allowed";
+    const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
     return /* @__PURE__ */ import_react2.default.createElement("div", { className: cx2("relative", disabled && "opacity-90") }, leadingIcon && /* @__PURE__ */ import_react2.default.createElement("span", { className: "pointer-events-none absolute inset-y-0 left-3 flex items-center text-silver" }, leadingIcon), /* @__PURE__ */ import_react2.default.createElement(
       "input",
       {
@@ -386,9 +511,16 @@ function cx3(...classes) {
 }
 var Card = import_react3.default.forwardRef(
   ({ variant = "default", interactive = false, className, ...rest }, ref) => {
-    const base = "card";
-    const variantClass = variant === "elevated" ? "card-elevated" : variant === "outlined" ? "card-outlined" : variant === "ghost" ? "bg-transparent shadow-none border-0" : variant === "featured" ? "card-featured" : "";
-    const interactiveClass = interactive ? "card-interactive" : "";
+    const base = "rounded-none p-6";
+    const variantClasses = {
+      default: "bg-charcoal shadow-sm border border-gold/30",
+      elevated: "bg-charcoal shadow-lg border-0",
+      outlined: "bg-charcoal shadow-none border border-ash",
+      ghost: "bg-transparent shadow-none border-0",
+      featured: "bg-charcoal border border-gold shadow-[0_0_10px_rgba(201,162,39,0.2)]"
+    };
+    const interactiveClass = interactive ? "transition-all duration-normal hover:border-gold hover:shadow-glow cursor-pointer" : "";
+    const variantClass = variantClasses[variant];
     return /* @__PURE__ */ import_react3.default.createElement(
       "div",
       {
@@ -460,8 +592,17 @@ function cx5(...classes) {
 }
 var Badge = import_react5.default.forwardRef(
   ({ variant = "default", className, ...rest }, ref) => {
-    const variantClass = variant === "gold" ? "badge-gold" : variant === "success" ? "badge-success" : variant === "error" ? "badge-error" : variant === "warning" ? "bg-warning/20 text-warning border-warning/30" : variant === "info" ? "bg-info/20 text-info border-info/30" : "badge-default";
-    return /* @__PURE__ */ import_react5.default.createElement("span", { ref, className: cx5("badge", variantClass, className), ...rest });
+    const base = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border";
+    const variantClasses = {
+      default: "bg-slate text-silver border-slate",
+      gold: "bg-gold/20 text-gold border-gold/30",
+      success: "bg-success/20 text-success border-success/30",
+      error: "bg-error/20 text-error border-error/30",
+      warning: "bg-warning/20 text-warning border-warning/30",
+      info: "bg-info/20 text-info border-info/30"
+    };
+    const variantClass = variantClasses[variant];
+    return /* @__PURE__ */ import_react5.default.createElement("span", { ref, className: cx5(base, variantClass, className), ...rest });
   }
 );
 Badge.displayName = "Badge";
@@ -500,10 +641,11 @@ var Label = import_react7.default.forwardRef(
       "label",
       {
         ref,
-        className: cx7("label", required && "label-required", className),
+        className: cx7("block text-sm font-medium text-silver mb-1.5", className),
         ...rest
       },
-      children
+      children,
+      required && /* @__PURE__ */ import_react7.default.createElement("span", { className: "text-error ml-1" }, "*")
     );
   }
 );
@@ -536,7 +678,7 @@ function cx9(...classes) {
 }
 var Textarea = import_react9.default.forwardRef(
   ({ error = false, className, disabled, ...rest }, ref) => {
-    const base = "textarea";
+    const base = "w-full px-3 py-2 bg-graphite border border-ash rounded-none text-white placeholder:text-zinc min-h-[80px] transition-all duration-fast focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none disabled:bg-slate disabled:text-dim disabled:cursor-not-allowed";
     const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
     return /* @__PURE__ */ import_react9.default.createElement(
       "textarea",
@@ -556,15 +698,26 @@ var import_react10 = __toESM(require("react"));
 function cx10(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var selectBgImage = `url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23C9A227' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e")`;
 var Select = import_react10.default.forwardRef(
   ({ error = false, className, disabled, options, children, ...rest }, ref) => {
-    const base = "select";
-    const errorCls = error ? "border-error focus:border-error focus:ring-error" : "";
     return /* @__PURE__ */ import_react10.default.createElement(
       "select",
       {
         ref,
-        className: cx10(base, errorCls, disabled && "opacity-90", className),
+        className: cx10(
+          "appearance-none bg-graphite border border-ash rounded-none text-white px-3 py-2 pr-8",
+          "focus:border-gold focus:ring-1 focus:ring-gold focus:outline-none",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          error && "border-error focus:border-error focus:ring-error",
+          className
+        ),
+        style: {
+          backgroundImage: selectBgImage,
+          backgroundPosition: "right 0.5rem center",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "1.5em 1.5em"
+        },
         disabled,
         ...rest
       },
@@ -579,16 +732,50 @@ var import_react11 = __toESM(require("react"));
 function cx11(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var checkmarkSvg = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1A1A' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")`;
 var Checkbox = import_react11.default.forwardRef(
   ({ className, label, id, ...rest }, ref) => {
     const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
+    const setRef = (0, import_react11.useCallback)((node) => {
+      if (node) {
+        if (node.checked) {
+          node.style.backgroundImage = checkmarkSvg;
+        }
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ref]);
     return /* @__PURE__ */ import_react11.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react11.default.createElement(
       "input",
       {
         type: "checkbox",
         id: inputId,
-        ref,
-        className: cx11("checkbox", className),
+        ref: setRef,
+        className: cx11(
+          "appearance-none h-4 w-4 border border-ash rounded-sm bg-graphite",
+          "checked:bg-gold checked:border-gold",
+          "focus:ring-1 focus:ring-gold focus:ring-offset-1 focus:ring-offset-obsidian",
+          "transition duration-200 ease-in-out cursor-pointer",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          className
+        ),
+        style: {
+          backgroundPosition: "center",
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat"
+        },
+        onChange: (e) => {
+          const input = e.currentTarget;
+          if (input.checked) {
+            input.style.backgroundImage = checkmarkSvg;
+          } else {
+            input.style.backgroundImage = "none";
+          }
+          rest.onChange?.(e);
+        },
         ...rest
       }
     ), label && /* @__PURE__ */ import_react11.default.createElement("label", { htmlFor: inputId, className: "ml-2 text-sm text-silver cursor-pointer select-none" }, label));
@@ -601,16 +788,58 @@ var import_react12 = __toESM(require("react"));
 function cx12(...classes) {
   return classes.filter(Boolean).join(" ");
 }
+var radioDotSvg = `url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%231A1A1A' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")`;
 var Radio = import_react12.default.forwardRef(
   ({ className, label, id, ...rest }, ref) => {
     const inputId = id || rest.name || Math.random().toString(36).substr(2, 9);
+    const setRef = (0, import_react12.useCallback)((node) => {
+      if (node) {
+        if (node.checked) {
+          node.style.backgroundImage = radioDotSvg;
+        }
+      }
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }, [ref]);
     return /* @__PURE__ */ import_react12.default.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ import_react12.default.createElement(
       "input",
       {
         type: "radio",
         id: inputId,
-        ref,
-        className: cx12("radio", className),
+        ref: setRef,
+        className: cx12(
+          "appearance-none h-4 w-4 border border-ash rounded-full bg-graphite",
+          "checked:bg-gold checked:border-gold",
+          "focus:ring-1 focus:ring-gold focus:ring-offset-1 focus:ring-offset-obsidian",
+          "transition duration-200 ease-in-out cursor-pointer",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          className
+        ),
+        style: {
+          backgroundPosition: "center",
+          backgroundSize: "contain",
+          backgroundRepeat: "no-repeat"
+        },
+        onChange: (e) => {
+          const input = e.currentTarget;
+          if (input.checked) {
+            input.style.backgroundImage = radioDotSvg;
+            if (input.name) {
+              const radios = document.querySelectorAll(`input[type="radio"][name="${input.name}"]`);
+              radios.forEach((radio) => {
+                if (radio !== input) {
+                  radio.style.backgroundImage = "none";
+                }
+              });
+            }
+          } else {
+            input.style.backgroundImage = "none";
+          }
+          rest.onChange?.(e);
+        },
         ...rest
       }
     ), label && /* @__PURE__ */ import_react12.default.createElement("label", { htmlFor: inputId, className: "ml-2 text-sm text-silver cursor-pointer select-none" }, label));
@@ -628,6 +857,18 @@ var Switch = import_react13.default.forwardRef(
     const [internalChecked, setInternalChecked] = (0, import_react13.useState)(defaultChecked);
     const isControlled = controlledChecked !== void 0;
     const checked = isControlled ? controlledChecked : internalChecked;
+    const buttonRef = (0, import_react13.useRef)(null);
+    const setRefs = (0, import_react13.useCallback)(
+      (node) => {
+        buttonRef.current = node;
+        if (typeof ref === "function") {
+          ref(node);
+        } else if (ref) {
+          ref.current = node;
+        }
+      },
+      [ref]
+    );
     const handleClick = (e) => {
       if (disabled) return;
       const newChecked = !checked;
@@ -645,13 +886,39 @@ var Switch = import_react13.default.forwardRef(
         "aria-checked": checked,
         "data-state": checked ? "checked" : "unchecked",
         disabled,
-        ref,
+        ref: setRefs,
         onClick: handleClick,
-        className: cx13("switch", className),
+        className: cx13(
+          "relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent",
+          "transition-colors duration-200 ease-in-out",
+          "focus:outline-none focus-visible:ring-2 focus-visible:ring-gold focus-visible:ring-offset-2 focus-visible:ring-offset-obsidian",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          checked ? "bg-gold" : "bg-charcoal",
+          className
+        ),
         ...rest
       },
-      /* @__PURE__ */ import_react13.default.createElement("span", { className: "switch-thumb" })
-    ), label && /* @__PURE__ */ import_react13.default.createElement("span", { className: "text-sm text-silver cursor-pointer", onClick: () => !disabled && handleClick({}) }, label));
+      /* @__PURE__ */ import_react13.default.createElement(
+        "span",
+        {
+          className: cx13(
+            "pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0",
+            "transition duration-200 ease-in-out",
+            checked ? "translate-x-5" : "translate-x-0"
+          )
+        }
+      )
+    ), label && /* @__PURE__ */ import_react13.default.createElement(
+      "span",
+      {
+        className: "text-sm text-silver cursor-pointer",
+        onClick: () => {
+          if (disabled) return;
+          buttonRef.current?.click();
+        }
+      },
+      label
+    ));
   }
 );
 Switch.displayName = "Switch";
@@ -668,16 +935,25 @@ var icons = {
   warning: import_lucide_react.AlertTriangle,
   error: import_lucide_react.XCircle
 };
+var variantStyles = {
+  info: "bg-info/10 border-info text-info",
+  success: "bg-success/10 border-success text-success",
+  warning: "bg-warning/10 border-warning text-warning",
+  error: "bg-error/10 border-error text-error"
+};
 var Alert = import_react14.default.forwardRef(
   ({ variant = "info", title, children, className, ...rest }, ref) => {
     const Icon = icons[variant];
-    const variantClass = `alert-${variant}`;
     return /* @__PURE__ */ import_react14.default.createElement(
       "div",
       {
         ref,
         role: "alert",
-        className: cx14("alert", variantClass, "flex gap-3", className),
+        className: cx14(
+          "relative w-full p-4 rounded-none border border-l-4 flex gap-3",
+          variantStyles[variant],
+          className
+        ),
         ...rest
       },
       /* @__PURE__ */ import_react14.default.createElement(Icon, { className: "h-5 w-5 shrink-0" }),
@@ -766,12 +1042,15 @@ var Modal = ({ isOpen, onClose, title, children, className }) => {
   }, [onClose]);
   if (!mounted) return null;
   if (!isOpen) return null;
-  const content = /* @__PURE__ */ import_react17.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6", onClick: onClose }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "modal-backdrop", "aria-hidden": "true" }), /* @__PURE__ */ import_react17.default.createElement(
+  const content = /* @__PURE__ */ import_react17.default.createElement("div", { className: "fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6", onClick: onClose }, /* @__PURE__ */ import_react17.default.createElement("div", { className: "fixed inset-0 z-40 bg-obsidian/80 backdrop-blur-sm", "aria-hidden": "true" }), /* @__PURE__ */ import_react17.default.createElement(
     "div",
     {
       role: "dialog",
       "aria-modal": "true",
-      className: cx17("modal-content relative", className),
+      className: cx17(
+        "bg-charcoal border border-gold/30 shadow-2xl z-50 w-full max-w-lg p-6 rounded-none relative",
+        className
+      ),
       "data-state": "open",
       onClick: (e) => e.stopPropagation()
     },