@os-design/upload 1.0.136 → 1.0.139

package/dist/cjs/ImageUpload/index.js

@@ -116,7 +116,9 @@ var Container = (0, _styled["default"])('div', (0, _utils.omitEmotionProps)('isD
 var ImageUpload = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var url = _ref.url,
       _ref$accept = _ref.accept,
-      accept = _ref$accept === void 0 ? ['image/jpeg', 'image/png', 'image/webp'] : _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,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ImageUpload/index.tsx"],"names":["overlayHasImageStyles","p","hasImage","css","theme","imageUploadOverlayOpacity","overlayHasImageHoverStyles","isDragActive","Overlay","resetFocusStyles","imageUploadOverlayPadding","contentIsDragActiveStyles","Content","PictureIcon","Picture","Title","styled","div","DeleteButtonContainer","hoverStyles","imageUploadNoImageHoverColorBorder","notHasImageStyles","imageUploadNoImageColorBg","imageUploadNoImageColorBorder","focusStyles","isDragActiveStyles","LocalImage","img","RemoteImage","Image","Container","imageUploadMaxWidth","imageUploadMinHeight","borderRadius","colorText","sizeStyles","ImageUpload","ref","url","accept","locale","defaultLocale","value","defaultValue","onChange","size","rest","touchDevice","forwardedValue","setForwardedValue","multiple","onDrop","file","getRootProps","getInputProps","source","URL","createObjectURL","renderImage","e","preventDefault","onKeyDown","key","touchTitle","dropTitle","buttonGhostColorText","buttonGhostColorBgHover","stopPropagation","displayName"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\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 {\n  omitEmotionProps,\n  isTouchDevice,\n  useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\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?: string | string[];\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', 'image/png', 'image/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"],"file":"index.js"}
+{"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 React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone, Accept } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\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 {\n  omitEmotionProps,\n  isTouchDevice,\n  useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\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,"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"names":["defaultLocale","touchTitle","dropTitle"],"mappings":";;;;;;AAKA,IAAMA,aAAgC,GAAG;AACvCC,EAAAA,UAAU,EAAE,+BAD2B;AAEvCC,EAAAA,SAAS,EAAE;AAF4B,CAAzC;eAKeF,a","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"],"file":"defaultLocale.js"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"names":["StyledImageUploadSkeleton","Skeleton","p","theme","imageUploadMaxWidth","imageUploadMinHeight","sizeStyles","ImageUploadSkeleton","props","ref","displayName"],"mappings":";;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;AAIA,IAAMA,yBAAyB,GAAG,wBAChCC,cADgC,EAEhC,6BAAiB,MAAjB,CAFgC,CAAH,0HAIhB,UAACC,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQC,mBAAf;AAAA,CAJgB,EAKnB,UAACF,CAAD;AAAA,SAAOA,CAAC,CAACC,KAAF,CAAQE,oBAAf;AAAA,CALmB,EAM3BC,kBAN2B,CAA/B;AASA;AACA;AACA;AACA;;AACA,IAAMC,mBAAmB,gBAAG,uBAG1B,UAACC,KAAD,EAAQC,GAAR;AAAA,sBACA,gCAAC,yBAAD;AAA2B,IAAA,KAAK,EAAC;AAAjC,KAA4CD,KAA5C;AAAmD,IAAA,GAAG,EAAEC;AAAxD,KADA;AAAA,CAH0B,CAA5B;AAOAF,mBAAmB,CAACG,WAApB,GAAkC,qBAAlC;eAEeH,mB","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"],"file":"index.js"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/emotion.d.ts"],"names":[],"mappings":";;AAAA","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"],"file":"emotion.d.js"}
+{"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"}

package/dist/cjs/index.js.map

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

package/dist/esm/ImageUpload/index.js

@@ -126,7 +126,9 @@ const Container = styled('div', omitEmotionProps('isDragActive', 'hasImage', 'si
 
 const ImageUpload = /*#__PURE__*/forwardRef(({
   url,
-  accept = ['image/jpeg', 'image/png', 'image/webp'],
+  accept = {
+    'image/*': ['.jpeg', '.png', '.webp']
+  },
   locale = defaultLocale,
   value,
   defaultValue,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ImageUpload/index.tsx"],"names":["React","forwardRef","useCallback","useMemo","useDropzone","styled","css","Button","Image","Delete","Picture","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","isTouchDevice","useForwardedState","clr","ThemeOverrider","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"],"mappings":"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","sourcesContent":["import React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\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 {\n  omitEmotionProps,\n  isTouchDevice,\n  useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\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?: string | string[];\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', 'image/png', 'image/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"],"file":"index.js"}
+{"version":3,"file":"index.js","names":["React","forwardRef","useCallback","useMemo","useDropzone","styled","css","Button","Image","Delete","Picture","resetFocusStyles","sizeStyles","transitionStyles","omitEmotionProps","isTouchDevice","useForwardedState","clr","ThemeOverrider","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 React, { forwardRef, useCallback, useMemo } from 'react';\nimport { useDropzone, Accept } from 'react-dropzone';\nimport styled from '@emotion/styled';\nimport { css } from '@emotion/react';\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 {\n  omitEmotionProps,\n  isTouchDevice,\n  useForwardedState,\n} from '@os-design/utils';\nimport { clr, ThemeOverrider } from '@os-design/theming';\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,"sources":["../../../../src/ImageUpload/utils/defaultLocale.ts"],"names":["defaultLocale","touchTitle","dropTitle"],"mappings":"AAKA,MAAMA,aAAgC,GAAG;AACvCC,EAAAA,UAAU,EAAE,+BAD2B;AAEvCC,EAAAA,SAAS,EAAE;AAF4B,CAAzC;AAKA,eAAeF,aAAf","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"],"file":"defaultLocale.js"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/ImageUploadSkeleton/index.tsx"],"names":["styled","React","forwardRef","sizeStyles","omitEmotionProps","Skeleton","StyledImageUploadSkeleton","p","theme","imageUploadMaxWidth","imageUploadMinHeight","ImageUploadSkeleton","props","ref","displayName"],"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;AAA2B,EAAA,KAAK,EAAC;AAAjC,GAA4CD,KAA5C;AAAmD,EAAA,GAAG,EAAEC;AAAxD,GAJoC,CAAtC;AAOAF,mBAAmB,CAACG,WAApB,GAAkC,qBAAlC;AAEA,eAAeH,mBAAf","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"],"file":"index.js"}
+{"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"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/emotion.d.ts"],"names":[],"mappings":"AAAA,OAAO,gBAAP","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"],"file":"emotion.d.js"}
+{"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"}

package/dist/esm/index.js.map

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

package/dist/types/ImageUpload/index.d.ts

@@ -1,10 +1,11 @@
 import React from 'react';
+import { Accept } from 'react-dropzone';
 import { WithSize } from '@os-design/styles';
 import { ImageUploadLocale } from './utils/defaultLocale';
 declare type JsxDivProps = Omit<JSX.IntrinsicElements['div'], 'defaultValue' | 'onChange' | 'ref'>;
 export interface ImageUploadProps extends JsxDivProps, WithSize {
     url?: string;
-    accept?: string | string[];
+    accept?: Accept;
     locale?: ImageUploadLocale;
     value?: File | null;
     defaultValue?: File | null;

package/dist/types/ImageUpload/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAMhE,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAO3B,OAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,UAAU,GAAG,KAAK,CACpC,CAAC;AACF,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,QAAQ;IAK7D,GAAG,CAAC,EAAE,MAAM,CAAC;IAKb,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAK3B,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAK3B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAKpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAK3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAsBD,UAAU,YAAY;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,OAAO;;;oGAsBnB,CAAC;AAmGF,QAAA,MAAM,WAAW,yFAiGhB,CAAC;AAIF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ImageUpload/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA2C,MAAM,OAAO,CAAC;AAChE,OAAO,EAAe,MAAM,EAAE,MAAM,gBAAgB,CAAC;AAKrD,OAAO,EAIL,QAAQ,EACT,MAAM,mBAAmB,CAAC;AAO3B,OAAsB,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAEzE,aAAK,WAAW,GAAG,IAAI,CACrB,GAAG,CAAC,iBAAiB,CAAC,KAAK,CAAC,EAC5B,cAAc,GAAG,UAAU,GAAG,KAAK,CACpC,CAAC;AACF,MAAM,WAAW,gBAAiB,SAAQ,WAAW,EAAE,QAAQ;IAK7D,GAAG,CAAC,EAAE,MAAM,CAAC;IAKb,MAAM,CAAC,EAAE,MAAM,CAAC;IAKhB,MAAM,CAAC,EAAE,iBAAiB,CAAC;IAK3B,KAAK,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAKpB,YAAY,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IAK3B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,GAAG,IAAI,KAAK,IAAI,CAAC;CACzC;AAsBD,UAAU,YAAY;IACpB,YAAY,EAAE,OAAO,CAAC;IACtB,QAAQ,EAAE,OAAO,CAAC;CACnB;AACD,eAAO,MAAM,OAAO;;;oGAsBnB,CAAC;AAmGF,QAAA,MAAM,WAAW,yFAiGhB,CAAC;AAIF,eAAe,WAAW,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@os-design/upload",
-  "version": "1.0.136",
+  "version": "1.0.139",
   "license": "UNLICENSED",
   "repository": "git@gitlab.com:os-team/libs/os-design.git",
   "main": "dist/cjs/index.js",
@@ -28,12 +28,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@os-design/core": "^1.0.133",
+    "@os-design/core": "^1.0.136",
     "@os-design/icons": "^1.0.34",
     "@os-design/styles": "^1.0.32",
     "@os-design/theming": "^1.0.30",
     "@os-design/utils": "^1.0.46",
-    "react-dropzone": "^12.0.5"
+    "react-dropzone": "^14.2.1"
   },
   "devDependencies": {
     "@emotion/react": ">=11",
@@ -45,5 +45,5 @@
     "react": ">=18",
     "react-dom": ">=18"
   },
-  "gitHead": "afc4b29b0cb3c9bd7cff9032a44d2bc958550792"
+  "gitHead": "623c286ffe8221abff99412e41830002a5a1b353"
 }