@nypl/design-system-react-components 2.2.0-react-chakra-rc-2 → 3.0.0-react-chakra-rc2

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

@@ -1,128 +1,239 @@
 export declare const headings: {
     one: {
-        width: string;
-        a: {
-            textUnderlineOffset: string;
-        };
-        marginTop: string;
-        marginStart: string;
-        marginEnd: string;
-        fontSize: string;
-        fontWeight: string;
-        letterSpacing: string;
-        lineHeight: string;
+        base: {
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+        };
     };
     two: {
-        width: string;
-        a: {
-            textUnderlineOffset: string;
-        };
-        marginTop: string;
-        marginStart: string;
-        marginEnd: string;
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
+        base: {
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
     };
     three: {
-        width: string;
-        marginTop: string;
-        marginStart: string;
-        marginEnd: string;
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
+        base: {
+            width: string;
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
     };
     four: {
-        width: string;
-        marginTop: string;
-        marginStart: string;
-        marginEnd: string;
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
+        base: {
+            width: string;
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
     };
     fallback: {
-        width: string;
-        marginTop: string;
-        marginStart: string;
-        marginEnd: string;
-        fontSize: string;
-        fontWeight: string;
-        lineHeight: string;
+        base: {
+            width: string;
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
     };
     display1: {
-        fontWeight: string;
-        letterSpacing: string;
-        lineHeight: string;
-        width: string;
-        a: {
-            textUnderlineOffset: string;
+        base: {
+            fontSize: {
+                base: "mobile.heading.display1";
+                md: "desktop.heading.display1";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
         };
     };
     heading1: {
-        fontWeight: string;
-        letterSpacing: string;
-        lineHeight: string;
-        width: string;
-        a: {
-            textUnderlineOffset: string;
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading1";
+                md: "desktop.heading.heading1";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
         };
     };
     heading2: {
-        fontWeight: string;
-        letterSpacing: string;
-        lineHeight: string;
-        width: string;
-        a: {
-            textUnderlineOffset: string;
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading2";
+                md: "desktop.heading.heading2";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
         };
     };
     heading3: {
-        fontWeight: string;
-        letterSpacing: string;
-        lineHeight: string;
-        width: string;
-        a: {
-            textUnderlineOffset: string;
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading3";
+                md: "desktop.heading.heading3";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
         };
     };
     heading4: {
-        fontWeight: string;
-        letterSpacing: string;
-        lineHeight: string;
-        width: string;
-        a: {
-            textUnderlineOffset: string;
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading4";
+                md: "desktop.heading.heading4";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
         };
     };
     heading5: {
-        fontWeight: string;
-        letterSpacing: string;
-        lineHeight: string;
-        width: string;
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading5";
+                md: "desktop.heading.heading5";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
+        };
     };
     heading6: {
-        fontWeight: string;
-        letterSpacing: string;
-        lineHeight: string;
-        width: string;
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading6";
+                md: "desktop.heading.heading6";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            "@media (min-width: 0px)": {
+                fontSize: string;
+            };
+            "@media (min-width: 600px)": {
+                fontSize: string;
+            };
+        };
     };
 };
 declare const Heading: {
-    parts: string[];
-    baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace, url }: {
-        isCapitalized: any;
-        isUppercase: any;
-        isLowercase: any;
-        noSpace: any;
-        url: any;
-    }) => {
-        a: {
-            textDecoration: string;
-            base: {
-                color: string;
+    baseStyle?: ({ isCapitalized, isUppercase, isLowercase, noSpace, url }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        base: {
+            a: {
                 textDecoration: string;
+                color: string;
                 textDecorationStyle: string;
                 textDecorationThickness: string;
                 textUnderlineOffset: string;
@@ -131,6 +242,7 @@ declare const Heading: {
                 };
                 _hover: {
                     color: string;
+                    textDecoration: string;
                     textDecorationStyle: string;
                     textDecorationThickness: string;
                     _dark: {
@@ -138,11 +250,12 @@ declare const Heading: {
                     };
                 };
             };
-        };
-        color: string;
-        textTransform: string;
-        _dark: {
             color: string;
+            margin: string;
+            textTransform: string;
+            _dark: {
+                color: string;
+            };
         };
         headingWrapper: {
             marginTop: string;
@@ -151,219 +264,453 @@ declare const Heading: {
             marginBottom: string;
         };
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "headingWrapper")[];
+        }>;
+    };
+    variants?: {
         h1: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading1";
+                    md: "desktop.heading.heading1";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         h2: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading2";
+                    md: "desktop.heading.heading2";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         h3: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading3";
+                    md: "desktop.heading.heading3";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         h4: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading4";
+                    md: "desktop.heading.heading4";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         h5: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading5";
+                    md: "desktop.heading.heading5";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+            };
         };
         h6: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading6";
+                    md: "desktop.heading.heading6";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+            };
         };
         one: {
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
             };
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
         };
         two: {
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                lineHeight: string;
             };
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
         };
         three: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
+            base: {
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                lineHeight: string;
+            };
         };
         four: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
+            base: {
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                lineHeight: string;
+            };
         };
         five: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
+            base: {
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                lineHeight: string;
+            };
         };
         six: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
+            base: {
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                lineHeight: string;
+            };
         };
         display1: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.display1";
+                    md: "desktop.heading.display1";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         heading1: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading1";
+                    md: "desktop.heading.heading1";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         heading2: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading2";
+                    md: "desktop.heading.heading2";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         heading3: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading3";
+                    md: "desktop.heading.heading3";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         heading4: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading4";
+                    md: "desktop.heading.heading4";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
             };
         };
         heading5: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading5";
+                    md: "desktop.heading.heading5";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+            };
         };
         heading6: {
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
-            width: string;
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading6";
+                    md: "desktop.heading.heading6";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+            };
         };
         primary: {
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
             };
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            letterSpacing: string;
-            lineHeight: string;
         };
         secondary: {
-            width: string;
-            a: {
-                textUnderlineOffset: string;
+            base: {
+                width: string;
+                a: {
+                    textUnderlineOffset: string;
+                };
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                lineHeight: string;
             };
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
         };
         tertiary: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
+            base: {
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                lineHeight: string;
+            };
         };
         callout: {
-            width: string;
-            marginTop: string;
-            marginStart: string;
-            marginEnd: string;
-            fontSize: string;
-            fontWeight: string;
-            lineHeight: string;
+            base: {
+                width: string;
+                "@media (min-width: 0px)": {
+                    fontSize: string;
+                };
+                "@media (min-width: 600px)": {
+                    fontSize: string;
+                };
+                marginTop: string;
+                marginStart: string;
+                marginEnd: string;
+                fontWeight: string;
+                lineHeight: string;
+            };
         };
     };
-    defaultProps: {
-        variant: string;
+    defaultProps?: {
+        size?: string | number;
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "primary" | "secondary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "tertiary";
+        colorScheme?: string;
     };
+    parts: ("base" | "headingWrapper")[];
 };
 export default Heading;