@nypl/design-system-react-components 3.6.3 → 4.0.0-alpha-rc

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/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

@@ -13,10 +13,10 @@ declare const NewsletterSignup: {
         pitch: {
             bg: string;
             borderLeftColor: {
-                md: "section.blogs.secondary" | "section.books-and-more.primary" | "brand.primary" | "section.connect.primary" | "section.education.primary" | "section.locations.primary" | "section.research.primary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.whats-on.primary" | "ui.gray.medium" | "section.research-library.schwartzman";
+                md: string;
             };
             borderTopColor: {
-                base: "section.blogs.secondary" | "section.books-and-more.primary" | "brand.primary" | "section.connect.primary" | "section.education.primary" | "section.locations.primary" | "section.research.primary" | "section.research-library.lpa" | "section.research-library.schomburg" | "section.whats-on.primary" | "ui.gray.medium" | "section.research-library.schwartzman";
+                base: string;
                 md: "ui.border.default";
             };
             borderWidth: {
@@ -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.${string}`;
                 };
             };
             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/slider.d.ts

@@ -7,7 +7,7 @@ interface CustomSliderBaseStyle extends StyleFunctionProps {
     showValues: boolean;
 }
 declare const CustomSlider: {
-    baseStyle?: ({ isDarkMode, isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
+    baseStyle?: ({ isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
         container: {
             display: string;
             alignItems: string;
@@ -40,6 +40,7 @@ declare const CustomSlider: {
             };
             _dark: {
                 bgColor: string;
+                borderColor: string;
                 _disabled: {
                     bgColor: string;
                     borderColor: string;
@@ -48,6 +49,9 @@ declare const CustomSlider: {
         };
         filledTrack: {
             bgColor: string;
+            _dark: {
+                bgColor: string;
+            };
         };
         leftValue: {
             color: string;
@@ -79,12 +83,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 +96,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/structuredContent.d.ts

@@ -344,10 +344,7 @@ declare const StructuredContent: {
                 base: string;
                 md: string;
             };
-            paddingTop: 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.
-             */
+            paddingTop: string;
             _dark: {
                 borderColor: string;
                 color: string;
@@ -470,7 +467,7 @@ declare const StructuredContent: {
                     base: string;
                     md: string;
                 };
-                fontSize: string;
+                fontSize: any;
                 gap: string;
                 letterSpacing: string;
                 lineHeight: number;

package/dist/src/theme/components/{customTable.d.ts → table.d.ts}

@@ -65,7 +65,7 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
         base: string;
         md: string;
     };
-    fontSize: string;
+    fontSize: any;
     gap: string;
     letterSpacing: string;
     lineHeight: number;
@@ -203,7 +203,7 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
         base: string;
         md: string;
     };
-    fontSize: string;
+    fontSize: any;
     gap: string;
     letterSpacing: string;
     lineHeight: number;
@@ -280,7 +280,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 };
                 color: string;
                 fontWeight: string;
-                fontSize: string;
+                fontSize: any;
                 textTransform: string;
                 verticalAlign: string;
                 _dark: {
@@ -424,7 +424,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 base: string;
                 md: string;
             };
-            fontSize: string;
+            fontSize: any;
             gap: string;
             letterSpacing: string;
             lineHeight: number;
@@ -522,7 +522,7 @@ declare const CustomTable: {
                     };
                     color: string;
                     fontWeight: string;
-                    fontSize: string;
+                    fontSize: any;
                     textTransform: string;
                     verticalAlign: string;
                     _dark: {
@@ -666,7 +666,7 @@ declare const CustomTable: {
                     base: string;
                     md: string;
                 };
-                fontSize: string;
+                fontSize: any;
                 gap: string;
                 letterSpacing: string;
                 lineHeight: number;

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;
         };
     };