@shopify/hydrogen-react 2023.1.8 → 2023.4.1

package/dist/node-prod/Image.js

@@ -1,106 +1,343 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const imageSize = require("./image-size.js");
-function Image({
-  data,
-  width,
-  height,
-  loading,
-  loader = imageSize.shopifyImageLoader,
-  loaderOptions,
-  widths,
-  decoding = "async",
-  ...rest
-}) {
-  if (!data.url) {
-    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${data.id ?? "no ID provided"}`;
-    {
-      console.error(missingUrlError);
+const React = require("react");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
     }
-    return null;
   }
-  const { width: imgElementWidth, height: imgElementHeight } = imageSize.getShopifyImageDimensions({
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const IMAGE_FRAGMENT = `#graphql
+  fragment Image on Image {
+    altText
+    url
+    width
+    height
+  }
+`;
+const Image = React__namespace.forwardRef(
+  ({
+    alt,
+    aspectRatio,
+    crop = "center",
     data,
+    decoding = "async",
+    height = "auto",
+    loader = shopifyLoader,
     loaderOptions,
-    elementProps: {
+    loading = "lazy",
+    sizes,
+    src,
+    srcSetOptions = {
+      intervals: 15,
+      startingWidth: 200,
+      incrementSize: 200,
+      placeholderWidth: 100
+    },
+    width = "100%",
+    widths,
+    ...passthroughProps
+  }, ref) => {
+    const normalizedData = React__namespace.useMemo(() => {
+      const dataWidth = (data == null ? void 0 : data.width) && (data == null ? void 0 : data.height) ? data == null ? void 0 : data.width : void 0;
+      const dataHeight = (data == null ? void 0 : data.width) && (data == null ? void 0 : data.height) ? data == null ? void 0 : data.height : void 0;
+      return {
+        width: dataWidth,
+        height: dataHeight,
+        unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight))
+      };
+    }, [data]);
+    const normalizedProps = React__namespace.useMemo(() => {
+      const nWidthProp = width || "100%";
+      const widthParts = getUnitValueParts(nWidthProp.toString());
+      const nWidth = `${widthParts.number}${widthParts.unit}`;
+      const autoHeight = height === void 0 || height === null;
+      const heightParts = autoHeight ? null : getUnitValueParts(height.toString());
+      const fixedHeight = heightParts ? `${heightParts.number}${heightParts.unit}` : "";
+      const nHeight = autoHeight ? "auto" : fixedHeight;
+      const nSrc = src || (data == null ? void 0 : data.url);
+      const nAlt = (data == null ? void 0 : data.altText) && !alt ? data == null ? void 0 : data.altText : alt || "";
+      const nAspectRatio = aspectRatio ? aspectRatio : normalizedData.unitsMatch ? [
+        getNormalizedFixedUnit(normalizedData.width),
+        getNormalizedFixedUnit(normalizedData.height)
+      ].join("/") : void 0;
+      return {
+        width: nWidth,
+        height: nHeight,
+        src: nSrc,
+        alt: nAlt,
+        aspectRatio: nAspectRatio
+      };
+    }, [
       width,
-      height
-    }
-  });
-  let finalSrc = data.url;
-  if (loader) {
-    finalSrc = loader({
-      ...loaderOptions,
-      src: data.url,
-      width: imgElementWidth,
-      height: imgElementHeight
-    });
-    if (typeof finalSrc !== "string" || !finalSrc) {
-      throw new Error(
-        `<Image/>: 'loader' did not return a valid string. Image: ${data.id ?? data.url}`
+      height,
+      src,
+      data,
+      alt,
+      aspectRatio,
+      normalizedData,
+      passthroughProps == null ? void 0 : passthroughProps.key
+    ]);
+    const { intervals, startingWidth, incrementSize, placeholderWidth } = srcSetOptions;
+    const imageWidths = React__namespace.useMemo(() => {
+      return generateImageWidths(
+        width,
+        intervals,
+        startingWidth,
+        incrementSize
+      );
+    }, [width, intervals, startingWidth, incrementSize]);
+    const fixedWidth = isFixedWidth(normalizedProps.width);
+    if (fixedWidth) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FixedWidthImage,
+        {
+          aspectRatio,
+          crop,
+          decoding,
+          height,
+          imageWidths,
+          loader,
+          loading,
+          normalizedProps,
+          passthroughProps,
+          ref,
+          width
+        }
+      );
+    } else {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        FluidImage,
+        {
+          aspectRatio,
+          crop,
+          decoding,
+          imageWidths,
+          loader,
+          loading,
+          normalizedProps,
+          passthroughProps,
+          placeholderWidth,
+          ref,
+          sizes
+        }
       );
     }
   }
-  const maxWidth = width && imgElementWidth && width < imgElementWidth ? width : imgElementWidth;
-  const finalSrcset = rest.srcSet ?? internalImageSrcSet({
-    ...loaderOptions,
-    widths,
-    src: data.url,
-    width: maxWidth,
-    height: imgElementHeight,
-    loader
-  });
+);
+function FixedWidthImage({
+  aspectRatio,
+  crop,
+  decoding,
+  height,
+  imageWidths,
+  loader = shopifyLoader,
+  loading,
+  normalizedProps,
+  passthroughProps,
+  ref,
+  width
+}) {
+  const fixed = React__namespace.useMemo(() => {
+    const intWidth = getNormalizedFixedUnit(width);
+    const intHeight = getNormalizedFixedUnit(height);
+    const fixedAspectRatio = aspectRatio ? aspectRatio : unitsMatch(normalizedProps.width, normalizedProps.height) ? [intWidth, intHeight].join("/") : normalizedProps.aspectRatio ? normalizedProps.aspectRatio : void 0;
+    const sizesArray = imageWidths === void 0 ? void 0 : generateSizes(imageWidths, fixedAspectRatio, crop);
+    const fixedHeight = intHeight ? intHeight : fixedAspectRatio && intWidth ? intWidth * (parseAspectRatio(fixedAspectRatio) ?? 1) : void 0;
+    const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);
+    const src = loader({
+      src: normalizedProps.src,
+      width: intWidth,
+      height: fixedHeight,
+      crop: normalizedProps.height === "auto" ? void 0 : crop
+    });
+    return {
+      width: intWidth,
+      aspectRatio: fixedAspectRatio,
+      height: fixedHeight,
+      srcSet,
+      src
+    };
+  }, [aspectRatio, crop, height, imageWidths, loader, normalizedProps, width]);
   return /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
-      id: data.id ?? "",
-      alt: data.altText ?? rest.alt ?? "",
-      loading: loading ?? "lazy",
-      ...rest,
-      src: finalSrc,
-      width: imgElementWidth ?? void 0,
-      height: imgElementHeight ?? void 0,
-      srcSet: finalSrcset,
-      decoding
+      ref,
+      alt: normalizedProps.alt,
+      decoding,
+      height: fixed.height,
+      loading,
+      src: fixed.src,
+      srcSet: fixed.srcSet,
+      width: fixed.width,
+      style: {
+        aspectRatio: fixed.aspectRatio,
+        ...passthroughProps.style
+      },
+      ...passthroughProps
     }
   );
 }
-function internalImageSrcSet({
-  src,
-  width,
+function FluidImage({
   crop,
-  scale,
-  widths,
-  loader,
-  height
+  decoding,
+  imageWidths,
+  loader = shopifyLoader,
+  loading,
+  normalizedProps,
+  passthroughProps,
+  placeholderWidth,
+  ref,
+  sizes
 }) {
-  const hasCustomWidths = widths && Array.isArray(widths);
-  if (hasCustomWidths && widths.some((size) => isNaN(size))) {
-    throw new Error(
-      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`
-    );
+  const fluid = React__namespace.useMemo(() => {
+    const sizesArray = imageWidths === void 0 ? void 0 : generateSizes(imageWidths, normalizedProps.aspectRatio, crop);
+    const placeholderHeight = normalizedProps.aspectRatio && placeholderWidth ? placeholderWidth * (parseAspectRatio(normalizedProps.aspectRatio) ?? 1) : void 0;
+    const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);
+    const src = loader({
+      src: normalizedProps.src,
+      width: placeholderWidth,
+      height: placeholderHeight,
+      crop
+    });
+    return {
+      placeholderHeight,
+      srcSet,
+      src
+    };
+  }, [crop, imageWidths, loader, normalizedProps, placeholderWidth]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      ref,
+      alt: normalizedProps.alt,
+      decoding,
+      height: fluid.placeholderHeight,
+      loading,
+      sizes,
+      src: fluid.src,
+      srcSet: fluid.srcSet,
+      width: placeholderWidth,
+      ...passthroughProps,
+      style: {
+        width: normalizedProps.width,
+        aspectRatio: normalizedProps.aspectRatio,
+        ...passthroughProps.style
+      }
+    }
+  );
+}
+function shopifyLoader({ src, width, height, crop }) {
+  if (!src) {
+    return "";
+  }
+  const url = new URL(src);
+  if (width) {
+    url.searchParams.append("width", Math.round(width).toString());
+  }
+  if (height) {
+    url.searchParams.append("height", Math.round(height).toString());
+  }
+  if (crop) {
+    url.searchParams.append("crop", crop);
+  }
+  return url.href;
+}
+function unitsMatch(width = "100%", height = "auto") {
+  return getUnitValueParts(width.toString()).unit === getUnitValueParts(height.toString()).unit;
+}
+function getUnitValueParts(value) {
+  const unit = value.replace(/[0-9.]/g, "");
+  const number = parseFloat(value.replace(unit, ""));
+  return {
+    unit: unit === "" ? number === void 0 ? "auto" : "px" : unit,
+    number
+  };
+}
+function getNormalizedFixedUnit(value) {
+  if (value === void 0) {
+    return;
+  }
+  const { unit, number } = getUnitValueParts(value.toString());
+  switch (unit) {
+    case "em":
+      return number * 16;
+    case "rem":
+      return number * 16;
+    case "px":
+      return number;
+    case "":
+      return number;
+    default:
+      return;
   }
-  let aspectRatio = 1;
-  if (width && height) {
-    aspectRatio = Number(height) / Number(width);
+}
+function isFixedWidth(width) {
+  const fixedEndings = /\d(px|em|rem)$/;
+  return typeof width === "number" || typeof width === "string" && fixedEndings.test(width);
+}
+function generateSrcSet(src, sizesArray, loader = shopifyLoader) {
+  if (!src) {
+    return "";
   }
-  let setSizes = hasCustomWidths ? widths : imageSize.IMG_SRC_SET_SIZES;
-  if (!hasCustomWidths && width && width < imageSize.IMG_SRC_SET_SIZES[imageSize.IMG_SRC_SET_SIZES.length - 1]) {
-    setSizes = imageSize.IMG_SRC_SET_SIZES.filter((size) => size <= width);
+  if ((sizesArray == null ? void 0 : sizesArray.length) === 0 || !sizesArray) {
+    return src;
   }
-  const srcGenerator = loader ? loader : imageSize.addImageSizeParametersToUrl;
-  return setSizes.map(
-    (size) => `${srcGenerator({
+  return sizesArray.map(
+    (size, i) => `${loader({
       src,
-      width: size,
-      // height is not applied if there is no crop
-      // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size
-      height: crop ? Number(size) * aspectRatio : void 0,
-      crop,
-      scale
-    })} ${size ?? ""}w`
-  ).join(", ");
+      width: size.width,
+      height: size.height,
+      crop: size.crop
+    })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`
+  ).join(`, `);
+}
+function generateImageWidths(width = "100%", intervals, startingWidth, incrementSize) {
+  const responsive = Array.from(
+    { length: intervals },
+    (_, i) => i * incrementSize + startingWidth
+  );
+  const fixed = Array.from(
+    { length: 3 },
+    (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0)
+  );
+  return isFixedWidth(width) ? fixed : responsive;
+}
+function parseAspectRatio(aspectRatio) {
+  if (!aspectRatio)
+    return;
+  const [width, height] = aspectRatio.split("/");
+  return 1 / (Number(width) / Number(height));
+}
+function generateSizes(imageWidths, aspectRatio, crop = "center") {
+  if (!imageWidths)
+    return;
+  const sizes = imageWidths.map((width) => {
+    return {
+      width,
+      height: aspectRatio ? width * (parseAspectRatio(aspectRatio) ?? 1) : void 0,
+      crop
+    };
+  });
+  return sizes;
 }
+exports.IMAGE_FRAGMENT = IMAGE_FRAGMENT;
 exports.Image = Image;
+exports.generateImageWidths = generateImageWidths;
+exports.generateSizes = generateSizes;
+exports.generateSrcSet = generateSrcSet;
+exports.parseAspectRatio = parseAspectRatio;
+exports.shopifyLoader = shopifyLoader;
 //# sourceMappingURL=Image.js.map

package/dist/node-prod/Image.js.map

@@ -1 +1 @@
-{"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  getShopifyImageDimensions,\n  shopifyImageLoader,\n  addImageSizeParametersToUrl,\n  IMG_SRC_SET_SIZES,\n} from './image-size.js';\nimport type {Image as ImageType} from './storefront-api-types.js';\nimport type {PartialDeep, Simplify} from 'type-fest';\n\ntype HtmlImageProps = React.ImgHTMLAttributes<HTMLImageElement>;\n\nexport type ShopifyLoaderOptions = {\n  crop?: 'top' | 'bottom' | 'left' | 'right' | 'center';\n  scale?: 2 | 3;\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  height?: HtmlImageProps['height'] | ImageType['height'];\n};\nexport type ShopifyLoaderParams = Simplify<ShopifyLoaderOptions & ImageSrc>;\n\ntype ImageSrc = {\n  src: ImageType['url'];\n};\n\nexport type ShopifyImageProps = Omit<HtmlImageProps, 'src'> &\n  ShopifyImageBaseProps;\n\ntype ShopifyImageBaseProps = {\n  /** An object with fields that correspond to the Storefront API's\n   * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image).\n   * The `data` prop is required.\n   */\n  data: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A custom function that generates the image URL. Parameters passed in\n   * are `ShopifyLoaderParams`\n   */\n  loader?: (params: ShopifyLoaderParams) => string;\n  /** An object of `loader` function options. For example, if the `loader` function\n   * requires a `scale` option, then the value can be a property of the\n   * `loaderOptions` object (for example, `{scale: 2}`). The object shape is `ShopifyLoaderOptions`.\n   */\n  loaderOptions?: ShopifyLoaderOptions;\n  /**\n   * `src` isn't used, and should instead be passed as part of the `data` object\n   */\n  src?: never;\n  /**\n   * An array of pixel widths to overwrite the default generated srcset. For example, `[300, 600, 800]`.\n   */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * The `Image` component renders an image for the Storefront API's\n * [Image object](https://shopify.dev/api/storefront/reference/common-objects/image) by using the `data` prop. You can [customize this component](https://shopify.dev/api/hydrogen/components#customizing-hydrogen-components) using passthrough props.\n *\n * An image's width and height are determined using the following priority list:\n * 1. The width and height values for the `loaderOptions` prop\n * 2. The width and height values for bare props\n * 3. The width and height values for the `data` prop\n *\n * If only one of `width` or `height` are defined, then the other will attempt to be calculated based on the image's aspect ratio,\n * provided that both `data.width` and `data.height` are available. If `data.width` and `data.height` aren't available, then the aspect ratio cannot be determined and the missing\n * value will remain as `null`\n */\nexport function Image({\n  data,\n  width,\n  height,\n  loading,\n  loader = shopifyImageLoader,\n  loaderOptions,\n  widths,\n  decoding = 'async',\n  ...rest\n}: ShopifyImageProps): JSX.Element | null {\n  if (!data.url) {\n    const missingUrlError = `<Image/>: the 'data' prop requires the 'url' property. Image: ${\n      data.id ?? 'no ID provided'\n    }`;\n\n    if (__HYDROGEN_DEV__) {\n      throw new Error(missingUrlError);\n    } else {\n      console.error(missingUrlError);\n    }\n\n    return null;\n  }\n\n  if (__HYDROGEN_DEV__ && !data.altText && !rest.alt) {\n    console.warn(\n      `<Image/>: the 'data' prop should have the 'altText' property, or the 'alt' prop, and one of them should not be empty. Image: ${\n        data.id ?? data.url\n      }`,\n    );\n  }\n\n  const {width: imgElementWidth, height: imgElementHeight} =\n    getShopifyImageDimensions({\n      data,\n      loaderOptions,\n      elementProps: {\n        width,\n        height,\n      },\n    });\n\n  if (__HYDROGEN_DEV__ && (!imgElementWidth || !imgElementHeight)) {\n    console.warn(\n      `<Image/>: the 'data' prop requires either 'width' or 'data.width', and 'height' or 'data.height' properties. Image: ${\n        data.id ?? data.url\n      }`,\n    );\n  }\n\n  let finalSrc = data.url;\n\n  if (loader) {\n    finalSrc = loader({\n      ...loaderOptions,\n      src: data.url,\n      width: imgElementWidth,\n      height: imgElementHeight,\n    });\n    if (typeof finalSrc !== 'string' || !finalSrc) {\n      throw new Error(\n        `<Image/>: 'loader' did not return a valid string. Image: ${\n          data.id ?? data.url\n        }`,\n      );\n    }\n  }\n\n  // determining what the intended width of the image is. For example, if the width is specified and lower than the image width, then that is the maximum image width\n  // to prevent generating a srcset with widths bigger than needed or to generate images that would distort because of being larger than original\n  const maxWidth =\n    width && imgElementWidth && width < imgElementWidth\n      ? width\n      : imgElementWidth;\n  const finalSrcset =\n    rest.srcSet ??\n    internalImageSrcSet({\n      ...loaderOptions,\n      widths,\n      src: data.url,\n      width: maxWidth,\n      height: imgElementHeight,\n      loader,\n    });\n\n  /* eslint-disable hydrogen/prefer-image-component */\n  return (\n    <img\n      id={data.id ?? ''}\n      alt={data.altText ?? rest.alt ?? ''}\n      loading={loading ?? 'lazy'}\n      {...rest}\n      src={finalSrc}\n      width={imgElementWidth ?? undefined}\n      height={imgElementHeight ?? undefined}\n      srcSet={finalSrcset}\n      decoding={decoding}\n    />\n  );\n  /* eslint-enable hydrogen/prefer-image-component */\n}\n\ntype InternalShopifySrcSetGeneratorsParams = Simplify<\n  ShopifyLoaderOptions & {\n    src: ImageType['url'];\n    widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n    loader?: (params: ShopifyLoaderParams) => string;\n  }\n>;\nfunction internalImageSrcSet({\n  src,\n  width,\n  crop,\n  scale,\n  widths,\n  loader,\n  height,\n}: InternalShopifySrcSetGeneratorsParams): string {\n  const hasCustomWidths = widths && Array.isArray(widths);\n  if (hasCustomWidths && widths.some((size) => isNaN(size as number))) {\n    throw new Error(\n      `<Image/>: the 'widths' must be an array of numbers. Image: ${src}`,\n    );\n  }\n\n  let aspectRatio = 1;\n  if (width && height) {\n    aspectRatio = Number(height) / Number(width);\n  }\n\n  let setSizes = hasCustomWidths ? widths : IMG_SRC_SET_SIZES;\n  if (\n    !hasCustomWidths &&\n    width &&\n    width < IMG_SRC_SET_SIZES[IMG_SRC_SET_SIZES.length - 1]\n  ) {\n    setSizes = IMG_SRC_SET_SIZES.filter((size) => size <= width);\n  }\n  const srcGenerator = loader ? loader : addImageSizeParametersToUrl;\n  return setSizes\n    .map(\n      (size) =>\n        `${srcGenerator({\n          src,\n          width: size,\n          // height is not applied if there is no crop\n          // if there is crop, then height is applied as a ratio of the original width + height aspect ratio * size\n          height: crop ? Number(size) * aspectRatio : undefined,\n          crop,\n          scale,\n        })} ${size ?? ''}w`,\n    )\n    .join(', ');\n}\n"],"names":["shopifyImageLoader","getShopifyImageDimensions","jsx","IMG_SRC_SET_SIZES","addImageSizeParametersToUrl"],"mappings":";;;;AAiEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,SAASA,UAAA;AAAA,EACT;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,GAAG;AACL,GAA0C;AACpC,MAAA,CAAC,KAAK,KAAK;AACP,UAAA,kBAAkB,iEACtB,KAAK,MAAM;AAKN;AACL,cAAQ,MAAM,eAAe;AAAA,IAC/B;AAEO,WAAA;AAAA,EACT;AAUA,QAAM,EAAC,OAAO,iBAAiB,QAAQ,iBAAA,IACrCC,UAAAA,0BAA0B;AAAA,IACxB;AAAA,IACA;AAAA,IACA,cAAc;AAAA,MACZ;AAAA,MACA;AAAA,IACF;AAAA,EAAA,CACD;AAUH,MAAI,WAAW,KAAK;AAEpB,MAAI,QAAQ;AACV,eAAW,OAAO;AAAA,MAChB,GAAG;AAAA,MACH,KAAK,KAAK;AAAA,MACV,OAAO;AAAA,MACP,QAAQ;AAAA,IAAA,CACT;AACD,QAAI,OAAO,aAAa,YAAY,CAAC,UAAU;AAC7C,YAAM,IAAI;AAAA,QACR,4DACE,KAAK,MAAM,KAAK;AAAA,MAAA;AAAA,IAGtB;AAAA,EACF;AAIA,QAAM,WACJ,SAAS,mBAAmB,QAAQ,kBAChC,QACA;AACA,QAAA,cACJ,KAAK,UACL,oBAAoB;AAAA,IAClB,GAAG;AAAA,IACH;AAAA,IACA,KAAK,KAAK;AAAA,IACV,OAAO;AAAA,IACP,QAAQ;AAAA,IACR;AAAA,EAAA,CACD;AAID,SAAAC,2BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI,KAAK,MAAM;AAAA,MACf,KAAK,KAAK,WAAW,KAAK,OAAO;AAAA,MACjC,SAAS,WAAW;AAAA,MACnB,GAAG;AAAA,MACJ,KAAK;AAAA,MACL,OAAO,mBAAmB;AAAA,MAC1B,QAAQ,oBAAoB;AAAA,MAC5B,QAAQ;AAAA,MACR;AAAA,IAAA;AAAA,EAAA;AAIN;AASA,SAAS,oBAAoB;AAAA,EAC3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAAkD;AAChD,QAAM,kBAAkB,UAAU,MAAM,QAAQ,MAAM;AAClD,MAAA,mBAAmB,OAAO,KAAK,CAAC,SAAS,MAAM,IAAc,CAAC,GAAG;AACnE,UAAM,IAAI;AAAA,MACR,8DAA8D;AAAA,IAAA;AAAA,EAElE;AAEA,MAAI,cAAc;AAClB,MAAI,SAAS,QAAQ;AACnB,kBAAc,OAAO,MAAM,IAAI,OAAO,KAAK;AAAA,EAC7C;AAEI,MAAA,WAAW,kBAAkB,SAASC;AAExC,MAAA,CAAC,mBACD,SACA,QAAQA,4BAAkBA,4BAAkB,SAAS,CAAC,GACtD;AACA,eAAWA,UAAkB,kBAAA,OAAO,CAAC,SAAS,QAAQ,KAAK;AAAA,EAC7D;AACM,QAAA,eAAe,SAAS,SAASC;AACvC,SAAO,SACJ;AAAA,IACC,CAAC,SACC,GAAG,aAAa;AAAA,MACd;AAAA,MACA,OAAO;AAAA;AAAA;AAAA,MAGP,QAAQ,OAAO,OAAO,IAAI,IAAI,cAAc;AAAA,MAC5C;AAAA,MACA;AAAA,IACD,CAAA,KAAK,QAAQ;AAAA,EAAA,EAEjB,KAAK,IAAI;AACd;;"}
+{"version":3,"file":"Image.js","sources":["../../src/Image.tsx"],"sourcesContent":["/* eslint-disable eslint-comments/disable-enable-pair */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\n/* eslint-disable hydrogen/prefer-image-component */\nimport * as React from 'react';\nimport type {PartialDeep} from 'type-fest';\nimport type {Image as ImageType} from './storefront-api-types.js';\n\n/*\n * An optional prop you can use to change the\n * default srcSet generation behaviour\n */\ntype SrcSetOptions = {\n  intervals: number;\n  startingWidth: number;\n  incrementSize: number;\n  placeholderWidth: number;\n};\n\ntype HtmlImageProps = React.DetailedHTMLProps<\n  React.ImgHTMLAttributes<HTMLImageElement>,\n  HTMLImageElement\n>;\n\ntype NormalizedProps = {\n  alt: string;\n  aspectRatio: string | undefined;\n  height: string;\n  src: string | undefined;\n  width: string;\n};\n\nexport type LoaderParams = {\n  /** The base URL of the image */\n  src?: ImageType['url'];\n  /** The URL param that controls width */\n  width?: number;\n  /** The URL param that controls height */\n  height?: number;\n  /** The URL param that controls the cropping region */\n  crop?: Crop;\n};\n\nexport type Loader = (params: LoaderParams) => string;\n\n/** Legacy type for backwards compatibility *\n * @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop. Or pass a custom `loader` with `LoaderParams` */\nexport type ShopifyLoaderOptions = {\n  /** The base URL of the image */\n  src?: ImageType['url'];\n  /** The URL param that controls width */\n  width?: HtmlImageProps['width'] | ImageType['width'];\n  /** The URL param that controls height */\n  height?: HtmlImageProps['height'] | ImageType['height'];\n  /** The URL param that controls the cropping region */\n  crop?: Crop;\n};\n\n/*\n * @TODO: Expand to include focal point support; and/or switch this to be an SF API type\n */\ntype Crop = 'center' | 'top' | 'bottom' | 'left' | 'right';\n\nexport type HydrogenImageProps = React.ComponentPropsWithRef<'img'> &\n  HydrogenImageBaseProps;\n\ntype HydrogenImageBaseProps = {\n  /** The aspect ratio of the image, in the format of `width/height`.\n   *\n   * @example\n   * ```\n   * <Image data={productImage} aspectRatio=\"4/5\" />\n   * ```\n   */\n  aspectRatio?: string;\n  /** The crop position of the image.\n   *\n   * @remarks\n   * In the event that AspectRatio is set, without specifying a crop,\n   * the Shopify CDN won't return the expected image.\n   *\n   * @defaultValue `center`\n   */\n  crop?: Crop;\n  /** Data mapping to the [Storefront API `Image`](https://shopify.dev/docs/api/storefront/2023-04/objects/Image) object. Must be an Image object.\n   *\n   * @example\n   * ```\n   * import {IMAGE_FRAGMENT, Image} from '@shopify/hydrogen';\n   *\n   * export const IMAGE_QUERY = `#graphql\n   * ${IMAGE_FRAGMENT}\n   * query {\n   *   product {\n   *     featuredImage {\n   *       ...Image\n   *     }\n   *   }\n   * }`\n   *\n   * <Image\n   *   data={productImage}\n   *   sizes=\"(min-width: 45em) 50vw, 100vw\"\n   *   aspectRatio=\"4/5\"\n   * />\n   * ```\n   *\n   * Image: {@link https://shopify.dev/api/storefront/reference/common-objects/image}\n   */\n  data?: PartialDeep<ImageType, {recurseIntoArrays: true}>;\n  /** A function that returns a URL string for an image.\n   *\n   * @remarks\n   * By default, this uses Shopify’s CDN {@link https://cdn.shopify.com/} but you can provide\n   * your own function to use a another provider, as long as they support URL based image transformations.\n   */\n  loader?: Loader;\n  /** An optional prop you can use to change the default srcSet generation behaviour */\n  srcSetOptions?: SrcSetOptions;\n  /** @deprecated Use `crop`, `width`, `height`, and `src` props, and/or `data` prop */\n  loaderOptions?: ShopifyLoaderOptions;\n  /** @deprecated Autocalculated, use only `width` prop, or srcSetOptions */\n  widths?: (HtmlImageProps['width'] | ImageType['width'])[];\n};\n\n/**\n * A Storefront API GraphQL fragment that can be used to query for an image.\n */\nexport const IMAGE_FRAGMENT = `#graphql\n  fragment Image on Image {\n    altText\n    url\n    width\n    height\n  }\n`;\n\n/**\n * Hydrgen’s Image component is a wrapper around the HTML image element.\n * It supports the same props as the HTML `img` element, but automatically\n * generates the srcSet and sizes attributes for you. For most use cases,\n * you’ll want to set the `aspectRatio` prop to ensure the image is sized\n * correctly.\n *\n * @remarks\n * - `decoding` is set to `async` by default.\n * - `loading` is set to `lazy` by default.\n * - `alt` will automatically be set to the `altText` from the Storefront API if passed in the `data` prop\n * - `src` will automatically be set to the `url` from the Storefront API if passed in the `data` prop\n *\n * @example\n * A responsive image with a 4:5 aspect ratio:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   aspectRatio=\"4/5\"\n *   sizes=\"(min-width: 45em) 40vw, 100vw\"\n * />\n * ```\n * @example\n * A fixed size image:\n * ```\n * <Image\n *   data={product.featuredImage}\n *   width={100}\n *   height={100}\n * />\n * ```\n *\n * {@link https://shopify.dev/docs/api/hydrogen-react/components/image}\n */\nexport const Image = React.forwardRef<HTMLImageElement, HydrogenImageProps>(\n  (\n    {\n      alt,\n      aspectRatio,\n      crop = 'center',\n      data,\n      decoding = 'async',\n      height = 'auto',\n      loader = shopifyLoader,\n      loaderOptions,\n      loading = 'lazy',\n      sizes,\n      src,\n      srcSetOptions = {\n        intervals: 15,\n        startingWidth: 200,\n        incrementSize: 200,\n        placeholderWidth: 100,\n      },\n      width = '100%',\n      widths,\n      ...passthroughProps\n    },\n    ref,\n  ) => {\n    /*\n     * Deprecated Props from original Image component\n     */\n    if (__HYDROGEN_DEV__) {\n      if (loaderOptions) {\n        console.warn(\n          [\n            `Deprecated property from original Image component in use:`,\n            `Use the \\`crop\\`, \\`width\\`, \\`height\\`, and src props, or`,\n            `the \\`data\\` prop to achieve the same result. Image used is ${\n              src || data?.url || passthroughProps?.key || 'unknown'\n            }`,\n          ].join(' '),\n        );\n      }\n\n      if (widths) {\n        console.warn(\n          [\n            `Deprecated property from original Image component in use:`,\n            `\\`widths\\` are now calculated automatically based on the`,\n            `config and width props. Image used is ${\n              src || data?.url || passthroughProps?.key || 'unknown'\n            }`,\n          ].join(' '),\n        );\n      }\n    }\n\n    /*\n     * Gets normalized values for width, height from data  prop\n     */\n    const normalizedData = React.useMemo(() => {\n      /* Only use data width if height is also set */\n      const dataWidth: number | undefined =\n        data?.width && data?.height ? data?.width : undefined;\n\n      const dataHeight: number | undefined =\n        data?.width && data?.height ? data?.height : undefined;\n\n      return {\n        width: dataWidth,\n        height: dataHeight,\n        unitsMatch: Boolean(unitsMatch(dataWidth, dataHeight)),\n      };\n    }, [data]);\n\n    /*\n     * Gets normalized values for width, height, src, alt, and aspectRatio props\n     * supporting the presence of `data` in addition to flat props.\n     */\n    const normalizedProps = React.useMemo(() => {\n      const nWidthProp: string | number = width || '100%';\n      const widthParts = getUnitValueParts(nWidthProp.toString());\n      const nWidth = `${widthParts.number}${widthParts.unit}`;\n\n      const autoHeight = height === undefined || height === null;\n      const heightParts = autoHeight\n        ? null\n        : getUnitValueParts(height.toString());\n\n      const fixedHeight = heightParts\n        ? `${heightParts.number}${heightParts.unit}`\n        : '';\n\n      const nHeight = autoHeight ? 'auto' : fixedHeight;\n\n      const nSrc: string | undefined = src || data?.url;\n\n      if (__HYDROGEN_DEV__ && !nSrc) {\n        console.warn(\n          `No src or data.url provided to Image component.`,\n          passthroughProps?.key || '',\n        );\n      }\n\n      const nAlt: string = data?.altText && !alt ? data?.altText : alt || '';\n\n      const nAspectRatio: string | undefined = aspectRatio\n        ? aspectRatio\n        : normalizedData.unitsMatch\n        ? [\n            getNormalizedFixedUnit(normalizedData.width),\n            getNormalizedFixedUnit(normalizedData.height),\n          ].join('/')\n        : undefined;\n\n      return {\n        width: nWidth,\n        height: nHeight,\n        src: nSrc,\n        alt: nAlt,\n        aspectRatio: nAspectRatio,\n      };\n    }, [\n      width,\n      height,\n      src,\n      data,\n      alt,\n      aspectRatio,\n      normalizedData,\n      passthroughProps?.key,\n    ]);\n\n    const {intervals, startingWidth, incrementSize, placeholderWidth} =\n      srcSetOptions;\n\n    /*\n     * This function creates an array of widths to be used in srcSet\n     */\n    const imageWidths = React.useMemo(() => {\n      return generateImageWidths(\n        width,\n        intervals,\n        startingWidth,\n        incrementSize,\n      );\n    }, [width, intervals, startingWidth, incrementSize]);\n\n    const fixedWidth = isFixedWidth(normalizedProps.width);\n\n    if (__HYDROGEN_DEV__ && !sizes && !fixedWidth) {\n      console.warn(\n        [\n          'No sizes prop provided to Image component,',\n          'you may be loading unnecessarily large images.',\n          `Image used is ${\n            src || data?.url || passthroughProps?.key || 'unknown'\n          }`,\n        ].join(' '),\n      );\n    }\n\n    /*\n     * We check to see whether the image is fixed width or not,\n     * if fixed, we still provide a srcSet, but only to account for\n     * different pixel densities.\n     */\n    if (fixedWidth) {\n      return (\n        <FixedWidthImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          height={height}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          ref={ref}\n          width={width}\n        />\n      );\n    } else {\n      return (\n        <FluidImage\n          aspectRatio={aspectRatio}\n          crop={crop}\n          decoding={decoding}\n          imageWidths={imageWidths}\n          loader={loader}\n          loading={loading}\n          normalizedProps={normalizedProps}\n          passthroughProps={passthroughProps}\n          placeholderWidth={placeholderWidth}\n          ref={ref}\n          sizes={sizes}\n        />\n      );\n    }\n  },\n);\n\ntype FixedImageExludedProps =\n  | 'data'\n  | 'loader'\n  | 'loaderOptions'\n  | 'sizes'\n  | 'srcSetOptions'\n  | 'widths';\n\ntype FixedWidthImageProps = Omit<HydrogenImageProps, FixedImageExludedProps> & {\n  loader: Loader;\n  passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n  normalizedProps: NormalizedProps;\n  imageWidths: number[];\n  ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FixedWidthImage({\n  aspectRatio,\n  crop,\n  decoding,\n  height,\n  imageWidths,\n  loader = shopifyLoader,\n  loading,\n  normalizedProps,\n  passthroughProps,\n  ref,\n  width,\n}: FixedWidthImageProps) {\n  const fixed = React.useMemo(() => {\n    const intWidth: number | undefined = getNormalizedFixedUnit(width);\n    const intHeight: number | undefined = getNormalizedFixedUnit(height);\n\n    /*\n     * The aspect ratio for fixed width images is taken from the explicitly\n     * set prop, but if that's not present, and both width and height are\n     * set, we calculate the aspect ratio from the width and height—as\n     * long as they share the same unit type (e.g. both are 'px').\n     */\n    const fixedAspectRatio = aspectRatio\n      ? aspectRatio\n      : unitsMatch(normalizedProps.width, normalizedProps.height)\n      ? [intWidth, intHeight].join('/')\n      : normalizedProps.aspectRatio\n      ? normalizedProps.aspectRatio\n      : undefined;\n\n    /*\n     * The Sizes Array generates an array of all of the parts\n     * that make up the srcSet, including the width, height, and crop\n     */\n    const sizesArray =\n      imageWidths === undefined\n        ? undefined\n        : generateSizes(imageWidths, fixedAspectRatio, crop);\n\n    const fixedHeight = intHeight\n      ? intHeight\n      : fixedAspectRatio && intWidth\n      ? intWidth * (parseAspectRatio(fixedAspectRatio) ?? 1)\n      : undefined;\n\n    const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n    const src = loader({\n      src: normalizedProps.src,\n      width: intWidth,\n      height: fixedHeight,\n      crop: normalizedProps.height === 'auto' ? undefined : crop,\n    });\n\n    return {\n      width: intWidth,\n      aspectRatio: fixedAspectRatio,\n      height: fixedHeight,\n      srcSet,\n      src,\n    };\n  }, [aspectRatio, crop, height, imageWidths, loader, normalizedProps, width]);\n\n  return (\n    <img\n      ref={ref}\n      alt={normalizedProps.alt}\n      decoding={decoding}\n      height={fixed.height}\n      loading={loading}\n      src={fixed.src}\n      srcSet={fixed.srcSet}\n      width={fixed.width}\n      style={{\n        aspectRatio: fixed.aspectRatio,\n        ...passthroughProps.style,\n      }}\n      {...passthroughProps}\n    />\n  );\n}\n\ntype FluidImageExcludedProps =\n  | 'data'\n  | 'width'\n  | 'height'\n  | 'loader'\n  | 'loaderOptions'\n  | 'srcSetOptions';\n\ntype FluidImageProps = Omit<HydrogenImageProps, FluidImageExcludedProps> & {\n  imageWidths: number[];\n  loader: Loader;\n  normalizedProps: NormalizedProps;\n  passthroughProps: React.ImgHTMLAttributes<HTMLImageElement>;\n  placeholderWidth: number;\n  ref: React.Ref<HTMLImageElement>;\n};\n\nfunction FluidImage({\n  crop,\n  decoding,\n  imageWidths,\n  loader = shopifyLoader,\n  loading,\n  normalizedProps,\n  passthroughProps,\n  placeholderWidth,\n  ref,\n  sizes,\n}: FluidImageProps) {\n  const fluid = React.useMemo(() => {\n    const sizesArray =\n      imageWidths === undefined\n        ? undefined\n        : generateSizes(imageWidths, normalizedProps.aspectRatio, crop);\n\n    const placeholderHeight =\n      normalizedProps.aspectRatio && placeholderWidth\n        ? placeholderWidth *\n          (parseAspectRatio(normalizedProps.aspectRatio) ?? 1)\n        : undefined;\n\n    const srcSet = generateSrcSet(normalizedProps.src, sizesArray, loader);\n\n    const src = loader({\n      src: normalizedProps.src,\n      width: placeholderWidth,\n      height: placeholderHeight,\n      crop,\n    });\n\n    return {\n      placeholderHeight,\n      srcSet,\n      src,\n    };\n  }, [crop, imageWidths, loader, normalizedProps, placeholderWidth]);\n\n  return (\n    <img\n      ref={ref}\n      alt={normalizedProps.alt}\n      decoding={decoding}\n      height={fluid.placeholderHeight}\n      loading={loading}\n      sizes={sizes}\n      src={fluid.src}\n      srcSet={fluid.srcSet}\n      width={placeholderWidth}\n      {...passthroughProps}\n      style={{\n        width: normalizedProps.width,\n        aspectRatio: normalizedProps.aspectRatio,\n        ...passthroughProps.style,\n      }}\n    />\n  );\n}\n\n/**\n * The shopifyLoader function is a simple utility function that takes a src, width,\n * height, and crop and returns a string that can be used as the src for an image.\n * It can be used with the Hydrogen Image component or with the next/image component.\n * (or any others that accept equivalent configuration)\n * @param src - The source URL of the image, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg`\n * @param width - The width of the image, e.g. `100`\n * @param height - The height of the image, e.g. `100`\n * @param crop - The crop of the image, e.g. `center`\n * @returns A Shopify image URL with the correct query parameters, e.g. `https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=100&height=100&crop=center`\n *\n * @example\n * ```\n * shopifyLoader({\n *   src: 'https://cdn.shopify.com/static/sample-images/garnished.jpeg',\n *   width: 100,\n *   height: 100,\n *   crop: 'center',\n * })\n * ```\n */\nexport function shopifyLoader({src, width, height, crop}: LoaderParams) {\n  if (!src) {\n    return '';\n  }\n\n  const url = new URL(src);\n\n  if (width) {\n    url.searchParams.append('width', Math.round(width).toString());\n  }\n\n  if (height) {\n    url.searchParams.append('height', Math.round(height).toString());\n  }\n\n  if (crop) {\n    url.searchParams.append('crop', crop);\n  }\n  return url.href;\n}\n\n/**\n * Checks whether the width and height share the same unit type\n * @param width - The width of the image, e.g. 100% | 10px\n * @param height - The height of the image, e.g. auto | 100px\n * @returns Whether the width and height share the same unit type (boolean)\n */\nfunction unitsMatch(\n  width: string | number = '100%',\n  height: string | number = 'auto',\n): boolean {\n  return (\n    getUnitValueParts(width.toString()).unit ===\n    getUnitValueParts(height.toString()).unit\n  );\n}\n\n/**\n * Given a CSS size, returns the unit and number parts of the value\n * @param value - The CSS size, e.g. 100px\n * @returns The unit and number parts of the value, e.g. \\{unit: 'px', number: 100\\}\n */\nfunction getUnitValueParts(value: string): {unit: string; number: number} {\n  const unit = value.replace(/[0-9.]/g, '');\n  const number = parseFloat(value.replace(unit, ''));\n\n  return {\n    unit: unit === '' ? (number === undefined ? 'auto' : 'px') : unit,\n    number,\n  };\n}\n\n/**\n * Given a value, returns the width of the image as an integer in pixels\n * @param value - The width of the image, e.g. 16px | 1rem | 1em | 16\n * @returns The width of the image in pixels, e.g. 16, or undefined if the value is not a fixed unit\n */\nfunction getNormalizedFixedUnit(value?: string | number): number | undefined {\n  if (value === undefined) {\n    return;\n  }\n\n  const {unit, number} = getUnitValueParts(value.toString());\n\n  switch (unit) {\n    case 'em':\n      return number * 16;\n    case 'rem':\n      return number * 16;\n    case 'px':\n      return number;\n    case '':\n      return number;\n    default:\n      return;\n  }\n}\n\n/**\n * This function checks whether a width is fixed or not.\n * @param width - The width of the image, e.g. 100 | '100px' | '100em' | '100rem'\n * @returns Whether the width is fixed or not\n */\nfunction isFixedWidth(width: string | number): boolean {\n  const fixedEndings = /\\d(px|em|rem)$/;\n  return (\n    typeof width === 'number' ||\n    (typeof width === 'string' && fixedEndings.test(width))\n  );\n}\n\n/**\n * This function generates a srcSet for Shopify images.\n * @param src - The source URL of the image, e.g. https://cdn.shopify.com/static/sample-images/garnished.jpeg\n * @param sizesArray - An array of objects containing the `width`, `height`, and `crop` of the image, e.g. [\\{width: 200, height: 200, crop: 'center'\\}, \\{width: 400, height: 400, crop: 'center'\\}]\n * @param loader - A function that takes a Shopify image URL and returns a Shopify image URL with the correct query parameters\n * @returns A srcSet for Shopify images, e.g. 'https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=200&height=200&crop=center 200w, https://cdn.shopify.com/static/sample-images/garnished.jpeg?width=400&height=400&crop=center 400w'\n */\nexport function generateSrcSet(\n  src?: string,\n  sizesArray?: Array<{width?: number; height?: number; crop?: Crop}>,\n  loader: Loader = shopifyLoader,\n): string {\n  if (!src) {\n    return '';\n  }\n\n  if (sizesArray?.length === 0 || !sizesArray) {\n    return src;\n  }\n\n  return sizesArray\n    .map(\n      (size, i) =>\n        `${loader({\n          src,\n          width: size.width,\n          height: size.height,\n          crop: size.crop,\n        })} ${sizesArray.length === 3 ? `${i + 1}x` : `${size.width ?? 0}w`}`,\n    )\n    .join(`, `);\n}\n\n/**\n * This function generates an array of sizes for Shopify images, for both fixed and responsive images.\n * @param width - The CSS width of the image\n * @param intervals - The number of intervals to generate\n * @param startingWidth - The starting width of the image\n * @param incrementSize - The size of each interval\n * @returns An array of widths\n */\nexport function generateImageWidths(\n  width: string | number = '100%',\n  intervals: number,\n  startingWidth: number,\n  incrementSize: number,\n): number[] {\n  const responsive = Array.from(\n    {length: intervals},\n    (_, i) => i * incrementSize + startingWidth,\n  );\n\n  const fixed = Array.from(\n    {length: 3},\n    (_, i) => (i + 1) * (getNormalizedFixedUnit(width) ?? 0),\n  );\n\n  return isFixedWidth(width) ? fixed : responsive;\n}\n\n/**\n * Simple utility function to convert an aspect ratio CSS string to a decimal, currently only supports values like `1/1`, not `0.5`, or `auto`\n * @param aspectRatio - The aspect ratio of the image, e.g. `1/1`\n * @returns The aspect ratio as a number, e.g. `0.5`\n *\n * {@link https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio}\n */\nexport function parseAspectRatio(aspectRatio?: string): number | undefined {\n  if (!aspectRatio) return;\n  const [width, height] = aspectRatio.split('/');\n  return 1 / (Number(width) / Number(height));\n}\n\n// Generate data needed for Imagery loader\nexport function generateSizes(\n  imageWidths?: number[],\n  aspectRatio?: string,\n  crop: Crop = 'center',\n):\n  | {\n      width: number;\n      height: number | undefined;\n      crop: Crop;\n    }[]\n  | undefined {\n  if (!imageWidths) return;\n  const sizes = imageWidths.map((width: number) => {\n    return {\n      width,\n      height: aspectRatio\n        ? width * (parseAspectRatio(aspectRatio) ?? 1)\n        : undefined,\n      crop,\n    };\n  });\n  return sizes;\n  /*\n    Given:\n      ([100, 200], 1/1, 'center')\n    Returns:\n      [{width: 100, height: 100, crop: 'center'},\n      {width: 200, height: 200, crop: 'center'}]\n  */\n}\n"],"names":["React","jsx"],"mappings":"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"}