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

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

@@ -1,8 +1,9 @@
-interface LabelBaseStyle {
+import { StyleFunctionProps } from "@chakra-ui/react";
+interface LabelBaseStyle extends StyleFunctionProps {
     isInlined: boolean;
 }
 declare const Label: {
-    baseStyle: ({ isInlined }: LabelBaseStyle) => {
+    baseStyle?: (props: LabelBaseStyle) => {
         flex: string;
         whiteSpace: string;
         color: string;
@@ -18,5 +19,16 @@ declare const Label: {
             color: string;
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
 };
 export default Label;

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

@@ -1,25 +1,29 @@
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface CustomLinkStyleProps extends StyleFunctionProps {
+    finalIsUnderlined: boolean;
+    hasVisitedState: boolean;
+}
 export declare const baseLinkStyles: {
-    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;
-            };
-        };
     };
 };
 declare const Link: {
-    baseStyle?: ({ finalIsUnderlined, hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+    baseStyle?: ({ finalIsUnderlined, hasVisitedState }: CustomLinkStyleProps) => {
         base: {
             _visited: {
                 color: string;
@@ -38,23 +42,21 @@ declare const Link: {
                     color: string;
                 };
             };
-            base: {
+            color: 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;
-                    };
-                };
             };
         };
         /** The element will handle descriptive text added to aid
@@ -105,6 +107,8 @@ declare const Link: {
                     color: string;
                     bg: string;
                     textDecoration: string;
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
                     _dark: {
                         color: string;
                         bg: string;
@@ -120,188 +124,25 @@ declare const Link: {
                 };
             };
         };
-        buttonCallout: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
-            base: {
-                _hover: {
-                    color: string;
-                };
-                _visited: {
-                    color: string;
-                    _dark: {
-                        color: string;
-                    };
-                } | {
-                    color?: undefined;
-                    _dark?: undefined;
-                };
-                base: any;
-                display: string;
-                screenreaderOnly: {
-                    clip: string;
-                    height: {
-                        base: string;
-                        md: string;
-                    };
-                    overflow: string;
-                    position: {
-                        base: string;
-                        md: string;
-                    };
-                    width: {
-                        base: string;
-                        md: string;
-                    };
-                    wordWrap: string;
-                };
-            };
+        buttonCallout: ({ hasVisitedState }: CustomLinkStyleProps) => {
+            base: any;
         };
-        buttonDisabled: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
-            base: {
-                bg: string;
-                color: string;
-                opacity: string;
-                pointerEvents: string;
-                _visited: {
-                    color: string;
-                    _dark: {
-                        color: string;
-                    };
-                } | {
-                    color?: undefined;
-                    _dark?: undefined;
-                };
-                _dark: {
-                    bg: string;
-                    color: string;
-                };
-                base: any;
-                screenreaderOnly: {};
-                display: string;
-            };
+        buttonDisabled: ({ hasVisitedState }: CustomLinkStyleProps) => {
+            base: any;
         };
-        buttonNoBrand: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
-            base: {
-                _hover: {
-                    color: string;
-                };
-                _visited: {
-                    color: string;
-                    _dark: {
-                        color: string;
-                    };
-                } | {
-                    color?: undefined;
-                    _dark?: undefined;
-                };
-                base: any;
-                display: string;
-                screenreaderOnly: {
-                    clip: string;
-                    height: {
-                        base: string;
-                        md: string;
-                    };
-                    overflow: string;
-                    position: {
-                        base: string;
-                        md: string;
-                    };
-                    width: {
-                        base: string;
-                        md: string;
-                    };
-                    wordWrap: string;
-                };
-            };
+        buttonNoBrand: ({ hasVisitedState }: CustomLinkStyleProps) => {
+            base: any;
         };
-        buttonPill: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
-            base: {
-                _hover: {
-                    color: string;
-                };
-                _visited: {
-                    color: string;
-                    _dark: {
-                        color: string;
-                    };
-                } | {
-                    color?: undefined;
-                    _dark?: undefined;
-                };
-                base: any;
-                display: string;
-                screenreaderOnly: {
-                    clip: string;
-                    height: {
-                        base: string;
-                        md: string;
-                    };
-                    overflow: string;
-                    position: {
-                        base: string;
-                        md: string;
-                    };
-                    width: {
-                        base: string;
-                        md: string;
-                    };
-                    wordWrap: string;
-                };
-            };
+        buttonPill: ({ hasVisitedState }: CustomLinkStyleProps) => {
+            base: any;
         };
-        buttonPrimary: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
-            base: {
-                _hover: {
-                    backgroundColor: string;
-                    color: string;
-                };
-                _visited: {
-                    color: string;
-                    _dark: {
-                        color: string;
-                    };
-                } | {
-                    color?: undefined;
-                    _dark?: undefined;
-                };
-                base: any;
-                screenreaderOnly: {};
-                display: string;
-            };
+        buttonPrimary: ({ hasVisitedState }: CustomLinkStyleProps) => {
+            base: any;
         };
-        buttonSecondary: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
-            base: {
-                _visited: {
-                    color: string;
-                    _dark: {
-                        color: string;
-                    };
-                } | {
-                    color?: undefined;
-                    _dark?: undefined;
-                };
-                base: any;
-                display: string;
-                screenreaderOnly: {
-                    clip: string;
-                    height: {
-                        base: string;
-                        md: string;
-                    };
-                    overflow: string;
-                    position: {
-                        base: string;
-                        md: string;
-                    };
-                    width: {
-                        base: string;
-                        md: string;
-                    };
-                    wordWrap: string;
-                };
-            };
+        buttonSecondary: ({ hasVisitedState }: CustomLinkStyleProps) => {
+            base: any;
         };
-        moreLink: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        moreLink: ({ hasVisitedState }: CustomLinkStyleProps) => {
             base: {
                 alignItems: string;
                 display: string;
@@ -314,6 +155,8 @@ declare const Link: {
                 _hover: {
                     color: string;
                     textDecoration: string;
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
                 };
                 _visited: {
                     svg: {

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

@@ -1,8 +1,9 @@
-interface ListBaseStyle {
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface ListBaseStyle extends Partial<StyleFunctionProps> {
     inline?: boolean;
-    noStyling: boolean;
+    noStyling?: boolean;
 }
-export declare const baseListStyles: (inline?: boolean, noStyling?: boolean) => {
+export declare const baseListStyles: (props?: ListBaseStyle) => {
     margin: string;
     listStyle: string;
     marginInlineStart: string;
@@ -17,7 +18,24 @@ export declare const baseListStyles: (inline?: boolean, noStyling?: boolean) =>
         };
     };
 };
-export declare const baseUnorderedStyles: (noStyling?: boolean) => {
+export declare const baseSectionDescriptionStyles: {
+    borderBottom: string;
+    borderColor: string;
+    paddingStart: string;
+    h2: {
+        borderTop: string;
+        borderColor: string;
+        margin: string;
+        padding: string;
+        _dark: {
+            borderColor: string;
+        };
+    };
+    _dark: {
+        borderColor: string;
+    };
+};
+export declare const unorderedStyles: (props?: ListBaseStyle) => {
     listStyle: string;
     li: {
         _before: {
@@ -39,24 +57,7 @@ export declare const baseUnorderedStyles: (noStyling?: boolean) => {
     margin: string;
     marginBottom: string;
 };
-export declare const baseSectionDescriptionStyles: {
-    borderBottom: string;
-    borderColor: string;
-    paddingStart: string;
-    h2: {
-        borderTop: string;
-        borderColor: string;
-        margin: string;
-        padding: string;
-        _dark: {
-            borderColor: string;
-        };
-    };
-    _dark: {
-        borderColor: string;
-    };
-};
-export declare const baseDescriptionStyles: {
+export declare const descriptionStyles: {
     dl: {
         display: string;
         gridTemplateColumns: {
@@ -120,111 +121,139 @@ export declare const baseDescriptionStyles: {
     };
 };
 declare const List: {
-    baseStyle: ({ inline, noStyling }: ListBaseStyle) => {
-        margin: string;
-        listStyle: string;
-        marginInlineStart: string;
-        paddingStart: string;
-        padding: string;
-        display: string;
-        li: {
-            marginEnd: string;
-            listStyleType: string;
-            _notFirst: {
-                marginTop: string;
-            };
-        };
-    };
-    variants: {
-        ul: ({ noStyling }: ListBaseStyle) => {
+    baseStyle?: ({ inline, noStyling }: ListBaseStyle) => {
+        base: {
+            margin: string;
             listStyle: string;
+            marginInlineStart: string;
+            paddingStart: string;
+            padding: string;
+            display: string;
             li: {
-                _before: {
-                    color: string;
-                    content: string;
-                    display: string;
-                    fontWeight: string;
-                    fontSize: string;
-                    lineHeight: string;
-                    marginStart: string;
-                    width: string;
+                marginEnd: string;
+                listStyleType: string;
+                _notFirst: {
+                    marginTop: string;
                 };
-                _dark: {
+            };
+        };
+        heading: {
+            borderTop: string;
+            borderColor: string;
+            margin: string;
+            padding: string;
+            _dark: {
+                borderColor: string;
+            };
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "heading")[];
+        }>;
+    };
+    variants?: {
+        ul: (props: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+            base: {
+                listStyle: string;
+                li: {
                     _before: {
                         color: string;
+                        content: string;
+                        display: string;
+                        fontWeight: string;
+                        fontSize: string;
+                        lineHeight: string;
+                        marginStart: string;
+                        width: string;
+                    };
+                    _dark: {
+                        _before: {
+                            color: string;
+                        };
                     };
                 };
+                margin: string;
+                marginBottom: string;
             };
-            margin: string;
-            marginBottom: string;
         };
         ol: {
-            margin: string;
-            marginBottom: string;
-        };
-        dl: {
-            dl: {
-                display: string;
-                gridTemplateColumns: {
-                    base: string;
-                    md: string;
-                };
-                gridTemplateRows: string;
+            base: {
                 margin: string;
+                marginBottom: string;
             };
-            dt: {
-                borderTop: string;
-                borderColor: string;
-                color: string;
-                fontWeight: string;
-                paddingBottom: {
-                    base: string;
-                    md: string;
-                };
-                paddingTop: string;
-                paddingEnd: {
-                    md: string;
+        };
+        dl: {
+            base: {
+                dl: {
+                    display: string;
+                    gridTemplateColumns: {
+                        base: string;
+                        md: string;
+                    };
+                    gridTemplateRows: string;
+                    margin: string;
                 };
-                _dark: {
+                dt: {
+                    borderTop: string;
                     borderColor: string;
                     color: string;
+                    fontWeight: string;
+                    paddingBottom: {
+                        base: string;
+                        md: string;
+                    };
+                    paddingTop: string;
+                    paddingEnd: {
+                        md: string;
+                    };
+                    _dark: {
+                        borderColor: string;
+                        color: string;
+                    };
                 };
-            };
-            dd: {
-                margin: string;
-                paddingBottom: string;
-                borderTop: {
-                    base: string;
-                    md: string;
-                };
-                borderColor: {
-                    md: string;
-                };
-                paddingTop: {
-                    md: string;
-                };
-                _dark: {
+                dd: {
+                    margin: string;
+                    paddingBottom: string;
+                    borderTop: {
+                        base: string;
+                        md: string;
+                    };
                     borderColor: {
                         md: string;
                     };
+                    paddingTop: {
+                        md: string;
+                    };
+                    _dark: {
+                        borderColor: {
+                            md: string;
+                        };
+                    };
                 };
-            };
-            borderBottom: string;
-            borderColor: string;
-            paddingStart: string;
-            h2: {
-                borderTop: string;
+                borderBottom: string;
                 borderColor: string;
-                margin: string;
-                padding: string;
+                paddingStart: string;
+                h2: {
+                    borderTop: string;
+                    borderColor: string;
+                    margin: string;
+                    padding: string;
+                    _dark: {
+                        borderColor: string;
+                    };
+                };
                 _dark: {
                     borderColor: string;
                 };
             };
-            _dark: {
-                borderColor: string;
-            };
         };
     };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "dl" | "ol" | "ul";
+        colorScheme?: string;
+    };
+    parts: ("base" | "heading")[];
 };
 export default List;

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

@@ -1,7 +1,4 @@
-interface LogoBaseStyle {
-    size: keyof typeof size | keyof typeof sizeBasedOnHeight;
-    sizeBasedOn: "height" | "width";
-}
+import { StyleFunctionProps } from "@chakra-ui/system";
 declare const size: {
     default: {
         maxWidth: string;
@@ -64,8 +61,12 @@ declare const sizeBasedOnHeight: {
         width: string;
     };
 };
+interface LogoBaseStyle extends StyleFunctionProps {
+    size: keyof typeof size | keyof typeof sizeBasedOnHeight;
+    sizeBasedOn: "height" | "width";
+}
 declare const Logo: {
-    baseStyle: (props: LogoBaseStyle) => {
+    baseStyle?: (props: LogoBaseStyle) => {
         svg: {
             maxWidth: string;
             display: string;
@@ -125,5 +126,16 @@ declare const Logo: {
         height: string;
         width: string;
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
 };
 export default Logo;