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

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

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

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

@@ -13,7 +13,6 @@ declare const Label: {
         display: string;
         fontSize: string;
         fontWeight: string;
-        marginBottom: string;
         width: string;
         _dark: {
             color: string;

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

@@ -54,8 +54,6 @@ export declare const unorderedStyles: (props?: ListBaseStyle) => {
             };
         };
     };
-    margin: string;
-    marginBottom: string;
 };
 export declare const descriptionStyles: (showRowDividers?: boolean) => {
     dl: {
@@ -173,14 +171,6 @@ declare const List: {
                         };
                     };
                 };
-                margin: string;
-                marginBottom: string;
-            };
-        };
-        ol: {
-            base: {
-                margin: string;
-                marginBottom: string;
             };
         };
         dl: ({ showRowDividers }: StyleFunctionProps) => {
@@ -251,7 +241,7 @@ declare const List: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "dl" | "ol" | "ul";
+        variant?: "dl" | "ul";
         colorScheme?: string;
     };
     parts: ("base" | "heading")[];

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.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";
+                    md: `dark.${string}`;
                 };
             };
             padding: {
@@ -62,7 +62,7 @@ declare const NewsletterSignup: {
         form: {
             width: string;
         };
-        "#newsletter-form-parent": {
+        ".ds-newslettersignup-form > div": {
             gridTemplateColumns: {
                 base: any;
                 lg: string;

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

@@ -1,13 +1,13 @@
-import { NotificationTypes } from "../../components/Notification/Notification";
+import { NotificationVariants } from "../../components/Notification/Notification";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface NotificationBaseStyle extends StyleFunctionProps {
     isCentered: boolean;
     notificationHeading: string;
-    notificationType: NotificationTypes;
+    variant: NotificationVariants;
     showIcon: boolean;
 }
 declare const Notification: {
-    baseStyle?: ({ isCentered, notificationHeading, notificationType, }: NotificationBaseStyle) => {
+    baseStyle?: ({ isCentered, notificationHeading, variant }: NotificationBaseStyle) => {
         bg: string;
         display: string;
         fontSize: string;

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

@@ -1,14 +1,14 @@
-import { NotificationTypes } from "../../components/Notification/Notification";
+import { NotificationVariants } from "../../components/Notification/Notification";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface NotificationContentBaseStyle extends StyleFunctionProps {
     alignText: boolean;
     isCentered: boolean;
     notificationHeading: string;
-    notificationType: NotificationTypes;
+    variant: NotificationVariants;
     showIcon: boolean;
 }
 declare const NotificationContent: {
-    baseStyle?: ({ isCentered, notificationHeading, notificationType, showIcon, }: NotificationContentBaseStyle) => {
+    baseStyle?: ({ isCentered, notificationHeading, variant, showIcon, }: NotificationContentBaseStyle) => {
         display: string;
         justifyContent: string;
         content: {

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

@@ -1,12 +1,12 @@
-import { NotificationTypes } from "../../components/Notification/Notification";
+import { NotificationVariants } from "../../components/Notification/Notification";
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface NotificationHeadingBaseStyle extends StyleFunctionProps {
     icon: boolean;
     isCentered: boolean;
-    notificationType: NotificationTypes;
+    variant: NotificationVariants;
 }
 declare const NotificationHeading: {
-    baseStyle?: ({ icon, isCentered, notificationType }: NotificationHeadingBaseStyle) => {
+    baseStyle?: ({ icon, isCentered, variant }: NotificationHeadingBaseStyle) => {
         display: string;
         flexDirection: string;
         m: string;

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

@@ -24,10 +24,10 @@ declare const RadioGroup: {
             };
             wordWrap?: string;
             display: string;
+            mb: string;
             color: string;
             fontSize: string;
             fontWeight: string;
-            marginBottom: string;
             span: {
                 fontWeight: string;
             };

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

@@ -1,13 +1,13 @@
 declare const SearchBar: {
-    baseStyle?: {
-        ".textInput": {
+    baseStyle?: ({ hasSelectElem }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        ".ds-searchBar-textInput": {
             flexGrow: number;
             "div > input": {
                 borderRight: number;
                 borderRightRadius: number;
             };
         };
-        ".searchButton": {
+        ".ds-searchBar-button": {
             minWidth: string;
             borderLeftRadius: string;
             lineHeight: string;

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

@@ -1,9 +1,10 @@
 import { StyleFunctionProps } from "@chakra-ui/system";
 interface SelectBaseStyle extends StyleFunctionProps {
     labelPosition: string;
+    showLabel: boolean;
 }
 declare const Select: {
-    baseStyle?: ({ labelPosition }: SelectBaseStyle) => {
+    baseStyle?: ({ labelPosition, labelWidth, showLabel }: SelectBaseStyle) => {
         inline: {
             display: {
                 md: "flex";
@@ -108,10 +109,13 @@ declare const Select: {
                 };
             };
         };
+        "div[data-testid='ds-helperErrorText']": {
+            marginLeft: string;
+        };
     };
     sizes?: {
         [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
-            keys: ("select" | "inline" | "helperText")[];
+            keys: ("select" | "inline")[];
         }>;
     };
     variants?: {
@@ -126,6 +130,6 @@ declare const Select: {
         variant?: "searchbar";
         colorScheme?: string;
     };
-    parts: ("select" | "inline" | "helperText")[];
+    parts: ("select" | "inline")[];
 };
 export default Select;

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;

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

@@ -86,7 +86,7 @@ declare const SocialMediaLinks: {
             gap: string;
             a: {
                 color: string;
-                ".platLink": {
+                ".ds-socialMediaLinks-icon": {
                     minHeight: {
                         base: string;
                         md: "0";
@@ -136,7 +136,7 @@ declare const SocialMediaLinks: {
             gap: string;
             a: {
                 color: string;
-                ".platLink": {
+                ".ds-socialMediaLinks-icon": {
                     minHeight: {
                         base: string;
                         md: "0";

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

@@ -6,68 +6,6 @@ interface StructuredContentBaseStyle extends StyleFunctionProps {
 }
 declare const StructuredContent: {
     baseStyle?: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
-        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;
-            };
-        };
-        fallback: {
-            base: {
-                width: string;
-                marginTop: string;
-                marginStart: string;
-                marginEnd: string;
-                fontSize: string;
-                fontWeight: string;
-                lineHeight: string;
-            };
-        };
         display1: {
             base: {
                 fontSize: {
@@ -242,7 +180,7 @@ declare const StructuredContent: {
          * not rendered from the Reservoir DS. Typically, these HTML elements
          * are added from an API response.
          */
-        ".structuredcontent-body > div": {
+        ".ds-structuredContent-body > div": {
             marginTop: string;
             marginInlineEnd: string;
             marginBottom: string;
@@ -287,7 +225,6 @@ declare const StructuredContent: {
                 };
             };
             margin: string;
-            marginBottom: string;
             marginInlineStart: string;
             paddingStart: string;
             padding: string;
@@ -344,10 +281,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 +404,6 @@ declare const StructuredContent: {
                     base: string;
                     md: string;
                 };
-                fontSize: string;
                 gap: string;
                 letterSpacing: string;
                 lineHeight: number;

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

@@ -19,7 +19,6 @@ declare const StyledList: {
             };
         };
         margin: string;
-        marginBottom: string;
         marginInlineStart: string;
         paddingStart: string;
         padding: string;

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

@@ -9,7 +9,7 @@ interface SubNavChildrenStyleProps extends StyleFunctionProps {
 declare const SubNav: {
     baseStyle?: ({ backgroundColor, highlightColor }: SubNavStyleProps) => {
         base: {
-            ".selectedItem": {
+            ".ds-subNav-selectedItem": {
                 color: string;
                 fontWeight: string;
                 backgroundColor: string;

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

@@ -1,9 +1,7 @@
 import { StyleFunctionProps } from "@chakra-ui/system";
-import { TableBodyTextSizes } from "../../components/Table/Table";
 interface BaseStyleProps extends StyleFunctionProps {
     columnHeadersBackgroundColor?: string;
     columnHeadersTextColor?: string;
-    tableTextSize?: TableBodyTextSizes;
     isScrollable?: boolean;
     showRowDividers?: boolean;
     useRowHeaders?: boolean;
@@ -57,7 +55,7 @@ export declare const baseTRStyles: (columnHeadersBackgroundColor?: string, isScr
         borderColor: string;
     };
 };
-export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, tableTextSize?: any, isScrollable?: boolean, showRowDividers?: boolean) => {
+export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, isScrollable?: boolean, showRowDividers?: boolean) => {
     border: string;
     borderBottom: string;
     borderColor: string;
@@ -65,7 +63,6 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
         base: string;
         md: string;
     };
-    fontSize: string;
     gap: string;
     letterSpacing: string;
     lineHeight: number;
@@ -113,7 +110,7 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
         };
     };
 };
-export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, tableTextSize?: string, isScrollable?: boolean, showRowDividers?: boolean, useRowHeaders?: boolean) => {
+export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, isScrollable?: boolean, showRowDividers?: boolean, useRowHeaders?: boolean) => {
     color: string;
     fontWeight: string;
     fontSize: string;
@@ -189,7 +186,7 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
         };
     };
 };
-export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, tableTextSize?: string, isScrollable?: boolean, showRowDividers?: boolean) => {
+export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, isScrollable?: boolean, showRowDividers?: boolean) => {
     _last: {
         borderBottom: string | {
             base: number;
@@ -203,7 +200,6 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
         base: string;
         md: string;
     };
-    fontSize: string;
     gap: string;
     letterSpacing: string;
     lineHeight: number;
@@ -247,7 +243,7 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
         };
     };
 };
-export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTextColor, tableTextSize, isScrollable, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
+export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTextColor, isScrollable, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
     base: {
         overflow: string;
         maxWidth: string;
@@ -280,7 +276,6 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 };
                 color: string;
                 fontWeight: string;
-                fontSize: string;
                 textTransform: string;
                 verticalAlign: string;
                 _dark: {
@@ -297,6 +292,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 md: "table-header-group";
             };
             th: {
+                fontSize: string;
                 _first: {
                     backgroundColor: string;
                     _dark: {
@@ -424,7 +420,6 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 base: string;
                 md: string;
             };
-            fontSize: string;
             gap: string;
             letterSpacing: string;
             lineHeight: number;
@@ -489,7 +484,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
     };
 };
 declare const CustomTable: {
-    baseStyle?: ({ columnHeadersBackgroundColor, columnHeadersTextColor, tableTextSize, isScrollable, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
+    baseStyle?: ({ columnHeadersBackgroundColor, columnHeadersTextColor, isScrollable, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
         base: {
             overflow: string;
             maxWidth: string;
@@ -522,7 +517,6 @@ declare const CustomTable: {
                     };
                     color: string;
                     fontWeight: string;
-                    fontSize: string;
                     textTransform: string;
                     verticalAlign: string;
                     _dark: {
@@ -539,6 +533,7 @@ declare const CustomTable: {
                     md: "table-header-group";
                 };
                 th: {
+                    fontSize: string;
                     _first: {
                         backgroundColor: string;
                         _dark: {
@@ -666,7 +661,6 @@ declare const CustomTable: {
                     base: string;
                     md: string;
                 };
-                fontSize: string;
                 gap: string;
                 letterSpacing: string;
                 lineHeight: number;

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

@@ -7,12 +7,11 @@ declare const _default: {
             maxWidth: string;
             minWidth: string;
             m: string;
-            p: {
+            px: {
                 base: string;
                 md: string;
                 xl: string;
             };
-            gridTemplateAreas: string;
             gridTemplateColumns: string;
             gridTemplateRows: string;
             columnGap: {
@@ -27,51 +26,77 @@ declare const _default: {
                     xl: string;
                 };
             };
+            /** The "content" area should span the full width of the content area from
+             * a mobile-first viewpoint. Using -1 for the "last column" value ensures
+             * that these elements span all columns in the grid. CSS classes were used
+             * for the "content" and "sidebar" ragions in order to simplify how
+             * variants are handled.
+             * */
+            "& .ds-template-content": {
+                gridColumn: {
+                    base: "1 / -1";
+                };
+            };
         };
         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\"";
+            sidebarLeft: {
+                "& .ds-template-content": {
+                    gridColumn: {
+                        sm: "7 / -1";
+                        md: "5 / -1";
+                        lg: "4 / -1";
+                    };
                 };
-                gridTemplateColumns: {
-                    base: "100%";
-                    md: "repeat(2, minmax(100px, 1fr))";
-                    lg: "minmax(100px, 1fr) minmax(200px, 2fr)";
-                    xl: "minmax(100px, 1fr) minmax(300px, 3fr)";
+                "& .ds-template-sidebar": {
+                    gridColumn: {
+                        base: "1 / -1";
+                        sm: "1 / 7";
+                        md: "1 / 5";
+                        lg: "1 / 4";
+                    };
                 };
             };
-            right: {
-                gridTemplateAreas: {
-                    base: "\"breakout\" \"top\" \"main\" \"sidebar\" \"bottom\"";
-                    md: "\"breakout breakout\" \"top top\" \"main sidebar\" \"bottom bottom\"";
+            sidebarRight: {
+                "& .ds-template-content": {
+                    gridColumn: {
+                        sm: "1 / 7";
+                        md: "1 / 9";
+                        lg: "1 / 10";
+                    };
                 };
-                gridTemplateColumns: {
-                    base: "100%";
-                    md: "repeat(2, minmax(100px, 1fr))";
-                    lg: "minmax(200px, 2fr) minmax(100px, 1fr)";
-                    xl: "minmax(300px, 3fr) minmax(100px, 1fr)";
+                "& .ds-template-sidebar": {
+                    gridColumn: {
+                        base: "1 / -1";
+                        sm: "7 / -1";
+                        md: "9 / -1";
+                        lg: "10 / -1";
+                    };
+                };
+            };
+            narrow: {
+                "& .ds-template-content": {
+                    gridColumn: {
+                        base: "1 / -1";
+                        md: "2 / 12";
+                        lg: "3 / 11";
+                    };
                 };
             };
         };
         defaultProps?: {
             size?: string | number;
-            variant?: "right" | "left";
+            variant?: "sidebarLeft" | "sidebarRight" | "narrow";
             colorScheme?: string;
         };
     };
     TemplateBreakout: {
         baseStyle?: () => {
-            width: string;
+            gridColumn: string;
             ml: string;
-            px: {
-                base: string;
-                md: string;
-                xl: string;
-            };
+            width: string;
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;
@@ -85,10 +110,40 @@ declare const _default: {
             colorScheme?: string;
         };
     };
-    TemplateMainNarrow: {
-        baseStyle?: {
-            maxWidth: string;
-            m: string;
+    TemplateFull: {
+        baseStyle?: () => {
+            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;
+        };
+    };
+    TemplateMain: {
+        baseStyle?: () => {
+            display: string;
+            columnGap: {
+                base: string;
+                md: string;
+                xl: string;
+            };
+            gridColumn: string;
+            gridTemplateColumns: string;
+            gridTemplateRows: string;
+            "& > *:not(:last-child)": {
+                mb: {
+                    base: string;
+                    md: string;
+                    xl: string;
+                };
+            };
         };
         sizes?: {
             [key: string]: import("@chakra-ui/styled-system").SystemStyleInterpolation;