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

package/cjs/components/data/Alert/Alert.js

@@ -41,18 +41,18 @@ const Alert = index["default"].forwardRef(function Alert(_ref, forwardedRef) {
   }
   return index["default"].createElement(Alert_styled.Alert, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef,
-    alertMessage: alertMessage,
-    warning: isWarning,
-    error: isError,
-    info: isInfo,
-    align: align,
-    verticalPadding: verticalPadding,
-    horizontalPadding: horizontalPadding,
+    $alertMessage: alertMessage,
+    $warning: isWarning,
+    $error: isError,
+    $info: isInfo,
+    $align: align,
+    $verticalPadding: verticalPadding,
+    $horizontalPadding: horizontalPadding,
     width: width
   }, props), index["default"].createElement(Alert_styled.AlertRender, {
     fontSize: fontSize,
     lineHeight: lineHeight,
-    lineClamp: lineClamp
+    $lineClamp: lineClamp
   }, icon, " ", index["default"].createElement("span", null, alertMessage)));
 });
 Alert.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -68,8 +68,6 @@ Alert.propTypes = process.env.NODE_ENV !== "production" ? {
   width: index$1["default"].number
 } : {};
 Alert.defaultProps = {
-  warning: false,
-  error: false,
   align: 'left',
   alertMessage: 'Use subject to restrictions. Editorial use only, no commercial use without prior consent from rights holder.',
   lineClamp: 0,

package/cjs/components/data/Alert/Alert.styled.js

@@ -16,7 +16,12 @@ let _ = t => t,
   _t4,
   _t5,
   _t6;
-const Alert = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Alert = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   display: flex;
   flex-direction: column;
   padding: ${0};
@@ -31,18 +36,20 @@ const Alert = styled__default["default"].div.attrs(defaultTheme.applyDefaultThem
   
   text-align: ${0};
 `), props => {
-  var _props$verticalPaddin, _props$horizontalPadd;
-  const verticalPadding = (_props$verticalPaddin = props.verticalPadding) !== null && _props$verticalPaddin !== void 0 ? _props$verticalPaddin : 17;
-  const horizontalPadding = (_props$horizontalPadd = props.horizontalPadding) !== null && _props$horizontalPadd !== void 0 ? _props$horizontalPadd : 30;
+  var _props$$verticalPaddi, _props$$horizontalPad;
+  const verticalPadding = (_props$$verticalPaddi = props.$verticalPadding) !== null && _props$$verticalPaddi !== void 0 ? _props$$verticalPaddi : 17;
+  const horizontalPadding = (_props$$horizontalPad = props.$horizontalPadding) !== null && _props$$horizontalPad !== void 0 ? _props$$horizontalPad : 30;
   return `${verticalPadding}px ${horizontalPadding}px`;
-}, props => props.width ? `${props.width}px` : '100%', props => props.warning && styled.css(_t2 || (_t2 = _`
+}, props => props.width ? `${props.width}px` : '100%', props => props.$warning && styled.css(_t2 || (_t2 = _`
       ${0}
-    `), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))), props => props.error && styled.css(_t3 || (_t3 = _`
+    `), props.theme.themeProp('background', '#634E01', props.theme.getColor('signal-yellow-400'))), props => props.$error && styled.css(_t3 || (_t3 = _`
       ${0}
-    `), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))), props => props.info && styled.css(_t4 || (_t4 = _`
+    `), props.theme.themeProp('background', '#7F1B1B', props.theme.getColor('red-200'))), props => props.$info && styled.css(_t4 || (_t4 = _`
       background: transparent;
     `)), props => props.align === 'center' ? 'center' : 'left');
-const AlertRender = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
+const AlertRender = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t5 || (_t5 = _`
   display: flex;
   align-items: center;
   word-break: break-word;
@@ -60,13 +67,13 @@ const AlertRender = styled__default["default"].div.attrs(defaultTheme.applyDefau
     padding-left: 5px;
     ${0};
   }
-`), props => props.lineHeight ? `line-height: ${props.lineHeight}px;` : null, props => props.fontSize ? `font-size: ${props.fontSize}px;` : null, props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.lineClamp ? styled.css(_t6 || (_t6 = _`
+`), props => props.lineHeight ? `line-height: ${props.lineHeight}px;` : null, props => props.fontSize ? `font-size: ${props.fontSize}px;` : null, props => props.theme.themeProp('color', props.theme.getColor('white'), props.theme.getColor('gray-700')), props => props.$lineClamp ? styled.css(_t6 || (_t6 = _`
             display: -webkit-box;
             -webkit-line-clamp: ${0};
             -webkit-box-orient: vertical;
             overflow: hidden;
             text-overflow: ellipsis;
-          `), props.lineClamp) : null);
+          `), props.$lineClamp) : null);
 
 exports.Alert = Alert;
 exports.AlertRender = AlertRender;

package/cjs/components/data/Badge/Badge.js

@@ -37,26 +37,26 @@ const Badge = index["default"].forwardRef(function Badge(_ref, forwardedRef) {
   }
   return index["default"].createElement(Badge_styled.Badge, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef,
-    elevated: elevated,
-    hasChildren: Boolean(children)
+    $elevated: elevated,
+    $hasChildren: Boolean(children)
   }, props), children && index["default"].createElement(Badge_styled.BadgeChildrenContainer, null, children), (badgeIcon || badgeContent) && index["default"].createElement(Badge_styled.BadgeLabel, {
-    backgroundColors: backgroundColors,
-    colors: colors,
-    elevated: elevated,
+    $backgroundColors: backgroundColors,
+    $colors: colors,
+    $elevated: elevated,
     fontSize: fontSize,
     fontWeight: fontWeight,
-    lineHeight: lineHeight,
-    active: active,
-    error: error,
-    warning: warning,
-    verticalPadding: verticalPadding,
-    horizontalPadding: horizontalPadding,
+    $lineHeight: lineHeight,
+    $active: active,
+    $error: error,
+    $warning: warning,
+    $elevatedverticalPadding: verticalPadding,
+    $horizontalPadding: horizontalPadding,
     height: height,
     minHeight: minHeight,
     width: width,
-    minWidth: minWidth
+    $minWidth: minWidth
   }, badgeIcon && index["default"].createElement(Badge_styled.BadgeIcon, {
-    useGutter: !!badgeContent
+    $useGutter: !!badgeContent
   }, badgeIcon), badgeContent));
 });
 Badge.propTypes = process.env.NODE_ENV !== "production" ? {

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

@@ -18,7 +18,12 @@ let _ = t => t,
   _t6,
   _t7,
   _t8;
-const Badge = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Badge = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   align-content: center;
   display: ${0};
   font-family: ${0};
@@ -27,13 +32,17 @@ const Badge = styled__default["default"].span.attrs(defaultTheme.applyDefaultThe
   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__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
+`), props => props.$elevated || !props.$hasChildren ? 'inline-flex' : 'flex', props => props.theme.primaryFontFamily, props => props.$elevated ? 'fit-content' : 'initial');
+const BadgeChildrenContainer = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t2 || (_t2 = _`
   align-self: center;
   height: fit-content;
   margin-right: 8px;
 `));
-const BadgeLabel = styled__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const BadgeLabel = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   border-radius: ${0};
   display: flex;
   align-items: center;
@@ -62,29 +71,29 @@ const BadgeLabel = styled__default["default"].span.attrs(defaultTheme.applyDefau
   ${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 ? styled.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 ? styled.css(_t4 || (_t4 = _`
           width: ${0}px;
-        `), props.width) : null, props => props.minWidth ? styled.css(_t5 || (_t5 = _`
+        `), props.width) : null, props => props.$minWidth ? styled.css(_t5 || (_t5 = _`
           min-width: ${0}px;
-        `), props.minWidth) : null, props => props.minHeight ? styled.css(_t6 || (_t6 = _`
+        `), props.$minWidth) : null, props => props.minHeight ? styled.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 styled.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:
@@ -103,11 +112,11 @@ const BadgeLabel = styled__default["default"].span.attrs(defaultTheme.applyDefau
       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;
@@ -125,30 +134,32 @@ const BadgeLabel = styled__default["default"].span.attrs(defaultTheme.applyDefau
       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__default["default"].span.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const BadgeIcon = styled__default["default"].span.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   display: flex;
   align-items: center;
   margin-right: ${0};
   svg {
     height: 12px;
   }
-`), props => props.useGutter ? '4px' : 0);
+`), props => props.$useGutter ? '4px' : 0);
 
 exports.Badge = Badge;
 exports.BadgeChildrenContainer = BadgeChildrenContainer;

package/cjs/components/data/Popover/Popover.js

@@ -43,6 +43,8 @@ const Popover = index["default"].forwardRef(function Popover(_ref, ref) {
       });
     }));
   };
+  const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key)));
   return index["default"].createElement("div", null, index["default"].createElement(Popover_styled.Popover, _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     content: content,
@@ -78,9 +80,9 @@ const Popover = index["default"].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: index$2["default"].oneOfType([index$2["default"].string, index$2["default"].element]).isRequired,

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

@@ -11,7 +11,12 @@ var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
 let _ = t => t,
   _t;
-const Tab = styled__default["default"].p.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Tab = styled__default["default"].p.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   font-family: ${0};
   font-size: 1rem;
   font-weight: 500;

package/cjs/components/data/Tabs/Tabs.js

@@ -10,12 +10,13 @@ var Tabs_styled = require('./Tabs.styled.js');
 var index$1 = require('../../../_virtual/index.js');
 var Tab = require('../Tab/Tab.js');
 
-const _excluded = ["children", "defaultMinHeight", "customPadding"];
+const _excluded = ["children", "defaultMinHeight", "customPadding", "onTabClick"];
 const Tabs = index["default"].forwardRef(function Tabs(_ref, forwardedRef) {
   let {
       children,
-      defaultMinHeight,
-      customPadding
+      defaultMinHeight = '',
+      customPadding = 0,
+      onTabClick = () => {}
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   const [activeTab, setActiveTab] = index$1.react.exports.useState(0);
@@ -52,20 +53,32 @@ const Tabs = index["default"].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(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, tab), {}, {
+        triggerText: triggerText
+      }));
+    }
+  };
   return index["default"].createElement(Tabs_styled.Tabs, _rollupPluginBabelHelpers["extends"]({
     ref: forwardedRef
   }, props, {
     role: "tablist"
   }), index["default"].createElement(Tabs_styled.TabHeaders, {
-    customPadding: customPadding
+    custompadding: customPadding
   }, tabs.map(tab => index["default"].createElement(Tabs_styled.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))), index["default"].createElement(Tabs_styled.TabHeaderBorder, {
-    customPadding: customPadding
+    custompadding: customPadding
   }), index["default"].createElement(Tabs_styled.TabContent, null, tabs.map(tab => index["default"].createElement("div", {
     ref: tab.key === (activeTab === null || activeTab === void 0 ? void 0 : activeTab.key) ? contentRef : null,
     key: tab.key,
@@ -76,15 +89,12 @@ const Tabs = index["default"].forwardRef(function Tabs(_ref, forwardedRef) {
     }
   }, tab.content))));
 });
-Tabs.defaultProps = {
-  defaultMinHeight: '',
-  customPadding: 0
-};
 Tabs.propTypes = process.env.NODE_ENV !== "production" ? {
   children: index$2["default"].oneOfType([index$2["default"].array, index$2["default"].object]),
   backgroundColor: index$2["default"].string,
   defaultMinHeight: index$2["default"].string,
-  customPadding: index$2["default"].string
+  customPadding: index$2["default"].string,
+  onTabClick: index$2["default"].func
 } : {};
 var Tabs$1 = Tabs;
 

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

@@ -19,16 +19,23 @@ let _ = t => t,
   _t7,
   _t8,
   _t9,
-  _t10,
-  _t11;
-const Tabs = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+  _t0,
+  _t1;
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const Tabs = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   display: block;
   position: relative;
   ${0};
 `), props => props.backgroundColor && styled.css(_t2 || (_t2 = _`
       background-color: ${0};
     `), props.backgroundColor));
-const TabHeaders = styled__default["default"].ul.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const TabHeaders = styled__default["default"].ul.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   display: flex;
   overflow-x: auto;
   overflow-y: hidden;
@@ -38,12 +45,14 @@ const TabHeaders = styled__default["default"].ul.attrs(defaultTheme.applyDefault
   margin: 0;
   ${0};
   ${0};
-`), props => !props.customPadding && styled.css(_t4 || (_t4 = _`
+`), props => !props.custompadding && styled.css(_t4 || (_t4 = _`
       padding: 0;
-    `)), props => props.customPadding && styled.css(_t5 || (_t5 = _`
+    `)), props => props.custompadding && styled.css(_t5 || (_t5 = _`
       padding: 0 ${0};
-    `), props.customPadding));
-const TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
+    `), props.custompadding));
+const TabHeader = styled__default["default"].li.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t6 || (_t6 = _`
   font-family: ${0};
   text-transform: uppercase;
   font-weight: 600;
@@ -60,35 +69,39 @@ const TabHeader = styled__default["default"].li.attrs(defaultTheme.applyDefaultT
   &&:hover:not(:focus) {
     ${0};
   }
-`), props => props.theme.secondaryFontFamily, props => props.active && styled.css(_t7 || (_t7 = _`
+`), props => props.theme.secondaryFontFamily, props => props.$active && styled.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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
+const TabContent = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t8 || (_t8 = _`
   display: block;
 `));
-const TabHeaderBorder = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t9 || (_t9 = _`
+const TabHeaderBorder = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.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 && styled.css(_t10 || (_t10 = _`
+`), props => props.theme.themeProp('border-color', props.theme.getColor('gray-600'), '#F0F2F5'), props => !props.custompadding && styled.css(_t0 || (_t0 = _`
       margin: -2px 0;
-    `)), props => props.customPadding && styled.css(_t11 || (_t11 = _`
+    `)), props => props.custompadding && styled.css(_t1 || (_t1 = _`
       margin: -2px ${0};
-    `), props.customPadding));
+    `), props.custompadding));
 
 exports.TabContent = TabContent;
 exports.TabHeader = TabHeader;

package/cjs/components/data/Tooltip/Tooltip.js

@@ -19,6 +19,8 @@ const Tooltip = index["default"].forwardRef(function Tooltip(_ref, ref) {
       children
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  const eventHandlerProps = ['onClick', 'onChange', 'onSubmit'];
+  const filteredProps = Object.fromEntries(Object.entries(props).filter(([key]) => !eventHandlerProps.includes(key)));
   return index["default"].createElement("div", null, index["default"].createElement(Tooltip_styled.Tooltip, _rollupPluginBabelHelpers["extends"]({
     ref: ref,
     content: content,
@@ -28,7 +30,7 @@ const Tooltip = index["default"].forwardRef(function Tooltip(_ref, ref) {
     trigger: trigger,
     visible: visible,
     animation: 'shift-away-subtle'
-  }, props), children));
+  }, filteredProps), children));
 });
 Tooltip.defaultProps = {
   content: 'Tooltip',

package/cjs/components/data/VerificationStatusIcon/VerificationStatusIcon.js

@@ -17,15 +17,15 @@ const VerificationStatusIcon = index["default"].forwardRef(function Verification
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return index["default"].createElement(VerificationStatusIcon_styled.VerificationIconWrapper, {
-    background: background
+    $background: background
   }, index["default"].createElement(VerificationStatusIcon_styled.VerificationStatusIcon, _rollupPluginBabelHelpers["extends"]({
-    iconHeight: iconHeight,
-    background: background,
+    $iconHeight: iconHeight,
+    $background: background,
     ref: forwardedRef
   }, props), index["default"].createElement(verification.ReactComponent, null), index["default"].createElement(VerificationStatusIcon_styled.VerificationStatusColor, {
-    iconHeight: iconHeight,
-    status: status,
-    background: background
+    $iconHeight: iconHeight,
+    $status: status,
+    $background: background
   })));
 });
 VerificationStatusIcon.propTypes = process.env.NODE_ENV !== "production" ? {

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

@@ -14,16 +14,23 @@ let _ = t => t,
   _t2,
   _t3,
   _t4;
-const VerificationIconWrapper = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
+const shouldForwardProp = prop => {
+  return prop !== 'theme' && !prop.startsWith('$');
+};
+const VerificationIconWrapper = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t || (_t = _`
   ${0};
-`), props => props.background && styled.css(_t2 || (_t2 = _`
+`), props => props.$background && styled.css(_t2 || (_t2 = _`
     background-color: #000 !important;
     width: fit-content;
     padding: 6px 14px 6px 9px;
     border-radius: 15px;
 }
     `)));
-const VerificationStatusIcon = styled__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
+const VerificationStatusIcon = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t3 || (_t3 = _`
   display: flex;
   position: relative;
   font: normal normal normal 12px/16px Roboto;
@@ -34,11 +41,13 @@ const VerificationStatusIcon = styled__default["default"].div.attrs(defaultTheme
   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__default["default"].div.attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
+const VerificationStatusColor = styled__default["default"].div.withConfig({
+  shouldForwardProp
+}).attrs(defaultTheme.applyDefaultTheme)(_t4 || (_t4 = _`
   position: absolute;
   bottom: 0;
   left: ${0}px;
@@ -47,27 +56,27 @@ const VerificationStatusColor = styled__default["default"].div.attrs(defaultThem
   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/cjs/components/inputs/ActionButton/ActionButton.js

@@ -7,14 +7,15 @@ var index = require('../../../node_modules/react/index.js');
 var index$1 = require('../../../node_modules/prop-types/index.js');
 var ActionButton_styled = require('./ActionButton.styled.js');
 
-const _excluded = ["icon", "disabled", "active", "onClick", "actionWidthHeight"];
+const _excluded = ["icon", "disabled", "active", "onClick", "actionWidthHeight", "backgroundColors"];
 const ActionButton = index["default"].forwardRef(function ActionButton(_ref, forwardedRef) {
   let {
       icon,
       disabled,
       active,
       onClick,
-      actionWidthHeight
+      actionWidthHeight,
+      backgroundColors
     } = _ref,
     props = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   return index["default"].createElement(ActionButton_styled.ActionButton, _rollupPluginBabelHelpers["extends"]({
@@ -22,7 +23,8 @@ const ActionButton = index["default"].forwardRef(function ActionButton(_ref, for
     disabled: disabled,
     active: active,
     onClick: onClick,
-    actionWidthHeight: actionWidthHeight
+    actionWidthHeight: actionWidthHeight,
+    backgroundColors: backgroundColors
   }, props), icon);
 });
 ActionButton.propTypes = process.env.NODE_ENV !== "production" ? {