@nypl/design-system-react-components 3.5.0-rc2 → 3.5.0-rc4

package/dist/design-system-react-components.js

@@ -38200,47 +38200,57 @@ const _z = re({
     flexDirection: { base: "column", md: null },
     gridTemplateColumns: "1fr",
     paddingY: 0,
-    paddingX: "s",
-    gap: "grid.l"
+    rowGap: "grid.l"
   }),
   // With left or right sidebars, we need to set two grid columns and
-  // the column for the sidebar is max 255px width.
+  // the column for the sidebar is max 271px width (255px for the sidebar
+  // + 16px for padding).
   variants: {
     left: {
-      gridTemplateColumns: { md: "255px 1fr" }
+      gridTemplateColumns: { md: "271px 1fr" }
     },
     right: {
-      gridTemplateColumns: { md: "1fr 255px" }
+      gridTemplateColumns: { md: "1fr 271px" }
     }
   }
 }), nI = re({
   baseStyle: C2({
     gridColumn: { base: "1", md: "1 / span 2" },
-    height: "100%"
+    height: "100%",
+    paddingX: "s"
   })
 }), rI = re({
   baseStyle: C2({
-    gridColumn: { base: "1", md: "1 / span 2" }
+    gridColumn: { base: "1", md: "1 / span 2" },
+    paddingX: "s"
   }),
   variants: {
     left: {
       gridColumn: { base: "1", md: "2" },
       marginEnd: { md: 0 },
       minWidth: { md: 0 },
+      paddingRight: "s",
+      paddingLeft: { base: "s", md: "l" },
       overflow: { base: "unset", md: "hidden" }
     },
     right: {
-      gridColumn: { base: "1", md: "1" },
+      gridColumn: "1",
+      paddingRight: { base: "s", md: "l" },
+      paddingLeft: "s",
       overflow: { base: "unset", md: "hidden" }
     }
   }
 }), aI = re({
   variants: {
     left: {
-      gridColumn: "1"
+      gridColumn: "1",
+      paddingLeft: "s",
+      paddingRight: { base: "s", md: 0 }
     },
     right: {
-      gridColumn: { base: "1", md: "2" }
+      gridColumn: { base: "1", md: "2" },
+      paddingLeft: { base: "s", md: 0 },
+      paddingRight: "s"
     }
   }
 }), iI = {
@@ -42910,19 +42920,27 @@ function l$() {
     showRightFade: n
   };
 }
-const s$ = ({ id: n, children: a, isOutlined: o, isSelected: l, screenreaderOnlyText: i = "" }) => {
-  const f = S2("SubNavChildren", {
+const s$ = ({
+  id: n,
+  children: a,
+  isOutlined: o,
+  isSelected: l,
+  onClick: i,
+  screenreaderOnlyText: f = ""
+}) => {
+  const d = S2("SubNavChildren", {
     isOutlined: o
   });
   return /* @__PURE__ */ x.jsx("li", { children: /* @__PURE__ */ x.jsx(
     y3,
     {
-      id: n,
+      "aria-current": l ? "page" : null,
       buttonType: "text",
       className: l ? "selectedItem" : "",
-      sx: f.outLine,
-      "aria-current": l ? "page" : null,
-      screenreaderOnlyText: i,
+      id: n,
+      onClick: i,
+      screenreaderOnlyText: f,
+      sx: d.outLine,
       children: a
     }
   ) });
@@ -42940,13 +42958,13 @@ const s$ = ({ id: n, children: a, isOutlined: o, isSelected: l, screenreaderOnly
   return /* @__PURE__ */ x.jsx("li", { children: /* @__PURE__ */ x.jsx(
     we,
     {
-      id: n,
-      type: "action",
+      "aria-current": l ? "page" : null,
+      className: l ? "selectedItem" : "",
       href: i,
+      id: n,
       isUnderlined: !1,
       screenreaderOnlyText: f,
-      "aria-current": l ? "page" : null,
-      className: l ? "selectedItem" : "",
+      type: "action",
       sx: d.outLine,
       children: a
     },

package/dist/src/theme/components/template.d.ts

@@ -50,8 +50,7 @@ declare const _default: {
             };
             gridTemplateColumns: string;
             paddingY: number;
-            paddingX: string;
-            gap: string;
+            rowGap: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -59,12 +58,12 @@ declare const _default: {
         variants?: {
             left: {
                 gridTemplateColumns: {
-                    md: "255px 1fr";
+                    md: "271px 1fr";
                 };
             };
             right: {
                 gridTemplateColumns: {
-                    md: "1fr 255px";
+                    md: "1fr 271px";
                 };
             };
         };
@@ -81,6 +80,7 @@ declare const _default: {
                 md: "1 / span 2";
             };
             height: string;
+            paddingX: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -100,6 +100,7 @@ declare const _default: {
                 base: "1";
                 md: "1 / span 2";
             };
+            paddingX: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -116,16 +117,23 @@ declare const _default: {
                 minWidth: {
                     md: number;
                 };
+                paddingRight: string;
+                paddingLeft: {
+                    base: "s";
+                    md: "l";
+                };
                 overflow: {
                     base: "unset";
                     md: "hidden";
                 };
             };
             right: {
-                gridColumn: {
-                    base: "1";
-                    md: "1";
+                gridColumn: string;
+                paddingRight: {
+                    base: "s";
+                    md: "l";
                 };
+                paddingLeft: string;
                 overflow: {
                     base: "unset";
                     md: "hidden";
@@ -146,12 +154,22 @@ declare const _default: {
         variants?: {
             left: {
                 gridColumn: string;
+                paddingLeft: string;
+                paddingRight: {
+                    base: "s";
+                    md: number;
+                };
             };
             right: {
                 gridColumn: {
                     base: "1";
                     md: "2";
                 };
+                paddingLeft: {
+                    base: "s";
+                    md: number;
+                };
+                paddingRight: string;
             };
         };
         defaultProps?: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "3.5.0-rc2",
+  "version": "3.5.0-rc4",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",