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

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

@@ -105,25 +105,22 @@ declare const _default: {
                 marginBottom: string;
                 a: {
                     textDecoration: string;
-                    color: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
-                    textUnderlineOffset: string;
-                    _dark: {
-                        color: string;
-                    };
-                    _hover: {
+                    base: {
                         color: string;
+                        textDecoration: string;
                         textDecorationStyle: string;
                         textDecorationThickness: string;
+                        textUnderlineOffset: string;
                         _dark: {
                             color: string;
                         };
-                    };
-                    _visited: {
-                        color: string;
-                        _dark: {
+                        _hover: {
                             color: string;
+                            textDecorationStyle: string;
+                            textDecorationThickness: string;
+                            _dark: {
+                                color: string;
+                            };
                         };
                     };
                 };
@@ -179,25 +176,22 @@ declare const _default: {
                 marginBottom: string;
                 a: {
                     textDecoration: string;
-                    color: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
-                    textUnderlineOffset: string;
-                    _dark: {
-                        color: string;
-                    };
-                    _hover: {
+                    base: {
                         color: string;
+                        textDecoration: string;
                         textDecorationStyle: string;
                         textDecorationThickness: string;
+                        textUnderlineOffset: string;
                         _dark: {
                             color: string;
                         };
-                    };
-                    _visited: {
-                        color: string;
-                        _dark: {
+                        _hover: {
                             color: string;
+                            textDecorationStyle: string;
+                            textDecorationThickness: string;
+                            _dark: {
+                                color: string;
+                            };
                         };
                     };
                 };
@@ -254,25 +248,22 @@ declare const _default: {
                 marginBottom: string;
                 a: {
                     textDecoration: string;
-                    color: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
-                    textUnderlineOffset: string;
-                    _dark: {
-                        color: string;
-                    };
-                    _hover: {
+                    base: {
                         color: string;
+                        textDecoration: string;
                         textDecorationStyle: string;
                         textDecorationThickness: string;
+                        textUnderlineOffset: string;
                         _dark: {
                             color: string;
                         };
-                    };
-                    _visited: {
-                        color: string;
-                        _dark: {
+                        _hover: {
                             color: string;
+                            textDecorationStyle: string;
+                            textDecorationThickness: string;
+                            _dark: {
+                                color: string;
+                            };
                         };
                     };
                 };
@@ -326,25 +317,22 @@ declare const _default: {
                 marginBottom: string;
                 a: {
                     textDecoration: string;
-                    color: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
-                    textUnderlineOffset: string;
-                    _dark: {
-                        color: string;
-                    };
-                    _hover: {
+                    base: {
                         color: string;
+                        textDecoration: string;
                         textDecorationStyle: string;
                         textDecorationThickness: string;
+                        textUnderlineOffset: string;
                         _dark: {
                             color: string;
                         };
-                    };
-                    _visited: {
-                        color: string;
-                        _dark: {
+                        _hover: {
                             color: string;
+                            textDecorationStyle: string;
+                            textDecorationThickness: string;
+                            _dark: {
+                                color: string;
+                            };
                         };
                     };
                 };

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

@@ -120,25 +120,22 @@ declare const Heading: {
     }) => {
         a: {
             textDecoration: string;
-            color: string;
-            textDecorationStyle: string;
-            textDecorationThickness: string;
-            textUnderlineOffset: string;
-            _dark: {
-                color: string;
-            };
-            _hover: {
+            base: {
                 color: string;
+                textDecoration: string;
                 textDecorationStyle: string;
                 textDecorationThickness: string;
+                textUnderlineOffset: string;
                 _dark: {
                     color: string;
                 };
-            };
-            _visited: {
-                color: string;
-                _dark: {
+                _hover: {
                     color: string;
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    _dark: {
+                        color: string;
+                    };
                 };
             };
         };

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

@@ -1,38 +1,60 @@
 export declare const baseLinkStyles: {
-    color: string;
-    textDecoration: string;
-    textDecorationStyle: string;
-    textDecorationThickness: string;
-    textUnderlineOffset: string;
-    _dark: {
-        color: string;
-    };
-    _hover: {
+    base: {
         color: string;
+        textDecoration: string;
         textDecorationStyle: string;
         textDecorationThickness: string;
+        textUnderlineOffset: string;
         _dark: {
             color: string;
         };
-    };
-    _visited: {
-        color: string;
-        _dark: {
+        _hover: {
             color: string;
+            textDecorationStyle: string;
+            textDecorationThickness: string;
+            _dark: {
+                color: string;
+            };
         };
     };
 };
 declare const Link: {
-    parts: string[];
-    baseStyle: ({ finalIsUnderlined }: {
-        finalIsUnderlined?: boolean;
-    }) => {
-        textDecoration: string;
-        /** This is needed for custom anchor elements or link components
-         * that are passed as children to the `Link` component. */
-        a: {
-            _hover: {
+    baseStyle?: ({ finalIsUnderlined, hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        base: {
+            _visited: {
                 color: string;
+                _dark: {
+                    color: string;
+                };
+            } | {
+                color?: undefined;
+                _dark?: undefined;
+            };
+            textDecoration: string;
+            /** This is needed for custom anchor elements or link components
+             * that are passed as children to the `Link` component. */
+            a: {
+                _hover: {
+                    color: string;
+                };
+            };
+            base: {
+                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
@@ -54,99 +76,266 @@ declare const Link: {
             };
             wordWrap: string;
         };
-        color: string;
-        textDecorationStyle: string;
-        textDecorationThickness: string;
-        textUnderlineOffset: string;
-        _dark: {
-            color: string;
-        };
-        _hover: {
-            color: string;
-            textDecorationStyle: string;
-            textDecorationThickness: string;
-            _dark: {
-                color: string;
-            };
-        };
-        _visited: {
-            color: string;
-            _dark: {
-                color: string;
-            };
-        };
     };
-    variants: {
-        link: {};
-        disabled: {
-            color: string;
-            pointerEvents: string;
-        };
-        moreLink: {
-            alignItems: string;
-            display: string;
-            svg: {
-                height: string;
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "screenreaderOnly")[];
+        }>;
+    };
+    variants?: {
+        button: {
+            base: {
                 width: string;
-                textDecoration: string;
-                fill: string;
-            };
-            _hover: {
+                borderRadius: string;
+                lineHeight: string;
+                display: string;
+                cursor: string;
                 color: string;
+                justifyContent: string;
+                py: string;
+                px: string;
                 textDecoration: string;
+                fontWeight: string;
+                bg: string;
+                _dark: {
+                    color: string;
+                    bg: string;
+                };
+                _hover: {
+                    color: string;
+                    bg: string;
+                    textDecoration: string;
+                    _dark: {
+                        color: string;
+                        bg: string;
+                    };
+                };
+                _visited: {
+                    color: string;
+                    _dark: {
+                        _visited: {
+                            color: string;
+                        };
+                    };
+                };
             };
-            _visited: {
-                svg: {
-                    fill: string;
+        };
+        buttonCallout: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+            base: {
+                _hover: {
+                    color: string;
                 };
-                _dark: {
-                    svg: {
-                        fill: 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;
                 };
             };
         };
-        button: {
-            width: string;
-            borderRadius: string;
-            lineHeight: string;
-            display: string;
-            cursor: string;
-            color: string;
-            justifyContent: string;
-            py: string;
-            px: string;
-            textDecoration: string;
-            fontWeight: string;
-            bg: string;
-            _dark: {
-                color: string;
+        buttonDisabled: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+            base: {
                 bg: string;
-            };
-            _hover: {
                 color: string;
-                bg: string;
-                textDecoration: string;
-                _dark: {
+                opacity: string;
+                pointerEvents: string;
+                _visited: {
                     color: string;
+                    _dark: {
+                        color: string;
+                    };
+                } | {
+                    color?: undefined;
+                    _dark?: undefined;
+                };
+                _dark: {
                     bg: string;
+                    color: string;
                 };
+                base: any;
+                screenreaderOnly: {};
+                display: string;
             };
-            _visited: {
-                color: string;
-                _dark: {
-                    _visited: {
+        };
+        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;
+                };
+            };
+        };
+        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;
+                };
+            };
+        };
+        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;
+            };
+        };
+        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;
                 };
             };
         };
-        buttonPrimary: any;
-        buttonSecondary: any;
-        buttonPill: any;
-        buttonCallout: any;
-        buttonNoBrand: any;
-        buttonDisabled: any;
+        moreLink: ({ hasVisitedState }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+            base: {
+                alignItems: string;
+                display: string;
+                svg: {
+                    height: string;
+                    width: string;
+                    textDecoration: string;
+                    fill: string;
+                };
+                _hover: {
+                    color: string;
+                    textDecoration: string;
+                };
+                _visited: {
+                    svg: {
+                        fill: string;
+                    };
+                    _dark: {
+                        svg: {
+                            fill: string;
+                        };
+                    };
+                } | {
+                    svg?: undefined;
+                    _dark?: undefined;
+                };
+            };
+        };
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "button" | "buttonCallout" | "buttonDisabled" | "buttonNoBrand" | "buttonPill" | "buttonPrimary" | "buttonSecondary" | "moreLink";
+        colorScheme?: string;
     };
+    parts: ("base" | "screenreaderOnly")[];
 };
 export default Link;

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

@@ -27,6 +27,9 @@ declare const SearchBar: {
             };
             _hover: {
                 zIndex: string;
+                "+ .chakra-select__icon-wrapper": {
+                    zIndex: string;
+                };
             };
         };
     };

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

@@ -149,26 +149,22 @@ declare const StructuredContent: {
             marginInlineStart: string;
         };
         a: {
-            color: string;
-            textDecoration: string;
-            textDecorationStyle: string;
-            textDecorationThickness: string;
-            textUnderlineOffset: string;
-            _dark: {
-                color: string;
-            };
-            _hover: {
+            base: {
                 color: string;
+                textDecoration: string;
                 textDecorationStyle: string;
                 textDecorationThickness: string;
+                textUnderlineOffset: string;
                 _dark: {
                     color: string;
                 };
-            };
-            _visited: {
-                color: string;
-                _dark: {
+                _hover: {
                     color: string;
+                    textDecorationStyle: string;
+                    textDecorationThickness: string;
+                    _dark: {
+                        color: string;
+                    };
                 };
             };
         };

package/dist/src/theme/foundations/breakpoints.d.ts

@@ -13,11 +13,11 @@
  * @Note Chakra provides a 2xl option while the DS does not. We don't
  * recommend using this value until further notice.
  */
-declare const _default: import("@chakra-ui/theme-tools").Breakpoints<{
+declare const _default: {
     sm: string;
     md: string;
     lg: string;
     xl: string;
     "2xl": string;
-}>;
+};
 export default _default;

package/dist/src/theme/provider.d.ts

@@ -1,4 +1,4 @@
+import { ChakraProviderProps } from "@chakra-ui/react";
 import React from "react";
-import { ChakraProviderProps } from "./internalChakraProvider";
-declare const DSProvider: ({ children, colorModeManager, disableGlobalStyle, resetCSS, theme, }: React.PropsWithChildren<ChakraProviderProps>) => import("@emotion/react/jsx-runtime").JSX.Element;
+declare const DSProvider: ({ children, colorModeManager, disableGlobalStyle, resetCSS, theme, }: React.PropsWithChildren<ChakraProviderProps>) => import("react/jsx-runtime").JSX.Element;
 export default DSProvider;