@nypl/design-system-react-components 3.6.2 → 4.0.0-remove-matchMedia-test

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

@@ -100,27 +100,15 @@ declare const FeedbackBox: {
                 zIndex: string;
             };
         };
-        radioGroup: {
-            ".radioGroupStack": {
-                flexDirection: {
-                    base: "column";
-                    md: "row";
-                };
-                gap: {
-                    base: string;
-                    md: string;
-                };
-            };
-        };
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("radioGroup" | "closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
+            keys: ("closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
         }>;
     };
     variants?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("radioGroup" | "closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
+            keys: ("closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
         }>;
     };
     defaultProps?: {
@@ -128,6 +116,6 @@ declare const FeedbackBox: {
         variant?: string | number;
         colorScheme?: string;
     };
-    parts: ("radioGroup" | "closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
+    parts: ("closeButton" | "drawerBody" | "drawerContent" | "drawerHeader" | "openButton")[];
 };
 export default FeedbackBox;

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

@@ -353,79 +353,6 @@ declare const Heading: {
                 width: string;
             };
         };
-        one: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                letterSpacing: string;
-                lineHeight: string;
-            };
-        };
-        two: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        three: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        four: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        five: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        six: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
         display1: {
             base: {
                 fontSize: {
@@ -573,61 +500,10 @@ declare const Heading: {
                 width: string;
             };
         };
-        primary: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                letterSpacing: string;
-                lineHeight: string;
-            };
-        };
-        secondary: {
-            base: {
-                width: string;
-                a: {
-                    textUnderlineOffset: string;
-                };
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        tertiary: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
-        callout: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
+        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "heading7" | "heading8";
         colorScheme?: string;
     };
     parts: ("base" | "headingWrapper")[];

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

@@ -14,23 +14,23 @@ declare const Hero: {
                 backgroundSize: string;
                 backgroundPosition: string;
                 display: string;
-                flexFlow: {
-                    base: "column nowrap";
-                    md: "row nowrap";
+                gridTemplateColumns: string;
+                gap: {
+                    base: string;
+                    md: string;
+                    xl: string;
                 };
-                justifyContent: string;
                 minHeight: string;
                 p: string;
+                paddingInline: string;
             };
             content: {
                 bg: string;
                 color: any;
-                flex: {
-                    base: string;
-                    md: string;
-                };
-                maxWidth: {
-                    md: "860px";
+                gridColumn: {
+                    base: "1 / -1";
+                    md: "2 / 12";
+                    lg: "3 / 11";
                 };
                 padding: {
                     base: "inset.default";
@@ -735,7 +735,7 @@ declare const Hero: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "primary" | "secondary" | "tertiary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "campaign" | "fiftyFifty";
+        variant?: "primary" | "secondary" | "secondaryBooksAndMore" | "secondaryLocations" | "secondaryResearch" | "secondaryWhatsOn" | "tertiary" | "campaign" | "fiftyFifty";
         colorScheme?: string;
     };
     parts: ("base" | "content" | "imgWrapper" | "bodyText" | "heading" | "interior")[];

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

@@ -1,5 +1,4 @@
 import { StyleFunctionProps } from "@chakra-ui/system";
-import { iconSizeStyles } from "../sharedStyles";
 declare const align: Record<string, {
     marginEnd?: string;
     marginStart?: string;
@@ -7,11 +6,15 @@ declare const align: Record<string, {
 declare const iconRotation: Record<string, {
     transform: string;
 }>;
+declare const size: Record<string, {
+    height?: string;
+    width?: string;
+}>;
 interface IconBaseStyle extends StyleFunctionProps {
     align: keyof typeof align;
     color: string;
     iconRotation: keyof typeof iconRotation;
-    size: keyof typeof iconSizeStyles;
+    size: keyof typeof size;
 }
 declare const Icon: {
     baseStyle?: (props: IconBaseStyle) => {

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

@@ -90,45 +90,6 @@ declare const Link: {
         }>;
     };
     variants?: {
-        button: {
-            base: {
-                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;
-                    bg: string;
-                };
-                _hover: {
-                    color: string;
-                    bg: string;
-                    textDecoration: string;
-                    textDecorationStyle: string;
-                    textDecorationThickness: string;
-                    _dark: {
-                        color: string;
-                        bg: string;
-                    };
-                };
-                _visited: {
-                    color: string;
-                    _dark: {
-                        _visited: {
-                            color: string;
-                        };
-                    };
-                };
-            };
-        };
         buttonCallout: ({ hasVisitedState }: CustomLinkStyleProps) => {
             base: any;
         };
@@ -182,7 +143,7 @@ declare const Link: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "button" | "buttonCallout" | "buttonDisabled" | "buttonNoBrand" | "buttonPill" | "buttonPrimary" | "buttonSecondary" | "moreLink";
+        variant?: "buttonCallout" | "buttonDisabled" | "buttonNoBrand" | "buttonPill" | "buttonPrimary" | "buttonSecondary" | "moreLink";
         colorScheme?: string;
     };
     parts: ("base" | "screenreaderOnly")[];

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

@@ -35,7 +35,7 @@ declare const NewsletterSignup: {
                     md: "dark.ui.border.default";
                 };
                 borderLeftColor: {
-                    md: "dark.section.blogs.secondary" | "dark.section.locations.primary" | "dark.brand.primary" | "dark.section.books-and-more.primary" | "dark.section.connect.primary" | "dark.section.education.primary" | "dark.section.research.primary" | "dark.section.research-library.lpa" | "dark.section.research-library.schomburg" | "dark.section.whats-on.primary" | "dark.ui.gray.medium" | "dark.section.research-library.schwartzman";
+                    md: "dark.section.blogs.secondary" | "dark.section.locations.primary" | "dark.section.books-and-more.primary" | "dark.brand.primary" | "dark.section.connect.primary" | "dark.section.education.primary" | "dark.section.research.primary" | "dark.section.research-library.lpa" | "dark.section.research-library.schomburg" | "dark.section.whats-on.primary" | "dark.ui.gray.medium" | "dark.section.research-library.schwartzman";
                 };
             };
             padding: {

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

@@ -2,18 +2,15 @@ import { NotificationTypes } from "../../components/Notification/Notification";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface NotificationBaseStyle extends StyleFunctionProps {
     isCentered: boolean;
-    noMargin: boolean;
     notificationHeading: string;
     notificationType: NotificationTypes;
     showIcon: boolean;
 }
 declare const Notification: {
-    baseStyle?: ({ isCentered, noMargin, notificationHeading, notificationType, }: NotificationBaseStyle) => {
+    baseStyle?: ({ isCentered, notificationHeading, notificationType, }: NotificationBaseStyle) => {
         bg: string;
-        borderRadius: string;
         display: string;
         fontSize: string;
-        m: string;
         position: string;
         p: string;
         textAlign: string;

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

@@ -1,12 +1,11 @@
 import { ProgressIndicatorLabelPlacements, ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface ProgressIndicatorBaseStyle extends StyleFunctionProps {
-    darkMode: boolean;
     size: ProgressIndicatorSizes;
     labelPlacement: ProgressIndicatorLabelPlacements;
 }
 declare const ProgressIndicator: {
-    baseStyle?: ({ darkMode, size, labelPlacement }: ProgressIndicatorBaseStyle) => {
+    baseStyle?: ({ size, labelPlacement }: ProgressIndicatorBaseStyle) => {
         color: string;
         fontSize: string;
         _dark: {

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

@@ -1,5 +1,5 @@
 declare const SearchBar: {
-    baseStyle?: ({ hasSelectElem }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+    baseStyle?: {
         ".textInput": {
             flexGrow: number;
             "div > input": {

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

@@ -79,12 +79,12 @@ declare const CustomSlider: {
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
+            keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
         }>;
     };
     variants?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
+            keys: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
         }>;
     };
     defaultProps?: {
@@ -92,6 +92,6 @@ declare const CustomSlider: {
         variant?: string | number;
         colorScheme?: string;
     };
-    parts: ("track" | "container" | "textInput" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "sliderContainer")[];
+    parts: ("track" | "container" | "thumb" | "filledTrack" | "leftValue" | "rightValue" | "textInput" | "sliderContainer")[];
 };
 export default CustomSlider;

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

@@ -70,19 +70,6 @@ declare const StatusBadge: {
         [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
     };
     variants?: {
-        low: {};
-        medium: {
-            borderColor: string;
-            _dark: {
-                borderColor: string;
-            };
-        };
-        high: {
-            borderColor: string;
-            _dark: {
-                borderColor: string;
-            };
-        };
         neutral: {
             borderColor: string;
             _dark: {
@@ -132,7 +119,7 @@ declare const StatusBadge: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "medium" | "neutral" | "informative" | "positive" | "negative" | "warning" | "recommendation" | "low" | "high";
+        variant?: "neutral" | "informative" | "positive" | "negative" | "warning" | "recommendation";
         colorScheme?: string;
     };
 };

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

@@ -1,69 +1,59 @@
 declare const _default: {
     Template: {
-        baseStyle?: {
+        baseStyle?: () => {
             boxSizing: string;
             color: string;
             display: string;
-            gridTemplateColumns: string;
-            rowGap: string;
-            _dark: {
-                color: string;
+            maxWidth: string;
+            minWidth: string;
+            m: string;
+            p: {
+                base: string;
+                md: string;
+                xl: string;
             };
-        };
-        sizes?: {};
-        variants?: {
-            [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
-        };
-        defaultProps?: {
-            size?: never;
-            variant?: string | number;
-            colorScheme?: string;
-        };
-    };
-    TemplateBreakout: {
-        baseStyle?: {
-            width: string;
-            gridColumn: 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;
-        };
-    };
-    TemplateContent: {
-        baseStyle?: {
-            gridColumn: string;
-            display: {
-                base: "flex";
-                md: "grid";
+            gridTemplateAreas: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+            columnGap: {
+                base: string;
+                md: string;
+                xl: string;
             };
-            flexDirection: {
-                base: "column";
-                md: any;
+            "& > *:not(:last-child)": {
+                mb: {
+                    base: string;
+                    md: string;
+                    xl: string;
+                };
             };
-            gridTemplateColumns: string;
-            paddingY: number;
-            rowGap: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
         };
         variants?: {
             left: {
+                gridTemplateAreas: {
+                    base: "\"breakout\" \"top\" \"sidebar\" \"main\" \"bottom\"";
+                    md: "\"breakout breakout\" \"top top\" \"sidebar main\" \"bottom bottom\"";
+                };
                 gridTemplateColumns: {
-                    md: "271px 1fr";
+                    base: "100%";
+                    md: "repeat(2, minmax(100px, 1fr))";
+                    lg: "minmax(100px, 1fr) minmax(200px, 2fr)";
+                    xl: "minmax(100px, 1fr) minmax(300px, 3fr)";
                 };
             };
             right: {
+                gridTemplateAreas: {
+                    base: "\"breakout\" \"top\" \"main\" \"sidebar\" \"bottom\"";
+                    md: "\"breakout breakout\" \"top top\" \"main sidebar\" \"bottom bottom\"";
+                };
                 gridTemplateColumns: {
-                    md: "1fr 271px";
+                    base: "100%";
+                    md: "repeat(2, minmax(100px, 1fr))";
+                    lg: "minmax(200px, 2fr) minmax(100px, 1fr)";
+                    xl: "minmax(300px, 3fr) minmax(100px, 1fr)";
                 };
             };
         };
@@ -73,14 +63,15 @@ declare const _default: {
             colorScheme?: string;
         };
     };
-    TemplateContentTopBottom: {
-        baseStyle?: {
-            gridColumn: {
-                base: "1";
-                md: "1 / span 2";
+    TemplateBreakout: {
+        baseStyle?: () => {
+            width: string;
+            ml: string;
+            px: {
+                base: string;
+                md: string;
+                xl: string;
             };
-            height: string;
-            paddingX: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -94,87 +85,20 @@ declare const _default: {
             colorScheme?: string;
         };
     };
-    TemplateContentPrimary: {
+    TemplateMainNarrow: {
         baseStyle?: {
-            gridColumn: {
-                base: "1";
-                md: "1 / span 2";
-            };
-            paddingX: string;
+            maxWidth: string;
+            m: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
         };
         variants?: {
-            left: {
-                gridColumn: {
-                    base: "1";
-                    md: "2";
-                };
-                marginEnd: {
-                    md: number;
-                };
-                minWidth: {
-                    md: number;
-                };
-                paddingRight: string;
-                paddingLeft: {
-                    base: "s";
-                    md: "l";
-                };
-                overflow: {
-                    base: "unset";
-                    md: "hidden";
-                };
-            };
-            right: {
-                gridColumn: string;
-                paddingRight: {
-                    base: "s";
-                    md: "l";
-                };
-                paddingLeft: string;
-                overflow: {
-                    base: "unset";
-                    md: "hidden";
-                };
-            };
-        };
-        defaultProps?: {
-            size?: string | number;
-            variant?: "right" | "left";
-            colorScheme?: string;
-        };
-    };
-    TemplateContentSidebar: {
-        baseStyle?: import("@chakra-ui/styled-system").SystemStyleInterpolation;
-        sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
         };
-        variants?: {
-            left: {
-                gridColumn: string;
-                paddingLeft: string;
-                paddingRight: {
-                    base: "s";
-                    md: number;
-                };
-            };
-            right: {
-                gridColumn: {
-                    base: "1";
-                    md: "2";
-                };
-                paddingLeft: {
-                    base: "s";
-                    md: number;
-                };
-                paddingRight: string;
-            };
-        };
         defaultProps?: {
             size?: string | number;
-            variant?: "right" | "left";
+            variant?: string | number;
             colorScheme?: string;
         };
     };

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

@@ -56,18 +56,10 @@ declare const Text: {
             fontWeight: string;
             lineHeight: number;
         };
-        tag: {
-            fontSize: string;
-            fontWeight: string;
-        };
-        mini: {
-            fontSize: string;
-            fontWeight: string;
-        };
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "caption" | "default" | "body1" | "body2" | "tag" | "mini" | "overline1" | "overline2" | "subtitle1" | "subtitle2";
+        variant?: "caption" | "default" | "body1" | "body2" | "overline1" | "overline2" | "subtitle1" | "subtitle2";
         colorScheme?: string;
     };
 };