@nypl/design-system-react-components 3.4.2 → 3.4.3-rc2

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

@@ -0,0 +1,72 @@
+declare const HeaderLoginButton: {
+    baseStyle: ({ isOpen }: {
+        isOpen: any;
+    }) => {
+        alignItems: {
+            base: string;
+        };
+        bg: {
+            base: string;
+            mh: string;
+        };
+        borderRadius: string;
+        color: string;
+        display: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        justifyContent: string;
+        minHeight: {
+            mh: string;
+        };
+        paddingY: {
+            mh: string;
+        };
+        svg: {
+            fill: string;
+            marginLeft: {
+                base: string;
+                mh: string;
+            };
+            marginTop: {
+                base: string;
+            };
+        };
+        textDecoration: string;
+        textTransform: string;
+        _hover: {
+            backgroundColor: {
+                base: string;
+                mh: string;
+            };
+            color: string;
+            svg: {
+                fill: string;
+            };
+            textDecoration: string;
+        };
+        _focus: {
+            borderRadius: string;
+            outlineColor: string;
+            outlineOffset: string;
+            outlineStyle: string;
+            outlineWidth: string;
+        };
+        _dark: {
+            bg: {
+                base: string;
+                mh: string;
+            };
+            color: string;
+            svg: {
+                fill: string;
+            };
+            _hover: {
+                svg: {
+                    fill: string;
+                };
+            };
+        };
+    };
+};
+export default HeaderLoginButton;

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

@@ -0,0 +1,78 @@
+declare const HeaderLowerNav: {
+    baseStyle: {
+        ul: {
+            alignItems: string;
+            marginBottom: string;
+            marginLeft: string;
+            whiteSpace: string;
+        };
+        li: {
+            marginEnd: {
+                mh: string;
+                xl: string;
+            };
+            _last: {
+                marginRight: string;
+            };
+        };
+        "li > a": {
+            color: string;
+            fontSize: {
+                base: string;
+                lh: string;
+            };
+            fontWeight: string;
+            textDecoration: string;
+            _hover: {
+                borderBottom: string;
+                color: string;
+                paddingBottom: string;
+                textDecoration: string;
+                _dark: {
+                    color: string;
+                };
+            };
+            _focus: {
+                borderBottom: string;
+                color: string;
+                paddingBottom: string;
+                textDecoration: string;
+                _dark: {
+                    color: string;
+                };
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+            _dark: {
+                color: string;
+                _hover: {
+                    borderBottom: string;
+                    color: string;
+                    paddingBottom: string;
+                    textDecoration: string;
+                    _dark: {
+                        color: string;
+                    };
+                };
+                _focus: {
+                    borderBottom: string;
+                    color: string;
+                    paddingBottom: string;
+                    textDecoration: string;
+                    _dark: {
+                        color: string;
+                    };
+                    borderRadius: string;
+                    outlineColor: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+            };
+        };
+    };
+};
+export default HeaderLowerNav;

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

@@ -0,0 +1,28 @@
+declare const HeaderMobileIconNav: {
+    baseStyle: {
+        button: {
+            minHeight: string;
+            minWidth: string;
+        };
+        "> a": {
+            display: string;
+            alignItems: string;
+            justifyContent: string;
+            minHeight: string;
+            minWidth: string;
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+        _dark: {
+            svg: {
+                fill: string;
+            };
+        };
+    };
+};
+export default HeaderMobileIconNav;

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

@@ -0,0 +1,92 @@
+declare const HeaderMobileNav: {
+    parts: string[];
+    baseStyle: () => {
+        backgroundColor: string;
+        color: string;
+        left: string;
+        minHeight: string;
+        position: string;
+        whiteSpace: string;
+        width: string;
+        zIndex: string;
+        logo: {
+            marginTop: string;
+            marginLeft: string;
+        };
+        sideNav: {
+            lineHeight: string;
+            marginBottom: string;
+            padding: string;
+            textAlign: string;
+            "li:not(:first-child)": {
+                marginTop: string;
+            };
+            a: {
+                color: string;
+                fontSize: string;
+                fontWeight: string;
+                textDecoration: string;
+                _hover: {
+                    color: string;
+                    textDecoration: string;
+                };
+                _focus: {
+                    outlineColor: string;
+                    borderRadius: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+                _visited: {
+                    color: string;
+                };
+            };
+        };
+        bottomLinks: {
+            display: string;
+            gridTemplateColumns: string;
+            a: {
+                alignItems: string;
+                color: string;
+                display: string;
+                fontWeight: string;
+                justifyContent: string;
+                textDecoration: string;
+                paddingY: string;
+                paddingLeft: string;
+                svg: {
+                    marginRight: string;
+                };
+                _hover: {
+                    color: string;
+                    backgroundColor: string;
+                    textDecoration: string;
+                };
+                _focus: {
+                    outlineColor: string;
+                    borderRadius: string;
+                    outlineOffset: string;
+                    outlineStyle: string;
+                    outlineWidth: string;
+                };
+                _visited: {
+                    color: string;
+                };
+                _last: {
+                    backgroundColor: string;
+                    _hover: {
+                        backgroundColor: string;
+                    };
+                    _dark: {
+                        bgColor: string;
+                        color: string;
+                        _hover: {
+                            bgColor: string;
+                        };
+                    };
+                };
+            };
+        };
+    };
+};
+export default HeaderMobileNav;

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

@@ -0,0 +1,36 @@
+declare const HeaderMobileNavButton: {
+    baseStyle: ({ isOpen }: {
+        isOpen: any;
+    }) => {
+        alignItems: string;
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        display: string;
+        justifyContent: string;
+        svg: {
+            fill: string;
+            marginLeft: string;
+        };
+        _hover: {
+            backgroundColor: string;
+            svg: {
+                fill: string;
+            };
+        };
+        _focus: {
+            borderRadius: string;
+            outlineColor: string;
+            outlineOffset: string;
+            outlineStyle: string;
+            outlineWidth: string;
+        };
+        _dark: {
+            backgroundColor: string;
+            svg: {
+                fill: string;
+            };
+        };
+    };
+};
+export default HeaderMobileNavButton;

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

@@ -0,0 +1,85 @@
+declare const HeaderSearchButton: {
+    baseStyle: ({ isOpen }: {
+        isOpen: any;
+    }) => {
+        alignItems: string;
+        borderRadius: string;
+        backgroundColor: string;
+        color: string;
+        display: string;
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        justifyContent: string;
+        minHeight: {
+            mh: string;
+        };
+        minWidth: {
+            mh: string;
+        };
+        textDecoration: string;
+        _dark: {
+            bgColor: string;
+            color: string;
+        };
+        span: {
+            alignItems: string;
+            borderBottom: {
+                mh: string;
+            };
+            display: string;
+            _dark: {
+                borderBottom: string | {
+                    mh: string;
+                };
+                borderColor: {
+                    mh: string;
+                };
+            };
+        };
+        svg: {
+            marginLeft: {
+                base: string;
+                mh: string;
+            };
+            fill: {
+                base: string;
+                mh: string;
+            };
+            _dark: {
+                fill: {
+                    base: string;
+                    mh: string;
+                };
+            };
+        };
+        _hover: {
+            backgroundColor: string;
+            color: string;
+            textDecoration: string;
+            svg: {
+                fill: {
+                    base: string;
+                    mh: string;
+                };
+            };
+            _dark: {
+                color: string;
+                svg: {
+                    fill: {
+                        base: string;
+                        mh: string;
+                    };
+                };
+            };
+        };
+        _focus: {
+            borderRadius: string;
+            outlineColor: string;
+            outlineOffset: string;
+            outlineStyle: string;
+            outlineWidth: string;
+        };
+    };
+};
+export default HeaderSearchButton;

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

@@ -0,0 +1,185 @@
+declare const HeaderSearchForm: {
+    parts: string[];
+    baseStyle: {
+        color: string;
+        backgroundColor: string;
+        left: string;
+        minHeight: {
+            base: string;
+            mh: string;
+        };
+        position: string;
+        whiteSpace: string;
+        width: string;
+        zIndex: string;
+        svg: {
+            color: string;
+            fill: string;
+            marginTop: string;
+        };
+        form: {
+            margin: {
+                mh: string;
+            };
+            maxWidth: {
+                mh: string;
+            };
+            whiteSpace: string;
+            "> div": {
+                margin: string;
+                marginLeft: {
+                    mh: string;
+                    lh: string;
+                };
+                marginRight: {
+                    mh: string;
+                };
+            };
+        };
+        "#radio-group-search-type": {
+            margin: {
+                base: string;
+                mh: string;
+            };
+        };
+        textInput: {
+            label: {
+                color: string;
+                fontSize: {
+                    base: string;
+                    mh: string;
+                };
+            };
+            input: {
+                borderRadius: {
+                    mh: string;
+                };
+                color: string;
+                lineHeight: string;
+                minHeight: {
+                    base: string;
+                    mh: string;
+                };
+                paddingLeft: {
+                    base: string;
+                    mh: 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;
+                };
+                _dark: {
+                    color: string;
+                };
+            };
+        };
+        searchBtn: {
+            alignSelf: string;
+            backgroundColor: string;
+            borderColor: string;
+            borderRadius: string;
+            borderWidth: string;
+            height: {
+                base: string;
+                mh: string;
+            };
+            marginTop: string;
+            marginEnd: string;
+            maxHeight: string;
+            svg: {
+                marginTop: string;
+            };
+            width: {
+                base: string;
+                mh: 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": {
+            fontWeight: string;
+        };
+        mobileBtns: {
+            alignItems: string;
+            backgroundColor: string;
+            borderRadius: string;
+            display: string;
+            fontSize: string;
+            flex: string;
+            justifyContent: string;
+            padding: string;
+            svg: {
+                fill: string;
+                marginLeft: string;
+            };
+            _hover: {
+                backgroundColor: string;
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+        _dark: {
+            bgColor: string;
+            color: string;
+            label: {
+                color: string;
+            };
+        };
+    };
+};
+export default HeaderSearchForm;

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

@@ -0,0 +1,43 @@
+declare const SitewideAlerts: {
+    baseStyle: {
+        backgroundColor: string;
+        borderBottom: {
+            base: string;
+            mh: string;
+        };
+        fontSize: string;
+        fontWeight: string;
+        lineHeight: string;
+        minHeight: {
+            base: string;
+            mh: string;
+        };
+        paddingX: string;
+        ul: {
+            marginBottom: string;
+            a: {
+                textDecoration: string;
+            };
+            p: {
+                marginBottom: string;
+                marginTop: string;
+            };
+            _dark: {
+                color: string;
+                a: {
+                    color: string;
+                    _hover: {
+                        color: string;
+                    };
+                };
+            };
+        };
+        _dark: {
+            backgroundColor: string;
+            borderBottom: string;
+            borderColor: string;
+            color: string;
+        };
+    };
+};
+export default SitewideAlerts;

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

@@ -0,0 +1,60 @@
+declare const HeaderUpperNav: {
+    parts: string[];
+    baseStyle: {
+        height: string;
+        ul: {
+            alignItems: string;
+            display: string;
+            margin: string;
+            whiteSpace: string;
+        };
+        li: {
+            fontSize: string;
+            fontWeight: string;
+            marginRight: string;
+            _last: {
+                marginRight: string;
+            };
+        };
+        a: {
+            color: string;
+            position: string;
+            textDecoration: string;
+            _hover: {
+                color: string;
+                textDecoration: string;
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+            _dark: {
+                color: string;
+                _hover: {
+                    color: string;
+                };
+            };
+        };
+        svg: {
+            _dark: {
+                fill: string;
+            };
+        };
+        donateLink: {
+            color: string;
+            _hover: {
+                color: string;
+            };
+            _dark: {
+                bgColor: string;
+                _hover: {
+                    bgColor: string;
+                };
+            };
+        };
+    };
+};
+export default HeaderUpperNav;

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

@@ -35,7 +35,7 @@ declare const NewsletterSignup: {
                     md: "dark.ui.border.default";
                 };
                 borderLeftColor: {
-                    md: "dark.section.blogs.secondary" | "dark.section.locations.primary" | "dark.section.books-and-more.primary" | "dark.brand.primary" | "dark.section.connect.primary" | "dark.section.education.primary" | "dark.section.research.primary" | "dark.section.research-library.lpa" | "dark.section.research-library.schomburg" | "dark.section.whats-on.primary" | "dark.ui.gray.medium" | "dark.section.research-library.schwartzman";
+                    md: "dark.section.blogs.secondary" | "dark.section.locations.primary" | "dark.brand.primary" | "dark.section.books-and-more.primary" | "dark.section.connect.primary" | "dark.section.education.primary" | "dark.section.research.primary" | "dark.section.research-library.lpa" | "dark.section.research-library.schomburg" | "dark.section.whats-on.primary" | "dark.ui.gray.medium" | "dark.section.research-library.schwartzman";
                 };
             };
             padding: {