@nypl/design-system-react-components 1.4.2 → 1.5.0-rc2

package/dist/theme/components/multiSelectMenuButton.d.ts

@@ -39,6 +39,19 @@ declare const MultiSelectMenuButton: {
             svg: {
                 marginTop: string;
             };
+            _dark: {
+                backgroundColor: string;
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                borderColor: string;
+                svg: {
+                    fill: string;
+                };
+                _hover: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
         };
         selectedItemsCountButton: {
             alignItems: string;
@@ -66,6 +79,16 @@ declare const MultiSelectMenuButton: {
                 marginRight: string;
                 marginTop: string;
             };
+            _dark: {
+                backgroundColor: string;
+                borderColor: string;
+                svg: {
+                    fill: string;
+                };
+                _hover: {
+                    borderColor: string;
+                };
+            };
         };
     };
 };

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

@@ -1,14 +1,17 @@
 import { NotificationTypes } from "../../components/Notification/Notification";
 interface NotificationBaseStyle {
-    dismissible: boolean;
     isCentered: boolean;
     noMargin: boolean;
+    notificationHeading: string;
     notificationType: NotificationTypes;
+    showIcon: boolean;
 }
 interface NotificationContentBaseStyle {
     alignText: boolean;
-    icon: boolean;
+    isCentered: boolean;
+    notificationHeading: string;
     notificationType: NotificationTypes;
+    showIcon: boolean;
 }
 interface NotificationHeadingBaseStyle {
     icon: boolean;
@@ -18,21 +21,26 @@ interface NotificationHeadingBaseStyle {
 declare const _default: {
     Notification: {
         parts: string[];
-        baseStyle: ({ dismissible, isCentered, noMargin, notificationType, }: NotificationBaseStyle) => {
+        baseStyle: ({ isCentered, noMargin, notificationHeading, notificationType, }: NotificationBaseStyle) => {
             bg: string;
+            borderRadius: string;
             display: string;
             fontSize: string;
+            m: string;
             position: string;
+            p: string;
             textAlign: string;
-            borderRadius: string;
-            margin: string;
+            _dark: {
+                bg: string;
+            };
             container: {
-                margin: string;
+                display: string;
+                flexDirection: string;
+                m: string;
                 maxWidth: string;
-                padding: string;
                 paddingEnd: string;
                 paddingStart: string;
-                width: string;
+                w: string;
             };
             dismissibleButton: {
                 border: string;
@@ -40,8 +48,8 @@ declare const _default: {
                 alignItems: string;
                 color: string;
                 display: string;
-                height: string;
-                width: string;
+                h: string;
+                w: string;
                 minWidth: string;
                 position: string;
                 right: string;
@@ -49,30 +57,43 @@ declare const _default: {
                 svg: {
                     marginTop: string;
                 };
+                _dark: {
+                    color: string;
+                };
                 _hover: {
                     bg: string;
                 };
             };
-            icon: {
-                flexShrink: string;
-                marginEnd: string;
-            };
         };
     };
     NotificationContent: {
         parts: string[];
-        baseStyle: ({ alignText, icon, notificationType, }: NotificationContentBaseStyle) => {
+        baseStyle: ({ isCentered, notificationHeading, notificationType, showIcon, }: NotificationContentBaseStyle) => {
             display: string;
             justifyContent: string;
             content: {
                 color: string;
                 marginTop: string;
                 paddingStart: string;
-                width: string;
+                pt: string;
+                w: string;
+                _dark: {
+                    borderLeftColor: string;
+                    borderLeftStyle: string;
+                    borderLeftWidth: string;
+                    marginTop: string;
+                    paddingStart: string;
+                    color: string;
+                    ml: string;
+                };
                 a: {
                     color: string;
-                    _hover: {
+                    textDecoration: string;
+                    _dark: {
                         color: string;
+                        _hover: {
+                            color: string;
+                        };
                     };
                 };
             };
@@ -82,12 +103,32 @@ declare const _default: {
         parts: string[];
         baseStyle: ({ icon, isCentered, notificationType, }: NotificationHeadingBaseStyle) => {
             display: string;
-            marginBottom: string;
-            justifyContent: string;
+            flexDirection: string;
+            m: string;
+            mb: string;
+            px: string;
+            w: string;
+            _dark: {
+                borderBottomColor: string;
+                borderBottomStyle: string;
+                borderBottomWidth: string;
+                color: string;
+                paddingBottom: string;
+            };
             heading: {
-                marginBottom: string;
-                marginTop: string;
                 color: string;
+                ml: string;
+                mt: string;
+                _dark: {
+                    borderLeftColor: string;
+                    borderLeftStyle: string;
+                    borderLeftWidth: string;
+                    paddingLeft: string;
+                };
+            };
+            svg: {
+                mx: string;
+                mb: string;
             };
         };
     };

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

@@ -7,6 +7,9 @@ declare const ProgressIndicator: {
     parts: string[];
     baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
         color: string;
+        _dark: {
+            color: string;
+        };
         circular: {
             svg: {
                 height: string;
@@ -15,9 +18,15 @@ declare const ProgressIndicator: {
                 circle: {
                     _first: {
                         stroke: string;
+                        _dark: {
+                            stroke: string;
+                        };
                     };
                     _last: {
                         stroke: string;
+                        _dark: {
+                            stroke: string;
+                        };
                     };
                 };
             };
@@ -31,6 +40,9 @@ declare const ProgressIndicator: {
         linear: {
             "> div": {
                 bg: string;
+                _dark: {
+                    bg: string;
+                };
             };
             flex: number;
             bg: string;
@@ -38,6 +50,10 @@ declare const ProgressIndicator: {
                 base: string;
                 md: string;
             };
+            _dark: {
+                bg: string;
+                color: string;
+            };
         };
         linearContainer: {
             display: string;

package/dist/theme/components/radio.d.ts

@@ -54,10 +54,49 @@ declare const Radio: {
                 outlineOffset: string;
                 outlineColor: string;
                 zIndex: string;
+                _dark: {
+                    outlineColor: string;
+                };
             };
             _invalid: {
                 borderColor: string;
             };
+            _dark: {
+                borderColor: string;
+                backgroundColor: string;
+                _checked: {
+                    borderColor: string;
+                    _disabled: {
+                        borderColor: string;
+                        _before: {
+                            bg: string;
+                        };
+                    };
+                    _invalid: {
+                        borderColor: string;
+                        _before: {
+                            borderColor: string;
+                            bg: string;
+                        };
+                    };
+                };
+                _disabled: {
+                    borderColor: string;
+                    _before: {
+                        bg: string;
+                    };
+                };
+                _focus: {
+                    boxShadow: string;
+                    outlineColor: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                };
+                _before: {
+                    bg: string;
+                };
+            };
         };
         label: {
             userSelect: string;
@@ -73,6 +112,14 @@ declare const Radio: {
             _invalid: {
                 color: string;
             };
+            _dark: {
+                _disabled: {
+                    color: string;
+                };
+                _invalid: {
+                    color: string;
+                };
+            };
         };
         helperErrorText: {
             marginStart: string;
@@ -132,6 +179,22 @@ export declare const RadioWrapper: {
                         borderColor: string;
                     };
                 };
+                _dark: {
+                    span: {
+                        _first: {
+                            borderColor: string;
+                        };
+                        _checked: {
+                            borderColor: string;
+                        };
+                        _disabled: {
+                            borderColor: string;
+                        };
+                        _invalid: {
+                            borderColor: string;
+                        };
+                    };
+                };
             };
         };
     };

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

@@ -12,12 +12,22 @@ declare const SearchBar: {
         };
         select: {
             flexShrink: string;
-            marginBottom: string;
+            marginBottom: {
+                base: string;
+                md: string;
+            };
             maxWidth: {
                 base: any;
                 md: string;
             };
             textOverflow: string;
+            marginRight: {
+                base: any;
+                md: string;
+            };
+            _hover: {
+                zIndex: string;
+            };
         };
     };
 };

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

@@ -36,6 +36,17 @@ declare const Select: {
             };
             _active: {
                 borderColor: string;
+                _dark: {
+                    borderColor: string;
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                    outlineColor: string;
+                    zIndex: string;
+                    _dark: {
+                        outlineColor: string;
+                    };
+                };
                 boxShadow: string;
                 outline: string;
                 outlineOffset: string;
@@ -47,12 +58,28 @@ declare const Select: {
                 borderColor: string;
                 color: string;
                 opacity: string;
+                _dark: {
+                    bg: string;
+                    borderColor: string;
+                    color: string;
+                };
             };
             _focus: {
                 "+ .chakra-select__icon-wrapper": {
                     zIndex: string;
                 };
                 borderColor: string;
+                _dark: {
+                    borderColor: string;
+                    boxShadow: string;
+                    outline: string;
+                    outlineOffset: string;
+                    outlineColor: string;
+                    zIndex: string;
+                    _dark: {
+                        outlineColor: string;
+                    };
+                };
                 boxShadow: string;
                 outline: string;
                 outlineOffset: string;
@@ -63,6 +90,18 @@ declare const Select: {
                 border: string;
                 borderColor: string;
                 boxShadow: string;
+                color: string;
+            };
+            _dark: {
+                backgroundColor: string;
+                borderColor: string;
+                _hover: {
+                    borderColor: string;
+                };
+                _invalid: {
+                    borderColor: string;
+                    color: string;
+                };
             };
         };
     };

package/dist/theme/components/skeletonLoader.d.ts

@@ -95,8 +95,11 @@ declare const SkeletonLoader: {
 declare const Skeleton: {
     baseStyle: {
         borderRadius: string;
-        background: string;
+        bg: string;
         animation: string;
+        _dark: {
+            bg: string;
+        };
     };
 };
 export { Skeleton, SkeletonLoader };

package/dist/theme/components/skipNavigation.d.ts

@@ -19,6 +19,9 @@ declare const SkipNavigation: {
                 top: string;
                 width: string;
             };
+            _dark: {
+                backgroundColor: string;
+            };
         };
     };
 };

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

@@ -1,4 +1,5 @@
 interface CustomSliderBaseStyle {
+    isDarkMode: boolean;
     isDisabled: boolean;
     isInvalid: boolean;
     showBoxes: boolean;
@@ -6,13 +7,16 @@ interface CustomSliderBaseStyle {
 }
 declare const CustomSlider: {
     parts: string[];
-    baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
+    baseStyle: ({ isDarkMode, isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
         container: {
             display: string;
             alignItems: string;
         };
         leftValue: {
             color: string;
+            _dark: {
+                color: string;
+            };
             marginTop: string;
             marginBottom: string;
             marginEnd: string;
@@ -22,12 +26,14 @@ declare const CustomSlider: {
             marginStart: string;
             marginEnd: string;
             color: string;
+            _dark: {
+                color: string;
+            };
             marginTop: string;
             marginBottom: string;
         };
         textInput: {
             minWidth: string;
-            color: string;
         };
         sliderContainer: {
             marginStart: string;
@@ -41,6 +47,12 @@ declare const CustomSlider: {
             _disabled: {
                 bgColor: string;
             };
+            _dark: {
+                bgColor: string;
+                _disabled: {
+                    bgColor: string;
+                };
+            };
         };
         thumb: {
             border: string;
@@ -53,6 +65,13 @@ declare const CustomSlider: {
                 bgColor: string;
                 borderColor: string;
             };
+            _dark: {
+                bgColor: string;
+                _disabled: {
+                    bgColor: string;
+                    borderColor: string;
+                };
+            };
         };
     };
 };

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

@@ -9,6 +9,12 @@ declare const StatusBadge: {
         px: string;
         textAlign: string;
         width: string;
+        _dark: {
+            backgroundColor: string;
+            borderLeft: string;
+            borderColor: string;
+            color: string;
+        };
     };
     variants: {
         low: {
@@ -16,9 +22,15 @@ declare const StatusBadge: {
         };
         medium: {
             bg: string;
+            _dark: {
+                borderColor: string;
+            };
         };
         high: {
             bg: string;
+            _dark: {
+                borderColor: string;
+            };
         };
     };
 };

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

@@ -88,8 +88,14 @@ declare const StructuredContent: {
         a: {
             color: string;
             textDecoration: string;
+            _dark: {
+                color: string;
+            };
             _hover: {
                 color: string;
+                _dark: {
+                    color: string;
+                };
             };
         };
         ul: {
@@ -105,6 +111,11 @@ declare const StructuredContent: {
                     marginStart: string;
                     width: string;
                 };
+                _dark: {
+                    _before: {
+                        color: string;
+                    };
+                };
             };
             margin: string;
             marginBottom: string;
@@ -138,6 +149,12 @@ declare const StructuredContent: {
                 borderColor: string;
                 margin: string;
                 padding: string;
+                _dark: {
+                    borderColor: string;
+                };
+            };
+            _dark: {
+                borderColor: string;
             };
         };
         dl: {
@@ -161,6 +178,10 @@ declare const StructuredContent: {
             paddingEnd: {
                 md: string;
             };
+            _dark: {
+                borderColor: string;
+                color: string;
+            };
         };
         dd: {
             margin: string;
@@ -175,6 +196,11 @@ declare const StructuredContent: {
             paddingTop: {
                 md: string;
             };
+            _dark: {
+                borderColor: {
+                    md: string;
+                };
+            };
         };
         table: {
             width: string;
@@ -188,11 +214,17 @@ declare const StructuredContent: {
                         md: string;
                     };
                 };
+                _dark: {
+                    color: string;
+                };
                 border: string;
                 borderBottom: string;
                 borderColor: {
                     base: string;
                     md: string;
+                } | {
+                    base: string;
+                    md: string;
                 };
                 display: {
                     base: string;
@@ -227,6 +259,9 @@ declare const StructuredContent: {
                     borderColor: {
                         base: string;
                         md: string;
+                    } | {
+                        base: string;
+                        md: string;
                     };
                 };
                 "> span": {
@@ -238,13 +273,22 @@ declare const StructuredContent: {
                     paddingEnd: string;
                     paddingTop: {
                         base: string;
-                        md: string;
-                    };
+                        md: 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.
+                         */
+                    }; /** 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.
+                     */
                     _first: {
                         bg: string;
                         color: string;
                         fontWeight: string;
                         paddingStart: string;
+                        _dark: {
+                            color: string;
+                        };
                     };
                 };
                 textAlign: string;
@@ -266,6 +310,9 @@ declare const StructuredContent: {
                     borderColor: {
                         base: string;
                         md: string;
+                    } | {
+                        base: string;
+                        md: string;
                     };
                 };
                 border: string;
@@ -273,6 +320,9 @@ declare const StructuredContent: {
                 borderColor: {
                     base: string;
                     md: string;
+                } | {
+                    base: string;
+                    md: string;
                 };
                 display: {
                     base: string;
@@ -307,13 +357,22 @@ declare const StructuredContent: {
                     paddingEnd: string;
                     paddingTop: {
                         base: string;
-                        md: string;
-                    };
+                        md: 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.
+                         */
+                    }; /** 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.
+                     */
                     _first: {
                         bg: string;
                         color: string;
                         fontWeight: string;
                         paddingStart: string;
+                        _dark: {
+                            color: string;
+                        };
                     };
                 };
                 textAlign: string;