@salutejs/plasma-new-hope 0.186.0-canary.1511.11719682564.0 → 0.186.0-canary.1534.11720486647.0

package/styled-components/cjs/examples/plasma_b2c/components/Dropzone/Dropzone.template-docs.mdx

@@ -0,0 +1,136 @@
+---
+id: dropzone
+title: Dropzone
+---
+
+import { PropsTable } from '@site/src/components';
+
+# Dropzone
+Компонент для загрузки файлов, без отображения индикации загрузки. 
+Компонент не предполагает наличия валиации, так как является частью Upload. 
+Но валидацию можно задать с помощью callback `validator`.
+<PropsTable name="Dropzone" />
+
+# Типизация
+
+```tsx
+type DropzoneProps = {
+    /**
+     * Массив форматов файлов, которые могут быть прикреплены (см. HTML-атрибут 'accept' для 'input').
+     */
+    acceptedFileFormats?: string[];
+    /**
+     * Позовляет выбирать несколько файлов для загрузки
+     */
+    multiple?: boolean;
+    /**
+     * Слот для Title
+     */
+    title?: string;
+    /**
+     * Слот для описания
+     */
+    description?: ReactNode;
+    /**
+     * Слот для иконки
+     */
+    icon?: ReactNode;
+    /**
+     * Расположение иконки
+     * @default 'left'
+     */
+    iconPlacement?: 'top' | 'left';
+    /**
+     * Размер компонента
+     */
+    size?: string;
+    /**
+     * Вид компонента
+     */
+    view?: string;
+    /**
+     * Компонент неактивен
+     */
+    disabled?: boolean;
+    /**
+     * Компонент растягивается на всю доступную ширину
+     */
+    stretch?: boolean;
+    /**
+     * Функция, вызываемая в момент вхождения курсора внутрь границ Dropzone
+     */
+    onDragEnter?: () => void;
+    /**
+     * Функция, вызываемая в момент выхода курсора из Dropzone
+     */
+    onDragLeave?: () => void;
+    /**
+     * Функция, вызываемая при нахождении курсора внутри Dropzone
+     */
+    onDragOver?: () => void;
+    /**
+     * Функция, вызываемая при drop файлов
+     */
+    onDrop?: () => void;
+    /**
+     * Функция, вызываемая для валидации файлов, перед onDropFiles
+     */
+    validator?: (files: File[]) => ValidatorReturnType;
+    /**
+     * Функция, вызываемая при наличии файлов, после onDrop
+     */
+    onDropFiles?: FileProcessHandler;
+    /**
+     * Функция, вызываемая при выборе файлов
+     */
+    onChoseFiles?: FileProcessHandler;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'accept'>;
+```
+
+# Пример
+
+```tsx live
+import React from 'react';
+import { Dropzone } from '@salutejs/{{ package }}';
+
+export function App() {
+    const onDragEnter = () => {
+        console.log("onDragEnter")
+    }
+
+    const onDragLeave = () => {
+        console.log("onDragLeave")
+    }
+
+    const onDrop = () => {
+        console.log("onDrop")
+    }
+
+    const onDropFiles = () => {
+        console.log("onDropFiles")
+    }
+
+    const onChange = () => {
+        console.log("onChange")
+    }
+
+    const onChoseFiles = () => {
+        console.log("onChoseFiles")
+    }
+
+    return (
+        <Dropzone
+            iconPlacement="top"
+            width="240"
+            title="Click to upload"
+            description="or drag and drop files here"
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+            onDropFiles={onDropFiles}
+            onChange={onChange}
+            onChoseFiles={onChoseFiles}
+        />
+    );
+}
+```

package/styled-components/cjs/index.js

@@ -684,15 +684,4 @@ Object.keys(_ViewContainer).forEach(function (key) {
       return _ViewContainer[key];
     }
   });
-});
-var _NumberInput = /*#__PURE__*/require("./components/NumberInput");
-Object.keys(_NumberInput).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _NumberInput[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _NumberInput[key];
-    }
-  });
 });

package/styled-components/es/components/_Icon/Icon.assets/ArrowBarDown.js

@@ -0,0 +1,16 @@
+var _path;
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+import React from 'react';
+export var ArrowBarDown = function ArrowBarDown(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    width: "100%",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M7.95833 1.875C8.23448 1.875 8.45833 2.09886 8.45833 2.375V10.4043L11.2686 7.54868C11.4623 7.35186 11.7789 7.34933 11.9757 7.54302C12.1725 7.73672 12.1751 8.05329 11.9814 8.25011L8.3147 11.9759C8.21782 12.0744 8.08453 12.1283 7.94645 12.1251C7.80837 12.1218 7.67779 12.0615 7.5857 11.9586L4.25237 8.23278C4.06824 8.02698 4.08582 7.71088 4.29162 7.52676C4.49742 7.34264 4.81351 7.36021 4.99763 7.56601L7.45833 10.3164V2.375C7.45833 2.09886 7.68219 1.875 7.95833 1.875ZM2.5 14.0001C2.5 13.724 2.72386 13.5001 3 13.5001H13C13.2761 13.5001 13.5 13.724 13.5 14.0001C13.5 14.2763 13.2761 14.5001 13 14.5001H3C2.72386 14.5001 2.5 14.2763 2.5 14.0001Z",
+    fill: "currentColor"
+  })));
+};

package/styled-components/es/components/_Icon/Icons/IconArrowBarDown.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ArrowBarDown } from '../Icon.assets/ArrowBarDown';
+import { IconRoot } from '../IconRoot';
+export var IconArrowBarDown = function IconArrowBarDown(_ref) {
+  var _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'xs' : _ref$size,
+    color = _ref.color,
+    className = _ref.className;
+  return /*#__PURE__*/React.createElement(IconRoot, {
+    className: className,
+    size: size,
+    color: color,
+    icon: ArrowBarDown
+  });
+};

package/styled-components/es/components/_Icon/index.js

@@ -24,4 +24,5 @@ export { IconBlankOutline } from './Icons/IconBlankOutline';
 export { IconBlankPdfOutline } from './Icons/IconBlankPdfOutline';
 export { IconBlankTxtOutline } from './Icons/IconBlankTxtOutline';
 export { IconBlankXlsOutline } from './Icons/IconBlankXlsOutline';
-export { IconInfoCircleOutline } from './Icons/IconInfoCircleOutline';
+export { IconInfoCircleOutline } from './Icons/IconInfoCircleOutline';
+export { IconArrowBarDown } from './Icons/IconArrowBarDown';

package/styled-components/es/examples/plasma_b2c/components/Dropzone/Dropzone.js

@@ -0,0 +1,207 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _IconArrowBarDown;
+var _excluded = ["className", "style", "accept", "multiple", "title", "description", "icon", "iconPlacement", "size", "view", "disabled", "stretch", "width", "onDragEnter", "onDragLeave", "onDragOver", "onDrop", "validator", "onClick", "onChange", "onChoseFiles"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _regeneratorRuntime() { "use strict"; /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */ _regeneratorRuntime = function _regeneratorRuntime() { return e; }; var t, e = {}, r = Object.prototype, n = r.hasOwnProperty, o = Object.defineProperty || function (t, e, r) { t[e] = r.value; }, i = "function" == typeof Symbol ? Symbol : {}, a = i.iterator || "@@iterator", c = i.asyncIterator || "@@asyncIterator", u = i.toStringTag || "@@toStringTag"; function define(t, e, r) { return Object.defineProperty(t, e, { value: r, enumerable: !0, configurable: !0, writable: !0 }), t[e]; } try { define({}, ""); } catch (t) { define = function define(t, e, r) { return t[e] = r; }; } function wrap(t, e, r, n) { var i = e && e.prototype instanceof Generator ? e : Generator, a = Object.create(i.prototype), c = new Context(n || []); return o(a, "_invoke", { value: makeInvokeMethod(t, r, c) }), a; } function tryCatch(t, e, r) { try { return { type: "normal", arg: t.call(e, r) }; } catch (t) { return { type: "throw", arg: t }; } } e.wrap = wrap; var h = "suspendedStart", l = "suspendedYield", f = "executing", s = "completed", y = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} var p = {}; define(p, a, function () { return this; }); var d = Object.getPrototypeOf, v = d && d(d(values([]))); v && v !== r && n.call(v, a) && (p = v); var g = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(p); function defineIteratorMethods(t) { ["next", "throw", "return"].forEach(function (e) { define(t, e, function (t) { return this._invoke(e, t); }); }); } function AsyncIterator(t, e) { function invoke(r, o, i, a) { var c = tryCatch(t[r], t, o); if ("throw" !== c.type) { var u = c.arg, h = u.value; return h && "object" == _typeof(h) && n.call(h, "__await") ? e.resolve(h.__await).then(function (t) { invoke("next", t, i, a); }, function (t) { invoke("throw", t, i, a); }) : e.resolve(h).then(function (t) { u.value = t, i(u); }, function (t) { return invoke("throw", t, i, a); }); } a(c.arg); } var r; o(this, "_invoke", { value: function value(t, n) { function callInvokeWithMethodAndArg() { return new e(function (e, r) { invoke(t, n, e, r); }); } return r = r ? r.then(callInvokeWithMethodAndArg, callInvokeWithMethodAndArg) : callInvokeWithMethodAndArg(); } }); } function makeInvokeMethod(e, r, n) { var o = h; return function (i, a) { if (o === f) throw Error("Generator is already running"); if (o === s) { if ("throw" === i) throw a; return { value: t, done: !0 }; } for (n.method = i, n.arg = a;;) { var c = n.delegate; if (c) { var u = maybeInvokeDelegate(c, n); if (u) { if (u === y) continue; return u; } } if ("next" === n.method) n.sent = n._sent = n.arg;else if ("throw" === n.method) { if (o === h) throw o = s, n.arg; n.dispatchException(n.arg); } else "return" === n.method && n.abrupt("return", n.arg); o = f; var p = tryCatch(e, r, n); if ("normal" === p.type) { if (o = n.done ? s : l, p.arg === y) continue; return { value: p.arg, done: n.done }; } "throw" === p.type && (o = s, n.method = "throw", n.arg = p.arg); } }; } function maybeInvokeDelegate(e, r) { var n = r.method, o = e.iterator[n]; if (o === t) return r.delegate = null, "throw" === n && e.iterator["return"] && (r.method = "return", r.arg = t, maybeInvokeDelegate(e, r), "throw" === r.method) || "return" !== n && (r.method = "throw", r.arg = new TypeError("The iterator does not provide a '" + n + "' method")), y; var i = tryCatch(o, e.iterator, r.arg); if ("throw" === i.type) return r.method = "throw", r.arg = i.arg, r.delegate = null, y; var a = i.arg; return a ? a.done ? (r[e.resultName] = a.value, r.next = e.nextLoc, "return" !== r.method && (r.method = "next", r.arg = t), r.delegate = null, y) : a : (r.method = "throw", r.arg = new TypeError("iterator result is not an object"), r.delegate = null, y); } function pushTryEntry(t) { var e = { tryLoc: t[0] }; 1 in t && (e.catchLoc = t[1]), 2 in t && (e.finallyLoc = t[2], e.afterLoc = t[3]), this.tryEntries.push(e); } function resetTryEntry(t) { var e = t.completion || {}; e.type = "normal", delete e.arg, t.completion = e; } function Context(t) { this.tryEntries = [{ tryLoc: "root" }], t.forEach(pushTryEntry, this), this.reset(!0); } function values(e) { if (e || "" === e) { var r = e[a]; if (r) return r.call(e); if ("function" == typeof e.next) return e; if (!isNaN(e.length)) { var o = -1, i = function next() { for (; ++o < e.length;) if (n.call(e, o)) return next.value = e[o], next.done = !1, next; return next.value = t, next.done = !0, next; }; return i.next = i; } } throw new TypeError(_typeof(e) + " is not iterable"); } return GeneratorFunction.prototype = GeneratorFunctionPrototype, o(g, "constructor", { value: GeneratorFunctionPrototype, configurable: !0 }), o(GeneratorFunctionPrototype, "constructor", { value: GeneratorFunction, configurable: !0 }), GeneratorFunction.displayName = define(GeneratorFunctionPrototype, u, "GeneratorFunction"), e.isGeneratorFunction = function (t) { var e = "function" == typeof t && t.constructor; return !!e && (e === GeneratorFunction || "GeneratorFunction" === (e.displayName || e.name)); }, e.mark = function (t) { return Object.setPrototypeOf ? Object.setPrototypeOf(t, GeneratorFunctionPrototype) : (t.__proto__ = GeneratorFunctionPrototype, define(t, u, "GeneratorFunction")), t.prototype = Object.create(g), t; }, e.awrap = function (t) { return { __await: t }; }, defineIteratorMethods(AsyncIterator.prototype), define(AsyncIterator.prototype, c, function () { return this; }), e.AsyncIterator = AsyncIterator, e.async = function (t, r, n, o, i) { void 0 === i && (i = Promise); var a = new AsyncIterator(wrap(t, r, n, o), i); return e.isGeneratorFunction(r) ? a : a.next().then(function (t) { return t.done ? t.value : a.next(); }); }, defineIteratorMethods(g), define(g, u, "Generator"), define(g, a, function () { return this; }), define(g, "toString", function () { return "[object Generator]"; }), e.keys = function (t) { var e = Object(t), r = []; for (var n in e) r.push(n); return r.reverse(), function next() { for (; r.length;) { var t = r.pop(); if (t in e) return next.value = t, next.done = !1, next; } return next.done = !0, next; }; }, e.values = values, Context.prototype = { constructor: Context, reset: function reset(e) { if (this.prev = 0, this.next = 0, this.sent = this._sent = t, this.done = !1, this.delegate = null, this.method = "next", this.arg = t, this.tryEntries.forEach(resetTryEntry), !e) for (var r in this) "t" === r.charAt(0) && n.call(this, r) && !isNaN(+r.slice(1)) && (this[r] = t); }, stop: function stop() { this.done = !0; var t = this.tryEntries[0].completion; if ("throw" === t.type) throw t.arg; return this.rval; }, dispatchException: function dispatchException(e) { if (this.done) throw e; var r = this; function handle(n, o) { return a.type = "throw", a.arg = e, r.next = n, o && (r.method = "next", r.arg = t), !!o; } for (var o = this.tryEntries.length - 1; o >= 0; --o) { var i = this.tryEntries[o], a = i.completion; if ("root" === i.tryLoc) return handle("end"); if (i.tryLoc <= this.prev) { var c = n.call(i, "catchLoc"), u = n.call(i, "finallyLoc"); if (c && u) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } else if (c) { if (this.prev < i.catchLoc) return handle(i.catchLoc, !0); } else { if (!u) throw Error("try statement without catch or finally"); if (this.prev < i.finallyLoc) return handle(i.finallyLoc); } } } }, abrupt: function abrupt(t, e) { for (var r = this.tryEntries.length - 1; r >= 0; --r) { var o = this.tryEntries[r]; if (o.tryLoc <= this.prev && n.call(o, "finallyLoc") && this.prev < o.finallyLoc) { var i = o; break; } } i && ("break" === t || "continue" === t) && i.tryLoc <= e && e <= i.finallyLoc && (i = null); var a = i ? i.completion : {}; return a.type = t, a.arg = e, i ? (this.method = "next", this.next = i.finallyLoc, y) : this.complete(a); }, complete: function complete(t, e) { if ("throw" === t.type) throw t.arg; return "break" === t.type || "continue" === t.type ? this.next = t.arg : "return" === t.type ? (this.rval = this.arg = t.arg, this.method = "return", this.next = "end") : "normal" === t.type && e && (this.next = e), y; }, finish: function finish(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.finallyLoc === t) return this.complete(r.completion, r.afterLoc), resetTryEntry(r), y; } }, "catch": function _catch(t) { for (var e = this.tryEntries.length - 1; e >= 0; --e) { var r = this.tryEntries[e]; if (r.tryLoc === t) { var n = r.completion; if ("throw" === n.type) { var o = n.arg; resetTryEntry(r); } return o; } } throw Error("illegal catch attempt"); }, delegateYield: function delegateYield(e, r, n) { return this.delegate = { iterator: values(e), resultName: r, nextLoc: n }, "next" === this.method && (this.arg = t), y; } }, e; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import React, { forwardRef, useRef, useState } from 'react';
+import { useForkRef } from '@salutejs/plasma-core';
+import { cx, getSizeValueFromProp } from '../../../../utils';
+import { IconArrowBarDown } from '../../../../components/_Icon';
+import { classes, Content, Description, HiddenInput, privateTokens, StyledRoot, Title, TitleWrapper } from './Dropzone.styles';
+export var Dropzone = /*#__PURE__*/forwardRef(function (_ref, outerRef) {
+  var className = _ref.className,
+    style = _ref.style,
+    accept = _ref.accept,
+    multiple = _ref.multiple,
+    title = _ref.title,
+    description = _ref.description,
+    icon = _ref.icon,
+    iconPlacement = _ref.iconPlacement,
+    size = _ref.size,
+    view = _ref.view,
+    disabled = _ref.disabled,
+    stretch = _ref.stretch,
+    width = _ref.width,
+    onDragEnter = _ref.onDragEnter,
+    onDragLeave = _ref.onDragLeave,
+    onDragOver = _ref.onDragOver,
+    onDrop = _ref.onDrop,
+    validator = _ref.validator,
+    onClick = _ref.onClick,
+    onChange = _ref.onChange,
+    onChoseFiles = _ref.onChoseFiles,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isDropzoneActive = _useState2[0],
+    setIsDropzoneActive = _useState2[1];
+  var inputRef = useRef(null);
+  var forkInputRef = useForkRef(outerRef, inputRef);
+  var innerWidth = width ? getSizeValueFromProp(width) : 'fit-content';
+  var processFiles = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(rawFiles, callback, afterAction) {
+      var files, res;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            if (!(rawFiles && rawFiles.length > 0)) {
+              _context.next = 12;
+              break;
+            }
+            files = _toConsumableArray(rawFiles);
+            res = {
+              acceptedFiles: files
+            };
+            if (!validator) {
+              _context.next = 7;
+              break;
+            }
+            _context.next = 6;
+            return validator === null || validator === void 0 ? void 0 : validator(files);
+          case 6:
+            res = _context.sent;
+          case 7:
+            console.log(res);
+            if (!callback) {
+              _context.next = 11;
+              break;
+            }
+            _context.next = 11;
+            return callback(res);
+          case 11:
+            if (afterAction) {
+              afterAction();
+            }
+          case 12:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function processFiles(_x, _x2, _x3) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var handleDragEnter = function handleDragEnter(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    if (onDragEnter) {
+      onDragEnter(event);
+    }
+    var rawFiles = event.dataTransfer.files;
+    if (rawFiles && rawFiles.length > 0) {
+      setIsDropzoneActive(true);
+    }
+  };
+  var handleDragLeave = function handleDragLeave(event) {
+    event.preventDefault();
+    if (onDragLeave) {
+      onDragLeave(event);
+    }
+    setIsDropzoneActive(false);
+  };
+  var handleDragOver = function handleDragOver(event) {
+    event.preventDefault();
+    if (onDragOver) {
+      onDragOver(event);
+    }
+    var rawFiles = event.dataTransfer.files;
+    if (!isDropzoneActive && rawFiles && rawFiles.length > 0) {
+      setIsDropzoneActive(true);
+    }
+  };
+  var handleDrop = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(event) {
+      var rawFiles, afterAction;
+      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            event.preventDefault();
+            event.persist();
+            rawFiles = event.dataTransfer.files;
+            afterAction = function afterAction() {
+              return event.dataTransfer.clearData();
+            };
+            _context2.next = 6;
+            return processFiles(rawFiles, onDrop, afterAction);
+          case 6:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleDrop(_x4) {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var handleClick = function handleClick(event) {
+    if (!inputRef.current) {
+      return;
+    }
+    inputRef.current.click();
+    if (onClick) {
+      onClick(event);
+    }
+  };
+  var handleChange = /*#__PURE__*/function () {
+    var _ref4 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3(event) {
+      var rawFiles;
+      return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+        while (1) switch (_context3.prev = _context3.next) {
+          case 0:
+            if (onChange) {
+              onChange(event);
+            }
+            rawFiles = event.target.files;
+            _context3.next = 4;
+            return processFiles(rawFiles, onChoseFiles);
+          case 4:
+          case "end":
+            return _context3.stop();
+        }
+      }, _callee3);
+    }));
+    return function handleChange(_x5) {
+      return _ref4.apply(this, arguments);
+    };
+  }();
+  return /*#__PURE__*/React.createElement(StyledRoot, {
+    className: cx(className, isDropzoneActive && classes.active, stretch && classes.stretch),
+    tabIndex: 0,
+    onDragEnter: handleDragEnter,
+    onDragLeave: handleDragLeave,
+    onDragOver: handleDragOver,
+    onDrop: handleDrop,
+    onClick: handleClick,
+    style: _objectSpread(_objectSpread({}, style), {}, _defineProperty({}, privateTokens.width, innerWidth))
+  }, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(TitleWrapper, null, icon || _IconArrowBarDown || (_IconArrowBarDown = /*#__PURE__*/React.createElement(IconArrowBarDown, {
+    color: "inherit",
+    size: "s"
+  })), title && /*#__PURE__*/React.createElement(Title, null, title)), description && /*#__PURE__*/React.createElement(Description, null, description)), /*#__PURE__*/React.createElement(HiddenInput, _extends({
+    ref: forkInputRef,
+    type: "file",
+    accept: accept,
+    multiple: multiple,
+    tabIndex: -1,
+    onChange: handleChange
+  }, rest)));
+});

package/styled-components/es/examples/plasma_b2c/components/Dropzone/Dropzone.stories.tsx

@@ -0,0 +1,58 @@
+import React, { ComponentProps } from 'react';
+import type { StoryObj, Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { disableProps } from '@salutejs/plasma-sb-utils';
+
+import { WithTheme } from '../../../_helpers';
+
+import { Dropzone } from './Dropzone';
+
+const onDragEnter = action('onDragEnter');
+const onDragLeave = action('onDragLeave');
+const onDrop = action('onDrop');
+const onDropFiles = action('onDropFiles');
+const onChange = action('onChange');
+const onChoseFiles = action('onChoseFiles');
+
+const iconPlacement = ['top', 'left'];
+
+const meta: Meta<typeof Dropzone> = {
+    title: 'plasma_b2c/Dropzone',
+    component: Dropzone,
+    decorators: [WithTheme],
+    argTypes: {
+        iconPlacement: {
+            control: {
+                type: 'inline-radio',
+                options: iconPlacement,
+            },
+            defaultValue: 'top',
+        },
+        ...disableProps(['view', 'size']),
+    },
+};
+
+export default meta;
+
+type StoryPropsDefault = ComponentProps<typeof Dropzone>;
+
+export const Default: StoryObj<StoryPropsDefault> = {
+    args: {
+        iconPlacement: 'top',
+        width: 240,
+        disabled: false,
+        title: 'Click to upload',
+        description: 'or drag and drop files here',
+    },
+    render: (args) => (
+        <Dropzone
+            {...args}
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+            onDropFiles={onDropFiles}
+            onChange={onChange}
+            onChoseFiles={onChoseFiles}
+        />
+    ),
+};

package/styled-components/es/examples/plasma_b2c/components/Dropzone/Dropzone.styles.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+export var privateTokens = {
+  width: '--plasma_private-dropzone-width'
+};
+export var classes = {
+  stretch: 'dropzone-stretch',
+  active: 'dropzone-active'
+};
+export var StyledRoot = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-o8ygcm-0"
+})(["padding:1.5rem;border-radius:1.25rem;border:1px dashed var(--outline-secondary);background:var(--surface-solid-card);height:8.75rem;width:var(", ");position:relative;display:flex;align-items:center;justify-content:center;&.", "{width:100%;}&:not(.", "):hover{border-color:#4a4a4a;}&.", "{border-color:var(--outline-accent);&:after{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background:var(--overlay-soft);}}"], privateTokens.width, classes.stretch, classes.active, classes.active);
+export var Content = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-o8ygcm-1"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;"]);
+export var TitleWrapper = /*#__PURE__*/styled.div.withConfig({
+  componentId: "plasma-new-hope__sc-o8ygcm-2"
+})(["display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;color:var(--text-primary);"]);
+export var Title = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-o8ygcm-3"
+})(["font-family:var(--plasma-typo-body-h4-font-family);font-size:var(--plasma-typo-body-h4-font-size);font-style:var(--plasma-typo-body-h4-font-style);font-weight:var(--plasma-typo-body-h4-bold-font-weight);letter-spacing:var(--plasma-typo-body-h4-letter-spacing);line-height:var(--plasma-typo-body-h4-line-height);"]);
+export var Description = /*#__PURE__*/styled.span.withConfig({
+  componentId: "plasma-new-hope__sc-o8ygcm-4"
+})(["font-family:var(--plasma-typo-body-s-font-family);font-size:var(--plasma-typo-body-s-font-size);font-style:var(--plasma-typo-body-s-font-style);font-weight:var(--plasma-typo-body-s-font-weight);letter-spacing:var(--plasma-typo-body-s-letter-spacing);line-height:var(--plasma-typo-body-s-line-height);color:var(--text-secondary);"]);
+export var HiddenInput = /*#__PURE__*/styled.input.withConfig({
+  componentId: "plasma-new-hope__sc-o8ygcm-5"
+})(["display:none;"]);

package/styled-components/es/examples/plasma_b2c/components/Dropzone/Dropzone.template-docs.mdx

@@ -0,0 +1,136 @@
+---
+id: dropzone
+title: Dropzone
+---
+
+import { PropsTable } from '@site/src/components';
+
+# Dropzone
+Компонент для загрузки файлов, без отображения индикации загрузки. 
+Компонент не предполагает наличия валиации, так как является частью Upload. 
+Но валидацию можно задать с помощью callback `validator`.
+<PropsTable name="Dropzone" />
+
+# Типизация
+
+```tsx
+type DropzoneProps = {
+    /**
+     * Массив форматов файлов, которые могут быть прикреплены (см. HTML-атрибут 'accept' для 'input').
+     */
+    acceptedFileFormats?: string[];
+    /**
+     * Позовляет выбирать несколько файлов для загрузки
+     */
+    multiple?: boolean;
+    /**
+     * Слот для Title
+     */
+    title?: string;
+    /**
+     * Слот для описания
+     */
+    description?: ReactNode;
+    /**
+     * Слот для иконки
+     */
+    icon?: ReactNode;
+    /**
+     * Расположение иконки
+     * @default 'left'
+     */
+    iconPlacement?: 'top' | 'left';
+    /**
+     * Размер компонента
+     */
+    size?: string;
+    /**
+     * Вид компонента
+     */
+    view?: string;
+    /**
+     * Компонент неактивен
+     */
+    disabled?: boolean;
+    /**
+     * Компонент растягивается на всю доступную ширину
+     */
+    stretch?: boolean;
+    /**
+     * Функция, вызываемая в момент вхождения курсора внутрь границ Dropzone
+     */
+    onDragEnter?: () => void;
+    /**
+     * Функция, вызываемая в момент выхода курсора из Dropzone
+     */
+    onDragLeave?: () => void;
+    /**
+     * Функция, вызываемая при нахождении курсора внутри Dropzone
+     */
+    onDragOver?: () => void;
+    /**
+     * Функция, вызываемая при drop файлов
+     */
+    onDrop?: () => void;
+    /**
+     * Функция, вызываемая для валидации файлов, перед onDropFiles
+     */
+    validator?: (files: File[]) => ValidatorReturnType;
+    /**
+     * Функция, вызываемая при наличии файлов, после onDrop
+     */
+    onDropFiles?: FileProcessHandler;
+    /**
+     * Функция, вызываемая при выборе файлов
+     */
+    onChoseFiles?: FileProcessHandler;
+} & Omit<InputHTMLAttributes<HTMLInputElement>, 'accept'>;
+```
+
+# Пример
+
+```tsx live
+import React from 'react';
+import { Dropzone } from '@salutejs/{{ package }}';
+
+export function App() {
+    const onDragEnter = () => {
+        console.log("onDragEnter")
+    }
+
+    const onDragLeave = () => {
+        console.log("onDragLeave")
+    }
+
+    const onDrop = () => {
+        console.log("onDrop")
+    }
+
+    const onDropFiles = () => {
+        console.log("onDropFiles")
+    }
+
+    const onChange = () => {
+        console.log("onChange")
+    }
+
+    const onChoseFiles = () => {
+        console.log("onChoseFiles")
+    }
+
+    return (
+        <Dropzone
+            iconPlacement="top"
+            width="240"
+            title="Click to upload"
+            description="or drag and drop files here"
+            onDragEnter={onDragEnter}
+            onDragLeave={onDragLeave}
+            onDrop={onDrop}
+            onDropFiles={onDropFiles}
+            onChange={onChange}
+            onChoseFiles={onChoseFiles}
+        />
+    );
+}
+```

package/styled-components/es/index.js

@@ -61,5 +61,4 @@ export * from './components/EmptyState';
 export * from './components/Editable';
 export * from './components/Mask';
 export * from './components/Attach';
-export * from './components/ViewContainer';
-export * from './components/NumberInput';
+export * from './components/ViewContainer';

package/types/components/_Icon/Icon.assets/ArrowBarDown.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../IconRoot';
+export declare const ArrowBarDown: React.FC<IconProps>;
+//# sourceMappingURL=ArrowBarDown.d.ts.map

package/types/components/_Icon/Icon.assets/ArrowBarDown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ArrowBarDown.d.ts","sourceRoot":"","sources":["../../../../src/components/_Icon/Icon.assets/ArrowBarDown.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAS5C,CAAC"}

package/types/components/_Icon/Icons/IconArrowBarDown.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { IconProps } from '../IconRoot';
+export declare const IconArrowBarDown: React.FC<IconProps>;
+//# sourceMappingURL=IconArrowBarDown.d.ts.map