@mw-kit/mw-ui 1.7.64 → 1.7.65

package/dist/components/Tabs/interfaces.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SpacingOrZero, Spacings } from '../../interfaces';
 export declare type TabProps = {
     /**
      * Define the tab label.
@@ -9,7 +10,7 @@ export declare type TabProps = {
      */
     component?: JSX.Element;
 };
-export interface TabsProps {
+export interface TabsProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Array with available tabs.
      */
@@ -38,6 +39,10 @@ export interface TabsProps {
      * border bottom style
      */
     delimiter?: 'blue' | 'grey' | 'none';
+    /**
+     * container spacing
+     */
+    spacing?: SpacingOrZero | Spacings;
 }
 export interface StyledTabsProps {
     /**

package/dist/components/Tabs/styles.d.ts

@@ -3,6 +3,7 @@ export declare const Container: import("styled-components").StyledComponent<"div
 declare type TabsContainerProps = {
     $internal?: TabsProps['internal'];
     $delimiter?: TabsProps['delimiter'];
+    $spacing?: TabsProps['spacing'];
 };
 export declare const Tabs: import("styled-components").StyledComponent<"ul", import("styled-components").DefaultTheme, TabsContainerProps, never>;
 export declare const Tab: import("styled-components").StyledComponent<"li", import("styled-components").DefaultTheme, StyledTabsProps, never>;

package/dist/index.js

@@ -18867,16 +18867,31 @@ var ProgressBar = function ProgressBar(props) {
   return React__default.createElement(Container$m, null, React__default.createElement(Progress, Object.assign({}, props), React__default.createElement("div", null)), React__default.createElement("span", null, " ", props.value || '0', "%"));
 };
 
-var _templateObject$13, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$q, _templateObject7$q;
+var _templateObject$13, _templateObject2$P, _templateObject3$I, _templateObject4$v, _templateObject5$s, _templateObject6$q, _templateObject7$q, _templateObject8$m;
 var Container$n = styled__default.div(_templateObject$13 || (_templateObject$13 = _taggedTemplateLiteralLoose(["\n  display: block;\n"])));
 var delimiters = {
   blue: ['blue'],
   grey: ['warningGray']
 };
-var Tabs = styled__default.ul(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  padding: 0;\n  margin: 0;\n  width: 100%;\n\n  ", ";\n\n  gap: ", ";\n"])), function (_ref) {
-  var theme = _ref.theme,
-      internal = _ref.$internal,
-      delimiter = _ref.$delimiter;
+var Tabs = styled__default.ul(_templateObject2$P || (_templateObject2$P = _taggedTemplateLiteralLoose(["\n  user-select: none;\n  list-style: none;\n  display: inline-flex;\n  width: 100%;\n\n  ", "\n\n  ", ";\n\n  gap: ", ";\n"])), function (_ref) {
+  var spacing = _ref.$spacing;
+
+  var _getSpacings$split = getSpacings(spacing || {}, {
+    top: '0',
+    right: '0',
+    bottom: 's4',
+    left: '0'
+  }).split(' '),
+      top = _getSpacings$split[0],
+      right = _getSpacings$split[1],
+      bottom = _getSpacings$split[2],
+      left = _getSpacings$split[3];
+
+  return styled.css(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n      margin: ", " 0 ", " 0;\n      padding: 0 ", " 0 ", ";\n    "])), top, bottom, right, left);
+}, function (_ref2) {
+  var theme = _ref2.theme,
+      internal = _ref2.$internal,
+      delimiter = _ref2.$delimiter;
 
   var border = function () {
     if (delimiter === 'none') {
@@ -18886,21 +18901,21 @@ var Tabs = styled__default.ul(_templateObject2$P || (_templateObject2$P = _tagge
     return internal ? "1px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'grey']) : "2px solid " + theme.getColor.apply(theme, delimiters[delimiter || 'blue']);
   }();
 
-  return styled.css(_templateObject3$I || (_templateObject3$I = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      internal = _ref2.$internal;
-  return internal ? theme.spacings.s6 : 0;
-});
-var Tab = styled__default.li(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref3) {
+  return styled.css(_templateObject4$v || (_templateObject4$v = _taggedTemplateLiteralLoose(["\n      border-bottom: ", ";\n\n      + div {\n        border: 1px solid ", ";\n        border-top-width: 0px;\n        border-radius: 0px 0px 2px 2px;\n        padding: ", ";\n      }\n    "])), border, theme.getColor.apply(theme, delimiters.grey), theme.spacings.s3);
+}, function (_ref3) {
   var theme = _ref3.theme,
-      active = _ref3.$active,
       internal = _ref3.$internal;
-  return styled.css(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: ", ";\n    gap: ", ";\n\n    ", "\n\n    span {\n      color: ", ";\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s3, theme.spacings.s3, internal ? styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          > span {\n            ", "\n            line-height: 17px;\n          }\n        "])), function (_ref4) {
-    var theme = _ref4.theme;
-    return theme.useTypography('h4');
-  }) : styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          > span {\n            ", "\n            line-height: 19px;\n          }\n        "])), theme.getColor('black', 15), function (_ref5) {
+  return internal ? theme.spacings.s6 : 0;
+});
+var Tab = styled__default.li(_templateObject5$s || (_templateObject5$s = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  ", "\n"])), function (_ref4) {
+  var theme = _ref4.theme,
+      active = _ref4.$active,
+      internal = _ref4.$internal;
+  return styled.css(_templateObject6$q || (_templateObject6$q = _taggedTemplateLiteralLoose(["\n    background-color: ", ";\n    padding: ", ";\n    gap: ", ";\n\n    ", "\n\n    span {\n      color: ", ";\n    }\n  "])), theme.colors[active ? 'blue' : 'white'], theme.spacings.s3, theme.spacings.s3, internal ? styled.css(_templateObject7$q || (_templateObject7$q = _taggedTemplateLiteralLoose(["\n          border-radius: 4px 4px 0 0;\n\n          > span {\n            ", "\n            line-height: 17px;\n          }\n        "])), function (_ref5) {
     var theme = _ref5.theme;
+    return theme.useTypography('h4');
+  }) : styled.css(_templateObject8$m || (_templateObject8$m = _taggedTemplateLiteralLoose(["\n          box-shadow: 0px 3px 6px ", ";\n\n          > span {\n            ", "\n            line-height: 19px;\n          }\n        "])), theme.getColor('black', 15), function (_ref6) {
+    var theme = _ref6.theme;
     return theme.useTypography('h2');
   }), theme.colors[active ? 'white' : 'darkBlue']);
 });
@@ -18999,9 +19014,11 @@ var Tabs$1 = function Tabs$1(props) {
     });
   };
 
-  return React__default.createElement(Container$n, null, React__default.createElement(Tabs, {
+  var divProps = filterObject(props, ['options', 'activeState', 'internal', 'maxTabs', 'onMaxTabsExceeded', 'alwaysOpen', 'delimiter', 'spacing']);
+  return React__default.createElement(Container$n, Object.assign({}, divProps), React__default.createElement(Tabs, {
     "$internal": props.internal,
-    "$delimiter": props.delimiter
+    "$delimiter": props.delimiter,
+    "$spacing": props.spacing
   }, options.reduce(function (elements, tab, index) {
     if (status[index] === 'closed') return elements;
     return [].concat(elements, [React__default.createElement(Tab, {