@nswds/app 1.21.2 → 1.23.0

package/dist/index.cjs

@@ -8,7 +8,7 @@ var classVarianceAuthority = require('class-variance-authority');
 var AspectRatioPrimitive = require('@radix-ui/react-aspect-ratio');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var Headless = require('@headlessui/react');
-var React5 = require('react');
+var React6 = require('react');
 var Link3 = require('next/link');
 var culori = require('culori');
 var reactSlot = require('@radix-ui/react-slot');
@@ -74,7 +74,7 @@ var clsx11__default = /*#__PURE__*/_interopDefault(clsx11);
 var AspectRatioPrimitive__namespace = /*#__PURE__*/_interopNamespace(AspectRatioPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var Headless__namespace = /*#__PURE__*/_interopNamespace(Headless);
-var React5__namespace = /*#__PURE__*/_interopNamespace(React5);
+var React6__namespace = /*#__PURE__*/_interopNamespace(React6);
 var Link3__default = /*#__PURE__*/_interopDefault(Link3);
 var culori__namespace = /*#__PURE__*/_interopNamespace(culori);
 var DropdownMenuPrimitive__namespace = /*#__PURE__*/_interopNamespace(DropdownMenuPrimitive);
@@ -367,7 +367,7 @@ function AvatarFallback({
     }
   );
 }
-var Link = React5.forwardRef(function Link2(props, ref) {
+var Link = React6.forwardRef(function Link2(props, ref) {
   return /* @__PURE__ */ jsxRuntime.jsx(Headless__namespace.DataInteractive, { children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { ...props, ref }) });
 });
 var styles = {
@@ -679,7 +679,7 @@ var buttonVariants = classVarianceAuthority.cva(styles.base, {
     size: "default"
   }
 });
-var Button2 = React5.forwardRef(function Button3({ className, variant, color, size, children, ...props }, ref) {
+var Button2 = React6.forwardRef(function Button3({ className, variant, color, size, children, ...props }, ref) {
   const classes = cn(buttonVariants({ variant, color, size }), className);
   return "href" in props ? /* @__PURE__ */ jsxRuntime.jsx(
     Link,
@@ -1152,7 +1152,7 @@ function Badge({
     }
   );
 }
-var BadgeButton = React5.forwardRef(function BadgeButton2({
+var BadgeButton = React6.forwardRef(function BadgeButton2({
   variant,
   color,
   size,
@@ -1861,7 +1861,7 @@ function Breadcrumbs({
   });
   const shouldCollapse = breadcrumbItems.length > maxItems;
   if (!shouldCollapse) {
-    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "-ml-1", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.Fragment, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { className: "-ml-1", children: /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbList, { children: breadcrumbItems.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: item.path, children: item.label }) }) }),
       index < breadcrumbItems.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path)) }) });
@@ -1872,7 +1872,7 @@ function Breadcrumbs({
   const itemsAtEnd = breadcrumbItems.slice(-endItems);
   const collapsedItems = breadcrumbItems.slice(startItems, breadcrumbItems.length - endItems);
   return /* @__PURE__ */ jsxRuntime.jsx(Breadcrumb, { children: /* @__PURE__ */ jsxRuntime.jsxs(BreadcrumbList, { children: [
-    itemsAtStart.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.Fragment, { children: [
+    itemsAtStart.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: item.path, children: item.label }) }) }),
       index < itemsAtStart.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path)),
@@ -1885,7 +1885,7 @@ function Breadcrumbs({
       /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuContent, { align: "start", children: collapsedItems.map((item) => /* @__PURE__ */ jsxRuntime.jsx(DropdownMenuItem, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: item.path, children: item.label }) }, item.path)) })
     ] }) }),
     itemsAtEnd.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {}),
-    itemsAtEnd.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__namespace.Fragment, { children: [
+    itemsAtEnd.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs(React6__namespace.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbItem, { children: item.isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbPage, { children: item.label }) : /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbLink, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Link3__default.default, { href: item.path, children: item.label }) }) }),
       index < itemsAtEnd.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(BreadcrumbSeparator, {})
     ] }, item.path))
@@ -2060,8 +2060,8 @@ function TooltipContent({
   ) });
 }
 function PreWithCopy(props) {
-  const textInput = React5.useRef(null);
-  const [isJustCopied, setJustCopied] = React5.useState(false);
+  const textInput = React6.useRef(null);
+  const [isJustCopied, setJustCopied] = React6.useState(false);
   function handleCopy() {
     if (textInput.current) {
       navigator.clipboard.writeText(textInput.current.textContent || "");
@@ -2446,6 +2446,7 @@ function SegmentedControlTrigger({
     }
   );
 }
+var findGreyKey = (themes) => Object.keys(themes).find((k) => k.toLowerCase().includes("grey")) ?? "";
 function ThemeSelector({
   themeCategory,
   setThemeCategory,
@@ -2453,12 +2454,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);
@@ -5941,21 +5948,48 @@ var colors = {
   }
 };
 var colorThemes = generateColorThemes(colors);
-function CodeDemo({ data }) {
+function CodeDemo({ data, hide = {} }) {
   const { resolvedTheme } = nextThemes.useTheme();
-  const [tabIndex, setTabIndex] = React5.useState(0);
-  const [variant, setVariant] = React5.useState(getInitialVariant(data));
-  const [view, setView] = React5.useState("desktop");
-  const [isRTL, setIsRTL] = React5.useState(false);
-  const [isDarkMode, setDarkMode] = React5.useState(null);
-  const [isExpanded, setExpanded] = React5.useState(false);
-  const [isJustCopied, setJustCopied] = React5.useState(false);
-  const [themeCategory, setThemeCategory] = React5.useState("brand");
-  const [primaryColor, setPrimaryColor] = React5.useState("blue");
-  const [accentColor, setAccentColor] = React5.useState("red");
-  React5.useEffect(() => {
+  const { rtl = false, darkMode = false, themeSelector = false } = hide;
+  const [tabIndex, setTabIndex] = React6.useState(0);
+  const [variant, setVariant] = React6.useState(getInitialVariant(data));
+  const [view, setView] = React6.useState("desktop");
+  const [isRTL, setIsRTL] = React6.useState(false);
+  const [isDarkMode, setDarkMode] = React6.useState(null);
+  const [isExpanded, setExpanded] = React6.useState(false);
+  const [isJustCopied, setJustCopied] = React6.useState(false);
+  const [themeCategory, setThemeCategory] = React6.useState("brand");
+  const [primaryColor, setPrimaryColor] = React6.useState("blue");
+  const [accentColor, setAccentColor] = React6.useState("red");
+  const [greyColor, setGreyColor] = React6.useState("grey");
+  React6.useEffect(() => {
     setDarkMode(resolvedTheme === "dark");
   }, [resolvedTheme]);
+  const iframeRef = React6.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__namespace.default.useMemo(
+    () => ({
+      ...getShades("primary", primaryColor, themeCategory),
+      ...getShades("accent", accentColor, themeCategory),
+      ...getShades("grey", greyColor, themeCategory)
+    }),
+    [themeCategory, primaryColor, accentColor, greyColor]
+  );
+  React6__namespace.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);
@@ -5999,6 +6033,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);
@@ -6009,7 +6051,7 @@ function CodeDemo({ data }) {
       /* @__PURE__ */ jsxRuntime.jsx(EditOnGithubButton, { githubSlug: data.githubSlug }),
       /* @__PURE__ */ jsxRuntime.jsx(ToggleViewButtons, { onSelect: setView }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "col-span-1 flex justify-end gap-3", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !themeSelector && /* @__PURE__ */ jsxRuntime.jsx(
           ThemeSelectorDropDown,
           {
             themeCategory,
@@ -6017,11 +6059,13 @@ function CodeDemo({ data }) {
             primaryColor,
             setPrimaryColor,
             accentColor,
-            setAccentColor
+            setAccentColor,
+            greyColor,
+            setGreyColor
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(ToggleRTLButton, { isRTL, onClick: () => setIsRTL((state) => !state) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
+        !rtl && /* @__PURE__ */ jsxRuntime.jsx(ToggleRTLButton, { isRTL, onClick: () => setIsRTL((state) => !state) }),
+        !darkMode && /* @__PURE__ */ jsxRuntime.jsx(
           ToggleDarkModeButton,
           {
             isDarkMode,
@@ -6036,11 +6080,18 @@ function CodeDemo({ data }) {
         view,
         isRTL,
         isDarkMode,
-        iframe: data.iframe,
-        accentColor,
-        primaryColor,
-        themeCategory,
-        children: data.iframe ? /* @__PURE__ */ jsxRuntime.jsx(IFrame, { data, isRTL, isDarkMode }) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: data.component })
+        iframe: iframeData,
+        themeValues,
+        children: iframeData ? /* @__PURE__ */ jsxRuntime.jsx(
+          IFrame,
+          {
+            sandbox: "allow-scripts allow-same-origin",
+            ref: iframeRef,
+            iframe: iframeData,
+            isRTL,
+            isDarkMode
+          }
+        ) : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: data.component })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "code-syntax-wrapper", children: /* @__PURE__ */ jsxRuntime.jsxs(
@@ -6085,31 +6136,29 @@ function CodeDemo({ data }) {
     ) })
   ] });
 }
-function IFrame({
-  data,
-  isRTL,
-  isDarkMode
-}) {
-  const ref = React5.useRef(null);
-  React5.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("iframe", { ref, src: finalSrc, height, width: finalWidth, className: "w-full" });
+var IFrame = React6__namespace.default.forwardRef(
+  ({ iframe, isRTL, isDarkMode }, ref) => {
+    React6.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("iframe", { ref, src: finalSrc, height, width: finalWidth, className: "w-full" });
+    }
+    return null;
   }
-  return null;
-}
+);
+IFrame.displayName = "IFrame";
 function Tabs({
   tabIndex,
   items,
@@ -6131,19 +6180,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__namespace.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__ */ jsxRuntime.jsx(
     "div",
     {
       ...isRTL && { dir: "rtl" },
       className: "code-preview-wrapper",
-      style: { "--color-primary-800": primary, "--color-accent-600": accent },
+      style: cssVars,
       children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
         "div",
         {
@@ -6171,7 +6223,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__ */ jsxRuntime.jsxs(
     Button2,
@@ -6203,9 +6255,11 @@ function ThemeSelectorDropDown({
   primaryColor,
   setPrimaryColor,
   accentColor,
-  setAccentColor
+  setAccentColor,
+  greyColor,
+  setGreyColor
 }) {
-  const filteredColorThemes = React5.useMemo(() => {
+  const filteredColorThemes = React6.useMemo(() => {
     const filtered = {};
     for (const category of Object.keys(colorThemes)) {
       filtered[category] = Object.fromEntries(
@@ -6216,11 +6270,15 @@ function ThemeSelectorDropDown({
     }
     return filtered;
   }, []);
-  const availableAccentColors = React5.useMemo(() => {
+  const availableAccentColors = React6.useMemo(() => {
     const allColors = Object.keys(filteredColorThemes[themeCategory]);
     return allColors.filter((color) => color !== primaryColor);
   }, [filteredColorThemes, themeCategory, primaryColor]);
-  React5.useEffect(() => {
+  React6.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]);
@@ -6235,7 +6293,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__ */ jsxRuntime.jsxs(Popover, { children: [
@@ -6256,6 +6322,8 @@ function ThemeSelectorDropDown({
         setPrimaryColor,
         accentColor,
         setAccentColor,
+        greyColor,
+        setGreyColor,
         availableAccentColors,
         colorThemes: filteredColorThemes
       }
@@ -6345,9 +6413,9 @@ function CollapsibleContent2({
   return /* @__PURE__ */ jsxRuntime.jsx(CollapsiblePrimitive__namespace.CollapsibleContent, { "data-slot": "collapsible-content", ...props });
 }
 var TruncatingTooltip = ({ children, className }) => {
-  const textRef = React5.useRef(null);
-  const [isTruncated, setIsTruncated] = React5.useState(false);
-  React5.useEffect(() => {
+  const textRef = React6.useRef(null);
+  const [isTruncated, setIsTruncated] = React6.useState(false);
+  React6.useEffect(() => {
     const el = textRef.current;
     if (el) {
       setIsTruncated(el.scrollWidth > el.clientWidth);
@@ -6360,7 +6428,7 @@ var TruncatingTooltip = ({ children, className }) => {
 };
 function ColorCard({ name, token, hex, rgb: rgb2, hsl, oklch: oklch2, format, viewMode }) {
   const [, copyToClipboardRaw] = usehooks.useCopyToClipboard();
-  const [copied, setCopied] = React5.useState(false);
+  const [copied, setCopied] = React6.useState(false);
   const formattedColor = getColorValue({ oklch: oklch2, hex, rgb: rgb2, hsl }, format);
   const copyToClipboard = () => {
     copyToClipboardRaw(formattedColor);
@@ -6932,7 +7000,7 @@ function DrawerDescription({
   );
 }
 function DynamicFavicon({ lightModeFavicon, darkModeFavicon }) {
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     const updateFavicon = () => {
       const isDarkMode = window.matchMedia("(prefers-color-scheme: dark)").matches;
       const favicon = document.querySelector("link[rel='icon']");
@@ -6952,10 +7020,10 @@ function DynamicFavicon({ lightModeFavicon, darkModeFavicon }) {
   }, [lightModeFavicon, darkModeFavicon]);
   return null;
 }
-var ExpandableSearchContext = React5__namespace.createContext(null);
-var ExpandableSearch = React5__namespace.forwardRef(({ className, onAction, defaultValue = "", ...props }, ref) => {
-  const [value, setValue] = React5__namespace.useState(defaultValue);
-  const formRef = React5__namespace.useRef(null);
+var ExpandableSearchContext = React6__namespace.createContext(null);
+var ExpandableSearch = React6__namespace.forwardRef(({ className, onAction, defaultValue = "", ...props }, ref) => {
+  const [value, setValue] = React6__namespace.useState(defaultValue);
+  const formRef = React6__namespace.useRef(null);
   const handleAction = (e) => {
     e.preventDefault();
     if (onAction) {
@@ -6973,10 +7041,10 @@ var ExpandableSearch = React5__namespace.forwardRef(({ className, onAction, defa
   ) });
 });
 ExpandableSearch.displayName = "ExpandableSearch";
-var ExpandableSearchField = React5__namespace.forwardRef(({ className, ...props }, ref) => {
-  const context = React5__namespace.useContext(ExpandableSearchContext);
+var ExpandableSearchField = React6__namespace.forwardRef(({ className, ...props }, ref) => {
+  const context = React6__namespace.useContext(ExpandableSearchContext);
   if (!context) throw new Error("ExpandableSearchField must be used within ExpandableSearch");
-  const [isFocused, setIsFocused] = React5__namespace.useState(false);
+  const [isFocused, setIsFocused] = React6__namespace.useState(false);
   const isActive = context.value.length > 0 || isFocused;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex-1", children: [
     /* @__PURE__ */ jsxRuntime.jsx("label", { className: "sr-only", htmlFor: "expandable-search", children: "Search" }),
@@ -7173,7 +7241,7 @@ function Toggle({
     }
   );
 }
-var ToggleGroupContext = React5__namespace.createContext({
+var ToggleGroupContext = React6__namespace.createContext({
   size: "default",
   variant: "ghost"
 });
@@ -7206,7 +7274,7 @@ function ToggleGroupItem({
   size,
   ...props
 }) {
-  const context = React5__namespace.useContext(ToggleGroupContext);
+  const context = React6__namespace.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsxRuntime.jsx(
     ToggleGroupPrimitive__namespace.Item,
     {
@@ -7248,22 +7316,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: [
@@ -7291,7 +7364,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
       )
     }
   );
@@ -7299,7 +7372,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.20.0"};
+  version: "1.22.0"};
 function Logo(props) {
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "NSW Government" }),
@@ -7341,9 +7414,9 @@ function Logo(props) {
 }
 function ThemeSwitcher() {
   const { resolvedTheme, setTheme } = nextThemes.useTheme();
-  const [mounted, setMounted] = React5.useState(false);
+  const [mounted, setMounted] = React6.useState(false);
   const classes = "fill-nsw-grey-600 dark:fill-nsw-grey-100";
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     setMounted(true);
   }, []);
   if (!mounted) {
@@ -7365,9 +7438,9 @@ function ThemeSwitcher() {
   );
 }
 function SiteSearch({ navigation: navigation$1 }) {
-  const [open, setOpen] = React5__namespace.useState(false);
+  const [open, setOpen] = React6__namespace.useState(false);
   const router = navigation.useRouter();
-  React5__namespace.useEffect(() => {
+  React6__namespace.useEffect(() => {
     const down = (e) => {
       if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
         e.preventDefault();
@@ -7377,7 +7450,7 @@ function SiteSearch({ navigation: navigation$1 }) {
     document.addEventListener("keydown", down);
     return () => document.removeEventListener("keydown", down);
   }, []);
-  const runCommand = React5__namespace.useCallback((command) => {
+  const runCommand = React6__namespace.useCallback((command) => {
     setOpen(false);
     command();
   }, []);
@@ -7420,8 +7493,8 @@ function Header2({
   navigation,
   version = false
 }) {
-  const [isScrolled, setIsScrolled] = React5.useState(false);
-  React5.useEffect(() => {
+  const [isScrolled, setIsScrolled] = React6.useState(false);
+  React6.useEffect(() => {
     function onScroll() {
       setIsScrolled(window.scrollY > 0);
     }
@@ -8311,7 +8384,7 @@ function Slider({
   max = 100,
   ...props
 }) {
-  const _values = React5__namespace.useMemo(
+  const _values = React6__namespace.useMemo(
     () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
     [value, defaultValue, min, max]
   );
@@ -8520,8 +8593,8 @@ function TableCaption({ className, ...props }) {
   );
 }
 function TableOfContents({ tableOfContents }) {
-  const [currentSection, setCurrentSection] = React5.useState(tableOfContents[0]?.id);
-  const getHeadings2 = React5.useCallback((tableOfContents2) => {
+  const [currentSection, setCurrentSection] = React6.useState(tableOfContents[0]?.id);
+  const getHeadings2 = React6.useCallback((tableOfContents2) => {
     return tableOfContents2.flatMap((node) => [node.id, ...node.children.map((child) => child.id)]).map((id) => {
       const el = document.getElementById(id);
       if (!el) return null;
@@ -8531,7 +8604,7 @@ function TableOfContents({ tableOfContents }) {
       return { id, top };
     }).filter((x) => x !== null);
   }, []);
-  React5.useEffect(() => {
+  React6.useEffect(() => {
     if (tableOfContents.length === 0) return;
     const headings = getHeadings2(tableOfContents);
     function onScroll() {
@@ -8663,18 +8736,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: [
@@ -8696,12 +8771,7 @@ function Text({ className, trim = "normal", size = 8, ...props }) {
     {
       "data-slot": "text",
       ...props,
-      className: clsx11__default.default(
-        className,
-        trimClasses[trim],
-        "text-grey-800 dark:text-grey-400 text-base/6 sm:text-sm/6",
-        sizeClasses[size]
-      )
+      className: clsx11__default.default(className, trimClasses[trim], "text-grey-800 dark:text-grey-400", sizeClass)
     }
   );
 }
@@ -8767,13 +8837,14 @@ function ThemeColorPalette() {
     brand,
     aboriginal
   };
-  const [format, setFormat] = React5.useState("hex");
-  const [viewMode, setViewMode] = React5.useState("grid");
-  const [themeCategory, setThemeCategory] = React5.useState("brand");
-  const [primaryColor, setPrimaryColor] = React5.useState("blue");
-  const [accentColor, setAccentColor] = React5.useState("red");
-  const [sheetOpen, setSheetOpen] = React5.useState(false);
-  const filteredColorThemes = React5.useMemo(() => {
+  const [format, setFormat] = React6.useState("hex");
+  const [viewMode, setViewMode] = React6.useState("grid");
+  const [themeCategory, setThemeCategory] = React6.useState("brand");
+  const [primaryColor, setPrimaryColor] = React6.useState("blue");
+  const [accentColor, setAccentColor] = React6.useState("red");
+  const [greyColor, setGreyColor] = React6.useState("grey");
+  const [sheetOpen, setSheetOpen] = React6.useState(false);
+  const filteredColorThemes = React6.useMemo(() => {
     const filtered = {};
     for (const category of Object.keys(colorThemes)) {
       filtered[category] = Object.fromEntries(
@@ -8784,11 +8855,15 @@ function ThemeColorPalette() {
     }
     return filtered;
   }, []);
-  const availableAccentColors = React5.useMemo(() => {
+  const availableAccentColors = React6.useMemo(() => {
     const allColors = Object.keys(filteredColorThemes[themeCategory]);
     return allColors.filter((color) => color !== primaryColor);
   }, [filteredColorThemes, themeCategory, primaryColor]);
-  React5.useEffect(() => {
+  React6.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]);
@@ -8803,8 +8878,8 @@ function ThemeColorPalette() {
         setAccentColor(newAccentColor);
       }
     }
-  }, [themeCategory, primaryColor, accentColor]);
-  const currentColorPalette = React5.useMemo(() => {
+  }, [themeCategory, primaryColor, accentColor, greyColor]);
+  const currentColorPalette = React6.useMemo(() => {
     if (!colorThemes[themeCategory] || !colorThemes[themeCategory][primaryColor] || !colorThemes[themeCategory][accentColor]) {
       return [
         {
@@ -8876,6 +8951,8 @@ function ThemeColorPalette() {
               setPrimaryColor,
               accentColor,
               setAccentColor,
+              greyColor,
+              setGreyColor,
               availableAccentColors,
               colorThemes: filteredColorThemes
             }
@@ -8883,34 +8960,31 @@ function ThemeColorPalette() {
         ] })
       ] })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-12", children: currentColorPalette.map((theme2) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold", children: theme2.name }),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        BaseColorSwatches,
-        {
-          baseColors: baseColors[themeCategory][primaryColor],
-          format
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(ColourScale, { colorsToUse: theme2.colors }, theme2.name),
-      /* @__PURE__ */ jsxRuntime.jsx(ColorSwatches, { theme: theme2.colors, format, viewMode })
-    ] }, theme2.name)) })
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-12", children: currentColorPalette.map((theme2) => {
+      const baseKey = theme2.name === "Primary" ? primaryColor : theme2.name === "Accent" ? accentColor : "grey";
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl font-semibold", children: theme2.name }),
+        /* @__PURE__ */ jsxRuntime.jsx(BaseColorSwatches, { baseColors: baseColors[themeCategory][baseKey], format }),
+        /* @__PURE__ */ jsxRuntime.jsx(ColourScale, { colorsToUse: theme2.colors }),
+        /* @__PURE__ */ jsxRuntime.jsx(ColorSwatches, { theme: theme2.colors, format, viewMode })
+      ] }, theme2.name);
+    }) })
   ] });
 }
 function ThemeProvider({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(nextThemes.ThemeProvider, { ...props, children });
 }
-var TocContext = React5.createContext({
+var TocContext = React6.createContext({
   toc: true,
   setToc: () => {
   }
 });
 function TocProvider({ children }) {
-  const [toc, setToc] = React5.useState(true);
+  const [toc, setToc] = React6.useState(true);
   return /* @__PURE__ */ jsxRuntime.jsx(TocContext.Provider, { value: { toc, setToc }, children });
 }
 function useToc() {
-  return React5.useContext(TocContext);
+  return React6.useContext(TocContext);
 }
 function getNodeText(node) {
   let text = "";
@@ -8990,7 +9064,8 @@ var languages = [
   "jsx",
   "ts",
   "tsx",
-  "typescript"
+  "typescript",
+  "html"
 ];
 
 exports.Accordion = Accordion;