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

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

@@ -1,17 +1,24 @@
 declare const Hero: {
-    baseStyle: {};
-    variants: {
+    baseStyle?: {};
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "content" | "heading" | "imgWrapper" | "bodyText" | "interior")[];
+        }>;
+    };
+    variants?: {
         primary: {
-            alignItems: string;
-            backgroundSize: string;
-            backgroundPosition: string;
-            display: string;
-            flexFlow: {
-                base: string;
-                md: string;
-            };
-            justifyContent: string;
-            minHeight: string;
+            base: {
+                alignItems: string;
+                backgroundSize: string;
+                backgroundPosition: string;
+                display: string;
+                flexFlow: {
+                    base: "column nowrap";
+                    md: "row nowrap";
+                };
+                justifyContent: string;
+                minHeight: string;
+            };
             content: {
                 bg: string;
                 color: string;
@@ -20,7 +27,7 @@ declare const Hero: {
                     md: string;
                 };
                 maxWidth: {
-                    md: string;
+                    md: "960px";
                 };
                 paddingTop: string;
                 paddingBottom: string;
@@ -68,15 +75,20 @@ declare const Hero: {
                 zIndex: string;
                 order: string;
             };
-            overflowX: string;
-            bgColor: string;
+            base: {
+                overflowX: string;
+                bgColor: string;
+                _dark: {
+                    bgColor: string;
+                };
+            };
             content: {
                 paddingEnd: string;
                 paddingStart: string;
                 display: string;
                 flexFlow: {
-                    base: string;
-                    md: string;
+                    base: "column nowrap";
+                    md: "row wrap";
                 };
                 marginY: string;
                 marginX: string;
@@ -86,20 +98,20 @@ declare const Hero: {
             };
             imgWrapper: {
                 marginEnd: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 marginStart: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 flex: {
                     base: string;
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "2";
+                    md: "3";
                 };
                 img: {
                     height: string;
@@ -111,20 +123,17 @@ declare const Hero: {
             bodyText: {
                 paddingBottom: string;
                 paddingEnd: {
-                    md: string;
+                    md: "inset.default";
                 };
                 paddingTop: string;
                 flex: {
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "3";
+                    md: "2";
                 };
             };
-            _dark: {
-                bgColor: string;
-            };
         };
         secondaryBooksAndMore: {
             heading: {
@@ -152,15 +161,20 @@ declare const Hero: {
                 zIndex: string;
                 order: string;
             };
-            overflowX: string;
-            bgColor: string;
+            base: {
+                overflowX: string;
+                bgColor: string;
+                _dark: {
+                    bgColor: string;
+                };
+            };
             content: {
                 paddingEnd: string;
                 paddingStart: string;
                 display: string;
                 flexFlow: {
-                    base: string;
-                    md: string;
+                    base: "column nowrap";
+                    md: "row wrap";
                 };
                 marginY: string;
                 marginX: string;
@@ -170,20 +184,20 @@ declare const Hero: {
             };
             imgWrapper: {
                 marginEnd: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 marginStart: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 flex: {
                     base: string;
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "2";
+                    md: "3";
                 };
                 img: {
                     height: string;
@@ -195,20 +209,17 @@ declare const Hero: {
             bodyText: {
                 paddingBottom: string;
                 paddingEnd: {
-                    md: string;
+                    md: "inset.default";
                 };
                 paddingTop: string;
                 flex: {
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "3";
+                    md: "2";
                 };
             };
-            _dark: {
-                bgColor: string;
-            };
         };
         secondaryLocations: {
             heading: {
@@ -236,15 +247,20 @@ declare const Hero: {
                 zIndex: string;
                 order: string;
             };
-            overflowX: string;
-            bgColor: string;
+            base: {
+                overflowX: string;
+                bgColor: string;
+                _dark: {
+                    bgColor: string;
+                };
+            };
             content: {
                 paddingEnd: string;
                 paddingStart: string;
                 display: string;
                 flexFlow: {
-                    base: string;
-                    md: string;
+                    base: "column nowrap";
+                    md: "row wrap";
                 };
                 marginY: string;
                 marginX: string;
@@ -254,20 +270,20 @@ declare const Hero: {
             };
             imgWrapper: {
                 marginEnd: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 marginStart: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 flex: {
                     base: string;
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "2";
+                    md: "3";
                 };
                 img: {
                     height: string;
@@ -279,20 +295,17 @@ declare const Hero: {
             bodyText: {
                 paddingBottom: string;
                 paddingEnd: {
-                    md: string;
+                    md: "inset.default";
                 };
                 paddingTop: string;
                 flex: {
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "3";
+                    md: "2";
                 };
             };
-            _dark: {
-                bgColor: string;
-            };
         };
         secondaryResearch: {
             heading: {
@@ -320,15 +333,20 @@ declare const Hero: {
                 zIndex: string;
                 order: string;
             };
-            overflowX: string;
-            bgColor: string;
+            base: {
+                overflowX: string;
+                bgColor: string;
+                _dark: {
+                    bgColor: string;
+                };
+            };
             content: {
                 paddingEnd: string;
                 paddingStart: string;
                 display: string;
                 flexFlow: {
-                    base: string;
-                    md: string;
+                    base: "column nowrap";
+                    md: "row wrap";
                 };
                 marginY: string;
                 marginX: string;
@@ -338,20 +356,20 @@ declare const Hero: {
             };
             imgWrapper: {
                 marginEnd: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 marginStart: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 flex: {
                     base: string;
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "2";
+                    md: "3";
                 };
                 img: {
                     height: string;
@@ -363,20 +381,17 @@ declare const Hero: {
             bodyText: {
                 paddingBottom: string;
                 paddingEnd: {
-                    md: string;
+                    md: "inset.default";
                 };
                 paddingTop: string;
                 flex: {
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "3";
+                    md: "2";
                 };
             };
-            _dark: {
-                bgColor: string;
-            };
         };
         secondaryWhatsOn: {
             heading: {
@@ -404,15 +419,20 @@ declare const Hero: {
                 zIndex: string;
                 order: string;
             };
-            overflowX: string;
-            bgColor: string;
+            base: {
+                overflowX: string;
+                bgColor: string;
+                _dark: {
+                    bgColor: string;
+                };
+            };
             content: {
                 paddingEnd: string;
                 paddingStart: string;
                 display: string;
                 flexFlow: {
-                    base: string;
-                    md: string;
+                    base: "column nowrap";
+                    md: "row wrap";
                 };
                 marginY: string;
                 marginX: string;
@@ -422,20 +442,20 @@ declare const Hero: {
             };
             imgWrapper: {
                 marginEnd: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 marginStart: {
-                    base: string;
-                    md: string;
+                    base: "calc(-50vw + 50%)";
+                    md: "0";
                 };
                 flex: {
                     base: string;
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "2";
+                    md: "3";
                 };
                 img: {
                     height: string;
@@ -447,41 +467,43 @@ declare const Hero: {
             bodyText: {
                 paddingBottom: string;
                 paddingEnd: {
-                    md: string;
+                    md: "inset.default";
                 };
                 paddingTop: string;
                 flex: {
                     md: string;
                 };
                 order: {
-                    base: string;
-                    md: string;
+                    base: "3";
+                    md: "2";
                 };
             };
-            _dark: {
-                bgColor: string;
-            };
         };
         tertiary: {
+            base: {
+                p: {
+                    marginBottom: "0";
+                };
+            };
             content: {
                 color: string;
                 display: string;
                 flexFlow: string;
                 px: string;
                 py: {
-                    base: string;
-                    xl: string;
+                    base: "inset.default";
+                    xl: "inset.wide";
                 };
                 p: {
-                    marginBottom: string;
+                    marginBottom: "0";
                     marginTop: {
-                        base: string;
-                        xl: string;
+                        base: "xxs";
+                        xl: "xs";
                     };
                 };
                 _dark: {
                     p: {
-                        color: string;
+                        color: "dark.ui.typography.body";
                     };
                 };
                 marginY: string;
@@ -497,46 +519,59 @@ declare const Hero: {
                     marginBottom: string;
                 };
             };
-            p: {
-                marginBottom: string;
-            };
         };
         campaign: {
-            alignItems: string;
-            backgroundSize: string;
-            backgroundPosition: string;
-            display: string;
-            justifyContent: string;
-            marginBottom: string[];
-            minHeight: string;
-            overflow: string;
-            padding: {
-                base: string;
-                md: string;
-            };
-            position: string;
+            base: {
+                alignItems: string;
+                display: string;
+                justifyContent: string;
+                padding: {
+                    base: "inset.wide";
+                    md: "calc(var(--nypl-space-xxl) + var(--nypl-space-s)) var(--nypl-space-s) 0";
+                };
+                position: string;
+                a: {
+                    color: string;
+                    display: string;
+                };
+                img: {
+                    clip: string;
+                    height: {
+                        base: string;
+                        md: string;
+                    };
+                    overflow: string;
+                    position: {
+                        base: string;
+                        md: string;
+                    };
+                    width: {
+                        base: string;
+                        md: string;
+                    };
+                    wordWrap: string;
+                };
+            };
             content: {
                 alignItems: string;
                 bg: string;
                 color: string;
                 display: string;
                 flexFlow: {
-                    base: string;
-                    lg: string;
+                    base: "column nowrap";
+                    lg: "row nowrap";
                 };
                 minHeight: string;
                 flex: {
                     md: string;
                 };
                 maxWidth: {
-                    md: string;
+                    md: "1248px";
                 };
                 position: {
-                    md: string;
-                };
-                top: {
-                    md: string;
+                    md: "relative";
                 };
+                zIndex: number;
                 _dark: {
                     color: string;
                 };
@@ -544,58 +579,56 @@ declare const Hero: {
             heading: {
                 color: string;
             };
-            a: {
-                color: string;
-                display: string;
-            };
-            img: {
-                clip: string;
-                height: {
-                    base: string;
-                    md: string;
-                };
-                overflow: string;
-                position: {
-                    base: string;
-                    md: string;
-                };
-                width: {
-                    base: string;
-                    md: string;
-                };
-                wordWrap: string;
-            };
             imgWrapper: {
                 backgroundPosition: string;
                 backgroundSize: string;
                 minHeight: string;
                 width: {
-                    base: string;
-                    lg: string;
+                    base: "100%";
+                    lg: "50%";
                 };
             };
             interior: {
                 alignSelf: string;
                 maxWidth: {
-                    md: string;
+                    md: "960px";
                 };
                 padding: {
-                    base: string;
-                    md: string;
+                    base: "inset.default";
+                    md: "inset.wide";
                 };
                 width: {
-                    base: string;
-                    lg: string;
+                    base: "100%";
+                    lg: "50%";
                 };
             };
         };
         fiftyFifty: {
+            base: {
+                img: {
+                    clip: string;
+                    height: {
+                        base: string;
+                        md: string;
+                    };
+                    overflow: string;
+                    position: {
+                        base: string;
+                        md: string;
+                    };
+                    width: {
+                        base: string;
+                        md: string;
+                    };
+                    wordWrap: string;
+                };
+            };
             content: {
                 alignItems: string;
                 display: string;
                 flexFlow: {
-                    base: string;
-                    lg: string;
+                    base: "column nowrap";
+                    lg: "row nowrap";
                 };
                 marginY: string;
                 marginX: string;
@@ -608,42 +641,31 @@ declare const Hero: {
                 backgroundSize: string;
                 minHeight: string;
                 width: {
-                    base: string;
-                    lg: string;
-                };
-            };
-            img: {
-                clip: string;
-                height: {
-                    base: string;
-                    md: string;
-                };
-                overflow: string;
-                position: {
-                    base: string;
-                    md: string;
-                };
-                width: {
-                    base: string;
-                    md: string;
+                    base: "100%";
+                    lg: "50%";
                 };
-                wordWrap: string;
             };
             bodyText: {
                 alignSelf: string;
                 maxWidth: {
-                    md: string;
+                    md: "960px";
                 };
                 padding: {
-                    base: string;
-                    md: string;
+                    base: "inset.default";
+                    md: "inset.wide";
                 };
                 width: {
-                    base: string;
-                    lg: string;
+                    base: "100%";
+                    lg: "50%";
                 };
             };
         };
     };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "primary" | "secondary" | "tertiary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "campaign" | "fiftyFifty";
+        colorScheme?: string;
+    };
+    parts: ("base" | "content" | "heading" | "imgWrapper" | "bodyText" | "interior")[];
 };
 export default Hero;