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

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

@@ -0,0 +1,454 @@
+interface StructuredContentBaseStyle {
+    hasFigureImage: boolean;
+    imageAspectRatio: string;
+    imagePosition: string;
+}
+declare const StructuredContent: {
+    parts: string[];
+    baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
+        one: {
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+        };
+        two: {
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        three: {
+            width: string;
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        four: {
+            width: string;
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        fallback: {
+            width: string;
+            marginTop: string;
+            marginStart: string;
+            marginEnd: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        display1: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+        };
+        heading1: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+        };
+        heading2: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+        };
+        heading3: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+        };
+        heading4: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+            a: {
+                textUnderlineOffset: string;
+            };
+        };
+        heading5: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        heading6: {
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+            width: string;
+        };
+        imageFigure: {
+            marginBottom: string;
+            maxWidth?: string;
+            float: string[];
+            marginStart: string[];
+            marginEnd: string[];
+            width: string;
+        };
+        imageWrapper: {
+            marginBottom: string;
+            maxWidth?: string;
+            float: string[];
+            marginStart: string[];
+            marginEnd: string[];
+            width: string;
+        };
+        image: {
+            maxWidth?: string;
+            float: string[];
+            marginStart: string[];
+            marginEnd: string[];
+            marginBottom: 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.
+         */
+        ".structuredcontent-body > div": {
+            marginTop: string;
+            marginInlineEnd: string;
+            marginBottom: string;
+            marginInlineStart: string;
+        };
+        a: {
+            color: string;
+            textDecoration: string;
+            textDecorationStyle: string;
+            textDecorationThickness: string;
+            textUnderlineOffset: string;
+            _dark: {
+                color: string;
+            };
+            _hover: {
+                color: string;
+                textDecorationStyle: string;
+                textDecorationThickness: string;
+                _dark: {
+                    color: string;
+                };
+            };
+            _visited: {
+                color: string;
+                _dark: {
+                    color: string;
+                };
+            };
+        };
+        ul: {
+            listStyle: string;
+            li: {
+                _before: {
+                    color: string;
+                    content: string;
+                    display: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    marginStart: string;
+                    width: string;
+                };
+                _dark: {
+                    _before: {
+                        color: string;
+                    };
+                };
+            };
+            margin: string;
+            marginBottom: string;
+            marginInlineStart: string;
+            paddingStart: string;
+            padding: string;
+            display: string;
+        };
+        ol: {
+            margin: string;
+            marginBottom: string;
+            listStyle: string;
+            marginInlineStart: string;
+            paddingStart: string;
+            padding: string;
+            display: string;
+            li: {
+                marginEnd: string;
+                listStyleType: string;
+                _notFirst: {
+                    marginTop: string;
+                };
+            };
+        };
+        section: {
+            borderBottom: string;
+            borderColor: string;
+            paddingStart: string;
+            h2: {
+                borderTop: string;
+                borderColor: string;
+                margin: string;
+                padding: string;
+                _dark: {
+                    borderColor: string;
+                };
+            };
+            _dark: {
+                borderColor: string;
+            };
+        };
+        dl: {
+            display: string;
+            gridTemplateColumns: {
+                base: string;
+                md: string;
+            };
+            gridTemplateRows: string;
+            margin: string;
+        };
+        dt: {
+            borderTop: string;
+            borderColor: string;
+            color: string;
+            fontWeight: string;
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingTop: string;
+            paddingEnd: {
+                md: string;
+            };
+            _dark: {
+                borderColor: string;
+                color: string;
+            };
+        };
+        dd: {
+            margin: string;
+            paddingBottom: string;
+            borderTop: {
+                base: string;
+                md: string;
+            };
+            borderColor: {
+                md: string;
+            };
+            paddingTop: {
+                md: string;
+            };
+            _dark: {
+                borderColor: {
+                    md: string;
+                };
+            };
+        };
+        table: {
+            width: string;
+            th: {
+                color: string;
+                fontWeight: string;
+                textTransform: string;
+                _first: {
+                    paddingStart: {
+                        base: string;
+                        md: string;
+                    };
+                };
+                _dark: {
+                    color: string;
+                };
+                border: string;
+                borderBottom: string;
+                borderColor: {
+                    base: string;
+                    md: string;
+                } | {
+                    base: string;
+                    md: string;
+                };
+                display: {
+                    base: string;
+                    md: string;
+                };
+                fontSize: {
+                    base: string;
+                    md: string;
+                };
+                gap: string;
+                letterSpacing: string;
+                lineHeight: number;
+                paddingBottom: {
+                    base: string;
+                    md: string;
+                };
+                paddingStart: number;
+                paddingEnd: {
+                    base: string;
+                    md: string;
+                };
+                paddingTop: {
+                    base: string;
+                    md: string;
+                };
+                _last: {
+                    paddingEnd: {
+                        base: string;
+                        md: string;
+                    };
+                    borderBottom: string;
+                    borderColor: {
+                        base: string;
+                        md: string;
+                    } | {
+                        base: string;
+                        md: string;
+                    };
+                };
+                "> span": {
+                    flexBasis: string;
+                    paddingBottom: {
+                        base: string;
+                        md: string;
+                    };
+                    paddingEnd: string;
+                    paddingTop: {
+                        base: 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.
+                         */
+                        md: string;
+                    };
+                    _first: {
+                        bg: string;
+                        color: string;
+                        fontWeight: string;
+                        paddingStart: string;
+                        _dark: {
+                            color: string;
+                        };
+                    };
+                };
+                textAlign: string;
+                paddingInlineStart: string;
+                paddingInlineEnd: string;
+            };
+            td: {
+                _first: {
+                    paddingStart: {
+                        base: string;
+                        md: string;
+                    };
+                };
+                _last: {
+                    borderBottom: {
+                        base: number;
+                        md: string;
+                    };
+                    borderColor: {
+                        base: string;
+                        md: string;
+                    } | {
+                        base: string;
+                        md: string;
+                    };
+                };
+                border: string;
+                borderBottom: string;
+                borderColor: {
+                    base: string;
+                    md: string;
+                } | {
+                    base: string;
+                    md: string;
+                };
+                display: {
+                    base: string;
+                    md: string;
+                };
+                fontSize: {
+                    base: string;
+                    md: string;
+                };
+                gap: string;
+                letterSpacing: string;
+                lineHeight: number;
+                paddingBottom: {
+                    base: string;
+                    md: string;
+                };
+                paddingStart: number;
+                paddingEnd: {
+                    base: string;
+                    md: string;
+                };
+                paddingTop: {
+                    base: string;
+                    md: string;
+                };
+                "> span": {
+                    flexBasis: string;
+                    paddingBottom: {
+                        base: string;
+                        md: string;
+                    };
+                    paddingEnd: string;
+                    paddingTop: {
+                        base: 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.
+                         */
+                        md: string;
+                    };
+                    _first: {
+                        bg: string;
+                        color: string;
+                        fontWeight: string;
+                        paddingStart: string;
+                        _dark: {
+                            color: string;
+                        };
+                    };
+                };
+                textAlign: string;
+                paddingInlineStart: string;
+                paddingInlineEnd: string;
+            };
+        };
+    };
+};
+export default StructuredContent;

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

@@ -0,0 +1,51 @@
+declare const StyledList: {
+    baseStyle: ({ textSize }: {
+        textSize?: string;
+    }) => {
+        listStyle: string;
+        li: {
+            _before: {
+                color: string;
+                content: string;
+                display: string;
+                fontWeight: string;
+                fontSize: string;
+                lineHeight: string;
+                marginStart: string;
+                width: string;
+            };
+            _dark: {
+                _before: {
+                    color: string;
+                };
+            };
+        };
+        margin: string;
+        marginBottom: string;
+        marginInlineStart: string;
+        paddingStart: string;
+        padding: string;
+        display: string;
+        fontSize: string;
+    };
+    variants: {
+        capped: {
+            li: {
+                borderStart: string;
+                borderEnd: {
+                    base: string;
+                    md: string;
+                };
+                borderColor: string;
+                my: string;
+                px: string;
+            };
+            _dark: {
+                li: {
+                    borderColor: string;
+                };
+            };
+        };
+    };
+};
+export default StyledList;

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

@@ -0,0 +1,172 @@
+declare const CustomTabs: {
+    parts: string[];
+    baseStyle: {
+        tablist: {
+            borderColor: string;
+        };
+        tab: {
+            background: string;
+            border: string;
+            borderBottom: string;
+            color: string;
+            height: {
+                base: string;
+            };
+            marginEnd: {
+                base: string;
+                md: string;
+            };
+            paddingEnd: {
+                base: string;
+                md: string;
+                lg: string;
+            };
+            paddingInlineStart: string;
+            paddingStart: string;
+            whiteSpace: string;
+            _hover: {
+                bg: string;
+                borderTopRadius: string;
+                borderBottom: string;
+                borderBottomColor: string;
+            };
+            _selected: {
+                fontWeight: string;
+                bg: string;
+                border: string;
+                borderTopRadius: string;
+                borderBottom: string;
+                borderBottomColor: string;
+                paddingBottom: string;
+            };
+            _focus: {
+                boxShadow: string;
+            };
+            _dark: {
+                color: string;
+                border: string;
+                borderBottom: string;
+                borderBottomColor: string;
+                _hover: {
+                    bg: string;
+                };
+                _selected: {
+                    color: string;
+                    border: string;
+                    bg: string;
+                    borderBottom: string;
+                };
+            };
+        };
+        buttonArrows: {
+            bg: string;
+            color: string;
+            border: string;
+            borderRadius: string;
+            display: {
+                md: string;
+            };
+            height: string;
+            width: string;
+            top: string;
+            marginStart: string;
+            marginEnd: string;
+            pos: string;
+            transition: string;
+            zIndex: string;
+            _hover: {
+                bg: string;
+                color: string;
+                borderColor: string;
+            };
+            _disabled: {
+                color: string;
+            };
+            _dark: {
+                color: string;
+                _disabled: {
+                    color: string;
+                };
+            };
+        };
+        tablistWrapper: {
+            display: string;
+            alignItems: string;
+            borderBottom: {
+                base: string;
+                md: string;
+            };
+            height: {
+                base: string;
+                md: string;
+            };
+            margin: string;
+            overflowX: {
+                base: string;
+                md: string;
+            };
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingStart: {
+                base: string;
+                md: string;
+            };
+            paddingEnd: {
+                base: string;
+                md: string;
+            };
+            paddingTop: {
+                base: string;
+                md: string;
+            };
+            position: string;
+            _dark: {
+                borderColor: string;
+            };
+        };
+        tabpanels: {
+            paddingTop: string;
+        };
+        carouselParent: {
+            position: {
+                base: string;
+                md: string;
+            };
+            left: {
+                base: string;
+                md: string;
+            };
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingStart: {
+                base: string;
+                md: string;
+            };
+            paddingEnd: string;
+            paddingTop: {
+                base: string;
+                md: string;
+            };
+            right: {
+                base: string;
+                md: string;
+            };
+            top: {
+                base: string;
+                md: string;
+            };
+            overflowX: {
+                base: string;
+                md: string;
+            };
+        };
+    };
+    defaultProps: {
+        colorScheme: string;
+    };
+};
+export default CustomTabs;