@nypl/design-system-react-components 0.26.1 → 1.0.0

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

@@ -1,4 +1,477 @@
+interface LogoBaseStyle {
+    size: keyof typeof size;
+}
+declare const size: {
+    default: {
+        maxWidth: string;
+    };
+    xxsmall: {
+        maxWidth: string;
+    };
+    xsmall: {
+        maxWidth: string;
+    };
+    small: {
+        maxWidth: string;
+    };
+    medium: {
+        maxWidth: string;
+    };
+    large: {
+        maxWidth: string;
+    };
+    xlarge: {
+        maxWidth: string;
+    };
+    xxlarge: {
+        height: string;
+        width: string;
+    };
+    xxxlarge: {
+        height: string;
+        width: string;
+    };
+};
 declare const Logo: {
-    baseStyle: (props: any) => any;
+    baseStyle: (props: LogoBaseStyle) => {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        maxWidth: string;
+        display: string;
+        height: string;
+        width: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        height: string;
+        width: string;
+        display: string;
+    } | {
+        svg: {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            display: string;
+            height: string;
+            width: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        } | {
+            height: string;
+            width: string;
+            display: string;
+        };
+        height: string;
+        width: string;
+        display: string;
+    };
 };
 export default Logo;

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

@@ -1,12 +1,24 @@
+import { NotificationTypes } from "../../components/Notification/Notification";
+interface NotificationBaseStyle {
+    dismissible: boolean;
+    isCentered: boolean;
+    noMargin: boolean;
+    notificationType: NotificationTypes;
+}
+interface NotificationContentBaseStyle {
+    alignText: boolean;
+    icon: boolean;
+    notificationType: NotificationTypes;
+}
+interface NotificationHeadingBaseStyle {
+    icon: boolean;
+    isCentered: boolean;
+    notificationType: NotificationTypes;
+}
 declare const _default: {
     Notification: {
         parts: string[];
-        baseStyle: ({ dismissible, isCentered, noMargin, notificationType }: {
-            dismissible: any;
-            isCentered: any;
-            noMargin: any;
-            notificationType: any;
-        }) => {
+        baseStyle: ({ dismissible, isCentered, noMargin, notificationType, }: NotificationBaseStyle) => {
             bg: string;
             display: string;
             fontSize: string;
@@ -49,11 +61,7 @@ declare const _default: {
     };
     NotificationContent: {
         parts: string[];
-        baseStyle: ({ alignText, icon, notificationType }: {
-            alignText: any;
-            icon: any;
-            notificationType: any;
-        }) => {
+        baseStyle: ({ alignText, icon, notificationType, }: NotificationContentBaseStyle) => {
             display: string;
             justifyContent: string;
             content: {
@@ -72,11 +80,7 @@ declare const _default: {
     };
     NotificationHeading: {
         parts: string[];
-        baseStyle: ({ icon, isCentered, notificationType }: {
-            icon: any;
-            isCentered: any;
-            notificationType: any;
-        }) => {
+        baseStyle: ({ icon, isCentered, notificationType, }: NotificationHeadingBaseStyle) => {
             display: string;
             marginBottom: string;
             justifyContent: string;

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

@@ -1,9 +1,11 @@
+import { ProgressIndicatorSizes } from "../../components/ProgressIndicator/ProgressIndicator";
+interface ProgressIndicatorBaseStyle {
+    darkMode: boolean;
+    size: ProgressIndicatorSizes;
+}
 declare const ProgressIndicator: {
     parts: string[];
-    baseStyle: ({ darkMode, size }: {
-        darkMode: any;
-        size: any;
-    }) => {
+    baseStyle: ({ darkMode, size }: ProgressIndicatorBaseStyle) => {
         color: string;
         circular: {
             svg: {

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

@@ -1,18 +1,12 @@
+interface SelectBaseStyle {
+    labelPosition: string;
+}
 declare const Select: {
     parts: string[];
-    baseStyle: ({ labelPosition, labelWidth }: {
-        labelPosition: any;
-        labelWidth: any;
-    }) => {
-        marginBottom: string;
+    baseStyle: ({ labelPosition }: SelectBaseStyle) => {
         ".chakra-select__icon-wrapper": {
             zIndex: string;
         };
-        helperText: {
-            marginLeft: {
-                md: string;
-            };
-        };
         inline: {
             display: {
                 md: string;

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

@@ -1,9 +1,16 @@
+interface SkeletonLoaderBaseStyle {
+    imageAspectRatio: keyof typeof imagePaddingBottomStyles;
+    isBordered: boolean;
+    showImage?: boolean;
+}
+declare const imagePaddingBottomStyles: {
+    landscape: string;
+    portrait: string;
+    square: string;
+};
 declare const SkeletonLoader: {
     parts: string[];
-    baseStyle: ({ imageAspectRatio, isBordered }: {
-        imageAspectRatio: any;
-        isBordered: any;
-    }) => {
+    baseStyle: ({ imageAspectRatio, isBordered }: SkeletonLoaderBaseStyle) => {
         section: {
             marginBottom: string;
             _last: {
@@ -15,7 +22,7 @@ declare const SkeletonLoader: {
             flexShrink: string;
             height: string;
             overflow: string;
-            paddingBottom: any;
+            paddingBottom: string;
             position: string;
             width: string;
             borderRadius: string;
@@ -47,10 +54,7 @@ declare const SkeletonLoader: {
         width: string;
     };
     variants: {
-        row: ({ imageAspectRatio, showImage }: {
-            imageAspectRatio: any;
-            showImage: any;
-        }) => {
+        row: ({ imageAspectRatio, showImage }: SkeletonLoaderBaseStyle) => {
             alignItems: string;
             display: {
                 md: string;
@@ -69,7 +73,7 @@ declare const SkeletonLoader: {
                     md: string;
                 };
                 height: {
-                    md: any;
+                    md: string;
                 };
             };
             container: {

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

@@ -0,0 +1,22 @@
+declare const SkipNavigation: {
+    baseStyle: {
+        a: {
+            backgroundColor: string;
+            height: string;
+            left: string;
+            overflow: string;
+            position: string;
+            top: string;
+            width: string;
+            _focus: {
+                border: string;
+                height: string;
+                left: string;
+                padding: string;
+                top: string;
+                width: string;
+            };
+        };
+    };
+};
+export default SkipNavigation;

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

@@ -1,11 +1,12 @@
+interface CustomSliderBaseStyle {
+    isDisabled: boolean;
+    isInvalid: boolean;
+    showBoxes: boolean;
+    showValues: boolean;
+}
 declare const CustomSlider: {
     parts: string[];
-    baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues }: {
-        isDisabled: any;
-        isInvalid: any;
-        showBoxes: any;
-        showValues: any;
-    }) => {
+    baseStyle: ({ isDisabled, isInvalid, showBoxes, showValues, }: CustomSliderBaseStyle) => {
         container: {
             display: string;
             alignItems: string;

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

@@ -1,10 +1,11 @@
+interface StructuredContentBaseStyle {
+    hasFigureImage: boolean;
+    imageAspectRatio: string;
+    imagePosition: string;
+}
 declare const StructuredContent: {
     parts: string[];
-    baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition }: {
-        hasFigureImage: any;
-        imageAspectRatio: any;
-        imagePosition: any;
-    }) => {
+    baseStyle: ({ hasFigureImage, imageAspectRatio, imagePosition, }: StructuredContentBaseStyle) => {
         h1: {
             width: string;
             marginTop: string;
@@ -59,7 +60,7 @@ declare const StructuredContent: {
         imageFigure: {
             marginBottom: string;
             maxWidth?: string;
-            float: any[];
+            float: string[];
             marginLeft: string[];
             marginRight: string[];
             width: string;
@@ -67,14 +68,14 @@ declare const StructuredContent: {
         imageWrapper: {
             marginBottom: string;
             maxWidth?: string;
-            float: any[];
+            float: string[];
             marginLeft: string[];
             marginRight: string[];
             width: string;
         };
         image: {
             maxWidth?: string;
-            float: any[];
+            float: string[];
             marginLeft: string[];
             marginRight: string[];
             marginBottom: string;
@@ -185,7 +186,7 @@ declare const StructuredContent: {
             th: {
                 border: string;
                 borderBottom: string;
-                color: string | true;
+                color: string;
                 fontSize: string;
                 fontWeight: string;
                 letterSpacing: string;