@nypl/design-system-react-components 0.27.0 → 0.28.0

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

@@ -1,3 +1,97 @@
+interface CustomImageBaseStyle {
+    size: keyof typeof imageSizes;
+}
+interface CustomImageWrapperBaseStyle {
+    ratio: keyof typeof imageRatios;
+    size: keyof typeof imageSizes;
+}
+declare const imageSizes: {
+    default: {
+        maxWidth: string;
+    };
+    xxsmall: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+    xsmall: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+    small: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+    medium: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+    large: {
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+    };
+};
+declare const imageRatios: {
+    fourByThree: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    oneByTwo: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    original: {
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    sixteenByNine: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    square: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    threeByFour: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    threeByTwo: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+    twoByOne: {
+        paddingBottom: string;
+        position: string;
+        width: string;
+        height: string;
+        overflow: string;
+    };
+};
 declare const CustomImage: {
     parts: string[];
     variants: {
@@ -7,25 +101,484 @@ declare const CustomImage: {
             };
         };
     };
-    baseStyle: ({ size }: {
-        size?: string;
-    }) => {
-        figure: any;
+    baseStyle: ({ size }: CustomImageBaseStyle) => {
+        figure: {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            margin: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+        } | {
+            img: {
+                marginBottom: string;
+            };
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            margin: string;
+        };
         figcaption: {
             fontStyle: string;
             fontSize: string;
         };
-        img: any;
+        img: {
+            maxWidth: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        } | {
+            maxWidth: string;
+            marginLeft: string;
+            marginRight: string;
+            display: string;
+            boxSizing: string;
+            objectFit: string;
+            position: string;
+            width: string;
+        };
         captionWrappers: {
-            marginBottom: string;
+            marginTop: string;
         };
     };
 };
 declare const CustomImageWrapper: {
     parts: string[];
-    baseStyle: ({ ratio, size }: {
-        ratio?: string;
-        size?: string;
-    }) => any;
+    baseStyle: ({ ratio, size, }: CustomImageWrapperBaseStyle) => {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    } | {
+        crop: {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
+            height: string;
+            overflow: string;
+        };
+        img: {
+            height: string;
+            left: string;
+            maxWidth: string;
+            position: string;
+            top: string;
+            width: string;
+        };
+        maxWidth: string;
+        marginLeft: string;
+        marginRight: string;
+        width: string;
+    };
 };
 export { CustomImage, CustomImageWrapper };

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

@@ -1,7 +1,8 @@
+interface LabelBaseStyle {
+    isInlined: boolean;
+}
 declare const Label: {
-    baseStyle: ({ isInlined }: {
-        isInlined: any;
-    }) => {
+    baseStyle: ({ isInlined }: LabelBaseStyle) => {
         flex: string;
         whiteSpace: string;
         display: string;

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

@@ -1,3 +1,7 @@
+interface ListBaseStyle {
+    inline?: boolean;
+    noStyling: boolean;
+}
 export declare const baseListStyles: (inline?: boolean, noStyling?: boolean) => {
     margin: string;
     listStyle: string;
@@ -89,10 +93,7 @@ export declare const baseDefinitionStyles: {
     };
 };
 declare const List: {
-    baseStyle: ({ inline, noStyling }: {
-        inline: any;
-        noStyling: any;
-    }) => {
+    baseStyle: ({ inline, noStyling }: ListBaseStyle) => {
         margin: string;
         listStyle: string;
         marginInlineStart: string;
@@ -108,9 +109,7 @@ declare const List: {
         };
     };
     variants: {
-        ul: ({ noStyling }: {
-            noStyling: any;
-        }) => {
+        ul: ({ noStyling }: ListBaseStyle) => {
             listStyle: string;
             li: {
                 _before: {