@nypl/design-system-react-components 2.0.0 → 2.1.0-rc

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

@@ -0,0 +1,477 @@
+interface LogoBaseStyle {
+    size: keyof typeof size;
+}
+declare const size: {
+    default: {
+        maxWidth: string;
+    };
+    xxsmall: {
+        maxWidth: string;
+    };
+    xsmall: {
+        maxWidth: string;
+    };
+    small: {
+        maxWidth: string;
+    };
+    medium: {
+        maxWidth: string;
+    };
+    large: {
+        maxWidth: string;
+    };
+    xlarge: {
+        maxWidth: string;
+    };
+    xxlarge: {
+        height: string;
+        width: string;
+    };
+    xxxlarge: {
+        height: string;
+        width: string;
+    };
+};
+declare const Logo: {
+    baseStyle: (props: LogoBaseStyle) => {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        height: string;
+        width: string;
+        display: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        height: string;
+        width: string;
+        display: string;
+    };
+};
+export default Logo;

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

@@ -0,0 +1,27 @@
+declare const Modal: {
+    parts: string[];
+    baseStyle: {
+        dialog: {
+            _dark: {
+                bg: string;
+            };
+        };
+        header: {
+            color: string;
+            fontSize: {
+                base: string;
+                md: string;
+            };
+            fontWeight: string;
+            _dark: {
+                color: string;
+            };
+        };
+        body: {
+            _dark: {
+                color: string;
+            };
+        };
+    };
+};
+export default Modal;

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

@@ -0,0 +1,29 @@
+export declare const multiSelectWidths: {
+    default: {
+        width: {
+            base: string;
+            md: string;
+        };
+    };
+    fitContent: {
+        width: {
+            base: string;
+            md: string;
+        };
+        minWidth: {
+            md: string;
+        };
+    };
+    full: {
+        width: string;
+    };
+};
+declare const MultiSelect: {
+    parts: string[];
+    baseStyle: ({ isBlockElement, isOpen, width }: {
+        isBlockElement: any;
+        isOpen: any;
+        width?: string;
+    }) => any;
+};
+export default MultiSelect;

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

@@ -0,0 +1,99 @@
+declare const MultiSelectMenuButton: {
+    parts: string[];
+    baseStyle: ({ hasSelectedItems, isOpen }: {
+        hasSelectedItems?: boolean;
+        isOpen?: boolean;
+    }) => {
+        buttonLabel: {
+            color: string;
+            justifyContent: string;
+            overflow: string;
+            marginLeft: string;
+            marginRight: string;
+            textAlign: string;
+            textOverflow: string;
+            whiteSpace: string;
+            transition: string;
+            _dark: {
+                color: string;
+            };
+        };
+        menuButton: {
+            alignItems: string;
+            backgroundColor: string;
+            borderBottomLeftRadius: string;
+            borderBottomRightRadius: string;
+            borderColor: string;
+            borderRadius: string;
+            borderWidth: string;
+            fontSize: string;
+            minHeight: {
+                base: string;
+                md: string;
+            };
+            px: string;
+            py: string;
+            display: string;
+            justifyContent: string;
+            width: string;
+            _hover: {
+                backgroundColor: string;
+                borderColor: string;
+            };
+            svg: {
+                marginTop: string;
+            };
+            _dark: {
+                backgroundColor: string;
+                borderBottomLeftRadius: string;
+                borderBottomRightRadius: string;
+                borderColor: string;
+                svg: {
+                    fill: string;
+                };
+                _hover: {
+                    backgroundColor: string;
+                    borderColor: string;
+                };
+            };
+        };
+        selectedItemsCountButton: {
+            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: string;
+                md: string;
+            };
+            width: string;
+            _hover: {
+                borderColor: string;
+            };
+            svg: {
+                marginLeft: string;
+                marginRight: string;
+                marginTop: string;
+            };
+            _dark: {
+                backgroundColor: string;
+                borderColor: string;
+                svg: {
+                    fill: string;
+                };
+                _hover: {
+                    borderColor: string;
+                };
+            };
+        };
+    };
+};
+export default MultiSelectMenuButton;

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

@@ -0,0 +1,93 @@
+import { SectionTypes } from "../../helpers/types";
+interface NewsLetterStyleProps {
+    newsletterSignupType: SectionTypes;
+}
+declare const NewsletterSignup: {
+    parts: string[];
+    baseStyle: ({ newsletterSignupType }: NewsLetterStyleProps) => {
+        alignItems: string;
+        borderWidth: {
+            base: string;
+            md: string;
+        };
+        maxWidth: string;
+        width: string;
+        pitch: {
+            width: {
+                base: string;
+                md: string;
+            };
+            bg: string;
+            borderWidth: {
+                base: string;
+                md: string;
+            };
+            borderLeftColor: {
+                md: string | {
+                    primary: string;
+                    secondary: string;
+                };
+            };
+            borderTopColor: {
+                base: string | {
+                    primary: string;
+                    secondary: string;
+                };
+                md: string;
+            };
+            _dark: {
+                bg: string;
+                borderTopColor: {
+                    md: string;
+                };
+                borderLeftColor: {
+                    md: string | {
+                        primary: string;
+                        secondary: string;
+                    };
+                };
+            };
+            padding: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+            alignItems: string;
+            gap: string;
+        };
+        privacy: {
+            fontSize: string;
+            fontWeight: string;
+        };
+        action: {
+            padding: {
+                base: string;
+                lg: string;
+            };
+            width: {
+                base: string;
+                md: string;
+            };
+        };
+        form: {
+            width: string;
+        };
+        "#newsletter-form-parent": {
+            gridTemplateColumns: {
+                base: any;
+                lg: string;
+            };
+            gap: {
+                base: string;
+                lg: string;
+            };
+        };
+        button: {
+            marginTop: {
+                base: any;
+                lg: string;
+            };
+        };
+    };
+};
+export default NewsletterSignup;