@nypl/design-system-react-components 3.4.1 → 3.4.3-rc

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/heading.d.ts

@@ -160,6 +160,30 @@ export declare const headings: {
             width: string;
         };
     };
+    heading7: {
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading7";
+                md: "desktop.heading.heading7";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+    };
+    heading8: {
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading8";
+                md: "desktop.heading.heading8";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+    };
 };
 declare const Heading: {
     baseStyle?: ({ isCapitalized, isUppercase, isLowercase, noSpace }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
@@ -459,6 +483,30 @@ declare const Heading: {
                 width: string;
             };
         };
+        heading7: {
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading7";
+                    md: "desktop.heading.heading7";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+            };
+        };
+        heading8: {
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading8";
+                    md: "desktop.heading.heading8";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+            };
+        };
         primary: {
             base: {
                 width: string;
@@ -513,7 +561,7 @@ declare const Heading: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
         colorScheme?: string;
     };
     parts: ("base" | "headingWrapper")[];

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

@@ -0,0 +1,56 @@
+import { StyleFunctionProps } from "@chakra-ui/system";
+declare const align: Record<string, {
+    marginEnd?: string;
+    marginStart?: string;
+}>;
+declare const iconRotation: Record<string, {
+    transform: string;
+}>;
+declare const size: Record<string, {
+    height?: string;
+    width?: string;
+}>;
+interface IconBaseStyle extends StyleFunctionProps {
+    align: keyof typeof align;
+    color: string;
+    iconRotation: keyof typeof iconRotation;
+    size: keyof typeof size;
+}
+declare const Icon: {
+    baseStyle?: (props: IconBaseStyle) => {
+        svg: {
+            height: string;
+            width: string;
+            transform: string;
+            fill: string;
+            marginEnd?: string;
+            marginStart?: string;
+            display: string;
+        };
+        height: string;
+        width: string;
+        transform: string;
+        fill: string;
+        marginEnd?: string;
+        marginStart?: string;
+        display: string;
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
+        default: {};
+        breadcrumbs: {
+            fill: string;
+            display: {
+                md: "none";
+            };
+        };
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "default" | "breadcrumbs";
+        colorScheme?: string;
+    };
+};
+export default Icon;

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

@@ -151,6 +151,7 @@ declare const Link: {
             base: {
                 alignItems: string;
                 display: string;
+                whiteSpace: string;
                 svg: {
                     height: string;
                     width: string;

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: {

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

@@ -79,12 +79,12 @@ declare const CustomSlider: {
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
+            keys: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
         }>;
     };
     variants?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
+            keys: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
         }>;
     };
     defaultProps?: {
@@ -92,6 +92,6 @@ declare const CustomSlider: {
         variant?: string | number;
         colorScheme?: string;
     };
-    parts: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
+    parts: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
 };
 export default CustomSlider;

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

@@ -167,6 +167,30 @@ declare const StructuredContent: {
                 width: string;
             };
         };
+        heading7: {
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading7";
+                    md: "desktop.heading.heading7";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+            };
+        };
+        heading8: {
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading8";
+                    md: "desktop.heading.heading8";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+            };
+        };
         imageFigure: {
             marginBottom: string;
             maxWidth?: string;
@@ -348,7 +372,10 @@ declare const StructuredContent: {
                     zIndex: string;
                     _dark: {
                         backgroundColor: string;
-                        borderRight: string;
+                        borderRight: string | {
+                            base: any;
+                            md: string;
+                        };
                     };
                 };
                 _dark: {
@@ -356,10 +383,7 @@ declare const StructuredContent: {
                 };
                 border: string;
                 borderBottom: string;
-                borderColor: string | {
-                    base: string;
-                    md: string;
-                };
+                borderColor: string;
                 display: {
                     base: string;
                     md: string;
@@ -382,10 +406,7 @@ declare const StructuredContent: {
                 };
                 _last: {
                     borderBottom: string;
-                    borderColor: string | {
-                        base: string;
-                        md: string;
-                    };
+                    borderColor: string;
                 };
                 "> span": {
                     flexBasis: string;
@@ -417,14 +438,10 @@ declare const StructuredContent: {
                         base: number;
                         md: string;
                     };
-                    borderColor: string;
                 };
                 border: string;
                 borderBottom: string;
-                borderColor: string | {
-                    base: string;
-                    md: string;
-                };
+                borderColor: string;
                 display: {
                     base: string;
                     md: string;
@@ -447,9 +464,9 @@ declare const StructuredContent: {
                     md: string;
                 };
                 _first: {
-                    borderBottom: string | {
-                        base: string;
-                        md: string;
+                    borderBottom: string;
+                    _dark: {
+                        borderBottom: string;
                     };
                 };
                 "> span": {

package/dist/src/theme/foundations/breakpoints.d.ts

@@ -1,3 +1,7 @@
+export declare const headerBreakpoints: {
+    mh: string;
+    lh: string;
+};
 /**
  * Breakpoints from "src/styles/base/_01-breakpoints.scss"
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
@@ -16,7 +20,9 @@
 declare const _default: {
     sm: string;
     md: string;
+    mh: string;
     lg: string;
+    lh: string;
     xl: string;
     "2xl": string;
 };