@nypl/design-system-react-components 2.2.0-react-chakra-rc-2 → 3.0.0-react-chakra-rc2

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

@@ -1,10 +1,4 @@
-interface CustomImageBaseStyle {
-    size: keyof typeof imageSizes;
-}
-interface CustomImageWrapperBaseStyle {
-    ratio: keyof typeof imageRatios;
-    size: keyof typeof imageSizes;
-}
+import { StyleFunctionProps } from "@chakra-ui/system";
 declare const imageSizes: {
     default: {
         maxWidth: string;
@@ -40,73 +34,74 @@ declare const imageSizes: {
         marginEnd: string;
     };
 };
+declare const imageSizesBasedOnHeight: {
+    default: {
+        maxHeight: string;
+        maxWidth: string;
+        width: string;
+    };
+    xxxsmall: {
+        maxHeight: string;
+        marginStart: string;
+        marginEnd: string;
+    };
+    xxsmall: {
+        maxHeight: string;
+        marginStart: string;
+        marginEnd: string;
+    };
+    xsmall: {
+        maxHeight: string;
+        marginStart: string;
+        marginEnd: string;
+    };
+    small: {
+        maxHeight: string;
+        marginStart: string;
+        marginEnd: string;
+    };
+    medium: {
+        maxHeight: string;
+        marginStart: string;
+        marginEnd: string;
+    };
+    large: {
+        maxHeight: string;
+        marginStart: string;
+        marginEnd: 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;
     };
+    original: {};
     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: {
-        circle: {
-            img: {
-                borderRadius: string;
-            };
-        };
-    };
-    baseStyle: ({ size }: CustomImageBaseStyle) => {
+interface ReservoirImageBaseStyle extends StyleFunctionProps {
+    ratio: keyof typeof imageRatios;
+    size: keyof typeof imageSizes | keyof typeof imageSizesBasedOnHeight;
+    sizeBasedOn: "height" | "width";
+}
+declare const ReservoirImage: {
+    baseStyle?: ({ ratio, size, sizeBasedOn, }: ReservoirImageBaseStyle) => {
         figure: {
             img: {
                 backgroundColor: string;
@@ -115,22 +110,9 @@ declare const CustomImage: {
                     backgroundColor: string;
                 };
             };
-            maxWidth: string;
-            margin: string;
             width: string;
-        } | {
-            img: {
-                backgroundColor: string;
-                marginBottom: string;
-                _dark: {
-                    backgroundColor: string;
-                };
-            };
             maxWidth: string;
-            marginStart: string;
-            marginEnd: string;
             margin: string;
-            width: string;
         } | {
             img: {
                 backgroundColor: string;
@@ -139,24 +121,11 @@ declare const CustomImage: {
                     backgroundColor: string;
                 };
             };
-            maxWidth: string;
-            marginStart: string;
-            marginEnd: string;
-            margin: string;
             width: string;
-        } | {
-            img: {
-                backgroundColor: string;
-                marginBottom: string;
-                _dark: {
-                    backgroundColor: string;
-                };
-            };
             maxWidth: string;
             marginStart: string;
             marginEnd: string;
             margin: string;
-            width: string;
         } | {
             img: {
                 backgroundColor: string;
@@ -165,11 +134,11 @@ declare const CustomImage: {
                     backgroundColor: string;
                 };
             };
+            height: string;
+            width: string;
             maxWidth: string;
-            marginStart: string;
-            marginEnd: string;
+            maxHeight: string;
             margin: string;
-            width: string;
         } | {
             img: {
                 backgroundColor: string;
@@ -178,11 +147,13 @@ declare const CustomImage: {
                     backgroundColor: string;
                 };
             };
+            height: string;
+            width: string;
             maxWidth: string;
+            maxHeight: string;
             marginStart: string;
             marginEnd: string;
             margin: string;
-            width: string;
         } | {
             img: {
                 backgroundColor: string;
@@ -191,11 +162,12 @@ declare const CustomImage: {
                     backgroundColor: string;
                 };
             };
-            maxWidth: string;
+            height: string;
+            width: string;
+            maxHeight: string;
             marginStart: string;
             marginEnd: string;
             margin: string;
-            width: string;
         };
         figcaption: {
             fontStyle: string;
@@ -204,17 +176,18 @@ declare const CustomImage: {
             _dark: {
                 backgroundColor: string;
             };
+            width: string;
             maxWidth: string;
             display: string;
             backgroundColor: string;
             boxSizing: string;
             objectFit: string;
             position: string;
-            width: string;
         } | {
             _dark: {
                 backgroundColor: string;
             };
+            width: string;
             maxWidth: string;
             marginStart: string;
             marginEnd: string;
@@ -223,25 +196,26 @@ declare const CustomImage: {
             boxSizing: string;
             objectFit: string;
             position: string;
-            width: string;
         } | {
             _dark: {
                 backgroundColor: string;
             };
+            height: string;
             maxWidth: string;
-            marginStart: string;
-            marginEnd: string;
+            maxHeight: string;
+            width: string;
             display: string;
             backgroundColor: string;
             boxSizing: string;
             objectFit: string;
             position: string;
-            width: string;
         } | {
             _dark: {
                 backgroundColor: string;
             };
+            height: string;
             maxWidth: string;
+            maxHeight: string;
             marginStart: string;
             marginEnd: string;
             display: string;
@@ -249,12 +223,12 @@ declare const CustomImage: {
             boxSizing: string;
             objectFit: string;
             position: string;
-            width: string;
         } | {
             _dark: {
                 backgroundColor: string;
             };
-            maxWidth: string;
+            height: string;
+            maxHeight: string;
             marginStart: string;
             marginEnd: string;
             display: string;
@@ -262,264 +236,394 @@ declare const CustomImage: {
             boxSizing: string;
             objectFit: string;
             position: string;
+        };
+    };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "figcaption" | "figure" | "img")[];
+        }>;
+    };
+    variants?: {
+        circle: {
+            img: {
+                borderRadius: string;
+            };
+        };
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: "circle";
+        colorScheme?: string;
+    };
+    parts: ("base" | "figcaption" | "figure" | "img")[];
+};
+declare const ReservoirImageWrapper: {
+    baseStyle?: ({ ratio, size, sizeBasedOn, }: ReservoirImageBaseStyle) => {
+        base: {
+            img: {
+                backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxWidth: string;
+            } | {
+                backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxHeight: string;
+            };
             width: string;
+            maxWidth: string;
+            marginStart: string;
+            marginEnd: string;
         } | {
-            _dark: {
+            img: {
+                backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxWidth: string;
+            } | {
                 backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxHeight: string;
             };
+            width: string;
             maxWidth: string;
             marginStart: string;
             marginEnd: string;
-            display: string;
-            backgroundColor: string;
-            boxSizing: string;
-            objectFit: string;
-            position: string;
+        } | {
+            img: {
+                backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxWidth: string;
+            } | {
+                backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxHeight: string;
+            };
+            height: string;
+            maxWidth: string;
+            maxHeight: string;
             width: string;
+            marginStart: string;
+            marginEnd: string;
         } | {
-            _dark: {
+            img: {
+                backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxWidth: string;
+            } | {
                 backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxHeight: string;
             };
+            height: string;
             maxWidth: string;
+            maxHeight: string;
+            marginStart: string;
+            marginEnd: string;
+        } | {
+            img: {
+                backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxWidth: string;
+            } | {
+                backgroundColor: string;
+                height: string;
+                left: string;
+                width: string;
+                position: string;
+                top: string;
+                _dark: {
+                    backgroundColor: string;
+                };
+                maxHeight: string;
+            };
+            height: string;
+            maxHeight: string;
             marginStart: string;
             marginEnd: string;
-            display: string;
-            backgroundColor: string;
-            boxSizing: string;
-            objectFit: string;
-            position: string;
-            width: string;
         };
-    };
-};
-declare const CustomImageWrapper: {
-    parts: string[];
-    baseStyle: ({ ratio, size, }: CustomImageWrapperBaseStyle) => {
         crop: {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
-        };
-        img: {
-            backgroundColor: string;
-            height: string;
-            left: string;
+        } | {
             maxWidth: string;
-            position: string;
-            top: string;
-            width: string;
-            _dark: {
-                backgroundColor: string;
-            };
-        };
-        maxWidth: string;
-        marginStart: string;
-        marginEnd: string;
-        width: string;
-    } | {
-        crop: {
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
-        };
-        img: {
-            backgroundColor: string;
+        } | {
+            maxWidth: string;
+            position: string;
+            width: string;
             height: string;
-            left: string;
+            overflow: string;
+        } | {
             maxWidth: string;
             position: string;
-            top: string;
             width: string;
-            _dark: {
-                backgroundColor: string;
-            };
-        };
-        maxWidth: string;
-        marginStart: string;
-        marginEnd: string;
-        width: string;
-    } | {
-        crop: {
-            paddingBottom: string;
+            height: string;
+            overflow: string;
+        } | {
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
-            paddingBottom: string;
+            maxWidth: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
-            paddingBottom: string;
+            maxWidth: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
-            paddingBottom: string;
+            maxWidth: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
-            paddingBottom: string;
+            maxWidth: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
-        };
-        img: {
-            backgroundColor: string;
+        } | {
+            paddingBottom: string;
+            position: string;
+            width: string;
             height: string;
-            left: string;
+            overflow: string;
+        } | {
             maxWidth: string;
+            paddingBottom: string;
             position: string;
-            top: string;
             width: string;
-            _dark: {
-                backgroundColor: string;
-            };
-        };
-        maxWidth: string;
-        marginStart: string;
-        marginEnd: string;
-        width: string;
-    } | {
-        crop: {
+            height: string;
+            overflow: string;
+        } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
+            paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
@@ -532,53 +636,49 @@ declare const CustomImageWrapper: {
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
-        };
-        img: {
-            backgroundColor: string;
-            height: string;
-            left: string;
+        } | {
             maxWidth: string;
+            paddingBottom: string;
             position: string;
-            top: string;
             width: string;
-            _dark: {
-                backgroundColor: string;
-            };
-        };
-        maxWidth: string;
-        marginStart: string;
-        marginEnd: string;
-        width: string;
-    } | {
-        crop: {
+            height: string;
+            overflow: string;
+        } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
+            paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
@@ -591,53 +691,49 @@ declare const CustomImageWrapper: {
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
-        };
-        img: {
-            backgroundColor: string;
-            height: string;
-            left: string;
+        } | {
             maxWidth: string;
+            paddingBottom: string;
             position: string;
-            top: string;
             width: string;
-            _dark: {
-                backgroundColor: string;
-            };
-        };
-        maxWidth: string;
-        marginStart: string;
-        marginEnd: string;
-        width: string;
-    } | {
-        crop: {
+            height: string;
+            overflow: string;
+        } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
+            paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
@@ -650,54 +746,50 @@ declare const CustomImageWrapper: {
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
-        };
-        img: {
-            backgroundColor: string;
-            height: string;
-            left: string;
+        } | {
             maxWidth: string;
+            paddingBottom: string;
             position: string;
-            top: string;
             width: string;
-            _dark: {
-                backgroundColor: string;
-            };
-        };
-        maxWidth: string;
-        marginStart: string;
-        marginEnd: string;
-        width: string;
-    } | {
-        crop: {
+            height: string;
+            overflow: string;
+        } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
+            paddingBottom: string;
             position: string;
             width: string;
             height: string;
@@ -709,46 +801,57 @@ declare const CustomImageWrapper: {
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
         } | {
+            maxWidth: string;
             paddingBottom: string;
             position: string;
             width: string;
             height: string;
             overflow: string;
-        };
-        img: {
-            backgroundColor: string;
-            height: string;
-            left: string;
+        } | {
             maxWidth: string;
+            paddingBottom: string;
             position: string;
-            top: string;
             width: string;
-            _dark: {
-                backgroundColor: string;
-            };
+            height: string;
+            overflow: string;
         };
-        maxWidth: string;
-        marginStart: string;
-        marginEnd: string;
-        width: string;
     };
+    sizes?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "crop")[];
+        }>;
+    };
+    variants?: {
+        [key: string]: import("@chakra-ui/styled-system").PartsStyleInterpolation<{
+            keys: ("base" | "crop")[];
+        }>;
+    };
+    defaultProps?: {
+        size?: string | number;
+        variant?: string | number;
+        colorScheme?: string;
+    };
+    parts: ("base" | "crop")[];
 };
-export { CustomImage, CustomImageWrapper };
+export { ReservoirImage, ReservoirImageWrapper };