@wix/patterns-fields 1.0.0

package/dist/cjs/components/media-gallery/media-preview-modal.js

@@ -0,0 +1,274 @@
+"use strict";
+
+exports.__esModule = true;
+exports.MediaPreviewModal = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
+var _autoFieldTypes = require("../../auto-field-types");
+var _hooks = require("../../hooks");
+var _formMediaGalleryFieldStCss = require("./form-media-gallery-field.st.css.js");
+var _utils = require("./media-gallery-dialog/utils");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-gallery/media-preview-modal.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const MediaPreviewModal = ({
+  isOpen,
+  onClose,
+  value,
+  onRequestMedia,
+  onClearMedia,
+  onDownloadMedia,
+  textKeys,
+  readOnly
+}) => {
+  if (!isOpen || !value) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_designSystem.Modal, {
+    isOpen: true,
+    screen: "full",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 62,
+      columnNumber: 5
+    }
+  }, /*#__PURE__*/_react.default.createElement(MediaPreviewLayout, {
+    src: value,
+    onClose: onClose,
+    textKeys: textKeys,
+    onDownload: onDownloadMedia,
+    onClear: onClearMedia,
+    onReplace: onRequestMedia,
+    readOnly: readOnly,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 63,
+      columnNumber: 7
+    }
+  }));
+};
+exports.MediaPreviewModal = MediaPreviewModal;
+const MediaPreviewLayout = ({
+  src,
+  onClose,
+  textKeys,
+  onDownload,
+  onReplace,
+  onClear,
+  readOnly
+}) => {
+  const {
+    t
+  } = (0, _hooks.useTranslations)();
+  const sources = (0, _react.useMemo)(() => Array.isArray(src) ? src : [src], [src]);
+  const [current, setCurrent] = (0, _react.useState)(sources[0]);
+  const title = (0, _autoFieldTypes.getMediaTitle)(current);
+  const handleDownload = (0, _react.useCallback)(() => {
+    if (sources.length > 1) {
+      onDownload == null || onDownload(current);
+    } else {
+      onDownload == null || onDownload();
+    }
+  }, [sources, onDownload, current]);
+  const prevButtonProps = {
+    tooltipText: t('CMS.mediaGallery.preview.previousItem'),
+    onClick: prevIndex => setCurrent(sources[prevIndex])
+  };
+  const nextButtonProps = {
+    tooltipText: t('CMS.mediaGallery.preview.nextItem'),
+    onClick: nextIndex => setCurrent(sources[nextIndex])
+  };
+  const handleClear = (0, _react.useCallback)(() => {
+    onClear == null || onClear();
+    onClose();
+  }, [onClear, onClose]);
+  return /*#__PURE__*/_react.default.createElement(_designSystem.ModalPreviewLayout, {
+    title: title,
+    prevButtonProps: prevButtonProps,
+    nextButtonProps: nextButtonProps,
+    actions: /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      verticalAlign: "middle",
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 129,
+        columnNumber: 9
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      marginRight: 2,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 130,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.TextButton, {
+      size: "small",
+      skin: "light",
+      prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.DownloadImport, {
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 134,
+          columnNumber: 27
+        }
+      }),
+      onClick: handleDownload,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 131,
+        columnNumber: 13
+      }
+    }, t(textKeys.download))), /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      marginRight: 2,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 140,
+        columnNumber: 11
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Button, {
+      priority: "secondary",
+      size: "small",
+      skin: "light",
+      prefixIcon: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Replace, {
+        __self: void 0,
+        __source: {
+          fileName: _jsxFileName,
+          lineNumber: 145,
+          columnNumber: 27
+        }
+      }),
+      onClick: onReplace,
+      disabled: readOnly,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 141,
+        columnNumber: 13
+      }
+    }, t(textKeys.replace))), onClear && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+      marginRight: 2,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 153,
+        columnNumber: 13
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.Tooltip, {
+      content: t(textKeys.delete),
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 154,
+        columnNumber: 15
+      }
+    }, /*#__PURE__*/_react.default.createElement(_designSystem.IconButton, {
+      priority: "secondary",
+      size: "small",
+      skin: "light",
+      onClick: handleClear,
+      disabled: readOnly,
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 155,
+        columnNumber: 17
+      }
+    }, /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.Delete, {
+      __self: void 0,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 162,
+        columnNumber: 19
+      }
+    }))))),
+    onClose: onClose,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 124,
+      columnNumber: 5
+    }
+  }, sources.map((mediaSrc, i) => /*#__PURE__*/_react.default.createElement(MediaPreviewItem, {
+    key: i,
+    src: mediaSrc,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 172,
+      columnNumber: 9
+    }
+  })));
+};
+const MediaPreviewItem = ({
+  src
+}) => {
+  const [loading, setLoading] = (0, _react.useState)(true);
+  (0, _react.useEffect)(() => setLoading(true), [src]);
+  const onLoad = (0, _react.useCallback)(() => setLoading(false), []);
+  if (!src) return null;
+  const previewURL = (0, _autoFieldTypes.mediaURItoImageURL)(src, window.innerWidth);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, loading && /*#__PURE__*/_react.default.createElement(_designSystem.Box, {
+    align: "center",
+    verticalAlign: "middle",
+    width: "100%",
+    height: "100%",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 191,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement(_designSystem.Loader, {
+    size: "small",
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 192,
+      columnNumber: 11
+    }
+  })), (0, _autoFieldTypes.isMediaVideoURI)(src) ? /*#__PURE__*/_react.default.createElement("video", {
+    style: {
+      display: loading ? 'none' : 'initial'
+    },
+    poster: previewURL,
+    onLoadedData: onLoad,
+    controls: true,
+    className: _formMediaGalleryFieldStCss.classes.previewVideo,
+    autoPlay: true,
+    loop: true,
+    muted: true,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 196,
+      columnNumber: 9
+    }
+  }, /*#__PURE__*/_react.default.createElement("source", {
+    src: (0, _utils.convertMediaURIToPreviewVideoURL)(src),
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 206,
+      columnNumber: 11
+    }
+  })) : /*#__PURE__*/_react.default.createElement(_designSystem.Image, {
+    style: {
+      display: loading ? 'none' : 'initial'
+    },
+    className: _formMediaGalleryFieldStCss.classes.previewImage,
+    onLoad: onLoad,
+    src: previewURL,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 209,
+      columnNumber: 9
+    }
+  }));
+};
+//# sourceMappingURL=media-preview-modal.js.map

package/dist/cjs/components/media-gallery/media-preview-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_wixUiIconsCommon","_autoFieldTypes","_hooks","_formMediaGalleryFieldStCss","_utils","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MediaPreviewModal","isOpen","onClose","value","onRequestMedia","onClearMedia","onDownloadMedia","textKeys","readOnly","createElement","Modal","screen","__self","__source","fileName","lineNumber","columnNumber","MediaPreviewLayout","src","onDownload","onClear","onReplace","exports","useTranslations","sources","useMemo","Array","isArray","current","setCurrent","useState","title","getMediaTitle","handleDownload","useCallback","length","prevButtonProps","tooltipText","onClick","prevIndex","nextButtonProps","nextIndex","handleClear","ModalPreviewLayout","actions","Box","verticalAlign","marginRight","TextButton","size","skin","prefixIcon","DownloadImport","download","Button","priority","Replace","disabled","replace","Tooltip","content","delete","IconButton","Delete","map","mediaSrc","MediaPreviewItem","key","loading","setLoading","useEffect","onLoad","previewURL","mediaURItoImageURL","window","innerWidth","Fragment","align","width","height","Loader","isMediaVideoURI","style","display","poster","onLoadedData","controls","className","classes","previewVideo","autoPlay","loop","muted","convertMediaURIToPreviewVideoURL","Image","previewImage"],"sources":["../../../../src/components/media-gallery/media-preview-modal.tsx"],"sourcesContent":["import React, { useCallback, useMemo, useState, useEffect } from 'react';\nimport type { NextButtonProps, PrevButtonProps } from '@wix/design-system';\nimport {\n  Box,\n  Button,\n  IconButton,\n  Image,\n  Loader,\n  Modal,\n  ModalPreviewLayout,\n  TextButton,\n  Tooltip,\n} from '@wix/design-system';\nimport {\n  Replace,\n  DownloadImport as Download,\n  Delete,\n} from '@wix/wix-ui-icons-common';\nimport {\n  getMediaTitle,\n  isMediaVideoURI,\n  mediaURItoImageURL,\n} from '../../auto-field-types';\nimport { useTranslations } from '../../hooks';\nimport type { TranslationsKeys } from '../../services/translations';\n\nimport { classes } from './form-media-gallery-field.st.css.js';\nimport { convertMediaURIToPreviewVideoURL } from './media-gallery-dialog/utils';\n\nexport interface MediaPreviewLayoutTextKeys {\n  replace: TranslationsKeys;\n  download: TranslationsKeys;\n  delete: TranslationsKeys;\n}\n\nexport interface MediaPreviewProps {\n  isOpen: boolean;\n  onClose: () => void;\n  onRequestMedia: () => void;\n  onClearMedia?: () => void;\n  onDownloadMedia: (value?: string) => void;\n  textKeys: MediaPreviewLayoutTextKeys;\n  value?: string | string[];\n  readOnly?: boolean;\n}\n\nexport const MediaPreviewModal: React.FC<MediaPreviewProps> = ({\n  isOpen,\n  onClose,\n  value,\n  onRequestMedia,\n  onClearMedia,\n  onDownloadMedia,\n  textKeys,\n  readOnly,\n}) => {\n  if (!isOpen || !value) {\n    return null;\n  }\n\n  return (\n    <Modal isOpen screen=\"full\">\n      <MediaPreviewLayout\n        src={value}\n        onClose={onClose}\n        textKeys={textKeys}\n        onDownload={onDownloadMedia}\n        onClear={onClearMedia}\n        onReplace={onRequestMedia}\n        readOnly={readOnly}\n      />\n    </Modal>\n  );\n};\n\ninterface MediaPreviewLayoutProps {\n  src: string[] | string;\n  onClose: () => void;\n  textKeys: MediaPreviewLayoutTextKeys;\n  onReplace?: () => void;\n  onClear?: () => void;\n  onDownload?: (src?: string) => void;\n  readOnly?: boolean;\n}\n\nconst MediaPreviewLayout: React.FC<MediaPreviewLayoutProps> = ({\n  src,\n  onClose,\n  textKeys,\n  onDownload,\n  onReplace,\n  onClear,\n  readOnly,\n}) => {\n  const { t } = useTranslations();\n  const sources = useMemo(() => (Array.isArray(src) ? src : [src]), [src]);\n  const [current, setCurrent] = useState(sources[0]);\n  const title = getMediaTitle(current);\n\n  const handleDownload = useCallback(() => {\n    if (sources.length > 1) {\n      onDownload?.(current);\n    } else {\n      onDownload?.();\n    }\n  }, [sources, onDownload, current]);\n\n  const prevButtonProps = {\n    tooltipText: t('CMS.mediaGallery.preview.previousItem'),\n    onClick: (prevIndex: number) => setCurrent(sources[prevIndex]),\n  } as PrevButtonProps;\n\n  const nextButtonProps = {\n    tooltipText: t('CMS.mediaGallery.preview.nextItem'),\n    onClick: (nextIndex: number) => setCurrent(sources[nextIndex]),\n  } as NextButtonProps;\n\n  const handleClear = useCallback(() => {\n    onClear?.();\n    onClose();\n  }, [onClear, onClose]);\n\n  return (\n    <ModalPreviewLayout\n      title={title}\n      prevButtonProps={prevButtonProps}\n      nextButtonProps={nextButtonProps}\n      actions={\n        <Box verticalAlign=\"middle\">\n          <Box marginRight={2}>\n            <TextButton\n              size=\"small\"\n              skin=\"light\"\n              prefixIcon={<Download />}\n              onClick={handleDownload}\n            >\n              {t(textKeys.download)}\n            </TextButton>\n          </Box>\n          <Box marginRight={2}>\n            <Button\n              priority=\"secondary\"\n              size=\"small\"\n              skin=\"light\"\n              prefixIcon={<Replace />}\n              onClick={onReplace}\n              disabled={readOnly}\n            >\n              {t(textKeys.replace)}\n            </Button>\n          </Box>\n          {onClear && (\n            <Box marginRight={2}>\n              <Tooltip content={t(textKeys.delete)}>\n                <IconButton\n                  priority=\"secondary\"\n                  size=\"small\"\n                  skin=\"light\"\n                  onClick={handleClear}\n                  disabled={readOnly}\n                >\n                  <Delete />\n                </IconButton>\n              </Tooltip>\n            </Box>\n          )}\n        </Box>\n      }\n      onClose={onClose}\n    >\n      {sources.map((mediaSrc: string, i) => (\n        <MediaPreviewItem key={i} src={mediaSrc} />\n      ))}\n    </ModalPreviewLayout>\n  );\n};\n\nconst MediaPreviewItem: React.FC<{ src: string }> = ({ src }) => {\n  const [loading, setLoading] = useState(true);\n\n  useEffect(() => setLoading(true), [src]);\n  const onLoad = useCallback(() => setLoading(false), []);\n\n  if (!src) return null;\n\n  const previewURL = mediaURItoImageURL(src, window.innerWidth);\n\n  return (\n    <>\n      {loading && (\n        <Box align=\"center\" verticalAlign=\"middle\" width=\"100%\" height=\"100%\">\n          <Loader size=\"small\" />\n        </Box>\n      )}\n      {isMediaVideoURI(src) ? (\n        <video\n          style={{ display: loading ? 'none' : 'initial' }}\n          poster={previewURL}\n          onLoadedData={onLoad}\n          controls\n          className={classes.previewVideo}\n          autoPlay\n          loop\n          muted\n        >\n          <source src={convertMediaURIToPreviewVideoURL(src)} />\n        </video>\n      ) : (\n        <Image\n          style={{ display: loading ? 'none' : 'initial' }}\n          className={classes.previewImage}\n          onLoad={onLoad}\n          src={previewURL}\n        />\n      )}\n    </>\n  );\n};\n"],"mappings":"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","ignoreList":[]}

package/dist/cjs/components/media-image/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+exports.__esModule = true;
+var _mediaImage = require("./media-image");
+Object.keys(_mediaImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mediaImage[key]) return;
+  exports[key] = _mediaImage[key];
+});
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/media-image/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_mediaImage","require","Object","keys","forEach","key","exports"],"sources":["../../../../src/components/media-image/index.ts"],"sourcesContent":["export * from './media-image';\n"],"mappings":";;;AAAA,IAAAA,WAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,WAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,WAAA,CAAAK,GAAA;EAAAC,OAAA,CAAAD,GAAA,IAAAL,WAAA,CAAAK,GAAA;AAAA","ignoreList":[]}

package/dist/cjs/components/media-image/media-image.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.useResetMediaImagesCacheEffect = exports.MediaImage = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _designSystem = require("@wix/design-system");
+var _autoFieldTypes = require("../../auto-field-types");
+var _mediaImageStCss = require("./media-image.st.css.js");
+var _hooks = require("../../hooks");
+var _jsxFileName = "/home/builduser/work/843658b9f44192f0/packages/fields/dist/cjs/components/media-image/media-image.tsx";
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const MediaImage = ({
+  size = _autoFieldTypes.ThumbnailSize.L,
+  fit = 'cover',
+  suspended = false,
+  overlay,
+  src,
+  onLoad,
+  onError,
+  width = '100%',
+  height = '100%',
+  borderRadius,
+  onMouseEnter,
+  onMouseLeave,
+  className,
+  dataHook,
+  ...props
+}) => {
+  const [allowLoading, setAllowLoading] = (0, _react.useState)(!suspended || isLoadedImage(src));
+  (0, _react.useEffect)(() => setAllowLoading(!suspended || isLoadedImage(src)), [src, suspended]);
+  const [loading, setLoading] = (0, _react.useState)(allowLoading);
+  const [error, setError] = (0, _react.useState)(isBrokenImage(src));
+  (0, _react.useEffect)(() => {
+    const isBroken = isBrokenImage(src);
+    setError(isBroken);
+    isBroken && (onError == null ? void 0 : onError());
+  }, [src, onError]);
+  const requestFrameCallback = (0, _hooks.useRequestIdleCallback)();
+  (0, _react.useEffect)(() => {
+    if (!allowLoading) {
+      requestFrameCallback(() => {
+        setAllowLoading(true);
+        setLoading(true);
+      });
+    }
+  }, [allowLoading, requestFrameCallback]);
+  const onImageLoad = (0, _react.useCallback)(() => {
+    if (allowLoading && src) {
+      imageLoaded(src);
+      setLoading(false);
+      setError(false);
+    }
+    onLoad == null || onLoad();
+  }, [allowLoading, onLoad, src]);
+  const onImageError = (0, _react.useCallback)(() => {
+    if (allowLoading && src) {
+      imageBroken(src);
+      setLoading(false);
+      setError(true);
+    }
+    onError == null || onError();
+  }, [allowLoading, onError, src]);
+  return /*#__PURE__*/_react.default.createElement("picture", {
+    "data-hook": dataHook,
+    style: {
+      width,
+      height,
+      borderRadius
+    },
+    className: (0, _mediaImageStCss.st)(_mediaImageStCss.classes.root, {
+      error,
+      loading
+    }, className),
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 91,
+      columnNumber: 5
+    }
+  }, !error && /*#__PURE__*/_react.default.createElement(_designSystem.Image, (0, _extends2.default)({}, props, {
+    fit: fit,
+    src: allowLoading && src ? (0, _autoFieldTypes.mediaURItoImageURL)(src, size) : '',
+    width: width,
+    height: height,
+    borderRadius: borderRadius,
+    onLoad: onImageLoad,
+    dataHook: "media-image-image",
+    onError: onImageError,
+    __self: void 0,
+    __source: {
+      fileName: _jsxFileName,
+      lineNumber: 99,
+      columnNumber: 9
+    }
+  })), overlay);
+};
+exports.MediaImage = MediaImage;
+MediaImage.displayName = 'MediaImage';
+MediaImage.Size = _autoFieldTypes.ThumbnailSize;
+MediaImage.loadedImages = new Set();
+MediaImage.brokenImages = new Set();
+MediaImage.resetBrokenImagesCache = () => {
+  MediaImage.brokenImages.clear();
+};
+const useResetMediaImagesCacheEffect = () => {
+  (0, _react.useEffect)(() => () => {
+    MediaImage.resetBrokenImagesCache();
+  }, []);
+};
+exports.useResetMediaImagesCacheEffect = useResetMediaImagesCacheEffect;
+function imageLoaded(src) {
+  MediaImage.loadedImages.add(src);
+  MediaImage.brokenImages.delete(src);
+}
+function isLoadedImage(src) {
+  return src ? MediaImage.loadedImages.has(src) : false;
+}
+function imageBroken(src) {
+  MediaImage.brokenImages.add(src);
+}
+function isBrokenImage(src) {
+  return src ? MediaImage.brokenImages.has(src) : false;
+}
+//# sourceMappingURL=media-image.js.map

package/dist/cjs/components/media-image/media-image.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_designSystem","_autoFieldTypes","_mediaImageStCss","_hooks","_jsxFileName","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","MediaImage","size","ThumbnailSize","L","fit","suspended","overlay","src","onLoad","onError","width","height","borderRadius","onMouseEnter","onMouseLeave","className","dataHook","props","allowLoading","setAllowLoading","useState","isLoadedImage","useEffect","loading","setLoading","error","setError","isBrokenImage","isBroken","requestFrameCallback","useRequestIdleCallback","onImageLoad","useCallback","imageLoaded","onImageError","imageBroken","createElement","style","st","classes","root","__self","__source","fileName","lineNumber","columnNumber","Image","_extends2","mediaURItoImageURL","exports","displayName","Size","loadedImages","Set","brokenImages","resetBrokenImagesCache","clear","useResetMediaImagesCacheEffect","add","delete"],"sources":["../../../../src/components/media-image/media-image.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useState } from 'react';\n\nimport type { ImageProps } from '@wix/design-system';\nimport { Image } from '@wix/design-system';\nimport { mediaURItoImageURL, ThumbnailSize } from '../../auto-field-types';\n\nimport { classes, st } from './media-image.st.css.js';\nimport { useRequestIdleCallback } from '../../hooks';\n\nexport interface MediaImageProps\n  extends Omit<ImageProps, 'onLoad' | 'onError'> {\n  size?: ThumbnailSize | number;\n  suspended?: boolean;\n  overlay?: React.ReactNode;\n  onLoad?: () => void;\n  onError?: () => void;\n}\n\ntype MediaImageFC = React.FC<MediaImageProps> & {\n  Size: typeof ThumbnailSize;\n  loadedImages: Set<string>;\n  brokenImages: Set<string>;\n  resetBrokenImagesCache: () => void;\n};\n\nexport const MediaImage: MediaImageFC = ({\n  size = ThumbnailSize.L,\n  fit = 'cover',\n  suspended = false,\n  overlay,\n  src,\n  onLoad,\n  onError,\n  width = '100%',\n  height = '100%',\n  borderRadius,\n  onMouseEnter,\n  onMouseLeave,\n  className,\n  dataHook,\n  ...props\n}) => {\n  const [allowLoading, setAllowLoading] = useState(\n    !suspended || isLoadedImage(src),\n  );\n  useEffect(\n    () => setAllowLoading(!suspended || isLoadedImage(src)),\n    [src, suspended],\n  );\n\n  const [loading, setLoading] = useState(allowLoading);\n\n  const [error, setError] = useState(isBrokenImage(src));\n  useEffect(() => {\n    const isBroken = isBrokenImage(src);\n    setError(isBroken);\n    isBroken && onError?.();\n  }, [src, onError]);\n\n  const requestFrameCallback = useRequestIdleCallback();\n  useEffect(() => {\n    if (!allowLoading) {\n      requestFrameCallback(() => {\n        setAllowLoading(true);\n        setLoading(true);\n      });\n    }\n  }, [allowLoading, requestFrameCallback]);\n\n  const onImageLoad = useCallback(() => {\n    if (allowLoading && src) {\n      imageLoaded(src);\n      setLoading(false);\n      setError(false);\n    }\n\n    onLoad?.();\n  }, [allowLoading, onLoad, src]);\n\n  const onImageError = useCallback(() => {\n    if (allowLoading && src) {\n      imageBroken(src);\n      setLoading(false);\n      setError(true);\n    }\n\n    onError?.();\n  }, [allowLoading, onError, src]);\n\n  return (\n    <picture\n      data-hook={dataHook}\n      style={{ width, height, borderRadius }}\n      className={st(classes.root, { error, loading }, className)}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n    >\n      {!error && (\n        <Image\n          {...props}\n          fit={fit}\n          src={allowLoading && src ? mediaURItoImageURL(src, size) : ''}\n          width={width}\n          height={height}\n          borderRadius={borderRadius}\n          onLoad={onImageLoad}\n          dataHook=\"media-image-image\"\n          onError={onImageError}\n        />\n      )}\n      {overlay}\n    </picture>\n  );\n};\n\nMediaImage.displayName = 'MediaImage';\n\nMediaImage.Size = ThumbnailSize;\n\nMediaImage.loadedImages = new Set();\nMediaImage.brokenImages = new Set();\n\nMediaImage.resetBrokenImagesCache = () => {\n  MediaImage.brokenImages.clear();\n};\n\nexport const useResetMediaImagesCacheEffect = () => {\n  useEffect(\n    () => () => {\n      MediaImage.resetBrokenImagesCache();\n    },\n    [],\n  );\n};\n\nfunction imageLoaded(src: string) {\n  MediaImage.loadedImages.add(src);\n  MediaImage.brokenImages.delete(src);\n}\n\nfunction isLoadedImage(src?: string) {\n  return src ? MediaImage.loadedImages.has(src) : false;\n}\n\nfunction imageBroken(src: string) {\n  MediaImage.brokenImages.add(src);\n}\n\nfunction isBrokenImage(src?: string) {\n  return src ? MediaImage.brokenImages.has(src) : false;\n}\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAGA,IAAAC,aAAA,GAAAD,OAAA;AACA,IAAAE,eAAA,GAAAF,OAAA;AAEA,IAAAG,gBAAA,GAAAH,OAAA;AACA,IAAAI,MAAA,GAAAJ,OAAA;AAAqD,IAAAK,YAAA;AAAA,SAAAN,wBAAAO,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAT,uBAAA,YAAAA,CAAAO,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAkB9C,MAAMkB,UAAwB,GAAGA,CAAC;EACvCC,IAAI,GAAGC,6BAAa,CAACC,CAAC;EACtBC,GAAG,GAAG,OAAO;EACbC,SAAS,GAAG,KAAK;EACjBC,OAAO;EACPC,GAAG;EACHC,MAAM;EACNC,OAAO;EACPC,KAAK,GAAG,MAAM;EACdC,MAAM,GAAG,MAAM;EACfC,YAAY;EACZC,YAAY;EACZC,YAAY;EACZC,SAAS;EACTC,QAAQ;EACR,GAAGC;AACL,CAAC,KAAK;EACJ,MAAM,CAACC,YAAY,EAAEC,eAAe,CAAC,GAAG,IAAAC,eAAQ,EAC9C,CAACf,SAAS,IAAIgB,aAAa,CAACd,GAAG,CACjC,CAAC;EACD,IAAAe,gBAAS,EACP,MAAMH,eAAe,CAAC,CAACd,SAAS,IAAIgB,aAAa,CAACd,GAAG,CAAC,CAAC,EACvD,CAACA,GAAG,EAAEF,SAAS,CACjB,CAAC;EAED,MAAM,CAACkB,OAAO,EAAEC,UAAU,CAAC,GAAG,IAAAJ,eAAQ,EAACF,YAAY,CAAC;EAEpD,MAAM,CAACO,KAAK,EAAEC,QAAQ,CAAC,GAAG,IAAAN,eAAQ,EAACO,aAAa,CAACpB,GAAG,CAAC,CAAC;EACtD,IAAAe,gBAAS,EAAC,MAAM;IACd,MAAMM,QAAQ,GAAGD,aAAa,CAACpB,GAAG,CAAC;IACnCmB,QAAQ,CAACE,QAAQ,CAAC;IAClBA,QAAQ,KAAInB,OAAO,oBAAPA,OAAO,CAAG,CAAC;EACzB,CAAC,EAAE,CAACF,GAAG,EAAEE,OAAO,CAAC,CAAC;EAElB,MAAMoB,oBAAoB,GAAG,IAAAC,6BAAsB,EAAC,CAAC;EACrD,IAAAR,gBAAS,EAAC,MAAM;IACd,IAAI,CAACJ,YAAY,EAAE;MACjBW,oBAAoB,CAAC,MAAM;QACzBV,eAAe,CAAC,IAAI,CAAC;QACrBK,UAAU,CAAC,IAAI,CAAC;MAClB,CAAC,CAAC;IACJ;EACF,CAAC,EAAE,CAACN,YAAY,EAAEW,oBAAoB,CAAC,CAAC;EAExC,MAAME,WAAW,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACpC,IAAId,YAAY,IAAIX,GAAG,EAAE;MACvB0B,WAAW,CAAC1B,GAAG,CAAC;MAChBiB,UAAU,CAAC,KAAK,CAAC;MACjBE,QAAQ,CAAC,KAAK,CAAC;IACjB;IAEAlB,MAAM,YAANA,MAAM,CAAG,CAAC;EACZ,CAAC,EAAE,CAACU,YAAY,EAAEV,MAAM,EAAED,GAAG,CAAC,CAAC;EAE/B,MAAM2B,YAAY,GAAG,IAAAF,kBAAW,EAAC,MAAM;IACrC,IAAId,YAAY,IAAIX,GAAG,EAAE;MACvB4B,WAAW,CAAC5B,GAAG,CAAC;MAChBiB,UAAU,CAAC,KAAK,CAAC;MACjBE,QAAQ,CAAC,IAAI,CAAC;IAChB;IAEAjB,OAAO,YAAPA,OAAO,CAAG,CAAC;EACb,CAAC,EAAE,CAACS,YAAY,EAAET,OAAO,EAAEF,GAAG,CAAC,CAAC;EAEhC,oBACElC,MAAA,CAAAkB,OAAA,CAAA6C,aAAA;IACE,aAAWpB,QAAS;IACpBqB,KAAK,EAAE;MAAE3B,KAAK;MAAEC,MAAM;MAAEC;IAAa,CAAE;IACvCG,SAAS,EAAE,IAAAuB,mBAAE,EAACC,wBAAO,CAACC,IAAI,EAAE;MAAEf,KAAK;MAAEF;IAAQ,CAAC,EAAER,SAAS,CAAE;IAC3DF,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAEA,YAAa;IAAA2B,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA/D,YAAA;MAAAgE,UAAA;MAAAC,YAAA;IAAA;EAAA,GAE1B,CAACpB,KAAK,iBACLpD,MAAA,CAAAkB,OAAA,CAAA6C,aAAA,CAAC5D,aAAA,CAAAsE,KAAK,MAAAC,SAAA,CAAAxD,OAAA,MACA0B,KAAK;IACTb,GAAG,EAAEA,GAAI;IACTG,GAAG,EAAEW,YAAY,IAAIX,GAAG,GAAG,IAAAyC,kCAAkB,EAACzC,GAAG,EAAEN,IAAI,CAAC,GAAG,EAAG;IAC9DS,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfC,YAAY,EAAEA,YAAa;IAC3BJ,MAAM,EAAEuB,WAAY;IACpBf,QAAQ,EAAC,mBAAmB;IAC5BP,OAAO,EAAEyB,YAAa;IAAAO,MAAA;IAAAC,QAAA;MAAAC,QAAA,EAAA/D,YAAA;MAAAgE,UAAA;MAAAC,YAAA;IAAA;EAAA,EACvB,CACF,EACAvC,OACM,CAAC;AAEd,CAAC;AAAC2C,OAAA,CAAAjD,UAAA,GAAAA,UAAA;AAEFA,UAAU,CAACkD,WAAW,GAAG,YAAY;AAErClD,UAAU,CAACmD,IAAI,GAAGjD,6BAAa;AAE/BF,UAAU,CAACoD,YAAY,GAAG,IAAIC,GAAG,CAAC,CAAC;AACnCrD,UAAU,CAACsD,YAAY,GAAG,IAAID,GAAG,CAAC,CAAC;AAEnCrD,UAAU,CAACuD,sBAAsB,GAAG,MAAM;EACxCvD,UAAU,CAACsD,YAAY,CAACE,KAAK,CAAC,CAAC;AACjC,CAAC;AAEM,MAAMC,8BAA8B,GAAGA,CAAA,KAAM;EAClD,IAAAnC,gBAAS,EACP,MAAM,MAAM;IACVtB,UAAU,CAACuD,sBAAsB,CAAC,CAAC;EACrC,CAAC,EACD,EACF,CAAC;AACH,CAAC;AAACN,OAAA,CAAAQ,8BAAA,GAAAA,8BAAA;AAEF,SAASxB,WAAWA,CAAC1B,GAAW,EAAE;EAChCP,UAAU,CAACoD,YAAY,CAACM,GAAG,CAACnD,GAAG,CAAC;EAChCP,UAAU,CAACsD,YAAY,CAACK,MAAM,CAACpD,GAAG,CAAC;AACrC;AAEA,SAASc,aAAaA,CAACd,GAAY,EAAE;EACnC,OAAOA,GAAG,GAAGP,UAAU,CAACoD,YAAY,CAAC5D,GAAG,CAACe,GAAG,CAAC,GAAG,KAAK;AACvD;AAEA,SAAS4B,WAAWA,CAAC5B,GAAW,EAAE;EAChCP,UAAU,CAACsD,YAAY,CAACI,GAAG,CAACnD,GAAG,CAAC;AAClC;AAEA,SAASoB,aAAaA,CAACpB,GAAY,EAAE;EACnC,OAAOA,GAAG,GAAGP,UAAU,CAACsD,YAAY,CAAC9D,GAAG,CAACe,GAAG,CAAC,GAAG,KAAK;AACvD","ignoreList":[]}

package/dist/cjs/components/media-image/media-image.st.css

@@ -0,0 +1,30 @@
+@property st-global(--wds-color-red-200);
+@property st-global(--wsr-color-R20);
+@property st-global(--wds-color-black-550);
+@property st-global(--wsr-color-D55);
+
+.root {
+  -st-states: error, loading;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  position: relative;
+  box-sizing: border-box;
+}
+
+.root:error {
+  --from: calc(50% - 0.5px);
+  --to: calc(50% + 0.5px);
+
+  background-image: linear-gradient(
+    to bottom right,
+    transparent var(--from),
+    var(--wds-color-red-200, var(--wsr-color-R20)) var(--from),
+    var(--wds-color-red-200, var(--wsr-color-R20)) var(--to),
+    transparent var(--to)
+  );
+}
+
+.root:error > * {
+  opacity: 0;
+}

package/dist/cjs/components/media-image/media-image.st.css.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "mediaimage1096824462";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "mediaimage1096824462__root"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {};
+var vars = exports.vars = {
+  "wds-color-red-200": "--wds-color-red-200",
+  "wsr-color-R20": "--wsr-color-R20",
+  "wds-color-black-550": "--wds-color-black-550",
+  "wsr-color-D55": "--wsr-color-D55",
+  "from": "--mediaimage1096824462-from",
+  "to": "--mediaimage1096824462-to"
+};
+//# sourceMappingURL=media-image.st.css.js.map

package/dist/cjs/components/media-image/media-image.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../src/components/media-image/media-image.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"mediaimage1096824462\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"mediaimage1096824462__root\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {}; \nexport var vars = {\"wds-color-red-200\":\"--wds-color-red-200\",\"wsr-color-R20\":\"--wsr-color-R20\",\"wds-color-black-550\":\"--wds-color-black-550\",\"wsr-color-D55\":\"--wsr-color-D55\",\"from\":\"--mediaimage1096824462-from\",\"to\":\"--mediaimage1096824462-to\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,sBAAsB;AACxC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC;AAA4B,CAAC;AACnD,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,mBAAmB,EAAC,qBAAqB;EAAC,eAAe,EAAC,iBAAiB;EAAC,qBAAqB,EAAC,uBAAuB;EAAC,eAAe,EAAC,iBAAiB;EAAC,MAAM,EAAC,6BAA6B;EAAC,IAAI,EAAC;AAA2B,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image/overlays/index.js

@@ -0,0 +1,7 @@
+"use strict";
+
+exports.__esModule = true;
+exports.VideoIndicatorOverlay = void 0;
+var _videoIndicatorOverlay = require("./video-indicator-overlay");
+exports.VideoIndicatorOverlay = _videoIndicatorOverlay.VideoIndicatorOverlay;
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/media-image/overlays/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_videoIndicatorOverlay","require","exports","VideoIndicatorOverlay"],"sources":["../../../../../src/components/media-image/overlays/index.ts"],"sourcesContent":["export { VideoIndicatorOverlay } from './video-indicator-overlay';\nexport type { IconOverlayProps, IconOverlaySize, IconOverlayPlacement, MediaImageOverlayProps } from './types';\n"],"mappings":";;;;AAAA,IAAAA,sBAAA,GAAAC,OAAA;AAAkEC,OAAA,CAAAC,qBAAA,GAAAH,sBAAA,CAAAG,qBAAA","ignoreList":[]}

package/dist/cjs/components/media-image/overlays/overlay.st.css

@@ -0,0 +1,41 @@
+@property st-global(--wds-color-white);
+
+:vars {
+    iconShadow: drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6));
+}
+
+.iconOverlay {
+    -st-states:
+        size(enum(small, medium, large)),
+        placement(enum(topLeft, bottomLeft));
+
+    position: absolute;
+
+    color: var(--wds-color-white, var(--wsr-color-D80, #FFFFFF));
+    background-color: transparent;
+
+    filter: value(iconShadow);
+    -webkit-filter: value(iconShadow);
+}
+
+.iconOverlay:size(small) {
+    width: 20px;
+    height: 20px;
+}
+.iconOverlay:size(medium) {
+    width: 24px;
+    height: 24px;
+}
+.iconOverlay:size(large) {
+    width: 28px;
+    height: 28px;
+}
+
+.iconOverlay:placement(topLeft) {
+    top: 2px;
+    left: 2px;
+}
+.iconOverlay:placement(bottomLeft) {
+    bottom: 2px;
+    left: 2px;
+}

package/dist/cjs/components/media-image/overlays/overlay.st.css.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.vars = exports.style = exports.stVars = exports.st = exports.namespace = exports.layers = exports.keyframes = exports.cssStates = exports.containers = exports.classes = void 0;
+var _stylableEsmRuntime = require("../../../stylable-esm-runtime.js");
+// @ts-nocheck
+
+var _namespace_ = "overlay1012308888";
+var _style_ = _stylableEsmRuntime.classesRuntime.bind(null, _namespace_);
+var cssStates = exports.cssStates = _stylableEsmRuntime.statesRuntime.bind(null, _namespace_);
+var style = exports.style = _style_;
+var st = exports.st = _style_;
+var namespace = exports.namespace = _namespace_;
+var classes = exports.classes = {
+  "root": "overlay1012308888__root",
+  "iconOverlay": "overlay1012308888__iconOverlay"
+};
+var keyframes = exports.keyframes = {};
+var layers = exports.layers = {};
+var containers = exports.containers = {};
+var stVars = exports.stVars = {
+  "iconShadow": "drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))"
+};
+var vars = exports.vars = {
+  "wds-color-white": "--wds-color-white",
+  "wsr-color-D80": "--overlay1012308888-wsr-color-D80"
+};
+//# sourceMappingURL=overlay.st.css.js.map

package/dist/cjs/components/media-image/overlays/overlay.st.css.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_stylableEsmRuntime","require","_namespace_","_style_","classesRuntime","bind","cssStates","exports","statesRuntime","style","st","namespace","classes","keyframes","layers","containers","stVars","vars"],"sources":["../../../../../src/components/media-image/overlays/overlay.st.css.ts"],"sourcesContent":["// @ts-nocheck\n\n\nimport { classesRuntime, statesRuntime } from \"../../../stylable-esm-runtime.js\";\n\n\n\nvar _namespace_ = \"overlay1012308888\";\nvar _style_ = classesRuntime.bind(null, _namespace_);\n\nexport var cssStates = statesRuntime.bind(null, _namespace_);\nexport var style: import(\"@stylable/runtime\").STFunction = _style_;\nexport var st: import(\"@stylable/runtime\").STFunction = _style_;\n\nexport var namespace = _namespace_;\nexport var classes = {\"root\":\"overlay1012308888__root\",\"iconOverlay\":\"overlay1012308888__iconOverlay\"};\nexport var keyframes = {}; \nexport var layers = {};\nexport var containers = {};\nexport var stVars = {\"iconShadow\":\"drop-shadow(0 1px 1px rgba(22, 45, 61, 0.6))\"}; \nexport var vars = {\"wds-color-white\":\"--wds-color-white\",\"wsr-color-D80\":\"--overlay1012308888-wsr-color-D80\"}; \n\n\n\n\n"],"mappings":";;;;AAGA,IAAAA,mBAAA,GAAAC,OAAA;AAHA;;AAOA,IAAIC,WAAW,GAAG,mBAAmB;AACrC,IAAIC,OAAO,GAAGC,kCAAc,CAACC,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AAE7C,IAAII,SAAS,GAAAC,OAAA,CAAAD,SAAA,GAAGE,iCAAa,CAACH,IAAI,CAAC,IAAI,EAAEH,WAAW,CAAC;AACrD,IAAIO,KAA6C,GAAAF,OAAA,CAAAE,KAAA,GAAGN,OAAO;AAC3D,IAAIO,EAA0C,GAAAH,OAAA,CAAAG,EAAA,GAAGP,OAAO;AAExD,IAAIQ,SAAS,GAAAJ,OAAA,CAAAI,SAAA,GAAGT,WAAW;AAC3B,IAAIU,OAAO,GAAAL,OAAA,CAAAK,OAAA,GAAG;EAAC,MAAM,EAAC,yBAAyB;EAAC,aAAa,EAAC;AAAgC,CAAC;AAC/F,IAAIC,SAAS,GAAAN,OAAA,CAAAM,SAAA,GAAG,CAAC,CAAC;AAClB,IAAIC,MAAM,GAAAP,OAAA,CAAAO,MAAA,GAAG,CAAC,CAAC;AACf,IAAIC,UAAU,GAAAR,OAAA,CAAAQ,UAAA,GAAG,CAAC,CAAC;AACnB,IAAIC,MAAM,GAAAT,OAAA,CAAAS,MAAA,GAAG;EAAC,YAAY,EAAC;AAA8C,CAAC;AAC1E,IAAIC,IAAI,GAAAV,OAAA,CAAAU,IAAA,GAAG;EAAC,iBAAiB,EAAC,mBAAmB;EAAC,eAAe,EAAC;AAAmC,CAAC","ignoreList":[]}

package/dist/cjs/components/media-image/overlays/types.js

@@ -0,0 +1,4 @@
+"use strict";
+
+exports.__esModule = true;
+//# sourceMappingURL=types.js.map

package/dist/cjs/components/media-image/overlays/types.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["../../../../../src/components/media-image/overlays/types.ts"],"sourcesContent":["export type IconOverlaySize = 'small' | 'medium' | 'large';\nexport type IconOverlayPlacement = 'topLeft' | 'bottomLeft';\n\nexport interface MediaImageOverlayProps {\n  src?: string;\n}\n\nexport interface IconOverlayProps extends MediaImageOverlayProps {\n  size?: IconOverlaySize;\n  placement?: IconOverlayPlacement;\n}\n"],"mappings":"","ignoreList":[]}