@os-design/upload 1.0.159 → 1.0.161

package/dist/cjs/ImageUpload/index.js

@@ -4,101 +4,62 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Overlay = void 0;
-
 var _react = require("@emotion/react");
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _core = require("@os-design/core");
-
 var _icons = require("@os-design/icons");
-
 var _styles = require("@os-design/styles");
-
 var _theming = require("@os-design/theming");
-
 var _utils = require("@os-design/utils");
-
 var _react2 = _interopRequireWildcard(require("react"));
-
 var _reactDropzone = require("react-dropzone");
-
 var _defaultLocale = _interopRequireDefault(require("./utils/defaultLocale"));
-
 var _excluded = ["url", "accept", "locale", "value", "defaultValue", "onChange", "size"];
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
 function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var overlayHasImageStyles = function overlayHasImageStyles(p) {
   return p.hasImage && (0, _react.css)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    background-color: hsla(0, 0%, 0%, ", ");\n    color: hsl(0, 0%, 100%);\n  "])), p.theme.imageUploadOverlayOpacity);
 };
-
 var overlayHasImageHoverStyles = function overlayHasImageHoverStyles(p) {
   return p.hasImage && !p.isDragActive && (0, _react.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  "])));
 };
-
 var Overlay = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isDragActive', 'hasImage'))(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  ", ";\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ", "em;\n\n  ", ";\n  ", "\n  ", ";\n"])), _styles.resetFocusStyles, function (p) {
   return p.theme.imageUploadOverlayPadding;
 }, overlayHasImageStyles, overlayHasImageHoverStyles, (0, _styles.transitionStyles)('opacity'));
 exports.Overlay = Overlay;
-
 var contentIsDragActiveStyles = function contentIsDragActiveStyles(p) {
   return p.isDragActive && (0, _react.css)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    transform: scale(0.92);\n  "])));
 };
-
 var Content = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isDragActive'))(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", ";\n  ", ";\n"])), contentIsDragActiveStyles, (0, _styles.transitionStyles)('transform'));
 var PictureIcon = (0, _styled["default"])(_icons.Picture)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  opacity: 0.8;\n  font-size: 2.5em;\n"])));
-
 var Title = _styled["default"].div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n  opacity: 0.8;\n"])));
-
 var DeleteButtonContainer = _styled["default"].div(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n"])));
-
 var hoverStyles = function hoverStyles(p) {
   return (0, _react.css)(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  border-color: ", ";\n"])), (0, _theming.clr)(p.theme.imageUploadNoImageHoverColorBorder));
 };
-
 var notHasImageStyles = function notHasImageStyles(p) {
   return !p.hasImage && (0, _react.css)(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    background-color: ", ";\n    border: 2px dashed ", ";\n\n    @media (hover: hover) {\n      &:hover {\n        ", ";\n      }\n    }\n  "])), (0, _theming.clr)(p.theme.imageUploadNoImageColorBg), (0, _theming.clr)(p.theme.imageUploadNoImageColorBorder), hoverStyles(p));
 };
-
 var focusStyles = function focusStyles(p) {
   return (0, _react.css)(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ", ";\n  }\n"])), hoverStyles(p));
 };
-
 var isDragActiveStyles = function isDragActiveStyles(p) {
   return p.isDragActive && (0, _react.css)(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["\n    ", ";\n  "])), hoverStyles(p));
 };
-
 var LocalImage = _styled["default"].img(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["\n  width: 100%;\n  vertical-align: top;\n"])));
-
 var RemoteImage = (0, _styled["default"])(_core.Image)(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["\n  vertical-align: top;\n"])));
 var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isDragActive', 'hasImage', 'size'))(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ", "em;\n  min-height: ", "em;\n  border-radius: ", "em;\n  color: ", ";\n\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n  ", ";\n"])), function (p) {
   return p.theme.imageUploadMaxWidth;
@@ -109,56 +70,49 @@ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isD
 }, function (p) {
   return (0, _theming.clr)(p.theme.colorText);
 }, notHasImageStyles, focusStyles, isDragActiveStyles, _styles.sizeStyles, (0, _styles.transitionStyles)('border'));
+
 /**
  * The component to upload an image.
  */
-
 var ImageUpload = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   var url = _ref.url,
-      _ref$accept = _ref.accept,
-      accept = _ref$accept === void 0 ? {
-    'image/*': ['.jpeg', '.png', '.webp']
-  } : _ref$accept,
-      _ref$locale = _ref.locale,
-      locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
-      value = _ref.value,
-      defaultValue = _ref.defaultValue,
-      onChange = _ref.onChange,
-      size = _ref.size,
-      rest = _objectWithoutProperties(_ref, _excluded);
-
+    _ref$accept = _ref.accept,
+    accept = _ref$accept === void 0 ? {
+      'image/*': ['.jpeg', '.png', '.webp']
+    } : _ref$accept,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? _defaultLocale["default"] : _ref$locale,
+    value = _ref.value,
+    defaultValue = _ref.defaultValue,
+    onChange = _ref.onChange,
+    size = _ref.size,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var touchDevice = (0, _react2.useMemo)(function () {
     return (0, _utils.isTouchDevice)();
   }, []);
-
   var _useForwardedState = (0, _utils.useForwardedState)({
-    value: value,
-    defaultValue: defaultValue,
-    onChange: onChange
-  }),
-      _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
-      forwardedValue = _useForwardedState2[0],
-      setForwardedValue = _useForwardedState2[1];
-
+      value: value,
+      defaultValue: defaultValue,
+      onChange: onChange
+    }),
+    _useForwardedState2 = _slicedToArray(_useForwardedState, 2),
+    forwardedValue = _useForwardedState2[0],
+    setForwardedValue = _useForwardedState2[1];
   var _useDropzone = (0, _reactDropzone.useDropzone)({
-    accept: accept,
-    multiple: false,
-    onDrop: function onDrop(_ref2) {
-      var _ref3 = _slicedToArray(_ref2, 1),
+      accept: accept,
+      multiple: false,
+      onDrop: function onDrop(_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 1),
           file = _ref3[0];
-
-      return setForwardedValue(file);
-    }
-  }),
-      getRootProps = _useDropzone.getRootProps,
-      getInputProps = _useDropzone.getInputProps,
-      isDragActive = _useDropzone.isDragActive;
-
+        return setForwardedValue(file);
+      }
+    }),
+    getRootProps = _useDropzone.getRootProps,
+    getInputProps = _useDropzone.getInputProps,
+    isDragActive = _useDropzone.isDragActive;
   var source = (0, _react2.useMemo)(function () {
     if (forwardedValue === null) return null; // If the user select an image
-
     if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists
-
     if (url) return url;
     return null;
   }, [forwardedValue, url]);
@@ -167,13 +121,11 @@ var ImageUpload = /*#__PURE__*/(0, _react2.forwardRef)(function (_ref, ref) {
   }, [source]);
   var renderImage = (0, _react2.useCallback)(function () {
     if (!source) return null;
-
     if (_typeof(forwardedValue) === 'object' && forwardedValue !== null) {
       return /*#__PURE__*/_react2["default"].createElement(LocalImage, {
         src: source
       });
     }
-
     return /*#__PURE__*/_react2["default"].createElement(RemoteImage, {
       url: source
     });

package/dist/cjs/ImageUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["overlayHasImageStyles","p","hasImage","css","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","styled","omitEmotionProps","resetFocusStyles","imageUploadOverlayPadding","transitionStyles","contentIsDragActiveStyles","Content","PictureIcon","Picture","Title","div","DeleteButtonContainer","hoverStyles","clr","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Image","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","sizeStyles","ImageUpload","forwardRef","ref","url","accept","locale","defaultLocale","value","defaultValue","onChange","size","rest","touchDevice","useMemo","isTouchDevice","useForwardedState","forwardedValue","setForwardedValue","useDropzone","multiple","onDrop","file","getRootProps","getInputProps","source","URL","createObjectURL","renderImage","useCallback","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedState,\n} from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { Accept, useDropzone } from 'react-dropzone';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n  /**\n   * The url of the image.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * Allowed image formats.\n   * @default undefined\n   */\n  accept?: Accept;\n  /**\n   * The locale of the component.\n   * @default undefined\n   */\n  locale?: ImageUploadLocale;\n  /**\n   * The selected local file, or null if the image is marked as deleted.\n   * @default undefined\n   */\n  value?: File | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: File | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n  p.hasImage &&\n  css`\n    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n    color: hsl(0, 0%, 100%);\n  `;\n\nconst overlayHasImageHoverStyles = (p) =>\n  p.hasImage &&\n  !p.isDragActive &&\n  css`\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  `;\n\ninterface OverlayProps {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\nexport const Overlay = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n  ${resetFocusStyles};\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n  ${overlayHasImageStyles};\n  ${overlayHasImageHoverStyles}\n  ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    transform: scale(0.92);\n  `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n  ${contentIsDragActiveStyles};\n  ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n  opacity: 0.8;\n  font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n  opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n  !p.hasImage &&\n  css`\n    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n    @media (hover: hover) {\n      &:hover {\n        ${hoverStyles(p)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) => css`\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ${hoverStyles(p)};\n  }\n`;\n\nconst isDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    ${hoverStyles(p)};\n  `;\n\nconst LocalImage = styled.img`\n  width: 100%;\n  vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n  vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\n\nconst Container = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${notHasImageStyles};\n  ${focusStyles};\n  ${isDragActiveStyles};\n  ${sizeStyles};\n  ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n  (\n    {\n      url,\n      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n      accept,\n      multiple: false,\n      onDrop: ([file]) => setForwardedValue(file),\n    });\n\n    const source = useMemo(() => {\n      if (forwardedValue === null) return null; // If the user select an image\n      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n      if (url) return url;\n      return null;\n    }, [forwardedValue, url]);\n\n    const hasImage = useMemo(() => !!source, [source]);\n\n    const renderImage = useCallback(() => {\n      if (!source) return null;\n      if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n        return <LocalImage src={source} />;\n      }\n      return <RemoteImage url={source} />;\n    }, [forwardedValue, source]);\n\n    return (\n      <Container\n        isDragActive={isDragActive}\n        hasImage={hasImage}\n        size={size}\n        onMouseDown={(e) => e.preventDefault()}\n        {...rest}\n        ref={ref}\n      >\n        <input {...getInputProps()} />\n        {renderImage()}\n\n        <Overlay\n          isDragActive={isDragActive}\n          hasImage={hasImage}\n          {\n            ...getRootProps({\n              onKeyDown: (e) => {\n                if (e.key === 'Backspace') setForwardedValue(null);\n              },\n            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n          }\n        >\n          <Content isDragActive={isDragActive}>\n            <PictureIcon />\n            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n          </Content>\n\n          {hasImage && (\n            <ThemeOverrider\n              overrides={{\n                buttonGhostColorText: [0, 0, 100],\n                buttonGhostColorBgHover: [0, 0, 100, 0.1],\n              }}\n            >\n              <DeleteButtonContainer>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </DeleteButtonContainer>\n            </ThemeOverrider>\n          )}\n        </Overlay>\n      </Container>\n    );\n  }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["overlayHasImageStyles","p","hasImage","css","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","styled","omitEmotionProps","resetFocusStyles","imageUploadOverlayPadding","transitionStyles","contentIsDragActiveStyles","Content","PictureIcon","Picture","Title","div","DeleteButtonContainer","hoverStyles","clr","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Image","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","sizeStyles","ImageUpload","forwardRef","ref","url","accept","locale","defaultLocale","value","defaultValue","onChange","size","rest","touchDevice","useMemo","isTouchDevice","useForwardedState","forwardedValue","setForwardedValue","useDropzone","multiple","onDrop","file","getRootProps","getInputProps","source","URL","createObjectURL","renderImage","useCallback","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedState,\n} from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { Accept, useDropzone } from 'react-dropzone';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n  /**\n   * The url of the image.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * Allowed image formats.\n   * @default undefined\n   */\n  accept?: Accept;\n  /**\n   * The locale of the component.\n   * @default undefined\n   */\n  locale?: ImageUploadLocale;\n  /**\n   * The selected local file, or null if the image is marked as deleted.\n   * @default undefined\n   */\n  value?: File | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: File | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n  p.hasImage &&\n  css`\n    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n    color: hsl(0, 0%, 100%);\n  `;\n\nconst overlayHasImageHoverStyles = (p) =>\n  p.hasImage &&\n  !p.isDragActive &&\n  css`\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  `;\n\ninterface OverlayProps {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\nexport const Overlay = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n  ${resetFocusStyles};\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n  ${overlayHasImageStyles};\n  ${overlayHasImageHoverStyles}\n  ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    transform: scale(0.92);\n  `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n  ${contentIsDragActiveStyles};\n  ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n  opacity: 0.8;\n  font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n  opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n  !p.hasImage &&\n  css`\n    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n    @media (hover: hover) {\n      &:hover {\n        ${hoverStyles(p)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) => css`\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ${hoverStyles(p)};\n  }\n`;\n\nconst isDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    ${hoverStyles(p)};\n  `;\n\nconst LocalImage = styled.img`\n  width: 100%;\n  vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n  vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\n\nconst Container = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${notHasImageStyles};\n  ${focusStyles};\n  ${isDragActiveStyles};\n  ${sizeStyles};\n  ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n  (\n    {\n      url,\n      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n      accept,\n      multiple: false,\n      onDrop: ([file]) => setForwardedValue(file),\n    });\n\n    const source = useMemo(() => {\n      if (forwardedValue === null) return null; // If the user select an image\n      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n      if (url) return url;\n      return null;\n    }, [forwardedValue, url]);\n\n    const hasImage = useMemo(() => !!source, [source]);\n\n    const renderImage = useCallback(() => {\n      if (!source) return null;\n      if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n        return <LocalImage src={source} />;\n      }\n      return <RemoteImage url={source} />;\n    }, [forwardedValue, source]);\n\n    return (\n      <Container\n        isDragActive={isDragActive}\n        hasImage={hasImage}\n        size={size}\n        onMouseDown={(e) => e.preventDefault()}\n        {...rest}\n        ref={ref}\n      >\n        <input {...getInputProps()} />\n        {renderImage()}\n\n        <Overlay\n          isDragActive={isDragActive}\n          hasImage={hasImage}\n          {\n            ...getRootProps({\n              onKeyDown: (e) => {\n                if (e.key === 'Backspace') setForwardedValue(null);\n              },\n            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n          }\n        >\n          <Content isDragActive={isDragActive}>\n            <PictureIcon />\n            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n          </Content>\n\n          {hasImage && (\n            <ThemeOverrider\n              overrides={{\n                buttonGhostColorText: [0, 0, 100],\n                buttonGhostColorBgHover: [0, 0, 100, 0.1],\n              }}\n            >\n              <DeleteButtonContainer>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </DeleteButtonContainer>\n            </ThemeOverrider>\n          )}\n        </Overlay>\n      </Container>\n    );\n  }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}

package/dist/cjs/ImageUpload/utils/defaultLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","touchTitle","dropTitle"],"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n  touchTitle: string;\n  dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n  touchTitle: 'Click here to choose an image',\n  dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAKA,IAAMA,aAAgC,GAAG;EACvCC,UAAU,EAAE,+BAD2B;EAEvCC,SAAS,EAAE;AAF4B,CAAzC;eAKeF,a"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","touchTitle","dropTitle"],"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n  touchTitle: string;\n  dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n  touchTitle: 'Click here to choose an image',\n  dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"mappings":";;;;;;AAKA,IAAMA,aAAgC,GAAG;EACvCC,UAAU,EAAE,+BAA+B;EAC3CC,SAAS,EAAE;AACb,CAAC;AAAC,eAEaF,aAAa;AAAA"}

package/dist/cjs/ImageUploadSkeleton/index.js

@@ -1,44 +1,31 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _styled = _interopRequireDefault(require("@emotion/styled"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _styles = require("@os-design/styles");
-
 var _utils = require("@os-design/utils");
-
 var _core = require("@os-design/core");
-
 var _templateObject;
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var StyledImageUploadSkeleton = (0, _styled["default"])(_core.Skeleton, (0, _utils.omitEmotionProps)('size'))(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  max-width: ", "em;\n  height: ", "em;\n  ", ";\n"])), function (p) {
   return p.theme.imageUploadMaxWidth;
 }, function (p) {
   return p.theme.imageUploadMinHeight;
 }, _styles.sizeStyles);
+
 /**
  * Provides an image upload placeholder while a user waits for
  * the content to load.
  */
-
 var ImageUploadSkeleton = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   return /*#__PURE__*/_react["default"].createElement(StyledImageUploadSkeleton, _extends({
     width: "100%"

package/dist/cjs/ImageUploadSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["StyledImageUploadSkeleton","styled","Skeleton","omitEmotionProps","p","theme","imageUploadMaxWidth","imageUploadMinHeight","sizeStyles","ImageUploadSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  height: ${(p) => p.theme.imageUploadMinHeight}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n  HTMLDivElement,\n  ImageUploadSkeletonProps\n>((props, ref) => (\n  <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,yBAAyB,GAAG,IAAAC,kBAAA,EAChCC,cADgC,EAEhC,IAAAC,uBAAA,EAAiB,MAAjB,CAFgC,CAAH,0HAIhB,UAACC,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAf;AAAA,CAJgB,EAKnB,UAACF,CAAD;EAAA,OAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAf;AAAA,CALmB,EAM3BC,kBAN2B,CAA/B;AASA;AACA;AACA;AACA;;AACA,IAAMC,mBAAmB,gBAAG,IAAAC,iBAAA,EAG1B,UAACC,KAAD,EAAQC,GAAR;EAAA,oBACA,gCAAC,yBAAD;IAA2B,KAAK,EAAC;EAAjC,GAA4CD,KAA5C;IAAmD,GAAG,EAAEC;EAAxD,GADA;AAAA,CAH0B,CAA5B;AAOAH,mBAAmB,CAACI,WAApB,GAAkC,qBAAlC;eAEeJ,mB"}
+{"version":3,"file":"index.js","names":["StyledImageUploadSkeleton","styled","Skeleton","omitEmotionProps","p","theme","imageUploadMaxWidth","imageUploadMinHeight","sizeStyles","ImageUploadSkeleton","forwardRef","props","ref","displayName"],"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  height: ${(p) => p.theme.imageUploadMinHeight}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n  HTMLDivElement,\n  ImageUploadSkeletonProps\n>((props, ref) => (\n  <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AAA0D;AAAA;AAAA;AAAA;AAAA;AAAA;AAI1D,IAAMA,yBAAyB,GAAG,IAAAC,kBAAM,EACtCC,cAAQ,EACR,IAAAC,uBAAgB,EAAC,MAAM,CAAC,CACzB,0HACc,UAACC,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACC,mBAAmB;AAAA,GACrC,UAACF,CAAC;EAAA,OAAKA,CAAC,CAACC,KAAK,CAACE,oBAAoB;AAAA,GAC3CC,kBAAU,CACb;;AAED;AACA;AACA;AACA;AACA,IAAMC,mBAAmB,gBAAG,IAAAC,iBAAU,EAGpC,UAACC,KAAK,EAAEC,GAAG;EAAA,oBACX,gCAAC,yBAAyB;IAAC,KAAK,EAAC;EAAM,GAAKD,KAAK;IAAE,GAAG,EAAEC;EAAI,GAAG;AAAA,CAChE,CAAC;AAEFH,mBAAmB,CAACI,WAAW,GAAG,qBAAqB;AAAC,eAEzCJ,mBAAmB;AAAA"}

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,9 +20,7 @@ Object.defineProperty(exports, "ImageUploadSkeleton", {
     return _ImageUploadSkeleton["default"];
   }
 });
-
 var _ImageUpload = _interopRequireWildcard(require("./ImageUpload"));
-
 Object.keys(_ImageUpload).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -35,9 +32,7 @@ Object.keys(_ImageUpload).forEach(function (key) {
     }
   });
 });
-
 var _ImageUploadSkeleton = _interopRequireWildcard(require("./ImageUploadSkeleton"));
-
 Object.keys(_ImageUploadSkeleton).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
@@ -49,8 +44,6 @@ Object.keys(_ImageUploadSkeleton).forEach(function (key) {
     }
   });
 });
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 //# sourceMappingURL=index.js.map

package/dist/cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from './ImageUpload';\nexport { default as ImageUpload } from './ImageUpload';\nexport * from './ImageUploadSkeleton';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;;AAEA;;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/index.ts"],"sourcesContent":["export * from './ImageUpload';\nexport { default as ImageUpload } from './ImageUpload';\nexport * from './ImageUploadSkeleton';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAEA;AAAA;EAAA;EAAA;EAAA;EAAA;IAAA;IAAA;MAAA;IAAA;EAAA;AAAA;AAAsC;AAAA"}

package/dist/esm/ImageUpload/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Button, Image } from '@os-design/core';
@@ -10,12 +9,10 @@ import { isTouchDevice, omitEmotionProps, useForwardedState } from '@os-design/u
 import React, { forwardRef, useCallback, useMemo } from 'react';
 import { useDropzone } from 'react-dropzone';
 import defaultLocale from './utils/defaultLocale';
-
 const overlayHasImageStyles = p => p.hasImage && css`
     background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});
     color: hsl(0, 0%, 100%);
   `;
-
 const overlayHasImageHoverStyles = p => p.hasImage && !p.isDragActive && css`
     @media (hover: hover) {
       opacity: 0;
@@ -25,7 +22,6 @@ const overlayHasImageHoverStyles = p => p.hasImage && !p.isDragActive && css`
       }
     }
   `;
-
 export const Overlay = styled('div', omitEmotionProps('isDragActive', 'hasImage'))`
   ${resetFocusStyles};
   position: absolute;
@@ -46,11 +42,9 @@ export const Overlay = styled('div', omitEmotionProps('isDragActive', 'hasImage'
   ${overlayHasImageHoverStyles}
   ${transitionStyles('opacity')};
 `;
-
 const contentIsDragActiveStyles = p => p.isDragActive && css`
     transform: scale(0.92);
   `;
-
 const Content = styled('div', omitEmotionProps('isDragActive'))`
   ${contentIsDragActiveStyles};
   ${transitionStyles('transform')};
@@ -67,11 +61,9 @@ const DeleteButtonContainer = styled.div`
   top: 0.5em;
   right: 0.5em;
 `;
-
 const hoverStyles = p => css`
   border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};
 `;
-
 const notHasImageStyles = p => !p.hasImage && css`
     background-color: ${clr(p.theme.imageUploadNoImageColorBg)};
     border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};
@@ -82,7 +74,6 @@ const notHasImageStyles = p => !p.hasImage && css`
       }
     }
   `;
-
 const focusStyles = p => css`
   &:focus-within {
     & > div {
@@ -91,11 +82,9 @@ const focusStyles = p => css`
     ${hoverStyles(p)};
   }
 `;
-
 const isDragActiveStyles = p => p.isDragActive && css`
     ${hoverStyles(p)};
   `;
-
 const LocalImage = styled.img`
   width: 100%;
   vertical-align: top;
@@ -120,10 +109,10 @@ const Container = styled('div', omitEmotionProps('isDragActive', 'hasImage', 'si
   ${sizeStyles};
   ${transitionStyles('border')};
 `;
+
 /**
  * The component to upload an image.
  */
-
 const ImageUpload = /*#__PURE__*/forwardRef(({
   url,
   accept = {
@@ -153,22 +142,18 @@ const ImageUpload = /*#__PURE__*/forwardRef(({
   });
   const source = useMemo(() => {
     if (forwardedValue === null) return null; // If the user select an image
-
     if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists
-
     if (url) return url;
     return null;
   }, [forwardedValue, url]);
   const hasImage = useMemo(() => !!source, [source]);
   const renderImage = useCallback(() => {
     if (!source) return null;
-
     if (typeof forwardedValue === 'object' && forwardedValue !== null) {
       return /*#__PURE__*/React.createElement(LocalImage, {
         src: source
       });
     }
-
     return /*#__PURE__*/React.createElement(RemoteImage, {
       url: source
     });

package/dist/esm/ImageUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["css","styled","Button","Image","Delete","Picture","resetFocusStyles","sizeStyles","transitionStyles","clr","ThemeOverrider","isTouchDevice","omitEmotionProps","useForwardedState","React","forwardRef","useCallback","useMemo","useDropzone","defaultLocale","overlayHasImageStyles","p","hasImage","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Title","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","ImageUpload","url","accept","locale","value","defaultValue","onChange","size","rest","ref","touchDevice","forwardedValue","setForwardedValue","getRootProps","getInputProps","multiple","onDrop","file","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedState,\n} from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { Accept, useDropzone } from 'react-dropzone';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n  /**\n   * The url of the image.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * Allowed image formats.\n   * @default undefined\n   */\n  accept?: Accept;\n  /**\n   * The locale of the component.\n   * @default undefined\n   */\n  locale?: ImageUploadLocale;\n  /**\n   * The selected local file, or null if the image is marked as deleted.\n   * @default undefined\n   */\n  value?: File | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: File | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n  p.hasImage &&\n  css`\n    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n    color: hsl(0, 0%, 100%);\n  `;\n\nconst overlayHasImageHoverStyles = (p) =>\n  p.hasImage &&\n  !p.isDragActive &&\n  css`\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  `;\n\ninterface OverlayProps {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\nexport const Overlay = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n  ${resetFocusStyles};\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n  ${overlayHasImageStyles};\n  ${overlayHasImageHoverStyles}\n  ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    transform: scale(0.92);\n  `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n  ${contentIsDragActiveStyles};\n  ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n  opacity: 0.8;\n  font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n  opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n  !p.hasImage &&\n  css`\n    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n    @media (hover: hover) {\n      &:hover {\n        ${hoverStyles(p)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) => css`\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ${hoverStyles(p)};\n  }\n`;\n\nconst isDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    ${hoverStyles(p)};\n  `;\n\nconst LocalImage = styled.img`\n  width: 100%;\n  vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n  vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\n\nconst Container = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${notHasImageStyles};\n  ${focusStyles};\n  ${isDragActiveStyles};\n  ${sizeStyles};\n  ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n  (\n    {\n      url,\n      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n      accept,\n      multiple: false,\n      onDrop: ([file]) => setForwardedValue(file),\n    });\n\n    const source = useMemo(() => {\n      if (forwardedValue === null) return null; // If the user select an image\n      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n      if (url) return url;\n      return null;\n    }, [forwardedValue, url]);\n\n    const hasImage = useMemo(() => !!source, [source]);\n\n    const renderImage = useCallback(() => {\n      if (!source) return null;\n      if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n        return <LocalImage src={source} />;\n      }\n      return <RemoteImage url={source} />;\n    }, [forwardedValue, source]);\n\n    return (\n      <Container\n        isDragActive={isDragActive}\n        hasImage={hasImage}\n        size={size}\n        onMouseDown={(e) => e.preventDefault()}\n        {...rest}\n        ref={ref}\n      >\n        <input {...getInputProps()} />\n        {renderImage()}\n\n        <Overlay\n          isDragActive={isDragActive}\n          hasImage={hasImage}\n          {\n            ...getRootProps({\n              onKeyDown: (e) => {\n                if (e.key === 'Backspace') setForwardedValue(null);\n              },\n            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n          }\n        >\n          <Content isDragActive={isDragActive}>\n            <PictureIcon />\n            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n          </Content>\n\n          {hasImage && (\n            <ThemeOverrider\n              overrides={{\n                buttonGhostColorText: [0, 0, 100],\n                buttonGhostColorBgHover: [0, 0, 100, 0.1],\n              }}\n            >\n              <DeleteButtonContainer>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </DeleteButtonContainer>\n            </ThemeOverrider>\n          )}\n        </Overlay>\n      </Container>\n    );\n  }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["css","styled","Button","Image","Delete","Picture","resetFocusStyles","sizeStyles","transitionStyles","clr","ThemeOverrider","isTouchDevice","omitEmotionProps","useForwardedState","React","forwardRef","useCallback","useMemo","useDropzone","defaultLocale","overlayHasImageStyles","p","hasImage","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Title","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","ImageUpload","url","accept","locale","value","defaultValue","onChange","size","rest","ref","touchDevice","forwardedValue","setForwardedValue","getRootProps","getInputProps","multiple","onDrop","file","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"sources":["../../../src/ImageUpload/index.tsx"],"sourcesContent":["import { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { Button, Image } from '@os-design/core';\nimport { Delete, Picture } from '@os-design/icons';\nimport {\n  resetFocusStyles,\n  sizeStyles,\n  transitionStyles,\n  WithSize,\n} from '@os-design/styles';\nimport { clr, ThemeOverrider } from '@os-design/theming';\nimport {\n  isTouchDevice,\n  omitEmotionProps,\n  useForwardedState,\n} from '@os-design/utils';\nimport React, { forwardRef, useCallback, useMemo } from 'react';\nimport { Accept, useDropzone } from 'react-dropzone';\nimport defaultLocale, { ImageUploadLocale } from './utils/defaultLocale';\n\ntype JsxDivProps = Omit<\n  JSX.IntrinsicElements['div'],\n  'defaultValue' | 'onChange' | 'ref'\n>;\nexport interface ImageUploadProps extends JsxDivProps, WithSize {\n  /**\n   * The url of the image.\n   * @default undefined\n   */\n  url?: string;\n  /**\n   * Allowed image formats.\n   * @default undefined\n   */\n  accept?: Accept;\n  /**\n   * The locale of the component.\n   * @default undefined\n   */\n  locale?: ImageUploadLocale;\n  /**\n   * The selected local file, or null if the image is marked as deleted.\n   * @default undefined\n   */\n  value?: File | null;\n  /**\n   * The default value.\n   * @default undefined\n   */\n  defaultValue?: File | null;\n  /**\n   * The change event handler.\n   * @default undefined\n   */\n  onChange?: (value: File | null) => void;\n}\n\nconst overlayHasImageStyles = (p) =>\n  p.hasImage &&\n  css`\n    background-color: hsla(0, 0%, 0%, ${p.theme.imageUploadOverlayOpacity});\n    color: hsl(0, 0%, 100%);\n  `;\n\nconst overlayHasImageHoverStyles = (p) =>\n  p.hasImage &&\n  !p.isDragActive &&\n  css`\n    @media (hover: hover) {\n      opacity: 0;\n\n      &:hover {\n        opacity: 1;\n      }\n    }\n  `;\n\ninterface OverlayProps {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\nexport const Overlay = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage')\n)<OverlayProps>`\n  ${resetFocusStyles};\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  text-align: center;\n  padding: ${(p) => p.theme.imageUploadOverlayPadding}em;\n\n  ${overlayHasImageStyles};\n  ${overlayHasImageHoverStyles}\n  ${transitionStyles('opacity')};\n`;\n\nconst contentIsDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    transform: scale(0.92);\n  `;\n\ntype ContentProps = Pick<OverlayProps, 'isDragActive'>;\nconst Content = styled('div', omitEmotionProps('isDragActive'))<ContentProps>`\n  ${contentIsDragActiveStyles};\n  ${transitionStyles('transform')};\n`;\n\nconst PictureIcon = styled(Picture)`\n  opacity: 0.8;\n  font-size: 2.5em;\n`;\n\nconst Title = styled.div`\n  opacity: 0.8;\n`;\n\nconst DeleteButtonContainer = styled.div`\n  position: absolute;\n  top: 0.5em;\n  right: 0.5em;\n`;\n\nconst hoverStyles = (p) => css`\n  border-color: ${clr(p.theme.imageUploadNoImageHoverColorBorder)};\n`;\n\nconst notHasImageStyles = (p) =>\n  !p.hasImage &&\n  css`\n    background-color: ${clr(p.theme.imageUploadNoImageColorBg)};\n    border: 2px dashed ${clr(p.theme.imageUploadNoImageColorBorder)};\n\n    @media (hover: hover) {\n      &:hover {\n        ${hoverStyles(p)};\n      }\n    }\n  `;\n\nconst focusStyles = (p) => css`\n  &:focus-within {\n    & > div {\n      opacity: 1;\n    }\n    ${hoverStyles(p)};\n  }\n`;\n\nconst isDragActiveStyles = (p) =>\n  p.isDragActive &&\n  css`\n    ${hoverStyles(p)};\n  `;\n\nconst LocalImage = styled.img`\n  width: 100%;\n  vertical-align: top;\n`;\n\nconst RemoteImage = styled(Image)`\n  vertical-align: top;\n`;\n\ninterface ContainerProps extends WithSize {\n  isDragActive: boolean;\n  hasImage: boolean;\n}\n\nconst Container = styled(\n  'div',\n  omitEmotionProps('isDragActive', 'hasImage', 'size')\n)<ContainerProps>`\n  position: relative;\n  cursor: pointer;\n  overflow: hidden;\n  box-sizing: border-box;\n\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  min-height: ${(p) => p.theme.imageUploadMinHeight}em;\n  border-radius: ${(p) => p.theme.borderRadius}em;\n  color: ${(p) => clr(p.theme.colorText)};\n\n  ${notHasImageStyles};\n  ${focusStyles};\n  ${isDragActiveStyles};\n  ${sizeStyles};\n  ${transitionStyles('border')};\n`;\n\n/**\n * The component to upload an image.\n */\nconst ImageUpload = forwardRef<HTMLDivElement, ImageUploadProps>(\n  (\n    {\n      url,\n      accept = { 'image/*': ['.jpeg', '.png', '.webp'] },\n      locale = defaultLocale,\n      value,\n      defaultValue,\n      onChange,\n      size,\n      ...rest\n    },\n    ref\n  ) => {\n    const touchDevice = useMemo(() => isTouchDevice(), []);\n    const [forwardedValue, setForwardedValue] = useForwardedState({\n      value,\n      defaultValue,\n      onChange,\n    });\n\n    const { getRootProps, getInputProps, isDragActive } = useDropzone({\n      accept,\n      multiple: false,\n      onDrop: ([file]) => setForwardedValue(file),\n    });\n\n    const source = useMemo(() => {\n      if (forwardedValue === null) return null; // If the user select an image\n      if (forwardedValue) return URL.createObjectURL(forwardedValue); // If the image already exists\n      if (url) return url;\n      return null;\n    }, [forwardedValue, url]);\n\n    const hasImage = useMemo(() => !!source, [source]);\n\n    const renderImage = useCallback(() => {\n      if (!source) return null;\n      if (typeof forwardedValue === 'object' && forwardedValue !== null) {\n        return <LocalImage src={source} />;\n      }\n      return <RemoteImage url={source} />;\n    }, [forwardedValue, source]);\n\n    return (\n      <Container\n        isDragActive={isDragActive}\n        hasImage={hasImage}\n        size={size}\n        onMouseDown={(e) => e.preventDefault()}\n        {...rest}\n        ref={ref}\n      >\n        <input {...getInputProps()} />\n        {renderImage()}\n\n        <Overlay\n          isDragActive={isDragActive}\n          hasImage={hasImage}\n          {\n            ...getRootProps({\n              onKeyDown: (e) => {\n                if (e.key === 'Backspace') setForwardedValue(null);\n              },\n            } as any) // eslint-disable-line @typescript-eslint/no-explicit-any\n          }\n        >\n          <Content isDragActive={isDragActive}>\n            <PictureIcon />\n            <Title>{touchDevice ? locale.touchTitle : locale.dropTitle}</Title>\n          </Content>\n\n          {hasImage && (\n            <ThemeOverrider\n              overrides={{\n                buttonGhostColorText: [0, 0, 100],\n                buttonGhostColorBgHover: [0, 0, 100, 0.1],\n              }}\n            >\n              <DeleteButtonContainer>\n                <Button\n                  type='ghost'\n                  wide='never'\n                  onClick={(e) => {\n                    setForwardedValue(null);\n                    e.stopPropagation();\n                  }}\n                >\n                  <Delete />\n                </Button>\n              </DeleteButtonContainer>\n            </ThemeOverrider>\n          )}\n        </Overlay>\n      </Container>\n    );\n  }\n);\n\nImageUpload.displayName = 'ImageUpload';\n\nexport default ImageUpload;\n"],"mappings":"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"}

package/dist/esm/ImageUpload/utils/defaultLocale.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaultLocale.js","names":["defaultLocale","touchTitle","dropTitle"],"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n  touchTitle: string;\n  dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n  touchTitle: 'Click here to choose an image',\n  dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAKA,MAAMA,aAAgC,GAAG;EACvCC,UAAU,EAAE,+BAD2B;EAEvCC,SAAS,EAAE;AAF4B,CAAzC;AAKA,eAAeF,aAAf"}
+{"version":3,"file":"defaultLocale.js","names":["defaultLocale","touchTitle","dropTitle"],"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"sourcesContent":["export interface ImageUploadLocale {\n  touchTitle: string;\n  dropTitle: string;\n}\n\nconst defaultLocale: ImageUploadLocale = {\n  touchTitle: 'Click here to choose an image',\n  dropTitle: 'Drop an image here or click to choose it',\n};\n\nexport default defaultLocale;\n"],"mappings":"AAKA,MAAMA,aAAgC,GAAG;EACvCC,UAAU,EAAE,+BAA+B;EAC3CC,SAAS,EAAE;AACb,CAAC;AAED,eAAeF,aAAa"}

package/dist/esm/ImageUploadSkeleton/index.js

@@ -1,5 +1,4 @@
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import styled from '@emotion/styled';
 import React, { forwardRef } from 'react';
 import { sizeStyles } from '@os-design/styles';
@@ -10,11 +9,11 @@ const StyledImageUploadSkeleton = styled(Skeleton, omitEmotionProps('size'))`
   height: ${p => p.theme.imageUploadMinHeight}em;
   ${sizeStyles};
 `;
+
 /**
  * Provides an image upload placeholder while a user waits for
  * the content to load.
  */
-
 const ImageUploadSkeleton = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/React.createElement(StyledImageUploadSkeleton, _extends({
   width: "100%"
 }, props, {

package/dist/esm/ImageUploadSkeleton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledImageUploadSkeleton","p","theme","imageUploadMaxWidth","imageUploadMinHeight","ImageUploadSkeleton","props","ref","displayName"],"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  height: ${(p) => p.theme.imageUploadMinHeight}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n  HTMLDivElement,\n  ImageUploadSkeletonProps\n>((props, ref) => (\n  <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"mappings":";;AAAA,OAAOA,MAAP,MAAmB,iBAAnB;AACA,OAAOC,KAAP,IAAgBC,UAAhB,QAAkC,OAAlC;AACA,SAASC,UAAT,QAAqC,mBAArC;AACA,SAASC,gBAAT,QAAiC,kBAAjC;AACA,SAASC,QAAT,QAAwC,iBAAxC;AAIA,MAAMC,yBAAyB,GAAGN,MAAM,CACtCK,QADsC,EAEtCD,gBAAgB,CAAC,MAAD,CAFsB,CAG5B;AACZ,eAAgBG,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAoB;AAClD,YAAaF,CAAD,IAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAqB;AAChD,IAAIP,UAAW;AACf,CAPA;AASA;AACA;AACA;AACA;;AACA,MAAMQ,mBAAmB,gBAAGT,UAAU,CAGpC,CAACU,KAAD,EAAQC,GAAR,kBACA,oBAAC,yBAAD;EAA2B,KAAK,EAAC;AAAjC,GAA4CD,KAA5C;EAAmD,GAAG,EAAEC;AAAxD,GAJoC,CAAtC;AAOAF,mBAAmB,CAACG,WAApB,GAAkC,qBAAlC;AAEA,eAAeH,mBAAf"}
+{"version":3,"file":"index.js","names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledImageUploadSkeleton","p","theme","imageUploadMaxWidth","imageUploadMinHeight","ImageUploadSkeleton","props","ref","displayName"],"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"sourcesContent":["import styled from '@emotion/styled';\nimport React, { forwardRef } from 'react';\nimport { sizeStyles, WithSize } from '@os-design/styles';\nimport { omitEmotionProps } from '@os-design/utils';\nimport { Skeleton, SkeletonProps } from '@os-design/core';\n\nexport type ImageUploadSkeletonProps = Omit<SkeletonProps, 'width'> & WithSize;\n\nconst StyledImageUploadSkeleton = styled(\n  Skeleton,\n  omitEmotionProps('size')\n)<WithSize>`\n  max-width: ${(p) => p.theme.imageUploadMaxWidth}em;\n  height: ${(p) => p.theme.imageUploadMinHeight}em;\n  ${sizeStyles};\n`;\n\n/**\n * Provides an image upload placeholder while a user waits for\n * the content to load.\n */\nconst ImageUploadSkeleton = forwardRef<\n  HTMLDivElement,\n  ImageUploadSkeletonProps\n>((props, ref) => (\n  <StyledImageUploadSkeleton width='100%' {...props} ref={ref} />\n));\n\nImageUploadSkeleton.displayName = 'ImageUploadSkeleton';\n\nexport default ImageUploadSkeleton;\n"],"mappings":";AAAA,OAAOA,MAAM,MAAM,iBAAiB;AACpC,OAAOC,KAAK,IAAIC,UAAU,QAAQ,OAAO;AACzC,SAASC,UAAU,QAAkB,mBAAmB;AACxD,SAASC,gBAAgB,QAAQ,kBAAkB;AACnD,SAASC,QAAQ,QAAuB,iBAAiB;AAIzD,MAAMC,yBAAyB,GAAGN,MAAM,CACtCK,QAAQ,EACRD,gBAAgB,CAAC,MAAM,CAAC,CACd;AACZ,eAAgBG,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACC,mBAAoB;AAClD,YAAaF,CAAC,IAAKA,CAAC,CAACC,KAAK,CAACE,oBAAqB;AAChD,IAAIP,UAAW;AACf,CAAC;;AAED;AACA;AACA;AACA;AACA,MAAMQ,mBAAmB,gBAAGT,UAAU,CAGpC,CAACU,KAAK,EAAEC,GAAG,kBACX,oBAAC,yBAAyB;EAAC,KAAK,EAAC;AAAM,GAAKD,KAAK;EAAE,GAAG,EAAEC;AAAI,GAC7D,CAAC;AAEFF,mBAAmB,CAACG,WAAW,GAAG,qBAAqB;AAEvD,eAAeH,mBAAmB"}

package/dist/esm/emotion.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n  // eslint-disable-next-line @typescript-eslint/no-empty-interface\n  export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAP"}
+{"version":3,"file":"emotion.d.js","names":[],"sources":["../../src/emotion.d.ts"],"sourcesContent":["import '@emotion/react';\nimport { Theme as BaseTheme } from '@os-design/theming';\n\ndeclare module '@emotion/react' {\n  // eslint-disable-next-line @typescript-eslint/no-empty-interface\n  export interface Theme extends BaseTheme {}\n}\n"],"mappings":"AAAA,OAAO,gBAAgB"}

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","ImageUpload","ImageUploadSkeleton"],"sources":["../../src/index.ts"],"sourcesContent":["export * from './ImageUpload';\nexport { default as ImageUpload } from './ImageUpload';\nexport * from './ImageUploadSkeleton';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n"],"mappings":"AAAA,cAAc,eAAd;AACA,SAASA,OAAO,IAAIC,WAApB,QAAuC,eAAvC;AACA,cAAc,uBAAd;AACA,SAASD,OAAO,IAAIE,mBAApB,QAA+C,uBAA/C"}
+{"version":3,"file":"index.js","names":["default","ImageUpload","ImageUploadSkeleton"],"sources":["../../src/index.ts"],"sourcesContent":["export * from './ImageUpload';\nexport { default as ImageUpload } from './ImageUpload';\nexport * from './ImageUploadSkeleton';\nexport { default as ImageUploadSkeleton } from './ImageUploadSkeleton';\n"],"mappings":"AAAA,cAAc,eAAe;AAC7B,SAASA,OAAO,IAAIC,WAAW,QAAQ,eAAe;AACtD,cAAc,uBAAuB;AACrC,SAASD,OAAO,IAAIE,mBAAmB,QAAQ,uBAAuB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/upload",
-  "version": "1.0.159",
+  "version": "1.0.161",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -29,7 +29,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.156",
+    "@os-design/core": "^1.0.158",
     "@os-design/icons": "^1.0.41",
     "@os-design/styles": "^1.0.39",
     "@os-design/theming": "^1.0.37",
@@ -46,5 +46,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "5a2a0d8ca15882259f4f84a52faca3e43f79841b"
+  "gitHead": "1f7502d2714949d3dabaa8e103a4e315fda8e2f8"
 }