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

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

@@ -2,6 +2,14 @@
  * These objects are also SCSS mixins but are now JS objects in the
  * context of css-in-js and the custom NYPL-theme.
  */
+declare const screenreaderOnly: {
+    clip: string;
+    height: string;
+    overflow: string;
+    position: string;
+    width: string;
+    wordWrap: string;
+};
 declare const wrapperStyles: {
     marginY: string;
     marginX: string;
@@ -12,12 +20,4 @@ declare const wrapperStyles: {
     paddingLeft: string;
     width: string;
 };
-declare const screenreaderOnly: {
-    clip: string;
-    height: string;
-    overflow: string;
-    position: string;
-    width: string;
-    wordWrap: string;
-};
 export { screenreaderOnly, wrapperStyles };

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

@@ -1,3 +1,56 @@
+export declare const headings: {
+    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;
+    };
+};
 declare const Heading: {
     baseStyle: {
         a: {

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

@@ -2,6 +2,7 @@ declare const helperErrorText: {
     baseStyle: ({ isInvalid }: {
         isInvalid: any;
     }) => {
+        marginTop: string;
         marginBottom: string;
         fontSize: string;
         color: string;

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

@@ -91,8 +91,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -156,8 +157,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -221,8 +223,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -286,8 +289,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -351,8 +355,9 @@ declare const Hero: {
                 width: string;
             };
             bodyText: {
-                marginTop: string;
-                marginRight: {
+                paddingBottom: string;
+                paddingTop: string;
+                paddingRight: {
                     md: string;
                 };
                 flex: {
@@ -369,10 +374,7 @@ declare const Hero: {
                 color: string;
                 display: string;
                 flexFlow: string;
-                paddingTop: string;
-                paddingBottom: string;
-                paddingRight: string;
-                paddingLeft: string;
+                padding: string;
                 p: {
                     marginBottom: string;
                     marginTop: string;
@@ -380,6 +382,10 @@ declare const Hero: {
                 marginY: string;
                 marginX: string;
                 maxWidth: string;
+                paddingTop: string;
+                paddingBottom: string;
+                paddingRight: string;
+                paddingLeft: string;
                 width: string;
             };
             heading: {
@@ -396,7 +402,7 @@ declare const Hero: {
             alignItems: string;
             display: string;
             justifyContent: string;
-            marginBottom: string;
+            marginBottom: string[];
             minHeight: string;
             overflow: string;
             padding: {

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

@@ -13,11 +13,11 @@ declare const CustomImage: {
         figure: any;
         figcaption: {
             fontStyle: string;
+            fontSize: string;
         };
         img: any;
         captionWrappers: {
             marginBottom: string;
-            fontSize: string;
         };
     };
 };

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;
@@ -34,17 +124,14 @@ declare const List: {
                     width: string;
                 };
             };
+            margin: string;
+            marginBottom: string;
+        };
+        ol: {
+            margin: string;
+            marginBottom: string;
         };
         dl: {
-            borderBottom: string;
-            borderColor: string;
-            paddingLeft: string;
-            h2: {
-                borderTop: string;
-                borderColor: string;
-                margin: string;
-                padding: string;
-            };
             dl: {
                 display: string;
                 gridTemplateColumns: {
@@ -81,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/notification.d.ts

@@ -1,9 +1,9 @@
 declare const _default: {
     Notification: {
         parts: string[];
-        baseStyle: ({ centered, dismissible, noMargin, notificationType }: {
-            centered: any;
+        baseStyle: ({ dismissible, isCentered, noMargin, notificationType }: {
             dismissible: any;
+            isCentered: any;
             noMargin: any;
             notificationType: any;
         }) => {
@@ -34,6 +34,9 @@ declare const _default: {
                 position: string;
                 right: string;
                 top: string;
+                svg: {
+                    marginTop: string;
+                };
                 _hover: {
                     bg: string;
                 };
@@ -69,9 +72,9 @@ declare const _default: {
     };
     NotificationHeading: {
         parts: string[];
-        baseStyle: ({ centered, icon, notificationType }: {
-            centered: any;
+        baseStyle: ({ icon, isCentered, notificationType }: {
             icon: any;
+            isCentered: any;
             notificationType: any;
         }) => {
             display: string;

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

@@ -1,7 +1,6 @@
 declare const Pagination: {
     parts: string[];
     baseStyle: {
-        marginBottom: string;
         alignItems: string;
         display: string;
         width: string;
@@ -9,10 +8,8 @@ declare const Pagination: {
             lineHeight: string;
             textDecoration: string;
         };
-        li: {
-            _first: {
-                marginTop: string;
-            };
+        ul: {
+            marginBottom: 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;
@@ -57,11 +60,10 @@ declare const Radio: {
         };
         label: {
             userSelect: string;
-            fontSize: string;
             fontWeight: string;
             marginBottom: string;
             marginLeft: string;
-            verticalAlign: string;
+            width: string;
             _disabled: {
                 color: string;
                 opacity: number;
@@ -71,13 +73,12 @@ declare const Radio: {
                 color: string;
             };
         };
-        helper: {
+        helperErrorText: {
             marginLeft: string;
             _disabled: {
+                color: string;
                 fontStyle: string;
             };
-            marginTop: string;
-            marginBottom: string;
         };
     };
     sizes: {
@@ -86,6 +87,9 @@ declare const Radio: {
                 h: string;
                 w: string;
             };
+            label: {
+                fontSize: string;
+            };
         };
     };
     defaultProps: {

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

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

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

@@ -1,15 +1,37 @@
 declare const Select: {
     parts: string[];
-    baseStyle: {
+    baseStyle: ({ labelPosition, labelWidth }: {
+        labelPosition: any;
+        labelWidth: any;
+    }) => {
         marginBottom: string;
-        helper: {
-            marginTop: string;
-            marginBottom: string;
+        ".chakra-select__icon-wrapper": {
+            zIndex: 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;
+            fontSize: string;
             paddingTop: string;
             paddingRight: string;
             paddingBottom: string;
@@ -18,24 +40,27 @@ declare const Select: {
                 borderColor: string;
             };
             _active: {
-                border: string;
                 borderColor: string;
-                zIndex: string;
+                boxShadow: string;
                 outline: string;
+                outlineOffset: string;
                 outlineColor: string;
-            };
-            _focus: {
-                border: string;
-                borderColor: string;
                 zIndex: string;
-                outline: string;
-                outlineColor: 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

@@ -1,34 +1,37 @@
 declare const CustomSlider: {
     parts: string[];
-    baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }: {
+    baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues }: {
         isDisabled: any;
         isInvalid: any;
-        isRangeSlider: any;
         showBoxes: any;
+        showValues: any;
     }) => {
         container: {
             display: string;
             alignItems: string;
         };
-        helper: {
-            marginTop: string;
-        };
         leftValue: {
-            marginLeft: string;
+            color: string;
             marginTop: string;
             marginBottom: string;
             marginRight: string;
+            marginLeft: string;
         };
         rightValue: {
+            marginLeft: string;
             marginRight: string;
+            color: string;
             marginTop: string;
             marginBottom: string;
-            marginLeft: string;
         };
         textInput: {
             minWidth: string;
             color: string;
         };
+        sliderContainer: {
+            marginLeft: string;
+            marginRight: string;
+        };
         filledTrack: {
             bgColor: string;
         };
@@ -45,6 +48,10 @@ declare const CustomSlider: {
             _active: {
                 transform: string;
             };
+            _disabled: {
+                bgColor: string;
+                borderColor: string;
+            };
         };
     };
 };