@nypl/design-system-react-components 3.4.0 → 3.4.2

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/Hero/Hero.d.ts

@@ -4,7 +4,7 @@ import { ComponentImageProps } from "../Image/Image";
 export declare const heroTypesArray: readonly ["primary", "secondary", "secondaryBooksAndMore", "secondaryLocations", "secondaryResearch", "secondaryWhatsOn", "tertiary", "campaign", "fiftyFifty"];
 export type HeroTypes = typeof heroTypesArray[number];
 export declare const heroSecondaryTypes: string[];
-export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError"> {
+export interface HeroImageProps extends Pick<ComponentImageProps, "alt" | "fallbackSrc" | "id" | "src" | "onError" | "component"> {
 }
 export interface HeroProps {
     /**
@@ -31,13 +31,11 @@ export interface HeroProps {
     heroType?: HeroTypes;
     /** ID that other components can cross reference for accessibility purposes. */
     id?: string;
-    /** Object used to create and render the `Image` component. Note that only
-     * `alt`, `component`, and `src` are the available attributes to pass. If
-     * `imageProps.alt` is left blank, a warning will be logged to the console and
+    /** Object used to create and render the `Image` component. You can pass `component`
+     * (with its own internal props, which will override) or `src`, `alt`, `id`, `fallBackSrc`, and `onError`.
+     * If `imageProps.alt` is left blank, a warning will be logged to the console and
      * will cause accessibility issues. For `imageProps.src`, it will only work for
-     * the "secondary", "fiftyFifty" and "campaign" `Hero` types; Note: `imageProps.src`
-     * can only be used in conjunction with `backgroundImageSrc` for the "campaign"
-     * `Hero` type. Note: not all `Hero` variations utilize this prop. */
+     * the "secondary", "fiftyFifty" and "campaign" `Hero` types. */
     imageProps?: HeroImageProps;
     /** Optional boolean used to toggle the default text color from light to dark.
      * Set isDarkText to `true` if the backgroundColor is set to a light color. */

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

@@ -29,6 +29,8 @@ declare const _default: {
     communicationCall: any;
     communicationChatBubble: any;
     communicationEmail: any;
+    contentFilterList: any;
+    decorativeBookBroken: any;
     decorativeEnvelope: any;
     decorativeLibraryCard: any;
     decorativeShoppingBag: any;
@@ -66,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", "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"];
+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/ProgressIndicator/ProgressIndicator.d.ts

@@ -2,9 +2,11 @@ import { ChakraComponent } from "@chakra-ui/react";
 import React from "react";
 export declare const progressIndicatorSizesArray: readonly ["default", "small"];
 export declare const progressIndicatorTypesArray: readonly ["circular", "linear"];
+export declare const progressIndicatorLabelPlacementsArray: readonly ["bottom", "right", "top", "left"];
 export type ProgressIndicatorSizes = typeof progressIndicatorSizesArray[number];
 export type ProgressIndicatorTypes = typeof progressIndicatorTypesArray[number];
-export interface ProgressIndicatorProps {
+export type ProgressIndicatorLabelPlacements = typeof progressIndicatorLabelPlacementsArray[number];
+interface BaseProgressIndicatorProps {
     /** The darkMode prop is deprecated and should no longer be used. */
     darkMode?: boolean;
     /** ID that other components can cross reference for accessibility purposes. */
@@ -24,6 +26,16 @@ export interface ProgressIndicatorProps {
     /** A number between 0 to 100 that defines the progress' value. */
     value?: number;
 }
+interface LinearProgressIndicatorProps extends BaseProgressIndicatorProps {
+    indicatorType?: "linear";
+    labelPlacement?: never;
+}
+interface CircularProgressIndicatorProps extends BaseProgressIndicatorProps {
+    indicatorType?: "circular";
+    /** The placement of the label relative to a circular indicator. */
+    labelPlacement?: ProgressIndicatorLabelPlacements;
+}
+export type ProgressIndicatorProps = LinearProgressIndicatorProps | CircularProgressIndicatorProps;
 /**
  * A component that displays a progress status for any task that takes a long
  * time to complete or consists of multiple steps. Examples include downloading,

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/index.d.ts

@@ -40,7 +40,7 @@ export type { HeadingLevels, HeadingProps, HeadingSizes, } from "./components/He
 export { default as HelperErrorText } from "./components/HelperErrorText/HelperErrorText";
 export type { HelperErrorTextProps } from "./components/HelperErrorText/HelperErrorText";
 export { default as Hero } from "./components/Hero/Hero";
-export type { HeroImageProps, HeroProps, HeroTypes, } from "./components/Hero/Hero";
+export type { HeroProps, HeroTypes } from "./components/Hero/Hero";
 export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
 export type { HorizontalRuleProps } from "./components/HorizontalRule/HorizontalRule";
 export { default as Icon } from "./components/Icons/Icon";

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/heading.d.ts

@@ -160,6 +160,30 @@ export declare const headings: {
             width: string;
         };
     };
+    heading7: {
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading7";
+                md: "desktop.heading.heading7";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+    };
+    heading8: {
+        base: {
+            fontSize: {
+                base: "mobile.heading.heading8";
+                md: "desktop.heading.heading8";
+            };
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+    };
 };
 declare const Heading: {
     baseStyle?: ({ isCapitalized, isUppercase, isLowercase, noSpace }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
@@ -459,6 +483,30 @@ declare const Heading: {
                 width: string;
             };
         };
+        heading7: {
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading7";
+                    md: "desktop.heading.heading7";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+            };
+        };
+        heading8: {
+            base: {
+                fontSize: {
+                    base: "mobile.heading.heading8";
+                    md: "desktop.heading.heading8";
+                };
+                fontWeight: string;
+                letterSpacing: string;
+                lineHeight: string;
+                width: string;
+            };
+        };
         primary: {
             base: {
                 width: string;
@@ -513,7 +561,7 @@ declare const Heading: {
     };
     defaultProps?: {
         size?: string | number;
-        variant?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "display1" | "heading1" | "heading2" | "heading3" | "heading4" | "heading5" | "heading6" | "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" | "primary" | "secondary" | "tertiary" | "callout" | "one" | "two" | "three" | "four" | "five" | "six";
         colorScheme?: string;
     };
     parts: ("base" | "headingWrapper")[];