@nswds/app 1.22.0 → 1.23.1

package/dist/index.cjs

@@ -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);
@@ -5954,6 +5961,7 @@ function CodeDemo({ data, hide = {} }) {
   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]);
@@ -5966,9 +5974,10 @@ function CodeDemo({ data, hide = {} }) {
   const themeValues = React6__namespace.default.useMemo(
     () => ({
       ...getShades("primary", primaryColor, themeCategory),
-      ...getShades("accent", accentColor, themeCategory)
+      ...getShades("accent", accentColor, themeCategory),
+      ...getShades("grey", greyColor, themeCategory)
     }),
-    [themeCategory, primaryColor, accentColor]
+    [themeCategory, primaryColor, accentColor, greyColor]
   );
   React6__namespace.default.useEffect(() => {
     const frame = iframeRef.current;
@@ -6024,6 +6033,14 @@ function CodeDemo({ data, hide = {} }) {
   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);
@@ -6042,7 +6059,9 @@ function CodeDemo({ data, hide = {} }) {
             primaryColor,
             setPrimaryColor,
             accentColor,
-            setAccentColor
+            setAccentColor,
+            greyColor,
+            setGreyColor
           }
         ),
         !rtl && /* @__PURE__ */ jsxRuntime.jsx(ToggleRTLButton, { isRTL, onClick: () => setIsRTL((state) => !state) }),
@@ -6061,14 +6080,14 @@ function CodeDemo({ data, hide = {} }) {
         view,
         isRTL,
         isDarkMode,
-        iframe: data.iframe,
+        iframe: iframeData,
         themeValues,
-        children: data.iframe ? /* @__PURE__ */ jsxRuntime.jsx(
+        children: iframeData ? /* @__PURE__ */ jsxRuntime.jsx(
           IFrame,
           {
             sandbox: "allow-scripts allow-same-origin",
             ref: iframeRef,
-            data,
+            iframe: iframeData,
             isRTL,
             isDarkMode
           }
@@ -6118,7 +6137,7 @@ function CodeDemo({ data, hide = {} }) {
   ] });
 }
 var IFrame = React6__namespace.default.forwardRef(
-  ({ data, isRTL, isDarkMode }, ref) => {
+  ({ iframe, isRTL, isDarkMode }, ref) => {
     React6.useEffect(() => {
       const document2 = ref?.current?.contentDocument;
       const root = document2?.documentElement;
@@ -6127,11 +6146,11 @@ var IFrame = React6__namespace.default.forwardRef(
         root.classList.toggle("dark", !!isDarkMode);
       }
     }, [isRTL, isDarkMode, ref]);
-    if (typeof data.iframe === "number") {
-      return /* @__PURE__ */ jsxRuntime.jsx("iframe", { ref, src: "", height: data.iframe, width: "100%", className: "w-full" });
+    if (typeof iframe === "number") {
+      return /* @__PURE__ */ jsxRuntime.jsx("iframe", { ref, src: "", height: iframe, width: "100%", className: "w-full" });
     }
-    if (typeof data.iframe === "object" && data.iframe?.src) {
-      const { src, height = 0, width = 100, noPadding } = data.iframe;
+    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" });
@@ -6236,7 +6255,9 @@ function ThemeSelectorDropDown({
   primaryColor,
   setPrimaryColor,
   accentColor,
-  setAccentColor
+  setAccentColor,
+  greyColor,
+  setGreyColor
 }) {
   const filteredColorThemes = React6.useMemo(() => {
     const filtered = {};
@@ -6254,6 +6275,10 @@ function ThemeSelectorDropDown({
     return allColors.filter((color) => color !== primaryColor);
   }, [filteredColorThemes, themeCategory, primaryColor]);
   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]);
@@ -6268,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: [
@@ -6289,6 +6322,8 @@ function ThemeSelectorDropDown({
         setPrimaryColor,
         accentColor,
         setAccentColor,
+        greyColor,
+        setGreyColor,
         availableAccentColors,
         colorThemes: filteredColorThemes
       }
@@ -7337,7 +7372,7 @@ function Heading({
 
 // package.json
 var package_default = {
-  version: "1.21.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" }),
@@ -8807,6 +8842,7 @@ function ThemeColorPalette() {
   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 = {};
@@ -8824,6 +8860,10 @@ function ThemeColorPalette() {
     return allColors.filter((color) => color !== primaryColor);
   }, [filteredColorThemes, themeCategory, primaryColor]);
   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]);
@@ -8838,7 +8878,7 @@ function ThemeColorPalette() {
         setAccentColor(newAccentColor);
       }
     }
-  }, [themeCategory, primaryColor, accentColor]);
+  }, [themeCategory, primaryColor, accentColor, greyColor]);
   const currentColorPalette = React6.useMemo(() => {
     if (!colorThemes[themeCategory] || !colorThemes[themeCategory][primaryColor] || !colorThemes[themeCategory][accentColor]) {
       return [
@@ -8911,6 +8951,8 @@ function ThemeColorPalette() {
               setPrimaryColor,
               accentColor,
               setAccentColor,
+              greyColor,
+              setGreyColor,
               availableAccentColors,
               colorThemes: filteredColorThemes
             }