@nswds/app 1.21.2 → 1.22.0

package/dist/index.js

@@ -6,8 +6,8 @@ import { cva } from 'class-variance-authority';
 import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as Headless from '@headlessui/react';
-import * as React5 from 'react';
-import { forwardRef, createContext, useRef, useState, useEffect, useMemo, useCallback, useContext } from 'react';
+import * as React6 from 'react';
+import React6__default, { forwardRef, useEffect, createContext, useRef, useState, useMemo, useCallback, useContext } from 'react';
 import Link3 from 'next/link';
 import * as culori from 'culori';
 import { Slot } from '@radix-ui/react-slot';
@@ -1809,7 +1809,7 @@ function Breadcrumbs({
   });
   const shouldCollapse = breadcrumbItems.length > maxItems;
   if (!shouldCollapse) {
-    return /* @__PURE__ */ jsx(Breadcrumb, { className: "-ml-1", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbItems.map((item, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    return /* @__PURE__ */ jsx(Breadcrumb, { className: "-ml-1", children: /* @__PURE__ */ jsx(BreadcrumbList, { children: breadcrumbItems.map((item, index) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link3, { href: item.path, children: item.label }) }) }),
       index < breadcrumbItems.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
     ] }, item.path)) }) });
@@ -1820,7 +1820,7 @@ function Breadcrumbs({
   const itemsAtEnd = breadcrumbItems.slice(-endItems);
   const collapsedItems = breadcrumbItems.slice(startItems, breadcrumbItems.length - endItems);
   return /* @__PURE__ */ jsx(Breadcrumb, { children: /* @__PURE__ */ jsxs(BreadcrumbList, { children: [
-    itemsAtStart.map((item, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    itemsAtStart.map((item, index) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link3, { href: item.path, children: item.label }) }) }),
       index < itemsAtStart.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
     ] }, item.path)),
@@ -1833,7 +1833,7 @@ function Breadcrumbs({
       /* @__PURE__ */ jsx(DropdownMenuContent, { align: "start", children: collapsedItems.map((item) => /* @__PURE__ */ jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsx(Link3, { href: item.path, children: item.label }) }, item.path)) })
     ] }) }),
     itemsAtEnd.length > 0 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {}),
-    itemsAtEnd.map((item, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
+    itemsAtEnd.map((item, index) => /* @__PURE__ */ jsxs(React6.Fragment, { children: [
       /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsx(Link3, { href: item.path, children: item.label }) }) }),
       index < itemsAtEnd.length - 1 && /* @__PURE__ */ jsx(BreadcrumbSeparator, {})
     ] }, item.path))
@@ -5889,8 +5889,9 @@ var colors = {
   }
 };
 var colorThemes = generateColorThemes(colors);
-function CodeDemo({ data }) {
+function CodeDemo({ data, hide = {} }) {
   const { resolvedTheme } = useTheme();
+  const { rtl = false, darkMode = false, themeSelector = false } = hide;
   const [tabIndex, setTabIndex] = useState(0);
   const [variant, setVariant] = useState(getInitialVariant(data));
   const [view, setView] = useState("desktop");
@@ -5904,6 +5905,30 @@ function CodeDemo({ data }) {
   useEffect(() => {
     setDarkMode(resolvedTheme === "dark");
   }, [resolvedTheme]);
+  const iframeRef = useRef(null);
+  const getShades = (prefix, colorKey, themeCat) => colors[themeCat][colorKey].colors.reduce((acc, shade) => {
+    const suffix = shade.token.split("-").pop();
+    acc[`${prefix}${suffix}`] = shade.hex;
+    return acc;
+  }, {});
+  const themeValues = React6__default.useMemo(
+    () => ({
+      ...getShades("primary", primaryColor, themeCategory),
+      ...getShades("accent", accentColor, themeCategory)
+    }),
+    [themeCategory, primaryColor, accentColor]
+  );
+  React6__default.useEffect(() => {
+    const frame = iframeRef.current;
+    if (!frame) return;
+    const send = () => {
+      const msg = { type: "nswds-theme", payload: themeValues };
+      frame.contentWindow?.postMessage(msg, "*");
+    };
+    send();
+    frame.addEventListener("load", send);
+    return () => frame.removeEventListener("load", send);
+  }, [themeValues]);
   function copyToClipboard(value) {
     setJustCopied(true);
     navigator.clipboard.writeText(value);
@@ -5957,7 +5982,7 @@ function CodeDemo({ data }) {
       /* @__PURE__ */ jsx(EditOnGithubButton, { githubSlug: data.githubSlug }),
       /* @__PURE__ */ jsx(ToggleViewButtons, { onSelect: setView }),
       /* @__PURE__ */ jsxs("div", { className: "col-span-1 flex justify-end gap-3", children: [
-        /* @__PURE__ */ jsx(
+        !themeSelector && /* @__PURE__ */ jsx(
           ThemeSelectorDropDown,
           {
             themeCategory,
@@ -5968,8 +5993,8 @@ function CodeDemo({ data }) {
             setAccentColor
           }
         ),
-        /* @__PURE__ */ jsx(ToggleRTLButton, { isRTL, onClick: () => setIsRTL((state) => !state) }),
-        /* @__PURE__ */ jsx(
+        !rtl && /* @__PURE__ */ jsx(ToggleRTLButton, { isRTL, onClick: () => setIsRTL((state) => !state) }),
+        !darkMode && /* @__PURE__ */ jsx(
           ToggleDarkModeButton,
           {
             isDarkMode,
@@ -5985,10 +6010,17 @@ function CodeDemo({ data }) {
         isRTL,
         isDarkMode,
         iframe: data.iframe,
-        accentColor,
-        primaryColor,
-        themeCategory,
-        children: data.iframe ? /* @__PURE__ */ jsx(IFrame, { data, isRTL, isDarkMode }) : /* @__PURE__ */ jsx(Fragment, { children: data.component })
+        themeValues,
+        children: data.iframe ? /* @__PURE__ */ jsx(
+          IFrame,
+          {
+            sandbox: "allow-scripts allow-same-origin",
+            ref: iframeRef,
+            data,
+            isRTL,
+            isDarkMode
+          }
+        ) : /* @__PURE__ */ jsx(Fragment, { children: data.component })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "code-syntax-wrapper", children: /* @__PURE__ */ jsxs(
@@ -6033,31 +6065,29 @@ function CodeDemo({ data }) {
     ) })
   ] });
 }
-function IFrame({
-  data,
-  isRTL,
-  isDarkMode
-}) {
-  const ref = useRef(null);
-  useEffect(() => {
-    const document2 = ref.current?.contentDocument;
-    const root = document2?.documentElement;
-    if (document2 && root) {
-      root.setAttribute("dir", isRTL ? "rtl" : "ltr");
-      root.classList.toggle("dark", !!isDarkMode);
-    }
-  }, [isRTL, isDarkMode]);
-  if (typeof data.iframe === "number") {
-    return /* @__PURE__ */ jsx("iframe", { ref, src: "", height: data.iframe, width: "100%", className: "w-full" });
-  }
-  if (typeof data.iframe === "object" && data.iframe?.src) {
-    const { src, height = 0, width = 100, noPadding } = data.iframe;
-    const finalSrc = noPadding ? `${src}?noPadding` : src;
-    const finalWidth = width === 100 ? "100%" : width;
-    return /* @__PURE__ */ jsx("iframe", { ref, src: finalSrc, height, width: finalWidth, className: "w-full" });
+var IFrame = React6__default.forwardRef(
+  ({ data, isRTL, isDarkMode }, ref) => {
+    useEffect(() => {
+      const document2 = ref?.current?.contentDocument;
+      const root = document2?.documentElement;
+      if (document2 && root) {
+        root.setAttribute("dir", isRTL ? "rtl" : "ltr");
+        root.classList.toggle("dark", !!isDarkMode);
+      }
+    }, [isRTL, isDarkMode, ref]);
+    if (typeof data.iframe === "number") {
+      return /* @__PURE__ */ jsx("iframe", { ref, src: "", height: data.iframe, width: "100%", className: "w-full" });
+    }
+    if (typeof data.iframe === "object" && data.iframe?.src) {
+      const { src, height = 0, width = 100, noPadding } = data.iframe;
+      const finalSrc = noPadding ? `${src}?noPadding` : src;
+      const finalWidth = width === 100 ? "100%" : width;
+      return /* @__PURE__ */ jsx("iframe", { ref, src: finalSrc, height, width: finalWidth, className: "w-full" });
+    }
+    return null;
   }
-  return null;
-}
+);
+IFrame.displayName = "IFrame";
 function Tabs({
   tabIndex,
   items,
@@ -6079,19 +6109,22 @@ function CodePreview({
   isRTL,
   isDarkMode,
   iframe,
-  accentColor,
-  primaryColor,
-  themeCategory,
+  themeValues,
   children
 }) {
-  const primary = colorThemes[themeCategory][primaryColor]?.colors[3]?.hex;
-  const accent = colorThemes[themeCategory][accentColor]?.colors[2]?.hex;
+  const cssVars = React6__default.useMemo(() => {
+    const withCssVarNames = Object.entries(themeValues).map(([key, value]) => {
+      const kebab = key.replace(/(\D+)(\d+)/, "$1-$2");
+      return [`--color-${kebab}`, value];
+    });
+    return Object.fromEntries(withCssVarNames);
+  }, [themeValues]);
   return /* @__PURE__ */ jsx(
     "div",
     {
       ...isRTL && { dir: "rtl" },
       className: "code-preview-wrapper",
-      style: { "--color-primary-800": primary, "--color-accent-600": accent },
+      style: cssVars,
       children: /* @__PURE__ */ jsx("div", { className: "border-grey-200 dark:border-grey-600 dark:bg-grey-900 flex border-x bg-white bg-gradient-to-r p-0", children: /* @__PURE__ */ jsx(
         "div",
         {
@@ -6119,7 +6152,7 @@ function CodePreview({
   );
 }
 function EditOnGithubButton({ githubSlug }) {
-  const githubSrcHref = "https://github.com/digitalnsw/nswds-app/src/examples/";
+  const githubSrcHref = "https://github.com";
   const href = `${githubSrcHref}${githubSlug}`;
   return /* @__PURE__ */ jsxs(
     Button2,
@@ -6900,10 +6933,10 @@ function DynamicFavicon({ lightModeFavicon, darkModeFavicon }) {
   }, [lightModeFavicon, darkModeFavicon]);
   return null;
 }
-var ExpandableSearchContext = React5.createContext(null);
-var ExpandableSearch = React5.forwardRef(({ className, onAction, defaultValue = "", ...props }, ref) => {
-  const [value, setValue] = React5.useState(defaultValue);
-  const formRef = React5.useRef(null);
+var ExpandableSearchContext = React6.createContext(null);
+var ExpandableSearch = React6.forwardRef(({ className, onAction, defaultValue = "", ...props }, ref) => {
+  const [value, setValue] = React6.useState(defaultValue);
+  const formRef = React6.useRef(null);
   const handleAction = (e) => {
     e.preventDefault();
     if (onAction) {
@@ -6921,10 +6954,10 @@ var ExpandableSearch = React5.forwardRef(({ className, onAction, defaultValue =
   ) });
 });
 ExpandableSearch.displayName = "ExpandableSearch";
-var ExpandableSearchField = React5.forwardRef(({ className, ...props }, ref) => {
-  const context = React5.useContext(ExpandableSearchContext);
+var ExpandableSearchField = React6.forwardRef(({ className, ...props }, ref) => {
+  const context = React6.useContext(ExpandableSearchContext);
   if (!context) throw new Error("ExpandableSearchField must be used within ExpandableSearch");
-  const [isFocused, setIsFocused] = React5.useState(false);
+  const [isFocused, setIsFocused] = React6.useState(false);
   const isActive = context.value.length > 0 || isFocused;
   return /* @__PURE__ */ jsxs("div", { className: "relative flex-1", children: [
     /* @__PURE__ */ jsx("label", { className: "sr-only", htmlFor: "expandable-search", children: "Search" }),
@@ -7121,7 +7154,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React5.createContext({
+var ToggleGroupContext = React6.createContext({
   size: "default",
   variant: "ghost"
 });
@@ -7154,7 +7187,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React5.useContext(ToggleGroupContext);
+  const context = React6.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -7196,22 +7229,27 @@ function FormatToggle({ format, setFormat }) {
 function Heading({
   className,
   trim = "normal",
-  size = 8,
+  size = 1,
   level = 1,
+  display = false,
   ...props
 }) {
   const Element = `h${level}`;
-  const sizeClasses = {
-    1: "text-[calc(var(--font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-1)] tracking-[calc(var(--letter-spacing-1)_+_var(--heading-letter-spacing))]",
-    2: "text-[calc(var(--font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-2)] tracking-[calc(var(--letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    3: "text-[calc(var(--font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-3)] tracking-[calc(var(--letter-spacing-3)_+_var(--heading-letter-spacing))]",
-    4: "text-[calc(var(--font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-4)] tracking-[calc(var(--letter-spacing-4)_+_var(--heading-letter-spacing))]",
-    5: "text-[calc(var(--font-size-5)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-5)] tracking-[calc(var(--letter-spacing-5)_+_var(--heading-letter-spacing))]",
-    6: "text-[calc(var(--font-size-6)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-6)] tracking-[calc(var(--letter-spacing-6)_+_var(--heading-letter-spacing))]",
-    7: "text-[calc(var(--font-size-7)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-7)] tracking-[calc(var(--letter-spacing-7)_+_var(--heading-letter-spacing))]",
-    8: "text-[calc(var(--font-size-8)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-8)] tracking-[calc(var(--letter-spacing-8)_+_var(--heading-letter-spacing))]",
-    9: "text-[calc(var(--font-size-9)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-9)] tracking-[calc(var(--letter-spacing-9)_+_var(--heading-letter-spacing))]"
+  const headingSizeClasses = {
+    1: "text-[calc(var(--heading-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    2: "text-[calc(var(--heading-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    3: "text-[calc(var(--heading-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-40)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    4: "text-[calc(var(--heading-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-36)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
+    5: "text-[calc(var(--heading-font-size-5)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-32)] tracking-[calc(var(--heading-letter-spacing-1)_+_var(--heading-letter-spacing))]",
+    6: "text-[calc(var(--heading-font-size-6)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-28)] tracking-[calc(var(--letter-spacing-0)_+_var(--heading-letter-spacing))]"
   };
+  const displaySizeClasses = {
+    1: "text-[calc(var(--display-font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-96)] tracking-[calc(var(--heading-letter-spacing-3)_+_var(--heading-letter-spacing))]",
+    2: "text-[calc(var(--display-font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-60)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    3: "text-[calc(var(--display-font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-52)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]",
+    4: "text-[calc(var(--display-font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--line-height-44)] tracking-[calc(var(--heading-letter-spacing-2)_+_var(--heading-letter-spacing))]"
+  };
+  const sizeClass = display ? displaySizeClasses[size] : headingSizeClasses[size];
   const trimClasses = {
     normal: ["before:content-none after:content-none"],
     start: [
@@ -7239,7 +7277,7 @@ function Heading({
         "leading-[var(--line-height)] font-[var(--heading-font-family)] font-bold",
         "[--leading-trim-end:var(--heading-leading-trim-end)] [--leading-trim-start:var(--heading-leading-trim-start)]",
         "text-primary-800 dark:text-white",
-        sizeClasses[size]
+        sizeClass
       )
     }
   );
@@ -7247,7 +7285,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.20.0"};
+  version: "1.21.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7313,9 +7351,9 @@ function ThemeSwitcher() {
   );
 }
 function SiteSearch({ navigation }) {
-  const [open, setOpen] = React5.useState(false);
+  const [open, setOpen] = React6.useState(false);
   const router = useRouter();
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const down = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -7325,7 +7363,7 @@ function SiteSearch({ navigation }) {
     document.addEventListener("keydown", down);
     return () => document.removeEventListener("keydown", down);
   }, []);
-  const runCommand = React5.useCallback((command) => {
+  const runCommand = React6.useCallback((command) => {
     setOpen(false);
     command();
   }, []);
@@ -8259,7 +8297,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React5.useMemo(
+  const _values = React6.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -8611,18 +8649,20 @@ function TabsContent({ className, ...props }) {
     }
   );
 }
-function Text({ className, trim = "normal", size = 8, ...props }) {
-  const sizeClasses = {
-    1: "text-[calc(var(--font-size-1)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-1)] tracking-[calc(var(--letter-spacing-1)_+_var(--heading-letter-spacing))]",
-    2: "text-[calc(var(--font-size-2)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-2)] tracking-[calc(var(--letter-spacing-2)_+_var(--heading-letter-spacing))]",
-    3: "text-[calc(var(--font-size-3)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-3)] tracking-[calc(var(--letter-spacing-3)_+_var(--heading-letter-spacing))]",
-    4: "text-[calc(var(--font-size-4)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-4)] tracking-[calc(var(--letter-spacing-4)_+_var(--heading-letter-spacing))]",
-    5: "text-[calc(var(--font-size-5)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-5)] tracking-[calc(var(--letter-spacing-5)_+_var(--heading-letter-spacing))]",
-    6: "text-[calc(var(--font-size-6)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-6)] tracking-[calc(var(--letter-spacing-6)_+_var(--heading-letter-spacing))]",
-    7: "text-[calc(var(--font-size-7)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-7)] tracking-[calc(var(--letter-spacing-7)_+_var(--heading-letter-spacing))]",
-    8: "text-[calc(var(--font-size-8)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-8)] tracking-[calc(var(--letter-spacing-8)_+_var(--heading-letter-spacing))]",
-    9: "text-[calc(var(--font-size-9)_*_var(--heading-font-size-adjust))] leading-[var(--heading-line-height-9)] tracking-[calc(var(--letter-spacing-9)_+_var(--heading-letter-spacing))]"
+function Text({ className, trim = "normal", size = 2, label = false, ...props }) {
+  const textSizeClasses = {
+    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-28)] tracking-[var(--letter-spacing-0)]",
+    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
+    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
+    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]"
+  };
+  const labelSizeClasses = {
+    1: "text-[length:var(--font-size-1)] leading-[var(--line-height-24)] tracking-[var(--letter-spacing-0)]",
+    2: "text-[length:var(--font-size-2)] leading-[var(--line-height-20)] tracking-[var(--letter-spacing-0)]",
+    3: "text-[length:var(--font-size-3)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]",
+    4: "text-[length:var(--font-size-4)] leading-[var(--line-height-16)] tracking-[var(--letter-spacing-0)]"
   };
+  const sizeClass = label ? labelSizeClasses[size] : textSizeClasses[size];
   const trimClasses = {
     normal: ["before:content-none after:content-none"],
     start: [
@@ -8644,12 +8684,7 @@ function Text({ className, trim = "normal", size = 8, ...props }) {
     {
       "data-slot": "text",
       ...props,
-      className: clsx11(
-        className,
-        trimClasses[trim],
-        "text-grey-800 dark:text-grey-400 text-base/6 sm:text-sm/6",
-        sizeClasses[size]
-      )
+      className: clsx11(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
     }
   );
 }
@@ -8831,18 +8866,15 @@ function ThemeColorPalette() {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "space-y-12", children: currentColorPalette.map((theme2) => /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold", children: theme2.name }),
-      /* @__PURE__ */ jsx(
-        BaseColorSwatches,
-        {
-          baseColors: baseColors[themeCategory][primaryColor],
-          format
-        }
-      ),
-      /* @__PURE__ */ jsx(ColourScale, { colorsToUse: theme2.colors }, theme2.name),
-      /* @__PURE__ */ jsx(ColorSwatches, { theme: theme2.colors, format, viewMode })
-    ] }, theme2.name)) })
+    /* @__PURE__ */ jsx("div", { className: "space-y-12", children: currentColorPalette.map((theme2) => {
+      const baseKey = theme2.name === "Primary" ? primaryColor : theme2.name === "Accent" ? accentColor : "grey";
+      return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold", children: theme2.name }),
+        /* @__PURE__ */ jsx(BaseColorSwatches, { baseColors: baseColors[themeCategory][baseKey], format }),
+        /* @__PURE__ */ jsx(ColourScale, { colorsToUse: theme2.colors }),
+        /* @__PURE__ */ jsx(ColorSwatches, { theme: theme2.colors, format, viewMode })
+      ] }, theme2.name);
+    }) })
   ] });
 }
 function ThemeProvider({ children, ...props }) {
@@ -8938,7 +8970,8 @@ var languages = [
   "jsx",
   "ts",
   "tsx",
-  "typescript"
+  "typescript",
+  "html"
 ];
 
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, BadgeButton, BaseColorSwatches, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Breadcrumbs, Button2 as Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Code, CodeDemo, CodeHighlight, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorCard, ColorSwatches, ColourScale, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuSub, ContextMenuSubContent, ContextMenuSubTrigger, ContextMenuTrigger, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicFavicon, ExpandableSearch, ExpandableSearchField, Footer, FooterAcknowledgement, FooterLegalLinks, FooterSmallPrint, FooterSocialLink, FormatToggle, GenerateInterpolatedColors, Header2 as Header, Heading, Icons, Input, Label3 as Label, Link, Logo, Masthead, Menubar, MenubarCheckboxItem, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarRadioItem, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubContent, MenubarSubTrigger, MenubarTrigger, Navigation, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PreWithCopy, PrevNextLinks, PrevNextLinksPageLink, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator4 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarLink, SidebarNavigation, SiteSearch, Skeleton, Slider, Social, Spinner, Strong, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs2 as Tabs, TabsContent, TabsList, TabsTrigger, Text, TextLink, Textarea, ThemeColorPalette, ThemeProvider, ThemeSelector, ThemeSwitcher, Toaster, TocContext, TocProvider, Toggle, ToggleGroup, ToggleGroupItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TouchTarget, ViewToggle, aboriginal, addStartStopToColorArray, allPalettes, badgeVariants, brand, buttonVariants, camelCase, cn, colorDataArray, colorThemes, colors, createColorArray, createColorData, darkenColor, domToSimple, generateColorThemes, getColorValue, getHeadings, getNodeText, getSurroundingColors, interpolateColors, isLightColor, kebabCase, languages, lightenColor, navigationMenuTriggerStyle, oklchConverter, renderColorOutput, renderColorOutputToDTFM, semantic, shades, themeIndices, themeTokens, toggleVariants, truncate, useToc };