@nswds/app 1.114.1 → 1.115.0

package/dist/index.cjs

@@ -4231,7 +4231,7 @@ var Link = React5.forwardRef(function Link2({ className, variant, ...props }, re
 var styles = {
   base: [
     // Base
-    "relative isolate inline-flex items-baseline justify-center gap-x-2 rounded-sm border text-base/7 sm:text-sm/6 font-semibold transition-all",
+    "relative isolate inline-flex items-baseline justify-center gap-x-2 rounded-sm border text-base/7 font-bold transition-all",
     // Focus
     "focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-(--btn-bg)",
     // Disabled
@@ -4315,7 +4315,7 @@ var styles = {
   ],
   outline: [
     // Text color
-    "border-(--btn-bg) text-(--btn-bg)",
+    "border-(--btn-bg) text-(--btn-bg) border-2",
     // Optical border, implemented as the button background to avoid corner artifacts
     "bg-transparent",
     // Button background, implemented as foreground layer to stack on top of pseudo-border layer
@@ -4476,30 +4476,12 @@ var styles = {
       "dark:[--btn-bg:var(--color-accent-500)] dark:[--btn-border:var(--color-accent-500)]/90 dark:[--btn-text:white]",
       // Dark mode states
       "dark:[--btn-hover-overlay:var(--color-accent-500)]/30 dark:data-[variant=solid]:[--btn-hover-overlay:var(--color-white)]/10"
-    ],
-    danger: [
-      // Base
-      "",
-      // States
-      "",
-      // Dark mode
-      "",
-      // Dark mode states
-      "",
-      // Icon
-      "",
-      // Icon states
-      "",
-      // Icon dark mode
-      "",
-      // Icon dark mode states
-      ""
     ]
   },
   size: {
-    default: "px-[calc(--spacing(5)-1px)] py-[calc(--spacing(4)-1px)] sm:px-[calc(--spacing(4.5)-1px)] sm:py-[calc(--spacing(3)-1px)]",
-    sm: "px-[calc(--spacing(4)-1px)] py-[calc(--spacing(3)-1px)] sm:px-[calc(--spacing(3.5)-1px)] sm:py-[calc(--spacing(2)-1px)]",
-    lg: "px-[calc(--spacing(6)-1px)] py-[calc(--spacing(5)-1px)] sm:px-[calc(--spacing(5.5)-1px)] sm:py-[calc(--spacing(4)-1px)]",
+    default: "px-[calc(--spacing(6)-1px)] py-[calc(--spacing(4)-1px)] sm:px-[calc(--spacing(5.5)-1px)] sm:py-[calc(--spacing(3)-1px)]",
+    sm: "px-[calc(--spacing(5)-1px)] py-[calc(--spacing(3)-1px)] sm:px-[calc(--spacing(4.5)-1px)] sm:py-[calc(--spacing(2)-1px)]",
+    lg: "px-[calc(--spacing(7)-1px)] py-[calc(--spacing(5)-1px)] sm:px-[calc(--spacing(6.5)-1px)] sm:py-[calc(--spacing(4)-1px)]",
     icon: "w-10 h-10 flex-none"
   },
   iconSize: {
@@ -4527,8 +4509,7 @@ var buttonVariants = classVarianceAuthority.cva(styles.base, {
       primary: styles.colors.primary,
       secondary: styles.colors.secondary,
       tertiary: styles.colors.tertiary,
-      accent: styles.colors.accent,
-      danger: styles.colors.danger
+      accent: styles.colors.accent
     },
     size: {
       default: styles.size.default,
@@ -18835,7 +18816,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.114.0"};
+  version: "1.114.1"};
 var SluggerContext = React5__namespace.default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";
@@ -19124,9 +19105,107 @@ var heroBannerVariants = classVarianceAuthority.cva("relative", {
   variants: {
     variant: {
       "primary-800": "bg-primary-800 text-white",
-      "grey-150": "bg-grey-150 text-grey-800",
+      "primary-600": "bg-primary-600 text-white",
+      "primary-400": "bg-primary-400 text-primary-800",
+      "primary-200": "bg-primary-200 text-primary-800",
+      "grey-800": "bg-grey-800 text-white",
+      "grey-600": "bg-grey-600 text-white",
+      "grey-400": "bg-grey-400 text-grey-800",
+      "grey-200": "bg-grey-200 text-grey-800",
       "accent-800": "bg-accent-800 text-white",
+      "accent-600": "bg-accent-600 text-white",
+      "accent-400": "bg-accent-400 text-accent-800",
+      "accent-200": "bg-accent-200 text-accent-800",
+      white: "bg-white text-grey-800"
+    }
+  },
+  defaultVariants: {
+    variant: "primary-800"
+  }
+});
+var heroBannerContentAlignments = {
+  center: {
+    content: "text-center",
+    subtitle: "mx-auto",
+    actions: "justify-center"
+  },
+  left: {
+    content: "text-left",
+    subtitle: "",
+    actions: "justify-start"
+  }
+};
+function HeroBannerSimple({
+  variant,
+  heading,
+  subtitle,
+  contentAlign = "center",
+  primaryButton,
+  secondaryButton
+}) {
+  const alignment = heroBannerContentAlignments[contentAlign];
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroBannerVariants({ variant }), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 py-24 sm:py-32 lg:px-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("mx-auto max-w-2xl", alignment.content), children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "text-4xl font-semibold tracking-tight text-balance sm:text-6xl", children: heading }),
+    subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("mt-6 max-w-xl text-lg leading-8 text-pretty", alignment.subtitle), children: subtitle }),
+    (primaryButton || secondaryButton) && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: cn("mt-10 flex flex-wrap items-center gap-x-6 gap-y-4", alignment.actions),
+        children: [
+          primaryButton && (primaryButton.href ? /* @__PURE__ */ jsxRuntime.jsx(
+            Button2,
+            {
+              href: primaryButton.href,
+              variant: primaryButton.variant,
+              color: primaryButton.color ?? void 0,
+              children: primaryButton.text
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            Button2,
+            {
+              onClick: primaryButton.onClick,
+              variant: primaryButton.variant,
+              color: primaryButton.color ?? void 0,
+              children: primaryButton.text
+            }
+          )),
+          secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsxRuntime.jsx(
+            Button2,
+            {
+              href: secondaryButton.href,
+              variant: secondaryButton.variant,
+              color: secondaryButton.color ?? void 0,
+              children: secondaryButton.text
+            }
+          ) : /* @__PURE__ */ jsxRuntime.jsx(
+            Button2,
+            {
+              onClick: secondaryButton.onClick,
+              variant: secondaryButton.variant,
+              color: secondaryButton.color ?? void 0,
+              children: secondaryButton.text
+            }
+          ))
+        ]
+      }
+    )
+  ] }) }) });
+}
+var heroBannerVariants2 = classVarianceAuthority.cva("relative", {
+  variants: {
+    variant: {
+      "primary-800": "bg-primary-800 text-white",
+      "primary-600": "bg-primary-600 text-white",
+      "primary-400": "bg-primary-400 text-primary-800",
       "primary-200": "bg-primary-200 text-primary-800",
+      "grey-800": "bg-grey-800 text-white",
+      "grey-600": "bg-grey-600 text-white",
+      "grey-400": "bg-grey-400 text-grey-800",
+      "grey-200": "bg-grey-200 text-grey-800",
+      "accent-800": "bg-accent-800 text-white",
+      "accent-600": "bg-accent-600 text-white",
+      "accent-400": "bg-accent-400 text-accent-800",
+      "accent-200": "bg-accent-200 text-accent-800",
       white: "bg-white text-grey-800"
     }
   },
@@ -19134,6 +19213,34 @@ var heroBannerVariants = classVarianceAuthority.cva("relative", {
     variant: "primary-800"
   }
 });
+var HERO_BANNER_SUPPORTING_IMAGE_DEFAULT_SPLIT = {
+  left: 8,
+  right: 4
+};
+var HERO_BANNER_SUPPORTING_IMAGE_COLUMN_SPANS = {
+  1: "lg:col-span-1",
+  2: "lg:col-span-2",
+  3: "lg:col-span-3",
+  4: "lg:col-span-4",
+  5: "lg:col-span-5",
+  6: "lg:col-span-6",
+  7: "lg:col-span-7",
+  8: "lg:col-span-8",
+  9: "lg:col-span-9",
+  10: "lg:col-span-10",
+  11: "lg:col-span-11"
+};
+function resolveHeroBannerSupportingImageSplit(split) {
+  if (!split) {
+    return HERO_BANNER_SUPPORTING_IMAGE_DEFAULT_SPLIT;
+  }
+  const hasValidLeftSpan = split.left in HERO_BANNER_SUPPORTING_IMAGE_COLUMN_SPANS;
+  const hasValidRightSpan = split.right in HERO_BANNER_SUPPORTING_IMAGE_COLUMN_SPANS;
+  if (hasValidLeftSpan && hasValidRightSpan && split.left + split.right === 12) {
+    return split;
+  }
+  return HERO_BANNER_SUPPORTING_IMAGE_DEFAULT_SPLIT;
+}
 function HeroBannerSupportingImage({
   variant,
   imgAlt,
@@ -19141,63 +19248,96 @@ function HeroBannerSupportingImage({
   imgBgcolor,
   heading,
   subtitle,
+  split,
   primaryButton,
   secondaryButton
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroBannerVariants({ variant }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "px-6 pt-10 pb-24 sm:pb-32 lg:col-span-8 lg:px-0 lg:pt-24 lg:pb-28 xl:col-span-8", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-2xl lg:mx-0", children: [
-      heading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-24 text-4xl font-bold tracking-tight sm:mt-10 sm:text-6xl", children: heading }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-6 text-lg leading-8", children: subtitle }),
-      (primaryButton || secondaryButton) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10 flex items-center gap-x-6", children: [
-        primaryButton && (primaryButton.href ? /* @__PURE__ */ jsxRuntime.jsx(
-          Button2,
-          {
-            href: primaryButton.href,
-            variant: primaryButton.variant,
-            color: primaryButton.color ?? void 0,
-            children: primaryButton.text
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          Button2,
-          {
-            onClick: primaryButton.onClick,
-            variant: primaryButton.variant,
-            color: primaryButton.color ?? void 0,
-            children: primaryButton.text
-          }
-        )),
-        secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsxRuntime.jsx(
-          Button2,
-          {
-            href: secondaryButton.href,
-            variant: secondaryButton.variant,
-            color: secondaryButton.color ?? void 0,
-            children: secondaryButton.text
-          }
-        ) : /* @__PURE__ */ jsxRuntime.jsx(
-          Button2,
+  const resolvedSplit = resolveHeroBannerSupportingImageSplit(split);
+  const textSpanClassName = HERO_BANNER_SUPPORTING_IMAGE_COLUMN_SPANS[resolvedSplit.left];
+  const imageSpanClassName = HERO_BANNER_SUPPORTING_IMAGE_COLUMN_SPANS[resolvedSplit.right];
+  const imageStart = `${resolvedSplit.left / 12 * 100}%`;
+  const contentMaxWidth = `${Math.min(56, resolvedSplit.left / 8 * 42)}rem`;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: heroBannerVariants2({ variant }), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mx-auto max-w-7xl lg:grid lg:grid-cols-12 lg:gap-x-8 lg:px-8", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: cn("px-6 pt-10 pb-24 sm:pb-32 lg:px-0 lg:pt-24 lg:pb-28", textSpanClassName),
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
           {
-            onClick: secondaryButton.onClick,
-            variant: secondaryButton.variant,
-            color: secondaryButton.color ?? void 0,
-            children: secondaryButton.text
+            className: "mx-auto max-w-2xl lg:mx-0 lg:max-w-[var(--hero-copy-max-width)]",
+            style: {
+              "--hero-copy-max-width": contentMaxWidth
+            },
+            children: [
+              heading && /* @__PURE__ */ jsxRuntime.jsx("h1", { className: "mt-24 text-4xl font-semibold tracking-tight text-balance sm:mt-10 sm:text-6xl", children: heading }),
+              subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-6 text-lg leading-8 text-pretty", children: subtitle }),
+              (primaryButton || secondaryButton) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-10 flex flex-wrap items-center gap-x-6 gap-y-4", children: [
+                primaryButton && (primaryButton.href ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Button2,
+                  {
+                    href: primaryButton.href,
+                    variant: primaryButton.variant,
+                    color: primaryButton.color ?? void 0,
+                    children: primaryButton.text
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Button2,
+                  {
+                    onClick: primaryButton.onClick,
+                    variant: primaryButton.variant,
+                    color: primaryButton.color ?? void 0,
+                    children: primaryButton.text
+                  }
+                )),
+                secondaryButton && (secondaryButton.href ? /* @__PURE__ */ jsxRuntime.jsx(
+                  Button2,
+                  {
+                    href: secondaryButton.href,
+                    variant: secondaryButton.variant,
+                    color: secondaryButton.color ?? void 0,
+                    children: secondaryButton.text
+                  }
+                ) : /* @__PURE__ */ jsxRuntime.jsx(
+                  Button2,
+                  {
+                    onClick: secondaryButton.onClick,
+                    variant: secondaryButton.variant,
+                    color: secondaryButton.color ?? void 0,
+                    children: secondaryButton.text
+                  }
+                ))
+              ] })
+            ]
           }
-        ))
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative lg:col-span-4 lg:-mr-8 xl:absolute xl:inset-0 xl:left-2/3 xl:mr-0", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Image2__default.default,
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
       {
-        alt: imgAlt,
-        src: imgSrc || "/placeholder.svg",
-        width: 800,
-        height: 800,
         className: cn(
-          "aspect-[3/2] w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full",
-          imgBgcolor
+          "relative lg:-mr-8 xl:absolute xl:inset-y-0 xl:right-0 xl:left-[var(--hero-image-start)] xl:mr-0",
+          imageSpanClassName
+        ),
+        style: {
+          "--hero-image-start": imageStart
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          Image2__default.default,
+          {
+            alt: imgAlt,
+            src: imgSrc || "/placeholder.svg",
+            width: 800,
+            height: 800,
+            className: cn(
+              "aspect-[3/2] w-full object-cover lg:absolute lg:inset-0 lg:aspect-auto lg:h-full",
+              imgBgcolor
+            )
+          }
         )
       }
-    ) })
+    )
   ] }) });
 }
 function HoverCard({ ...props }) {
@@ -33176,7 +33316,7 @@ var Tracker = React5__namespace.default.forwardRef(
   }
 );
 Tracker.displayName = "Tracker";
-var buttonVariants4 = classVarianceAuthority.cva(
+var buttonVariants5 = classVarianceAuthority.cva(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-sm text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
@@ -33213,7 +33353,7 @@ function Button7({
     Comp,
     {
       "data-slot": "button",
-      className: cn(buttonVariants4({ variant, size, className })),
+      className: cn(buttonVariants5({ variant, size, className })),
       ...props
     }
   );
@@ -35622,6 +35762,23 @@ function Input2({ className, type, ...props }) {
     }
   );
 }
+var sanitizePreviewUrl = (value) => {
+  if (!value) return void 0;
+  const trimmed = value.trim();
+  if (!trimmed) return void 0;
+  const baseOrigin = typeof window !== "undefined" ? window.location.origin : "http://localhost";
+  const hasExplicitScheme = /^[a-zA-Z][a-zA-Z\d+.-]*:/.test(trimmed);
+  const isRelativeUrl = trimmed.startsWith("/") || trimmed.startsWith("./") || trimmed.startsWith("../") || trimmed.startsWith("?") || trimmed.startsWith("#");
+  const isBareHostname = !hasExplicitScheme && !isRelativeUrl && /^[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)+([/:?#].*)?$/.test(trimmed);
+  try {
+    const parsed = hasExplicitScheme ? new URL(trimmed) : isBareHostname ? new URL(`https://${trimmed}`) : new URL(trimmed, baseOrigin);
+    if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+      return parsed.toString();
+    }
+  } catch {
+  }
+  return void 0;
+};
 var WebPreviewContext = React5.createContext(null);
 var useWebPreview = () => {
   const context = React5.useContext(WebPreviewContext);
@@ -35637,11 +35794,21 @@ var WebPreview = ({
   onUrlChange,
   ...props
 }) => {
-  const [url, setUrl] = React5.useState(defaultUrl);
+  const initialUrl = sanitizePreviewUrl(defaultUrl) ?? "";
+  const [url, setUrl] = React5.useState(initialUrl);
   const [consoleOpen, setConsoleOpen] = React5.useState(false);
   const handleUrlChange = (newUrl) => {
-    setUrl(newUrl);
-    onUrlChange?.(newUrl);
+    if (!newUrl.trim()) {
+      setUrl("");
+      onUrlChange?.("");
+      return;
+    }
+    const safeUrl = sanitizePreviewUrl(newUrl);
+    if (safeUrl === void 0) {
+      return;
+    }
+    setUrl(safeUrl);
+    onUrlChange?.(safeUrl);
   };
   const contextValue = {
     url,
@@ -35684,20 +35851,30 @@ var WebPreviewUrl = ({ value, onChange, onKeyDown, ...props }) => {
     }
   );
 };
-var WebPreviewBody = ({ className, loading, src, ...props }) => {
+var WebPreviewBody = ({
+  className,
+  loading,
+  loadingFallback,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  sandbox: _sandbox,
+  src,
+  ...props
+}) => {
   const { url } = useWebPreview();
+  const safeSrc = sanitizePreviewUrl(src ?? url);
+  const resolvedLoadingFallback = loadingFallback ?? loading;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "iframe",
       {
         className: cn("size-full", className),
         sandbox: "allow-scripts allow-same-origin allow-forms allow-popups allow-presentation",
-        src: (src ?? url) || void 0,
+        src: safeSrc,
         title: "Preview",
         ...props
       }
     ),
-    loading
+    resolvedLoadingFallback
   ] });
 };
 var useIsomorphicLayoutEffect2 = typeof window !== "undefined" ? React5.useLayoutEffect : React5.useEffect;
@@ -36119,6 +36296,7 @@ exports.FormatToggle = FormatToggle;
 exports.GenerateInterpolatedColors = GenerateInterpolatedColors;
 exports.Header = Header2;
 exports.Heading = Heading;
+exports.HeroBannerSimple = HeroBannerSimple;
 exports.HeroBannerSupportingImage = HeroBannerSupportingImage;
 exports.HoverCard = HoverCard;
 exports.HoverCardContent = HoverCardContent;