@invoicebox/ui 0.1.0-alpha.327 → 0.1.0-alpha.328

package/dist/components/common/Skeleton/index.d.ts

@@ -1,8 +1,22 @@
 import { FC } from 'react';
 import { TSkeletonPalette } from './palette';
 export type TProps = {
-    width?: string;
-    height?: string;
+    /** число — пиксели, строка — как есть: `'100%'`, `'72px'` */
+    width?: string | number;
+    height?: string | number;
+    /** скругление в пикселях: 4 у строк текста, 10 у полей, 20 у кнопок и карточек */
+    borderRadius?: number;
+    /** круг: аватар, значок строки; ширина берётся из высоты */
+    circle?: boolean;
+    /**
+     * Через сколько миллисекунд плашка становится видимой. Место под ней занято сразу.
+     * В личном кабинете 180: на быстром ответе плашек не видно вовсе
+     */
+    showDelay?: number;
     palette?: Partial<TSkeletonPalette>;
 };
+/**
+ * Плашка скелетона. Сама по себе декорация (`aria-hidden`): факт загрузки объявляет
+ * один статус рядом с группой плашек
+ */
 export declare const Skeleton: FC<TProps>;

package/dist/components/common/Skeleton/index.js

@@ -10,16 +10,33 @@ var S = _interopRequireWildcard(require("./styles"));
 var _palette = require("../../../palette");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var toCssSize = function toCssSize(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+};
+
+/**
+ * Плашка скелетона. Сама по себе декорация (`aria-hidden`): факт загрузки объявляет
+ * один статус рядом с группой плашек
+ */
 var Skeleton = exports.Skeleton = function Skeleton(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100%' : _ref$height,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? 10 : _ref$borderRadius,
+    _ref$circle = _ref.circle,
+    circle = _ref$circle === void 0 ? false : _ref$circle,
+    _ref$showDelay = _ref.showDelay,
+    showDelay = _ref$showDelay === void 0 ? 0 : _ref$showDelay,
     palette = _ref.palette;
   var mergedPalette = (0, _palette.useComponentPalette)('skeleton', palette);
   return /*#__PURE__*/_react["default"].createElement(S.Wrapper, {
-    $width: width,
-    $height: height,
+    "aria-hidden": true,
+    $width: toCssSize(circle ? width === '100%' ? height : width : width),
+    $height: toCssSize(height),
+    $borderRadius: circle ? '50%' : "".concat(borderRadius, "px"),
+    $showDelay: showDelay,
     $palette: mergedPalette
   }, /*#__PURE__*/_react["default"].createElement(S.Inner, {
     $palette: mergedPalette

package/dist/components/common/Skeleton/index.stories.d.ts

@@ -9,3 +9,7 @@ declare const meta: {
 export default meta;
 export declare const ByContainer: StoryObj<typeof Skeleton>;
 export declare const ByOwnSize: StoryObj<typeof Skeleton>;
+/** Строки текста, поле и кнопка: скругление по месту, как в личном кабинете */
+export declare const Shapes: StoryObj<typeof Skeleton>;
+/** Плашка появляется через 180 мс: на быстром ответе её не видно */
+export declare const WithShowDelay: StoryObj<typeof Skeleton>;

package/dist/components/common/Skeleton/index.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ByOwnSize = exports.ByContainer = void 0;
+exports["default"] = exports.WithShowDelay = exports.Shapes = exports.ByOwnSize = exports.ByContainer = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ = require(".");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
@@ -28,4 +28,45 @@ var ByOwnSize = exports.ByOwnSize = {
     width: '200px',
     height: '100px'
   }
+};
+
+/** Строки текста, поле и кнопка: скругление по месту, как в личном кабинете */
+var Shapes = exports.Shapes = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: 320,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        gap: 12,
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      circle: true,
+      height: 36
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      height: 14,
+      borderRadius: 4
+    })), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      height: 56
+    }), /*#__PURE__*/_react["default"].createElement(_.Skeleton, {
+      height: 36,
+      width: 132,
+      borderRadius: 20
+    }));
+  }
+};
+
+/** Плашка появляется через 180 мс: на быстром ответе её не видно */
+var WithShowDelay = exports.WithShowDelay = {
+  args: {
+    width: 200,
+    height: 56,
+    showDelay: 180
+  }
 };

package/dist/components/common/Skeleton/styles.d.ts

@@ -3,6 +3,8 @@ import { TSkeletonPalette } from './palette';
 export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     $width: string;
     $height: string;
+    $borderRadius: string;
+    $showDelay: number;
     $palette: TSkeletonPalette;
 }>> & string;
 export declare const Inner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {

package/dist/components/common/Skeleton/styles.js

@@ -8,30 +8,39 @@ exports.Wrapper = exports.Inner = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _reducedMotion = require("../../../utils/reducedMotion");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var shine = (0, _styledComponents.keyframes)(["0%{left:calc(0% - 200px);}100%{left:calc(100% + 200px);}"]);
+var shine = (0, _styledComponents.keyframes)(["from{background-position:-200px 0;}to{background-position:calc(200px + 100%) 0;}"]);
+var appear = (0, _styledComponents.keyframes)(["to{visibility:visible;}"]);
 var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-mb3gd0-0"
-})(["width:", ";height:", ";border-radius:10px;overflow:hidden;position:relative;background:", ";"], function (_ref) {
+})(["width:", ";height:", ";border-radius:", ";overflow:hidden;position:relative;flex-shrink:0;background:", ";", ""], function (_ref) {
   var $width = _ref.$width;
   return $width;
 }, function (_ref2) {
   var $height = _ref2.$height;
   return $height;
 }, function (_ref3) {
-  var $palette = _ref3.$palette;
+  var $borderRadius = _ref3.$borderRadius;
+  return $borderRadius;
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
   return $palette.bg;
+}, function (_ref5) {
+  var $showDelay = _ref5.$showDelay;
+  return $showDelay > 0 && (0, _styledComponents.css)(["visibility:hidden;animation:", " 0s linear ", "ms forwards;"], appear, $showDelay);
 });
+
+/* Перелив как в личном кабинете: полоса 200 проходит плашку за 1,2 с */
 var Inner = exports.Inner = _styledComponents["default"].div.withConfig({
   displayName: "styles__Inner",
   componentId: "sc-mb3gd0-1"
-})(["position:absolute;top:0;bottom:0;width:100px;background-image:linear-gradient( 90deg,", " 0px,", " 50px,", " 100px );animation:", " 3s infinite linear;", ""], function (_ref4) {
-  var $palette = _ref4.$palette;
+})(["position:absolute;inset:0;background-image:linear-gradient( 90deg,", ",", ",", " );background-size:200px 100%;background-repeat:no-repeat;animation:", " 1.2s ease-in-out infinite;", ""], function (_ref6) {
+  var $palette = _ref6.$palette;
   return $palette.bg;
-}, function (_ref5) {
-  var $palette = _ref5.$palette;
+}, function (_ref7) {
+  var $palette = _ref7.$palette;
   return $palette.flicker;
-}, function (_ref6) {
-  var $palette = _ref6.$palette;
+}, function (_ref8) {
+  var $palette = _ref8.$palette;
   return $palette.bg;
 }, shine, _reducedMotion.reducedMotion);

package/dist/components/form/Select/index.js

@@ -15,11 +15,10 @@ var _useOutsideClick = require("../../../hooks/useOutsideClick");
 var _palette = require("../../../palette");
 var _useOptionGroups = require("./hooks/useOptionGroups");
 var _Drawer = require("../../common/Drawer");
-var _Loader = _interopRequireDefault(require("./components/Loader"));
+var _Skeleton = require("../../common/Skeleton");
 var _MultipleValue = require("./components/MultipleValue");
 var _Checkbox = require("../Checkbox");
 var _ErrorBoundary = require("../../common/ErrorBoundary");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _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."); }
@@ -328,7 +327,16 @@ var SelectInner = function SelectInner(props) {
     variant: 'bodyMRegular',
     $color: palette.empty
   }, emptyOptionsLabel || 'Нет значений'));
-  var loader = /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, null, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null));
+
+  // Пока варианты грузятся — плашки на месте вариантов, как у `Autocomplete`
+  var loader = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, [0, 1, 2].map(function (key) {
+    return /*#__PURE__*/_react["default"].createElement(S.DefaultOptionWrapper, {
+      key: key
+    }, /*#__PURE__*/_react["default"].createElement(_Skeleton.Skeleton, {
+      height: 20,
+      borderRadius: 4
+    }));
+  }));
   var handleDropdownContentRender = function handleDropdownContentRender() {
     if (isLoading) {
       return loader;

package/dist/esm/components/common/Skeleton/index.js

@@ -1,16 +1,33 @@
 import React from 'react';
 import * as S from './styles';
 import { useComponentPalette } from '../../../palette';
+var toCssSize = function toCssSize(value) {
+  return typeof value === 'number' ? "".concat(value, "px") : value;
+};
+
+/**
+ * Плашка скелетона. Сама по себе декорация (`aria-hidden`): факт загрузки объявляет
+ * один статус рядом с группой плашек
+ */
 export var Skeleton = function Skeleton(_ref) {
   var _ref$width = _ref.width,
     width = _ref$width === void 0 ? '100%' : _ref$width,
     _ref$height = _ref.height,
     height = _ref$height === void 0 ? '100%' : _ref$height,
+    _ref$borderRadius = _ref.borderRadius,
+    borderRadius = _ref$borderRadius === void 0 ? 10 : _ref$borderRadius,
+    _ref$circle = _ref.circle,
+    circle = _ref$circle === void 0 ? false : _ref$circle,
+    _ref$showDelay = _ref.showDelay,
+    showDelay = _ref$showDelay === void 0 ? 0 : _ref$showDelay,
     palette = _ref.palette;
   var mergedPalette = useComponentPalette('skeleton', palette);
   return /*#__PURE__*/React.createElement(S.Wrapper, {
-    $width: width,
-    $height: height,
+    "aria-hidden": true,
+    $width: toCssSize(circle ? width === '100%' ? height : width : width),
+    $height: toCssSize(height),
+    $borderRadius: circle ? '50%' : "".concat(borderRadius, "px"),
+    $showDelay: showDelay,
     $palette: mergedPalette
   }, /*#__PURE__*/React.createElement(S.Inner, {
     $palette: mergedPalette

package/dist/esm/components/common/Skeleton/index.stories.js

@@ -21,4 +21,45 @@ export var ByOwnSize = {
     width: '200px',
     height: '100px'
   }
+};
+
+/** Строки текста, поле и кнопка: скругление по месту, как в личном кабинете */
+export var Shapes = {
+  render: function render() {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 320,
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 12
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: 'flex',
+        gap: 12,
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      circle: true,
+      height: 36
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      height: 14,
+      borderRadius: 4
+    })), /*#__PURE__*/React.createElement(Skeleton, {
+      height: 56
+    }), /*#__PURE__*/React.createElement(Skeleton, {
+      height: 36,
+      width: 132,
+      borderRadius: 20
+    }));
+  }
+};
+
+/** Плашка появляется через 180 мс: на быстром ответе её не видно */
+export var WithShowDelay = {
+  args: {
+    width: 200,
+    height: 56,
+    showDelay: 180
+  }
 };

package/dist/esm/components/common/Skeleton/styles.js

@@ -1,29 +1,38 @@
-import styled, { keyframes } from 'styled-components';
+import styled, { css, keyframes } from 'styled-components';
 import { reducedMotion } from '../../../utils/reducedMotion';
-var shine = keyframes(["0%{left:calc(0% - 200px);}100%{left:calc(100% + 200px);}"]);
+var shine = keyframes(["from{background-position:-200px 0;}to{background-position:calc(200px + 100%) 0;}"]);
+var appear = keyframes(["to{visibility:visible;}"]);
 export var Wrapper = styled.div.withConfig({
   displayName: "styles__Wrapper",
   componentId: "sc-mb3gd0-0"
-})(["width:", ";height:", ";border-radius:10px;overflow:hidden;position:relative;background:", ";"], function (_ref) {
+})(["width:", ";height:", ";border-radius:", ";overflow:hidden;position:relative;flex-shrink:0;background:", ";", ""], function (_ref) {
   var $width = _ref.$width;
   return $width;
 }, function (_ref2) {
   var $height = _ref2.$height;
   return $height;
 }, function (_ref3) {
-  var $palette = _ref3.$palette;
+  var $borderRadius = _ref3.$borderRadius;
+  return $borderRadius;
+}, function (_ref4) {
+  var $palette = _ref4.$palette;
   return $palette.bg;
+}, function (_ref5) {
+  var $showDelay = _ref5.$showDelay;
+  return $showDelay > 0 && css(["visibility:hidden;animation:", " 0s linear ", "ms forwards;"], appear, $showDelay);
 });
+
+/* Перелив как в личном кабинете: полоса 200 проходит плашку за 1,2 с */
 export var Inner = styled.div.withConfig({
   displayName: "styles__Inner",
   componentId: "sc-mb3gd0-1"
-})(["position:absolute;top:0;bottom:0;width:100px;background-image:linear-gradient( 90deg,", " 0px,", " 50px,", " 100px );animation:", " 3s infinite linear;", ""], function (_ref4) {
-  var $palette = _ref4.$palette;
+})(["position:absolute;inset:0;background-image:linear-gradient( 90deg,", ",", ",", " );background-size:200px 100%;background-repeat:no-repeat;animation:", " 1.2s ease-in-out infinite;", ""], function (_ref6) {
+  var $palette = _ref6.$palette;
   return $palette.bg;
-}, function (_ref5) {
-  var $palette = _ref5.$palette;
+}, function (_ref7) {
+  var $palette = _ref7.$palette;
   return $palette.flicker;
-}, function (_ref6) {
-  var $palette = _ref6.$palette;
+}, function (_ref8) {
+  var $palette = _ref8.$palette;
   return $palette.bg;
 }, shine, reducedMotion);

package/dist/esm/components/form/Select/index.js

@@ -18,7 +18,7 @@ import { useOutsideClick } from '../../../hooks/useOutsideClick';
 import { useComponentPalette } from '../../../palette';
 import { useOptionGroups } from './hooks/useOptionGroups';
 import { Drawer } from '../../common/Drawer';
-import Loader from './components/Loader';
+import { Skeleton } from '../../common/Skeleton';
 import { MultipleValue } from './components/MultipleValue';
 import { Checkbox } from '../Checkbox';
 import { ErrorBoundary } from '../../common/ErrorBoundary';
@@ -319,7 +319,16 @@ var SelectInner = function SelectInner(props) {
     variant: 'bodyMRegular',
     $color: palette.empty
   }, emptyOptionsLabel || 'Нет значений'));
-  var loader = /*#__PURE__*/React.createElement(S.DefaultOptionWrapper, null, /*#__PURE__*/React.createElement(Loader, null));
+
+  // Пока варианты грузятся — плашки на месте вариантов, как у `Autocomplete`
+  var loader = /*#__PURE__*/React.createElement(React.Fragment, null, [0, 1, 2].map(function (key) {
+    return /*#__PURE__*/React.createElement(S.DefaultOptionWrapper, {
+      key: key
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      height: 20,
+      borderRadius: 4
+    }));
+  }));
   var handleDropdownContentRender = function handleDropdownContentRender() {
     if (isLoading) {
       return loader;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@invoicebox/ui",
-    "version": "0.1.0-alpha.327",
+    "version": "0.1.0-alpha.328",
     "description": "Invoicebox UI",
     "license": "Apache License 2.0",
     "scripts": {

package/dist/components/form/Select/components/Loader/index.d.ts

@@ -1,2 +0,0 @@
-declare const Loader: () => import("react/jsx-runtime").JSX.Element;
-export default Loader;

package/dist/components/form/Select/components/Loader/index.js

@@ -1,25 +0,0 @@
-"use strict";
-
-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); }
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
-var S = _interopRequireWildcard(require("./styles"));
-function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var Loader = function Loader() {
-  return /*#__PURE__*/_react["default"].createElement(S.Wrapper, null, /*#__PURE__*/_react["default"].createElement(S.SvgLoader, {
-    viewBox: "25 25 50 50"
-  }, /*#__PURE__*/_react["default"].createElement(S.CircleLoader, {
-    className: "loader-path",
-    cx: "50",
-    cy: "50",
-    r: "20",
-    fill: "none",
-    stroke: "#70c542",
-    strokeWidth: "2"
-  })));
-};
-var _default = exports["default"] = Loader;

package/dist/components/form/Select/components/Loader/styles.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SvgLoader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGSVGElement>, never>> & string;
-export declare const CircleLoader: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").SVGProps<SVGCircleElement>, never>> & string;

package/dist/components/form/Select/components/Loader/styles.js

@@ -1,20 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Wrapper = exports.SvgLoader = exports.CircleLoader = void 0;
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var Wrapper = exports.Wrapper = _styledComponents["default"].div.withConfig({
-  displayName: "styles__Wrapper",
-  componentId: "sc-86q913-0"
-})(["height:24px;width:24px;position:relative;margin:0 auto;@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124;}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124;}}@-webkit-keyframes color{0%{stroke:#353f47;}40%{stroke:#353f47;}66%{stroke:#353f47;}80%,90%{stroke:#353f47;}}@keyframes color{0%{stroke:#353f47;}40%{stroke:#353f47;}66%{stroke:#353f47;}80%,90%{stroke:#353f47;}}"]);
-var SvgLoader = exports.SvgLoader = _styledComponents["default"].svg.withConfig({
-  displayName: "styles__SvgLoader",
-  componentId: "sc-86q913-1"
-})(["-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto;"]);
-var CircleLoader = exports.CircleLoader = _styledComponents["default"].circle.withConfig({
-  displayName: "styles__CircleLoader",
-  componentId: "sc-86q913-2"
-})(["stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;"]);

package/dist/esm/components/form/Select/components/Loader/index.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import * as S from './styles';
-var Loader = function Loader() {
-  return /*#__PURE__*/React.createElement(S.Wrapper, null, /*#__PURE__*/React.createElement(S.SvgLoader, {
-    viewBox: "25 25 50 50"
-  }, /*#__PURE__*/React.createElement(S.CircleLoader, {
-    className: "loader-path",
-    cx: "50",
-    cy: "50",
-    r: "20",
-    fill: "none",
-    stroke: "#70c542",
-    strokeWidth: "2"
-  })));
-};
-export default Loader;

package/dist/esm/components/form/Select/components/Loader/styles.js

@@ -1,13 +0,0 @@
-import styled from 'styled-components';
-export var Wrapper = styled.div.withConfig({
-  displayName: "styles__Wrapper",
-  componentId: "sc-86q913-0"
-})(["height:24px;width:24px;position:relative;margin:0 auto;@-webkit-keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@keyframes rotate{100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124;}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;}50%{stroke-dasharray:89,200;stroke-dashoffset:-35;}100%{stroke-dasharray:89,200;stroke-dashoffset:-124;}}@-webkit-keyframes color{0%{stroke:#353f47;}40%{stroke:#353f47;}66%{stroke:#353f47;}80%,90%{stroke:#353f47;}}@keyframes color{0%{stroke:#353f47;}40%{stroke:#353f47;}66%{stroke:#353f47;}80%,90%{stroke:#353f47;}}"]);
-export var SvgLoader = styled.svg.withConfig({
-  displayName: "styles__SvgLoader",
-  componentId: "sc-86q913-1"
-})(["-webkit-animation:rotate 2s linear infinite;animation:rotate 2s linear infinite;height:100%;-webkit-transform-origin:center center;-ms-transform-origin:center center;transform-origin:center center;width:100%;position:absolute;top:0;left:0;margin:auto;"]);
-export var CircleLoader = styled.circle.withConfig({
-  displayName: "styles__CircleLoader",
-  componentId: "sc-86q913-2"
-})(["stroke-dasharray:150,200;stroke-dashoffset:-10;-webkit-animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;animation:dash 1.5s ease-in-out infinite,color 6s ease-in-out infinite;stroke-linecap:round;"]);