@ntbjs/react-components 2.0.0-rc.11 → 2.0.0-rc.13

package/cjs/components/inputs/ActionButton/ActionButton.styled.js

@@ -23,7 +23,7 @@ const ActionButton = styled__default["default"].button.attrs(defaultTheme.applyD
   border: 0;
   color: inherit;
   background-color: transparent;
-  ${0}
+
   background-position: center;
   background-repeat: no-repeat;
   background-size: 0 0;
@@ -32,6 +32,17 @@ const ActionButton = styled__default["default"].button.attrs(defaultTheme.applyD
 
   ${0}
 
+  &:hover:not(:disabled) {
+    background-size: ${0}px
+      ${0}px;
+
+    svg {
+      ${0};
+    }
+  }
+
+  ${0}
+
   ${0}
 
   &:disabled {
@@ -44,7 +55,6 @@ const ActionButton = styled__default["default"].button.attrs(defaultTheme.applyD
     width: 100%;
     max-width: ${0};
     max-height: ${0};
-
     pointer-events: none;
     transition: color 250ms;
   }
@@ -52,15 +62,14 @@ const ActionButton = styled__default["default"].button.attrs(defaultTheme.applyD
   var _props$backgroundColo, _props$backgroundColo2, _props$backgroundColo3, _props$backgroundColo4;
   const darkThemeBgColor = (_props$backgroundColo = props === null || props === void 0 || (_props$backgroundColo2 = props.backgroundColors) === null || _props$backgroundColo2 === void 0 ? void 0 : _props$backgroundColo2[0]) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : props.theme.getColor('gray-600');
   const lightThemeBgColor = (_props$backgroundColo3 = props === null || props === void 0 || (_props$backgroundColo4 = props.backgroundColors) === null || _props$backgroundColo4 === void 0 ? void 0 : _props$backgroundColo4[1]) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : props.theme.getColor('gray-200');
-  return props.theme.themeProp('background-image', `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 50%)`, `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 50%)`);
-}, props => styled.css(_t2 || (_t2 = _`
-    ${0}:not(:disabled) {
-      background-size: 200% 200%;
+  return props.theme.themeProp('background-image', `radial-gradient(circle at center, ${darkThemeBgColor} 50%, transparent 51%)`, `radial-gradient(circle at center, ${lightThemeBgColor} 50%, transparent 51%)`);
+}, props => Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2, props => Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2, props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700')), props => props.active && styled.css(_t2 || (_t2 = _`
+      background-size: ${0}px
+        ${0}px;
 
       svg {
         ${0};
       }
-    }
-  `), props.active ? '' : ':hover', props => props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))), props => props.useShadow ? props.theme.themeProp('box-shadow', `0px 3px 6px ${polished.rgba(props.theme.getColor('black'), 0.7)}`, `0px 3px 6px ${props.theme.getColor('black')}`) : null, props => `${props.actionWidthHeight[0] - 15}px`, props => `${props.actionWidthHeight[1] - 15}px`);
+    `), Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2, Math.max(props.actionWidthHeight[0], props.actionWidthHeight[1]) * 2, props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-700'))), props => props.useShadow ? props.theme.themeProp('box-shadow', `0px 3px 6px ${polished.rgba(props.theme.getColor('black'), 0.7)}`, `0px 3px 6px ${props.theme.getColor('black')}`) : null, props => `${props.actionWidthHeight[0] - 15}px`, props => `${props.actionWidthHeight[1] - 15}px`);
 
 exports.ActionButton = ActionButton;

package/cjs/components/inputs/Button/Button.js

@@ -11,7 +11,7 @@ var index$1 = require('../../../_virtual/index.js');
 var Popover = require('../../data/Popover/Popover.js');
 var ContextMenu = require('../../widgets/ContextMenu/ContextMenu.js');
 
-const _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width"];
+const _excluded = ["onClickEffect", "singleAction", "activeDropdown", "dropdownItems", "secondary", "outlined", "block", "icon", "size", "disabled", "loading", "className", "children", "singleActionGap", "width", "border"];
 const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
   let {
       onClickEffect,
@@ -20,7 +20,7 @@ const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
       dropdownItems,
       secondary,
       outlined,
-      block,
+      block = false,
       icon,
       size = 'normal',
       disabled,
@@ -28,7 +28,8 @@ const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
       className,
       children,
       singleActionGap = 34,
-      width
+      width,
+      border = 2
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   const [loadingState, setLoadingState] = index$1.react.exports.useState(loading || false);
@@ -70,27 +71,30 @@ const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
     setDropdownIsActive(false);
   };
   return index["default"].createElement(Button_styled.ButtonWrapper, null, !singleAction ? index["default"].createElement(Button_styled.MainButtonWrapper, {
-    activeDropdown: activeDropdown,
-    dropdownItems: dropdownItems,
-    outlined: outlined,
-    secondary: secondary
+    $activeDropdown: activeDropdown,
+    $dropdownItems: dropdownItems,
+    $outlined: outlined,
+    $secondary: secondary,
+    $block: block
   }, index["default"].createElement(Button_styled.MainButtonContainer, {
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
+    $block: block
   }, index["default"].createElement(Button_styled.Button, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef,
     onClick: onClickEffect,
-    singleAction: singleAction,
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined,
-    block: block,
+    $border: border,
+    $singleaction: singleAction,
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
+    $block: block,
     size: size,
     disabled: disabled,
     className: className,
     "aria-busy": disabled,
-    width: width
+    $width: width
   }, props), index["default"].createElement(Button_styled.ButtonContent, {
     $loading: loadingState,
     size: size
@@ -112,9 +116,9 @@ const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
       strokeDashoffset: `${loadingStep}px`
     }
   }))))), (activeDropdown || dropdownItems) && index["default"].createElement(Button_styled.DropdownButtonContainer, {
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined
   }, index["default"].createElement(Popover["default"], {
     content: index["default"].createElement(ContextMenu["default"], null, dropdownItems),
     placement: 'bottom-end',
@@ -123,24 +127,25 @@ const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
     onHide: handleDropdownClose
   }, index["default"].createElement(Button_styled.Button, {
     ref: forwardedRef,
-    singleAction: singleAction,
-    singleActionGap: singleActionGap,
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined,
-    block: block,
+    $singleaction: singleAction,
+    $singleactiongap: singleActionGap,
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
+    $border: border,
+    $block: block,
     size: size,
     disabled: disabled,
     onClick: handleDropdownButtonClick,
     className: dropdownIsActive ? 'dropdown-is-active' : '',
-    width: width
+    $width: width
   }, index["default"].createElement(expandMore.ReactComponent, null))))) : index["default"].createElement(index["default"].Fragment, null, index["default"].createElement(Button_styled.MainButtonContainerSingle, {
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined,
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
     className: className
   }, index["default"].createElement(Button_styled.DropdownButtonContainer, {
-    singleAction: singleAction
+    $singleaction: singleAction
   }, index["default"].createElement(Popover["default"], {
     content: index["default"].createElement(ContextMenu["default"], null, dropdownItems),
     placement: 'bottom-end',
@@ -149,21 +154,22 @@ const Button = index["default"].forwardRef(function Button(_ref, forwardedRef) {
     onHide: handleDropdownClose
   }, index["default"].createElement(Button_styled.Button, {
     ref: forwardedRef,
-    singleAction: singleAction,
-    singleActionGap: singleActionGap,
-    dropdownItems: dropdownItems,
-    secondary: secondary,
-    outlined: outlined,
-    block: block,
+    $singleaction: singleAction,
+    $singleactiongap: singleActionGap,
+    $dropdownItems: dropdownItems,
+    $secondary: secondary,
+    $outlined: outlined,
+    $border: border,
+    $block: block,
     size: size,
     disabled: disabled,
     onClick: handleDropdownButtonClick,
     className: dropdownIsActive ? 'dropdown-is-active' : '',
-    width: width
+    $width: width
   }, index["default"].createElement(Button_styled.ButtonContent, {
     $loading: loadingState,
     size: size,
-    singleAction: singleAction
+    $singleaction: singleAction
   }, icon, children), index["default"].createElement(expandMore.ReactComponent, null)))))));
 });
 Button.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -173,6 +179,7 @@ Button.propTypes = process.env.NODE_ENV !== "production" ? {
   dropdownItems: index$2["default"].node,
   secondary: index$2["default"].bool,
   outlined: index$2["default"].bool,
+  border: index$2["default"].number,
   block: index$2["default"].bool,
   icon: index$2["default"].element,
   size: index$2["default"].oneOf(['x-small', 'small', 'normal', 'large']),

package/cjs/components/inputs/Button/Button.styled.js

@@ -19,6 +19,8 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
+  _t0,
+  _t1,
   _t10,
   _t11,
   _t12,
@@ -40,8 +42,14 @@ let _ = t => t,
   _t28,
   _t29,
   _t30,
-  _t31;
-const Button = styled__default["default"].button.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  _t31,
+  _t32;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Button = styled__default["default"].button.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   position: relative;
   border-radius: 3px;
   font-family: inherit;
@@ -50,8 +58,10 @@ const Button = styled__default["default"].button.attrs(defaultTheme.applyDefault
   padding: 12px 16px;
   cursor: pointer;
   background: ${0};
-  border: 2px solid ${0};
-  transition: all 250ms, opacity 200ms;
+  border: ${0}px solid ${0};
+  transition:
+    all 250ms,
+    opacity 200ms;
 
   &:hover,
   &.dropdown-is-active {
@@ -90,7 +100,7 @@ const Button = styled__default["default"].button.attrs(defaultTheme.applyDefault
   ${0};
 
   ${0};
-`), props => props.theme.getColor('emerald-500'), props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white')), props => props.secondary && styled.css(_t2 || (_t2 = _`
+`), props => props.theme.getColor('emerald-500'), props => props.$border, props => props.theme.getColor('emerald-500'), props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('white')), props => props.$secondary && styled.css(_t2 || (_t2 = _`
         background: ${0};
         border-color: ${0};
 
@@ -101,7 +111,7 @@ const Button = styled__default["default"].button.attrs(defaultTheme.applyDefault
           background: ${0};
           border-color: ${0};
         }
-      `), props => props.theme.getColor('gray-200'), props => props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), props => props.theme.getColor('gray-300'), props => props.theme.getColor('gray-300')), props => props.outlined && styled.css(_t3 || (_t3 = _`
+      `), props => props.theme.getColor('gray-200'), props => props.theme.getColor('gray-200'), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700')), props => props.theme.getColor('gray-300'), props => props.theme.getColor('gray-300')), props => props.$outlined && styled.css(_t3 || (_t3 = _`
         background: transparent;
         transition: none;
 
@@ -117,7 +127,7 @@ const Button = styled__default["default"].button.attrs(defaultTheme.applyDefault
 
           ${0}
         }
-      `), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))), props => props.outlined && props.secondary && styled.css(_t4 || (_t4 = _`
+      `), props.theme.themeProp('border-color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('color', props.theme.getColor('emerald-400'), props.theme.getColor('emerald-500')), props.theme.themeProp('border-color', props.theme.getColor('emerald-600'), props.theme.getColor('emerald-600')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-200'))), props => props.$outlined && props.$secondary && styled.css(_t4 || (_t4 = _`
         ${0}
 
         ${0}
@@ -130,12 +140,12 @@ const Button = styled__default["default"].button.attrs(defaultTheme.applyDefault
 
           ${0}
         }
-      `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))), props => props.outlined && props.secondary && props.dropdownItems && styled.css(_t5 || (_t5 = _`
+      `), props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700')), props.theme.themeProp('color', props.theme.getColor('gray-200'), props.theme.getColor('gray-700')), props.theme.getColor('gray-300'), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300')), props.theme.themeProp('color', props.theme.getColor('gray-700'), props.theme.getColor('gray-700'))), props => props.$outlined && props.$secondary && props.$dropdownItems && styled.css(_t5 || (_t5 = _`
         &:hover,
         &.dropdown-is-active {
           ${0}
         }
-      `), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))), props => props.block && styled.css(_t6 || (_t6 = _`
+      `), props.theme.themeProp('border-color', props.theme.getColor('gray-300'), props.theme.getColor('gray-300'))), props => props.$block && styled.css(_t6 || (_t6 = _`
       width: 100%;
     `)), props => props.disabled && styled.css(_t7 || (_t7 = _`
       opacity: 0.5;
@@ -146,19 +156,23 @@ const Button = styled__default["default"].button.attrs(defaultTheme.applyDefault
       height: 24px;
     `)), props => props.size === 'small' && styled.css(_t9 || (_t9 = _`
       padding: 6px 16px;
-    `)), props => props.size === 'large' && styled.css(_t10 || (_t10 = _`
+    `)), props => props.size === 'large' && styled.css(_t0 || (_t0 = _`
       padding: 16px 16px;
-    `)), props => props.singleAction && styled.css(_t11 || (_t11 = _`
+    `)), props => props.$singleaction && styled.css(_t1 || (_t1 = _`
       display: flex;
       align-items: center;
       gap: ${0}px;
       border-radius: 3px !important;
-      transition: all 250ms, opacity 200ms;
-    `), props.singleActionGap), props => props.width && styled.css(_t12 || (_t12 = _`
+      transition:
+        all 250ms,
+        opacity 200ms;
+    `), props.$singleactiongap), props => props.$width && styled.css(_t10 || (_t10 = _`
       min-width: ${0}px;
       justify-content: center;
-    `), props.width));
-const ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t13 || (_t13 = _`
+    `), props.$width));
+const ButtonContent = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t11 || (_t11 = _`
   display: flex;
   justify-content: center;
   align-items: center;
@@ -180,23 +194,25 @@ const ButtonContent = styled__default["default"].div.attrs(defaultTheme.applyDef
   ${0}
 
   ${0};
-`), props => props.size === 'small' && styled.css(_t14 || (_t14 = _`
+`), props => props.size === 'small' && styled.css(_t12 || (_t12 = _`
         max-width: 13px;
         max-height: 13px;
-      `)), props => props.size === 'x-small' && styled.css(_t15 || (_t15 = _`
+      `)), props => props.size === 'x-small' && styled.css(_t13 || (_t13 = _`
         max-width: 11px;
         max-height: 11px;
-      `)), props => props.$loading && styled.css(_t16 || (_t16 = _`
+      `)), props => props.$loading && styled.css(_t14 || (_t14 = _`
       transform: scale(0.95);
       opacity: 0;
-    `)), props => props.singleAction && styled.css(_t17 || (_t17 = _`
+    `)), props => props.$singleaction && styled.css(_t15 || (_t15 = _`
       svg {
         width: 100% !important;
         height: 100% !important;
         margin-right: 24px;
       }
     `)));
-const LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
+const LoadingIndicator = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t16 || (_t16 = _`
   position: absolute;
   height: 100%;
   width: 100%;
@@ -209,44 +225,70 @@ const LoadingIndicator = styled__default["default"].div.attrs(defaultTheme.apply
   box-sizing: border-box;
 
   ${0}
-`), props => props.$loading && styled.css(_t19 || (_t19 = _`
+`), props => props.$loading && styled.css(_t17 || (_t17 = _`
       opacity: 1;
     `)));
-const LoadingIndicatorSvg = styled__default["default"].svg.attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
+const LoadingIndicatorSvg = styled__default["default"].svg.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t18 || (_t18 = _`
   height: 100%;
   color: inherit;
   transform: rotate(-88deg);
 `));
-const LoadingIndicatorSvgCircle = styled__default["default"].circle.attrs(defaultTheme.applyDefaultTheme)(_t21 || (_t21 = _`
+const LoadingIndicatorSvgCircle = styled__default["default"].circle.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t19 || (_t19 = _`
   transition: stroke-dashoffset 300ms linear;
   stroke-dasharray: 113;
 `));
-const ButtonWrapper = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
+const ButtonWrapper = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t20 || (_t20 = _`
   white-space: nowrap;
   display: flex;
-`));
-const MainButtonWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t23 || (_t23 = _`
+  ${0}
+`), props => props.$block && styled.css(_t21 || (_t21 = _`
+      width: 100%;
+    `)));
+const MainButtonWrapper = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t22 || (_t22 = _`
   border-radius: 3px;
+  ${0}
+
   ${0};
-`), props => {
-  return (props.activeDropdown || props.dropdownItems) && !props.outlined && styled.css(_t24 || (_t24 = _`
+`), props => props.$block && styled.css(_t23 || (_t23 = _`
+      width: 100%;
+      display: flex;
+    `)), props => {
+  return (props.$activeDropdown || props.$dropdownItems) && !props.$outlined && styled.css(_t24 || (_t24 = _`
         background: ${0};
-      `), props.secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
+      `), props.$secondary ? props.theme.getColor('gray-200') : props.theme.getColor('emerald-500'));
 });
-const MainButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
+const MainButtonContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t25 || (_t25 = _`
   display: inline-block;
+
+  ${0}
+
   button {
     ${0};
 
     ${0};
   }
-`), props => (props.activeDropdown || props.dropdownItems) && styled.css(_t26 || (_t26 = _`
+`), props => props.$block && styled.css(_t26 || (_t26 = _`
+      flex: 1;
+      width: 100%;
+    `)), props => (props.$activeDropdown || props.$dropdownItems) && styled.css(_t27 || (_t27 = _`
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
-      `)), props => (props.activeDropdown || props.dropdownItems) && props.outlined && styled.css(_t27 || (_t27 = _`
+      `)), props => (props.$activeDropdown || props.$dropdownItems) && props.outlined && styled.css(_t28 || (_t28 = _`
         border-right: none;
       `)));
-const MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t28 || (_t28 = _`
+const MainButtonContainerSingle = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t29 || (_t29 = _`
   display: inline-block;
   width: 100%;
   ${0};
@@ -254,16 +296,20 @@ const MainButtonContainerSingle = styled__default["default"].div.attrs(defaultTh
   button {
     ${0};
   }
-`), props => props.singleAction && styled.css(_t29 || (_t29 = _`
+`), props => props.$singleaction && styled.css(_t30 || (_t30 = _`
       display: flex;
       align-items: center;
       border-radius: 3px !important;
-      transition: all 250ms, opacity 200ms;
-    `)), props => (props.activeDropdown || props.dropdownItems) && styled.css(_t30 || (_t30 = _`
+      transition:
+        all 250ms,
+        opacity 200ms;
+    `)), props => (props.$activeDropdown || props.$dropdownItems) && styled.css(_t31 || (_t31 = _`
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
       `)));
-const DropdownButtonContainer = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t31 || (_t31 = _`
+const DropdownButtonContainer = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t32 || (_t32 = _`
   display: inline-block;
 
   button {
@@ -280,7 +326,7 @@ const DropdownButtonContainer = styled__default["default"].div.attrs(defaultThem
 
     ${0};
   }
-`), props => !props.singleAction && 'border-left: none', props => !props.singleAction && 'margin-bottom: 1px');
+`), props => !props.$singleaction && 'border-left: none', props => !props.$singleaction && 'margin-bottom: 1px');
 
 exports.Button = Button;
 exports.ButtonContent = ButtonContent;

package/cjs/components/inputs/Checkbox/Checkbox.js

@@ -72,7 +72,7 @@ const Checkbox = index["default"].forwardRef(function Checkbox({
     d: "m3.68,8.45L0,4.75l1.21-1.21,2.47,2.45L9.7,0l1.21,1.23-7.22,7.22Z",
     fill: "currentColor"
   }))), (typeof label === 'string' && label.length > 0 || typeof label === 'object') && index["default"].createElement(Checkbox_styled.CheckboxVisualLabel, null, label)), typeof descriptionText === 'string' && descriptionText.length > 0 && index["default"].createElement(Checkbox_styled.Description, {
-    error: hasError
+    $error: hasError
   }, descriptionText));
 });
 Checkbox.propTypes = process.env.NODE_ENV !== "production" ? {

package/cjs/components/inputs/Checkbox/Checkbox.styled.js

@@ -19,13 +19,20 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
-  _t10;
+  _t0;
 const checkboxSize = '18px';
-const Checkbox = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Checkbox = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   display: flex;
   flex-direction: column;
 `));
-const CheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+const CheckIcon = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   opacity: 0;
   transform: scale(0.1);
   transition: all 200ms;
@@ -40,7 +47,9 @@ const CheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefault
     display: block;
   }
 `), props => props.theme.getColor('gray-100'));
-const IndeterminateCheckIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const IndeterminateCheckIcon = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   opacity: 0;
   transform: scale(0.1);
   transition: all 200ms;
@@ -51,7 +60,9 @@ const IndeterminateCheckIcon = styled__default["default"].div.attrs(defaultTheme
   background: ${0};
   width: 10px;
 `), props => props.theme.getColor('gray-100'));
-const CheckboxLabel = styled__default["default"].label.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+const CheckboxLabel = styled__default["default"].label.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
   display: inline-flex;
   position: relative;
   cursor: pointer;
@@ -116,7 +127,9 @@ const CheckboxLabel = styled__default["default"].label.attrs(defaultTheme.applyD
       opacity: 0.5;
       cursor: not-allowed;
     `)));
-const CheckboxVisualLabel = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const CheckboxVisualLabel = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   padding-left: 10px;
   font-weight: 400;
   font-size: 0.875rem;
@@ -124,7 +137,9 @@ const CheckboxVisualLabel = styled__default["default"].div.attrs(defaultTheme.ap
 
   ${0};
 `), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-600')));
-const Description = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+const Description = styled__default["default"].p.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
   margin: 0.375rem 0 0 0;
   font-size: 0.75rem;
   line-height: 1.333;
@@ -132,7 +147,7 @@ const Description = styled__default["default"].p.attrs(defaultTheme.applyDefault
   ${0};
 
   ${0}
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.error && styled.css(_t10 || (_t10 = _`
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-400'), props.theme.getColor('gray-500')), props => props.$error && styled.css(_t0 || (_t0 = _`
       content: 'error';
       ${0}
     `), props.theme.themeProp('color', props.theme.getColor('red-200'), props.theme.getColor('red-500'))));

package/cjs/components/inputs/CompactAutocompleteSelect/CompactAutocompleteSelect.js

@@ -263,6 +263,6 @@ CompactAutocompleteSelect.defaultProps = {
   type: '',
   descriptionToolTip: ''
 };
-var AutocompleteSelect = CompactAutocompleteSelect;
+var CompactAutocompleteSelect$1 = CompactAutocompleteSelect;
 
-exports["default"] = AutocompleteSelect;
+exports["default"] = CompactAutocompleteSelect$1;