@nswds/app 1.123.0 → 1.124.1

package/dist/index.js

@@ -15108,6 +15108,12 @@ function getContrastTone(contrastRatio) {
   if (contrastRatio >= AA_LARGE_CONTRAST_RATIO) return "warning";
   return "danger";
 }
+function supportsNormalTextPreview(contrastRatio) {
+  return contrastRatio >= AA_NORMAL_CONTRAST_RATIO;
+}
+function supportsLargeTextPreview(contrastRatio) {
+  return contrastRatio >= AA_LARGE_CONTRAST_RATIO;
+}
 function getPreviewHeroRatingLabel(contrastRatio) {
   if (contrastRatio >= AAA_NORMAL_CONTRAST_RATIO) return "AAA normal";
   if (contrastRatio >= AA_NORMAL_CONTRAST_RATIO) return "AA normal";
@@ -15728,6 +15734,8 @@ function ColorPairingToolContent({ visibleFormats }) {
   const previewHeroRatingLabel = getPreviewHeroRatingLabel(contrastRatio);
   const previewHeroStatusLabel = getPreviewHeroStatusLabel(contrastRatio);
   const contrastTone = getContrastTone(contrastRatio);
+  const showNormalTextPreview = supportsNormalTextPreview(contrastRatio);
+  const showLargeTextPreview = supportsLargeTextPreview(contrastRatio);
   const resolvedCopyFormat = visibleFormats.includes(copyFormat) ? copyFormat : visibleFormats[0] ?? DEFAULT_VISIBLE_FORMATS[0];
   return /* @__PURE__ */ jsx("section", { className: "min-w-0 overflow-hidden rounded-sm bg-white text-grey-800", children: /* @__PURE__ */ jsxs("div", { className: "grid min-w-0 xl:min-h-[46rem] xl:grid-cols-[260px_minmax(0,1fr)] xl:gap-x-6", children: [
     /* @__PURE__ */ jsx("aside", { className: "border-b border-grey-200 px-4 py-5 sm:px-6 xl:border-b-0 xl:px-0", children: /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
@@ -15853,38 +15861,49 @@ function ColorPairingToolContent({ visibleFormats }) {
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ jsxs("div", { className: "max-w-[42rem] space-y-5 pb-12 sm:pb-8", children: [
-                    /* @__PURE__ */ jsx("p", { className: "text-[0.82rem] font-semibold tracking-[0.12em] uppercase", children: "NSW Government Digital" }),
-                    /* @__PURE__ */ jsx("h3", { className: "text-4xl leading-none font-bold sm:text-5xl", children: "Connecting communities to services that matter" }),
-                    /* @__PURE__ */ jsx("p", { className: "max-w-[38rem] text-base leading-7 sm:text-lg sm:leading-8", children: "Review how each pairing performs against AA and AAA requirements for normal and large text across your selected primary, accent, and grey families." }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 pt-1", children: [
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "aria-hidden": "true",
-                          "data-variant": "solid",
-                          className: cn(
-                            buttonVariants({ variant: "solid", size: "default" }),
-                            "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
-                          ),
-                          style: fauxButtonStyle,
-                          children: "Get started"
-                        }
+                  /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center", children: /* @__PURE__ */ jsxs(
+                    "div",
+                    {
+                      className: cn(
+                        "max-w-[42rem] space-y-5",
+                        showNormalTextPreview && "pb-12 sm:pb-8"
                       ),
-                      /* @__PURE__ */ jsx(
-                        "span",
-                        {
-                          "data-variant": "outline",
-                          className: cn(
-                            buttonVariants({ variant: "outline", size: "default" }),
-                            "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
-                          ),
-                          style: fauxButtonStyle,
-                          children: "Learn more"
-                        }
-                      )
-                    ] })
-                  ] }) }),
+                      children: [
+                        showNormalTextPreview ? /* @__PURE__ */ jsx("p", { className: "text-[0.82rem] font-semibold tracking-[0.12em] uppercase", children: "NSW Government Digital" }) : null,
+                        showLargeTextPreview ? /* @__PURE__ */ jsx("h3", { className: "text-4xl leading-none font-bold sm:text-5xl", children: "Connecting communities to services that matter" }) : null,
+                        showNormalTextPreview ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                          /* @__PURE__ */ jsx("p", { className: "max-w-[38rem] text-base leading-7 sm:text-lg sm:leading-8", children: "Review how each pairing performs against AA and AAA requirements for normal and large text across your selected primary, accent, and grey families." }),
+                          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 pt-1", children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                "aria-hidden": "true",
+                                "data-variant": "solid",
+                                className: cn(
+                                  buttonVariants({ variant: "solid", size: "default" }),
+                                  "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                                ),
+                                style: fauxButtonStyle,
+                                children: "Get started"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                "data-variant": "outline",
+                                className: cn(
+                                  buttonVariants({ variant: "outline", size: "default" }),
+                                  "pointer-events-none cursor-default px-6 text-[16px] font-[700] select-none sm:px-6 sm:text-[16px] sm:font-[700]"
+                                ),
+                                style: fauxButtonStyle,
+                                children: "Learn more"
+                              }
+                            )
+                          ] })
+                        ] }) : null
+                      ]
+                    }
+                  ) }),
                   /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
                     /* @__PURE__ */ jsxs(
                       "span",
@@ -16064,7 +16083,7 @@ function ColorPairingToolContent({ visibleFormats }) {
             optionCount === 1 ? "" : "s"
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "flex gap-2 overflow-x-auto pb-1", children: accessibleForegroundOptions.length > 0 ? accessibleForegroundOptions.map((candidate) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 pb-1", children: accessibleForegroundOptions.length > 0 ? accessibleForegroundOptions.map((candidate) => /* @__PURE__ */ jsx(
           ForegroundOption,
           {
             backgroundHex: backgroundShade.hex,
@@ -18974,7 +18993,7 @@ function FormatToggle({ format, setFormat }) {
 
 // package.json
 var package_default = {
-  version: "1.122.0"};
+  version: "1.124.0"};
 var SluggerContext = React5__default.createContext(null);
 function flattenText(nodes) {
   if (nodes == null || typeof nodes === "boolean") return "";