@taikai/rocket-kit 3.0.0-beta.1 → 3.0.0-beta.2

package/dist/molecules/table/index.d.ts

@@ -19,6 +19,9 @@ export interface TableProps<CellDataType> {
     dataTestId?: string;
     menuDataTestId?: string;
     actionMenuTestId?: string;
+    loading?: boolean;
+    loadingColumns?: number;
+    loadingRows?: number;
     showEmpty?: boolean;
     emptyValue?: string;
     className?: string;

package/dist/molecules/table/stories/table.stories.d.ts

@@ -11,6 +11,21 @@ declare const _default: {
                 type: string;
             };
         };
+        loading: {
+            control: {
+                type: string;
+            };
+        };
+        loadingColumns: {
+            control: {
+                type: string;
+            };
+        };
+        loadingRows: {
+            control: {
+                type: string;
+            };
+        };
     };
 };
 export default _default;
@@ -19,6 +34,9 @@ export declare const TableComponent: {
     storyName: string;
     args: {
         border: boolean;
+        loading: boolean;
+        loadingColumns: number;
+        loadingRows: number;
     };
 };
 export declare const TableEmptyComponent: {

package/dist/molecules/table/styles.d.ts

@@ -1,7 +1,9 @@
-interface BorderProps {
+interface TableProps {
     border?: boolean;
+    loadingState?: boolean;
 }
 export declare const TableWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const OverflowWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Table: import("styled-components").StyledComponent<"table", any, BorderProps, never>;
+export declare const Table: import("styled-components").StyledComponent<"table", any, TableProps, never>;
+export declare const SkeletonCell: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/organisms/loading-state/index.d.ts

@@ -1,11 +1,8 @@
 /// <reference types="react" />
 export interface LoadingStateProps {
-    type: 'text' | 'card' | 'table' | 'value';
+    type: 'text' | 'card' | 'value';
     lines?: number;
     cardsNumber?: number;
-    header?: boolean;
-    columnsNumber?: number;
-    rowsNumber?: number;
     center?: boolean;
 }
 declare const LoadingState: (props: LoadingStateProps) => JSX.Element;

package/dist/organisms/loading-state/stories/loading-state.stories.d.ts

@@ -20,9 +20,6 @@ export declare const LoadingStateComponent: {
         type: string;
         lines: number;
         cardsNumber: number;
-        header: boolean;
-        columnsNumber: number;
-        rowsNumber: number;
         center: boolean;
     };
 };

package/dist/organisms/loading-state/styles.d.ts

@@ -4,6 +4,5 @@ interface LoadingStateProps {
     center?: boolean;
 }
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, LoadingStateProps, never>;
-export declare const Table: import("styled-components").StyledComponent<"div", any, LoadingStateProps, never>;
 export declare const Grid: import("styled-components").StyledComponent<"div", any, LoadingStateProps, never>;
 export {};

package/dist/rocket-kit.cjs.development.js

@@ -267,7 +267,7 @@ const useColor = value => {
 const ButtonWrapper = /*#__PURE__*/_styled__default.button.withConfig({
   displayName: "styles__ButtonWrapper",
   componentId: "baestp-0"
-})(["--bg:", ";--txt:", ";--hover:", ";margin:0;border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";text-transform:uppercase;white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}&:disabled{cursor:inherit;opacity:0.5;&:hover{pointer-events:none;}}> *:not(:last-child){margin-left:", ";margin-right:", ";}.spinner{border-top-color:", ";}span{position:relative;font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
+})(["--bg:", ";--txt:", ";--hover:", ";margin:0;border-width:", ";border-style:solid;border-color:var(--bg);border-radius:", ";background-color:", ";width:min-content;min-width:", ";height:", ";display:flex;justify-content:center;align-items:center;padding:", ";text-transform:uppercase;white-space:nowrap;text-decoration:none;transition-duration:", ";cursor:pointer;&:hover{border-color:", ";background-color:", ";span{color:", ";}svg{fill:", ";}}&:disabled{cursor:inherit;opacity:0.5;&:hover{background-color:", ";pointer-events:none;}}> *:not(:last-child){margin-left:", ";margin-right:", ";}.spinner{border-top-color:", ";}span{position:relative;font-size:", ";font-weight:", ";letter-spacing:", ";line-height:", ";color:", ";pointer-events:none;transition-duration:", ";order:", ";}svg{order:", ";width:", ";height:", ";fill:", ";transition:", ";}"], props => {
   var _props$color;
 
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
@@ -279,7 +279,7 @@ const ButtonWrapper = /*#__PURE__*/_styled__default.button.withConfig({
   var _props$color2;
 
   return props.color === 'white' ? colors.grey100 : props.color === 'black' ? colors.grey900 : useColor((_props$color2 = props.color) != null ? _props$color2 : 'black').hover;
-}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? polished.rem('80px') : polished.rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/polished.rem(typography.defaultSize), typography.medium, typography.letterSpacing, /*#__PURE__*/polished.rem(typography.defaultSize), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
+}, props => props.variant === 'outline' ? button.borderWidth : 0, props => props.variant === 'text' ? 0 : props.rounded ? '999px' : button.borderRadius, props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.value ? polished.rem('80px') : polished.rem('42px'), button.height, props => props.value ? `0 ${button.padding}` : 0, misc.transitionDuration, props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--hover)' : 'transparent', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? '' : 'var(--hover)', props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', props => props.iconPosition === 'right' ? button.iconSpacing : 0, props => props.iconPosition === 'left' ? button.iconSpacing : 0, props => props.variant === 'solid' ? '' : 'var(--button)', /*#__PURE__*/polished.rem(typography.defaultSize), typography.medium, typography.letterSpacing, /*#__PURE__*/polished.rem(typography.defaultSize), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration, props => props.iconPosition === 'left' ? 2 : 1, props => props.iconPosition === 'left' ? 1 : 2, button.iconSize, button.iconSize, props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)', misc.transitionDuration);
 
 const Button = props => {
   const {
@@ -458,7 +458,7 @@ const ButtonLink = props => {
     blank = false,
     rel = undefined,
     value = '',
-    iconPosition = 'right',
+    iconPosition = 'left',
     icon = '',
     dataTestId = '',
     eventId = '',
@@ -514,7 +514,7 @@ const CheckboxLabel = /*#__PURE__*/_styled__default.span.withConfig({
 const CheckboxInput = /*#__PURE__*/_styled__default.input.withConfig({
   displayName: "styles__CheckboxInput",
   componentId: "w5t014-2"
-})(["position:absolute;left:0;opacity:0;cursor:pointer;&:checked:not(:disabled) ~ span{background-color:", ";border-color:", ";&:after{display:block;}}&:checked:disabled ~ span{border-color:transparent;background-color:", ";color:", ";&:after{display:block;}}&:not(:checked):disabled ~ span{border-color:", ";background-color:", ";}&:hover:not(:disabled){border-color:", ";&:checked ~ span{border-color:", ";}}"], props => props.error ? red : green, props => props.error ? darkRed : darkGreen, lightGrey$1, grey$1, lightGrey$1, light$1, props => props.error ? darkRed : darkGreen, props => props.error ? darkRed : darkGreen);
+})(["position:absolute;left:0;opacity:0;cursor:pointer;&:checked:not(:disabled)[aria-checked='true'] ~ span{background-color:", ";border-color:", ";&:after{display:block;}}&:checked:disabled[aria-checked='true'] ~ span{border-color:transparent;background-color:", ";color:", ";&:after{display:block;}}&:not(:checked):disabled ~ span{border-color:", ";background-color:", ";}&:hover:not(:disabled){border-color:", ";&:checked ~ span{border-color:", ";}}"], props => props.error ? red : green, props => props.error ? darkRed : darkGreen, lightGrey$1, grey$1, lightGrey$1, light$1, props => props.error ? darkRed : darkGreen, props => props.error ? darkRed : darkGreen);
 const Checkmark = /*#__PURE__*/_styled__default.span.withConfig({
   displayName: "styles__Checkmark",
   componentId: "w5t014-3"
@@ -1048,7 +1048,7 @@ const Spinner = props => {
 const TagWrapper = /*#__PURE__*/_styled__default.span.withConfig({
   displayName: "styles__TagWrapper",
   componentId: "sc-1ghratr-0"
-})(["--bg:", ";--txt:", ";display:inline-block;border:", " solid var(--bg);border-radius:", ";background-color:", ";max-width:", ";padding:", " ", ";font-size:", ";font-weight:", ";letter-spacing:", ";line-height:1;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-transform:uppercase;"], props => {
+})(["--bg:", ";--txt:", ";display:inline-block;border:", " solid var(--bg);border-radius:", ";background-color:", ";padding:", " ", ";font-size:", ";font-weight:", ";text-transform:uppercase;letter-spacing:", ";line-height:1;color:", ";white-space:nowrap;"], props => {
   var _props$color;
 
   return useColor((_props$color = props.color) != null ? _props$color : 'black').color;
@@ -1056,7 +1056,7 @@ const TagWrapper = /*#__PURE__*/_styled__default.span.withConfig({
   var _props$txtColor;
 
   return useColor((_props$txtColor = props.txtColor) != null ? _props$txtColor : 'black').color;
-}, /*#__PURE__*/polished.rem('2px'), /*#__PURE__*/polished.rem('4px'), props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', /*#__PURE__*/polished.rem('150px'), /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('8px'), /*#__PURE__*/polished.rem('12px'), typography.medium, /*#__PURE__*/polished.rem('1px'));
+}, /*#__PURE__*/polished.rem('2px'), /*#__PURE__*/polished.rem('4px'), props => props.variant === 'solid' ? 'var(--bg)' : 'transparent', /*#__PURE__*/polished.rem('3px'), /*#__PURE__*/polished.rem('8px'), /*#__PURE__*/polished.rem('12px'), typography.medium, /*#__PURE__*/polished.rem('1px'), props => props.variant === 'solid' ? 'var(--txt)' : 'var(--bg)');
 
 const Tag = props => {
   const {
@@ -2660,17 +2660,42 @@ const OverflowWrapper = /*#__PURE__*/_styled__default.div.withConfig({
 const Table = /*#__PURE__*/_styled__default.table.withConfig({
   displayName: "styles__Table",
   componentId: "vmoy3z-2"
-})(["width:100%;border-width:", ";border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.kai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:0.85rem;&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&:hover{background-color:", ";td.menu{button{opacity:1;}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;}&.kai{svg{float:right;width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:0.3s;}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";align-items:center;> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.kai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], props => props.border ? '1px' : '0', grey$f, /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), device.s, /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('15px'), device.s, /*#__PURE__*/polished.rem('1px'), /*#__PURE__*/polished.rem('-1px'), /*#__PURE__*/polished.rem('1px'), device.s, bold$3, grey$f, lightGrey$d, device.s, /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('100px'), /*#__PURE__*/polished.rem('30px'), /*#__PURE__*/polished.rem('30px'), normal$7, grey$f, /*#__PURE__*/polished.rem('15px'), bold$3, /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('10px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('36px'), /*#__PURE__*/polished.rem('-170px'), device.s, /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('100px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('40px'));
+})(["width:100%;border-width:0;border-style:solid;border-color:", ";border-radius:", ";border-spacing:0;white-space:nowrap;@media ", "{border-width:", ";}th,td{height:", ";padding:0 ", ";&.center{text-align:center;> div{justify-content:center;}}&.right{text-align:right;> div{justify-content:flex-end;}}&.thin{@media ", "{max-width:min-content;}}&.kai{text-align:right;> div{justify-content:flex-end;}}&.avatar > div{display:flex;align-items:center;.avatar-img{margin-right:", ";}}}th{font-size:0.85rem;&:first-child{border-top-left-radius:", ";}&:last-child{border-top-right-radius:", ";}}tr{border:", " solid ", ";border-radius:", ";position:relative;&:not(:last-child){margin-bottom:", ";}@media ", "{border:0;}}thead{border:none;clip:rect(0 0 0 0);height:", ";margin:", ";overflow:hidden;padding:0;position:absolute;width:", ";@media ", "{display:contents;font-weight:", ";color:", ";text-transform:uppercase;text-align:left;}}tbody{tr{display:block;transition-duration:0.3s;&:hover{background-color:", ";td.menu{button{opacity:1;}}}@media ", "{display:table-row;}}td{border-top:", " solid ", ";height:inherit;min-height:", ";padding:", ";display:flex;justify-content:flex-end;align-items:center;> div{margin-left:", ";height:100%;display:flex;justify-content:flex-end;align-items:center;flex-wrap:nowrap;text-align:right;> span{display:none;&:first-child,&:last-child{display:inherit;}}}img{min-width:", ";min-height:", ";}a{display:flex;align-items:center;color:", ";text-decoration-color:", ";}&:first-child{border:0;}&:before{position:absolute;left:", ";content:attr(data-label);font-weight:", ";text-transform:capitalize;", "}&.kai{svg{float:right;width:auto;min-width:", ";max-height:", ";}}.avatar-img{display:none;}.tag{margin:0;&:not(:first-child){display:none;}}&.menu{padding:0 ", " 0 0;button{margin-top:", ";transition:0.3s;}ul{top:", ";margin-left:", ";}}@media ", "{display:table-cell;height:", ";padding:0 ", ";> div{position:relative;margin-left:0;display:flex-start;justify-content:flex-start;text-align:left;> span{display:inherit;}}&:first-child{border-top:", " solid ", ";}&:before{content:'';}&.kai{max-width:", ";}.avatar-img{display:inherit;}.tag{&:not(:first-child){display:inherit;}&:not(:last-child){margin-right:", ";}}&.menu{width:", ";button{opacity:0;}}}}}"], grey$f, /*#__PURE__*/polished.rem('6px'), device.s, props => props.border ? polished.rem('1px') : '0', /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), device.s, /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('6px'), /*#__PURE__*/polished.rem('15px'), device.s, /*#__PURE__*/polished.rem('1px'), /*#__PURE__*/polished.rem('-1px'), /*#__PURE__*/polished.rem('1px'), device.s, bold$3, grey$f, props => props.loadingState ? 'transparent' : lightGrey$d, device.s, /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('100px'), /*#__PURE__*/polished.rem('30px'), /*#__PURE__*/polished.rem('30px'), normal$7, grey$f, /*#__PURE__*/polished.rem('15px'), bold$3, props => props.loadingState && _styled.css`
+            width: ${polished.rem('75px')};
+            height: ${polished.rem('15px')};
+            background: #f6f7f8;
+            background-image: -webkit-linear-gradient(
+              left,
+              #f6f7f8 0%,
+              #edeef1 20%,
+              #f6f7f8 40%,
+              #f6f7f8 100%
+            );
+            background-repeat: no-repeat;
+            background-size: ${polished.rem('800px')} 100%;
+            animation-fill-mode: forwards;
+            animation-name: placeholderSkeleton;
+            animation-timing-function: linear;
+            animation-iteration-count: infinite;
+            animation-duration: 1.5s;
+          `, /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('20px'), /*#__PURE__*/polished.rem('10px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('36px'), /*#__PURE__*/polished.rem('-170px'), device.s, /*#__PURE__*/polished.rem('50px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('1px'), grey$f, /*#__PURE__*/polished.rem('100px'), /*#__PURE__*/polished.rem('5px'), /*#__PURE__*/polished.rem('40px'));
+const SkeletonCell = /*#__PURE__*/_styled__default.div.withConfig({
+  displayName: "styles__SkeletonCell",
+  componentId: "vmoy3z-3"
+})(["@keyframes placeholderSkeleton{0%{background-position:", " 0;}100%{background-position:", " 0;}}width:100%;height:", " !important;background:#f6f7f8;background-image:-webkit-linear-gradient( left,#f6f7f8 0%,#edeef1 20%,#f6f7f8 40%,#f6f7f8 100% );background-repeat:no-repeat;background-size:", " 100%;animation-fill-mode:forwards;animation-name:placeholderSkeleton;animation-timing-function:linear;animation-iteration-count:infinite;animation-duration:1.5s;"], /*#__PURE__*/polished.rem('-800px'), /*#__PURE__*/polished.rem('800px'), /*#__PURE__*/polished.rem('15px'), /*#__PURE__*/polished.rem('800px'));
 
 const Table$1 = props => {
   const {
-    border = false,
+    border = true,
     options,
     values = [],
     actions = [],
     dataTestId = 'table-test-id',
     menuDataTestId = 'table-action-menu',
     actionMenuTestId = 'icon-button',
+    loading = false,
+    loadingColumns = 4,
+    loadingRows = 20,
     showEmpty = false,
     emptyValue = 'No Data',
     className = 'table',
@@ -2690,6 +2715,9 @@ const Table$1 = props => {
   const hasActionMenu = actions.length > 0;
   const validValues = values.filter(hasValue);
   const hasValues = Array.isArray(values) && values.length > 0;
+  const headSkeleton = /*#__PURE__*/React__default.createElement("th", null, /*#__PURE__*/React__default.createElement(SkeletonCell, null));
+  const cellSkeleton = /*#__PURE__*/React__default.createElement("td", null, /*#__PURE__*/React__default.createElement(SkeletonCell, null));
+  const columnsSkeleton = columns.length > 0 ? columns.length : loadingColumns;
 
   if (showEmpty && !hasValues) {
     const columnHeaders = columns.map(column => column.value);
@@ -2704,8 +2732,11 @@ const Table$1 = props => {
     border: border,
     "data-testid": dataTestId,
     className: className,
-    style: style
-  }, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, columns.map(({
+    style: style,
+    loadingState: loading
+  }, /*#__PURE__*/React__default.createElement("thead", null, /*#__PURE__*/React__default.createElement("tr", null, loading && !columns ? Array.from({
+    length: loadingColumns
+  }, () => headSkeleton) : columns.map(({
     id = '',
     className = '',
     value = '',
@@ -2714,7 +2745,11 @@ const Table$1 = props => {
     key: id,
     className: className,
     "data-testid": colDataTestId ? `th-${colDataTestId}` : null
-  }, value)), hasActionMenu && /*#__PURE__*/React__default.createElement("th", null))), /*#__PURE__*/React__default.createElement("tbody", null, validValues.map((row, index) => /*#__PURE__*/React__default.createElement("tr", {
+  }, value)), !loading && hasActionMenu && /*#__PURE__*/React__default.createElement("th", null))), /*#__PURE__*/React__default.createElement("tbody", null, loading ? Array.from({
+    length: loadingRows
+  }, () => /*#__PURE__*/React__default.createElement("tr", null, Array.from({
+    length: columnsSkeleton
+  }, () => cellSkeleton))) : validValues.map((row, index) => /*#__PURE__*/React__default.createElement("tr", {
     key: row.id,
     "data-testid": `row-${dataTestId}`
   }, columns.map(({
@@ -5790,7 +5825,7 @@ const ModalContainer = /*#__PURE__*/_styled__default.div.withConfig({
 const ModalHeader = /*#__PURE__*/_styled__default.div.withConfig({
   displayName: "styles__ModalHeader",
   componentId: "sc-16r6vcc-3"
-})(["display:flex;h2{margin:0 0 ", " 0;font-size:2rem;font-weight:", ";}button{display:none;position:absolute;top:0;right:0;margin:", " ", " 0 0;background-color:", ";z-index:1;&:hover{background-color:", ";}@media ", "{display:inherit;}}"], /*#__PURE__*/polished.rem('30px'), bold$9, /*#__PURE__*/polished.rem('-18px'), /*#__PURE__*/polished.rem('-18px'), light$j, light$j, device.s);
+})(["display:flex;h2{margin:0 0 ", " 0;font-size:2rem;font-weight:", ";}button{display:none;position:absolute;top:0;right:0;margin:", " ", " 0 0;border:", " solid ", ";min-width:", ";height:", ";z-index:1;@media ", "{display:inherit;}}"], /*#__PURE__*/polished.rem('30px'), bold$9, /*#__PURE__*/polished.rem('-14px'), /*#__PURE__*/polished.rem('-14px'), /*#__PURE__*/polished.rem('2px'), colors.grey200, /*#__PURE__*/polished.rem('28px'), /*#__PURE__*/polished.rem('28px'), device.s);
 
 const Modal = props => {
   const {
@@ -5829,11 +5864,12 @@ const Modal = props => {
     zIndex: zIndex,
     className: "modal"
   }, /*#__PURE__*/React__default.createElement(ModalHeader, null, title && /*#__PURE__*/React__default.createElement("h2", null, title), /*#__PURE__*/React__default.createElement(Button, {
-    variant: "outline",
-    color: "grey",
+    color: "white",
+    txtColor: "grey200",
     icon: "cross",
     ariaLabel: "Close",
-    action: hide
+    action: hide,
+    rounded: true
   })), children, footer && /*#__PURE__*/React__default.createElement(ModalFooter, {
     closeAction: hide,
     closeValue: closeValue
@@ -6018,25 +6054,6 @@ const Wrapper$h = _styled__default.div`
     }
   }
 `;
-const Table$3 = _styled__default.div`
-  --columns: ${props => props.columnsNumber};
-
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-template-columns: repeat(var(--columns), 1fr);
-  grid-gap: ${/*#__PURE__*/polished.rem('15px')};
-  padding: ${/*#__PURE__*/polished.rem('15px')};
-
-  .header {
-    width: 50%;
-    height: ${/*#__PURE__*/polished.rem('15px')};
-  }
-
-  .cell {
-    width: 100%;
-    height: ${/*#__PURE__*/polished.rem('15px')};
-  }
-`;
 const Grid = _styled__default.div`
   display: grid;
   grid-template-columns: repeat(auto-fill, ${/*#__PURE__*/polished.rem('300px')});
@@ -6049,15 +6066,10 @@ const LoadingState = props => {
     type = 'text',
     lines = 3,
     cardsNumber = 4,
-    header = true,
-    columnsNumber = 4,
-    rowsNumber = 3,
     center = true
   } = props;
   let paragraphs = [];
   let cards = [];
-  let tableHeader = [];
-  let columns = [];
   let loadingType;
 
   for (let i = 0; i < lines; i++) {
@@ -6088,20 +6100,6 @@ const LoadingState = props => {
     })));
   }
 
-  for (let i = 0; i < columnsNumber; i++) {
-    tableHeader.push( /*#__PURE__*/React__default.createElement("div", {
-      key: i,
-      className: "header"
-    }));
-  }
-
-  for (let i = 0; i < columnsNumber * rowsNumber; i++) {
-    columns.push( /*#__PURE__*/React__default.createElement("div", {
-      key: i,
-      className: "cell"
-    }));
-  }
-
   switch (type) {
     case 'text':
       loadingType = /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
@@ -6117,13 +6115,6 @@ const LoadingState = props => {
       }, cards);
       break;
 
-    case 'table':
-      loadingType = /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(Table$3, {
-        className: "table",
-        columnsNumber: columnsNumber
-      }, header && tableHeader, columns));
-      break;
-
     case 'value':
       loadingType = /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement("div", {
         className: "value"