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

package/esm/components/data/Badge/Badge.styled.js

@@ -10,7 +10,12 @@ let _ = t => t,
   _t6,
   _t7,
   _t8;
-const Badge = styled.span.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Badge = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   align-content: center;
   display: ${0};
   font-family: ${0};
@@ -19,13 +24,17 @@ const Badge = styled.span.attrs(applyDefaultTheme)(_t || (_t = _`
   min-height: 24px;
   position: relative;
   width: ${0};
-`), props => props.elevated || !props.hasChildren ? 'inline-flex' : 'flex', props => props.theme.primaryFontFamily, props => props.elevated ? 'fit-content' : 'initial');
-const BadgeChildrenContainer = styled.span.attrs(applyDefaultTheme)(_t2 || (_t2 = _`
+`), props => props.$elevated || !props.$hasChildren ? 'inline-flex' : 'flex', props => props.theme.primaryFontFamily, props => props.$elevated ? 'fit-content' : 'initial');
+const BadgeChildrenContainer = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t2 || (_t2 = _`
   align-self: center;
   height: fit-content;
   margin-right: 8px;
 `));
-const BadgeLabel = styled.span.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const BadgeLabel = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   border-radius: ${0};
   display: flex;
   align-items: center;
@@ -54,29 +63,29 @@ const BadgeLabel = styled.span.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   ${0}
 
     ${0}
-`), props => props.elevated ? '12px' : '14px', props => {
+`), props => props.$elevated ? '12px' : '14px', props => {
   if (props.fontSize) {
     return `${props.fontSize}px`;
   } else {
     return props.elevated ? '0.625rem' : '0.750rem';
   }
-}, props => props.fontWeight ? props.fontWeight : 'normal', props => props.lineHeight ? `${props.lineHeight}px` : 'normal', props => props.height ? `${props.height}px` : 'fit-content', props => props.elevated ? '15px' : 'auto', props => props.elevated ? 'absolute' : 'initial', props => props.elevated ? 'translate(33%, -8px)' : 'initial', props => props.width ? css(_t4 || (_t4 = _`
+}, props => props.fontWeight ? props.fontWeight : 'normal', props => props.$lineHeight ? `${props.$lineHeight}px` : 'normal', props => props.height ? `${props.height}px` : 'fit-content', props => props.$elevated ? '15px' : 'auto', props => props.$elevated ? 'absolute' : 'initial', props => props.$elevated ? 'translate(33%, -8px)' : 'initial', props => props.width ? css(_t4 || (_t4 = _`
           width: ${0}px;
-        `), props.width) : null, props => props.minWidth ? css(_t5 || (_t5 = _`
+        `), props.width) : null, props => props.$minWidth ? css(_t5 || (_t5 = _`
           min-width: ${0}px;
-        `), props.minWidth) : null, props => props.minHeight ? css(_t6 || (_t6 = _`
+        `), props.$minWidth) : null, props => props.minHeight ? css(_t6 || (_t6 = _`
           min-height: ${0}px;
         `), props.minHeight) : null, props => {
-  const verticalPadding = props.verticalPadding ? `${props.verticalPadding}px` : props.elevated ? '4px' : '6px';
-  const horizontalPadding = props.horizontalPadding ? `${props.horizontalPadding}px` : props.elevated ? '7px' : '10px';
+  const verticalPadding = props.verticalPadding ? `${props.verticalPadding}px` : props.$elevated ? '4px' : '6px';
+  const horizontalPadding = props.$horizontalPadding ? `${props.$horizontalPadding}px` : props.$elevated ? '7px' : '10px';
   return css(_t7 || (_t7 = _`
       padding: ${0} ${0};
     `), verticalPadding, horizontalPadding);
 }, props => props.theme.themeProp('background', () => {
   var _props$backgroundColo, _props$backgroundColo2;
-  const active = props.active;
-  const error = props.error;
-  const warning = props.warning;
+  const active = props.$active;
+  const error = props.$error;
+  const warning = props.$warning;
   const defaultBgColor = (_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');
   switch (true) {
     case !error && !warning && !active:
@@ -95,11 +104,11 @@ const BadgeLabel = styled.span.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
       return props.theme.getColor('gray-600');
   }
 }, () => {
-  var _props$backgroundColo3, _props$backgroundColo4;
-  const active = props.active;
-  const error = props.error;
-  const warning = props.warning;
-  const defaultBgColor = (_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');
+  var _props$$backgroundCol, _props$$backgroundCol2;
+  const active = props.$active;
+  const error = props.$error;
+  const warning = props.$warning;
+  const defaultBgColor = (_props$$backgroundCol = props === null || props === void 0 || (_props$$backgroundCol2 = props.$backgroundColors) === null || _props$$backgroundCol2 === void 0 ? void 0 : _props$$backgroundCol2[1]) !== null && _props$$backgroundCol !== void 0 ? _props$$backgroundCol : props.theme.getColor('gray-200');
   switch (true) {
     case !error && !warning && !active:
       return defaultBgColor;
@@ -117,29 +126,31 @@ const BadgeLabel = styled.span.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
       return props.theme.getColor('gray-200');
   }
 }), props => props.theme.themeProp('color', () => {
-  var _props$colors$, _props$colors;
-  const defaultColor = (_props$colors$ = props === null || props === void 0 || (_props$colors = props.colors) === null || _props$colors === void 0 ? void 0 : _props$colors[0]) !== null && _props$colors$ !== void 0 ? _props$colors$ : props.theme.getColor('white');
-  if (props.warning && !props.error || props.error && !props.active) {
+  var _props$$colors$, _props$$colors;
+  const defaultColor = (_props$$colors$ = props === null || props === void 0 || (_props$$colors = props.$colors) === null || _props$$colors === void 0 ? void 0 : _props$$colors[0]) !== null && _props$$colors$ !== void 0 ? _props$$colors$ : props.theme.getColor('white');
+  if (props.$warning && !props.$error || props.error && !props.$active) {
     return props.theme.getColor('gray-900');
   } else {
     return defaultColor;
   }
 }, () => {
-  var _props$colors$2, _props$colors2;
-  const defaultColor = (_props$colors$2 = props === null || props === void 0 || (_props$colors2 = props.colors) === null || _props$colors2 === void 0 ? void 0 : _props$colors2[1]) !== null && _props$colors$2 !== void 0 ? _props$colors$2 : props.theme.getColor('gray-900');
-  if (props.error && props.active) {
+  var _props$$colors$2, _props$$colors2;
+  const defaultColor = (_props$$colors$2 = props === null || props === void 0 || (_props$$colors2 = props.$colors) === null || _props$$colors2 === void 0 ? void 0 : _props$$colors2[1]) !== null && _props$$colors$2 !== void 0 ? _props$$colors$2 : props.theme.getColor('gray-900');
+  if (props.$error && props.$active) {
     return props.theme.getColor('white');
   } else {
     return defaultColor;
   }
 }));
-const BadgeIcon = styled.span.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const BadgeIcon = styled.span.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   display: flex;
   align-items: center;
   margin-right: ${0};
   svg {
     height: 12px;
   }
-`), props => props.useGutter ? '4px' : 0);
+`), props => props.$useGutter ? '4px' : 0);
 
 export { Badge, BadgeChildrenContainer, BadgeIcon, BadgeLabel };

package/esm/components/data/Popover/Popover.js

@@ -35,6 +35,8 @@ const Popover = React.forwardRef(function Popover(_ref, ref) {
       });
     }));
   };
+  const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key)));
   return React.createElement("div", null, React.createElement(Popover$2, _extends({
     ref: ref,
     content: content,
@@ -70,9 +72,9 @@ const Popover = React.forwardRef(function Popover(_ref, ref) {
         }
       }, ...modifiers]
     },
-    onShown: contextMenu ? handleContextMenuItemClick : undefined,
+    onShow: contextMenu ? handleContextMenuItemClick : undefined,
     maxWidth: maxWidth
-  }, props), children));
+  }, filteredProps), children));
 });
 Popover.propTypes = process.env.NODE_ENV !== "production" ? {
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,

package/esm/components/data/Tab/Tab.styled.js

@@ -3,7 +3,12 @@ import { applyDefaultTheme } from '../../../utils/defaultTheme.js';
 
 let _ = t => t,
   _t;
-const Tab = styled.p.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Tab = styled.p.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;

package/esm/components/data/Tabs/Tabs.js

@@ -1,4 +1,4 @@
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, objectSpread2 as _objectSpread2 } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { isEmpty, isNil } from 'lodash';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import React from '../../../node_modules/react/index.js';
@@ -6,12 +6,13 @@ import { Tabs as Tabs$2, TabHeaders, TabHeader, TabHeaderBorder, TabContent } fr
 import { r as react } from '../../../_virtual/index.js';
 import Tab from '../Tab/Tab.js';
 
-const _excluded = ["children", "defaultMinHeight", "customPadding"];
+const _excluded = ["children", "defaultMinHeight", "customPadding", "onTabClick"];
 const Tabs = React.forwardRef(function Tabs(_ref, forwardedRef) {
   let {
       children,
-      defaultMinHeight,
-      customPadding
+      defaultMinHeight = '',
+      customPadding = 0,
+      onTabClick = () => {}
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const [activeTab, setActiveTab] = react.exports.useState(0);
@@ -48,20 +49,32 @@ const Tabs = React.forwardRef(function Tabs(_ref, forwardedRef) {
     }
     return tabs;
   }, [children]);
+  const handleTabClick = tab => {
+    setActiveTab(tab.key);
+    let triggerText = '';
+    if (tab.trigger && tab.trigger.props && tab.trigger.props.children) {
+      triggerText = tab.trigger.props.children;
+    }
+    if (onTabClick) {
+      onTabClick(_objectSpread2(_objectSpread2({}, tab), {}, {
+        triggerText: triggerText
+      }));
+    }
+  };
   return React.createElement(Tabs$2, _extends({
     ref: forwardedRef
   }, props, {
     role: "tablist"
   }), React.createElement(TabHeaders, {
-    customPadding: customPadding
+    custompadding: customPadding
   }, tabs.map(tab => React.createElement(TabHeader, {
     key: tab.key,
     hidden: tab.hidden,
-    active: tab.key === activeTab,
-    onClick: () => setActiveTab(tab.key),
+    $active: tab.key === activeTab,
+    onClick: () => handleTabClick(tab),
     role: "tab"
   }, tab.trigger))), React.createElement(TabHeaderBorder, {
-    customPadding: customPadding
+    custompadding: customPadding
   }), React.createElement(TabContent, null, tabs.map(tab => React.createElement("div", {
     ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
     key: tab.key,
@@ -72,15 +85,12 @@ const Tabs = React.forwardRef(function Tabs(_ref, forwardedRef) {
     }
   }, tab.content))));
 });
-Tabs.defaultProps = {
-  defaultMinHeight: '',
-  customPadding: 0
-};
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   backgroundColor: PropTypes.string,
   defaultMinHeight: PropTypes.string,
-  customPadding: PropTypes.string
+  customPadding: PropTypes.string,
+  onTabClick: PropTypes.func
 } : {};
 var Tabs$1 = Tabs;
 

package/esm/components/data/Tabs/Tabs.styled.js

@@ -11,16 +11,23 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
-  _t10,
-  _t11;
-const Tabs = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+  _t0,
+  _t1;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Tabs = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   display: block;
   position: relative;
   ${0};
 `), props => props.backgroundColor && css(_t2 || (_t2 = _`
       background-color: ${0};
     `), props.backgroundColor));
-const TabHeaders = styled.ul.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const TabHeaders = styled.ul.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
@@ -30,12 +37,14 @@ const TabHeaders = styled.ul.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   margin: 0;
   ${0};
   ${0};
-`), props => !props.customPadding && css(_t4 || (_t4 = _`
+`), props => !props.custompadding && css(_t4 || (_t4 = _`
       padding: 0;
-    `)), props => props.customPadding && css(_t5 || (_t5 = _`
+    `)), props => props.custompadding && css(_t5 || (_t5 = _`
       padding: 0 ${0};
-    `), props.customPadding));
-const TabHeader = styled.li.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
+    `), props.custompadding));
+const TabHeader = styled.li.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   font-family: ${0};
   text-transform: uppercase;
   font-weight: 600;
@@ -52,34 +61,38 @@ const TabHeader = styled.li.attrs(applyDefaultTheme)(_t6 || (_t6 = _`
   &&:hover:not(:focus) {
     ${0};
   }
-`), props => props.theme.secondaryFontFamily, props => props.active && css(_t7 || (_t7 = _`
+`), props => props.theme.secondaryFontFamily, props => props.$active && css(_t7 || (_t7 = _`
       ${0}
     `), props => props.theme.themeProp('border-color', props.theme.getColor('gray-400'), props.theme.getColor('gray-700'))), props => props.theme.themeProp('border-color', () => {
-  if (props.active) {
+  if (props.$active) {
     return props.theme.getColor('gray-400');
   } else {
     return props.theme.getColor('gray-400');
   }
 }, () => {
-  if (props.active) {
+  if (props.$active) {
     return props.theme.getColor('gray-700');
   } else {
     return props.theme.getColor('gray-700');
   }
 }));
-const TabContent = styled.div.attrs(applyDefaultTheme)(_t8 || (_t8 = _`
+const TabContent = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t8 || (_t8 = _`
   display: block;
 `));
-const TabHeaderBorder = styled.div.attrs(applyDefaultTheme)(_t9 || (_t9 = _`
+const TabHeaderBorder = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t9 || (_t9 = _`
   border-top: 1px solid;
 
   ${0};
   ${0};
   ${0};
-`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5'), props => !props.customPadding && css(_t10 || (_t10 = _`
+`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5'), props => !props.custompadding && css(_t0 || (_t0 = _`
       margin: -2px 0;
-    `)), props => props.customPadding && css(_t11 || (_t11 = _`
+    `)), props => props.custompadding && css(_t1 || (_t1 = _`
       margin: -2px ${0};
-    `), props.customPadding));
+    `), props.custompadding));
 
 export { TabContent, TabHeader, TabHeaderBorder, TabHeaders, Tabs };

package/esm/components/data/Tooltip/Tooltip.js

@@ -15,6 +15,8 @@ const Tooltip = React.forwardRef(function Tooltip(_ref, ref) {
       children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
+  const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key)));
   return React.createElement("div", null, React.createElement(Tooltip$2, _extends({
     ref: ref,
     content: content,
@@ -24,7 +26,7 @@ const Tooltip = React.forwardRef(function Tooltip(_ref, ref) {
     trigger: trigger,
     visible: visible,
     animation: 'shift-away-subtle'
-  }, props), children));
+  }, filteredProps), children));
 });
 Tooltip.defaultProps = {
   content: 'Tooltip',

package/esm/components/data/VerificationStatusIcon/VerificationStatusIcon.js

@@ -13,15 +13,15 @@ const VerificationStatusIcon = React.forwardRef(function VerificationStatusIcon(
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(VerificationIconWrapper, {
-    background: background
+    $background: background
   }, React.createElement(VerificationStatusIcon$2, _extends({
-    iconHeight: iconHeight,
-    background: background,
+    $iconHeight: iconHeight,
+    $background: background,
     ref: forwardedRef
   }, props), React.createElement(SvgVerification, null), React.createElement(VerificationStatusColor, {
-    iconHeight: iconHeight,
-    status: status,
-    background: background
+    $iconHeight: iconHeight,
+    $status: status,
+    $background: background
   })));
 });
 VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {

package/esm/components/data/VerificationStatusIcon/VerificationStatusIcon.styled.js

@@ -6,16 +6,23 @@ let _ = t => t,
   _t2,
   _t3,
   _t4;
-const VerificationIconWrapper = styled.div.attrs(applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const VerificationIconWrapper = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t || (_t = _`
   ${0};
-`), props => props.background && css(_t2 || (_t2 = _`
+`), props => props.$background && css(_t2 || (_t2 = _`
     background-color: #000 !important;
     width: fit-content;
     padding: 6px 14px 6px 9px;
     border-radius: 15px;
 }
     `)));
-const VerificationStatusIcon = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 = _`
+const VerificationStatusIcon = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t3 || (_t3 = _`
   display: flex;
   position: relative;
   font: normal normal normal 12px/16px Roboto;
@@ -26,11 +33,13 @@ const VerificationStatusIcon = styled.div.attrs(applyDefaultTheme)(_t3 || (_t3 =
   svg {
     height: ${0}px;
   }
-`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100')), props => {
+`), props => props.theme.themeProp('color', props.theme.getColor('gray-300'), props.theme.getColor('gray-700')), props => props.$background && props.theme.themeProp('color', props.theme.getColor('gray-100'), props.theme.getColor('gray-100')), props => {
   var _props$iconHeight;
   return (_props$iconHeight = props.iconHeight) !== null && _props$iconHeight !== void 0 ? _props$iconHeight : 15;
 });
-const VerificationStatusColor = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4 = _`
+const VerificationStatusColor = styled.div.withConfig({
+  shouldForwardProp
+}).attrs(applyDefaultTheme)(_t4 || (_t4 = _`
   position: absolute;
   bottom: 0;
   left: ${0}px;
@@ -39,27 +48,27 @@ const VerificationStatusColor = styled.div.attrs(applyDefaultTheme)(_t4 || (_t4
   border-radius: 50%;
   ${0};
 `), props => {
-  var _props$iconHeight2;
-  return ((_props$iconHeight2 = props.iconHeight) !== null && _props$iconHeight2 !== void 0 ? _props$iconHeight2 : 15) * 2 / 3;
+  var _props$$iconHeight;
+  return ((_props$$iconHeight = props.$iconHeight) !== null && _props$$iconHeight !== void 0 ? _props$$iconHeight : 15) * 2 / 3;
 }, props => {
-  var _props$iconHeight3;
-  return ((_props$iconHeight3 = props.iconHeight) !== null && _props$iconHeight3 !== void 0 ? _props$iconHeight3 : 15) * 2 / 3;
+  var _props$$iconHeight2;
+  return ((_props$$iconHeight2 = props.$iconHeight) !== null && _props$$iconHeight2 !== void 0 ? _props$$iconHeight2 : 15) * 2 / 3;
 }, props => {
-  var _props$iconHeight4;
-  return ((_props$iconHeight4 = props.iconHeight) !== null && _props$iconHeight4 !== void 0 ? _props$iconHeight4 : 15) * 2 / 3;
+  var _props$$iconHeight3;
+  return ((_props$$iconHeight3 = props.$iconHeight) !== null && _props$$iconHeight3 !== void 0 ? _props$$iconHeight3 : 15) * 2 / 3;
 }, props => {
   let darkThemeColor = props.theme.getColor('gray-100');
   let lightThemeColor = props.theme.getColor('gray-500');
-  if (props.status === 'verified') {
+  if (props.$status === 'verified') {
     darkThemeColor = props.theme.getColor('emerald-500');
     lightThemeColor = props.theme.getColor('emerald-500');
-  } else if (props.status === 'pending') {
+  } else if (props.$status === 'pending') {
     darkThemeColor = props.theme.getColor('signal-yellow-500');
     lightThemeColor = props.theme.getColor('signal-yellow-500');
-  } else if (props.status === 'rejected') {
+  } else if (props.$status === 'rejected') {
     darkThemeColor = props.theme.getColor('red-600');
     lightThemeColor = props.theme.getColor('red-600');
-  } else if (props.status === 'mixed') {
+  } else if (props.$status === 'mixed') {
     darkThemeColor = '#008CDB';
     lightThemeColor = '#008CDB';
   }

package/esm/components/inputs/ActionButton/ActionButton.js

@@ -3,14 +3,15 @@ import React from '../../../node_modules/react/index.js';
 import PropTypes from '../../../node_modules/prop-types/index.js';
 import { ActionButton as ActionButton$2 } from './ActionButton.styled.js';
 
-const _excluded = ["icon", "disabled", "active", "onClick", "actionWidthHeight"];
+const _excluded = ["icon", "disabled", "active", "onClick", "actionWidthHeight", "backgroundColors"];
 const ActionButton = React.forwardRef(function ActionButton(_ref, forwardedRef) {
   let {
       icon,
       disabled,
       active,
       onClick,
-      actionWidthHeight
+      actionWidthHeight,
+      backgroundColors
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   return React.createElement(ActionButton$2, _extends({
@@ -18,7 +19,8 @@ const ActionButton = React.forwardRef(function ActionButton(_ref, forwardedRef)
     disabled: disabled,
     active: active,
     onClick: onClick,
-    actionWidthHeight: actionWidthHeight
+    actionWidthHeight: actionWidthHeight,
+    backgroundColors: backgroundColors
   }, props), icon);
 });
 ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {

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

@@ -15,7 +15,7 @@ const ActionButton = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
   border: 0;
   color: inherit;
   background-color: transparent;
-  ${0}
+
   background-position: center;
   background-repeat: no-repeat;
   background-size: 0 0;
@@ -24,6 +24,17 @@ const ActionButton = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
 
   ${0}
 
+  &:hover:not(:disabled) {
+    background-size: ${0}px
+      ${0}px;
+
+    svg {
+      ${0};
+    }
+  }
+
+  ${0}
+
   ${0}
 
   &:disabled {
@@ -36,7 +47,6 @@ const ActionButton = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
     width: 100%;
     max-width: ${0};
     max-height: ${0};
-
     pointer-events: none;
     transition: color 250ms;
   }
@@ -44,15 +54,14 @@ const ActionButton = styled.button.attrs(applyDefaultTheme)(_t || (_t = _`
   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 => 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 && 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 ${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 ${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`);
 
 export { ActionButton };