@nypl/design-system-react-components 3.4.1 → 3.4.3-rc

package/dist/src/components/Heading/Heading.d.ts

@@ -1,6 +1,6 @@
 import { ChakraComponent, HeadingProps as ChakraHeadingProps } from "@chakra-ui/react";
 import React from "react";
-export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "primary", "secondary", "tertiary", "callout"];
+export declare const headingSizesArray: readonly ["display1", "heading1", "heading2", "heading3", "heading4", "heading5", "heading6", "heading7", "heading8", "primary", "secondary", "tertiary", "callout"];
 export declare const headingLevelsArray: readonly ["h1", "h2", "h3", "h4", "h5", "h6", "one", "two", "three", "four", "five", "six"];
 export type HeadingSizes = typeof headingSizesArray[number];
 export type HeadingLevels = typeof headingLevelsArray[number];

package/dist/src/components/Icons/IconSvgs.d.ts

@@ -29,6 +29,7 @@ declare const _default: {
     communicationCall: any;
     communicationChatBubble: any;
     communicationEmail: any;
+    contentFilterList: any;
     decorativeBookBroken: any;
     decorativeEnvelope: any;
     decorativeLibraryCard: any;
@@ -67,6 +68,7 @@ declare const _default: {
     socialTumblr: any;
     socialTwitter: any;
     socialVimeo: any;
+    socialX: any;
     socialYoutube: any;
     speakerNotes: any;
     sunFull: any;

package/dist/src/components/Icons/iconVariables.d.ts

@@ -1,6 +1,6 @@
 export declare const iconAlignArray: readonly ["left", "right", "none"];
 export declare const iconColorsArray: readonly ["transparent", "ui.black", "ui.white", "ui.disabled.primary", "ui.disabled.secondary", "ui.error.primary", "ui.error.secondary", "ui.focus", "ui.link.primary", "ui.link.primary-05", "ui.link.primary-10", "ui.link.secondary", "ui.link.tertiary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.test", "ui.warning.primary", "ui.warning.secondary", "ui.bg.default", "ui.bg.hover", "ui.bg.active", "ui.border.default", "ui.border.hover", "ui.typography.heading", "ui.typography.body", "ui.typography.inverse.heading", "ui.typography.inverse.body", "ui.gray.xxxx-dark", "ui.gray.xxx-dark", "ui.gray.xx-dark", "ui.gray.x-dark", "ui.gray.dark", "ui.gray.semi-dark", "ui.gray.medium", "ui.gray.semi-medium", "ui.gray.light-cool", "ui.gray.x-light-cool", "ui.gray.xx-light-cool", "ui.gray.light-warm", "ui.gray.x-light-warm", "brand.primary", "brand.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.secondary", "section.connect.primary", "section.connect.secondary", "section.education.primary", "section.education.secondary", "section.locations.primary", "section.locations.secondary", "section.research.primary", "section.research.secondary", "section.research-library.lpa", "section.research-library.schomburg", "section.research-library.schwarzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.brand.primary", "dark.brand.secondary", "dark.section.blogs.primary", "dark.section.blogs.secondary", "dark.section.books-and-more.primary", "dark.section.books-and-more.secondary", "dark.section.connect.primary", "dark.section.connect.secondary", "dark.section.education.primary", "dark.section.education.secondary", "dark.section.locations.primary", "dark.section.locations.secondary", "dark.section.research.primary", "dark.section.research.secondary", "dark.section.research-library.primary", "dark.section.research-library.secondary", "dark.section.whats-on.primary", "dark.section.whats-on.secondary", "dark.ui.disabled.primary", "dark.ui.disabled.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.focus", "dark.ui.link.primary", "dark.ui.link.primary-05", "dark.ui.link.primary-10", "dark.ui.link.secondary", "dark.ui.link.tertiary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.test", "dark.ui.warning.secondary", "dark.ui.warning.primary", "dark.ui.bg.page", "dark.ui.bg.default", "dark.ui.bg.hover", "dark.ui.bg.active", "dark.ui.border.default", "dark.ui.border.hover", "dark.ui.typography.heading", "dark.ui.typography.body", "dark.ui.typography.inverse.heading", "dark.ui.typography.inverse.body"];
-export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
+export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "contentFilterList", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialX", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityHamburger", "utilitySearch"];
 export declare const iconRotationsArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
 export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge", "xxxxlarge", "xxxxxlarge", "2xlarge", "3xlarge", "4xlarge", "5xlarge"];
 export declare const iconTypesArray: readonly ["default", "breadcrumbs"];

package/dist/src/components/SocialMediaLinks/SocialMediaLinks.d.ts

@@ -7,7 +7,7 @@ export declare const colorTypeArray: readonly ["link", "textDefault", "textInver
 export type ColorType = typeof colorTypeArray[number];
 export declare const sizeTypeArray: readonly ["small", "medium", "large"];
 export type SizeType = typeof sizeTypeArray[number];
-type IconNames = "fileTypeGenericDoc" | "socialFacebook" | "socialInstagram" | "socialPinterest" | "socialSoundCloud" | "socialTikTok" | "socialTumblr" | "socialTwitter" | "socialYoutube";
+type IconNames = "fileTypeGenericDoc" | "socialFacebook" | "socialInstagram" | "socialPinterest" | "socialSoundCloud" | "socialTikTok" | "socialTumblr" | "socialTwitter" | "socialX" | "socialYoutube";
 export interface SocialMediaLinkDataProps {
     /** Required. Label rendered on page is showLabel is true  */
     labelText: string;

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

@@ -22,7 +22,10 @@ export declare const fixedColumnStyles: (isScrollable?: boolean, useRowHeaders?:
     zIndex: string;
     _dark: {
         backgroundColor: string;
-        borderRight: string;
+        borderRight: string | {
+            base: any;
+            md: string;
+        };
     };
 };
 export declare const baseTRStyles: (columnHeadersBackgroundColor?: string, isScrollable?: boolean, showRowDividers?: boolean, useRowHeaders?: boolean) => {
@@ -57,10 +60,7 @@ export declare const baseTRStyles: (columnHeadersBackgroundColor?: string, isScr
 export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, tableTextSize?: any, isScrollable?: boolean, showRowDividers?: boolean) => {
     border: string;
     borderBottom: string;
-    borderColor: string | {
-        base: string;
-        md: string;
-    };
+    borderColor: string;
     display: {
         base: string;
         md: string;
@@ -83,17 +83,14 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
         md: string;
     };
     _first: {
-        borderBottom: string | {
-            base: string;
-            md: string;
+        borderBottom: string;
+        _dark: {
+            borderBottom: string;
         };
     };
     _last: {
         borderBottom: string;
-        borderColor: string | {
-            base: string;
-            md: string;
-        };
+        borderColor: string;
     };
     "> span": {
         flexBasis: string;
@@ -135,7 +132,10 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
         zIndex: string;
         _dark: {
             backgroundColor: string;
-            borderRight: string;
+            borderRight: string | {
+                base: any;
+                md: string;
+            };
         };
     };
     _dark: {
@@ -143,10 +143,7 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
     };
     border: string;
     borderBottom: string;
-    borderColor: string | {
-        base: string;
-        md: string;
-    };
+    borderColor: string;
     display: {
         base: string;
         md: string;
@@ -169,10 +166,7 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
     };
     _last: {
         borderBottom: string;
-        borderColor: string | {
-            base: string;
-            md: string;
-        };
+        borderColor: string;
     };
     "> span": {
         flexBasis: string;
@@ -201,14 +195,10 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
             base: number;
             md: string;
         };
-        borderColor: string;
     };
     border: string;
     borderBottom: string;
-    borderColor: string | {
-        base: string;
-        md: string;
-    };
+    borderColor: string;
     display: {
         base: string;
         md: string;
@@ -231,9 +221,9 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
         md: string;
     };
     _first: {
-        borderBottom: string | {
-            base: string;
-            md: string;
+        borderBottom: string;
+        _dark: {
+            borderBottom: string;
         };
     };
     "> span": {
@@ -269,6 +259,15 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
         backgroundSize: string;
         backgroundPosition: string;
         backgroundAttachment: string;
+        _dark: {
+            /** Show shadow to scroll */
+            background: string;
+            backgroundRepeat: string;
+            backgroundColor: string;
+            backgroundSize: string;
+            backgroundPosition: string;
+            backgroundAttachment: string;
+        };
     };
     innerTable: {
         borderCollapse: string;
@@ -285,10 +284,6 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 textTransform: string;
                 verticalAlign: string;
                 _dark: {
-                    backgroundColor: {
-                        base: "dark.ui.bg.default";
-                        md: "unset";
-                    };
                     color: string;
                 };
             };
@@ -304,6 +299,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
             th: {
                 _first: {
                     backgroundColor: string;
+                    _dark: {
+                        backgroundColor: string;
+                    };
                 };
             };
         };
@@ -355,7 +353,10 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 zIndex: string;
                 _dark: {
                     backgroundColor: string;
-                    borderRight: string;
+                    borderRight: string | {
+                        base: any;
+                        md: string;
+                    };
                 };
             };
             _dark: {
@@ -363,10 +364,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
             };
             border: string;
             borderBottom: string;
-            borderColor: string | {
-                base: string;
-                md: string;
-            };
+            borderColor: string;
             display: {
                 base: string;
                 md: string;
@@ -389,10 +387,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
             };
             _last: {
                 borderBottom: string;
-                borderColor: string | {
-                    base: string;
-                    md: string;
-                };
+                borderColor: string;
             };
             "> span": {
                 flexBasis: string;
@@ -421,14 +416,10 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                     base: number;
                     md: string;
                 };
-                borderColor: string;
             };
             border: string;
             borderBottom: string;
-            borderColor: string | {
-                base: string;
-                md: string;
-            };
+            borderColor: string;
             display: {
                 base: string;
                 md: string;
@@ -451,9 +442,9 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
                 md: string;
             };
             _first: {
-                borderBottom: string | {
-                    base: string;
-                    md: string;
+                borderBottom: string;
+                _dark: {
+                    borderBottom: string;
                 };
             };
             "> span": {
@@ -510,6 +501,15 @@ declare const CustomTable: {
             backgroundSize: string;
             backgroundPosition: string;
             backgroundAttachment: string;
+            _dark: {
+                /** Show shadow to scroll */
+                background: string;
+                backgroundRepeat: string;
+                backgroundColor: string;
+                backgroundSize: string;
+                backgroundPosition: string;
+                backgroundAttachment: string;
+            };
         };
         innerTable: {
             borderCollapse: string;
@@ -526,10 +526,6 @@ declare const CustomTable: {
                     textTransform: string;
                     verticalAlign: string;
                     _dark: {
-                        backgroundColor: {
-                            base: "dark.ui.bg.default";
-                            md: "unset";
-                        };
                         color: string;
                     };
                 };
@@ -545,6 +541,9 @@ declare const CustomTable: {
                 th: {
                     _first: {
                         backgroundColor: string;
+                        _dark: {
+                            backgroundColor: string;
+                        };
                     };
                 };
             };
@@ -596,7 +595,10 @@ declare const CustomTable: {
                     zIndex: string;
                     _dark: {
                         backgroundColor: string;
-                        borderRight: string;
+                        borderRight: string | {
+                            base: any;
+                            md: string;
+                        };
                     };
                 };
                 _dark: {
@@ -604,10 +606,7 @@ declare const CustomTable: {
                 };
                 border: string;
                 borderBottom: string;
-                borderColor: string | {
-                    base: string;
-                    md: string;
-                };
+                borderColor: string;
                 display: {
                     base: string;
                     md: string;
@@ -630,10 +629,7 @@ declare const CustomTable: {
                 };
                 _last: {
                     borderBottom: string;
-                    borderColor: string | {
-                        base: string;
-                        md: string;
-                    };
+                    borderColor: string;
                 };
                 "> span": {
                     flexBasis: string;
@@ -662,14 +658,10 @@ declare const CustomTable: {
                         base: number;
                         md: string;
                     };
-                    borderColor: string;
                 };
                 border: string;
                 borderBottom: string;
-                borderColor: string | {
-                    base: string;
-                    md: string;
-                };
+                borderColor: string;
                 display: {
                     base: string;
                     md: string;
@@ -692,9 +684,9 @@ declare const CustomTable: {
                     md: string;
                 };
                 _first: {
-                    borderBottom: string | {
-                        base: string;
-                        md: string;
+                    borderBottom: string;
+                    _dark: {
+                        borderBottom: string;
                     };
                 };
                 "> span": {

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

@@ -0,0 +1,100 @@
+export declare const headerBlack = "#2b2b2b";
+export declare const headerBlue = "#1B7FA7";
+export declare const headerDarkBlue = "#135772";
+export declare const headerFocusColor = "#0F465C";
+export declare const headerLightBlue = "#78CCED";
+export declare const headerLightBlueIcon = "#1DA1D4";
+export declare const headerRed = "#ED1C24";
+export declare const headerRedDarkMode = "dark.ui.error.primary";
+export declare const headerRedDonate = "#E32B31";
+export declare const headerYellow = "#FEE34A";
+export declare const headerYellowDark = "#403B2D";
+export declare const headerFocus: {
+    borderRadius: string;
+    outlineColor: string;
+    outlineOffset: string;
+    outlineStyle: string;
+    outlineWidth: string;
+};
+declare const Header: {
+    parts: string[];
+    baseStyle: {
+        fontFamily: string;
+        fontSize: string;
+        fontWeight: string;
+        "& > nav li": {
+            marginBottom: string;
+        };
+        "& > nav a": {
+            lineHeight: string;
+            _focus: {
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+                _dark: {
+                    outlineColor: string;
+                };
+            };
+        };
+        a: {
+            _visited: {
+                color: string;
+            };
+        };
+        button: {
+            cursor: string;
+        };
+        container: {
+            paddingX: {
+                base: string;
+                mh: string;
+            };
+            paddingY: {
+                mh: string;
+            };
+            maxWidth: string;
+            minHeight: {
+                mh: string;
+            };
+            margin: string;
+        };
+        navContainer: {
+            height: {
+                mh: string;
+                lh: string;
+            };
+            gap: {
+                mh: string;
+                lh: string;
+            };
+        };
+        horizontalRule: {
+            bg: string;
+            marginTop: string;
+            marginBottom: string;
+            _dark: {
+                backgroundColor: string;
+            };
+        };
+        logo: {
+            lineHeight: string;
+            svg: {
+                height: {
+                    base: string;
+                    mh: string;
+                    lh: string;
+                };
+            };
+            _focus: {
+                borderRadius: string;
+                outlineColor: string;
+                outlineOffset: string;
+                outlineStyle: string;
+                outlineWidth: string;
+            };
+        };
+    };
+};
+export default Header;