@cloud-ru/ds-dropzone 1.0.0

package/dist/esm/components/FileUpload/FileUpload.d.ts

@@ -0,0 +1,45 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { ChangeEventHandler, InputHTMLAttributes, ReactElement, Ref } from 'react';
+import { UploadMode } from '../../types.js';
+import { AcceptInput, FileRejection } from '../../utils.js';
+/**
+ * Нативные атрибуты `<input type="file">`, проксируемые на скрытый input:
+ * `name`, `id`, `required`, `capture`, `form`, `onBlur` и т.п. — всё, что нужно
+ * для работы в HTML-форме и интеграции с react-hook-form (`{...register(name)}`).
+ * Управляемые самим компонентом поля исключены.
+ */
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'accept' | 'multiple' | 'disabled' | 'value' | 'defaultValue' | 'onChange' | 'children'>;
+export type FileUploadProps = WithSupportProps<{
+    /** Триггер открытия диалога выбора файлов (кнопка / лейбл). Клонируется, к нему добавляется `onClick`. */
+    children: ReactElement;
+    /** Колбек с принятыми файлами (прошедшими проверку `maxSize` и `accept`). */
+    onFilesUpload(files: File[]): void;
+    /**
+     * Колбек с отклонёнными файлами и причиной отказа (`maxSize` / `mime`).
+     * Вызывается только когда задан `maxSize` и/или `accept` и есть отклонённые файлы.
+     */
+    onFilesReject?(rejections: FileRejection[]): void;
+    /**
+     * Нативный `onChange` скрытого input. Вызывается до валидации с исходным событием —
+     * точка интеграции с react-hook-form и другими form-библиотеками.
+     */
+    onChange?: ChangeEventHandler<HTMLInputElement>;
+    /**
+     * Режим выбора файлов
+     * @default multiple
+     */
+    mode?: UploadMode;
+    /**
+     * Разрешённые типы файлов: MIME-тип (`image/png`), шаблон (`image/*`) или расширение (`.pdf`).
+     * Строка (через запятую, как нативный `accept`) или массив. Задаёт нативный `accept` и валидацию.
+     */
+    accept?: AcceptInput;
+    /** Максимальный размер одного файла в байтах. Превысившие уходят в `onFilesReject`. */
+    maxSize?: number;
+    /** Деактивирует триггер и input. */
+    disabled?: boolean;
+    /** Ссылка на нативный `<input type="file">` — для интеграции с формами (react-hook-form `ref`). */
+    innerRef?: Ref<HTMLInputElement>;
+} & NativeInputProps>;
+export declare function FileUpload({ mode, onFilesUpload, onFilesReject, onChange, accept, maxSize, disabled, innerRef, children, ...rest }: FileUploadProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/FileUpload/FileUpload.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractDataTestProps } from '@cloud-ru/ds-utils';
+import { cloneElement, useRef, } from 'react';
+import { TEST_IDS, UPLOAD_MODE } from '../../constants.js';
+import { buildAcceptAttribute, partitionFiles } from '../../utils.js';
+import styles from './styles.module.css';
+// eslint-disable-next-line ds/require-inner-ref-support -- innerRef ведёт на скрытый <input type="file">, а не на корень: маркер соврал бы поповеру.
+export function FileUpload({ mode = UPLOAD_MODE.Multiple, onFilesUpload, onFilesReject, onChange, accept, maxSize, disabled = false, innerRef, children, ...rest }) {
+    const hiddenFileInput = useRef(null);
+    const setInputRef = (node) => {
+        hiddenFileInput.current = node;
+        if (typeof innerRef === 'function') {
+            innerRef(node);
+        }
+        else if (innerRef) {
+            innerRef.current = node;
+        }
+    };
+    const handleButtonClick = (cb) => (e) => {
+        if (disabled)
+            return;
+        hiddenFileInput.current?.click();
+        cb?.(e);
+    };
+    const handleFileSelect = (e) => {
+        onChange?.(e);
+        const { files } = e.target;
+        if (!files)
+            return;
+        const filesArray = Array.from(files);
+        if (typeof maxSize === 'number' || accept) {
+            const { accepted, rejected } = partitionFiles(filesArray, { maxSize, accept });
+            if (rejected.length) {
+                onFilesReject?.(rejected);
+            }
+            onFilesUpload(accepted);
+            return;
+        }
+        onFilesUpload(filesArray);
+    };
+    const handleClick = (e) => {
+        e.target.value = '';
+    };
+    const childProps = children.props;
+    const mergedProps = {
+        onClick: handleButtonClick(childProps?.onClick),
+        disabled: childProps?.disabled ?? disabled,
+    };
+    return (_jsxs(_Fragment, { children: [cloneElement(children, mergedProps), _jsx("input", { ...rest, onChange: handleFileSelect, multiple: mode === UPLOAD_MODE.Multiple, ref: setInputRef, className: styles.hiddenInput, type: 'file', accept: buildAcceptAttribute(accept), disabled: disabled, onClick: handleClick, "data-test-id": TEST_IDS.fileUpload.nativeInput, ...extractDataTestProps(rest) })] }));
+}

package/dist/esm/components/FileUpload/index.d.ts

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

package/dist/esm/components/FileUpload/index.js

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

package/dist/esm/components/FileUpload/styles.module.css

@@ -0,0 +1,3 @@
+.hiddenInput{
+  display:none;
+}

package/dist/esm/components/HiddenDropZone/HiddenDropZone.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+import { DropzoneProps } from '../Dropzone/index.js';
+export type HiddenDropZoneProps = Omit<DropzoneProps, 'children'> & {
+    /** Контент dropzone при drag (overlay) */
+    content?: ReactNode;
+    /** Дочерний контент, поверх которого отображается dropzone при drag */
+    children: ReactNode;
+};
+/** Компонент — скрытая дропзона, накрывающая произвольный контент (формы, карточки) */
+export declare function HiddenDropZone(props: HiddenDropZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/HiddenDropZone/HiddenDropZone.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useDrag } from '../../hooks/useDrag.js';
+import { PrivateDropZone } from '../PrivateDropZone/index.js';
+import styles from './styles.module.css';
+/** Компонент — скрытая дропзона, накрывающая произвольный контент (формы, карточки) */
+export function HiddenDropZone(props) {
+    const { disabled = false, children, className, content, 'data-test-id': dataTestId, ...rest } = props;
+    const { events, isOver } = useDrag(disabled);
+    const showOverlay = isOver && !disabled;
+    return (_jsxs("div", { className: cn(styles.wrapper, className), ...extractSupportProps({ ...rest, 'data-test-id': dataTestId }), ...events, children: [showOverlay && (_jsx(PrivateDropZone, { className: styles.dropZone, ...events, ...rest, isOver: true, disabled: disabled, children: content })), _jsx("div", { className: cn(styles.children, showOverlay && styles.hidden), children: children })] }));
+}

package/dist/esm/components/HiddenDropZone/index.d.ts

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

package/dist/esm/components/HiddenDropZone/index.js

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

package/dist/esm/components/HiddenDropZone/styles.module.css

@@ -0,0 +1,20 @@
+.wrapper{
+  position:relative;
+  display:inline-block;
+}
+
+.dropZone{
+  position:absolute;
+  width:100%;
+  height:100%;
+}
+
+.hidden *{
+  visibility:hidden;
+  opacity:0;
+}
+
+.children{
+  width:100%;
+  height:100%;
+}

package/dist/esm/components/PrivateDropZone/PrivateDropZone.d.ts

@@ -0,0 +1,2 @@
+import { PrivateDropZoneProps } from './types.js';
+export declare function PrivateDropZone({ disabled, className, isOver, onDragLeave, onDragOver, onDrop, mode, children, onFilesUpload, onFilesReject, accept, maxSize, onChange, innerRef, name, id, required, form, capture, size, ...rest }: PrivateDropZoneProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/PrivateDropZone/PrivateDropZone.js

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { useRef } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { buildAcceptAttribute, partitionFiles } from '../../utils.js';
+import { UPLOAD_MODE } from './constants.js';
+import styles from './styles.module.css';
+// eslint-disable-next-line ds/require-inner-ref-support -- innerRef ведёт на скрытый <input type="file">, а не на корень: маркер соврал бы поповеру.
+export function PrivateDropZone({ disabled = false, className, isOver, onDragLeave, onDragOver, onDrop, mode = UPLOAD_MODE.Multiple, children, onFilesUpload, onFilesReject, accept, maxSize, onChange, innerRef, name, id, required, form, capture, size = 'm', ...rest }) {
+    const hiddenFileInput = useRef(null);
+    const setInputRef = (node) => {
+        hiddenFileInput.current = node;
+        if (typeof innerRef === 'function') {
+            innerRef(node);
+        }
+        else if (innerRef) {
+            innerRef.current = node;
+        }
+    };
+    const emitFiles = (files) => {
+        if (typeof maxSize === 'number' || accept) {
+            const { accepted, rejected } = partitionFiles(files, { maxSize, accept });
+            if (rejected.length) {
+                onFilesReject?.(rejected);
+            }
+            onFilesUpload(accepted);
+            return;
+        }
+        onFilesUpload(files);
+    };
+    const handleAttachFile = () => {
+        if (disabled)
+            return;
+        hiddenFileInput.current?.click();
+    };
+    const handleFileSelect = (e) => {
+        onChange?.(e);
+        const { files } = e.target;
+        if (!files)
+            return;
+        emitFiles(Array.from(files));
+    };
+    const handleDrop = (e) => {
+        if (disabled)
+            return;
+        e.preventDefault();
+        const filesArray = Array.from(e.dataTransfer.files);
+        onDrop?.(e);
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        emitFiles(mode === UPLOAD_MODE.Single ? [filesArray[0]] : filesArray);
+    };
+    return (_jsxs("button", { className: cn(className, styles.container), type: 'button', disabled: disabled, ...extractSupportProps(rest), "data-over": isOver || undefined, "data-disabled": disabled || undefined, "data-size": size, onClick: handleAttachFile, tabIndex: disabled ? -1 : 0, onDrop: handleDrop, onDragLeave: onDragLeave, onDragOver: onDragOver, children: [_jsx("span", { className: styles.acrylic, "aria-hidden": true }), _jsx("span", { className: styles.borderLayer, "data-state-layer": true, "aria-hidden": true, "data-state": 'borderOnBackground' }), _jsx("span", { className: styles.overLayer, "data-state-layer": true, "aria-hidden": true, "data-state": 'activatedOnBackground' }), children && _jsx("div", { className: styles.content, children: children }), _jsx("input", { "data-test-id": TEST_IDS.dropzone.nativeInput, className: styles.hidden, onChange: handleFileSelect, multiple: mode === UPLOAD_MODE.Multiple, ref: setInputRef, type: 'file', accept: buildAcceptAttribute(accept), disabled: disabled, name: name, id: id, required: required, form: form, capture: capture, onClick: e => {
+                    e.target.value = '';
+                } })] }));
+}

package/dist/esm/components/PrivateDropZone/constants.d.ts

@@ -0,0 +1 @@
+export { UPLOAD_MODE } from '../../constants.js';

package/dist/esm/components/PrivateDropZone/constants.js

@@ -0,0 +1 @@
+export { UPLOAD_MODE } from '../../constants.js';

package/dist/esm/components/PrivateDropZone/index.d.ts

@@ -0,0 +1,2 @@
+export { PrivateDropZone } from './PrivateDropZone.js';
+export type { PrivateDropZoneProps } from './types.js';

package/dist/esm/components/PrivateDropZone/index.js

@@ -0,0 +1 @@
+export { PrivateDropZone } from './PrivateDropZone.js';

package/dist/esm/components/PrivateDropZone/styles.module.css

@@ -0,0 +1,405 @@
+@charset "UTF-8";
+.hidden{
+  display:none;
+}
+
+.content{
+  z-index:1;
+  display:flex;
+  align-items:center;
+  justify-content:center;
+  width:100%;
+  height:100%;
+}
+
+.overLayer{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+  visibility:hidden;
+  background-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+}
+
+.borderLayer{
+  visibility:initial;
+}
+
+.acrylic{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.container{
+  cursor:pointer;
+  position:relative;
+  z-index:0;
+  display:flex;
+  flex-direction:column;
+  align-items:center;
+  justify-content:center;
+  box-sizing:border-box;
+  width:100%;
+  margin:0;
+  padding:0;
+  border:none;
+  font-family:inherit;
+  text-decoration:none;
+  background:transparent;
+  background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+  outline:0;
+  outline-offset:0;
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.container[data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
+}
+.container[data-acrylic-appearance=transparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=transparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:transparent;
+}
+.container[data-acrylic-appearance=decorTransparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.container[data-acrylic-appearance=decorTransparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.container .content{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+.container:focus-visible{
+  outline:var(--sn-brand-anatomy-focusLine-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeBold, 3px)) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
+  outline-offset:0;
+}
+.container[data-over] .overLayer{
+  visibility:inherit;
+}
+.container[data-size=s]{
+  border-radius:var(--sn-dropzone-anatomy-size-s-borderRadius, var(--sn-brand-anatomy-radius-field-s, var(--sn-primitive-dimension-2, 2px)));
+  min-height:var(--sn-dropzone-anatomy-size-s-minHeight, var(--sn-density-size-s, var(--sn-primitive-dimension-48, 48px)));
+  border-width:var(--sn-dropzone-anatomy-size-s-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+  padding-left:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-dropzone-anatomy-size-s-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+  padding-top:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-s-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
+}
+.container[data-size=s] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-s-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-s, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-size=m]{
+  border-radius:var(--sn-dropzone-anatomy-size-m-borderRadius, var(--sn-brand-anatomy-radius-field-m, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-right:var(--sn-dropzone-anatomy-size-m-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+  padding-top:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-m-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  min-height:var(--sn-dropzone-anatomy-size-m-minHeight, var(--sn-density-size-m, var(--sn-primitive-dimension-56, 56px)));
+  border-width:var(--sn-dropzone-anatomy-size-m-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+}
+.container[data-size=m] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-right:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-m-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-m, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-size=l]{
+  border-radius:var(--sn-dropzone-anatomy-size-l-borderRadius, var(--sn-brand-anatomy-radius-field-l, var(--sn-primitive-dimension-2, 2px)));
+  padding-left:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-right:var(--sn-dropzone-anatomy-size-l-paddingHorizontal, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+  padding-top:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-l-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
+  min-height:var(--sn-dropzone-anatomy-size-l-minHeight, var(--sn-density-size-l, var(--sn-primitive-dimension-64, 64px)));
+  border-width:var(--sn-dropzone-anatomy-size-l-borderWidth, var(--sn-brand-anatomy-line-field-strokeWeight, var(--sn-primitive-strokeWeight-strokeRegular, 1px)));
+}
+.container[data-size=l] .content{
+  padding-left:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-right:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingHorizontal, var(--sn-density-spacing-control-wrapper-horizontal-l, var(--sn-primitive-dimension-12, 12px)));
+  padding-top:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-dropzone-anatomy-size-l-contentWrapper-paddingVertical, var(--sn-density-spacing-control-wrapper-vertical-l, var(--sn-primitive-dimension-8, 8px)));
+}
+.container[data-disabled]{
+  cursor:not-allowed;
+  background-color:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.container[data-disabled] .content{
+  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
+}
+.container .borderLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.container .borderLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.container .borderLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.container .borderLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.container .borderLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.container .borderLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.container .borderLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.container .borderLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.container .borderLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .container:hover:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.container{
+}
+.container[data-loading] .borderLayer[data-state=borderOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.container[data-loading] .borderLayer[data-state=emptyNeutralOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.container[data-loading] .borderLayer[data-state=activatedOnBackground], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.container[data-loading] .borderLayer[data-state=versionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-loading] .borderLayer[data-state=emptyVersionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.container[data-loading] .borderLayer[data-state=inversionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-loading] .borderLayer[data-state=emptyInversionOnColor], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.container[data-loading] .borderLayer[data-state=emptyDarkOnAccent], .container:active:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent], .container[data-pressed=true]:not([data-disabled], [data-loading]) .borderLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+.container > [data-state-layer][data-state=borderOnBackground]{
+  border-style:dashed !important;
+}