@ozen-ui/kit 0.71.1 → 0.72.1

package/__inner__/cjs/components/FileUploader/entities/allow/result.d.ts

@@ -0,0 +1,6 @@
+import type { FileUploaderAllow } from './allow';
+import type { FileUploaderAllowInfo } from './info';
+export type FileUploaderAllowResult = {
+    allow: FileUploaderAllow;
+    info: FileUploaderAllowInfo;
+};

package/__inner__/cjs/components/FileUploader/entities/allow/result.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/drag/index.d.ts

@@ -0,0 +1 @@
+export * from './item';

package/__inner__/cjs/components/FileUploader/entities/drag/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./item"), exports);

package/__inner__/cjs/components/FileUploader/entities/drag/item.d.ts

@@ -0,0 +1 @@
+export type FileUploaderDragItem = DataTransferItem;

package/__inner__/cjs/components/FileUploader/entities/drag/item.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/events/index.d.ts

@@ -0,0 +1,5 @@
+export * from './onAllowDropChange';
+export * from './onChange';
+export * from './onDelete';
+export * from './onDragging';
+export * from './onDrop';

package/__inner__/cjs/components/FileUploader/entities/events/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./onAllowDropChange"), exports);
+tslib_1.__exportStar(require("./onChange"), exports);
+tslib_1.__exportStar(require("./onDelete"), exports);
+tslib_1.__exportStar(require("./onDragging"), exports);
+tslib_1.__exportStar(require("./onDrop"), exports);

package/__inner__/cjs/components/FileUploader/entities/events/onAllowDropChange.d.ts

@@ -0,0 +1,2 @@
+import type { FileUploaderAllowResult } from '../allow';
+export type FileUploaderOnAllowChange = (allow: boolean, failedChecks: FileUploaderAllowResult[]) => void;

package/__inner__/cjs/components/FileUploader/entities/events/onAllowDropChange.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/events/onChange.d.ts

@@ -0,0 +1,11 @@
+import type { FileUploaderRawFile } from '../file';
+import type { FileUploaderValidateResult } from '../validate';
+export type FileUploaderOnChangeRejectedFile = {
+    file: FileUploaderRawFile;
+    validation: FileUploaderValidateResult[];
+};
+export type FileUploaderOnChange = (params: {
+    files: FileUploaderRawFile[];
+    acceptedFiles: FileUploaderRawFile[];
+    rejectedFiles: FileUploaderOnChangeRejectedFile[];
+}) => void;

package/__inner__/cjs/components/FileUploader/entities/events/onChange.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/events/onDelete.d.ts

@@ -0,0 +1,2 @@
+import type { FileUploaderFileInfo } from '../file';
+export type FileUploaderOnDelete = (fileInfo: FileUploaderFileInfo) => void;

package/__inner__/cjs/components/FileUploader/entities/events/onDelete.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/events/onDragging.d.ts

@@ -0,0 +1,7 @@
+import type { DragEvent as ReactDragEvent } from 'react';
+export type FileUploaderDraggingInfo = {
+    files: DataTransferItem[];
+    count: number;
+};
+export type FileUploaderOnDraggingStart = (event: DragEvent | ReactDragEvent | null, info: FileUploaderDraggingInfo) => void;
+export type FileUploaderOnDraggingEnd = (event: DragEvent | ReactDragEvent | null, info: FileUploaderDraggingInfo) => void;

package/__inner__/cjs/components/FileUploader/entities/events/onDragging.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/events/onDrop.d.ts

@@ -0,0 +1,3 @@
+import type { DragEvent as ReactDragEvent } from 'react';
+import type { FileUploaderRawFile } from '../file';
+export type FileUploaderOnDrop = (event: DragEvent | ReactDragEvent, files: FileUploaderRawFile[]) => void;

package/__inner__/cjs/components/FileUploader/entities/events/onDrop.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/file/id.d.ts

@@ -0,0 +1 @@
+export type FileUploaderFileId = number | string;

package/__inner__/cjs/components/FileUploader/entities/file/id.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/file/index.d.ts

@@ -0,0 +1,5 @@
+export * from './id';
+export * from './info';
+export * from './prepare';
+export * from './raw';
+export * from './status';

package/__inner__/cjs/components/FileUploader/entities/file/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./id"), exports);
+tslib_1.__exportStar(require("./info"), exports);
+tslib_1.__exportStar(require("./prepare"), exports);
+tslib_1.__exportStar(require("./raw"), exports);
+tslib_1.__exportStar(require("./status"), exports);

package/__inner__/cjs/components/FileUploader/entities/file/info.d.ts

@@ -0,0 +1,10 @@
+import type { FileUploaderFileId } from './id';
+import type { FileUploaderFileStatus } from './status';
+export type FileUploaderFileInfo = {
+    id: FileUploaderFileId;
+    name: string;
+    format: string | null;
+    description: string;
+    status: FileUploaderFileStatus;
+    errorMessage?: string;
+};

package/__inner__/cjs/components/FileUploader/entities/file/info.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/file/prepare.d.ts

@@ -0,0 +1,2 @@
+import type { FileUploaderFileInfo, FileUploaderRawFile } from '../file';
+export type FileUploaderPrepareFiles = (files: FileUploaderRawFile[]) => FileUploaderFileInfo[];

package/__inner__/cjs/components/FileUploader/entities/file/prepare.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/file/raw.d.ts

@@ -0,0 +1 @@
+export type FileUploaderRawFile = File;

package/__inner__/cjs/components/FileUploader/entities/file/raw.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/file/status.d.ts

@@ -0,0 +1,2 @@
+export declare const fileUploaderFileStatus: readonly ["loaded", "loading", "error"];
+export type FileUploaderFileStatus = (typeof fileUploaderFileStatus)[number];

package/__inner__/cjs/components/FileUploader/entities/file/status.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileUploaderFileStatus = void 0;
+exports.fileUploaderFileStatus = ['loaded', 'loading', 'error'];

package/__inner__/cjs/components/FileUploader/entities/index.d.ts

@@ -0,0 +1,9 @@
+export * from './allow';
+export * from './drag';
+export * from './events';
+export * from './file';
+export * from './input';
+export * from './validate';
+export * from './size';
+export * from './status';
+export * from './variant';

package/__inner__/cjs/components/FileUploader/entities/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./allow"), exports);
+tslib_1.__exportStar(require("./drag"), exports);
+tslib_1.__exportStar(require("./events"), exports);
+tslib_1.__exportStar(require("./file"), exports);
+tslib_1.__exportStar(require("./input"), exports);
+tslib_1.__exportStar(require("./validate"), exports);
+tslib_1.__exportStar(require("./size"), exports);
+tslib_1.__exportStar(require("./status"), exports);
+tslib_1.__exportStar(require("./variant"), exports);

package/__inner__/cjs/components/FileUploader/entities/input/index.d.ts

@@ -0,0 +1 @@
+export * from './ref';

package/__inner__/cjs/components/FileUploader/entities/input/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./ref"), exports);

package/__inner__/cjs/components/FileUploader/entities/input/ref.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentRef } from 'react';
+export type FileUploaderInputRef = ComponentRef<'input'>;

package/__inner__/cjs/components/FileUploader/entities/input/ref.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/size.d.ts

@@ -0,0 +1,2 @@
+export declare const fileUploaderSizeVariant: readonly ["s", "m", "l"];
+export type FileUploaderSizeVariant = (typeof fileUploaderSizeVariant)[number];

package/__inner__/cjs/components/FileUploader/entities/size.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileUploaderSizeVariant = void 0;
+exports.fileUploaderSizeVariant = ['s', 'm', 'l'];

package/__inner__/cjs/components/FileUploader/entities/status.d.ts

@@ -0,0 +1,2 @@
+export declare const fileUploaderStatusVariant: readonly ["default", "loading", "error", "disabled"];
+export type FileUploaderStatusVariant = (typeof fileUploaderStatusVariant)[number];

package/__inner__/cjs/components/FileUploader/entities/status.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileUploaderStatusVariant = void 0;
+exports.fileUploaderStatusVariant = [
+    'default',
+    'loading',
+    'error',
+    'disabled',
+];

package/__inner__/cjs/components/FileUploader/entities/validate/index.d.ts

@@ -0,0 +1,3 @@
+export * from './info';
+export * from './result';
+export * from './validate';

package/__inner__/cjs/components/FileUploader/entities/validate/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./info"), exports);
+tslib_1.__exportStar(require("./result"), exports);
+tslib_1.__exportStar(require("./validate"), exports);

package/__inner__/cjs/components/FileUploader/entities/validate/info.d.ts

@@ -0,0 +1,6 @@
+export type FileUploaderValidateInfoObject = {
+    isValid: boolean;
+    message: string;
+};
+export type FileUploaderValidateInfoBoolean = boolean;
+export type FileUploaderValidateInfo = FileUploaderValidateInfoObject | FileUploaderValidateInfoBoolean;

package/__inner__/cjs/components/FileUploader/entities/validate/info.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/validate/result.d.ts

@@ -0,0 +1,6 @@
+import type { FileUploaderValidateInfo } from './info';
+import type { FileUploaderValidateFile } from './validate';
+export type FileUploaderValidateResult = {
+    validate: FileUploaderValidateFile;
+    info: FileUploaderValidateInfo;
+};

package/__inner__/cjs/components/FileUploader/entities/validate/result.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/validate/validate.d.ts

@@ -0,0 +1,3 @@
+import type { FileUploaderRawFile } from '../file';
+import type { FileUploaderValidateInfo } from './info';
+export type FileUploaderValidateFile = (file: FileUploaderRawFile, files: FileUploaderRawFile[]) => FileUploaderValidateInfo;

package/__inner__/cjs/components/FileUploader/entities/validate/validate.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/entities/variant.d.ts

@@ -0,0 +1,2 @@
+export declare const fileUploaderVariant: readonly ["main", "primary"];
+export type FileUploaderVariant = (typeof fileUploaderVariant)[number];

package/__inner__/cjs/components/FileUploader/entities/variant.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fileUploaderVariant = void 0;
+exports.fileUploaderVariant = ['main', 'primary'];

package/__inner__/cjs/components/FileUploader/hooks/index.d.ts

@@ -0,0 +1 @@
+export * from './useAsFileUploaderDropZone';

package/__inner__/cjs/components/FileUploader/hooks/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./useAsFileUploaderDropZone"), exports);

package/__inner__/cjs/components/FileUploader/hooks/useAsFileUploaderDropZone/index.d.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './useAsFileUploaderDropZone';

package/__inner__/cjs/components/FileUploader/hooks/useAsFileUploaderDropZone/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./types"), exports);
+tslib_1.__exportStar(require("./useAsFileUploaderDropZone"), exports);

package/__inner__/cjs/components/FileUploader/hooks/useAsFileUploaderDropZone/types.d.ts

@@ -0,0 +1,4 @@
+export type UseAsFileUploaderDropZoneOptions = {
+    isWithReactionToClick?: boolean;
+    disabled?: boolean;
+};

package/__inner__/cjs/components/FileUploader/hooks/useAsFileUploaderDropZone/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/FileUploader/hooks/useAsFileUploaderDropZone/useAsFileUploaderDropZone.d.ts

@@ -0,0 +1,3 @@
+import type { RefObject } from 'react';
+import type { UseAsFileUploaderDropZoneOptions } from './types';
+export declare const useAsFileUploaderDropZone: (ref: RefObject<HTMLElement>, options?: UseAsFileUploaderDropZoneOptions) => void;

package/__inner__/cjs/components/FileUploader/hooks/useAsFileUploaderDropZone/useAsFileUploaderDropZone.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAsFileUploaderDropZone = void 0;
+var useEventListener_1 = require("../../../../hooks/useEventListener");
+var useStoredValue_1 = require("../../../../hooks/useStoredValue");
+var context_1 = require("../../context");
+var utils_1 = require("../../utils");
+var useAsFileUploaderDropZone = function (ref, options) {
+    var _a = options !== null && options !== void 0 ? options : {}, _b = _a.isWithReactionToClick, isWithReactionToClick = _b === void 0 ? true : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c;
+    var _d = (0, context_1.useFileUploaderContext)(), setDragging = _d.setDragging, setFiles = _d.setFiles, files = _d.files, status = _d.status, openUploader = _d.openUploader, calculateAllow = _d.calculateAllow, onAllowDropChange = _d.onAllowDropChange, onDrop = _d.onDrop;
+    var isActive = !disabled;
+    var isDisabledStatus = status === 'disabled';
+    var isLoadingStatus = status === 'loading';
+    var getDataTransferFiles = function (event) {
+        var _a;
+        var eventFiles = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.files;
+        if (!eventFiles) {
+            return [];
+        }
+        return Array.from(eventFiles);
+    };
+    var getDataTransferItems = function (event) {
+        var _a;
+        var eventFiles = (_a = event.dataTransfer) === null || _a === void 0 ? void 0 : _a.items;
+        if (!eventFiles) {
+            return [];
+        }
+        return Array.from(eventFiles);
+    };
+    var lastIsAllow = (0, useStoredValue_1.useStoredValue)(false);
+    var isDraggingOver = (0, useStoredValue_1.useStoredValue)(false);
+    (0, useEventListener_1.useEventListener)({
+        element: ref,
+        eventName: 'dragenter',
+        handler: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            if (isDraggingOver.current) {
+                return;
+            }
+            var items = getDataTransferItems(event);
+            var calculatedAllow = calculateAllow(items);
+            lastIsAllow.current = calculatedAllow.isAllow;
+            onAllowDropChange(calculatedAllow.isAllow, calculatedAllow.failed);
+            isDraggingOver.current = true;
+            if (!calculatedAllow.isAllow) {
+                return;
+            }
+            setDragging(event, true);
+        },
+        active: isActive,
+    });
+    (0, useEventListener_1.useEventListener)({
+        element: ref,
+        eventName: 'dragover',
+        handler: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+        },
+        active: isActive,
+    });
+    (0, useEventListener_1.useEventListener)({
+        element: ref,
+        eventName: 'dragleave',
+        handler: function (event) {
+            var _a;
+            event.preventDefault();
+            event.stopPropagation();
+            if ((_a = ref.current) === null || _a === void 0 ? void 0 : _a.contains(event.relatedTarget)) {
+                return;
+            }
+            setDragging(event, false);
+            onAllowDropChange(true, []);
+            isDraggingOver.current = false;
+        },
+        active: isActive,
+    });
+    (0, useEventListener_1.useEventListener)({
+        element: ref,
+        eventName: 'drop',
+        handler: function (event) {
+            event.preventDefault();
+            event.stopPropagation();
+            var eventFiles = getDataTransferFiles(event);
+            onDrop(event, eventFiles);
+            setDragging(event, false);
+            isDraggingOver.current = false;
+            if (!lastIsAllow.current) {
+                onAllowDropChange(true, []);
+                return;
+            }
+            setFiles((0, utils_1.mergeFiles)(files, eventFiles));
+        },
+        active: isActive,
+    });
+    (0, useEventListener_1.useEventListener)({
+        element: ref,
+        eventName: 'click',
+        handler: function () {
+            if (isLoadingStatus || isDisabledStatus || !isWithReactionToClick) {
+                return;
+            }
+            openUploader();
+        },
+        active: isActive,
+    });
+};
+exports.useAsFileUploaderDropZone = useAsFileUploaderDropZone;

package/__inner__/cjs/components/FileUploader/index.d.ts

@@ -0,0 +1,10 @@
+export * from './allowPresets';
+export * from './components';
+export * from './context';
+export * from './entities';
+export * from './hooks';
+export * from './modules';
+export * from './utils';
+export * from './constants';
+export * from './FileUploader';
+export * from './types';

package/__inner__/cjs/components/FileUploader/index.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./allowPresets"), exports);
+tslib_1.__exportStar(require("./components"), exports);
+tslib_1.__exportStar(require("./context"), exports);
+tslib_1.__exportStar(require("./entities"), exports);
+tslib_1.__exportStar(require("./hooks"), exports);
+tslib_1.__exportStar(require("./modules"), exports);
+tslib_1.__exportStar(require("./utils"), exports);
+tslib_1.__exportStar(require("./constants"), exports);
+tslib_1.__exportStar(require("./FileUploader"), exports);
+tslib_1.__exportStar(require("./types"), exports);

package/__inner__/cjs/components/FileUploader/modules/FileUploaderDrop/FileUploaderDrop.css

@@ -0,0 +1,161 @@
+/* stylelint-disable */
+.FileUploaderDrop {
+  --file-uploader-drop-icon-color: var(--color-content-primary);
+  --file-uploader-drop-border-type: dashed;
+  --file-uploader-drop-border-size: 1px;
+  --file-uploader-drop-label-color: var(--color-content-primary);
+  --file-uploader-drop-hint-color: var(--color-content-secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-block-size: calc(var(--file-uploader-drop-min-block-size) + var(--file-uploader-drop-block-padding) * 2 + var(--file-uploader-drop-border-size) * 2);
+  padding-block: var(--file-uploader-drop-block-padding);
+  padding-inline: var(--file-uploader-drop-inline-padding);
+  border-radius: var(--border-radius-l);
+  border: var(--file-uploader-drop-border-size) var(--file-uploader-drop-border-type);
+  border-color: var(--file-uploader-drop-border-base-color);
+  background-color: var(--file-uploader-drop-background-base-color);
+  transition: border-color var(--transition-default), background-color var(--transition-default);
+  box-sizing: border-box;
+  justify-content: center;
+}
+.FileUploaderDrop_size_s {
+    --file-uploader-drop-min-block-size: 106px;
+    --file-uploader-drop-block-padding: var(--spacing-m);
+    --file-uploader-drop-inline-padding: var(--spacing-m);
+  }
+.FileUploaderDrop_size_s .FileUploaderDrop-Label {
+      font: var(--typography-text-s_1-font);
+      letter-spacing: var(--typography-text-s_1-letter_spacing, 0);
+      text-transform: var(--typography-text-s_1-text_transform, none);
+    }
+.FileUploaderDrop_size_s .FileUploaderDrop-Hint {
+      font: var(--typography-text-s-font);
+      letter-spacing: var(--typography-text-s-letter_spacing, 0);
+      text-transform: var(--typography-text-s-text_transform, none);
+    }
+.FileUploaderDrop_size_m {
+    --file-uploader-drop-min-block-size: 126px;
+    --file-uploader-drop-block-padding: var(--spacing-l);
+    --file-uploader-drop-inline-padding: var(--spacing-l);
+  }
+.FileUploaderDrop_size_m .FileUploaderDrop-Label {
+      font: var(--typography-text-m_1-font);
+      letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
+      text-transform: var(--typography-text-m_1-text_transform, none);
+    }
+.FileUploaderDrop_size_m .FileUploaderDrop-Hint {
+      font: var(--typography-text-m-font);
+      letter-spacing: var(--typography-text-m-letter_spacing, 0);
+      text-transform: var(--typography-text-m-text_transform, none);
+    }
+.FileUploaderDrop_size_l {
+    --file-uploader-drop-min-block-size: 138px;
+    --file-uploader-drop-block-padding: var(--spacing-l);
+    --file-uploader-drop-inline-padding: var(--spacing-l);
+  }
+.FileUploaderDrop_size_l .FileUploaderDrop-Label {
+      font: var(--typography-text-l_1-font);
+      letter-spacing: var(--typography-text-l_1-letter_spacing, 0);
+      text-transform: var(--typography-text-l_1-text_transform, none);
+    }
+.FileUploaderDrop_size_l .FileUploaderDrop-Hint {
+      font: var(--typography-text-l-font);
+      letter-spacing: var(--typography-text-l-letter_spacing, 0);
+      text-transform: var(--typography-text-l-text_transform, none);
+    }
+.FileUploaderDrop_variant_main {
+    --file-uploader-drop-icon-background-color: var(--color-background-secondary);
+
+    /* Border */
+    --file-uploader-drop-border-base-color: var(--color-border-secondary);
+    --file-uploader-drop-border-hover-color: var(--color-border-secondary-hover);
+    --file-uploader-drop-border-pressed-color: var(--color-border-secondary-pressed);
+    --file-uploader-drop-border-drag-color: var(--color-border-action);
+
+    /* Background */
+    --file-uploader-drop-background-base-color: var(--color-background-main);
+    --file-uploader-drop-background-hover-color: var(--color-background-main-hover);
+    --file-uploader-drop-background-pressed-color: var(--color-background-main-hover);
+    --file-uploader-drop-background-drag-color: var(--color-background-main-pressed);
+  }
+.FileUploaderDrop_variant_primary {
+    --file-uploader-drop-icon-background-color: var(--color-background-tertiary);
+
+    /* Border */
+    --file-uploader-drop-border-base-color: var(--color-border-main);
+    --file-uploader-drop-border-hover-color: var(--color-border-main-hover);
+    --file-uploader-drop-border-pressed-color: var(--color-border-main-pressed);
+    --file-uploader-drop-border-drag-color: var(--color-border-action);
+
+    /* Background */
+    --file-uploader-drop-background-base-color: var(--color-background-primary);
+    --file-uploader-drop-background-hover-color: var(--color-background-primary-hover);
+    --file-uploader-drop-background-pressed-color: var(--color-background-primary-hover);
+    --file-uploader-drop-background-drag-color: var(--color-background-primary-pressed);
+  }
+.FileUploaderDrop_withReactionToClick {
+    cursor: pointer;
+  }
+.FileUploaderDrop_status_default.FileUploaderDrop:hover {
+    border-color: var(--file-uploader-drop-border-hover-color);
+    background-color: var(--file-uploader-drop-background-hover-color);
+  }
+.FileUploaderDrop_status_default.FileUploaderDrop:active {
+    border-color: var(--file-uploader-drop-border-pressed-color);
+    background-color: var(--file-uploader-drop-background-pressed-color);
+  }
+.FileUploaderDrop_dragging {
+    --file-uploader-drop-border-type: solid;
+    border-color: var(--file-uploader-drop-border-drag-color);
+    background-color: var(--file-uploader-drop-background-drag-color);
+  }
+.FileUploaderDrop_status_loading {
+    border-color: var(--file-uploader-drop-border-base-color);
+    background-color: var(--color-background-disabled);
+    cursor: wait;
+  }
+.FileUploaderDrop_status_error.FileUploaderDrop_variant_main {
+    border-color: var(--color-border-error);
+    background-color: var(--color-background-main)
+  }
+.FileUploaderDrop_status_error.FileUploaderDrop_variant_primary {
+    border-color: var(--color-border-error);
+    background-color: var(--color-background-primary)
+  }
+.FileUploaderDrop_status_disabled {
+    --file-uploader-drop-border-type: solid;
+    --file-uploader-drop-icon-color: var(--color-content-disabled);
+    --file-uploader-drop-label-color: var(--color-content-disabled);
+    --file-uploader-drop-hint-color: var(--color-content-disabled);
+    border-color: var(--color-border-disabled);
+    background-color: var(--color-background-disabled);
+    cursor: not-allowed;
+  }
+.FileUploaderDrop-Icon {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    box-sizing: border-box;
+    border-radius: 100%;
+    padding: var(--spacing-2xs);
+    background-color: var(--file-uploader-drop-icon-background-color);
+    transition: background-color var(--transition-default);
+    color: var(--file-uploader-drop-icon-color);
+    margin-block-end: var(--spacing-2xs);
+    cursor: pointer;
+  }
+.FileUploaderDrop-Label {
+    color: var(--file-uploader-drop-label-color);
+    transition: color var(--transition-default);
+    text-align: center;
+  }
+.FileUploaderDrop-Hint {
+    margin-block-start: var(--spacing-3xs);
+    color: var(--file-uploader-drop-hint-color);
+    transition: color var(--transition-default);
+    text-align: center;
+  }
+.FileUploaderDrop-Button {
+    margin-block-start: var(--spacing-4xs);
+  }