@nypl/design-system-react-components 2.2.0-react-chakra-rc-2 → 3.0.0-react-chakra-rc2

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

@@ -0,0 +1,169 @@
+import { StyleFunctionProps } from "@chakra-ui/system";
+import { SectionTypes } from "../../helpers/types";
+interface MenuStyleProps extends StyleFunctionProps {
+    highlightColor: SectionTypes;
+    showBorder: boolean;
+    showLabel: boolean;
+}
+declare const Menu: {
+    baseStyle?: ({ highlightColor, showBorder, showLabel }: MenuStyleProps) => {
+        groupItem: {
+            paddingY: string;
+            paddingX: string;
+            lineHeight: string;
+            fontWeight: string;
+            fontSize: string;
+            textColor: string;
+            margin: string;
+            _dark: {
+                textColor: string;
+                bg: string;
+            };
+        };
+        dividerItem: {
+            margin: string;
+            _dark: {
+                textColor: string;
+                bg: string;
+            };
+        };
+        actionItem: {
+            outline: string;
+            textColor: string;
+            paddingY: string;
+            paddingX: string;
+            fontSize: string;
+            fontWeight: string;
+            _hover: {
+                fontWeight: number;
+                bg: string;
+            };
+            _focus: {
+                fontWeight: number;
+                bg: string;
+            };
+            _dark: {
+                textColor: string;
+                bg: string;
+                "> div > svg": {
+                    fill: string;
+                };
+                _hover: {
+                    bg: string;
+                };
+            };
+        };
+        selected: {
+            _hover: {
+                background: string;
+            };
+            _active: {
+                background: string;
+            };
+            fontWeight: number;
+            borderLeftColor: string | {
+                primary: string;
+                secondary: string;
+            };
+            textColor: string | {
+                primary: string;
+                secondary: string;
+            };
+            borderWidth: string;
+            background: string;
+            _dark: {
+                textColor: string;
+                background: string;
+            };
+        };
+        menuButton: {
+            minHeight: {
+                base: string;
+                md: "40px";
+            };
+            minWidth: {
+                base: string;
+                md: "40px";
+            };
+            whiteSpace: string;
+            paddingY: string;
+            paddingX: string;
+            borderRadius: string;
+            fontSize: string;
+            textColor: string;
+            border: string;
+            borderColor: string;
+            _hover: {
+                bg: string;
+                textColor: string;
+                borderColor: string;
+                "> span > svg ": {
+                    fill: string;
+                };
+            };
+            _active: {
+                bg: string;
+                textColor: string;
+                borderColor: string;
+                "> span > svg ": {
+                    fill: string;
+                };
+            };
+            "> span ": {
+                alignItems: string;
+                display: string;
+                justifyContent: string;
+            };
+            "> span > svg ": {
+                fill: string;
+            };
+            _dark: {
+                textColor: string;
+                borderColor: string;
+                _hover: {
+                    bg: string;
+                    borderColor: string;
+                    textColor: string;
+                };
+                _active: {
+                    bg: string;
+                };
+                "> span > svg": {
+                    fill: string;
+                };
+            };
+        };
+        menuList: {
+            minWidth: string;
+            outline: string;
+            maxWidth: string;
+            padding: string;
+            borderRadius: string;
+            border: string;
+            borderColor: string;
+            _dark: {
+                borderColor: string;
+            };
+            boxShadow: string;
+            overflowY: string;
+            maxHeight: string;
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("groupItem" | "actionItem" | "dividerItem" | "selected" | "menuButton" | "menuList")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("groupItem" | "actionItem" | "dividerItem" | "selected" | "menuButton" | "menuList")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("groupItem" | "actionItem" | "dividerItem" | "selected" | "menuButton" | "menuList")[];
+};
+export default Menu;

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

@@ -1,6 +1,5 @@
 declare const Modal: {
-    parts: string[];
-    baseStyle: {
+    baseStyle?: {
         dialog: {
             _dark: {
                 bg: string;
@@ -9,8 +8,8 @@ declare const Modal: {
         header: {
             color: string;
             fontSize: {
-                base: string;
-                md: string;
+                base: "mobile.heading.heading4";
+                md: "desktop.heading.heading4";
             };
             fontWeight: string;
             _dark: {
@@ -23,5 +22,21 @@ declare const Modal: {
             };
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("body" | "dialog" | "footer" | "header" | "overlay" | "closeButton" | "dialogContainer")[];
 };
 export default Modal;

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

@@ -1,10 +1,4 @@
 export declare const multiSelectWidths: {
-    default: {
-        width: {
-            base: string;
-            md: string;
-        };
-    };
     fitContent: {
         width: {
             base: string;
@@ -13,17 +7,117 @@ export declare const multiSelectWidths: {
         minWidth: {
             md: string;
         };
+        maxWidth: {
+            md: string;
+        };
     };
     full: {
         width: string;
     };
 };
 declare const MultiSelect: {
-    parts: string[];
-    baseStyle: ({ isBlockElement, isOpen, width }: {
-        isBlockElement: any;
-        isOpen: any;
-        width?: string;
-    }) => any;
+    baseStyle?: ({ isBlockElement, width }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        base: {
+            position: string;
+        };
+        menuChildren: {
+            paddingLeft: string;
+            marginBottom: number;
+        };
+        viewAllButton: {
+            color: string;
+            marginLeft: string;
+            px: string;
+            py: string;
+            _hover: {
+                bg: string;
+            };
+            _dark: {
+                color: string;
+                _hover: {
+                    bg: string;
+                };
+            };
+        };
+        buttonTextLabel: {
+            marginLeft: string;
+            textOverflow: string;
+            overflow: string;
+            marginBottom: number;
+        };
+        menuSearchInputBox: {
+            input: {
+                backgroundColor: string;
+                border: string;
+            };
+        };
+        accordionStyles: {
+            ".chakra-accordion__item": {
+                _dark: {
+                    bgColor: string;
+                };
+            };
+            ".chakra-accordion__button": {
+                backgroundColor: string;
+                fontWeight: string;
+                minWidth: string;
+                position: string;
+                width: string | {
+                    base: "100%";
+                    md: "fit-content";
+                };
+                overflow: string;
+                zIndex: number;
+                div: {
+                    overflow: string;
+                    textOverflow: string;
+                    whiteSpace: string;
+                };
+                span: {
+                    overflow: string;
+                };
+                _hover: {
+                    backgroundColor: string;
+                };
+                _dark: {
+                    backgroundColor: string;
+                    borderStartColor: string;
+                    borderStartWidth: string;
+                    _hover: {
+                        borderStartColor: string;
+                    };
+                };
+                _expanded: {
+                    bgColor: string;
+                    _dark: {
+                        bgColor: string;
+                    };
+                };
+            };
+            ".chakra-collapse": any;
+            ".chakra-accordion__panel": {
+                bgColor: string;
+                _dark: {
+                    bgColor: string;
+                };
+            };
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "accordionStyles" | "buttonTextLabel" | "menuChildren" | "menuSearchInputBox" | "viewAllButton")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "accordionStyles" | "buttonTextLabel" | "menuChildren" | "menuSearchInputBox" | "viewAllButton")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("base" | "accordionStyles" | "buttonTextLabel" | "menuChildren" | "menuSearchInputBox" | "viewAllButton")[];
 };
 export default MultiSelect;

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

@@ -0,0 +1,52 @@
+declare const MultiSelectItemsCountButton: {
+    baseStyle?: ({ isOpen }: import("@chakra-ui/styled-system").StyleFunctionProps) => {
+        alignItems: string;
+        backgroundColor: string;
+        border: string;
+        borderRadius: string;
+        borderColor: string;
+        display: string;
+        flexShrink: number;
+        fontSize: string;
+        justifyContent: string;
+        left: string;
+        marginRight: string;
+        position: string;
+        top: {
+            base: "12px";
+            md: "10px";
+        };
+        width: string;
+        zIndex: number;
+        _hover: {
+            borderColor: string;
+        };
+        svg: {
+            marginLeft: string;
+            marginRight: string;
+            marginTop: string;
+        };
+        _dark: {
+            backgroundColor: string;
+            borderColor: string;
+            svg: {
+                fill: string;
+            };
+            _hover: {
+                borderColor: 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;
+    };
+};
+export default MultiSelectItemsCountButton;

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

@@ -1,10 +1,10 @@
 import { SectionTypes } from "../../helpers/types";
-interface NewsLetterStyleProps {
-    newsletterSignupType: SectionTypes;
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface NewsLetterStyleProps extends StyleFunctionProps {
+    newsletterSignupType?: SectionTypes;
 }
 declare const NewsletterSignup: {
-    parts: string[];
-    baseStyle: ({ newsletterSignupType }: NewsLetterStyleProps) => {
+    baseStyle?: ({ newsletterSignupType }: NewsLetterStyleProps) => {
         borderWidth: {
             base: string;
             md: string;
@@ -14,44 +14,35 @@ declare const NewsletterSignup: {
             alignItems: string;
             bg: string;
             borderLeftColor: {
-                md: string | {
-                    primary: string;
-                    secondary: string;
-                };
+                md: any;
             };
             borderTopColor: {
-                base: string | {
-                    primary: string;
-                    secondary: string;
-                };
-                md: string;
+                base: any;
+                md: "ui.border.default";
             };
             borderWidth: {
-                base: string;
-                md: string;
+                base: ".75rem 0px 0px 0px";
+                md: "0px 0px 0px .75rem";
             };
             gap: string;
             justifyContent: string;
             width: {
-                base: string;
-                md: string;
+                base: "100%";
+                md: "50%";
             };
             _dark: {
                 bg: string;
                 borderTopColor: {
-                    md: string;
+                    md: "dark.ui.border.default";
                 };
                 borderLeftColor: {
-                    md: string | {
-                        primary: string;
-                        secondary: string;
-                    };
+                    md: any;
                 };
             };
             padding: {
-                base: string;
-                md: string;
-                lg: string;
+                base: "var(--nypl-space-s) var(--nypl-space-l) var(--nypl-space-l) var(--nypl-space-l)";
+                md: "l";
+                lg: "var(--nypl-space-l) var(--nypl-space-xxl) var(--nypl-space-l) var(--nypl-space-xl)";
             };
         };
         privacy: {
@@ -61,12 +52,12 @@ declare const NewsletterSignup: {
         action: {
             justifyContent: string;
             padding: {
-                base: string;
-                lg: string;
+                base: "l";
+                lg: "var(--nypl-space-l) var(--nypl-space-xxl)";
             };
             width: {
-                base: string;
-                md: string;
+                base: "100%";
+                md: "50%";
             };
         };
         form: {
@@ -87,7 +78,24 @@ declare const NewsletterSignup: {
                 base: any;
                 lg: string;
             };
+            height: string;
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("pitch" | "privacy" | "action")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("pitch" | "privacy" | "action")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("pitch" | "privacy" | "action")[];
 };
 export default NewsletterSignup;

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

@@ -1,137 +1,72 @@
 import { NotificationTypes } from "../../components/Notification/Notification";
-interface NotificationBaseStyle {
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface NotificationBaseStyle extends StyleFunctionProps {
     isCentered: boolean;
     noMargin: boolean;
     notificationHeading: string;
     notificationType: NotificationTypes;
     showIcon: boolean;
 }
-interface NotificationContentBaseStyle {
-    alignText: boolean;
-    isCentered: boolean;
-    notificationHeading: string;
-    notificationType: NotificationTypes;
-    showIcon: boolean;
-}
-interface NotificationHeadingBaseStyle {
-    icon: boolean;
-    isCentered: boolean;
-    notificationType: NotificationTypes;
-}
-declare const _default: {
-    Notification: {
-        parts: string[];
-        baseStyle: ({ isCentered, noMargin, notificationHeading, notificationType, }: NotificationBaseStyle) => {
+declare const Notification: {
+    baseStyle?: ({ isCentered, noMargin, notificationHeading, notificationType, }: NotificationBaseStyle) => {
+        bg: string;
+        borderRadius: string;
+        display: string;
+        fontSize: string;
+        m: string;
+        position: string;
+        p: string;
+        textAlign: string;
+        _dark: {
             bg: string;
-            borderRadius: string;
+        };
+        container: {
             display: string;
-            fontSize: string;
+            flexDirection: string;
             m: string;
-            position: string;
-            p: string;
-            textAlign: string;
-            _dark: {
-                bg: string;
-            };
-            container: {
-                display: string;
-                flexDirection: string;
-                m: string;
-                maxWidth: string;
-                paddingEnd: string;
-                paddingStart: string;
-                w: string;
-            };
-            dismissibleButton: {
-                border: string;
-                bgColor: string;
-                alignItems: string;
-                color: string;
-                display: string;
-                h: string;
-                w: string;
-                minWidth: string;
-                position: string;
-                right: string;
-                top: string;
-                svg: {
-                    marginTop: string;
-                };
-                _dark: {
-                    color: string;
-                };
-                _hover: {
-                    bg: string;
-                };
-            };
+            maxWidth: string;
+            paddingEnd: string;
+            paddingStart: string;
+            w: string;
         };
-    };
-    NotificationContent: {
-        parts: string[];
-        baseStyle: ({ isCentered, notificationHeading, notificationType, showIcon, }: NotificationContentBaseStyle) => {
+        dismissibleButton: {
+            border: string;
+            bgColor: string;
+            alignItems: string;
+            color: string;
             display: string;
-            justifyContent: string;
-            content: {
-                color: string;
+            h: string;
+            w: string;
+            minWidth: string;
+            position: string;
+            right: string;
+            top: string;
+            svg: {
                 marginTop: string;
-                paddingStart: string;
-                pt: string;
-                w: string;
-                _dark: {
-                    borderLeftColor: string;
-                    borderLeftStyle: string;
-                    borderLeftWidth: string;
-                    marginTop: string;
-                    paddingStart: string;
-                    color: string;
-                    ml: string;
-                };
-                a: {
-                    color: string;
-                    textDecoration: string;
-                    _dark: {
-                        color: string;
-                        _hover: {
-                            color: string;
-                        };
-                    };
-                };
             };
-        };
-    };
-    NotificationHeading: {
-        parts: string[];
-        baseStyle: ({ icon, isCentered, notificationType, }: NotificationHeadingBaseStyle) => {
-            display: string;
-            flexDirection: string;
-            m: string;
-            mb: string;
-            px: string;
-            w: string;
             _dark: {
-                borderBottomColor: string;
-                borderBottomStyle: string;
-                borderBottomWidth: string;
                 color: string;
-                paddingBottom: string;
             };
-            heading: {
-                color: string;
-                ml: string;
-                mt: string;
-                _dark: {
-                    borderLeftColor: string;
-                    borderLeftStyle: string;
-                    borderLeftWidth: string;
-                    paddingLeft: string;
-                };
-            };
-            svg: {
-                mx: string;
-                mb: string;
-                mt: string;
+            _hover: {
+                bg: string;
             };
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("container" | "dismissibleButton")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("container" | "dismissibleButton")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("container" | "dismissibleButton")[];
 };
-export default _default;
+export default Notification;