@scaleflex/widget-common 4.4.0 → 4.5.0

package/lib/BackdropOverlay.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 = ["zIndex", "acceptScroll", "enableUnderlyingEvent", "returnUnderlyingEventFn"];
+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 { useEffect } from 'react';
+import ignoreEvent from '@scaleflex/widget-utils/lib/ignoreEvent';
+import { jsx as _jsx } from "react/jsx-runtime";
+var BackdropOverlay = function BackdropOverlay(_ref) {
+  var zIndex = _ref.zIndex,
+    acceptScroll = _ref.acceptScroll,
+    _ref$enableUnderlying = _ref.enableUnderlyingEvent,
+    enableUnderlyingEvent = _ref$enableUnderlying === void 0 ? true : _ref$enableUnderlying,
+    _ref$returnUnderlying = _ref.returnUnderlyingEventFn,
+    returnUnderlyingEventFn = _ref$returnUnderlying === void 0 ? false : _ref$returnUnderlying,
+    props = _objectWithoutProperties(_ref, _excluded);
+  useEffect(function () {
+    if (!acceptScroll) {
+      document.addEventListener('scroll', handleOnClicking);
+      document.addEventListener('keyPress', handleKeyPress);
+    }
+    return function () {
+      if (!acceptScroll) {
+        document.removeEventListener('scroll', handleOnClicking);
+        document.removeEventListener('keyPress', handleKeyPress);
+      }
+    };
+  }, []);
+  var passEventToUnderlyingEvent = function passEventToUnderlyingEvent(e) {
+    if (!enableUnderlyingEvent) {
+      return;
+    }
+    setTimeout(function () {
+      if (e.clientX && e.clientY) {
+        var elem = document.elementFromPoint(e.clientX, e.clientY);
+        if (elem) {
+          elem.dispatchEvent(e.nativeEvent);
+        }
+      }
+    }, 0);
+  };
+  var handleOnClicking = function handleOnClicking(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    if (props.onClick) {
+      props.onClick(returnUnderlyingEventFn ? function () {
+        return passEventToUnderlyingEvent(e);
+      } : undefined);
+    }
+    if (!returnUnderlyingEventFn) {
+      passEventToUnderlyingEvent(e);
+    }
+  };
+  var handleKeyPress = function handleKeyPress(e) {
+    if (e.key === 'Escape') {
+      handleOnClicking();
+    }
+  };
+  var baseClass = 'filerobot-common-BackdropOverlay';
+  return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    className: baseClass,
+    onDrop: ignoreEvent,
+    onDragOver: ignoreEvent,
+    onDragLeave: ignoreEvent
+  }, props), {}, {
+    style: _objectSpread({
+      zIndex: zIndex
+    }, props.style),
+    onClick: handleOnClicking,
+    onContextMenu: handleOnClicking
+  }));
+};
+export default BackdropOverlay;

package/lib/BadgeButton.js

@@ -0,0 +1,35 @@
+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 = ["badgeContent", "label", "iconStart", "size", "classes", "background"];
+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 BaseButton from './BaseButton';
+
+/*
+* @size = small/medium/large/fullWidth
+*/
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default (function (_ref) {
+  var badgeContent = _ref.badgeContent,
+    label = _ref.label,
+    iconStart = _ref.iconStart,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    classes = _ref.classes,
+    background = _ref.background,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsxs(BaseButton, _objectSpread(_objectSpread({
+    size: size,
+    classes: "filerobot-common-BadgeButton".concat(background ? " filerobot-common-BadgeButton-".concat(background) : '').concat(classes ? " ".concat(classes) : ''),
+    background: background
+  }, props), {}, {
+    children: [iconStart, label, (badgeContent || badgeContent === 0) && /*#__PURE__*/_jsx("span", {
+      className: "filerobot-common-BadgeButton-badgeContent",
+      children: badgeContent
+    })]
+  }));
+});

package/lib/BaseButton.js

@@ -0,0 +1,36 @@
+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 = ["children", "size", "classes", "background", "innerRef"];
+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; }
+/*
+* @size = small/medium/large/fullWidth
+* @background = transparent/primary/accent/secondary
+*/
+var baseClass = 'filerobot-common-BaseButton';
+var BaseButton = function BaseButton(_ref) {
+  var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    classes = _ref.classes,
+    _ref$background = _ref.background,
+    background = _ref$background === void 0 ? 'transparent' : _ref$background,
+    innerRef = _ref.innerRef,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx("button", _objectSpread(_objectSpread({
+    type: "button",
+    ref: innerRef,
+    className: "".concat(baseClass, " ").concat(baseClass, "-").concat(background, " ").concat(baseClass, "-").concat(size).concat(classes ? " ".concat(classes) : '')
+  }, props), {}, {
+    children: /*#__PURE__*/_jsx("span", {
+      role: "container",
+      children: children
+    })
+  }));
+};
+export default BaseButton;

package/lib/Button.js

@@ -0,0 +1,29 @@
+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 = ["children", "size", "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); }
+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 BaseButton from './BaseButton';
+
+/*
+* @size = small/medium/large/fullWidth
+*/
+import { jsx as _jsx } from "react/jsx-runtime";
+var Button = function Button(_ref) {
+  var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    classes = _ref.classes,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_jsx(BaseButton, _objectSpread(_objectSpread({
+    size: size,
+    classes: classes
+  }, props), {}, {
+    children: children
+  }));
+};
+export default Button;

package/lib/Carousel/Carousel.styled.js

@@ -0,0 +1,19 @@
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+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 Arrow from '@scaleflex/icons/arrow';
+import { PC } from '../';
+var StyledCarouselWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  position: relative;\n  overflow: hidden;\n  touch-action: pan-y pinch-zoom;\n  height: 100%;\n  padding: 0 14px;\n"])));
+var StyledCarousel = styled.ul(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 0 14px;\n  margin: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  height: 100%;\n"])));
+var StyledCarouselItem = styled.li(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  list-style-type: none;\n  user-select: none;\n  height: 100%;\n  z-index: 0;\n  ", "\n"])), function (_ref) {
+  var $growWidth = _ref.$growWidth;
+  return $growWidth ? 'flex-grow: 1;' : '';
+});
+var arrowsCommonStyles = "\n  position: absolute;\n  top: 0;\n  height: 100%;\n  width: 80px;\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 1;\n";
+var StyledPrevArrowWrapper = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  ", "\n  left: 10px;\n  background: linear-gradient(\n    90deg,\n    #ffffff 1.56%,\n    rgba(255, 255, 255, 0.93) 70%,\n    rgba(255, 255, 255, 0) 100%\n  );\n\n  svg {\n    transform: scaleX(-1);\n  }\n"])), arrowsCommonStyles);
+var StyledNextArrowWrapper = styled.div(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n  ", "\n  background: linear-gradient(\n    270deg,\n    #ffffff 1.56%,\n    rgba(255, 255, 255, 0.93) 70%,\n    rgba(255, 255, 255, 0) 100%\n  );\n  right: 10px;\n"])), arrowsCommonStyles);
+var StyledArrow = styled(Arrow)(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n  color: ", ";\n"])), function (_ref2) {
+  var theme = _ref2.theme;
+  return theme.palette[PC.IconsSecondary];
+});
+export { StyledCarouselWrapper, StyledCarousel, StyledCarouselItem, StyledPrevArrowWrapper, StyledNextArrowWrapper, StyledArrow };

package/lib/Carousel/index.js

@@ -0,0 +1,136 @@
+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 { Children, useRef, useState, useEffect } from 'react';
+import { StyledCarouselWrapper, StyledCarousel, StyledCarouselItem, StyledNextArrowWrapper, StyledPrevArrowWrapper, StyledArrow } from './Carousel.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var getScrollOffset = function getScrollOffset() {
+  var _window, _window2;
+  var _document = document,
+    body = _document.body;
+  var docEl = document.documentElement;
+  var scrollTop = ((_window = window) === null || _window === void 0 ? void 0 : _window.pageYOffset) || docEl.scrollTop || body.scrollTop;
+  var scrollLeft = ((_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.pageXOffset) || docEl.scrollLeft || body.scrollLeft;
+  return {
+    topOffset: scrollTop,
+    leftOffset: scrollLeft
+  };
+};
+var Carousel = function Carousel(_ref) {
+  var children = _ref.children,
+    style = _ref.style,
+    className = _ref.className;
+  var scrollingByDraggingLatestX = useRef(false);
+  var carouselRef = useRef();
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isPrevArrowShown = _useState2[0],
+    setIsPrevArrowShown = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    isNextArrowShown = _useState4[0],
+    setIsNextArrowShown = _useState4[1];
+  var childrenArray = Children.toArray(children);
+  var updateArrowsVisibility = function updateArrowsVisibility() {
+    if (carouselRef.current) {
+      var _carouselRef$current = carouselRef.current,
+        scrollWidth = _carouselRef$current.scrollWidth,
+        offsetWidth = _carouselRef$current.offsetWidth,
+        scrollLeft = _carouselRef$current.scrollLeft;
+      var scrollableWidth = Math.round(scrollWidth - offsetWidth);
+      var scrollRight = Math.round(scrollableWidth - scrollLeft);
+      setIsPrevArrowShown(scrollLeft > 0);
+      setIsNextArrowShown(scrollRight > 0);
+    }
+  };
+  var scrollCarouselToElement = function scrollCarouselToElement(foundElements, direction) {
+    var liIndex = foundElements.findIndex(function (element) {
+      return 'carouselItem' in element.dataset;
+    });
+    if (liIndex !== -1) {
+      foundElements[liIndex].scrollIntoView({
+        inline: direction,
+        behavior: 'smooth',
+        block: 'nearest'
+      });
+      // setTimeout cuz we're not sure when the smooth scroll will be finished, we're waiting for 0.5s to start checking.
+      setTimeout(function () {
+        updateArrowsVisibility();
+      }, 500);
+    }
+  };
+  var scrollToPrev = function scrollToPrev(e) {
+    var _getScrollOffset = getScrollOffset(),
+      topOffset = _getScrollOffset.topOffset,
+      leftOffset = _getScrollOffset.leftOffset;
+    var currentElements = document.elementsFromPoint(e.pageX + e.currentTarget.offsetWidth - leftOffset, e.pageY - topOffset);
+    scrollCarouselToElement(currentElements, 'end');
+  };
+  var scrollToNext = function scrollToNext(e) {
+    var _getScrollOffset2 = getScrollOffset(),
+      topOffset = _getScrollOffset2.topOffset,
+      leftOffset = _getScrollOffset2.leftOffset;
+    var currentElements = document.elementsFromPoint(e.pageX - e.currentTarget.offsetWidth - leftOffset, e.pageY - topOffset);
+    scrollCarouselToElement(currentElements, 'start');
+  };
+  var scrollByDragging = function scrollByDragging(e) {
+    if (scrollingByDraggingLatestX.current) {
+      var _e$touches;
+      var currentX = (((_e$touches = e.touches) === null || _e$touches === void 0 ? void 0 : _e$touches[0]) || e).pageX;
+      carouselRef.current.scrollBy(scrollingByDraggingLatestX.current - currentX, 0);
+      scrollingByDraggingLatestX.current = currentX;
+      updateArrowsVisibility();
+    }
+  };
+  var _stopScrollByDragging = function stopScrollByDragging() {
+    scrollingByDraggingLatestX.current = null;
+    document.removeEventListener('mousemove', scrollByDragging);
+    document.removeEventListener('mouseup', _stopScrollByDragging);
+    document.removeEventListener('touchmove', scrollByDragging);
+    document.removeEventListener('touchcancel', _stopScrollByDragging);
+    document.removeEventListener('touchend', _stopScrollByDragging);
+  };
+  var startScrollByDragging = function startScrollByDragging(e) {
+    var _e$touches2;
+    scrollingByDraggingLatestX.current = (((_e$touches2 = e.touches) === null || _e$touches2 === void 0 ? void 0 : _e$touches2[0]) || e).pageX;
+    document.addEventListener('mousemove', scrollByDragging);
+    document.addEventListener('mouseup', _stopScrollByDragging);
+    document.addEventListener('touchmove', scrollByDragging);
+    document.addEventListener('touchcancel', _stopScrollByDragging);
+    document.addEventListener('touchend', _stopScrollByDragging);
+  };
+  useEffect(updateArrowsVisibility, []);
+  useEffect(updateArrowsVisibility, [childrenArray]);
+  return /*#__PURE__*/_jsxs(StyledCarouselWrapper, {
+    className: "".concat(className, "-wrapper"),
+    style: style,
+    onMouseDown: startScrollByDragging,
+    onTouchStart: startScrollByDragging,
+    children: [isPrevArrowShown && /*#__PURE__*/_jsx(StyledPrevArrowWrapper, {
+      onClick: scrollToPrev,
+      children: /*#__PURE__*/_jsx(StyledArrow, {
+        size: 16
+      })
+    }), /*#__PURE__*/_jsx(StyledCarousel, {
+      className: "".concat(className, "-items"),
+      ref: carouselRef,
+      children: childrenArray.map(function (child) {
+        return /*#__PURE__*/_jsx(StyledCarouselItem, {
+          className: "".concat(className, "-item-wrapper"),
+          "data-carousel-item": true,
+          $growWidth: child.props.growWidth,
+          children: child
+        }, child.key);
+      })
+    }), isNextArrowShown && /*#__PURE__*/_jsx(StyledNextArrowWrapper, {
+      onClick: scrollToNext,
+      children: /*#__PURE__*/_jsx(StyledArrow, {
+        size: 16
+      })
+    })]
+  });
+};
+export default Carousel;

package/lib/Checkbox.js

@@ -0,0 +1,55 @@
+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 = ["checked", "onChange", "children", "classes", "checkboxClasses", "label", "name", "suffix"];
+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 { CheckIcon } from '@scaleflex/widget-icons';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var Checkbox = function Checkbox(_ref) {
+  var _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? undefined : _ref$checked,
+    onChange = _ref.onChange,
+    children = _ref.children,
+    classes = _ref.classes,
+    checkboxClasses = _ref.checkboxClasses,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    name = _ref.name,
+    suffix = _ref.suffix,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var delegateEvent = function delegateEvent(e) {
+    if (name) {
+      e.target.name = name;
+    }
+    e.target.value = !checked;
+    if (onChange) {
+      onChange(e);
+    }
+  };
+  return /*#__PURE__*/_jsxs("label", {
+    className: "filerobot-common-Checkbox-wrapper".concat(classes ? " ".concat(classes) : ''),
+    onClick: delegateEvent,
+    children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+      type: "div",
+      className: "filerobot-u-reset filerobot-common-Checkbox".concat(checkboxClasses ? " ".concat(checkboxClasses) : ''),
+      role: "checkbox"
+      // checked={checked} // to be simulated as real checkbox in case we needed it
+      ,
+      "data-filerobot-super-focusable": true
+    }, others), {}, {
+      children: checked && /*#__PURE__*/_jsx(CheckIcon, {
+        width: "10",
+        height: "10",
+        strokeWidth: "2"
+      })
+    })), label && /*#__PURE__*/_jsx("span", {
+      className: "filerobot-common-Checkbox-label",
+      children: label
+    }), suffix && suffix()]
+  });
+};
+export default Checkbox;

package/lib/CloseButton.js

@@ -0,0 +1,46 @@
+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 = ["onClick", "hideDivider", "noMargin", "iconPrimaryColor", "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); }
+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 { Cross } from '@scaleflex/icons';
+import { IconLabeledButton } from './';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var baseClass = 'filerobot-common-BackCloseButton';
+var CloseButton = function CloseButton(_ref) {
+  var onClick = _ref.onClick,
+    _ref$hideDivider = _ref.hideDivider,
+    hideDivider = _ref$hideDivider === void 0 ? false : _ref$hideDivider,
+    _ref$noMargin = _ref.noMargin,
+    noMargin = _ref$noMargin === void 0 ? false : _ref$noMargin,
+    iconPrimaryColor = _ref.iconPrimaryColor,
+    classes = _ref.classes,
+    others = _objectWithoutProperties(_ref, _excluded);
+  return !hideDivider ? /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+    className: "".concat(baseClass).concat(classes ? " ".concat(classes) : '')
+  }, others), {}, {
+    children: [/*#__PURE__*/_jsx("div", {
+      className: "filerobot-common-verticalDivider ".concat(baseClass, "-divider"),
+      style: {
+        marginRight: noMargin ? 6 : undefined
+      }
+    }), /*#__PURE__*/_jsx(IconLabeledButton, {
+      icon: /*#__PURE__*/_jsx(Cross, {
+        color: iconPrimaryColor
+      }),
+      classes: "".concat(baseClass, "-button").concat(noMargin ? '' : " ".concat(baseClass, "-buttonMargin")),
+      onClick: onClick
+    })]
+  })) : /*#__PURE__*/_jsx(IconLabeledButton, _objectSpread({
+    icon: /*#__PURE__*/_jsx(Cross, {
+      color: iconPrimaryColor
+    }),
+    classes: "".concat(baseClass, "-button").concat(noMargin ? '' : " ".concat(baseClass, "-buttonMargin")).concat(classes ? " ".concat(classes) : ''),
+    onClick: onClick
+  }, others));
+};
+export default CloseButton;

package/lib/ColorPicker/ColorPicker.styled.js

@@ -0,0 +1,29 @@
+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, { css } from 'styled-components';
+import { PC } from '@scaleflex/widget-common';
+var ColorPickerWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  display: flex;\n  flex-wrap: wrap;\n  width: 100%;\n  gap: 12px;\n"])));
+var ColorItem = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  cursor: pointer;\n  border-radius: 50%;\n  transition: all 100ms ease-out;\n  ", "\n\n", "\n\n  ", "\n\n  ", "\n"])), function (_ref) {
+  var isWhite = _ref.isWhite,
+    palette = _ref.theme.palette;
+  return isWhite && "\n    border: 1px solid ".concat(palette[PC.BorderPrimaryStateless], ";\n  ");
+}, function (_ref2) {
+  var clearButton = _ref2.clearButton,
+    palette = _ref2.theme.palette;
+  return clearButton && "\n    border: 1px solid ".concat(palette[PC.BorderPrimaryStateless], ";\n    position: relative;\n    background-color: ").concat(palette[PC.BackgroundHover], ";\n\n    svg {\n      color: ").concat(palette[PC.BorderPrimaryStateless], ";\n    }\n  ");
+}, function (_ref3) {
+  var isSelected = _ref3.isSelected,
+    palette = _ref3.theme.palette;
+  return isSelected ? "\n    outline-offset: 4px;\n    outline: 1px solid ".concat(palette[PC.AccentStateless], ";\n  ") : css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n        &:hover {\n        outline-offset: 4px;\n        outline: 1px solid ", ";\n        }\n  "])), function (_ref4) {
+    var palette = _ref4.theme.palette;
+    return palette[PC.BorderPrimaryStateless];
+  });
+}, function (_ref5) {
+  var $disabled = _ref5.$disabled;
+  return $disabled && "\n    cursor: not-allowed;\n    opacity: 0.3;\n  ";
+});
+var Styled = {
+  ColorPickerWrapper: ColorPickerWrapper,
+  ColorItem: ColorItem
+};
+export default Styled;

package/lib/ColorPicker/index.js

@@ -0,0 +1,117 @@
+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 = ["colors", "value", "multiple", "hideClearBtn", "onChange", "height", "width", "itemMargin", "showPickerPanel", "checkIsColorDisabled"];
+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 _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."); }
+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 _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+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 _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 { CrossOutline } from '@scaleflex/icons';
+import { useCallback } from 'react';
+import Styled from './ColorPicker.styled';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var pickerTimeout = null;
+var whiteColor = '#ffffff';
+var ColorPicker = function ColorPicker(_ref) {
+  var _ref$colors = _ref.colors,
+    colors = _ref$colors === void 0 ? [] : _ref$colors,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? false : _ref$multiple,
+    _ref$hideClearBtn = _ref.hideClearBtn,
+    hideClearBtn = _ref$hideClearBtn === void 0 ? false : _ref$hideClearBtn,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {
+      return '';
+    } : _ref$onChange,
+    _ref$height = _ref.height,
+    height = _ref$height === void 0 ? 28 : _ref$height,
+    _ref$width = _ref.width,
+    width = _ref$width === void 0 ? 28 : _ref$width,
+    itemMargin = _ref.itemMargin,
+    showPickerPanel = _ref.showPickerPanel,
+    _ref$checkIsColorDisa = _ref.checkIsColorDisabled,
+    checkIsColorDisabled = _ref$checkIsColorDisa === void 0 ? function (_color) {
+      return false;
+    } : _ref$checkIsColorDisa,
+    others = _objectWithoutProperties(_ref, _excluded);
+  var prepareMultipleValues = function prepareMultipleValues(color) {
+    if (Array.isArray(value)) {
+      return value.includes(color) ? value.filter(function (val) {
+        return val !== color;
+      }) : [].concat(_toConsumableArray(value), [color]);
+    }
+    return value ? value === color ? [color] : [value, color] : [color];
+  };
+  var selectColor = function selectColor(color) {
+    onChange(multiple ? prepareMultipleValues(color) : color);
+  };
+  var clearAll = function clearAll() {
+    if (!value === '' || value.length > 0) {
+      onChange('');
+    }
+  };
+  var updateColorFromPicker = useCallback(function (e) {
+    var value = e.target.value;
+    if (pickerTimeout) {
+      clearTimeout(pickerTimeout);
+    }
+    pickerTimeout = setTimeout(function () {
+      selectColor(value);
+      pickerTimeout = null;
+    }, 30);
+  }, []);
+  var isSelected = function isSelected(color) {
+    return Array.isArray(value) ? value.includes(color) : value.toLowerCase() === (color === null || color === void 0 ? void 0 : color.toLowerCase());
+  };
+  var renderSelectedColorIfNotThere = useCallback(function () {
+    if (value && !multiple && !colors.includes(value)) {
+      return renderColor(value);
+    }
+  }, [colors, value, multiple]);
+  var renderColor = function renderColor(color) {
+    var clearButton = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var isColorSelected = isSelected(color.value || color);
+    var isColorDisabled = !isColorSelected && checkIsColorDisabled(color);
+    return /*#__PURE__*/_jsx(Styled.ColorItem, {
+      className: "filerobot-common-ColorPicker-colorItem",
+      style: {
+        background: color.color || color,
+        height: height,
+        width: width,
+        margin: itemMargin
+      },
+      isWhite: (color.color || color) === whiteColor,
+      isSelected: isColorSelected,
+      clearButton: clearButton,
+      onClick: isColorDisabled ? undefined : clearButton ? clearAll : function () {
+        return selectColor(color.value || color);
+      },
+      $disabled: isColorDisabled
+      // $background={color}
+      ,
+      children: clearButton && /*#__PURE__*/_jsx(CrossOutline, {
+        size: 12
+      })
+    }, color.value || color);
+  };
+  return /*#__PURE__*/_jsxs(Styled.ColorPickerWrapper, _objectSpread(_objectSpread({
+    className: "filerobot-common-ColorPicker"
+  }, others), {}, {
+    children: [!hideClearBtn && renderColor(whiteColor, true), renderSelectedColorIfNotThere(), colors.map(function (color) {
+      return renderColor(color);
+    }), showPickerPanel && /*#__PURE__*/_jsx("input", {
+      type: "color",
+      onInput: updateColorFromPicker
+    })]
+  }));
+};
+export default ColorPicker;

package/lib/ColorPickerModal/ColorPickerModal.styled.js

@@ -0,0 +1,17 @@
+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 { ModalActions as SfxModalActions, Button } from '@scaleflex/ui/core';
+import { PC } from '../Typography';
+import styled from 'styled-components';
+var ColorPickerWrap = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  .SfxColorPicker-root {\n    max-width: 100%;\n    padding: 0;\n    box-shadow: none;\n    border: none;\n  }\n\n  .SfxColorPicker-range-picker,\n  .SfxColorPicker-bar-wrapper {\n    width: 100%;\n  }\n\n  .SfxColorPicker-icon {\n    color: ", ";\n  }\n\n  .SfxColorPicker-select{\n    width: 28%;\n  }\n"])), function (_ref) {
+  var palette = _ref.theme.palette;
+  return palette[PC.IconsPrimary];
+});
+var ModalButton = styled(Button)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  padding: 10px 16px;\n  height: 40px;\n"])));
+var ModalActions = styled(SfxModalActions)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  gap: 12px;\n  padding: 12px 24px 24px;\n\n  .SfxButton-root {\n    flex: 1;\n  }\n"])));
+var Styled = {
+  ColorPickerWrap: ColorPickerWrap,
+  ModalActions: ModalActions,
+  ModalButton: ModalButton
+};
+export default Styled;