@synerise/ds-file-uploader 1.3.9 → 1.3.11

package/dist/FileUploader.js

@@ -1,71 +1,53 @@
-var _excluded = ["className", "onUpload", "disabled", "accept", "error", "label", "onRemove", "description", "tooltip", "filesAmount", "mode", "removable", "files", "retry", "texts"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
-import { FormattedMessage } from 'react-intl';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { AddM, FileUploadL, InfoFillS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './FileUploader.styles';
-import FileView from './FileView/FileView';
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useImperativeHandle } from "react";
+import { useDropzone } from "react-dropzone";
+import { FormattedMessage } from "react-intl";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { InfoFillS, FileUploadL, AddM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { Container, Label, DropAreaContainer, DropAreaButton, LargeDropAreaLabel, LargeDropAreaDescription, DropAreaLabel, ErrorMessage, Description } from "./FileUploader.styles.js";
+import FileView from "./FileView/FileView.js";
 function readAsText(file) {
-  return new Promise(function (resolve) {
-    var reader = new FileReader();
-    file.type !== 'text/plain' && resolve(null);
-    reader.onerror = function () {
-      return resolve(null);
-    };
-    reader.onload = function () {
-      return resolve(reader.result);
-    };
+  return new Promise((resolve) => {
+    const reader = new FileReader();
+    file.type !== "text/plain" && resolve(null);
+    reader.onerror = () => resolve(null);
+    reader.onload = () => resolve(reader.result);
     reader.readAsText(file);
   });
 }
-var FileUploader = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var className = _ref.className,
-    onUpload = _ref.onUpload,
-    disabled = _ref.disabled,
-    accept = _ref.accept,
-    error = _ref.error,
-    label = _ref.label,
-    _onRemove = _ref.onRemove,
-    description = _ref.description,
-    tooltip = _ref.tooltip,
-    filesAmount = _ref.filesAmount,
-    _ref$mode = _ref.mode,
-    mode = _ref$mode === void 0 ? 'single' : _ref$mode,
-    _ref$removable = _ref.removable,
-    removable = _ref$removable === void 0 ? true : _ref$removable,
-    _ref$files = _ref.files,
-    files = _ref$files === void 0 ? [] : _ref$files,
-    retry = _ref.retry,
-    texts = _ref.texts,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useState = useState(true),
-    uploadSuccess = _useState[0],
-    setUploadSuccess = _useState[1];
-  var theme = useTheme();
-  var finalTexts = _extends({
-    buttonLabel: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.FILE-UPLOADER.BUTTON-LABEL",
-      defaultMessage: "Upload file"
-    }),
-    buttonLabelLarge: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.FILE-UPLOADER.BUTTON-LABEL-LARGE",
-      defaultMessage: "Upload file"
-    }),
-    buttonDescription: /*#__PURE__*/React.createElement(FormattedMessage, {
-      id: "DS.FILE-UPLOADER.BUTTON-DESC",
-      defaultMessage: "Description"
-    })
-  }, texts);
-  var readFilesContent = useCallback(function (addedFiles) {
-    var readerPromises = addedFiles.map(function (file) {
+const FileUploader = forwardRef(({
+  className,
+  onUpload,
+  disabled,
+  accept,
+  error,
+  label,
+  onRemove,
+  description,
+  tooltip,
+  filesAmount,
+  mode = "single",
+  removable = true,
+  files = [],
+  retry,
+  texts,
+  ...rest
+}, ref) => {
+  const [uploadSuccess, setUploadSuccess] = useState(true);
+  const theme = useTheme();
+  const finalTexts = {
+    buttonLabel: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.FILE-UPLOADER.BUTTON-LABEL", defaultMessage: "Upload file" }),
+    buttonLabelLarge: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.FILE-UPLOADER.BUTTON-LABEL-LARGE", defaultMessage: "Upload file" }),
+    buttonDescription: /* @__PURE__ */ jsx(FormattedMessage, { id: "DS.FILE-UPLOADER.BUTTON-DESC", defaultMessage: "Description" }),
+    ...texts
+  };
+  const readFilesContent = useCallback((addedFiles) => {
+    const readerPromises = addedFiles.map((file) => {
       return readAsText(file);
     });
-    Promise.all(readerPromises).then(function (filesContent) {
-      var filesWithContent = addedFiles.map(function (file, index) {
+    Promise.all(readerPromises).then((filesContent) => {
+      const filesWithContent = addedFiles.map((file, index) => {
         return Object.assign(file, {
           content: filesContent[index]
         });
@@ -73,8 +55,8 @@ var FileUploader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       onUpload && onUpload(filesWithContent);
     });
   }, [onUpload]);
-  var onDrop = useCallback(function (acceptedFiles) {
-    var possibleUpload = 0;
+  const onDrop = useCallback((acceptedFiles) => {
+    let possibleUpload = 0;
     if (filesAmount) {
       possibleUpload = filesAmount - files.length;
     }
@@ -85,91 +67,54 @@ var FileUploader = /*#__PURE__*/forwardRef(function (_ref, ref) {
       readFilesContent(acceptedFiles);
     }
   }, [filesAmount, files, setUploadSuccess, readFilesContent]);
-  var _useDropzone = useDropzone({
-      accept: accept ? accept.join(',') : undefined,
-      multiple: mode !== 'single',
-      onDrop: onDrop,
-      disabled: disabled
-    }),
-    getRootProps = _useDropzone.getRootProps,
-    getInputProps = _useDropzone.getInputProps,
-    isDragActive = _useDropzone.isDragActive,
-    open = _useDropzone.open,
-    inputRef = _useDropzone.inputRef,
-    rootRef = _useDropzone.rootRef;
-  useImperativeHandle(ref, function () {
-    return {
-      open: open,
-      inputRef: inputRef,
-      rootRef: rootRef
-    };
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    open,
+    inputRef,
+    rootRef
+  } = useDropzone({
+    accept: accept ? accept.join(",") : void 0,
+    multiple: mode !== "single",
+    onDrop,
+    disabled
   });
+  useImperativeHandle(ref, () => ({
+    open,
+    inputRef,
+    rootRef
+  }));
   if (filesAmount && filesAmount < 1) {
     filesAmount = 1;
     throw new Error('Invalid value of property "filesAmount" ');
   }
-  var hasError = Boolean(error) || !uploadSuccess;
-  var _useState2 = useState(false),
-    pressed = _useState2[0],
-    setPressed = _useState2[1];
-  var errors = hasError && !uploadSuccess ? [error].concat('To many files uploaded') : [error];
-  return /*#__PURE__*/React.createElement(S.Container, _extends({
-    className: "ds-file-uploader " + (className || '')
-  }, rest), label && /*#__PURE__*/React.createElement(S.Label, null, /*#__PURE__*/React.createElement("span", null, label), tooltip && /*#__PURE__*/React.createElement(Tooltip, {
-    trigger: "hover",
-    placement: "top",
-    title: tooltip
-  }, /*#__PURE__*/React.createElement("span", {
-    "data-testid": "tooltip-info"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(InfoFillS, null),
-    size: 24
-  })))), /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(S.DropAreaContainer, _extends({}, getRootProps(), {
-    canUploadMore: mode !== 'single' && files.length > 0
-  }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
-    "data-testid": "droparea-input"
-  })), /*#__PURE__*/React.createElement(S.DropAreaButton, {
-    type: "button",
-    hidden: !(mode !== 'single' && (filesAmount ? files.length < filesAmount : true) || files.length === 0),
-    mode: mode,
-    disabled: disabled,
-    isDropping: isDragActive,
-    hasError: hasError,
-    onMouseDown: function onMouseDown() {
-      return setPressed(true);
-    },
-    onMouseUp: function onMouseUp() {
-      return setPressed(false);
-    },
-    pressed: pressed,
-    "data-testid": "droparea",
-    filesLength: files.length
-  }, mode === 'multi-large' && files.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-    color: theme.palette['grey-800'],
-    component: /*#__PURE__*/React.createElement(FileUploadL, null),
-    size: 48
-  }), /*#__PURE__*/React.createElement(S.LargeDropAreaLabel, null, finalTexts.buttonLabelLarge), /*#__PURE__*/React.createElement(S.LargeDropAreaDescription, null, finalTexts.buttonDescription)) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-    color: theme.palette['grey-600'],
-    component: /*#__PURE__*/React.createElement(AddM, null),
-    size: 24
-  }), /*#__PURE__*/React.createElement(S.DropAreaLabel, null, finalTexts.buttonLabel))))), files.length > 0 && files.map(function (file, index) {
-    return /*#__PURE__*/React.createElement(FileView, {
-      key: index,
-      texts: texts,
-      removable: removable,
-      onRemove: function onRemove() {
-        return _onRemove && _onRemove(file.file, index);
-      },
-      data: file,
-      retry: retry,
-      retryButtonProps: _extends({}, getRootProps())
-    });
-  }), hasError && errors && errors.map(function (errorText, index) {
-    return /*#__PURE__*/React.createElement(S.ErrorMessage, {
-      key: index
-    }, errorText);
-  }), description && /*#__PURE__*/React.createElement(S.Description, {
-    hasError: hasError
-  }, description));
+  const hasError = Boolean(error) || !uploadSuccess;
+  const [pressed, setPressed] = useState(false);
+  const errors = hasError && !uploadSuccess ? [error].concat("To many files uploaded") : [error];
+  return /* @__PURE__ */ jsxs(Container, { className: `ds-file-uploader ${className || ""}`, ...rest, children: [
+    label && /* @__PURE__ */ jsxs(Label, { children: [
+      /* @__PURE__ */ jsx("span", { children: label }),
+      tooltip && /* @__PURE__ */ jsx(Tooltip, { trigger: "hover", placement: "top", title: tooltip, children: /* @__PURE__ */ jsx("span", { "data-testid": "tooltip-info", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(InfoFillS, {}), size: 24 }) }) })
+    ] }),
+    /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(DropAreaContainer, { ...getRootProps(), canUploadMore: mode !== "single" && files.length > 0, children: [
+      /* @__PURE__ */ jsx("input", { ...getInputProps(), "data-testid": "droparea-input" }),
+      /* @__PURE__ */ jsx(DropAreaButton, { type: "button", hidden: !(mode !== "single" && (filesAmount ? files.length < filesAmount : true) || files.length === 0), mode, disabled, isDropping: isDragActive, hasError, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), pressed, "data-testid": "droparea", filesLength: files.length, children: mode === "multi-large" && files.length === 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { color: theme.palette["grey-800"], component: /* @__PURE__ */ jsx(FileUploadL, {}), size: 48 }),
+        /* @__PURE__ */ jsx(LargeDropAreaLabel, { children: finalTexts.buttonLabelLarge }),
+        /* @__PURE__ */ jsx(LargeDropAreaDescription, { children: finalTexts.buttonDescription })
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Icon, { color: theme.palette["grey-600"], component: /* @__PURE__ */ jsx(AddM, {}), size: 24 }),
+        /* @__PURE__ */ jsx(DropAreaLabel, { children: finalTexts.buttonLabel })
+      ] }) })
+    ] }) }),
+    files.length > 0 && files.map((file, index) => /* @__PURE__ */ jsx(FileView, { texts, removable, onRemove: () => onRemove && onRemove(file.file, index), data: file, retry, retryButtonProps: {
+      ...getRootProps()
+    } }, index)),
+    hasError && errors && errors.map((errorText, index) => /* @__PURE__ */ jsx(ErrorMessage, { children: errorText }, index)),
+    description && /* @__PURE__ */ jsx(Description, { hasError, children: description })
+  ] });
 });
-export default FileUploader;
+export {
+  FileUploader as default
+};

package/dist/FileUploader.styles.d.ts

@@ -1,33 +1,33 @@
-import { type StyledButton } from '@synerise/ds-button';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Description: import("styled-components").StyledComponent<({ size, className, children, ellipsis, style, }: {
-    size?: import("@synerise/ds-typography").TextSize;
-    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
-    children?: import("react").ReactNode;
+import { StyledButton } from '@synerise/ds-button';
+export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const Description: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
     className?: string;
-    style?: import("react").CSSProperties;
+    style?: import('react').CSSProperties;
 }) => React.JSX.Element, any, {
     hasError?: boolean;
 }, never>;
-export declare const DropAreaContainer: import("styled-components").StyledComponent<"div", any, {
+export declare const DropAreaContainer: import('styled-components').StyledComponent<"div", any, {
     canUploadMore: boolean;
 }, never>;
-export declare const DropAreaLabel: import("styled-components").StyledComponent<({ size, className, children, ellipsis, style, }: {
-    size?: import("@synerise/ds-typography").TextSize;
-    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
-    children?: import("react").ReactNode;
+export declare const DropAreaLabel: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
     className?: string;
-    style?: import("react").CSSProperties;
+    style?: import('react').CSSProperties;
 }) => React.JSX.Element, any, {}, never>;
-export declare const LargeDropAreaLabel: import("styled-components").StyledComponent<"label", any, {}, never>;
-export declare const LargeDropAreaDescription: import("styled-components").StyledComponent<({ size, className, children, ellipsis, style, }: {
-    size?: import("@synerise/ds-typography").TextSize;
-    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
-    children?: import("react").ReactNode;
+export declare const LargeDropAreaLabel: import('styled-components').StyledComponent<"label", any, {}, never>;
+export declare const LargeDropAreaDescription: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
     className?: string;
-    style?: import("react").CSSProperties;
+    style?: import('react').CSSProperties;
 }) => React.JSX.Element, any, {}, never>;
-export declare const DropAreaButton: import("styled-components").StyledComponent<"button", any, {
+export declare const DropAreaButton: import('styled-components').StyledComponent<"button", any, {
     isDropping?: boolean;
     hasError?: boolean;
     mode: string;
@@ -35,13 +35,12 @@ export declare const DropAreaButton: import("styled-components").StyledComponent
     filesLength: number;
     hidden: boolean;
 }, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<({ size, className, children, ellipsis, style, }: {
-    size?: import("@synerise/ds-typography").TextSize;
-    ellipsis?: import("@synerise/ds-typography/dist/Ellipsis").EllipsisProps;
-    children?: import("react").ReactNode;
+export declare const ErrorMessage: import('styled-components').StyledComponent<({ size, className, children, ellipsis, style, }: {
+    size?: import('@synerise/ds-typography').TextSize;
+    ellipsis?: import('@synerise/ds-typography/dist/Ellipsis').EllipsisProps;
+    children?: import('react').ReactNode;
     className?: string;
-    style?: import("react").CSSProperties;
+    style?: import('react').CSSProperties;
 }) => React.JSX.Element, any, {}, never>;
-export declare const Label: import("styled-components").StyledComponent<"label", any, {}, never>;
+export declare const Label: import('styled-components').StyledComponent<"label", any, {}, never>;
 export declare const UploadButton: StyledButton;
-//# sourceMappingURL=FileUploader.styles.d.ts.map

package/dist/FileUploader.styles.js

@@ -1,99 +1,79 @@
-import styled, { css } from 'styled-components';
-import Button from '@synerise/ds-button';
-import { IconContainer } from '@synerise/ds-icon';
-import { Text, Label as TypographyLabel } from '@synerise/ds-typography';
-import { hexToRgba } from '@synerise/ds-utils';
-export var Container = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import Button from "@synerise/ds-button";
+import { IconContainer } from "@synerise/ds-icon";
+import { Label as Label$1, Text } from "@synerise/ds-typography";
+import { hexToRgba } from "@synerise/ds-utils";
+const Container = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FileUploaderstyles__Container",
   componentId: "sc-62r2x6-0"
 })(["width:100%;"]);
-export var Description = styled(Text).withConfig({
+const Description = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "FileUploaderstyles__Description",
   componentId: "sc-62r2x6-1"
-})(["&&{margin:", ";display:block;color:", ";}"], function (props) {
-  return props.hasError ? '4px 0 8px' : '8px 0 8px';
-}, function (props) {
-  return props.theme.palette['grey-500'];
-});
-export var DropAreaContainer = styled.div.withConfig({
+})(["&&{margin:", ";display:block;color:", ";}"], (props) => props.hasError ? "4px 0 8px" : "8px 0 8px", (props) => props.theme.palette["grey-500"]);
+const DropAreaContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "FileUploaderstyles__DropAreaContainer",
   componentId: "sc-62r2x6-2"
-})(["width:100%;margin:", ";"], function (props) {
-  return props.canUploadMore ? '12px 0 8px' : '0';
-});
-export var DropAreaLabel = styled(Text).withConfig({
+})(["width:100%;margin:", ";"], (props) => props.canUploadMore ? "12px 0 8px" : "0");
+const DropAreaLabel = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "FileUploaderstyles__DropAreaLabel",
   componentId: "sc-62r2x6-3"
-})(["&&{color:", ";font-weight:500;}"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var LargeDropAreaLabel = styled(TypographyLabel).withConfig({
+})(["&&{color:", ";font-weight:500;}"], (props) => props.theme.palette["grey-600"]);
+const LargeDropAreaLabel = /* @__PURE__ */ styled(Label$1).withConfig({
   displayName: "FileUploaderstyles__LargeDropAreaLabel",
   componentId: "sc-62r2x6-4"
-})(["&&{font-size:14px;margin:4px 0 0;display:block;color:", ";}"], function (props) {
-  return props.theme.palette['grey-800'];
-});
-export var LargeDropAreaDescription = styled(Text).withConfig({
+})(["&&{font-size:14px;margin:4px 0 0;display:block;color:", ";}"], (props) => props.theme.palette["grey-800"]);
+const LargeDropAreaDescription = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "FileUploaderstyles__LargeDropAreaDescription",
   componentId: "sc-62r2x6-5"
-})(["&&{margin:4px 0 0;display:block;color:", ";}"], function (props) {
-  return props.theme.palette['grey-600'];
-});
-export var DropAreaButton = styled.button.withConfig({
+})(["&&{margin:4px 0 0;display:block;color:", ";}"], (props) => props.theme.palette["grey-600"]);
+const DropAreaButton = /* @__PURE__ */ styled.button.withConfig({
   displayName: "FileUploaderstyles__DropAreaButton",
   componentId: "sc-62r2x6-6"
-})(["display:", ";align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:100%;height:48px;transition:height 0.03s;", ";", ";", "{color:", ";}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], function (props) {
-  return props.hidden ? 'none' : 'flex';
-}, function (props) {
-  return props.theme.palette['grey-400'];
-}, function (props) {
-  return props.mode === 'multi-large' && props.filesLength === 0 && "\n      height: 160px;\n      flex-direction: column;\n      text-align: center;\n      justify-content: center;\n  ";
-}, function (props) {
-  return props.mode !== 'multi-large' && "\n      gap: 12px;\n  ";
-}, IconContainer, function (props) {
-  return props.theme.palette['grey-700'];
-}, function (props) {
-  return props.hasError && "\n      background-color: " + props.theme.palette['red-050'] + ";\n      border-color: " + props.theme.palette['red-600'] + ";\n    ";
-}, function (props) {
-  return props.pressed && !props.disabled && css(["&&&:active,&&&{background-color:", ";}"], hexToRgba(props.theme.palette['grey-200'], 0.4));
-}, function (props) {
-  return hexToRgba(props.theme.palette['grey-200'], 0.2);
-}, function (props) {
-  return props.theme.palette['grey-400'];
-}, DropAreaLabel, LargeDropAreaLabel, function (props) {
-  return props.theme.palette['grey-700'];
-}, IconContainer, function (props) {
-  return props.theme.palette['grey-700'];
-}, function (props) {
-  return props.theme.palette['grey-050'];
-}, LargeDropAreaLabel, function (props) {
-  return props.theme.palette['grey-400'];
-}, function (props) {
-  return props.theme.palette['red-400'];
-}, function (props) {
-  return props.theme.palette['grey-400'];
-}, function (props) {
-  return props.theme.palette['grey-050'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette['blue-050'];
-}, IconContainer, function (props) {
-  return props.isDropping && !props.disabled && "\n      height: " + (props.mode === 'multi-large' && props.filesLength === 0 ? '160px' : 'auto') + ";\n      background-color: " + props.theme.palette['blue-050'] + " !important;\n      border-color: " + props.theme.palette['blue-300'] + " !important;\n\n      span, " + DropAreaLabel + ", " + LargeDropAreaLabel + ", " + LargeDropAreaDescription + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n\n      " + IconContainer + " {\n        color: " + props.theme.palette['blue-500'] + " !important;\n      }\n    ";
-});
-export var ErrorMessage = styled(Text).withConfig({
+})(["display:", ";align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:100%;height:48px;transition:height 0.03s;", ";", ";", "{color:", ";}", " ", " &:hover:not(:disabled){background-color:", ";border-color:", ";", ",", "{color:", ";}", "{color:", ";}}&:disabled{background-color:", ";", "{color:", ";}}&&:active{color:", ";border-color:", ";background-color:", ";}&:focus:not(:active):not(:disabled){border-color:", ";background-color:", ";}&:disabled{span,", "{opacity:0.4;}}", ""], (props) => props.hidden ? "none" : "flex", (props) => props.theme.palette["grey-400"], (props) => props.mode === "multi-large" && props.filesLength === 0 && `
+      height: 160px;
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+  `, (props) => props.mode !== "multi-large" && `
+      gap: 12px;
+  `, IconContainer, (props) => props.theme.palette["grey-700"], (props) => props.hasError && `
+      background-color: ${props.theme.palette["red-050"]};
+      border-color: ${props.theme.palette["red-600"]};
+    `, (props) => props.pressed && !props.disabled && css(["&&&:active,&&&{background-color:", ";}"], hexToRgba(props.theme.palette["grey-200"], 0.4)), (props) => hexToRgba(props.theme.palette["grey-200"], 0.2), (props) => props.theme.palette["grey-400"], DropAreaLabel, LargeDropAreaLabel, (props) => props.theme.palette["grey-700"], IconContainer, (props) => props.theme.palette["grey-700"], (props) => props.theme.palette["grey-050"], LargeDropAreaLabel, (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["red-400"], (props) => props.theme.palette["grey-400"], (props) => props.theme.palette["grey-050"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-050"], IconContainer, (props) => props.isDropping && !props.disabled && `
+      height: ${props.mode === "multi-large" && props.filesLength === 0 ? "160px" : "auto"};
+      background-color: ${props.theme.palette["blue-050"]} !important;
+      border-color: ${props.theme.palette["blue-300"]} !important;
+
+      span, ${DropAreaLabel}, ${LargeDropAreaLabel}, ${LargeDropAreaDescription} {
+        color: ${props.theme.palette["blue-500"]} !important;
+      }
+
+      ${IconContainer} {
+        color: ${props.theme.palette["blue-500"]} !important;
+      }
+    `);
+const ErrorMessage = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "FileUploaderstyles__ErrorMessage",
   componentId: "sc-62r2x6-7"
-})(["&&{margin:8px 0 0;display:block;color:", ";}"], function (props) {
-  return props.theme.palette['red-600'];
-});
-export var Label = styled(TypographyLabel).withConfig({
+})(["&&{margin:8px 0 0;display:block;color:", ";}"], (props) => props.theme.palette["red-600"]);
+const Label = /* @__PURE__ */ styled(Label$1).withConfig({
   displayName: "FileUploaderstyles__Label",
   componentId: "sc-62r2x6-8"
-})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;", "{color:", ";}}"], IconContainer, function (props) {
-  return props.theme.palette['grey-400'];
-});
-export var UploadButton = styled(Button).withConfig({
+})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;", "{color:", ";}}"], IconContainer, (props) => props.theme.palette["grey-400"]);
+const UploadButton = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "FileUploaderstyles__UploadButton",
   componentId: "sc-62r2x6-9"
-})([""]);
+})([""]);
+export {
+  Container,
+  Description,
+  DropAreaButton,
+  DropAreaContainer,
+  DropAreaLabel,
+  ErrorMessage,
+  Label,
+  LargeDropAreaDescription,
+  LargeDropAreaLabel,
+  UploadButton
+};

package/dist/FileUploader.types.d.ts

@@ -1,5 +1,5 @@
-import { type ReactNode, type RefObject } from 'react';
-import { type WithHTMLAttributes } from '@synerise/ds-utils';
+import { ReactNode, RefObject } from 'react';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
 export type FileViewTexts = {
     size?: ReactNode;
     cancelText?: ReactNode;
@@ -55,4 +55,3 @@ export type FileUploaderRef = {
     rootRef: RefObject<HTMLElement>;
 };
 export {};
-//# sourceMappingURL=FileUploader.types.d.ts.map

package/dist/FileUploader.types.js

@@ -1 +1 @@
-export {};
+

package/dist/FileView/FileView.const.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
+import { default as React } from 'react';
 export declare const isPreviewableMimeType: (type: string) => type is FileType;
 type FileType = 'image/png' | 'image/gif' | 'image/jpeg' | 'image/svg+xml' | 'text/plain' | 'text/html' | 'video/quicktime' | 'application/pdf' | 'application/zip' | 'audio/mpeg' | 'application/vnd.ms-excel' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation' | 'text/csv';
 export declare const previewableMimeTypes: FileType[];
 export declare const ICON_MAP: Record<FileType, React.ReactNode>;
 export {};
-//# sourceMappingURL=FileView.const.d.ts.map

package/dist/FileView/FileView.const.js

@@ -1,21 +1,26 @@
-import React from 'react';
-import { FileTypeHtml, FileTypeImage, FileTypeMp3, FileTypePdf, FileTypePptx, FileTypeSvg, FileTypeTxt, FileTypeVideo, FileTypeXls, FileTypeZip } from '@synerise/ds-icon';
-export var isPreviewableMimeType = function isPreviewableMimeType(type) {
+import { jsx } from "react/jsx-runtime";
+import { FileTypeTxt, FileTypePptx, FileTypeXls, FileTypeMp3, FileTypeVideo, FileTypeHtml, FileTypeZip, FileTypePdf, FileTypeSvg, FileTypeImage } from "@synerise/ds-icon";
+const isPreviewableMimeType = (type) => {
   return previewableMimeTypes.includes(type);
 };
-export var previewableMimeTypes = ['image/png', 'image/gif', 'image/jpeg', 'image/svg+xml', 'text/plain', 'text/html', 'video/quicktime', 'application/pdf', 'application/zip', 'audio/mpeg', 'application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.presentationml.presentation', 'text/csv'];
-export var ICON_MAP = {
-  'image/png': /*#__PURE__*/React.createElement(FileTypeImage, null),
-  'image/gif': /*#__PURE__*/React.createElement(FileTypePdf, null),
-  'image/jpeg': /*#__PURE__*/React.createElement(FileTypeImage, null),
-  'image/svg+xml': /*#__PURE__*/React.createElement(FileTypeSvg, null),
-  'application/pdf': /*#__PURE__*/React.createElement(FileTypePdf, null),
-  'application/zip': /*#__PURE__*/React.createElement(FileTypeZip, null),
-  'text/plain': /*#__PURE__*/React.createElement(FileTypeTxt, null),
-  'text/html': /*#__PURE__*/React.createElement(FileTypeHtml, null),
-  'video/quicktime': /*#__PURE__*/React.createElement(FileTypeVideo, null),
-  'audio/mpeg': /*#__PURE__*/React.createElement(FileTypeMp3, null),
-  'application/vnd.ms-excel': /*#__PURE__*/React.createElement(FileTypeXls, null),
-  'application/vnd.openxmlformats-officedocument.presentationml.presentation': /*#__PURE__*/React.createElement(FileTypePptx, null),
-  'text/csv': /*#__PURE__*/React.createElement(FileTypeTxt, null)
-};
+const previewableMimeTypes = ["image/png", "image/gif", "image/jpeg", "image/svg+xml", "text/plain", "text/html", "video/quicktime", "application/pdf", "application/zip", "audio/mpeg", "application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.presentationml.presentation", "text/csv"];
+const ICON_MAP = {
+  "image/png": /* @__PURE__ */ jsx(FileTypeImage, {}),
+  "image/gif": /* @__PURE__ */ jsx(FileTypePdf, {}),
+  "image/jpeg": /* @__PURE__ */ jsx(FileTypeImage, {}),
+  "image/svg+xml": /* @__PURE__ */ jsx(FileTypeSvg, {}),
+  "application/pdf": /* @__PURE__ */ jsx(FileTypePdf, {}),
+  "application/zip": /* @__PURE__ */ jsx(FileTypeZip, {}),
+  "text/plain": /* @__PURE__ */ jsx(FileTypeTxt, {}),
+  "text/html": /* @__PURE__ */ jsx(FileTypeHtml, {}),
+  "video/quicktime": /* @__PURE__ */ jsx(FileTypeVideo, {}),
+  "audio/mpeg": /* @__PURE__ */ jsx(FileTypeMp3, {}),
+  "application/vnd.ms-excel": /* @__PURE__ */ jsx(FileTypeXls, {}),
+  "application/vnd.openxmlformats-officedocument.presentationml.presentation": /* @__PURE__ */ jsx(FileTypePptx, {}),
+  "text/csv": /* @__PURE__ */ jsx(FileTypeTxt, {})
+};
+export {
+  ICON_MAP,
+  isPreviewableMimeType,
+  previewableMimeTypes
+};

package/dist/FileView/FileView.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { type FileViewProps } from './FileView.types';
+import { default as React } from 'react';
+import { FileViewProps } from './FileView.types';
 declare const FileView: ({ data, texts, onRemove, removable, retry, retryButtonProps, }: FileViewProps) => React.JSX.Element;
 export default FileView;
-//# sourceMappingURL=FileView.d.ts.map