@commercetools-uikit/data-table 17.1.0 → 18.1.0

package/dist/commercetools-uikit-data-table.cjs.prod.js

@@ -52,8 +52,8 @@ var _someInstanceProperty__default = /*#__PURE__*/_interopDefault(_someInstanceP
 var _concatInstanceProperty__default = /*#__PURE__*/_interopDefault(_concatInstanceProperty);
 
 const getPaddingStyle = props => {
-  if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForTableCellAsCondensed, ";" + ("" ), "" );
-  return /*#__PURE__*/react.css("padding:", designSystem.designTokens.paddingForTableCell, ";" + ("" ), "" );
+  if (props.isCondensed) return /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing20, " ", designSystem.designTokens.spacing40, ";" + ("" ), "" );
+  return /*#__PURE__*/react.css("padding:", designSystem.designTokens.spacing30, " ", designSystem.designTokens.spacing40, ";" + ("" ), "" );
 };
 var _ref8 = {
   name: "9nkbgg",
@@ -140,7 +140,7 @@ var _ref2 = {
 } ;
 const BaseCell = /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e2"
-} )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", props => props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.designTokens.colorNeutral95, ";") : 'none', ";font-size:", designSystem.designTokens.fontSizeForTable, ";", props => props.shouldClipContent ? _ref2 : '', " ", props => props.shouldIgnoreRowClick ? _ref$1 : '', ";" + ("" ));
+} )("position:relative;display:flex;background-color:", designSystem.designTokens.colorSurface, ";border-bottom:", props => props.shouldRenderBottomBorder ? "1px solid ".concat(designSystem.designTokens.colorNeutral95, ";") : 'none', ";font-size:", designSystem.designTokens.fontSize20, ";", props => props.shouldClipContent ? _ref2 : '', " ", props => props.shouldIgnoreRowClick ? _ref$1 : '', ";" + ("" ));
 /*#__PURE__*/_styled__default["default"]("td", {
   target: "e10u1n7e1"
 } )("position:", props => props.disableFooterStickiness ? 'relative' : 'sticky', ";left:0;bottom:0;grid-column:1/", props => props.numberOfColumns, ";background-color:", designSystem.designTokens.colorSurface, ";border-bottom:1px solid ", designSystem.designTokens.colorNeutral90, ";border-top:1px solid ", designSystem.designTokens.colorNeutral90, ";margin-top:-1px;" + ("" ));
@@ -186,13 +186,13 @@ const rotateCounterClockwise = react.keyframes(_templateObject3 || (_templateObj
 const getSortableHeaderStyles = props => /*#__PURE__*/react.css("width:100%;display:flex;align-items:center;svg[data-icon-state='inactive'],svg[data-icon-state='active']{margin-left:", designSystem.designTokens.spacing10, ";flex-shrink:0;}svg[data-icon-state='inactive']{display:", props.isActive ? 'none' : 'inline-block', ";animation:", fadeIn, " 150ms ease-in-out;}svg[data-icon-state='active']{display:", props.isActive ? 'inline-block' : 'none', ";animation:", props.isActive && /*#__PURE__*/react.css(props.label === 'asc' ? rotateCounterClockwise : rotateClockwise, " 150ms ease-in-out;" + ("" ), "" ), ";}>svg *{fill:", designSystem.designTokens.colorNeutral60, "!important;}:hover,:focus{svg[data-icon-state='inactive']{display:none;}svg[data-icon-state='active']{display:inline-block;animation:", !props.isActive && /*#__PURE__*/react.css(fadeIn, " 150ms ease-in-out;" + ("" ), "" ), ";}}" + ("" ), "" );
 const HeaderCellInner = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n24"
-} )("box-sizing:border-box;display:flex;justify-content:flex-start;padding:0 ", props => props.isCondensed ? designSystem.designTokens.paddingForTableHeaderAsCondensed : designSystem.designTokens.paddingForTableHeader, ";", getCellInnerStyles, " ", props => props.isSortable ? getSortableHeaderStyles(props) : '', ";", props => props.as === 'button' ? getButtonStyle() : '', ";", props => props.shouldWrap ? '' : 'white-space: nowrap', ";" + ("" ));
+} )("box-sizing:border-box;display:flex;justify-content:flex-start;padding:0 ", designSystem.designTokens.spacing40, ";", getCellInnerStyles, " ", props => props.isSortable ? getSortableHeaderStyles(props) : '', ";", props => props.as === 'button' ? getButtonStyle() : '', ";", props => props.shouldWrap ? '' : 'white-space: nowrap', ";" + ("" ));
 const BaseHeaderCell = /*#__PURE__*/_styled__default["default"]("th", {
   target: "e1ipt8n23"
-} )("color:", designSystem.designTokens.colorNeutral40, ";background-color:", designSystem.designTokens.colorNeutral98, ";position:", props => props.disableHeaderStickiness ? 'relative' : 'sticky', ";top:0;z-index:1;line-height:", designSystem.designTokens.lineHeightForTableHeader, ";padding:0;font-weight:", designSystem.designTokens.fontWeight500, ";font-size:", designSystem.designTokens.fontSize10, ";:after{content:'';position:absolute;z-index:-1;width:100%;height:", designSystem.designTokens.borderWidth1, ";bottom:0;left:0;background-color:", designSystem.designTokens.colorNeutral95, ";}:hover,:active{z-index:2;}", HeaderCellInner, "{", props => props.shouldClipContent ? 'overflow: hidden;' : '', ";}" + ("" ));
+} )("color:", designSystem.designTokens.colorNeutral40, ";background-color:", designSystem.designTokens.colorNeutral98, ";position:", props => props.disableHeaderStickiness ? 'relative' : 'sticky', ";top:0;z-index:1;line-height:", designSystem.designTokens.lineHeight40, ";padding:0;font-weight:", designSystem.designTokens.fontWeight500, ";font-size:", designSystem.designTokens.fontSize10, ";:after{content:'';position:absolute;z-index:-1;width:100%;height:", designSystem.designTokens.borderWidth1, ";bottom:0;left:0;background-color:", designSystem.designTokens.colorNeutral95, ";}:hover,:active{z-index:2;}", HeaderCellInner, "{", props => props.shouldClipContent ? 'overflow: hidden;' : '', ";}" + ("" ));
 const HeaderLabelWrapper = /*#__PURE__*/_styled__default["default"]("div", {
   target: "e1ipt8n22"
-} )("display:inline-flex;min-height:1.4em;margin:", designSystem.designTokens.marginForTableHeader, " 0;flex:0 0 fit-content;" + ("" ));
+} )("display:inline-flex;min-height:1.4em;margin:", designSystem.designTokens.spacing20, " 0;flex:0 0 fit-content;" + ("" ));
 const HeaderLabelTextWrapper = /*#__PURE__*/_styled__default["default"]("span", {
   target: "e1ipt8n21"
 } )({
@@ -208,7 +208,7 @@ var convertNumericDimensionToPixelValue$1 = convertNumericDimensionToPixelValue;
 
 const getClickableRowStyle = props => {
   if (props.isRowClickable) {
-    return /*#__PURE__*/react.css("cursor:pointer;&:hover td{background:", designSystem.designTokens.backgroundColorForTableCellWhenHovered, ";}" + ("" ), "" );
+    return /*#__PURE__*/react.css("cursor:pointer;&:hover td{background:", designSystem.designTokens.colorNeutral98, ";}" + ("" ), "" );
   }
   return '';
 };
@@ -224,7 +224,7 @@ const getDisabledSelfContainmentStyles = props => {
 };
 const TableContainer = /*#__PURE__*/_styled__default["default"]("div", {
   target: "epk01s24"
-} )("position:relative;z-index:0;box-shadow:", designSystem.designTokens.boxShadowForTable, ";border:1px solid ", designSystem.designTokens.colorNeutral95, ";border-radius:", designSystem.designTokens.borderRadius4, ";", props =>
+} )("position:relative;z-index:0;box-shadow:", designSystem.designTokens.shadow17, ";border:1px solid ", designSystem.designTokens.colorNeutral95, ";border-radius:", designSystem.designTokens.borderRadius4, ";", props =>
 // this is needed in order to have a sticky header
 props.maxHeight ? "overflow-x: auto;" : '', " ", props => props.maxWidth && !props.disableSelfContainment ? "max-width: ".concat(convertNumericDimensionToPixelValue$1(props.maxWidth), ";") : '', " ", props => props.isBeingResized && "\n    * {\n      user-select: none;\n    }", " ", getDisabledSelfContainmentStyles, ";" + ("" ));
 const TableGrid = /*#__PURE__*/_styled__default["default"]("table", {
@@ -750,7 +750,7 @@ DataTable.displayName = 'DataTable';
 var DataTable$1 = DataTable;
 
 // NOTE: This string will be replaced on build time with the package version.
-var version = "17.1.0";
+var version = "18.1.0";
 
 Object.defineProperty(exports, 'useRowSelection', {
   enumerable: true,