@nypl/design-system-react-components 1.0.6 → 1.1.0-rc

package/dist/theme/components/header/headerSearchForm.d.ts

@@ -0,0 +1,168 @@
+declare const HeaderSearchForm: {
+    parts: string[];
+    baseStyle: {
+        color: string;
+        backgroundColor: string;
+        left: string;
+        minHeight: {
+            base: string;
+            md: string;
+        };
+        position: string;
+        whiteSpace: string;
+        width: string;
+        zIndex: string;
+        svg: {
+            color: string;
+            fill: string;
+            marginTop: string;
+        };
+        form: {
+            margin: {
+                md: string;
+            };
+            maxWidth: {
+                md: string;
+            };
+            whiteSpace: string;
+            "> div": {
+                marginLeft: {
+                    md: string;
+                    lg: string;
+                };
+                marginRight: {
+                    md: string;
+                };
+            };
+        };
+        fieldset: {
+            margin: {
+                base: string;
+                md: string;
+            };
+        };
+        textInput: {
+            label: {
+                fontSize: {
+                    md: string;
+                };
+            };
+            input: {
+                borderRadius: {
+                    md: string;
+                };
+                color: string;
+                minHeight: {
+                    base: string;
+                    md: string;
+                };
+                paddingLeft: {
+                    base: string;
+                    md: string;
+                };
+                _placeholder: {
+                    fontSize: {
+                        base: string;
+                    };
+                    fontStyle: string;
+                };
+                _focus: {
+                    borderRadius: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+                _hover: {
+                    borderRadius: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+            };
+        };
+        mobileSearchIcon: {
+            display: {
+                md: string;
+            };
+            fill: string;
+            left: string;
+            position: string;
+            top: string;
+        };
+        desktopSearchBtn: {
+            alignSelf: string;
+            backgroundColor: string;
+            borderRadius: string;
+            borderWidth: string;
+            height: string;
+            maxHeight: string;
+            width: string;
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+            _hover: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+                backgroundColor: string;
+            };
+        };
+        radio: {
+            backgroundColor: string;
+            border: string;
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+            _hover: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+        ".chakra-radio": {
+            alignItems: string;
+        };
+        ".chakra-radio__label": {
+            fontSize: string;
+            fontWeight: string;
+        };
+        mobileBtns: {
+            alignItems: string;
+            backgroundColor: string;
+            borderRadius: string;
+            display: string;
+            fontSize: string;
+            flex: string;
+            padding: string;
+            svg: {
+                fill: string;
+                marginLeft: string;
+            };
+            _hover: {
+                backgroundColor: string;
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+    };
+};
+export default HeaderSearchForm;

package/dist/theme/components/header/headerSitewideAlerts.d.ts

@@ -0,0 +1,27 @@
+declare const SitewideAlerts: {
+    baseStyle: {
+        backgroundColor: string;
+        borderBottom: {
+            base: string;
+            md: string;
+        };
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        minHeight: {
+            base: string;
+            md: string;
+        };
+        paddingX: string;
+        ul: {
+            marginBottom: string;
+            a: {
+                textDecoration: string;
+            };
+            p: {
+                marginBottom: string;
+            };
+        };
+    };
+};
+export default SitewideAlerts;

package/dist/theme/components/header/headerUpperNav.d.ts

@@ -0,0 +1,57 @@
+declare const HeaderUpperNav: {
+    parts: string[];
+    baseStyle: {
+        ul: {
+            alignItems: string;
+            display: string;
+            marginTop: string;
+            whiteSpace: string;
+        };
+        li: {
+            fontSize: string;
+            fontWeight: number;
+            letterSpacing: string;
+            marginRight: string;
+            position: string;
+            textTransform: string;
+        };
+        a: {
+            color: string;
+            padding: string;
+            position: string;
+            textDecoration: string;
+            _hover: {
+                color: string;
+                textDecoration: string;
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+        svg: {
+            marginTop: string;
+        };
+        emailUpdatesLink: {
+            display: string;
+            alignItems: string;
+        };
+        donateLink: {
+            alignItems: string;
+            bg: string;
+            borderRadius: string;
+            color: string;
+            fontWeight: string;
+            maxHeight: string;
+            paddingX: string;
+            width: string;
+            _hover: {
+                bg: string;
+            };
+        };
+    };
+};
+export default HeaderUpperNav;

package/dist/theme/components/hero.d.ts

@@ -40,17 +40,7 @@ declare const Hero: {
         };
         secondary: {
             heading: {
-                marginBottom: string;
                 bg: string;
-                color: string;
-                flex: string;
-                marginTop: string;
-                paddingBottom: string;
-                position: string;
-                zIndex: string;
-                order: {
-                    md: string;
-                };
                 _before: {
                     bg: string;
                     content: string;
@@ -60,6 +50,14 @@ declare const Hero: {
                     width: string;
                     zIndex: string;
                 };
+                marginBottom: string;
+                color: string;
+                flex: string;
+                marginTop: string;
+                paddingBottom: string;
+                position: string;
+                zIndex: string;
+                order: string;
             };
             overflowX: string;
             content: {
@@ -70,24 +68,35 @@ declare const Hero: {
                     base: string;
                     md: string;
                 };
+                marginY: string;
+                marginX: string;
+                maxWidth: string;
+                padding: string;
+                width: string;
+            };
+            imgWrapper: {
+                marginEnd: {
+                    base: string;
+                    md: string;
+                };
+                marginStart: {
+                    base: string;
+                    md: string;
+                };
+                flex: {
+                    base: string;
+                    md: string;
+                };
+                order: {
+                    base: string;
+                    md: string;
+                };
                 img: {
-                    flex: {
-                        base: string;
-                        md: string;
-                    };
-                    order: {
-                        md: string;
-                    };
                     height: string;
                     minWidth: string;
                     objectFit: string;
                     width: string;
                 };
-                marginY: string;
-                marginX: string;
-                maxWidth: string;
-                padding: string;
-                width: string;
             };
             bodyText: {
                 paddingBottom: string;
@@ -99,6 +108,7 @@ declare const Hero: {
                     md: string;
                 };
                 order: {
+                    base: string;
                     md: string;
                 };
             };
@@ -122,9 +132,7 @@ declare const Hero: {
                 paddingBottom: string;
                 position: string;
                 zIndex: string;
-                order: {
-                    md: string;
-                };
+                order: string;
             };
             overflowX: string;
             content: {
@@ -135,24 +143,35 @@ declare const Hero: {
                     base: string;
                     md: string;
                 };
+                marginY: string;
+                marginX: string;
+                maxWidth: string;
+                padding: string;
+                width: string;
+            };
+            imgWrapper: {
+                marginEnd: {
+                    base: string;
+                    md: string;
+                };
+                marginStart: {
+                    base: string;
+                    md: string;
+                };
+                flex: {
+                    base: string;
+                    md: string;
+                };
+                order: {
+                    base: string;
+                    md: string;
+                };
                 img: {
-                    flex: {
-                        base: string;
-                        md: string;
-                    };
-                    order: {
-                        md: string;
-                    };
                     height: string;
                     minWidth: string;
                     objectFit: string;
                     width: string;
                 };
-                marginY: string;
-                marginX: string;
-                maxWidth: string;
-                padding: string;
-                width: string;
             };
             bodyText: {
                 paddingBottom: string;
@@ -164,6 +183,7 @@ declare const Hero: {
                     md: string;
                 };
                 order: {
+                    base: string;
                     md: string;
                 };
             };
@@ -187,9 +207,7 @@ declare const Hero: {
                 paddingBottom: string;
                 position: string;
                 zIndex: string;
-                order: {
-                    md: string;
-                };
+                order: string;
             };
             overflowX: string;
             content: {
@@ -200,24 +218,35 @@ declare const Hero: {
                     base: string;
                     md: string;
                 };
+                marginY: string;
+                marginX: string;
+                maxWidth: string;
+                padding: string;
+                width: string;
+            };
+            imgWrapper: {
+                marginEnd: {
+                    base: string;
+                    md: string;
+                };
+                marginStart: {
+                    base: string;
+                    md: string;
+                };
+                flex: {
+                    base: string;
+                    md: string;
+                };
+                order: {
+                    base: string;
+                    md: string;
+                };
                 img: {
-                    flex: {
-                        base: string;
-                        md: string;
-                    };
-                    order: {
-                        md: string;
-                    };
                     height: string;
                     minWidth: string;
                     objectFit: string;
                     width: string;
                 };
-                marginY: string;
-                marginX: string;
-                maxWidth: string;
-                padding: string;
-                width: string;
             };
             bodyText: {
                 paddingBottom: string;
@@ -229,6 +258,7 @@ declare const Hero: {
                     md: string;
                 };
                 order: {
+                    base: string;
                     md: string;
                 };
             };
@@ -252,9 +282,7 @@ declare const Hero: {
                 paddingBottom: string;
                 position: string;
                 zIndex: string;
-                order: {
-                    md: string;
-                };
+                order: string;
             };
             overflowX: string;
             content: {
@@ -265,24 +293,35 @@ declare const Hero: {
                     base: string;
                     md: string;
                 };
+                marginY: string;
+                marginX: string;
+                maxWidth: string;
+                padding: string;
+                width: string;
+            };
+            imgWrapper: {
+                marginEnd: {
+                    base: string;
+                    md: string;
+                };
+                marginStart: {
+                    base: string;
+                    md: string;
+                };
+                flex: {
+                    base: string;
+                    md: string;
+                };
+                order: {
+                    base: string;
+                    md: string;
+                };
                 img: {
-                    flex: {
-                        base: string;
-                        md: string;
-                    };
-                    order: {
-                        md: string;
-                    };
                     height: string;
                     minWidth: string;
                     objectFit: string;
                     width: string;
                 };
-                marginY: string;
-                marginX: string;
-                maxWidth: string;
-                padding: string;
-                width: string;
             };
             bodyText: {
                 paddingBottom: string;
@@ -294,6 +333,7 @@ declare const Hero: {
                     md: string;
                 };
                 order: {
+                    base: string;
                     md: string;
                 };
             };
@@ -317,9 +357,7 @@ declare const Hero: {
                 paddingBottom: string;
                 position: string;
                 zIndex: string;
-                order: {
-                    md: string;
-                };
+                order: string;
             };
             overflowX: string;
             content: {
@@ -330,24 +368,35 @@ declare const Hero: {
                     base: string;
                     md: string;
                 };
+                marginY: string;
+                marginX: string;
+                maxWidth: string;
+                padding: string;
+                width: string;
+            };
+            imgWrapper: {
+                marginEnd: {
+                    base: string;
+                    md: string;
+                };
+                marginStart: {
+                    base: string;
+                    md: string;
+                };
+                flex: {
+                    base: string;
+                    md: string;
+                };
+                order: {
+                    base: string;
+                    md: string;
+                };
                 img: {
-                    flex: {
-                        base: string;
-                        md: string;
-                    };
-                    order: {
-                        md: string;
-                    };
                     height: string;
                     minWidth: string;
                     objectFit: string;
                     width: string;
                 };
-                marginY: string;
-                marginX: string;
-                maxWidth: string;
-                padding: string;
-                width: string;
             };
             bodyText: {
                 paddingBottom: string;
@@ -359,6 +408,7 @@ declare const Hero: {
                     md: string;
                 };
                 order: {
+                    base: string;
                     md: string;
                 };
             };
@@ -470,18 +520,22 @@ declare const Hero: {
                 maxWidth: string;
                 width: string;
             };
-            img: {
+            imgWrapper: {
                 marginBottom: {
                     base: string;
                     lg: string;
                 };
                 marginEnd: {
+                    base: string;
                     lg: string;
                 };
-                maxWidth: {
+                marginStart: {
                     base: string;
+                };
+                maxWidth: {
                     lg: string;
                 };
+                width: string;
             };
         };
     };

package/dist/theme/components/list.d.ts

@@ -34,7 +34,7 @@ export declare const baseUnorderedStyles: (noStyling?: boolean) => {
     margin: string;
     marginBottom: string;
 };
-export declare const baseSectionDefinitionStyles: {
+export declare const baseSectionDescriptionStyles: {
     borderBottom: string;
     borderColor: string;
     paddingStart: string;
@@ -45,7 +45,7 @@ export declare const baseSectionDefinitionStyles: {
         padding: string;
     };
 };
-export declare const baseDefinitionStyles: {
+export declare const baseDescriptionStyles: {
     dl: {
         display: string;
         gridTemplateColumns: {

package/dist/theme/components/radio.d.ts

@@ -85,10 +85,19 @@ declare const Radio: {
         };
         hiddenLabel: {
             clip: string;
-            height: string;
+            height: {
+                base: string;
+                md: string;
+            };
             overflow: string;
-            position: string;
-            width: string;
+            position: {
+                base: string;
+                md: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
             wordWrap: string;
         };
     };

package/dist/theme/components/skipNavigation.d.ts

@@ -12,10 +12,10 @@ declare const SkipNavigation: {
             top: string;
             width: string;
             _focus: {
-                border: string;
                 height: string;
                 left: string;
-                padding: string;
+                paddingX: string;
+                paddingY: string;
                 top: string;
                 width: string;
             };