@nswds/app 1.21.2 → 1.23.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))
@@ -2394,6 +2394,7 @@ function SegmentedControlTrigger({
     }
   );
 }
+var findGreyKey = (themes) => Object.keys(themes).find((k) => k.toLowerCase().includes("grey")) ?? "";
 function ThemeSelector({
   themeCategory,
   setThemeCategory,
@@ -2401,12 +2402,18 @@ function ThemeSelector({
   setPrimaryColor,
   accentColor,
   setAccentColor,
+  greyColor,
+  setGreyColor,
   availableAccentColors,
   colorThemes: colorThemes2
 }) {
   const handleCategoryChange = (newCategory) => {
     setThemeCategory(newCategory);
     const availableColors = Object.keys(colorThemes2[newCategory]);
+    const neutral = findGreyKey(colorThemes2[newCategory]);
+    if (neutral && neutral !== greyColor) {
+      setGreyColor(neutral);
+    }
     if (availableColors.length > 0) {
       if (availableColors.includes(primaryColor)) {
         const newAccentColor = availableColors.find((color) => color !== primaryColor);
@@ -5889,8 +5896,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");
@@ -5901,9 +5909,35 @@ function CodeDemo({ data }) {
   const [themeCategory, setThemeCategory] = useState("brand");
   const [primaryColor, setPrimaryColor] = useState("blue");
   const [accentColor, setAccentColor] = useState("red");
+  const [greyColor, setGreyColor] = useState("grey");
   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),
+      ...getShades("grey", greyColor, themeCategory)
+    }),
+    [themeCategory, primaryColor, accentColor, greyColor]
+  );
+  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);
@@ -5947,6 +5981,14 @@ function CodeDemo({ data }) {
   function countLines(value) {
     return (value.match(/\n/g) || "").length + 1;
   }
+  function selectIframe(data2, currentVariant) {
+    const { iframe } = data2;
+    if (!iframe) return;
+    if (typeof iframe === "number") return iframe;
+    if ("src" in iframe) return iframe;
+    return iframe[currentVariant];
+  }
+  const iframeData = selectIframe(data, variant);
   const variants = getVariants(data);
   const code = getCode(data, variant);
   const codeItems = getCodeItems(code);
@@ -5957,7 +5999,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,
@@ -5965,11 +6007,13 @@ function CodeDemo({ data }) {
             primaryColor,
             setPrimaryColor,
             accentColor,
-            setAccentColor
+            setAccentColor,
+            greyColor,
+            setGreyColor
           }
         ),
-        /* @__PURE__ */ jsx(ToggleRTLButton, { isRTL, onClick: () => setIsRTL((state) => !state) }),
-        /* @__PURE__ */ jsx(
+        !rtl && /* @__PURE__ */ jsx(ToggleRTLButton, { isRTL, onClick: () => setIsRTL((state) => !state) }),
+        !darkMode && /* @__PURE__ */ jsx(
           ToggleDarkModeButton,
           {
             isDarkMode,
@@ -5984,11 +6028,18 @@ function CodeDemo({ data }) {
         view,
         isRTL,
         isDarkMode,
-        iframe: data.iframe,
-        accentColor,
-        primaryColor,
-        themeCategory,
-        children: data.iframe ? /* @__PURE__ */ jsx(IFrame, { data, isRTL, isDarkMode }) : /* @__PURE__ */ jsx(Fragment, { children: data.component })
+        iframe: iframeData,
+        themeValues,
+        children: iframeData ? /* @__PURE__ */ jsx(
+          IFrame,
+          {
+            sandbox: "allow-scripts allow-same-origin",
+            ref: iframeRef,
+            iframe: iframeData,
+            isRTL,
+            isDarkMode
+          }
+        ) : /* @__PURE__ */ jsx(Fragment, { children: data.component })
       }
     ),
     /* @__PURE__ */ jsx("div", { className: "code-syntax-wrapper", children: /* @__PURE__ */ jsxs(
@@ -6033,31 +6084,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(
+  ({ iframe, 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 iframe === "number") {
+      return /* @__PURE__ */ jsx("iframe", { ref, src: "", height: iframe, width: "100%", className: "w-full" });
+    }
+    if (typeof iframe === "object" && iframe?.src) {
+      const { src, height = 0, width = 100, noPadding } = 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 +6128,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 +6171,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,
@@ -6151,7 +6203,9 @@ function ThemeSelectorDropDown({
   primaryColor,
   setPrimaryColor,
   accentColor,
-  setAccentColor
+  setAccentColor,
+  greyColor,
+  setGreyColor
 }) {
   const filteredColorThemes = useMemo(() => {
     const filtered = {};
@@ -6169,6 +6223,10 @@ function ThemeSelectorDropDown({
     return allColors.filter((color) => color !== primaryColor);
   }, [filteredColorThemes, themeCategory, primaryColor]);
   useEffect(() => {
+    const neutralKey = Object.keys(colorThemes[themeCategory]).find((k) => k.toLowerCase().includes("grey")) ?? "";
+    if (neutralKey && neutralKey !== greyColor) {
+      setGreyColor(neutralKey);
+    }
     const availableColors = Object.keys(colorThemes[themeCategory]);
     if (!availableColors.includes(primaryColor)) {
       setPrimaryColor(availableColors[0]);
@@ -6183,7 +6241,15 @@ function ThemeSelectorDropDown({
         setAccentColor(newAccentColor);
       }
     }
-  }, [themeCategory, primaryColor, accentColor, setPrimaryColor, setAccentColor]);
+  }, [
+    themeCategory,
+    primaryColor,
+    accentColor,
+    greyColor,
+    setPrimaryColor,
+    setAccentColor,
+    setGreyColor
+  ]);
   const primaryColorSwatch = colorThemes[themeCategory][primaryColor]?.colors[3]?.hex || "#000000";
   const accentColorSwatch = colorThemes[themeCategory][accentColor]?.colors[2]?.hex || "#000000";
   return /* @__PURE__ */ jsxs(Popover, { children: [
@@ -6204,6 +6270,8 @@ function ThemeSelectorDropDown({
         setPrimaryColor,
         accentColor,
         setAccentColor,
+        greyColor,
+        setGreyColor,
         availableAccentColors,
         colorThemes: filteredColorThemes
       }
@@ -6900,10 +6968,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 +6989,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 +7189,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React5.createContext({
+var ToggleGroupContext = React6.createContext({
   size: "default",
   variant: "ghost"
 });
@@ -7154,7 +7222,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React5.useContext(ToggleGroupContext);
+  const context = React6.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx(
     ToggleGroupPrimitive.Item,
     {
@@ -7196,22 +7264,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 +7312,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 +7320,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.20.0"};
+  version: "1.22.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7313,9 +7386,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 +7398,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 +8332,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 +8684,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 +8719,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)
     }
   );
 }
@@ -8720,6 +8790,7 @@ function ThemeColorPalette() {
   const [themeCategory, setThemeCategory] = useState("brand");
   const [primaryColor, setPrimaryColor] = useState("blue");
   const [accentColor, setAccentColor] = useState("red");
+  const [greyColor, setGreyColor] = useState("grey");
   const [sheetOpen, setSheetOpen] = useState(false);
   const filteredColorThemes = useMemo(() => {
     const filtered = {};
@@ -8737,6 +8808,10 @@ function ThemeColorPalette() {
     return allColors.filter((color) => color !== primaryColor);
   }, [filteredColorThemes, themeCategory, primaryColor]);
   useEffect(() => {
+    const neutralKey = Object.keys(colorThemes[themeCategory]).find((k) => k.toLowerCase().includes("grey")) ?? "";
+    if (neutralKey && neutralKey !== greyColor) {
+      setGreyColor(neutralKey);
+    }
     const availableColors = Object.keys(colorThemes[themeCategory]);
     if (!availableColors.includes(primaryColor)) {
       setPrimaryColor(availableColors[0]);
@@ -8751,7 +8826,7 @@ function ThemeColorPalette() {
         setAccentColor(newAccentColor);
       }
     }
-  }, [themeCategory, primaryColor, accentColor]);
+  }, [themeCategory, primaryColor, accentColor, greyColor]);
   const currentColorPalette = useMemo(() => {
     if (!colorThemes[themeCategory] || !colorThemes[themeCategory][primaryColor] || !colorThemes[themeCategory][accentColor]) {
       return [
@@ -8824,6 +8899,8 @@ function ThemeColorPalette() {
               setPrimaryColor,
               accentColor,
               setAccentColor,
+              greyColor,
+              setGreyColor,
               availableAccentColors,
               colorThemes: filteredColorThemes
             }
@@ -8831,18 +8908,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 +9012,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 };