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

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/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;

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

@@ -0,0 +1,58 @@
+import { NotificationTypes } from "../../components/Notification/Notification";
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface NotificationContentBaseStyle extends StyleFunctionProps {
+    alignText: boolean;
+    isCentered: boolean;
+    notificationHeading: string;
+    notificationType: NotificationTypes;
+    showIcon: boolean;
+}
+declare const NotificationContent: {
+    baseStyle?: ({ isCentered, notificationHeading, notificationType, showIcon, }: NotificationContentBaseStyle) => {
+        display: string;
+        justifyContent: string;
+        content: {
+            color: string;
+            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;
+                    };
+                };
+            };
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "content"[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "content"[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: "content"[];
+};
+export default NotificationContent;

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

@@ -0,0 +1,57 @@
+import { NotificationTypes } from "../../components/Notification/Notification";
+import { StyleFunctionProps } from "@chakra-ui/system";
+interface NotificationHeadingBaseStyle extends StyleFunctionProps {
+    icon: boolean;
+    isCentered: boolean;
+    notificationType: NotificationTypes;
+}
+declare const NotificationHeading: {
+    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;
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "heading"[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "heading"[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: "heading"[];
+};
+export default NotificationHeading;

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

@@ -1,6 +1,5 @@
 declare const Pagination: {
-    parts: string[];
-    baseStyle: {
+    baseStyle?: {
         alignItems: string;
         display: string;
         width: string;
@@ -15,5 +14,21 @@ declare const Pagination: {
             marginBottom: string;
         };
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "link"[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: "link"[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: "link"[];
 };
 export default Pagination;