@dspworkplace/ui 1.5.33 → 1.5.36

package/dist/index.js

@@ -6,7 +6,8 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var styled = _interopDefault(require('styled-components'));
+var styled = require('styled-components');
+var styled__default = _interopDefault(styled);
 
 var defaultRadius = '2px';
 var colors = {
@@ -119,7 +120,7 @@ function _templateObject() {
 
   return data;
 }
-var Form = styled.form(_templateObject(), function (props) {
+var Form = styled__default.form(_templateObject(), function (props) {
   return props.width ? props.width : '100%';
 });
 
@@ -420,15 +421,15 @@ var handleSize = function handleSize(sizeType) {
   }
 };
 
-var Frag = styled.div(_templateObject$1());
-var Label = styled.label(_templateObject2(), theme.font.medium.size, theme.colors.error.text);
+var Frag = styled__default.div(_templateObject$1());
+var Label = styled__default.label(_templateObject2(), theme.font.medium.size, theme.colors.error.text);
 var borderDefault = "\n    border-width:1px;\n    border-style:solid;\n";
-var InputBase = styled.input(_templateObject3(), theme.colors.neutrals.white, theme.colors.neutrals.silver, theme.form.input.radius, theme.font.small.size, theme.font.small.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
+var InputBase = styled__default.input(_templateObject3(), theme.colors.neutrals.white, theme.colors.neutrals.silver, theme.form.input.radius, theme.font.small.size, theme.font.small.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
   var size = _ref.size;
   return handleSize(size);
 }, theme.colors.extra.whiteSmoke, borderDefault, theme.colors.neutrals.silver, theme.colors.neutrals.medium, borderDefault, borderDefault, borderDefault, theme.colors.action, theme.colors.secondary, theme.colors.neutrals.silver, theme.font.small);
-var SpanHelp = styled.span(_templateObject4(), theme.font.extraSmall.size);
-var SpanError = styled(SpanHelp)(_templateObject5(), theme.colors.error.text);
+var SpanHelp = styled__default.span(_templateObject4(), theme.font.extraSmall.size);
+var SpanError = styled__default(SpanHelp)(_templateObject5(), theme.colors.error.text);
 
 var RequiredText = function RequiredText() {
   return /*#__PURE__*/React__default.createElement("span", {
@@ -436,19 +437,19 @@ var RequiredText = function RequiredText() {
   }, "*");
 };
 
-var SelectUi = styled.div(_templateObject6(), function (_ref2) {
+var SelectUi = styled__default.div(_templateObject6(), function (_ref2) {
   var size = _ref2.size;
   return handleSize(size);
 }, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow);
-var Value = styled.span(_templateObject7(), function (props) {
+var Value = styled__default.span(_templateObject7(), function (props) {
   return props.option ? '#707070' : theme.colors.neutrals.gray;
 }, function (props) {
   return props.option && "\n    display:inline-block;\n    flex:1;\n  ";
 });
-var Options = styled.ul(_templateObject8(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
+var Options = styled__default.ul(_templateObject8(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
   return props.isChild && "\n    position:absolute;\n    left:100%;\n    margin-left:6px;\n    top:-4px;\n\n    &::before {\n        content: \" \";\n        height: 100%;\n        width: 6px;\n        background: transparent;\n        display: block;\n        position: absolute;\n        left: -7px;\n    }\n  ";
 }, theme.font.small.size, theme.colors.info.bg, theme.colors.neutrals.silver);
-var OptionGroup = styled.div(_templateObject9());
+var OptionGroup = styled__default.div(_templateObject9());
 
 var phone = function phone(value) {
   return value.replace(/\D/g, '').replace(/(\d{3})(\d)/, '$1-$2').replace(/(\d{3})(\d)/, '$1-$2').replace(/(\d{4})\d+?$/, '$1');
@@ -547,7 +548,7 @@ var handleMask = function handleMask(type) {
   }
 };
 
-var InputBase$1 = styled.input(_templateObject$2(), theme.colors.neutrals.white, function (props) {
+var InputBase$1 = styled__default.input(_templateObject$2(), theme.colors.neutrals.white, function (props) {
   return handlerColor(props.validation);
 }, theme.form.input.radius, theme.font.small.size, theme.font.small.lineHeight, theme.form.input.padding, theme.colors.neutrals.gray, function (_ref) {
   var size = _ref.size;
@@ -557,9 +558,9 @@ var InputBase$1 = styled.input(_templateObject$2(), theme.colors.neutrals.white,
 }, borderDefault$1, function (props) {
   return handlerColor(props.validation);
 }, borderDefault$1, theme.colors.action, theme.colors.secondary, theme.colors.neutrals.silver, theme.font.small, theme.colors.info.bg, theme.colors.neutrals.silver);
-var Span = styled.span(_templateObject2$1(), theme.font.extraSmall.size);
-var SpanError$1 = styled(Span)(_templateObject3$1(), theme.colors.error.text);
-var Frag$1 = styled.div(_templateObject4$1(), function (_ref2) {
+var Span = styled__default.span(_templateObject2$1(), theme.font.extraSmall.size);
+var SpanError$1 = styled__default(Span)(_templateObject3$1(), theme.colors.error.text);
+var Frag$1 = styled__default.div(_templateObject4$1(), function (_ref2) {
   var size = _ref2.size;
   return handleSize$1(size);
 });
@@ -2226,7 +2227,7 @@ function _templateObject$3() {
 }
 
 var Wrapper = function Wrapper(Element) {
-  var Svg = styled(Element)(_templateObject$3(), function (props) {
+  var Svg = styled__default(Element)(_templateObject$3(), function (props) {
     return props.size ? props.size : '40px';
   }, function (props) {
     return props.size ? props.size : '40px';
@@ -2345,7 +2346,7 @@ function _templateObject$4() {
 
   return data;
 }
-var Help = styled.span(_templateObject$4(), theme.colors.info.bg, theme.colors.info.border, theme.colors.info.text);
+var Help = styled__default.span(_templateObject$4(), theme.colors.info.bg, theme.colors.info.border, theme.colors.info.text);
 
 var App = function App(_ref) {
   var text = _ref.text;
@@ -2403,10 +2404,10 @@ function _templateObject$5() {
 
   return data;
 }
-var Title = styled.h1(_templateObject$5(), theme.colors.secondary);
-var SubTitle = styled.h3(_templateObject2$2(), theme.colors.info.text);
-var ThirdTitle = styled(SubTitle)(_templateObject3$2());
-var Text = styled.p(_templateObject4$2(), theme.colors.neutrals.gray);
+var Title = styled__default.h1(_templateObject$5(), theme.colors.secondary);
+var SubTitle = styled__default.h3(_templateObject2$2(), theme.colors.info.text);
+var ThirdTitle = styled__default(SubTitle)(_templateObject3$2());
+var Text = styled__default.p(_templateObject4$2(), theme.colors.neutrals.gray);
 
 function _templateObject12() {
   var data = taggedTemplateLiteral(["\n  height:24px;\n  width:24px;\n  box-sizing: border-box;\n  margin-right:5px;\n  border-radius:100%;\n  border:2px solid white;\n  background:", "\n  z-index: ", ";\n  margin-left:", "\n  margin-top: 8px;\n  margin-bottom: 8px;\n  display: inline-block;\n"]);
@@ -2527,7 +2528,7 @@ function _templateObject$6() {
 
   return data;
 }
-var Frag$2 = styled.div(_templateObject$6());
+var Frag$2 = styled__default.div(_templateObject$6());
 
 var handleSize$2 = function handleSize(sizeType) {
   switch (sizeType) {
@@ -2545,11 +2546,11 @@ var handleSize$2 = function handleSize(sizeType) {
   }
 };
 
-var SelectUi$1 = styled.div(_templateObject2$3(), function (_ref) {
+var SelectUi$1 = styled__default.div(_templateObject2$3(), function (_ref) {
   var size = _ref.size;
   return handleSize$2(size);
 }, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action, theme.colors.error.border, theme.colors.error.border, theme.colors.error.shadow, theme.colors.success.border, theme.colors.success.border, theme.colors.success.shadow, theme.colors.extra.whiteSmoke, theme.colors.neutrals.silver, theme.colors.neutrals.medium);
-var Value$1 = styled(Text).attrs(function (props) {
+var Value$1 = styled__default(Text).attrs(function (props) {
   return {
     as: 'span'
   };
@@ -2558,7 +2559,7 @@ var Value$1 = styled(Text).attrs(function (props) {
 });
 var maxOptions = 3;
 var optionsSize = 32;
-var Options$1 = styled.ul(_templateObject4$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
+var Options$1 = styled__default.ul(_templateObject4$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
   return props.openTo === 'top' && "\n    top:unset;\n    bottom: 100%;\n  ";
 }, function (props) {
   return !props.hasChildren && "\n    max-height: ".concat(props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : maxOptions * optionsSize, "px;\n    overflow-x:hidden;\n    overflow-y:scroll;\n  ");
@@ -2566,16 +2567,16 @@ var Options$1 = styled.ul(_templateObject4$3(), theme.colors.neutrals.silver, th
   return props.isChild && "\n    position:absolute;\n    left:100%;\n    margin-left:4px;\n    top:-4px;\n  ";
 }, theme.font.small.size, theme.colors.info.bg, theme.colors.neutrals.silver);
 var optionsSizeCustom = 42;
-var OptionsPeople = styled(Options$1)(_templateObject5$1(), function (props) {
+var OptionsPeople = styled__default(Options$1)(_templateObject5$1(), function (props) {
   return props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize : optionsSizeCustom * optionsSize;
 });
-var Span$1 = styled.span(_templateObject6$1(), theme.font.extraSmall.size);
-var SpanError$2 = styled(Span$1)(_templateObject7$1(), theme.colors.error.text);
-var SelectHidden = styled.select(_templateObject8$1());
-var PhotoCover = styled.div(_templateObject9$1());
-var CustomCheckBox = styled.div(_templateObject10(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action);
-var OptionGroup$1 = styled.div(_templateObject11());
-var ColorOption = styled.span(_templateObject12(), function (props) {
+var Span$1 = styled__default.span(_templateObject6$1(), theme.font.extraSmall.size);
+var SpanError$2 = styled__default(Span$1)(_templateObject7$1(), theme.colors.error.text);
+var SelectHidden = styled__default.select(_templateObject8$1());
+var PhotoCover = styled__default.div(_templateObject9$1());
+var CustomCheckBox = styled__default.div(_templateObject10(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.secondary, theme.colors.action);
+var OptionGroup$1 = styled__default.div(_templateObject11());
+var ColorOption = styled__default.span(_templateObject12(), function (props) {
   return props.color ? props.color : 'black';
 }, function (props) {
   return props.index > 0 ? 10 - props.index : 10;
@@ -3177,7 +3178,7 @@ var solveSpace = function solveSpace() {
   return type * 4;
 };
 
-var BaseSpace = styled.div(_templateObject$7(), function (props) {
+var BaseSpace = styled__default.div(_templateObject$7(), function (props) {
   return solveSpace(props.top);
 }, function (props) {
   return solveSpace(props.left);
@@ -3292,25 +3293,25 @@ function _templateObject$8() {
 
   return data;
 }
-var HiddenCheckbox = styled.input.attrs({
+var HiddenCheckbox = styled__default.input.attrs({
   type: 'checkbox'
 })(_templateObject$8());
-var HiddenRadioBox = styled.input.attrs({
+var HiddenRadioBox = styled__default.input.attrs({
   type: 'radio'
 })(_templateObject2$4());
-var CheckboxContainer = styled.label(_templateObject3$4());
-var CustomCheckBox$1 = styled.div(_templateObject4$4(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, function (props) {
+var CheckboxContainer = styled__default.label(_templateObject3$4());
+var CustomCheckBox$1 = styled__default.div(_templateObject4$4(), theme.colors.neutrals.white, theme.defaultRadius, theme.colors.neutrals.silver, function (props) {
   return props.radio ? '17px' : '16px';
 }, function (props) {
   return props.radio ? '17px' : '16px';
 }, function (props) {
   return props.radio ? '17px' : '2px';
 }, HiddenCheckbox, HiddenRadioBox, theme.colors.secondary, theme.colors.action, HiddenCheckbox, HiddenRadioBox, theme.colors.neutrals.silver, HiddenCheckbox, HiddenRadioBox);
-var Title$1 = styled.h5(_templateObject5$2(), theme.colors.error.text);
-var Label$1 = styled.span(_templateObject6$2());
-var Span$2 = styled.span(_templateObject7$2(), theme.font.extraSmall.size);
-var SpanError$3 = styled(Span$2)(_templateObject8$2(), theme.colors.error.text);
-var NoOptions = styled(Text)(_templateObject9$2(), theme.colors.neutrals.silver);
+var Title$1 = styled__default.h5(_templateObject5$2(), theme.colors.error.text);
+var Label$1 = styled__default.span(_templateObject6$2());
+var Span$2 = styled__default.span(_templateObject7$2(), theme.font.extraSmall.size);
+var SpanError$3 = styled__default(Span$2)(_templateObject8$2(), theme.colors.error.text);
+var NoOptions = styled__default(Text)(_templateObject9$2(), theme.colors.neutrals.silver);
 var CheckboxBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var name = _ref.name,
       _ref$checked = _ref.checked,
@@ -3597,19 +3598,19 @@ function _templateObject$9() {
 
   return data;
 }
-var Frag$3 = styled.div(_templateObject$9());
-var Span$3 = styled.span(_templateObject2$5(), theme.font.extraSmall.size);
-var SpanError$4 = styled(Span$3)(_templateObject3$5(), theme.colors.error.text);
-var Select = styled(InputBase)(_templateObject4$5(), theme.colors.neutrals.white, theme.colors.action, theme.colors.secondary, theme.colors.error.border);
+var Frag$3 = styled__default.div(_templateObject$9());
+var Span$3 = styled__default.span(_templateObject2$5(), theme.font.extraSmall.size);
+var SpanError$4 = styled__default(Span$3)(_templateObject3$5(), theme.colors.error.text);
+var Select = styled__default(InputBase)(_templateObject4$5(), theme.colors.neutrals.white, theme.colors.action, theme.colors.secondary, theme.colors.error.border);
 var maxOptions$1 = 5;
 var optionsSize$1 = 32;
-var Options$2 = styled.ul(_templateObject5$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
+var Options$2 = styled__default.ul(_templateObject5$3(), theme.colors.neutrals.silver, theme.colors.neutrals.silver, function (props) {
   return props.openTo === 'top' && "\n    top:unset;\n    bottom:100%;\n  ";
 }, function (props) {
   return props.visibleOptionsQty ? props.visibleOptionsQty * optionsSize$1 : maxOptions$1 * optionsSize$1;
 }, theme.font.small.size, theme.colors.info.bg);
-var TagsValues = styled.ul(_templateObject6$3());
-var SelectHidden$1 = styled.select(_templateObject7$3());
+var TagsValues = styled__default.ul(_templateObject6$3());
+var SelectHidden$1 = styled__default.select(_templateObject7$3());
 var Tag = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var _ref$name = _ref.name,
       name = _ref$name === void 0 ? '' : _ref$name,
@@ -4076,13 +4077,13 @@ function _templateObject$a() {
 
   return data;
 }
-var Frag$4 = styled.div(_templateObject$a());
-var Field = styled.div(_templateObject2$6());
-var WraperBucket = styled.div(_templateObject3$6(), function (props) {
+var Frag$4 = styled__default.div(_templateObject$a());
+var Field = styled__default.div(_templateObject2$6());
+var WraperBucket = styled__default.div(_templateObject3$6(), function (props) {
   return props.background ? props.background : theme.colors.info.shadow;
 }, theme.colors.action, theme.colors.secondary);
-var ColorBox = styled.ul(_templateObject4$6(), theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
-var SelectHidden$2 = styled.select(_templateObject5$4());
+var ColorBox = styled__default.ul(_templateObject4$6(), theme.colors.neutrals.gray, theme.colors.secondary, theme.defaultRadius, theme.colors.neutrals.gray, theme.defaultRadius);
+var SelectHidden$2 = styled__default.select(_templateObject5$4());
 var InputColor = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var name = _ref.name,
       tooltip = _ref.tooltip,
@@ -4974,14 +4975,14 @@ var defaultShadow = function defaultShadow(color) {
   return "0px 0px 6px ".concat(color);
 };
 
-var Base = styled.button(_templateObject$b(), theme.defaultRadius, theme.colors.info.bg, theme.colors.secondary, theme.font.medium.size, theme.colors.info.shadow, theme.colors.secondary, theme.colors.info.shadow, theme.colors.info.bg, defaultShadow(theme.form.button.secondary.bg), theme.colors.info.shadow, defaultShadow(theme.form.button.secondary.bg), theme.form.button.secondary.bg);
+var Base = styled__default.button(_templateObject$b(), theme.defaultRadius, theme.colors.info.bg, theme.colors.secondary, theme.font.medium.size, theme.colors.info.shadow, theme.colors.secondary, theme.colors.info.shadow, theme.colors.info.bg, defaultShadow(theme.form.button.secondary.bg), theme.colors.info.shadow, defaultShadow(theme.form.button.secondary.bg), theme.form.button.secondary.bg);
 var Primary = "\n    background:".concat(theme.form.button.primary.bg, ";\n    color:").concat(theme.colors.neutrals.white, ";\n\n    > * {\n        border-color: ").concat(theme.colors.neutrals.white, ";\n    }\n\n    svg path {\n        fill: ").concat(theme.colors.neutrals.white, ";\n    }\n\n    &:hover,\n    &.hover {\n        background:").concat(theme.form.button.primary.hover, "\n    }\n\n    &:focus,\n    &.focus {\n        background:").concat(theme.form.button.primary.bg, ";\n        box-shadow:").concat(defaultShadow(theme.form.button.primary.bg), ";\n    }\n\n    &:active,\n    &.active {\n        background:").concat(theme.form.button.primary.hover, "\n        box-shadow:").concat(defaultShadow(theme.form.button.primary.bg), ";\n    }\n\n    &.selected {\n        border: 1px solid ").concat(theme.colors.neutrals.white, ";\n    }\n");
 var Secondary = "\n    background:".concat(theme.form.button.secondary.bg, ";\n    color:").concat(theme.colors.neutrals.white, ";\n\n    > * {\n        border-color: ").concat(theme.colors.neutrals.white, ";\n    }\n\n    svg path {\n        fill: ").concat(theme.colors.neutrals.white, ";\n    }\n\n    &:hover {\n        background:").concat(theme.form.button.secondary.hover, "\n    }\n\n    &:focus {\n        background:").concat(theme.form.button.secondary.bg, ";\n        box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n    }\n\n    &:active,\n    &.active {\n        background:").concat(theme.form.button.secondary.hover, "\n        box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n    }\n\n    &.selected {\n        border: 1px solid ").concat(theme.colors.neutrals.white, ";\n    }\n");
 var Cancel = "\n    background:transparent;\n    color:".concat(theme.form.button.secondary.bg, ";\n\n    > * {\n        border-color: ").concat(theme.colors.info.shadow, ";\n    }\n\n    svg path {\n        fill: ").concat(theme.colors.secondary, ";\n    }\n\n    &:hover {\n        background:transparent;\n        text-decoration:underline;\n    }\n\n    &:focus {\n        background:").concat(theme.colors.neutrals.white, ";\n        box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n    }\n\n    &:active,\n    &.active {\n        background:").concat(theme.colors.neutrals.white, ";\n        box-shadow:").concat(defaultShadow(theme.form.button.secondary.bg), ";\n        text-decoration:underline;\n    }\n\n    &.selected {\n        border: 1px solid ").concat(theme.form.button.secondary.bg, ";\n    }\n");
 var Delete = "\n    background:".concat(theme.colors.neutrals.white, ";\n    color:").concat(theme.colors.error.text, ";\n    border:1px solid ").concat(theme.colors.error.bg, ";\n\n    > * {\n        border-color: ").concat(theme.colors.error.shadow, ";\n    }\n\n    svg path {\n        fill: ").concat(theme.colors.error.text, ";\n    }\n\n    &:hover {\n        border-color:").concat(theme.colors.error.border, ";\n        background:").concat(theme.colors.error.bg, ";\n    }\n\n    &:focus {\n        background:").concat(theme.colors.neutrals.white, ";\n        border-color:").concat(theme.colors.error.border, ";\n        box-shadow:").concat(defaultShadow(theme.colors.error.shadow), ";\n    }\n\n    &:active,\n    &.active {\n        background:").concat(theme.colors.error.bg, ";\n        border-color:").concat(theme.colors.error.border, ";\n        box-shadow:").concat(defaultShadow(theme.colors.error.shadow), ";\n    }\n\n    &.selected {\n        border: 1px solid ").concat(theme.colors.error.border, ";\n    }\n");
 var Small = "\n    height:28px;\n    line-height:28px;\n    font-size:".concat(theme.font.small.size, ";\n    padding:0 12px;\n");
 var Big = "\n    height:60px;\n    line-height:60px;\n    font-size:".concat(theme.font.big.size, ";\n    padding:0 20px;\n");
-var Exportedd = styled(Base)(_templateObject2$7(), function (props) {
+var Exportedd = styled__default(Base)(_templateObject2$7(), function (props) {
   return props.typeStyle === 'primary' && Primary;
 }, function (props) {
   return props.typeStyle === 'secondary' && Secondary;
@@ -5079,11 +5080,11 @@ function _templateObject$c() {
 
   return data;
 }
-var Frag$5 = styled.div(_templateObject$c());
-var Wrapper$1 = styled.label(_templateObject2$8(), theme.colors.info.bg, theme.colors.secondary, theme.colors.action, theme.colors.secondary, theme.colors.success.border, theme.colors.success.border, theme.colors.error.border, theme.colors.error.border);
-var Input$1 = styled(InputBase)(_templateObject3$7());
-var Profile = styled.div(_templateObject4$7(), theme.colors.neutrals.silver);
-var HiddenInput = styled.input(_templateObject5$5());
+var Frag$5 = styled__default.div(_templateObject$c());
+var Wrapper$1 = styled__default.label(_templateObject2$8(), theme.colors.info.bg, theme.colors.secondary, theme.colors.action, theme.colors.secondary, theme.colors.success.border, theme.colors.success.border, theme.colors.error.border, theme.colors.error.border);
+var Input$1 = styled__default(InputBase)(_templateObject3$7());
+var Profile = styled__default.div(_templateObject4$7(), theme.colors.neutrals.silver);
+var HiddenInput = styled__default.input(_templateObject5$5());
 var Uploader = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var name = _ref.name,
       label = _ref.label,
@@ -5223,8 +5224,8 @@ var processFileList = /*#__PURE__*/function () {
   };
 }();
 
-var DropUploaderList = styled.div(_templateObject6$4());
-var DropUploaderPreview = styled.div(_templateObject7$4(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.extra.whiteSmoke, theme.font.extraSmall.size, theme.font.main, theme.colors.neutrals.silver, function (props) {
+var DropUploaderList = styled__default.div(_templateObject6$4());
+var DropUploaderPreview = styled__default.div(_templateObject7$4(), theme.defaultRadius, theme.colors.neutrals.silver, theme.colors.extra.whiteSmoke, theme.font.extraSmall.size, theme.font.main, theme.colors.neutrals.silver, function (props) {
   return typeof props.preview === 'string' && props.preview;
 }, theme.colors.info.bg, theme.colors.secondary, theme.colors.secondary);
 var DropUploader = /*#__PURE__*/React.forwardRef(function (_ref3, ref) {
@@ -5500,11 +5501,11 @@ function _templateObject$d() {
 
   return data;
 }
-var Frag$6 = styled.div(_templateObject$d());
-var CheckBoxWrapper = styled.div(_templateObject2$9());
-var CheckBoxLabel = styled.label(_templateObject3$8(), theme.colors.neutrals.white, theme.colors.neutrals.silver, theme.colors.action, theme.colors.secondary);
-var CheckBox$1 = styled.input(_templateObject4$8(), CheckBoxLabel, theme.colors.info.bg, theme.colors.info.border, theme.colors.info.text);
-var ToggleLabel = styled.label(_templateObject5$6(), theme.colors.neutrals.medium, theme.font.small.size);
+var Frag$6 = styled__default.div(_templateObject$d());
+var CheckBoxWrapper = styled__default.div(_templateObject2$9());
+var CheckBoxLabel = styled__default.label(_templateObject3$8(), theme.colors.neutrals.white, theme.colors.neutrals.silver, theme.colors.action, theme.colors.secondary);
+var CheckBox$1 = styled__default.input(_templateObject4$8(), CheckBoxLabel, theme.colors.info.bg, theme.colors.info.border, theme.colors.info.text);
+var ToggleLabel = styled__default.label(_templateObject5$6(), theme.colors.neutrals.medium, theme.font.small.size);
 var Toggle = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var name = _ref.name,
       label = _ref.label,
@@ -5723,7 +5724,7 @@ var fromMilliseconds = function fromMilliseconds(milliseconds) {
   };
 };
 
-var TimePickerOptionsStyle = styled.div(_templateObject$e(), Options, OptionGroup, theme.font.extraSmall.size, theme.font.extraSmall.lineHeight, theme.colors.neutrals.white, theme.colors.neutrals.white);
+var TimePickerOptionsStyle = styled__default.div(_templateObject$e(), Options, OptionGroup, theme.font.extraSmall.size, theme.font.extraSmall.lineHeight, theme.colors.neutrals.white, theme.colors.neutrals.white);
 
 var TimePickerOptions = function TimePickerOptions(_ref5) {
   var time = _ref5.time,
@@ -5984,7 +5985,7 @@ function _templateObject$f() {
 
   return data;
 }
-var Container = styled(Base).attrs(function (props) {
+var Container = styled__default(Base).attrs(function (props) {
   return {
     as: 'div'
   };
@@ -6003,7 +6004,7 @@ var Container = styled(Base).attrs(function (props) {
 }, function (props) {
   return props.divider && "\n        ".concat(ArrowContainer, " {\n            border-left-width: 1px;\n            border-left-style: dashed;\n        }\n    ");
 });
-var ArrowContainer = styled.div(_templateObject2$a());
+var ArrowContainer = styled__default.div(_templateObject2$a());
 
 var Dropdown$1 = function Dropdown$$1(_ref) {
   var children = _ref.children,
@@ -6096,7 +6097,7 @@ function _templateObject$g() {
 
   return data;
 }
-var BtnGroup = styled.div(_templateObject$g());
+var BtnGroup = styled__default.div(_templateObject$g());
 
 var ButtonGroup = function ButtonGroup(_ref) {
   var children = _ref.children,
@@ -6117,6 +6118,175 @@ var ButtonGroup = function ButtonGroup(_ref) {
   }));
 };
 
+function _templateObject4$9() {
+  var data = taggedTemplateLiteral(["\n    position:relative;\n\n    &:hover > ", " > * {\n        animation-name: ", ";\n        animation-duration: 300ms;\n        animation-fill-mode: both;\n        animation-timing-function: ease-in-out;\n    }\n"]);
+
+  _templateObject4$9 = function _templateObject4() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject3$9() {
+  var data = taggedTemplateLiteral(["\n    cursor:pointer;\n    background:white;\n    border-radius:100%;\n    padding:8px;\n    display:flex;\n    justify-content:center;\n    border:1px solid rgb(204, 204, 204);\n"]);
+
+  _templateObject3$9 = function _templateObject3() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject2$b() {
+  var data = taggedTemplateLiteral(["\n    position:absolute;\n    height:100%;\n    padding:12px;\n    white-space: nowrap;\n    align-items:center;\n    gap: ", "\n    display:flex;\n    visibility: hidden;\n\n    &:hover {\n        visibility: visible;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n\n    ", "\n"]);
+
+  _templateObject2$b = function _templateObject2() {
+    return data;
+  };
+
+  return data;
+}
+
+function _templateObject$h() {
+  var data = taggedTemplateLiteral(["\n    0% {\n        opacity:0;\n        visibility: hidden;\n        transform: scale(0.6) translateY(-8px);\n    }\n\n    100% {\n        visibility: visible;\n        opacity:1;\n    }\n"]);
+
+  _templateObject$h = function _templateObject() {
+    return data;
+  };
+
+  return data;
+}
+var listAnimation = styled.keyframes(_templateObject$h());
+var POSITION_LIST = '100%';
+var POSITION_LIST_DISTANCE = '10%';
+
+var generateAnimationDelay = function generateAnimationDelay(n, direction) {
+  var style = '';
+
+  if (['left', 'top'].includes(direction)) {
+    var delayNumber = 1;
+
+    for (var i = n; i >= 1; --i) {
+      style += "\n            > :nth-child(".concat(i, ") {\n                animation-delay: ").concat(delayNumber * 90, "ms;\n            }\n        ");
+      delayNumber++;
+    }
+  } else {
+    for (var _i = 1; _i <= n; ++_i) {
+      style += "\n            > :nth-child(".concat(_i, ") {\n                animation-delay: ").concat(_i * 90, "ms;\n            }\n        ");
+    }
+  }
+
+  return style;
+};
+
+var ListContent = styled__default.div(_templateObject2$b(), function (props) {
+  return props.spaceBetween;
+}, function (props) {
+  return generateAnimationDelay(props.childrenQuantity, props.direction);
+}, function (props) {
+  return props.direction === 'right' || props.direction === 'auto' && "\n        flex-direction:row;\n        top:0;\n        bottom:0;\n        left:".concat(POSITION_LIST, ";\n        padding-left:").concat(POSITION_LIST_DISTANCE, ";\n    ");
+}, function (props) {
+  return props.direction === 'left' && "\n        flex-direction:row;\n        top:0;\n        bottom:0;\n        right:".concat(POSITION_LIST, ";\n        padding-right:").concat(POSITION_LIST_DISTANCE, ";\n    ");
+}, function (props) {
+  return props.direction === 'top' && "\n        flex-direction:column;\n        justify-content:end;\n        bottom:".concat(POSITION_LIST, ";\n        right:0;\n        left:0;\n        padding-top:").concat(POSITION_LIST_DISTANCE, ";\n    ");
+}, function (props) {
+  return props.directiondirection === 'bottom' && "\n        flex-direction:column;\n        justify-content:start;\n        top:".concat(POSITION_LIST, ";\n        bottom:0;\n        right:0;\n        left:0;\n        padding-top:").concat(POSITION_LIST_DISTANCE, ";\n    ");
+});
+var PreviewContent = styled__default.div(_templateObject3$9());
+var Container$1 = styled__default.div(_templateObject4$9(), ListContent, listAnimation);
+
+var ButtonIcon = function ButtonIcon(_ref) {
+  var children = _ref.children,
+      _ref$event = _ref.event;
+
+  if (children.length > 2) {
+    throw 'This component only accepts a Button.Preview and Button.List component';
+  }
+
+  var _children = slicedToArray(children, 2),
+      Preview = _children[0],
+      List = _children[1];
+
+  if (Preview.type.name !== 'ButtonPreview') {
+    throw "The first component should be ButtonIcon.Preview, but got ".concat(Preview.type.name);
+  }
+
+  if (List.type.name !== 'ButtonList') {
+    throw "The first component should be ButtonIcon.List, but got ".concat(Preview.type.name);
+  }
+
+  return /*#__PURE__*/React__default.createElement(Container$1, null, Preview, List);
+};
+
+var ButtonPreview = function ButtonPreview(_ref2) {
+  var children = _ref2.children;
+  var previewRef = React.useRef();
+  return /*#__PURE__*/React__default.createElement(PreviewContent, {
+    ref: previewRef
+  }, children);
+};
+
+ButtonIcon.Preview = ButtonPreview;
+var DIRECTIONS = ['bottom', 'left', 'right', 'top', 'auto'];
+
+var ButtonList = function ButtonList(_ref3) {
+  var children = _ref3.children,
+      direction = _ref3.direction,
+      spaceBetween = _ref3.spaceBetween;
+
+  var _useState = React.useState(direction),
+      _useState2 = slicedToArray(_useState, 2),
+      dir = _useState2[0],
+      setDir = _useState2[1];
+
+  if (!DIRECTIONS.includes(dir)) {
+    throw "Invalid direction argument on component ButtonIcon.List, expect ".concat(DIRECTIONS.join(', '));
+  }
+
+  if (['left', 'top'].includes(dir)) {
+    children = React.Children.toArray(children).reverse();
+  }
+
+  var contentRef = React.useRef();
+  React.useEffect(function () {
+    if (!(contentRef === null || contentRef === void 0 ? void 0 : contentRef.current)) return;
+    if (dir !== 'auto') return;
+    var bounds = contentRef.current.getBoundingClientRect();
+    var windowWidth = window.innerWidth;
+    var windowHeight = window.innerHeight;
+
+    if (bounds.right > windowWidth) {
+      setDir('left');
+      return;
+    } else {
+      return;
+    }
+
+    if (bounds.left < 0) {
+      setDir('bottom');
+      return;
+    }
+
+    if (bounds.bottom > windowHeight) {
+      setDir('top');
+      return;
+    }
+  }, [contentRef]);
+  return /*#__PURE__*/React__default.createElement(ListContent, {
+    ref: contentRef,
+    direction: dir,
+    spaceBetween: spaceBetween,
+    childrenQuantity: children.length
+  }, children);
+};
+
+ButtonList.defaultProps = {
+  direction: 'auto',
+  spaceBetween: '8px'
+};
+ButtonIcon.List = ButtonList;
+
 var _ref$1t = /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
   id: "clip-path"
 }, /*#__PURE__*/React__default.createElement("path", {
@@ -6212,52 +6382,52 @@ function _templateObject5$7() {
   return data;
 }
 
-function _templateObject4$9() {
+function _templateObject4$a() {
   var data = taggedTemplateLiteral(["\n    font-size: ", ";\n    line-height: ", ";\n"]);
 
-  _templateObject4$9 = function _templateObject4() {
+  _templateObject4$a = function _templateObject4() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject3$9() {
+function _templateObject3$a() {
   var data = taggedTemplateLiteral(["\n    font-size: ", ";\n    line-height: ", ";\n"]);
 
-  _templateObject3$9 = function _templateObject3() {
+  _templateObject3$a = function _templateObject3() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject2$b() {
+function _templateObject2$c() {
   var data = taggedTemplateLiteral(["\n    font-family: ", ";\n    font-weight: normal;\n    font-size: ", ";\n    line-height: ", ";\n"]);
 
-  _templateObject2$b = function _templateObject2() {
+  _templateObject2$c = function _templateObject2() {
     return data;
   };
 
   return data;
 }
 
-function _templateObject$h() {
+function _templateObject$i() {
   var data = taggedTemplateLiteral(["\n    padding: 7px;\n    border-radius: ", ";\n    border-width:1px;\n    border-style:solid;\n    display:flex;\n    align-items:center;\n    position:relative;\n\n    ", "\n\n    svg {\n        margin-right: 8px;\n        display: block;\n    }\n"]);
 
-  _templateObject$h = function _templateObject() {
+  _templateObject$i = function _templateObject() {
     return data;
   };
 
   return data;
 }
-var Div = styled.div(_templateObject$h(), theme.defaultRadius, function (props) {
+var Div = styled__default.div(_templateObject$i(), theme.defaultRadius, function (props) {
   return props.useClose && "\n    padding-right: 32px;\n    ";
 });
-var Title$2 = styled.h5(_templateObject2$b(), theme.font.main, theme.font.medium.size, theme.font.big.lineHeight);
-var Content = styled.p(_templateObject3$9(), theme.font.extraSmall.size, theme.font.small.lineHeight);
-var SmallContent = styled(Content)(_templateObject4$9(), theme.font.small.size, theme.font.small.lineHeight);
-var Close = styled.button.attrs(function (props) {
+var Title$2 = styled__default.h5(_templateObject2$c(), theme.font.main, theme.font.medium.size, theme.font.big.lineHeight);
+var Content = styled__default.p(_templateObject3$a(), theme.font.extraSmall.size, theme.font.small.lineHeight);
+var SmallContent = styled__default(Content)(_templateObject4$a(), theme.font.small.size, theme.font.small.lineHeight);
+var Close = styled__default.button.attrs(function (props) {
   return {
     type: 'button'
   };
@@ -6343,6 +6513,7 @@ var index = {
 };
 
 exports.Theme = theme;
+exports.ButtonIcon = ButtonIcon;
 exports.Button = Exported;
 exports.ButtonDropdown = Dropdown$1;
 exports.ButtonGroup = ButtonGroup;