@nypl/design-system-react-components 0.25.1 → 0.25.5

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

@@ -1,13 +1,15 @@
 declare const Label: {
     parts: string[];
     baseStyle: {
-        marginBottom: string;
         alignItems: string;
-        display: string;
+        width: string;
+        marginBottom: string;
+        fontSize: string;
         fontWeight: string;
+        display: string;
         justifyContent: string;
-        fontSize: string;
         helper: {
+            marginLeft: string;
             fontWeight: string;
             fontSize: string;
         };

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

@@ -8,6 +8,10 @@ declare const Link: {
     };
     variants: {
         link: {};
+        disabled: {
+            color: string;
+            pointerEvents: string;
+        };
         moreLink: {
             alignItems: string;
             display: string;

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

@@ -0,0 +1,89 @@
+declare const List: {
+    baseStyle: ({ inline, noStyling }: {
+        inline: any;
+        noStyling: any;
+    }) => {
+        margin: string;
+        listStyle: string;
+        marginInlineStart: string;
+        paddingLeft: string;
+        padding: string;
+        display: string;
+        li: {
+            marginRight: string;
+            listStyleType: string;
+            _notFirst: {
+                marginTop: string;
+            };
+        };
+    };
+    variants: {
+        ul: ({ noStyling }: {
+            noStyling: any;
+        }) => {
+            listStyle: string;
+            li: {
+                _before: {
+                    color: string;
+                    content: string;
+                    display: string;
+                    fontWeight: string;
+                    fontSize: string;
+                    lineHeight: string;
+                    marginLeft: string;
+                    width: string;
+                };
+            };
+        };
+        dl: {
+            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;
+                fontSize: string;
+                fontWeight: string;
+                paddingBottom: {
+                    base: string;
+                    md: string;
+                };
+                paddingTop: string;
+                paddingRight: {
+                    md: string;
+                };
+            };
+            dd: {
+                fontSize: string;
+                margin: string;
+                paddingBottom: string;
+                borderTop: {
+                    base: string;
+                    md: string;
+                };
+                borderColor: {
+                    md: string;
+                };
+                paddingTop: {
+                    md: string;
+                };
+            };
+        };
+    };
+};
+export default List;

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

@@ -0,0 +1,75 @@
+declare const _default: {
+    Notification: {
+        parts: string[];
+        baseStyle: ({ centered, noMargin, notificationType }: {
+            centered: any;
+            noMargin: any;
+            notificationType: any;
+        }) => {
+            bg: string;
+            display: string;
+            fontSize: string;
+            padding: string;
+            position: string;
+            textAlign: string;
+            borderRadius: string;
+            margin: string;
+            container: {
+                margin: string;
+                width: string;
+                maxWidth: string;
+            };
+            dismissibleButton: {
+                border: string;
+                alignItems: string;
+                bgColor: string;
+                color: string;
+                display: string;
+                height: string;
+                width: string;
+                minWidth: string;
+                position: string;
+                right: string;
+                top: string;
+                _hover: {
+                    bg: string;
+                };
+            };
+            icon: {
+                flexShrink: string;
+                marginRight: string;
+            };
+        };
+    };
+    NotificationContent: {
+        parts: string[];
+        baseStyle: ({ alignText, notificationType }: {
+            alignText: any;
+            notificationType: any;
+        }) => {
+            display: string;
+            justifyContent: string;
+            content: {
+                width: string;
+                paddingLeft: string;
+                color: string;
+            };
+        };
+    };
+    NotificationHeading: {
+        parts: string[];
+        baseStyle: ({ centered, notificationType }: {
+            centered: any;
+            notificationType: any;
+        }) => {
+            display: string;
+            marginBottom: string;
+            justifyContent: string;
+            heading: {
+                marginBottom: string;
+                color: string;
+            };
+        };
+    };
+};
+export default _default;

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

@@ -0,0 +1,19 @@
+declare const Pagination: {
+    parts: string[];
+    baseStyle: {
+        marginBottom: string;
+        alignItems: string;
+        display: string;
+        width: string;
+        link: {
+            lineHeight: string;
+            textDecoration: string;
+        };
+        li: {
+            _first: {
+                marginTop: string;
+            };
+        };
+    };
+};
+export default Pagination;

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

@@ -0,0 +1,50 @@
+declare const ProgressIndicator: {
+    parts: string[];
+    baseStyle: ({ darkMode, size }: {
+        darkMode: any;
+        size: any;
+    }) => {
+        color: string;
+        circular: {
+            svg: {
+                height: string;
+                width: string;
+                display: string;
+                circle: {
+                    _first: {
+                        stroke: string;
+                    };
+                    _last: {
+                        stroke: string;
+                    };
+                };
+            };
+        };
+        circularContainer: {
+            alignItems: string;
+            display: string;
+            flexDirection: string;
+            width: string;
+        };
+        linear: {
+            "> div": {
+                bg: string;
+            };
+            flex: number;
+            bg: string;
+            height: {
+                base: string;
+                md: string;
+            };
+        };
+        linearContainer: {
+            display: string;
+            alignItems: string;
+        };
+        linearPercentage: {
+            padding: string;
+            flex: number;
+        };
+    };
+};
+export default ProgressIndicator;

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

@@ -0,0 +1,12 @@
+declare const RadioGroup: {
+    parts: string[];
+    baseStyle: {
+        helper: {
+            marginTop: string;
+        };
+        stack: {
+            width: string;
+        };
+    };
+};
+export default RadioGroup;

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

@@ -46,8 +46,17 @@ declare const Select: {
         searchbar: {
             select: {
                 flex: string;
-                borderRight: string;
-                borderRightRadius: string;
+                borderRightColor: {
+                    md: string;
+                };
+                borderRightRadius: {
+                    md: string;
+                };
+                _hover: {
+                    borderRightColor: {
+                        md: string;
+                    };
+                };
             };
         };
     };

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

@@ -0,0 +1,98 @@
+declare const SkeletonLoader: {
+    parts: string[];
+    baseStyle: ({ border, imageAspectRatio }: {
+        border: any;
+        imageAspectRatio: any;
+    }) => {
+        section: {
+            marginBottom: string;
+            _last: {
+                marginBottom: string;
+            };
+        };
+        image: {
+            boxSizing: string;
+            flexShrink: string;
+            height: string;
+            overflow: string;
+            paddingBottom: any;
+            position: string;
+            width: string;
+            borderRadius: string;
+            marginBottom: string;
+        };
+        container: {
+            marginTop: string;
+            width: string;
+        };
+        heading: {
+            height: string;
+            borderRadius: string;
+            boxSizing: string;
+            marginBottom: string;
+        };
+        content: {
+            height: string;
+            borderRadius: string;
+            boxSizing: string;
+            marginBottom: string;
+        };
+        button: {
+            height: string;
+            margin: string;
+            maxWidth: string;
+            width: string;
+        };
+        margin: string;
+        width: string;
+    };
+    variants: {
+        row: ({ imageAspectRatio, showImage }: {
+            imageAspectRatio: any;
+            showImage: any;
+        }) => {
+            alignItems: string;
+            display: {
+                md: string;
+            };
+            image: {
+                overflow: {
+                    md: string;
+                };
+                paddingBottom: {
+                    md: string;
+                };
+                position: {
+                    md: string;
+                };
+                width: {
+                    md: string;
+                };
+                height: {
+                    md: any;
+                };
+            };
+            container: {
+                marginLeft: {
+                    md: string;
+                };
+                marginTop: {
+                    md: string;
+                };
+            };
+            button: {
+                margin: {
+                    md: string;
+                };
+            };
+        };
+    };
+};
+declare const Skeleton: {
+    baseStyle: {
+        borderRadius: string;
+        background: string;
+        animation: string;
+    };
+};
+export { Skeleton, SkeletonLoader };

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

@@ -0,0 +1,51 @@
+declare const CustomSlider: {
+    parts: string[];
+    baseStyle: ({ isDisabled, isInvalid, isRangeSlider, showBoxes }: {
+        isDisabled: any;
+        isInvalid: any;
+        isRangeSlider: any;
+        showBoxes: any;
+    }) => {
+        container: {
+            display: string;
+            alignItems: string;
+        };
+        helper: {
+            marginTop: string;
+        };
+        leftValue: {
+            marginLeft: string;
+            marginTop: string;
+            marginBottom: string;
+            marginRight: string;
+        };
+        rightValue: {
+            marginRight: string;
+            marginTop: string;
+            marginBottom: string;
+            marginLeft: string;
+        };
+        textInput: {
+            minWidth: string;
+            color: string;
+        };
+        filledTrack: {
+            bgColor: string;
+        };
+        track: {
+            bgColor: string;
+            _disabled: {
+                bgColor: string;
+            };
+        };
+        thumb: {
+            border: string;
+            borderColor: string;
+            boxShadow: string;
+            _active: {
+                transform: string;
+            };
+        };
+    };
+};
+export default CustomSlider;

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

@@ -1,6 +1,9 @@
 declare const CustomTabs: {
     parts: string[];
     baseStyle: {
+        tablist: {
+            borderColor: string;
+        };
         tab: {
             color: string;
             paddingInlineStart: string;
@@ -9,6 +12,9 @@ declare const CustomTabs: {
             border: string;
             borderBottom: string;
             borderColor: string;
+            height: {
+                base: string;
+            };
             marginRight: {
                 base: string;
                 md: string;
@@ -40,12 +46,18 @@ declare const CustomTabs: {
         };
         buttonArrows: {
             border: string;
+            borderRadius: string;
             display: {
-                base: string;
                 md: string;
             };
             height: string;
             width: string;
+            top: string;
+            marginLeft: string;
+            marginRight: string;
+            pos: string;
+            transition: string;
+            zIndex: string;
         };
         tablistWrapper: {
             display: string;
@@ -54,10 +66,11 @@ declare const CustomTabs: {
                 base: string;
                 md: string;
             };
-            margin: {
+            height: {
                 base: string;
                 md: string;
             };
+            margin: string;
             overflowX: {
                 base: string;
                 md: string;
@@ -78,8 +91,46 @@ declare const CustomTabs: {
                 base: string;
                 md: string;
             };
+            position: string;
+        };
+        tabpanels: {
+            paddingTop: string;
+        };
+        carouselParent: {
+            position: {
+                base: string;
+                md: string;
+            };
+            left: {
+                base: string;
+                md: string;
+            };
+            paddingBottom: {
+                base: string;
+                md: string;
+            };
+            paddingLeft: {
+                base: string;
+                md: string;
+            };
+            paddingRight: string;
+            paddingTop: {
+                base: string;
+                md: string;
+            };
+            right: {
+                base: string;
+                md: string;
+            };
+            top: {
+                base: string;
+                md: string;
+            };
+            overflowX: {
+                base: string;
+                md: string;
+            };
         };
     };
-    defaultProps: {};
 };
 export default CustomTabs;

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

@@ -1,7 +1,6 @@
 declare const TextInput: {
     parts: string[];
     baseStyle: {
-        marginBottom: string;
         helper: {
             marginTop: string;
             marginBottom: string;
@@ -98,6 +97,14 @@ declare const TextInput: {
             flex: string;
             input: {
                 borderRadius: string;
+                borderTopLeftRadius: {
+                    base: string;
+                    md: string;
+                };
+                borderTopRightRadius: {
+                    base: string;
+                    md: string;
+                };
             };
         };
     };

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

@@ -0,0 +1,40 @@
+declare const VideoPlayer: {
+    baseStyle: {
+        inside: {
+            height: string;
+            overflow: string;
+            paddingBottom: string;
+            position: string;
+        };
+        iframe: {
+            height: string;
+            left: string;
+            margin: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        helperText: {
+            marginBottom: string;
+            marginTop: string;
+        };
+    };
+    variants: {
+        fourByThree: {
+            inside: {
+                paddingBottom: string;
+            };
+        };
+        invalid: {
+            backgroundColor: string;
+            height: string;
+            padding: string;
+        };
+        square: {
+            inside: {
+                paddingBottom: string;
+            };
+        };
+    };
+};
+export default VideoPlayer;

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

@@ -6,16 +6,16 @@ declare const _default: import("@chakra-ui/theme-tools").Breakpoints<{
     "2xl": string;
 }>;
 /**
- * Breakpoints from "src/styles/base/_02-breakpoints.scss"
+ * Breakpoints from "src/styles/base/_01-breakpoints.scss"
  * How to use Chakra responsive styles: https://chakra-ui.com/docs/features/responsive-styles
  *
- * Chakra Value |     DS Variable      | EM/PX value
- * --------------------------------------------------
- *      sm      | --breakpoint-small   | 20em/320px
- *      md      | --breakpoint-medium  | 38em/600px
- *      lg      | --breakpoint-large   | 60em/960px
- *      xl      | --breakpoint-xl      | 80em/1280px
- *     2xl      |        N/A           | 96em/1536px
+ * Chakra Value |     DS Variable           | EM/PX value
+ * ------------------------------------------------------
+ *      sm      | --nypl-breakpoint-small   | 20em/320px
+ *      md      | --nypl-breakpoint-medium  | 38em/600px
+ *      lg      | --nypl-breakpoint-large   | 60em/960px
+ *      xl      | --nypl-breakpoint-xl      | 80em/1280px
+ *     2xl      |        N/A                | 96em/1536px
  *
  * @Note Chakra provides a 2xl option while the DS does not. We don't
  * recommend using this value until further notice.

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

@@ -6,12 +6,14 @@
  */
 declare const global: {
     body: {
+        boxSizing: string;
         bg: string;
         color: string;
         fontFamily: string;
-        fontSize: number;
+        fontSize: string;
         fontWeight: string;
         lineHeight: string;
+        overflowX: string;
     };
     a: {
         color: string;
@@ -19,5 +21,8 @@ declare const global: {
     svg: {
         display: string;
     };
+    p: {
+        margin: string;
+    };
 };
 export default global;

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

@@ -0,0 +1,5 @@
+declare const radii: {
+    pill: string;
+    round: string;
+};
+export default radii;