@synerise/ds-file-uploader 1.3.9 → 1.3.10

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.3.10](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@1.3.9...@synerise/ds-file-uploader@1.3.10) (2026-03-24)
+
+**Note:** Version bump only for package @synerise/ds-file-uploader
+
 ## [1.3.9](https://github.com/Synerise/synerise-design/compare/@synerise/ds-file-uploader@1.3.8...@synerise/ds-file-uploader@1.3.9) (2026-03-20)
 
 **Note:** Version bump only for package @synerise/ds-file-uploader

package/dist/AvatarUploader/AvatarUploader.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
-import { type FileUploaderRef } from '../FileUploader.types';
+import { default as React } from 'react';
+import { FileUploaderRef } from '../FileUploader.types';
 declare const AvatarUploader: React.ForwardRefExoticComponent<{
     className?: string;
     mode: "single" | "multi-medium" | "multi-large";
@@ -11,16 +11,15 @@ declare const AvatarUploader: React.ForwardRefExoticComponent<{
     removeTooltip?: React.ReactNode;
     label?: string;
     error?: string;
-    texts?: import("../FileUploader.types").FileViewTexts & {
+    texts?: import('../FileUploader.types').FileViewTexts & {
         buttonLabel?: React.ReactNode;
         buttonLabelLarge?: React.ReactNode;
         buttonDescription?: React.ReactNode;
     };
-    files: import("../FileUploader.types").ExtendedFile[];
+    files: import('../FileUploader.types').ExtendedFile[];
     accept?: string[];
-    onRemove?: (file: import("../FileUploader.types").FileWithContent, index: number) => void;
-    onUpload?: (files: import("../FileUploader.types").FileWithContent[]) => void;
+    onRemove?: (file: import('../FileUploader.types').FileWithContent, index: number) => void;
+    onUpload?: (files: import('../FileUploader.types').FileWithContent[]) => void;
     retry?: boolean;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "label" | "className" | "mode" | "disabled" | "accept" | "description" | "tooltip" | "error" | "removable" | "onRemove" | "texts" | "filesAmount" | "removeTooltip" | "files" | "onUpload" | "retry"> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<FileUploaderRef>>;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "label" | "className" | "mode" | "disabled" | "accept" | "description" | "tooltip" | "error" | "removable" | "onRemove" | "texts" | "filesAmount" | "removeTooltip" | "files" | "onUpload" | "retry"> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<FileUploaderRef>>;
 export default AvatarUploader;
-//# sourceMappingURL=AvatarUploader.d.ts.map

package/dist/AvatarUploader/AvatarUploader.js

@@ -1,53 +1,45 @@
-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); }
-import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
-import { useDropzone } from 'react-dropzone';
-import Button from '@synerise/ds-button';
-import { useTheme } from '@synerise/ds-core';
-import Icon, { Add3M, FileTypePictureL, InfoFillS } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import * as S from './AvatarUploader.styles';
-import FileViewAvatar from './FileViewAvatar/FileViewAvatar';
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { forwardRef, useState, useCallback, useImperativeHandle } from "react";
+import { useDropzone } from "react-dropzone";
+import Button from "@synerise/ds-button";
+import { useTheme } from "@synerise/ds-core";
+import Icon, { InfoFillS, FileTypePictureL, Add3M } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import { Container, Label, UploaderContainer, DropAreaContainer, DropAreaButton, Description } from "./AvatarUploader.styles.js";
+import FileViewAvatar from "./FileViewAvatar/FileViewAvatar.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 AvatarUploader = /*#__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,
-    texts = _ref.texts;
-  var _useState = useState(true),
-    uploadSuccess = _useState[0],
-    setUploadSuccess = _useState[1];
-  var theme = useTheme();
-  var readFilesContent = useCallback(function (addedFiles) {
-    var readerPromises = addedFiles.map(function (file) {
+const AvatarUploader = forwardRef(({
+  className,
+  onUpload,
+  disabled,
+  accept,
+  error,
+  label,
+  onRemove,
+  description,
+  tooltip,
+  filesAmount,
+  mode = "single",
+  removable = true,
+  files = [],
+  texts
+}, ref) => {
+  const [uploadSuccess, setUploadSuccess] = useState(true);
+  const theme = useTheme();
+  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]
         });
@@ -55,8 +47,8 @@ var AvatarUploader = /*#__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;
     }
@@ -67,87 +59,49 @@ var AvatarUploader = /*#__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];
-  return /*#__PURE__*/React.createElement(S.Container, {
-    className: "ds-file-avatar-uploader " + (className || '')
-  }, 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),
-    color: theme.palette['grey-400'],
-    size: 24
-  })))), files.length > 0 && files.map(function (file, index) {
-    return /*#__PURE__*/React.createElement(FileViewAvatar, {
-      key: file.file.lastModified,
-      texts: texts,
-      removable: removable,
-      onRemove: function onRemove() {
-        return _onRemove && _onRemove(file.file, index);
-      },
-      data: file,
-      description: description
-    });
-  }), (mode !== 'single' && (filesAmount ? files.length < filesAmount : true) || files.length === 0) && /*#__PURE__*/React.createElement(S.UploaderContainer, null, /*#__PURE__*/React.createElement(S.DropAreaContainer, _extends({}, getRootProps(), {
-    canUploadMore: mode !== 'single' && files.length > 0
-  }), /*#__PURE__*/React.createElement("input", _extends({}, getInputProps(), {
-    "data-testid": "drop-area-input"
-  })), /*#__PURE__*/React.createElement(S.DropAreaButton, {
-    type: "button",
-    mode: mode,
-    disabled: disabled,
-    isDropping: isDragActive,
-    hasError: hasError,
-    onMouseDown: function onMouseDown() {
-      return setPressed(true);
-    },
-    onMouseUp: function onMouseUp() {
-      return setPressed(false);
-    },
-    pressed: pressed,
-    "data-testid": "drop-area",
-    filesLength: files.length
-  }, /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(FileTypePictureL, null),
-    size: 48
-  }))))), /*#__PURE__*/React.createElement("div", null, (mode !== 'single' && (filesAmount ? files.length < filesAmount : true) || files.length === 0) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({}, getRootProps(), {
-    disabled: disabled,
-    type: "secondary",
-    mode: "icon-label"
-  }), /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(Add3M, null),
-    size: 24
-  }), "Add file"), description && /*#__PURE__*/React.createElement(S.Description, {
-    hasError: hasError
-  }, description))));
+  const hasError = Boolean(error) || !uploadSuccess;
+  const [pressed, setPressed] = useState(false);
+  return /* @__PURE__ */ jsxs(Container, { className: `ds-file-avatar-uploader ${className || ""}`, 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, {}), color: theme.palette["grey-400"], size: 24 }) }) })
+    ] }),
+    files.length > 0 && files.map((file, index) => /* @__PURE__ */ jsx(FileViewAvatar, { texts, removable, onRemove: () => onRemove && onRemove(file.file, index), data: file, description }, file.file.lastModified)),
+    (mode !== "single" && (filesAmount ? files.length < filesAmount : true) || files.length === 0) && /* @__PURE__ */ jsx(UploaderContainer, { children: /* @__PURE__ */ jsxs(DropAreaContainer, { ...getRootProps(), canUploadMore: mode !== "single" && files.length > 0, children: [
+      /* @__PURE__ */ jsx("input", { ...getInputProps(), "data-testid": "drop-area-input" }),
+      /* @__PURE__ */ jsx(DropAreaButton, { type: "button", mode, disabled, isDropping: isDragActive, hasError, onMouseDown: () => setPressed(true), onMouseUp: () => setPressed(false), pressed, "data-testid": "drop-area", filesLength: files.length, children: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(FileTypePictureL, {}), size: 48 }) }) })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { children: (mode !== "single" && (filesAmount ? files.length < filesAmount : true) || files.length === 0) && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsxs(Button, { ...getRootProps(), disabled, type: "secondary", mode: "icon-label", children: [
+        /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(Add3M, {}), size: 24 }),
+        "Add file"
+      ] }),
+      description && /* @__PURE__ */ jsx(Description, { hasError, children: description })
+    ] }) })
+  ] });
 });
-export default AvatarUploader;
+export {
+  AvatarUploader as default
+};

package/dist/AvatarUploader/AvatarUploader.styles.d.ts

@@ -1,45 +1,44 @@
-export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const UploaderContainer: 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;
+export declare const Container: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const UploaderContainer: 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;
     pressed: boolean;
     filesLength: number;
 }, 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>;
-//# sourceMappingURL=AvatarUploader.styles.d.ts.map
+export declare const Label: import('styled-components').StyledComponent<"label", any, {}, never>;

package/dist/AvatarUploader/AvatarUploader.styles.js

@@ -1,92 +1,76 @@
-import styled, { css } from 'styled-components';
-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 { 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: "AvatarUploaderstyles__Container",
   componentId: "sc-1lljrgr-0"
 })(["width:100%;display:flex;"]);
-export var UploaderContainer = styled.div.withConfig({
+const UploaderContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "AvatarUploaderstyles__UploaderContainer",
   componentId: "sc-1lljrgr-1"
 })(["align-items:center;padding-right:14px;"]);
-export var Description = styled(Text).withConfig({
+const Description = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "AvatarUploaderstyles__Description",
   componentId: "sc-1lljrgr-2"
-})(["&&{margin:", ";display:block;color:", ";}"], function (props) {
-  return props.hasError ? '4px 0 8px' : '16px 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" : "16px 0 8px", (props) => props.theme.palette["grey-500"]);
+const DropAreaContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "AvatarUploaderstyles__DropAreaContainer",
   componentId: "sc-1lljrgr-3"
-})(["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: "AvatarUploaderstyles__DropAreaLabel",
   componentId: "sc-1lljrgr-4"
-})(["color:", ";font-weight:500;"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var LargeDropAreaLabel = styled(TypographyLabel).withConfig({
+})(["color:", ";font-weight:500;"], (props) => props.theme.palette["grey-700"]);
+const LargeDropAreaLabel = /* @__PURE__ */ styled(Label$1).withConfig({
   displayName: "AvatarUploaderstyles__LargeDropAreaLabel",
   componentId: "sc-1lljrgr-5"
-})(["&&{font-size:14px;margin:4px 0 0;display:block;color:", ";}"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var LargeDropAreaDescription = styled(Text).withConfig({
+})(["&&{font-size:14px;margin:4px 0 0;display:block;color:", ";}"], (props) => props.theme.palette["grey-700"]);
+const LargeDropAreaDescription = /* @__PURE__ */ styled(Text).withConfig({
   displayName: "AvatarUploaderstyles__LargeDropAreaDescription",
   componentId: "sc-1lljrgr-6"
-})(["&&{margin:4px 0 0;display:block;color:", ";}"], function (props) {
-  return props.theme.palette['grey-700'];
-});
-export var DropAreaButton = styled.button.withConfig({
+})(["&&{margin:4px 0 0;display:block;color:", ";}"], (props) => props.theme.palette["grey-700"]);
+const DropAreaButton = /* @__PURE__ */ styled.button.withConfig({
   displayName: "AvatarUploaderstyles__DropAreaButton",
   componentId: "sc-1lljrgr-7"
-})(["align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:80px;height:80px;transition:height 0.3s;", ";", "{color:", ";}span{display:inline-block;margin:0 0 0 12px;}", " ", " &: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.theme.palette['grey-400'];
-}, function (props) {
-  return props.mode === 'multi-large' && props.filesLength === 0 && "\n      height: 108px;\n      flex-direction: column;\n      text-align: center;\n      justify-content: center;\n  ";
-}, IconContainer, function (props) {
-  return props.theme.palette['grey-800'];
-}, 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' ? '200px' : '80px') + ";\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({
+})(["align-items:center;border:1px dashed ", ";padding:11px 12px;border-radius:3px;cursor:pointer;background-color:transparent;width:80px;height:80px;transition:height 0.3s;", ";", "{color:", ";}span{display:inline-block;margin:0 0 0 12px;}", " ", " &: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.theme.palette["grey-400"], (props) => props.mode === "multi-large" && props.filesLength === 0 && `
+      height: 108px;
+      flex-direction: column;
+      text-align: center;
+      justify-content: center;
+  `, IconContainer, (props) => props.theme.palette["grey-800"], (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" ? "200px" : "80px"};
+      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: "AvatarUploaderstyles__ErrorMessage",
   componentId: "sc-1lljrgr-8"
-})(["&&{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: "AvatarUploaderstyles__Label",
   componentId: "sc-1lljrgr-9"
-})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;}"]);
+})(["&&{cursor:initial;margin:0 0 8px;display:flex;align-items:center;}"]);
+export {
+  Container,
+  Description,
+  DropAreaButton,
+  DropAreaContainer,
+  DropAreaLabel,
+  ErrorMessage,
+  Label,
+  LargeDropAreaDescription,
+  LargeDropAreaLabel,
+  UploaderContainer
+};

package/dist/AvatarUploader/FileViewAvatar/FileViewAvatar.const.d.ts

@@ -1,4 +1,3 @@
-import { type PreviewableMimeType } from './FileViewAvatar.types';
+import { PreviewableMimeType } from './FileViewAvatar.types';
 export declare const previewableMimeTypes: PreviewableMimeType[];
 export declare const ICON_MAP: Record<PreviewableMimeType, JSX.Element>;
-//# sourceMappingURL=FileViewAvatar.const.d.ts.map

package/dist/AvatarUploader/FileViewAvatar/FileViewAvatar.const.js

@@ -1,10 +1,14 @@
-import React from 'react';
-import { FileTypeImageM } from '@synerise/ds-icon';
-export var previewableMimeTypes = ['image/png', 'image/gif', 'image/jpeg', 'image/svg+xml', 'text/csv'];
-export var ICON_MAP = {
-  'image/png': /*#__PURE__*/React.createElement(FileTypeImageM, null),
-  'image/gif': /*#__PURE__*/React.createElement(FileTypeImageM, null),
-  'image/jpeg': /*#__PURE__*/React.createElement(FileTypeImageM, null),
-  'image/svg+xml': /*#__PURE__*/React.createElement(FileTypeImageM, null),
-  'text/csv': /*#__PURE__*/React.createElement(FileTypeImageM, null)
-};
+import { jsx } from "react/jsx-runtime";
+import { FileTypeImageM } from "@synerise/ds-icon";
+const previewableMimeTypes = ["image/png", "image/gif", "image/jpeg", "image/svg+xml", "text/csv"];
+const ICON_MAP = {
+  "image/png": /* @__PURE__ */ jsx(FileTypeImageM, {}),
+  "image/gif": /* @__PURE__ */ jsx(FileTypeImageM, {}),
+  "image/jpeg": /* @__PURE__ */ jsx(FileTypeImageM, {}),
+  "image/svg+xml": /* @__PURE__ */ jsx(FileTypeImageM, {}),
+  "text/csv": /* @__PURE__ */ jsx(FileTypeImageM, {})
+};
+export {
+  ICON_MAP,
+  previewableMimeTypes
+};

package/dist/AvatarUploader/FileViewAvatar/FileViewAvatar.d.ts

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