@scaleflex/widget-common 0.0.1

package/lib/Image/index.js

@@ -0,0 +1,95 @@
+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 _excluded = ["onLoad", "onError", "isDraggable", "src", "applyFallback", "firstFallbackSrc", "finalFallbackSrc", "ref"];
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { useState } from 'react';
+import Styled from './Image.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var Image = function Image(_ref) {
+  var onLoad = _ref.onLoad,
+    onError = _ref.onError,
+    _ref$isDraggable = _ref.isDraggable,
+    isDraggable = _ref$isDraggable === void 0 ? false : _ref$isDraggable,
+    src = _ref.src,
+    _ref$applyFallback = _ref.applyFallback,
+    applyFallback = _ref$applyFallback === void 0 ? false : _ref$applyFallback,
+    firstFallbackSrc = _ref.firstFallbackSrc,
+    finalFallbackSrc = _ref.finalFallbackSrc,
+    ref = _ref.ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useState = useState(true),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoading = _useState2[0],
+    setIsLoading = _useState2[1];
+  if (!src) {
+    return null;
+  }
+  var handleOnImgLoad = function handleOnImgLoad(event) {
+    if (typeof onLoad === 'function') {
+      onLoad(event.currentTarget);
+    }
+    setIsLoading(false);
+  };
+  var getFallbackSrc = function getFallbackSrc(fallbackSrc, imgElement) {
+    return typeof fallbackSrc === 'function' ? fallbackSrc(imgElement) : fallbackSrc;
+  };
+  var triggerImageFallbacks = function triggerImageFallbacks(imgElement) {
+    if (!applyFallback || !imgElement) {
+      return false;
+    }
+    var fallbackAttempts = parseInt(imgElement.dataset.fallbackAttempts) || 0;
+    if (fallbackAttempts >= 2) {
+      return false;
+    }
+    var imgSrcFirstFallback = getFallbackSrc(firstFallbackSrc, imgElement);
+    if (imgSrcFirstFallback === src) {
+      fallbackAttempts += 1;
+    }
+    var isFirstFallbackFailed = fallbackAttempts > 0;
+    imgElement.dataset.fallbackAttempts = fallbackAttempts + 1;
+    if (isFirstFallbackFailed && !finalFallbackSrc) {
+      return false;
+    }
+    if (isFirstFallbackFailed) {
+      var imgSrcFinalFallback = getFallbackSrc(finalFallbackSrc, imgElement);
+      if (imgSrcFinalFallback === src || imgSrcFirstFallback === imgSrcFinalFallback) {
+        return false;
+      }
+      imgElement.src = imgSrcFinalFallback;
+    } else {
+      imgElement.src = imgSrcFirstFallback;
+    }
+    return true;
+  };
+  var handleOnImgError = function handleOnImgError(event) {
+    var isFallbackAttemptsRemaining = triggerImageFallbacks(event.currentTarget);
+    if (isFallbackAttemptsRemaining) {
+      return;
+    }
+    if (typeof onError === 'function') {
+      onError(event.currentTarget);
+    }
+    setIsLoading(false);
+  };
+  return /*#__PURE__*/_jsx(Styled.Image, _objectSpread(_objectSpread({
+    src: src
+  }, props), {}, {
+    ref: ref,
+    isLoading: isLoading,
+    onError: handleOnImgError,
+    onLoad: handleOnImgLoad,
+    draggable: isDraggable
+  }));
+};
+export default Image;

package/lib/ImagePreview/ImagePreview.styled.js

@@ -0,0 +1,19 @@
+var _templateObject, _templateObject2, _templateObject3;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled from 'styled-components';
+import { PC } from '../Typography';
+var ImageOverlayWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  right: 0;\n  left: 0;\n  background-color: ", ";\n  z-index: 2;\n  display: none;\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.palette[PC.Extra_0_3_Overlay];
+});
+var ImagePreviewWrapper = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  position: relative;\n  display: flex;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  align-items: center;\n  overflow: hidden;\n\n  .filerobot-common-ItemIcon-img {\n    z-index: 1;\n    object-fit: ", ";\n    width: 100%;\n    height: 100%;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  &:hover ", " {\n    display: block;\n  }\n"])), function (_ref2) {
+  var isIconTypeDetected = _ref2.isIconTypeDetected;
+  return isIconTypeDetected ? 'none' : 'contain';
+}, ImageOverlayWrapper);
+var AssetTypeIcon = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  position: absolute;\n  object-fit: none;\n  width: 100%;\n  height: 100%;\n  top: 0;\n  left: 0;\n"])));
+var Styled = {
+  AssetTypeIcon: AssetTypeIcon,
+  ImagePreviewWrapper: ImagePreviewWrapper,
+  ImageOverlayWrapper: ImageOverlayWrapper
+};
+export default Styled;

package/lib/ImagePreview/index.js

@@ -0,0 +1,198 @@
+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); }
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _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(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+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(r) { if (Array.isArray(r)) return r; }
+import { useRef, useState } from 'react';
+import { FILE_TYPES_AND_ICONS as ICONS, FILE_TYPES_ICON_PATH } from '@scaleflex/widget-utils/lib/constants';
+import LinkHelper from '@scaleflex/widget-utils/lib/LinkHelper';
+import clsx from '@scaleflex/widget-utils/lib/clsx';
+import getFormattedPreviewUrl from '@scaleflex/widget-utils/lib/getFormattedPreviewUrl';
+import getFileDefaultIcon from '@scaleflex/widget-utils/lib/getFileDefaultIcon';
+import Styled from './ImagePreview.styled';
+import { Image } from '../';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var DEFAULT_IMAGE_SIZE = 250;
+var ImagePreview = function ImagePreview(_ref) {
+  var srcUrl = _ref.srcUrl,
+    extension = _ref.extension,
+    size = _ref.size,
+    onDoubleClick = _ref.onDoubleClick,
+    parentIsList = _ref.parentIsList,
+    containerClassName = _ref.containerClassName,
+    onMouseLeave = _ref.onMouseLeave,
+    onMouseOver = _ref.onMouseOver,
+    onMouseEnter = _ref.onMouseEnter,
+    noImgTransformations = _ref.noImgTransformations,
+    isDevEnv = _ref.isDevEnv,
+    container = _ref.container,
+    className = _ref.className,
+    containerRef = _ref.containerRef,
+    lazyloading = _ref.lazyloading,
+    isLargeSizePreview = _ref.isLargeSizePreview,
+    isTransparencySupported = _ref.isTransparencySupported,
+    _ref$isFileDetailsPre = _ref.isFileDetailsPreview,
+    isFileDetailsPreview = _ref$isFileDetailsPre === void 0 ? false : _ref$isFileDetailsPre,
+    thumbnailUrl = _ref.thumbnailUrl,
+    previewUrl = _ref.previewUrl,
+    renderImageOverlayContent = _ref.renderImageOverlayContent,
+    _ref$isSmallSizePrevi = _ref.isSmallSizePreview,
+    isSmallSizePreview = _ref$isSmallSizePrevi === void 0 ? false : _ref$isSmallSizePrevi,
+    children = _ref.children,
+    _ref$isRemoteUpload = _ref.isRemoteUpload,
+    isRemoteUpload = _ref$isRemoteUpload === void 0 ? false : _ref$isRemoteUpload,
+    file = _ref.file,
+    _ref$defaultIconWidth = _ref.defaultIconWidth,
+    defaultIconWidth = _ref$defaultIconWidth === void 0 ? 500 : _ref$defaultIconWidth,
+    _ref$defaultIconHeigh = _ref.defaultIconHeight,
+    defaultIconHeight = _ref$defaultIconHeigh === void 0 ? 375 : _ref$defaultIconHeigh,
+    _ref$defaultIconMargi = _ref.defaultIconMargin,
+    defaultIconMargin = _ref$defaultIconMargi === void 0 ? 30 : _ref$defaultIconMargi;
+  var _containerRef = useRef();
+  var isFallbackSrcTypeIconRef = useRef(false);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isImageLoaded = _useState2[0],
+    setIsImageLoaded = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isImgLoadFailed = _useState4[0],
+    setIsImgLoadFailed = _useState4[1];
+
+  // thumbnailUrl is url to be used with small size images, i.e preview images, if not then there then we shall use previewUrl then src url
+  var imgPreviewUrl = !isLargeSizePreview && thumbnailUrl || previewUrl || srcUrl;
+  if (imgPreviewUrl === null) return null;
+  var isFileTypeIcon = imgPreviewUrl.includes(FILE_TYPES_ICON_PATH);
+  var getAppendedLink = function getAppendedLink(_ref2) {
+    var url = _ref2.url,
+      searchParams = _ref2.searchParams;
+    return new LinkHelper({
+      href: url || ''
+    }).appendSearchParams(searchParams);
+  };
+  var getFormattedUrl = function getFormattedUrl(url) {
+    return getFormattedPreviewUrl({
+      url: url,
+      isDevEnv: isDevEnv,
+      containerToken: container
+    });
+  };
+  var getFinalFallbackSrc = function getFinalFallbackSrc() {
+    var fileDefaultIconSrc = getFileDefaultIcon(file);
+    isFallbackSrcTypeIconRef.current = fileDefaultIconSrc.includes(FILE_TYPES_ICON_PATH);
+    return fileDefaultIconSrc;
+  };
+
+  // TODO(Dima): check if we can apply transformations by using ultrafast link or some other solutions how we can resize image on the fly from 3ed part sources
+  var getPreparedImgSrc = function getPreparedImgSrc(src) {
+    var fileTypeIconSearchParam = isFileTypeIcon ? {
+      func: 'fit',
+      h: defaultIconHeight,
+      margin: "".concat(defaultIconMargin, "p")
+    } : {};
+    var fileWidthSearchParam = {
+      w: isFileTypeIcon ? defaultIconWidth : Math.floor(DEFAULT_IMAGE_SIZE * devicePixelRatio)
+    };
+    var largeImgSearchParam = isLargeImagePreview(extension, size) && {
+      ci_preview: 1
+    };
+    if (noImgTransformations) {
+      return getFormattedUrl(src || imgPreviewUrl);
+    }
+    if (!isLargeSizePreview && thumbnailUrl && !src) {
+      return getAppendedLink({
+        url: getFormattedUrl(thumbnailUrl),
+        searchParams: _objectSpread({}, fileTypeIconSearchParam)
+      });
+    }
+    if (previewUrl && !src) {
+      return getAppendedLink({
+        url: getFormattedUrl(previewUrl),
+        searchParams: _objectSpread(_objectSpread({}, isLargeSizePreview ? {} : fileWidthSearchParam), fileTypeIconSearchParam)
+      });
+    }
+    return getAppendedLink({
+      url: getFormattedUrl(src || srcUrl),
+      searchParams: _objectSpread(_objectSpread(_objectSpread({}, fileWidthSearchParam), fileTypeIconSearchParam), largeImgSearchParam)
+    });
+  };
+  var assetTypeIconFormattedUrl = getAppendedLink({
+    url: ICONS[(extension || '').toLowerCase()] || ICONS._default || '',
+    searchParams: {
+      w: defaultIconWidth,
+      func: 'fit',
+      h: defaultIconHeight
+    }
+  });
+  if (localStorage.getItem('debug_previews') === '1') {
+    var imageSrc = getPreparedImgSrc();
+    var formattedPreviewUrl = getFormattedUrl(imgPreviewUrl);
+    console.log({
+      imageSrc: imageSrc,
+      formattedPreviewUrl: formattedPreviewUrl,
+      assetTypeIconFormattedUrl: assetTypeIconFormattedUrl
+    });
+  }
+  var isIconTypeDetected = (isFileTypeIcon || isFallbackSrcTypeIconRef.current) && !isSmallSizePreview;
+  return /*#__PURE__*/_jsxs(Styled.ImagePreviewWrapper, {
+    onMouseOver: onMouseOver,
+    onMouseLeave: onMouseLeave,
+    onMouseEnter: onMouseEnter,
+    isListIcon: Boolean(parentIsList),
+    isIconTypeDetected: isIconTypeDetected,
+    className: clsx(_objectSpread({
+      'filerobot-common-ItemIcon': true
+    }, containerClassName ? _defineProperty({}, containerClassName, true) : {})),
+    ref: containerRef || _containerRef,
+    children: [Boolean(isImgLoadFailed) && /*#__PURE__*/_jsx(Styled.AssetTypeIcon, {
+      src: assetTypeIconFormattedUrl
+    }), !isImgLoadFailed && /*#__PURE__*/_jsx(Image, {
+      loading: lazyloading ? 'lazy' : 'eager',
+      className: className ? "".concat(className, " filerobot-common-ItemIcon-img") : 'filerobot-common-ItemIcon-img',
+      src: getPreparedImgSrc(),
+      onLoad: function onLoad() {
+        return setIsImageLoaded(true);
+      },
+      onError: function onError() {
+        return setIsImgLoadFailed(true);
+      },
+      onDoubleClick: onDoubleClick,
+      style: isImageLoaded && isTransparencySupported && !isIconTypeDetected ? {
+        backgroundImage: "url(".concat(ICONS.chess_bg, ")"),
+        width: 'auto',
+        height: 'auto',
+        margin: isFileDetailsPreview ? 'auto' : ''
+      } : {},
+      firstFallbackSrc: function firstFallbackSrc() {
+        var _file$url;
+        return getPreparedImgSrc(file === null || file === void 0 ? void 0 : (_file$url = file.url) === null || _file$url === void 0 ? void 0 : _file$url.cdn);
+      },
+      finalFallbackSrc: getFinalFallbackSrc,
+      applyFallback: true
+    }), typeof renderImageOverlayContent === 'function' && /*#__PURE__*/_jsx(Styled.ImageOverlayWrapper, {
+      children: renderImageOverlayContent()
+    }), children]
+  });
+};
+function isLargeImagePreview(extension, size) {
+  switch (extension) {
+    case 'png':
+      return size > 20971520;
+    // if png more than 20Mb
+    case 'jpg':
+    case 'jpeg':
+    case 'webp':
+      return size > 10485760;
+    // if jpg or webp more than 10Mb
+    default:
+      return false;
+  }
+}
+export default ImagePreview;

package/lib/InputAndLabel.js

@@ -0,0 +1,77 @@
+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 _excluded = ["item", "type", "value", "style", "iconStyle", "classes", "innerRef", "icon", "onClick", "i18n", "isFilterOptions", "showLabel", "name", "error", "placeholder", "ref"];
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var InputAndLabel = function InputAndLabel(_ref) {
+  var _ref$item = _ref.item,
+    item = _ref$item === void 0 ? {} : _ref$item,
+    type = _ref.type,
+    value = _ref.value,
+    style = _ref.style,
+    iconStyle = _ref.iconStyle,
+    classes = _ref.classes,
+    innerRef = _ref.innerRef,
+    icon = _ref.icon,
+    onClick = _ref.onClick,
+    i18n = _ref.i18n,
+    isFilterOptions = _ref.isFilterOptions,
+    _ref$showLabel = _ref.showLabel,
+    showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
+    name = _ref.name,
+    error = _ref.error,
+    placeholder = _ref.placeholder,
+    ref = _ref.ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var isSavePinModal = props.id === 'filerobotNewPinModalInput';
+  var inputStyle = {
+    paddingRight: type === 'time' ? 0 : undefined,
+    width: isFilterOptions ? '100%' : undefined,
+    padding: isFilterOptions ? '7px' : undefined,
+    borderRadius: isSavePinModal && 4
+  };
+  return /*#__PURE__*/_jsxs("div", {
+    className: "filerobot-common-inputAndLabel".concat(classes ? " ".concat(classes) : ''),
+    style: isFilterOptions ? {
+      marginBottom: 0
+    } : _objectSpread(_objectSpread({}, style), {}, {
+      marginBottom: 0
+    }),
+    children: [showLabel && /*#__PURE__*/_jsx("div", {
+      className: "filerobot-common-inputAndLabel-input-header",
+      style: {
+        margin: isSavePinModal && 0
+      },
+      children: /*#__PURE__*/_jsx("label", {
+        className: "filerobot-common-inputAndLabel-header-links-label",
+        children: /*#__PURE__*/_jsx("span", {
+          children: i18n(item.name || name || item)
+        })
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      className: "filerobot-common-inputAndLabel-input-text-wrapper  ".concat(icon ? 'filerobot-common-inputAndLabel-input-text-wrapper-disable-icon' : ''),
+      children: [/*#__PURE__*/_jsx("input", _objectSpread(_objectSpread({
+        type: type,
+        value: value,
+        className: "filerobot-common-inputAndLabel-input-text",
+        style: _objectSpread({}, inputStyle),
+        onClick: onClick
+      }, props), {}, {
+        ref: ref,
+        placeholder: placeholder
+      })), icon && !isFilterOptions && /*#__PURE__*/_jsx("div", {
+        ref: innerRef,
+        className: "filerobot-common-inputAndLabel-input-icon",
+        style: _objectSpread({}, iconStyle),
+        onClick: onClick,
+        children: icon
+      })]
+    })]
+  }, props.key);
+};
+export default InputAndLabel;

package/lib/InputGroupTime.js

@@ -0,0 +1,6 @@
+var _templateObject;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { InputGroup } from '@scaleflex/ui/core';
+import styled from 'styled-components';
+var InputGroupTime = styled(InputGroup)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  *::-webkit-calendar-picker-indicator {\n    width: 16px;\n    height: 16px;\n    filter: invert(65%);\n  }\n"])));
+export default InputGroupTime;

package/lib/InputLabel.js

@@ -0,0 +1,18 @@
+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 _excluded = ["classes"];
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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); }
+import { jsx as _jsx } from "react/jsx-runtime";
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var InputLabel = function InputLabel(_ref) {
+  var classes = _ref.classes,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("label", _objectSpread({
+    className: "filerobot-common-InputLabel".concat(classes ? " ".concat(classes) : '')
+  }, rest));
+};
+export default InputLabel;

package/lib/ItemButtonOverlay/ItemButtonOverlay.styled.js

@@ -0,0 +1,33 @@
+var _templateObject, _templateObject2;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import { Button } from '@scaleflex/ui/core';
+import styled from 'styled-components';
+import { FV, PC } from '@scaleflex/widget-common';
+var ItemButtonOverlay = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  background-color: ", ";\n  position: absolute;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 0;\n  visibility: hidden;\n  z-index: 1;\n  transition: all 100ms ease-out;\n  border-radius: 3px 0 0 0;\n\n  *:hover > &, &.selected-item {\n    opacity: 1;\n    visibility: visible;\n  }\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.Extra_0_3_Overlay];
+});
+var OverlayButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: center;\n  border-radius: 4px;\n  padding: 5px 8px;\n  background-color: ", ";\n  color: ", ";\n  z-index: 100;\n  border: 0;\n  transition: all 100ms ease-out;\n\n  .SfxButton-Label {\n    align-items: center;\n    column-gap: 4px;\n    ", ";\n\n    path {\n      fill: ", ";\n    }\n  }\n\n  &:hover {\n    background-color: ", ";\n    color: ", ";\n  }\n"])), function (_ref2) {
+  var palette = _ref2.theme.palette;
+  return palette[PC.Extra_0_7_Overlay];
+}, function (_ref3) {
+  var palette = _ref3.theme.palette;
+  return palette[PC.ButtonPrimaryText];
+}, function (_ref4) {
+  var typography = _ref4.theme.typography;
+  return typography.font[FV.ButtonXsUp];
+}, function (_ref5) {
+  var palette = _ref5.theme.palette;
+  return palette[PC.ButtonPrimaryText];
+}, function (_ref6) {
+  var palette = _ref6.theme.palette;
+  return palette[PC.Extra_0_9_Overlay];
+}, function (_ref7) {
+  var palette = _ref7.theme.palette;
+  return palette[PC.ButtonPrimaryText];
+});
+var Styled = {
+  ItemButtonOverlay: ItemButtonOverlay,
+  OverlayButton: OverlayButton
+};
+export default Styled;

package/lib/ItemButtonOverlay/index.js

@@ -0,0 +1,23 @@
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import Styled from './ItemButtonOverlay.styled';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ItemButtonOverlay = function ItemButtonOverlay(_ref) {
+  var styles = _ref.styles,
+    onClick = _ref.onClick,
+    _ref$onContextMenu = _ref.onContextMenu,
+    onContextMenu = _ref$onContextMenu === void 0 ? ignoreEvent : _ref$onContextMenu,
+    className = _ref.className,
+    children = _ref.children;
+  return /*#__PURE__*/_jsx(Styled.ItemButtonOverlay, {
+    className: "filerobot-common-ItemButtonOverlay ".concat(className || ''),
+    style: styles,
+    onContextMenu: onContextMenu,
+    children: children && /*#__PURE__*/_jsx(Styled.OverlayButton, {
+      color: "basic",
+      classes: "filerobot-common-ItemButtonOverlay-button",
+      onClick: onClick,
+      children: children
+    })
+  });
+};
+export default ItemButtonOverlay;

package/lib/ItemHoverTopOptions.js

@@ -0,0 +1,58 @@
+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 _excluded = ["options", "onContextMenu", "classes", "disabled", "buttonStyles", "iconStyles"];
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { IconLabeledButton } from '@scaleflex/widget-common';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { TooltipV2 } from '@scaleflex/ui/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+var ItemHoverTopOptions = function ItemHoverTopOptions(_ref) {
+  var options = _ref.options,
+    onContextMenu = _ref.onContextMenu,
+    classes = _ref.classes,
+    disabled = _ref.disabled,
+    buttonStyles = _ref.buttonStyles,
+    iconStyles = _ref.iconStyles,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var renderButton = function renderButton(_ref2) {
+    var key = _ref2.key,
+      Icon = _ref2.Icon,
+      iconSize = _ref2.iconSize,
+      onClick = _ref2.onClick,
+      hidden = _ref2.hidden,
+      optionDisabled = _ref2.disabled,
+      disabledTooltip = _ref2.disabledTooltip,
+      testId = _ref2.testId;
+    return hidden ? null : /*#__PURE__*/_jsx(IconLabeledButton, {
+      icon: /*#__PURE__*/_jsx(TooltipV2, {
+        size: "md",
+        title: disabledTooltip,
+        hide: !optionDisabled || !disabledTooltip,
+        children: /*#__PURE__*/_jsx(Icon, {
+          size: iconSize,
+          style: iconStyles
+        })
+      }, key),
+      size: "small",
+      onClick: onClick,
+      onContextMenu: onContextMenu,
+      disabled: disabled || optionDisabled,
+      onDoubleClick: ignoreEvent,
+      style: buttonStyles,
+      "data-testid": testId
+    }, key);
+  };
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: "filerobot-common-ItemHoverTopOptions".concat(classes ? " ".concat(classes) : ''),
+    onContextMenu: onContextMenu,
+    "data-testid": "fmaw-common-item_hover_top_options"
+  }, props), {}, {
+    children: options.map(renderButton)
+  }));
+};
+export default ItemHoverTopOptions;

package/lib/LoaderView/LoaderView.styled.js

@@ -0,0 +1,37 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+function _taggedTemplateLiteral(e, t) { return t || (t = e.slice(0)), Object.freeze(Object.defineProperties(e, { raw: { value: Object.freeze(t) } })); }
+import styled, { keyframes } from 'styled-components';
+import { PC, FV } from '@scaleflex/widget-common';
+var dotsLoaderAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    color: white;\n    box-shadow: 10px 0 gray, -10px 0 white;\n    opacity: 1;\n  }\n  50% {\n    color: gray;\n    box-shadow: 10px 0 white, -10px 0 gray;\n    opacity: 0.6;\n  }\n  100% {\n    color: gray;\n    box-shadow: 10px 0 gray, -10px 0 white;\n    opacity: 0.2;\n  }\n"])));
+var barGradientAnimation = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  0% {\n    background-position: -3em 0;\n  }\n  100% {\n    background-position: 0 0;\n  }\n"])));
+var progressAnimation = keyframes(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  0% {\n    width: 0;\n  }\n  100% {\n    width: 100%;\n  }\n"])));
+var Loader = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  display: flex;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  left: 0;\n  right: 0;\n  z-index: 1200;\n  background: rgba(255, 255, 255, 0.4);\n  ", ";\n  color: ", ";\n"])), function (_ref) {
+  var typography = _ref.theme.typography;
+  return typography.font[FV.LabelExtraLarge];
+}, function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.IconsPrimary];
+});
+var LoaderWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  display: flex;\n  flex-direction: column;\n  margin: auto;\n  align-items: center;\n  align-content: center;\n  gap: 16px;\n  width: 100%;\n  position: sticky;\n  box-sizing: border-box;\n  text-align: center;\n  color: ", ";\n"])), function (_ref3) {
+  var theme = _ref3.theme;
+  return theme.palette[PC.IconsPrimary];
+});
+var LabelWrapper = styled.span(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  display: flex;\n  align-items: baseline;\n  gap: 12px;\n  width: fit-content;\n  position: sticky;\n  box-sizing: border-box;\n  text-align: center;\n  color: ", ";\n"])), function (_ref4) {
+  var theme = _ref4.theme;
+  return theme.palette[PC.IconsPrimary];
+});
+var LoadingLabel = styled.span(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral([""])));
+var DotsLoader = styled.span(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n  width: 4px;\n  height: 4px;\n  border-radius: 50%;\n  background: currentColor;\n  display: flex;\n  box-sizing: border-box;\n  animation: ", " 2s linear infinite;\n"])), dotsLoaderAnimation);
+var ProgressBarLoader = styled.span(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n  display: block;\n  position: relative;\n  height: 10px;\n  width: 250px;\n  border: 1px solid ", ";\n  border-radius: 10px;\n  overflow: hidden;\n  \n  &::after {\n    content: '';\n    position: absolute;\n    height: 10px;\n    width: 0;\n    top: 0;\n    left: 0;\n    background-size: 3em 1em;\n    background-image: linear-gradient(\n        100deg,\n        rgba(104, 121, 235, 1) 0%,\n        rgba(104, 121, 235, .8) 25%,\n        rgba(104, 121, 235, .6) 50%,\n        rgba(104, 121, 235, .8) 75%,\n        rgba(104, 121, 235, 1) 100%\n    );\n    animation: 0.5s ", " linear infinite, 7s ", " ease-in infinite;\n  }\n"])), function (_ref5) {
+  var theme = _ref5.theme;
+  return theme.palette[PC.BordersItem];
+}, barGradientAnimation, progressAnimation);
+var Styled = {
+  Loader: Loader,
+  LoaderWrapper: LoaderWrapper,
+  LabelWrapper: LabelWrapper,
+  LoadingLabel: LoadingLabel,
+  DotsLoader: DotsLoader,
+  ProgressBarLoader: ProgressBarLoader
+};
+export default Styled;

package/lib/LoaderView/index.js

@@ -0,0 +1,32 @@
+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 _excluded = ["loaderClasses", "loaderLabel"];
+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(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+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 _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import Styled from './LoaderView.styled';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+var LoaderView = function LoaderView(_ref) {
+  var loaderClasses = _ref.loaderClasses,
+    _ref$loaderLabel = _ref.loaderLabel,
+    loaderLabel = _ref$loaderLabel === void 0 ? '' : _ref$loaderLabel,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(Styled.Loader, _objectSpread(_objectSpread({}, props), {}, {
+    children: /*#__PURE__*/_jsxs(Styled.LoaderWrapper, {
+      children: [/*#__PURE__*/_jsxs(Styled.LabelWrapper, {
+        className: "".concat(loaderClasses ? " ".concat(loaderClasses) : ''),
+        children: [/*#__PURE__*/_jsxs(Styled.LoadingLabel, {
+          children: [" ", loaderLabel, " "]
+        }), /*#__PURE__*/_jsx(Styled.DotsLoader, {
+          children: " "
+        })]
+      }), /*#__PURE__*/_jsx(Styled.ProgressBarLoader, {
+        children: " "
+      })]
+    })
+  }));
+};
+export default LoaderView;