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

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

@@ -1,5 +1,6 @@
 interface LogoBaseStyle {
-    size: keyof typeof size;
+    size: keyof typeof size | keyof typeof sizeBasedOnHeight;
+    sizeBasedOn: "height" | "width";
 }
 declare const size: {
     default: {
@@ -32,247 +33,53 @@ declare const size: {
         width: string;
     };
 };
-declare const Logo: {
-    baseStyle: (props: LogoBaseStyle) => {
-        svg: {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        };
-        maxWidth: string;
-        display: string;
-        height: string;
-        width: string;
-    } | {
-        svg: {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        };
-        maxWidth: string;
-        display: string;
-        height: string;
-        width: string;
-    } | {
-        svg: {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        };
-        maxWidth: string;
-        display: string;
+declare const sizeBasedOnHeight: {
+    default: {
+        maxHeight: string;
+    };
+    xxsmall: {
+        maxHeight: string;
+    };
+    xsmall: {
+        maxHeight: string;
+    };
+    small: {
+        maxHeight: string;
+    };
+    medium: {
+        maxHeight: string;
+    };
+    large: {
+        maxHeight: string;
+    };
+    xlarge: {
+        maxHeight: string;
+    };
+    xxlarge: {
         height: string;
         width: string;
-    } | {
-        svg: {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        };
-        maxWidth: string;
-        display: string;
+    };
+    xxxlarge: {
         height: string;
         width: string;
-    } | {
+    };
+};
+declare const Logo: {
+    baseStyle: (props: LogoBaseStyle) => {
         svg: {
             maxWidth: string;
             display: string;
             height: string;
             width: string;
         } | {
-            maxWidth: string;
-            display: string;
             height: string;
             width: string;
-        } | {
-            maxWidth: string;
             display: string;
-            height: string;
-            width: string;
         } | {
-            maxWidth: string;
+            maxHeight: string;
             display: string;
             height: string;
             width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
         };
         maxWidth: string;
         display: string;
@@ -285,97 +92,18 @@ declare const Logo: {
             height: string;
             width: string;
         } | {
-            maxWidth: string;
-            display: string;
             height: string;
             width: string;
-        } | {
-            maxWidth: string;
             display: string;
-            height: string;
-            width: string;
         } | {
-            maxWidth: string;
+            maxHeight: string;
             display: string;
             height: string;
             width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
         };
-        maxWidth: string;
-        display: string;
         height: string;
         width: string;
-    } | {
-        svg: {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        };
-        maxWidth: string;
         display: string;
-        height: string;
-        width: string;
     } | {
         svg: {
             maxWidth: string;
@@ -383,95 +111,19 @@ declare const Logo: {
             height: string;
             width: string;
         } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
             height: string;
             width: string;
-        } | {
-            maxWidth: string;
             display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
         } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
+            maxHeight: string;
             display: string;
-        } | {
             height: string;
             width: string;
-            display: string;
         };
-        height: string;
-        width: string;
+        maxHeight: string;
         display: string;
-    } | {
-        svg: {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            maxWidth: string;
-            display: string;
-            height: string;
-            width: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        } | {
-            height: string;
-            width: string;
-            display: string;
-        };
         height: string;
         width: string;
-        display: string;
     };
 };
 export default Logo;

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;

package/dist/src/utils/getSectionColors.d.ts

@@ -0,0 +1,13 @@
+import { SectionTypes } from "../helpers/types";
+type ColorSection = {
+    primary: string;
+    secondary: string | null;
+};
+type ColorValue = string;
+interface GetSectionColorsProps {
+    type: SectionTypes;
+    colorValue?: "primary" | "secondary";
+    isDark?: boolean;
+}
+export declare function getSectionColors({ type, colorValue, isDark, }: GetSectionColorsProps): ColorSection | ColorValue;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nypl/design-system-react-components",
-  "version": "2.1.1",
+  "version": "2.2.0-react-chakra-rc",
   "description": "NYPL Reservoir Design System React Components",
   "repository": {
     "type": "git",
@@ -21,7 +21,7 @@
     "./dist/styles.css": "./dist/styles.css"
   },
   "engines": {
-    "node": ">=14 <=16"
+    "node": ">=18"
   },
   "author": "NYPL",
   "license": "Apache-2.0",
@@ -56,14 +56,14 @@
     "types-ramda": "0.29.4"
   },
   "dependencies": {
-    "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
-    "@chakra-ui/react": ">=1.8.5 <=1.8.8",
-    "@chakra-ui/system": ">=1.11.0 <=1.12.1",
+    "@chakra-ui/focus-lock": "2.1.0",
+    "@chakra-ui/react": "2.8.1",
+    "@chakra-ui/system": "2.6.2",
     "@charlietango/use-native-lazy-loading": "1.10.0",
-    "@emotion/react": "11.4.1",
-    "@emotion/styled": "11.3.0",
+    "@emotion/react": "11.11.1",
+    "@emotion/styled": "11.11.0",
     "downshift": "6.1.7",
-    "framer-motion": "4.1.17",
+    "framer-motion": "10.16.4",
     "react-datepicker": "4.14.1",
     "react-intersection-observer": "9.2.2",
     "system-font-css": "2.0.2",
@@ -72,14 +72,14 @@
     "vite-plugin-svgr": "2.4.0"
   },
   "peerDependencies": {
-    "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
-    "@chakra-ui/react": ">=1.8.5 <=1.8.8",
-    "@chakra-ui/system": ">=1.11.0 <=1.12.1",
-    "@emotion/react": "11.4.1",
-    "@emotion/styled": "11.3.0",
-    "framer-motion": "4.1.17",
-    "react": ">=16.13.0",
-    "react-dom": ">=16.13.0",
+    "@chakra-ui/focus-lock": ">=2.1.0",
+    "@chakra-ui/system": ">=2.6.2",
+    "@chakra-ui/react": ">=2.8.1",
+    "@emotion/react": ">=11.11.1",
+    "@emotion/styled": ">=11.11.0",
+    "framer-motion": ">=10.16.4",
+    "react": ">=18",
+    "react-dom": ">=18",
     "typescript": "4.9.5"
   },
   "devDependencies": {
@@ -105,7 +105,7 @@
     "@types/jest": "29.4.0",
     "@types/jest-axe": "3.5.3",
     "@types/node": "18.13.0",
-    "@types/react": "16.9.41",
+    "@types/react": "18.2.21",
     "@types/testing-library__jest-dom": "5.14.1",
     "@typescript-eslint/eslint-plugin": "5.57.0",
     "@typescript-eslint/parser": "5.57.0",
@@ -125,11 +125,11 @@
     "normalize.css": "8.0.1",
     "prettier": "2.4.1",
     "prop-types": "15.8.1",
-    "react": "17.0.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-autosuggest": "10.0.2",
     "react-docgen-typescript-loader": "3.7.2",
-    "react-dom": "17.0.2",
-    "react-test-renderer": "17.0.2",
+    "react-test-renderer": "18.2.0",
     "remark-gfm": "3.0.1",
     "sass": "1.60.0",
     "sass-loader": "10.0.0",

package/dist/src/helpers/getSectionColors.d.ts

@@ -1,8 +0,0 @@
-import { SectionTypes } from "./types";
-type ColorSection = {
-    primary: string;
-    secondary: string | null;
-};
-type ColorVal = string;
-export declare function getSectionColors(type: SectionTypes, colorVal?: "primary" | "secondary"): ColorSection | ColorVal;
-export {};