@nypl/design-system-react-components 1.0.2 → 1.0.4

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

@@ -1,72 +1,418 @@
 interface BaseStyleProps {
+    columnHeadersBackgroundColor?: string;
     columnHeadersTextColor?: string;
     showRowDividers?: boolean;
     useRowHeaders?: boolean;
 }
-export declare const baseTHStyles: (showRowDividers?: boolean, columnHeadersTextColor?: string) => {
+export declare const baseTRStyles: (columnHeadersBackgroundColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
+    borderBottom: {
+        base: string;
+        md: number;
+    };
+    borderColor: string;
+    display: {
+        base: string;
+        md: string;
+    };
+    paddingBottom: number | {
+        base: string;
+        md: string;
+    };
+    paddingTop: number | {
+        base: string;
+        md: string;
+    };
+    _first: {
+        borderTop: {
+            base: string;
+            md: string;
+        };
+        borderColor: string;
+    };
+};
+export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
     border: string;
     borderBottom: string;
-    color: string;
-    fontSize: string;
-    fontWeight: string;
+    borderColor: {
+        base: string;
+        md: string;
+    };
+    display: {
+        base: string;
+        md: string;
+    };
+    fontSize: {
+        base: string;
+        lg: string;
+    };
+    gap: string;
     letterSpacing: string;
+    lineHeight: number;
+    paddingBottom: {
+        base: string;
+        md: string;
+    };
     paddingLeft: number;
-    paddingRight: string;
-    textTransform: string;
+    paddingRight: {
+        base: string;
+        md: string;
+    };
+    paddingTop: {
+        base: string;
+        md: string;
+    };
     _first: {
-        paddingLeft: string;
+        paddingLeft: {
+            base: string;
+            md: string;
+        };
+        borderBottom: string | {
+            base: string;
+            md: string;
+        };
     };
     _last: {
+        paddingRight: {
+            base: string;
+            md: string;
+        };
+        borderBottom: string;
+        borderColor: {
+            base: string;
+            md: string;
+        };
+    };
+    "> span": {
+        flexBasis: string;
+        paddingBottom: {
+            base: string;
+            md: string;
+        };
         paddingRight: string;
+        paddingTop: {
+            base: string;
+            md: string;
+        };
+        _first: {
+            bg: string;
+            color: string;
+            fontWeight: string;
+            paddingLeft: string;
+        };
     };
 };
-export declare const baseTDStyles: (showRowDividers?: boolean, useRowHeaders?: boolean) => {
+export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
+    color: string;
+    fontWeight: string;
+    textTransform: string;
+    _first: {
+        paddingLeft: {
+            base: string;
+            md: string;
+        };
+    };
     border: string;
     borderBottom: string;
+    borderColor: {
+        base: string;
+        md: string;
+    };
+    display: {
+        base: string;
+        md: string;
+    };
+    fontSize: {
+        base: string;
+        lg: string;
+    };
+    gap: string;
     letterSpacing: string;
+    lineHeight: number;
+    paddingBottom: {
+        base: string;
+        md: string;
+    };
     paddingLeft: number;
-    paddingRight: string;
+    paddingRight: {
+        base: string;
+        md: string;
+    };
+    paddingTop: {
+        base: string;
+        md: string;
+    };
+    _last: {
+        paddingRight: {
+            base: string;
+            md: string;
+        };
+        borderBottom: string;
+        borderColor: {
+            base: string;
+            md: string;
+        };
+    };
+    "> span": {
+        flexBasis: string;
+        paddingBottom: {
+            base: string;
+            md: string;
+        };
+        paddingRight: string;
+        paddingTop: {
+            base: string;
+            md: string;
+        };
+        _first: {
+            bg: string;
+            color: string;
+            fontWeight: string;
+            paddingLeft: string;
+        };
+    };
+};
+export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, columnHeadersTextColor?: string, showRowDividers?: boolean, useRowHeaders?: boolean) => {
     _first: {
-        paddingLeft: string;
+        paddingLeft: {
+            base: string;
+            md: string;
+        };
     };
     _last: {
+        borderBottom: {
+            base: number;
+            md: string;
+        };
+        borderColor: {
+            base: string;
+            md: string;
+        };
+    };
+    border: string;
+    borderBottom: string;
+    borderColor: {
+        base: string;
+        md: string;
+    };
+    display: {
+        base: string;
+        md: string;
+    };
+    fontSize: {
+        base: string;
+        lg: string;
+    };
+    gap: string;
+    letterSpacing: string;
+    lineHeight: number;
+    paddingBottom: {
+        base: string;
+        md: string;
+    };
+    paddingLeft: number;
+    paddingRight: {
+        base: string;
+        md: string;
+    };
+    paddingTop: {
+        base: string;
+        md: string;
+    };
+    "> span": {
+        flexBasis: string;
+        paddingBottom: {
+            base: string;
+            md: string;
+        };
         paddingRight: string;
+        paddingTop: {
+            base: string;
+            md: string;
+        };
+        _first: {
+            bg: string;
+            color: string;
+            fontWeight: string;
+            paddingLeft: string;
+        };
     };
 };
-export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
+export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
     tbody: {
         th: {
             color: string;
+            backgroundColor: {
+                base: string;
+                md: string;
+            };
+        };
+    };
+    thead: {
+        display: {
+            base: string;
+            md: string;
+        };
+    };
+    tr: {
+        borderBottom: {
+            base: string;
+            md: number;
+        };
+        borderColor: string;
+        display: {
+            base: string;
+            md: string;
+        };
+        paddingBottom: number | {
+            base: string;
+            md: string;
+        };
+        paddingTop: number | {
+            base: string;
+            md: string;
+        };
+        _first: {
+            borderTop: {
+                base: string;
+                md: string;
+            };
+            borderColor: string;
         };
     };
     th: {
-        border: string;
-        borderBottom: string;
         color: string;
-        fontSize: string;
         fontWeight: string;
-        letterSpacing: string;
-        paddingLeft: number;
-        paddingRight: string;
         textTransform: string;
         _first: {
-            paddingLeft: string;
+            paddingLeft: {
+                base: string;
+                md: string;
+            };
+        };
+        border: string;
+        borderBottom: string;
+        borderColor: {
+            base: string;
+            md: string;
+        };
+        display: {
+            base: string;
+            md: string;
+        };
+        fontSize: {
+            base: string;
+            lg: string;
+        };
+        gap: string;
+        letterSpacing: string;
+        lineHeight: number;
+        paddingBottom: {
+            base: string;
+            md: string;
+        };
+        paddingLeft: number;
+        paddingRight: {
+            base: string;
+            md: string;
+        };
+        paddingTop: {
+            base: string;
+            md: string;
         };
         _last: {
+            paddingRight: {
+                base: string;
+                md: string;
+            };
+            borderBottom: string;
+            borderColor: {
+                base: string;
+                md: string;
+            };
+        };
+        "> span": {
+            flexBasis: string;
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
             paddingRight: string;
+            paddingTop: {
+                base: string;
+                md: string;
+            };
+            _first: {
+                bg: string;
+                color: string;
+                fontWeight: string;
+                paddingLeft: string;
+            };
         };
     };
     td: {
+        _first: {
+            paddingLeft: {
+                base: string;
+                md: string;
+            };
+        };
+        _last: {
+            borderBottom: {
+                base: number;
+                md: string;
+            };
+            borderColor: {
+                base: string;
+                md: string;
+            };
+        };
         border: string;
         borderBottom: string;
+        borderColor: {
+            base: string;
+            md: string;
+        };
+        display: {
+            base: string;
+            md: string;
+        };
+        fontSize: {
+            base: string;
+            lg: string;
+        };
+        gap: string;
         letterSpacing: string;
+        lineHeight: number;
+        paddingBottom: {
+            base: string;
+            md: string;
+        };
         paddingLeft: number;
-        paddingRight: string;
-        _first: {
-            paddingLeft: string;
+        paddingRight: {
+            base: string;
+            md: string;
         };
-        _last: {
+        paddingTop: {
+            base: string;
+            md: string;
+        };
+        "> span": {
+            flexBasis: string;
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
             paddingRight: string;
+            paddingTop: {
+                base: string;
+                md: string;
+            };
+            _first: {
+                bg: string;
+                color: string;
+                fontWeight: string;
+                paddingLeft: string;
+            };
         };
     };
     caption: {
@@ -83,40 +429,182 @@ export declare const baseStyle: ({ columnHeadersTextColor, showRowDividers, useR
     };
 };
 declare const CustomTable: {
-    baseStyle: ({ columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
+    baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTextColor, showRowDividers, useRowHeaders, }: BaseStyleProps) => {
         tbody: {
             th: {
                 color: string;
+                backgroundColor: {
+                    base: string;
+                    md: string;
+                };
+            };
+        };
+        thead: {
+            display: {
+                base: string;
+                md: string;
+            };
+        };
+        tr: {
+            borderBottom: {
+                base: string;
+                md: number;
+            };
+            borderColor: string;
+            display: {
+                base: string;
+                md: string;
+            };
+            paddingBottom: number | {
+                base: string;
+                md: string;
+            };
+            paddingTop: number | {
+                base: string;
+                md: string;
+            };
+            _first: {
+                borderTop: {
+                    base: string;
+                    md: string;
+                };
+                borderColor: string;
             };
         };
         th: {
-            border: string;
-            borderBottom: string;
             color: string;
-            fontSize: string;
             fontWeight: string;
-            letterSpacing: string;
-            paddingLeft: number;
-            paddingRight: string;
             textTransform: string;
             _first: {
-                paddingLeft: string;
+                paddingLeft: {
+                    base: string;
+                    md: string;
+                };
+            };
+            border: string;
+            borderBottom: string;
+            borderColor: {
+                base: string;
+                md: string;
+            };
+            display: {
+                base: string;
+                md: string;
+            };
+            fontSize: {
+                base: string;
+                lg: string;
+            };
+            gap: string;
+            letterSpacing: string;
+            lineHeight: number;
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingLeft: number;
+            paddingRight: {
+                base: string;
+                md: string;
+            };
+            paddingTop: {
+                base: string;
+                md: string;
             };
             _last: {
+                paddingRight: {
+                    base: string;
+                    md: string;
+                };
+                borderBottom: string;
+                borderColor: {
+                    base: string;
+                    md: string;
+                };
+            };
+            "> span": {
+                flexBasis: string;
+                paddingBottom: {
+                    base: string;
+                    md: string;
+                };
                 paddingRight: string;
+                paddingTop: {
+                    base: string;
+                    md: string;
+                };
+                _first: {
+                    bg: string;
+                    color: string;
+                    fontWeight: string;
+                    paddingLeft: string;
+                };
             };
         };
         td: {
+            _first: {
+                paddingLeft: {
+                    base: string;
+                    md: string;
+                };
+            };
+            _last: {
+                borderBottom: {
+                    base: number;
+                    md: string;
+                };
+                borderColor: {
+                    base: string;
+                    md: string;
+                };
+            };
             border: string;
             borderBottom: string;
+            borderColor: {
+                base: string;
+                md: string;
+            };
+            display: {
+                base: string;
+                md: string;
+            };
+            fontSize: {
+                base: string;
+                lg: string;
+            };
+            gap: string;
             letterSpacing: string;
+            lineHeight: number;
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
             paddingLeft: number;
-            paddingRight: string;
-            _first: {
-                paddingLeft: string;
+            paddingRight: {
+                base: string;
+                md: string;
             };
-            _last: {
+            paddingTop: {
+                base: string;
+                md: string;
+            };
+            "> span": {
+                flexBasis: string;
+                paddingBottom: {
+                    base: string;
+                    md: string;
+                };
                 paddingRight: string;
+                paddingTop: {
+                    base: string;
+                    md: string;
+                };
+                _first: {
+                    bg: string;
+                    color: string;
+                    fontWeight: string;
+                    paddingLeft: string;
+                };
             };
         };
         caption: {

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

@@ -8,6 +8,7 @@ declare const DatePicker: {
         subLabels: {
             label: {
                 fontSize: string;
+                fontWeight: string;
                 marginBottom: string;
             };
         };

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

@@ -1,5 +1,5 @@
 /** Export "mixin" styles. */
-export { wrapperStyles } from "./globalMixins";
+export { screenreaderOnly, wrapperStyles } from "./globalMixins";
 /** Reusable component styles. */
 declare const activeFocus: (darkMode?: boolean) => {
     boxShadow: string;
@@ -42,6 +42,9 @@ declare const checkboxRadioGroupStyles: (isFullWidth?: boolean) => {
         width: string;
     };
 };
+declare const defaultElementSizes: {
+    mobileFieldHeight: string;
+};
 declare const labelLegendText: {
     display: string;
     fontSize: string;
@@ -70,4 +73,4 @@ declare const textMargin: {
     margin: string;
     marginBottom: string;
 };
-export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioLabelStyles, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };
+export { activeFocus, checkboxRadioControlSize, checkboxRadioGroupStyles, checkboxRadioHelperErrorTextStyle, checkboxRadioLabelStyles, defaultElementSizes, labelLegendText, selectTextInputDisabledStyles, selectTextInputFocusStyles, textMargin, };

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

@@ -47,7 +47,10 @@ export declare const headings: {
     };
 };
 declare const Heading: {
-    baseStyle: ({ noSpace }: {
+    baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace }: {
+        isCapitalized: any;
+        isUppercase: any;
+        isLowercase: any;
         noSpace: any;
     }) => {
         a: {
@@ -58,6 +61,7 @@ declare const Heading: {
             };
         };
         marginBottom: string;
+        textTransform: string;
     };
     variants: {
         h1: {