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

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

@@ -1,37 +1,93 @@
 declare const StatusBadge: {
-    baseStyle: {
+    baseStyle?: {
+        bgColor: string;
+        borderLeft: string;
+        borderColor: string;
         borderRadius: string;
         color: string;
         display: string;
         fontSize: string;
-        fontStyle: string;
+        fontWeight: string;
         py: string;
-        px: string;
+        paddingInlineEnd: string;
+        paddingInlineStart: string;
         textAlign: string;
+        whiteSpace: string;
         width: string;
         _dark: {
             backgroundColor: string;
-            borderLeft: string;
             borderColor: string;
             color: string;
         };
     };
-    variants: {
-        low: {
-            bg: string;
-        };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
+        low: {};
         medium: {
-            bg: string;
+            borderColor: string;
             _dark: {
                 borderColor: string;
             };
         };
         high: {
-            bg: string;
+            borderColor: string;
+            _dark: {
+                borderColor: string;
+            };
+        };
+        neutral: {
+            borderColor: string;
             _dark: {
                 borderColor: string;
             };
         };
+        informative: {
+            bgColor: string;
+            borderColor: string;
+            _dark: {
+                bgColor: string;
+                borderColor: string;
+            };
+        };
+        positive: {
+            bgColor: string;
+            borderColor: string;
+            _dark: {
+                bgColor: string;
+                borderColor: string;
+            };
+        };
+        negative: {
+            bgColor: string;
+            borderColor: string;
+            _dark: {
+                bgColor: string;
+                borderColor: string;
+            };
+        };
+        warning: {
+            bgColor: string;
+            borderColor: string;
+            _dark: {
+                bgColor: string;
+                borderColor: string;
+            };
+        };
+        recommendation: {
+            bgColor: string;
+            borderColor: string;
+            _dark: {
+                bgColor: string;
+                borderColor: string;
+            };
+        };
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "medium" | "warning" | "low" | "high" | "neutral" | "informative" | "positive" | "negative" | "recommendation";
+        colorScheme?: string;
     };
 };
 export default StatusBadge;

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

@@ -1,119 +1,238 @@
-interface StructuredContentBaseStyle {
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface StructuredContentBaseStyle extends StyleFunctionProps {
     hasFigureImage: boolean;
     imageAspectRatio: string;
     imagePosition: string;
 }
 declare const StructuredContent: {
-    parts: string[];
-    baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
+    baseStyle?: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
         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;
+            };
         };
         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;
+                };
+            };
         };
         imageFigure: {
             marginBottom: string;
@@ -134,8 +253,8 @@ declare const StructuredContent: {
         image: {
             maxWidth?: string;
             float: string[];
-            marginStart: string[];
-            marginEnd: string[];
+            marginStart: ("m" | "auto")[];
+            marginEnd: ("m" | "auto")[];
             marginBottom: string;
         };
         /** The following styles are meant to target HTML elements that are
@@ -149,23 +268,22 @@ declare const StructuredContent: {
             marginInlineStart: string;
         };
         a: {
-            base: {
+            color: string;
+            textDecoration: string;
+            textDecorationStyle: string;
+            textDecorationThickness: string;
+            textUnderlineOffset: string;
+            _dark: {
+                color: string;
+            };
+            _hover: {
                 color: string;
                 textDecoration: string;
                 textDecorationStyle: string;
                 textDecorationThickness: string;
-                textUnderlineOffset: string;
                 _dark: {
                     color: string;
                 };
-                _hover: {
-                    color: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
-                    _dark: {
-                        color: string;
-                    };
-                };
             };
         };
         ul: {
@@ -256,7 +374,10 @@ declare const StructuredContent: {
         };
         dd: {
             margin: string;
-            paddingBottom: string;
+            paddingBottom: string; /** The following styles are meant to target HTML elements that are
+             * not rendered from the Reservoir DS. Typically, these HTML elements
+             * are added from an API response.
+             */
             borderTop: {
                 base: string;
                 md: string;
@@ -343,10 +464,7 @@ declare const StructuredContent: {
                     };
                     paddingEnd: string;
                     paddingTop: {
-                        base: string; /** The following styles are meant to target HTML elements that are
-                         * not rendered from the Reservoir DS. Typically, these HTML elements
-                         * are added from an API response.
-                         */
+                        base: string;
                         md: string;
                     };
                     _first: {
@@ -424,10 +542,7 @@ declare const StructuredContent: {
                     };
                     paddingEnd: string;
                     paddingTop: {
-                        base: string; /** The following styles are meant to target HTML elements that are
-                         * not rendered from the Reservoir DS. Typically, these HTML elements
-                         * are added from an API response.
-                         */
+                        base: string;
                         md: string;
                     };
                     _first: {
@@ -446,5 +561,21 @@ declare const StructuredContent: {
             };
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("image" | "imageFigure" | "imageWrapper")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("image" | "imageFigure" | "imageWrapper")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("image" | "imageFigure" | "imageWrapper")[];
 };
 export default StructuredContent;

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

@@ -1,7 +1,5 @@
 declare const StyledList: {
-    baseStyle: ({ textSize }: {
-        textSize?: string;
-    }) => {
+    baseStyle?: ({ textSize }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
         listStyle: string;
         li: {
             _before: {
@@ -28,13 +26,16 @@ declare const StyledList: {
         display: string;
         fontSize: string;
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
         capped: {
             li: {
                 borderStart: string;
                 borderEnd: {
-                    base: string;
-                    md: string;
+                    base: "1px solid";
+                    md: "none";
                 };
                 borderColor: string;
                 my: string;
@@ -47,5 +48,10 @@ declare const StyledList: {
             };
         };
     };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "capped";
+        colorScheme?: string;
+    };
 };
 export default StyledList;

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

@@ -1,6 +1,10 @@
 declare const CustomTabs: {
-    parts: string[];
-    baseStyle: {
+    baseStyle?: {
+        tabpanel: {};
+        root: {};
+        tabpanels: {
+            paddingTop: string;
+        };
         tablist: {
             borderColor: string;
         };
@@ -126,9 +130,6 @@ declare const CustomTabs: {
                 borderColor: string;
             };
         };
-        tabpanels: {
-            paddingTop: string;
-        };
         carouselParent: {
             position: {
                 base: string;
@@ -142,14 +143,10 @@ declare const CustomTabs: {
                 base: string;
                 md: string;
             };
-            paddingStart: {
-                base: string;
-                md: string;
-            };
+            paddingStart: string;
             paddingEnd: string;
             paddingTop: {
                 base: string;
-                md: string;
             };
             right: {
                 base: string;
@@ -157,16 +154,33 @@ declare const CustomTabs: {
             };
             top: {
                 base: string;
-                md: string;
             };
+            scrollbarWidth: string;
+            "::-webkit-scrollbar": {
+                display: string;
+            };
+            overflowY: string;
             overflowX: {
                 base: string;
                 md: string;
             };
         };
     };
-    defaultProps: {
-        colorScheme: string;
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("tab" | "tabpanel" | "tabpanels" | "root" | "tablist" | "buttonArrows" | "tablistWrapper" | "carouselParent")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("tab" | "tabpanel" | "tabpanels" | "root" | "tablist" | "buttonArrows" | "tablistWrapper" | "carouselParent")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
     };
+    parts: ("tab" | "tabpanel" | "tabpanels" | "root" | "tablist" | "buttonArrows" | "tablistWrapper" | "carouselParent")[];
 };
 export default CustomTabs;