@nypl/design-system-react-components 0.25.13 → 0.26.0

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

@@ -1,16 +1,15 @@
 declare const Label: {
-    parts: string[];
-    baseStyle: {
-        alignItems: string;
-        width: string;
-        marginBottom: string;
+    baseStyle: ({ isInlined }: {
+        isInlined: any;
+    }) => {
+        flex: string;
+        whiteSpace: string;
+        display: string;
         fontSize: string;
         fontWeight: string;
-        display: string;
-        justifyContent: string;
-        helper: {
-            marginLeft: string;
-            fontSize: string;
+        marginBottom: string;
+        width: string;
+        span: {
             fontWeight: string;
         };
     };

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

@@ -1,3 +1,93 @@
+export declare const baseListStyles: (inline?: boolean, noStyling?: boolean) => {
+    margin: string;
+    listStyle: string;
+    marginInlineStart: string;
+    paddingLeft: string;
+    padding: string;
+    display: string;
+    li: {
+        marginRight: string;
+        listStyleType: string;
+        _notFirst: {
+            marginTop: string;
+        };
+    };
+};
+export declare const baseUnorderedStyles: (noStyling?: boolean) => {
+    listStyle: string;
+    li: {
+        _before: {
+            color: string;
+            content: string;
+            display: string;
+            fontWeight: string;
+            fontSize: string;
+            lineHeight: string;
+            marginLeft: string;
+            width: string;
+        };
+    };
+    margin: string;
+    marginBottom: string;
+};
+export declare const baseSectionDefinitionStyles: {
+    borderBottom: string;
+    borderColor: string;
+    paddingLeft: string;
+    h2: {
+        borderTop: string;
+        borderColor: string;
+        margin: string;
+        padding: string;
+    };
+};
+export declare const baseDefinitionStyles: {
+    dl: {
+        display: string;
+        gridTemplateColumns: {
+            base: string;
+            md: string;
+        };
+        gridTemplateRows: string;
+        margin: string;
+    };
+    dt: {
+        borderTop: string;
+        borderColor: string;
+        fontWeight: string;
+        paddingBottom: {
+            base: string;
+            md: string;
+        };
+        paddingTop: string;
+        paddingRight: {
+            md: string;
+        };
+    };
+    dd: {
+        margin: string;
+        paddingBottom: string;
+        borderTop: {
+            base: string;
+            md: string;
+        };
+        borderColor: {
+            md: string;
+        };
+        paddingTop: {
+            md: string;
+        };
+    };
+    borderBottom: string;
+    borderColor: string;
+    paddingLeft: string;
+    h2: {
+        borderTop: string;
+        borderColor: string;
+        margin: string;
+        padding: string;
+    };
+};
 declare const List: {
     baseStyle: ({ inline, noStyling }: {
         inline: any;
@@ -42,15 +132,6 @@ declare const List: {
             marginBottom: string;
         };
         dl: {
-            borderBottom: string;
-            borderColor: string;
-            paddingLeft: string;
-            h2: {
-                borderTop: string;
-                borderColor: string;
-                margin: string;
-                padding: string;
-            };
             dl: {
                 display: string;
                 gridTemplateColumns: {
@@ -87,6 +168,15 @@ declare const List: {
                     md: string;
                 };
             };
+            borderBottom: string;
+            borderColor: string;
+            paddingLeft: string;
+            h2: {
+                borderTop: string;
+                borderColor: string;
+                margin: string;
+                padding: string;
+            };
         };
     };
 };

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

@@ -15,7 +15,6 @@ declare const Radio: {
                 borderColor: string;
                 color: string;
                 _disabled: {
-                    color: string;
                     borderColor: string;
                     bg: string;
                     _before: {
@@ -50,6 +49,10 @@ declare const Radio: {
             _focus: {
                 boxShadow: string;
                 borderColor: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
             };
             _invalid: {
                 borderColor: string;
@@ -70,13 +73,12 @@ declare const Radio: {
                 color: string;
             };
         };
-        helper: {
+        helperErrorText: {
             marginLeft: string;
             _disabled: {
+                color: string;
                 fontStyle: string;
             };
-            marginTop: string;
-            marginBottom: string;
         };
     };
     sizes: {

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

@@ -3,7 +3,7 @@ declare const RadioGroup: {
     baseStyle: ({ isFullWidth }: {
         isFullWidth?: boolean;
     }) => {
-        helper: {
+        helperErrorText: {
             marginTop: string;
         };
         stack: {

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

@@ -1,15 +1,33 @@
 declare const Select: {
     parts: string[];
-    baseStyle: {
+    baseStyle: ({ labelPosition, labelWidth }: {
+        labelPosition: any;
+        labelWidth: any;
+    }) => {
         marginBottom: string;
         ".chakra-select__icon-wrapper": {
             zIndex: string;
         };
-        helper: {
-            marginTop: string;
-            marginBottom: string;
+        helperText: {
+            marginLeft: {
+                md: string;
+            };
+        };
+        inline: {
+            display: {
+                md: string;
+            };
+            gap: {
+                md: string;
+            };
+            alignItems: {
+                md: string;
+            };
         };
         select: {
+            flex: {
+                md: string;
+            };
             backgroundColor: string;
             borderRadius: string;
             borderColor: string;
@@ -22,16 +40,27 @@ declare const Select: {
                 borderColor: string;
             };
             _active: {
+                borderColor: string;
+                boxShadow: string;
                 outline: string;
                 outlineOffset: string;
                 outlineColor: string;
                 zIndex: string;
             };
             _disabled: {
-                color: string;
                 bg: string;
+                borderColor: string;
+                color: string;
                 opacity: string;
             };
+            _focus: {
+                borderColor: string;
+                boxShadow: string;
+                outline: string;
+                outlineOffset: string;
+                outlineColor: string;
+                zIndex: string;
+            };
             _invalid: {
                 border: string;
                 borderColor: string;

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

@@ -1,8 +1,8 @@
 declare const SkeletonLoader: {
     parts: string[];
-    baseStyle: ({ border, imageAspectRatio }: {
-        border: any;
+    baseStyle: ({ imageAspectRatio, isBordered }: {
         imageAspectRatio: any;
+        isBordered: any;
     }) => {
         section: {
             marginBottom: string;

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

@@ -10,10 +10,8 @@ declare const CustomSlider: {
             display: string;
             alignItems: string;
         };
-        helper: {
-            marginTop: string;
-        };
         leftValue: {
+            color: string;
             marginTop: string;
             marginBottom: string;
             marginRight: string;
@@ -22,6 +20,7 @@ declare const CustomSlider: {
         rightValue: {
             marginLeft: string;
             marginRight: string;
+            color: string;
             marginTop: string;
             marginBottom: string;
         };
@@ -49,6 +48,10 @@ declare const CustomSlider: {
             _active: {
                 transform: string;
             };
+            _disabled: {
+                bgColor: string;
+                borderColor: string;
+            };
         };
     };
 };

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

@@ -5,6 +5,57 @@ declare const StructuredContent: {
         imageAspectRatio: any;
         imagePosition: any;
     }) => {
+        h1: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            letterSpacing: string;
+            lineHeight: string;
+        };
+        h2: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        h3: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        h4: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
+        fallback: {
+            width: string;
+            marginTop: string;
+            marginLeft: string;
+            marginRight: string;
+            marginBottom: string;
+            fontSize: string;
+            fontWeight: string;
+            lineHeight: string;
+        };
         imageFigure: {
             marginBottom: string;
             maxWidth?: string;
@@ -28,6 +79,152 @@ declare const StructuredContent: {
             marginRight: 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;
+            _hover: {
+                color: string;
+            };
+        };
+        ul: {
+            listStyle: string;
+            li: {
+                _before: {
+                    color: string;
+                    content: string;
+                    display: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    marginLeft: string;
+                    width: string;
+                };
+            };
+            margin: string;
+            marginBottom: string;
+            marginInlineStart: string;
+            paddingLeft: string;
+            padding: string;
+            display: string;
+        };
+        ol: {
+            margin: string;
+            marginBottom: string;
+            listStyle: string;
+            marginInlineStart: string;
+            paddingLeft: string;
+            padding: string;
+            display: string;
+            li: {
+                marginRight: string;
+                listStyleType: string;
+                _notFirst: {
+                    marginTop: string;
+                };
+            };
+        };
+        section: {
+            borderBottom: string;
+            borderColor: string;
+            paddingLeft: string;
+            h2: {
+                borderTop: string;
+                borderColor: string;
+                margin: string;
+                padding: string;
+            };
+        };
+        dl: {
+            display: string;
+            gridTemplateColumns: {
+                base: string;
+                md: string;
+            };
+            gridTemplateRows: string;
+            margin: string;
+        };
+        dt: {
+            borderTop: string;
+            borderColor: string;
+            fontWeight: string;
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingTop: string;
+            paddingRight: {
+                md: string;
+            };
+        };
+        dd: {
+            margin: string;
+            paddingBottom: string;
+            borderTop: {
+                base: string;
+                md: string;
+            };
+            borderColor: {
+                md: string;
+            };
+            paddingTop: {
+                md: string;
+            };
+        };
+        table: {
+            width: string;
+            th: {
+                border: string;
+                borderBottom: string;
+                color: string | true;
+                fontSize: string;
+                fontWeight: string;
+                letterSpacing: string;
+                paddingLeft: number;
+                paddingRight: string;
+                textTransform: string;
+                _first: {
+                    paddingLeft: string;
+                };
+                _last: {
+                    paddingRight: string;
+                };
+                textAlign: string;
+                paddingInlineStart: string;
+                paddingInlineEnd: string;
+                paddingTop: string;
+                paddingBottom: string;
+                lineHeight: string;
+            };
+            td: {
+                border: string;
+                borderBottom: string;
+                letterSpacing: string;
+                paddingLeft: number;
+                paddingRight: string;
+                _first: {
+                    paddingLeft: string;
+                };
+                _last: {
+                    paddingRight: string;
+                };
+                textAlign: string;
+                paddingInlineStart: string;
+                paddingInlineEnd: string;
+                paddingTop: string;
+                paddingBottom: string;
+                lineHeight: string;
+            };
+        };
     };
 };
 export default StructuredContent;

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

@@ -1,10 +1,6 @@
 declare const TextInput: {
     parts: string[];
     baseStyle: {
-        helper: {
-            marginTop: string;
-            marginBottom: string;
-        };
         input: {
             bgColor: string;
             border: string;
@@ -17,17 +13,25 @@ declare const TextInput: {
                 borderColor: string;
             };
             _disabled: {
-                bgColor: string;
+                _placeholder: {
+                    color: string;
+                };
+                bg: string;
+                borderColor: string;
                 color: string;
                 opacity: string;
             };
             _active: {
+                borderColor: string;
+                boxShadow: string;
                 outline: string;
                 outlineOffset: string;
                 outlineColor: string;
                 zIndex: string;
             };
             _focus: {
+                borderColor: string;
+                boxShadow: string;
                 outline: string;
                 outlineOffset: string;
                 outlineColor: string;
@@ -58,17 +62,25 @@ declare const TextInput: {
                 borderColor: string;
             };
             _disabled: {
-                bgColor: string;
+                _placeholder: {
+                    color: string;
+                };
+                bg: string;
+                borderColor: string;
                 color: string;
                 opacity: string;
             };
             _active: {
+                borderColor: string;
+                boxShadow: string;
                 outline: string;
                 outlineOffset: string;
                 outlineColor: string;
                 zIndex: string;
             };
             _focus: {
+                borderColor: string;
+                boxShadow: string;
                 outline: string;
                 outlineOffset: string;
                 outlineColor: string;

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

@@ -1,16 +1,18 @@
 declare const _default: {
     Toggle: {
         parts: string[];
-        baseStyle: {
+        baseStyle: ({ isDisabled, size }: {
+            isDisabled: any;
+            size: any;
+        }) => {
             label: {
                 alignItems: string;
                 display: string;
                 width: string;
             };
-            helper: {
+            helperErrorText: {
                 marginLeft: string;
-                marginTop: string;
-                marginBottom: string;
+                fontStyle: string;
             };
         };
         defaultProps: {
@@ -58,6 +60,7 @@ declare const _default: {
                 marginLeft: string;
                 marginTop: string;
                 _disabled: {
+                    color: string;
                     fontStyle: string;
                 };
             };

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

@@ -22,6 +22,7 @@ declare const global: {
     "button, select, input, textarea": {
         "&:not([disabled])": {
             _focus: {
+                boxShadow: string;
                 outline: string;
                 outlineOffset: string;
                 outlineColor: string;
@@ -31,6 +32,7 @@ declare const global: {
     };
     "iframe, [href], [tabindex], [contentEditable='true']": {
         _focus: {
+            boxShadow: string;
             outline: string;
             outlineOffset: string;
             outlineColor: string;

package/dist/theme/foundations/radii.d.ts

@@ -1,4 +1,5 @@
 declare const radii: {
+    checkbox: string;
     pill: string;
     round: string;
 };