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

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

@@ -1,20 +1,20 @@
-import { StyleFunctionProps } from "@chakra-ui/theme-tools";
+import { StyleFunctionProps } from "@chakra-ui/react";
 declare const SocialMediaLinks: {
-    baseStyle: {
+    baseStyle?: {
         display: string;
         alignItems: string;
         gap: string;
         width: {
-            base: string;
-            md: string;
+            base: "100%";
+            md: "unset";
         };
         marginBottom: string;
         li: {
             marginInlineEnd: string;
             marginTop: string;
             width: {
-                base: string;
-                md: string;
+                base: "100%";
+                md: "unset";
             };
             _notFirst: {
                 marginTop: string;
@@ -26,12 +26,12 @@ declare const SocialMediaLinks: {
             alignContent: string;
             flexWrap: string;
             minWidth: {
-                base: string;
-                md: string;
+                base: "44px";
+                md: "unset";
             };
             minHeight: {
-                base: string;
-                md: string;
+                base: "44px";
+                md: "unset";
             };
             fontStyle: string;
             fontSize: string;
@@ -39,6 +39,7 @@ declare const SocialMediaLinks: {
             color: string;
             _hover: {
                 color: string;
+                textDecoration: string;
             };
             _visited: {
                 color: string;
@@ -69,10 +70,13 @@ declare const SocialMediaLinks: {
             };
         };
     };
-    variants: {
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
         straight(props: StyleFunctionProps): {
             flexDirection: {
-                base: string;
+                base: "column";
                 md: any;
             };
             gap: string;
@@ -115,7 +119,7 @@ declare const SocialMediaLinks: {
         };
         circular(props: StyleFunctionProps): {
             flexDirection: {
-                base: string;
+                base: "column";
                 md: any;
             };
             gap: string;
@@ -156,7 +160,7 @@ declare const SocialMediaLinks: {
         };
         none(props: StyleFunctionProps): {
             flexDirection: {
-                base: string;
+                base: "column";
                 md: any;
             };
             a: {
@@ -185,8 +189,10 @@ declare const SocialMediaLinks: {
             };
         };
     };
-    defaultProps: {
-        variant: string;
+    defaultProps?: {
+        size?: string | number;
+        variant?: "none" | "circular" | "straight";
+        colorScheme?: string;
     };
 };
 export default SocialMediaLinks;

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;