@semcore/data-table 16.5.3-prerelease.4 → 17.0.0-prerelease.17

package/lib/es6/components/Head/Column.js

@@ -1,9 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _callSuper from "@babel/runtime/helpers/callSuper";
-import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import { sstyled as _sstyled } from "@semcore/core";
 import { assignProps as _assignProps } from "@semcore/core";
@@ -19,99 +13,93 @@ import SortAsc from '@semcore/icon/SortAsc/m';
 import SortDesc from '@semcore/icon/SortDesc/m';
 import * as React from 'react';
 /*!__reshadow-styles__:"./style.shadow.css"*/
-var style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SGroupContainer_1141v_gg_,.___SHead_1141v_gg_{display:contents}.___SHead_1141v_gg_.__isDataEmpty_1141v_gg_.__gridTemplateColumns_1141v_gg_{display:grid;grid-template-columns:var(--gridTemplateColumns_1141v);overflow:auto;scrollbar-width:thin}.___SHead_1141v_gg_.__animationDuration_1141v_gg_>.___SColumn_1141v_gg_{transition:top var(--animationDuration_1141v) ease-out}.___SHead_1141v_gg_.__sticky_1141v_gg_ .___SColumn_1141v_gg_,.___SHead_1141v_gg_.__sticky_1141v_gg_ .___SGroup_1141v_gg_{position:sticky;top:0;z-index:18}.___SHead_1141v_gg_.__sticky_1141v_gg_ .___SGroupContainer_1141v_gg_>.___SColumn_1141v_gg_{position:sticky;z-index:18}.___SHead_1141v_gg_.__compact_1141v_gg_ .___SColumn_1141v_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_1141v_gg_,.___SGroup_1141v_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden;line-height:var(--intergalactic-lh-100, 133%)}.___SGroup_1141v_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_1141v_gg_._use_primary_1141v_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_1141v_gg_._use_primary_1141v_gg_:has(~.___SColumn_1141v_gg_.__visibleSort_1141v_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_1141v_gg_._use_secondary_1141v_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_1141v_gg_._borders_both_1141v_gg_,.___SColumn_1141v_gg_._borders_left_1141v_gg_,.___SGroup_1141v_gg_._borders_both_1141v_gg_,.___SGroup_1141v_gg_._borders_left_1141v_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1141v_gg_._borders_both_1141v_gg_,.___SColumn_1141v_gg_._borders_right_1141v_gg_,.___SGroup_1141v_gg_._borders_both_1141v_gg_,.___SGroup_1141v_gg_._borders_right_1141v_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_1141v_gg_._use_primary_1141v_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_1141v_gg_._use_primary_1141v_gg_ .___SSortWrapper_1141v_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_1141v_gg_._use_primary_1141v_gg_.__visibleSort_1141v_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_1141v_gg_._use_primary_1141v_gg_.__visibleSort_1141v_gg_ .___SSortWrapper_1141v_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1141v_gg_._use_primary_1141v_gg_.__visibleSort_1141v_gg_ .___SSortButton_1141v_gg_,.___SColumn_1141v_gg_._use_primary_1141v_gg_.__visibleSort_1141v_gg_ .___SSortWrapper_1141v_gg_::before,.___SColumn_1141v_gg_._use_secondary_1141v_gg_.__visibleSort_1141v_gg_ .___SSortWrapper_1141v_gg_::before{display:flex;opacity:1}.___SColumn_1141v_gg_._use_primary_1141v_gg_._justifyContent_right_1141v_gg_ .___SSortWrapper_1141v_gg_{position:absolute}.___SColumn_1141v_gg_._use_primary_1141v_gg_._justifyContent_right_1141v_gg_.__changeSortSize_1141v_gg_.__isSorted_1141v_gg_ .___SSortWrapper_1141v_gg_,.___SColumn_1141v_gg_._use_secondary_1141v_gg_._justifyContent_right_1141v_gg_.__changeSortSize_1141v_gg_.__isSorted_1141v_gg_ .___SSortWrapper_1141v_gg_{position:relative}.___SColumn_1141v_gg_._use_secondary_1141v_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_1141v_gg_._use_secondary_1141v_gg_ .___SSortWrapper_1141v_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_1141v_gg_._use_secondary_1141v_gg_.__visibleSort_1141v_gg_ .___SSortWrapper_1141v_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_1141v_gg_._use_secondary_1141v_gg_.__visibleSort_1141v_gg_ .___SSortButton_1141v_gg_{display:flex;opacity:1}.___SColumn_1141v_gg_._use_secondary_1141v_gg_._justifyContent_right_1141v_gg_ .___SSortWrapper_1141v_gg_{position:absolute}.___SColumn_1141v_gg_.__gridArea_1141v_gg_,.___SGroupTitle_1141v_gg_.__gridArea_1141v_gg_,.___SGroup_1141v_gg_.__gridArea_1141v_gg_{grid-area:var(--gridArea_1141v)}.___SHead_1141v_gg_ .___SColumn_1141v_gg_.__fixed_1141v_gg_,.___SHead_1141v_gg_ .___SGroup_1141v_gg_.__fixed_1141v_gg_,.___SHead_1141v_gg_.__sticky_1141v_gg_ .___SColumn_1141v_gg_.__fixed_1141v_gg_{position:sticky;z-index:19}@media (hover:hover){.___SColumn_1141v_gg_.__sortable_1141v_gg_:hover{cursor:pointer}}.___SSortWrapper_1141v_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_1141v_gg_,.___SSortWrapper_1141v_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_1141v_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_1141v_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_1141v_gg_._sideIndents_wide_1141v_gg_ .___SColumn_1141v_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_1141v_gg_._sideIndents_wide_1141v_gg_ .___SColumn_1141v_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_1141v_gg_{cursor:pointer}.___SColumn_1141v_gg_.__fixed_1141v_gg_.__shadowVertical_1141v_gg_:after,.___SGroup_1141v_gg_.__fixed_1141v_gg_.__shadowVertical_1141v_gg_:after{content:\"\";position:absolute;pointer-events:none;display:none;top:0;width:5px;height:100%;z-index:5}.___SColumn_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_median_1141v_gg_,.___SColumn_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_start_1141v_gg_,.___SGroup_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_median_1141v_gg_,.___SGroup_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_start_1141v_gg_{margin-right:-5px;border-right-color:transparent}.___SColumn_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_median_1141v_gg_._use_primary_1141v_gg_,.___SColumn_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_start_1141v_gg_._use_primary_1141v_gg_,.___SGroup_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_median_1141v_gg_._use_primary_1141v_gg_,.___SGroup_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_start_1141v_gg_._use_primary_1141v_gg_{padding-right:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_median_1141v_gg_._use_secondary_1141v_gg_,.___SColumn_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_start_1141v_gg_._use_secondary_1141v_gg_,.___SGroup_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_median_1141v_gg_._use_secondary_1141v_gg_,.___SGroup_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_start_1141v_gg_._use_secondary_1141v_gg_{padding-right:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_median_1141v_gg_:after,.___SColumn_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_start_1141v_gg_:after,.___SGroup_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_median_1141v_gg_:after,.___SGroup_1141v_gg_._fixed_left_1141v_gg_._shadowVertical_start_1141v_gg_:after{display:block;right:0;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SColumn_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_end_1141v_gg_,.___SColumn_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_median_1141v_gg_,.___SGroup_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_end_1141v_gg_,.___SGroup_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_median_1141v_gg_{margin-left:-5px;border-left-color:transparent}.___SColumn_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_end_1141v_gg_._use_primary_1141v_gg_,.___SColumn_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_median_1141v_gg_._use_primary_1141v_gg_,.___SGroup_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_end_1141v_gg_._use_primary_1141v_gg_,.___SGroup_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_median_1141v_gg_._use_primary_1141v_gg_{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_end_1141v_gg_._use_secondary_1141v_gg_,.___SColumn_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_median_1141v_gg_._use_secondary_1141v_gg_,.___SGroup_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_end_1141v_gg_._use_secondary_1141v_gg_,.___SGroup_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_median_1141v_gg_._use_secondary_1141v_gg_{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_end_1141v_gg_:after,.___SColumn_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_median_1141v_gg_:after,.___SGroup_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_end_1141v_gg_:after,.___SGroup_1141v_gg_._fixed_right_1141v_gg_._shadowVertical_median_1141v_gg_:after{display:block;left:0;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}", /*__inner_css_end__*/"1141v_gg_"),
+const style = (/*__reshadow_css_start__*/_sstyled.insert(/*__inner_css_start__*/".___SGroupContainer_16i6f_gg_,.___SHead_16i6f_gg_{display:contents}.___SHead_16i6f_gg_.__isDataEmpty_16i6f_gg_.__gridTemplateColumns_16i6f_gg_{display:grid;grid-template-columns:var(--gridTemplateColumns_16i6f);overflow:auto;scrollbar-width:thin}.___SHead_16i6f_gg_.__animationDuration_16i6f_gg_>.___SColumn_16i6f_gg_{transition:top var(--animationDuration_16i6f) ease-out}.___SHead_16i6f_gg_.__sticky_16i6f_gg_ .___SColumn_16i6f_gg_,.___SHead_16i6f_gg_.__sticky_16i6f_gg_ .___SGroup_16i6f_gg_{position:sticky;top:0;z-index:18}.___SHead_16i6f_gg_.__sticky_16i6f_gg_ .___SGroupContainer_16i6f_gg_>.___SColumn_16i6f_gg_{position:sticky;z-index:18}.___SHead_16i6f_gg_.__compact_16i6f_gg_ .___SColumn_16i6f_gg_{padding:var(--intergalactic-spacing-3x, 12px) var(--intergalactic-spacing-2x, 8px)}.___SColumn_16i6f_gg_,.___SGroup_16i6f_gg_{display:flex;align-items:flex-start;font-size:var(--intergalactic-fs-100, 12px);color:var(--intergalactic-text-primary, #191b23);box-sizing:border-box;height:100%;position:relative;transition:width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,min-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out,max-width calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out;overflow:hidden;line-height:var(--intergalactic-lh-100, 133%)}.___SGroup_16i6f_gg_{justify-content:center;text-align:center;background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SGroup_16i6f_gg_._use_primary_16i6f_gg_{padding:var(--intergalactic-spacing-3x, 12px)}.___SGroup_16i6f_gg_._use_primary_16i6f_gg_:has(~.___SColumn_16i6f_gg_.__visibleSort_16i6f_gg_){background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SGroup_16i6f_gg_._use_secondary_16i6f_gg_{padding:var(--intergalactic-spacing-2x, 8px)}.___SColumn_16i6f_gg_._borders_both_16i6f_gg_,.___SColumn_16i6f_gg_._borders_left_16i6f_gg_,.___SGroup_16i6f_gg_._borders_both_16i6f_gg_,.___SGroup_16i6f_gg_._borders_left_16i6f_gg_{border-left:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_16i6f_gg_._borders_both_16i6f_gg_,.___SColumn_16i6f_gg_._borders_right_16i6f_gg_,.___SGroup_16i6f_gg_._borders_both_16i6f_gg_,.___SGroup_16i6f_gg_._borders_right_16i6f_gg_{border-right:1px solid var(--intergalactic-border-secondary, #e0e1e9)}.___SColumn_16i6f_gg_._use_primary_16i6f_gg_{padding:var(--intergalactic-spacing-3x, 12px);border-bottom:1px solid var(--intergalactic-border-secondary, #e0e1e9);background-color:var(--intergalactic-table-th-primary-cell, #f4f5f9)}.___SColumn_16i6f_gg_._use_primary_16i6f_gg_ .___SSortWrapper_16i6f_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-primary-cell-hover, #e0e1e9) 67.5%,rgba(224,225,233,0) 105%)}.___SColumn_16i6f_gg_._use_primary_16i6f_gg_.__visibleSort_16i6f_gg_{background-color:var(--intergalactic-table-th-primary-cell-hover, #e0e1e9)}.___SColumn_16i6f_gg_._use_primary_16i6f_gg_.__visibleSort_16i6f_gg_ .___SSortWrapper_16i6f_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_16i6f_gg_._use_primary_16i6f_gg_.__visibleSort_16i6f_gg_ .___SSortButton_16i6f_gg_,.___SColumn_16i6f_gg_._use_primary_16i6f_gg_.__visibleSort_16i6f_gg_ .___SSortWrapper_16i6f_gg_::before,.___SColumn_16i6f_gg_._use_secondary_16i6f_gg_.__visibleSort_16i6f_gg_ .___SSortWrapper_16i6f_gg_::before{display:flex;opacity:1}.___SColumn_16i6f_gg_._use_primary_16i6f_gg_._justifyContent_right_16i6f_gg_ .___SSortWrapper_16i6f_gg_{position:absolute}.___SColumn_16i6f_gg_._use_primary_16i6f_gg_._justifyContent_right_16i6f_gg_.__changeSortSize_16i6f_gg_.__isSorted_16i6f_gg_ .___SSortWrapper_16i6f_gg_,.___SColumn_16i6f_gg_._use_secondary_16i6f_gg_._justifyContent_right_16i6f_gg_.__changeSortSize_16i6f_gg_.__isSorted_16i6f_gg_ .___SSortWrapper_16i6f_gg_{position:relative}.___SColumn_16i6f_gg_._use_secondary_16i6f_gg_{padding:var(--intergalactic-spacing-2x, 8px);border-bottom:1px solid var(--intergalactic-border-table-accent, #a9abb6);background-color:var(--intergalactic-table-th-secondary-cell, #ffffff)}.___SColumn_16i6f_gg_._use_secondary_16i6f_gg_ .___SSortWrapper_16i6f_gg_::before{background:linear-gradient(270deg,var(--intergalactic-table-th-secondary-cell, #ffffff) 67.5%,rgba(255,255,255,0) 105%)}.___SColumn_16i6f_gg_._use_secondary_16i6f_gg_.__visibleSort_16i6f_gg_ .___SSortWrapper_16i6f_gg_{flex-basis:calc(var(--intergalactic-spacing-1x, 4px) + 16px);opacity:1}.___SColumn_16i6f_gg_._use_secondary_16i6f_gg_.__visibleSort_16i6f_gg_ .___SSortButton_16i6f_gg_{display:flex;opacity:1}.___SColumn_16i6f_gg_._use_secondary_16i6f_gg_._justifyContent_right_16i6f_gg_ .___SSortWrapper_16i6f_gg_{position:absolute}.___SColumn_16i6f_gg_.__gridArea_16i6f_gg_,.___SGroupTitle_16i6f_gg_.__gridArea_16i6f_gg_,.___SGroup_16i6f_gg_.__gridArea_16i6f_gg_{grid-area:var(--gridArea_16i6f)}.___SHead_16i6f_gg_ .___SColumn_16i6f_gg_.__fixed_16i6f_gg_,.___SHead_16i6f_gg_ .___SGroup_16i6f_gg_.__fixed_16i6f_gg_,.___SHead_16i6f_gg_.__sticky_16i6f_gg_ .___SColumn_16i6f_gg_.__fixed_16i6f_gg_{position:sticky;z-index:19}@media (hover:hover){.___SColumn_16i6f_gg_.__sortable_16i6f_gg_:hover{cursor:pointer}}.___SSortWrapper_16i6f_gg_{align-items:center;display:flex;flex-shrink:1;position:relative;flex-basis:0;min-height:16px;opacity:0;transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SSortButton_16i6f_gg_,.___SSortWrapper_16i6f_gg_:before{display:none;position:absolute;right:0;opacity:0;transition:opacity .3s ease}.___SSortWrapper_16i6f_gg_:before{content:\"\";top:0;width:20px;height:100%}.___SSortButton_16i6f_gg_{fill:var(--intergalactic-icon-secondary-neutral-hover-active, #878992);top:calc(-1*(1em*1.25 - 16px));margin-left:var(--intergalactic-spacing-1x, 4px)}.___SHead_16i6f_gg_._sideIndents_wide_16i6f_gg_ .___SColumn_16i6f_gg_:first-child{padding-left:var(--intergalactic-spacing-5x, 20px)}.___SHead_16i6f_gg_._sideIndents_wide_16i6f_gg_ .___SColumn_16i6f_gg_:last-child{padding-right:var(--intergalactic-spacing-5x, 20px)}.___SHeadCheckboxCol_16i6f_gg_{cursor:pointer}.___SColumn_16i6f_gg_.__fixed_16i6f_gg_.__shadowVertical_16i6f_gg_:after,.___SGroup_16i6f_gg_.__fixed_16i6f_gg_.__shadowVertical_16i6f_gg_:after{content:\"\";position:absolute;pointer-events:none;display:none;top:0;width:5px;height:100%;z-index:5}.___SColumn_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_median_16i6f_gg_,.___SColumn_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_start_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_median_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_start_16i6f_gg_{margin-right:-5px;border-right-color:transparent}.___SColumn_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_median_16i6f_gg_._use_primary_16i6f_gg_,.___SColumn_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_start_16i6f_gg_._use_primary_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_median_16i6f_gg_._use_primary_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_start_16i6f_gg_._use_primary_16i6f_gg_{padding-right:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_median_16i6f_gg_._use_secondary_16i6f_gg_,.___SColumn_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_start_16i6f_gg_._use_secondary_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_median_16i6f_gg_._use_secondary_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_start_16i6f_gg_._use_secondary_16i6f_gg_{padding-right:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_median_16i6f_gg_:after,.___SColumn_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_start_16i6f_gg_:after,.___SGroup_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_median_16i6f_gg_:after,.___SGroup_16i6f_gg_._fixed_left_16i6f_gg_._shadowVertical_start_16i6f_gg_:after{display:block;right:0;background:var(--intergalactic-scroll-area-shadow-left,\n    linear-gradient(to right, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}.___SColumn_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_end_16i6f_gg_,.___SColumn_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_median_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_end_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_median_16i6f_gg_{margin-left:-5px;border-left-color:transparent}.___SColumn_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_end_16i6f_gg_._use_primary_16i6f_gg_,.___SColumn_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_median_16i6f_gg_._use_primary_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_end_16i6f_gg_._use_primary_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_median_16i6f_gg_._use_primary_16i6f_gg_{padding-left:calc(var(--intergalactic-spacing-3x, 12px) + 5px)}.___SColumn_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_end_16i6f_gg_._use_secondary_16i6f_gg_,.___SColumn_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_median_16i6f_gg_._use_secondary_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_end_16i6f_gg_._use_secondary_16i6f_gg_,.___SGroup_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_median_16i6f_gg_._use_secondary_16i6f_gg_{padding-left:calc(var(--intergalactic-spacing-2x, 8px) + 5px)}.___SColumn_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_end_16i6f_gg_:after,.___SColumn_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_median_16i6f_gg_:after,.___SGroup_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_end_16i6f_gg_:after,.___SGroup_16i6f_gg_._fixed_right_16i6f_gg_._shadowVertical_median_16i6f_gg_:after{display:block;left:0;background:var(--intergalactic-scroll-area-shadow-right,\n    linear-gradient(to left, rgba(25, 27, 35, 0.1) 20.55%, rgba(255, 255, 255, 0.0001) 100%))}", /*__inner_css_end__*/"16i6f_gg_"),
 /*__reshadow_css_end__*/
 {
-  "__SHead": "___SHead_1141v_gg_",
-  "__SGroupContainer": "___SGroupContainer_1141v_gg_",
-  "_isDataEmpty": "__isDataEmpty_1141v_gg_",
-  "_gridTemplateColumns": "__gridTemplateColumns_1141v_gg_",
-  "--gridTemplateColumns": "--gridTemplateColumns_1141v",
-  "_animationDuration": "__animationDuration_1141v_gg_",
-  "__SColumn": "___SColumn_1141v_gg_",
-  "--animationDuration": "--animationDuration_1141v",
-  "_sticky": "__sticky_1141v_gg_",
-  "__SGroup": "___SGroup_1141v_gg_",
-  "_compact": "__compact_1141v_gg_",
-  "_use_secondary": "_use_secondary_1141v_gg_",
-  "_borders_both": "_borders_both_1141v_gg_",
-  "_borders_left": "_borders_left_1141v_gg_",
-  "_borders_right": "_borders_right_1141v_gg_",
-  "_gridArea": "__gridArea_1141v_gg_",
-  "__SGroupTitle": "___SGroupTitle_1141v_gg_",
-  "--gridArea": "--gridArea_1141v",
-  "_fixed": "__fixed_1141v_gg_",
-  "_sortable": "__sortable_1141v_gg_",
-  "__SSortWrapper": "___SSortWrapper_1141v_gg_",
-  "__SSortButton": "___SSortButton_1141v_gg_",
-  "__SHeadCheckboxCol": "___SHeadCheckboxCol_1141v_gg_",
-  "_use_primary": "_use_primary_1141v_gg_",
-  "_visibleSort": "__visibleSort_1141v_gg_",
-  "_justifyContent_right": "_justifyContent_right_1141v_gg_",
-  "_changeSortSize": "__changeSortSize_1141v_gg_",
-  "_isSorted": "__isSorted_1141v_gg_",
-  "_sideIndents_wide": "_sideIndents_wide_1141v_gg_",
-  "_shadowVertical": "__shadowVertical_1141v_gg_",
-  "_fixed_left": "_fixed_left_1141v_gg_",
-  "_shadowVertical_median": "_shadowVertical_median_1141v_gg_",
-  "_shadowVertical_start": "_shadowVertical_start_1141v_gg_",
-  "_fixed_right": "_fixed_right_1141v_gg_",
-  "_shadowVertical_end": "_shadowVertical_end_1141v_gg_"
+  "__SHead": "___SHead_16i6f_gg_",
+  "__SGroupContainer": "___SGroupContainer_16i6f_gg_",
+  "_isDataEmpty": "__isDataEmpty_16i6f_gg_",
+  "_gridTemplateColumns": "__gridTemplateColumns_16i6f_gg_",
+  "--gridTemplateColumns": "--gridTemplateColumns_16i6f",
+  "_animationDuration": "__animationDuration_16i6f_gg_",
+  "__SColumn": "___SColumn_16i6f_gg_",
+  "--animationDuration": "--animationDuration_16i6f",
+  "_sticky": "__sticky_16i6f_gg_",
+  "__SGroup": "___SGroup_16i6f_gg_",
+  "_compact": "__compact_16i6f_gg_",
+  "_use_secondary": "_use_secondary_16i6f_gg_",
+  "_borders_both": "_borders_both_16i6f_gg_",
+  "_borders_left": "_borders_left_16i6f_gg_",
+  "_borders_right": "_borders_right_16i6f_gg_",
+  "_gridArea": "__gridArea_16i6f_gg_",
+  "__SGroupTitle": "___SGroupTitle_16i6f_gg_",
+  "--gridArea": "--gridArea_16i6f",
+  "_fixed": "__fixed_16i6f_gg_",
+  "_sortable": "__sortable_16i6f_gg_",
+  "__SSortWrapper": "___SSortWrapper_16i6f_gg_",
+  "__SSortButton": "___SSortButton_16i6f_gg_",
+  "__SHeadCheckboxCol": "___SHeadCheckboxCol_16i6f_gg_",
+  "_use_primary": "_use_primary_16i6f_gg_",
+  "_visibleSort": "__visibleSort_16i6f_gg_",
+  "_justifyContent_right": "_justifyContent_right_16i6f_gg_",
+  "_changeSortSize": "__changeSortSize_16i6f_gg_",
+  "_isSorted": "__isSorted_16i6f_gg_",
+  "_sideIndents_wide": "_sideIndents_wide_16i6f_gg_",
+  "_shadowVertical": "__shadowVertical_16i6f_gg_",
+  "_fixed_left": "_fixed_left_16i6f_gg_",
+  "_shadowVertical_median": "_shadowVertical_median_16i6f_gg_",
+  "_shadowVertical_start": "_shadowVertical_start_16i6f_gg_",
+  "_fixed_right": "_fixed_right_16i6f_gg_",
+  "_shadowVertical_end": "_shadowVertical_end_16i6f_gg_"
 });
 import { handleFocusCell, handleKeydownFocusCell } from '../../enhancers/focusableCell';
-var SORTING_ICON = {
+const SORTING_ICON = {
   desc: SortDesc,
   asc: SortAsc
 };
-var ARIA_SORT = {
+const ARIA_SORT = {
   desc: 'descending',
   asc: 'ascending'
 };
-var SORT_ICON_WIDTH = 20;
-var DEFAULT_DIRECTION = 'desc';
-var reversedSortDirection = {
+const SORT_ICON_WIDTH = 20;
+const DEFAULT_DIRECTION = 'desc';
+const reversedSortDirection = {
   desc: 'asc',
   asc: 'desc'
 };
-export var Column = /*#__PURE__*/function (_Component) {
-  function Column() {
-    var _this;
-    _classCallCheck(this, Column);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _callSuper(this, Column, [].concat(args));
-    _defineProperty(_this, "lockedCell", [null, false]);
-    _defineProperty(_this, "columnRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "sortWrapperRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_this, "state", {
+export class Column extends Component {
+  constructor(...args) {
+    super(...args);
+    _defineProperty(this, "lockedCell", [null, false]);
+    _defineProperty(this, "columnRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "sortWrapperRef", /*#__PURE__*/React.createRef());
+    _defineProperty(this, "state", {
       sortVisible: false
     });
-    _defineProperty(_this, "calculateActiveColumnMinWidth", function () {
-      var node = _this.columnRef.current;
+    _defineProperty(this, "calculateActiveColumnMinWidth", () => {
+      const node = this.columnRef.current;
       if (node) {
-        var _this$columnRef$curre, _this$columnRef$curre2;
-        var clonedColumn = document.createElement('div');
-        var computedStyle = window.getComputedStyle(node);
-        node.childNodes.forEach(function (node) {
-          if (_this.sortWrapperRef.current !== node) {
+        const clonedColumn = document.createElement('div');
+        const computedStyle = window.getComputedStyle(node);
+        node.childNodes.forEach(node => {
+          if (this.sortWrapperRef.current !== node) {
             clonedColumn.append(node.cloneNode(true));
           }
         });
         clonedColumn.style.setProperty('visibility', 'hidden', 'important');
-        var styles = ['display', 'flex', 'margin', 'padding', 'background', 'font-style', 'font-width', 'font-size', 'font-weight'];
-        styles.forEach(function (key) {
+        const styles = ['display', 'flex', 'margin', 'padding', 'background', 'font-style', 'font-width', 'font-size', 'font-weight'];
+        styles.forEach(key => {
           clonedColumn.style.setProperty(key, computedStyle.getPropertyValue(key), computedStyle.getPropertyPriority(key));
         });
         clonedColumn.style.setProperty('width', 'fit-content', 'important');
         document.body.appendChild(clonedColumn);
-        var computedWidth = Math.ceil(clonedColumn.getBoundingClientRect().width);
+        const computedWidth = Math.ceil(clonedColumn.getBoundingClientRect().width);
         document.body.removeChild(clonedColumn);
-        var defaultNodeWidth = (_this$columnRef$curre = (_this$columnRef$curre2 = _this.columnRef.current) === null || _this$columnRef$curre2 === void 0 ? void 0 : _this$columnRef$curre2.clientWidth) !== null && _this$columnRef$curre !== void 0 ? _this$columnRef$curre : 0;
+        const defaultNodeWidth = this.columnRef.current?.clientWidth ?? 0;
         if (computedWidth >= defaultNodeWidth) {
           return defaultNodeWidth + SORT_ICON_WIDTH;
         } else {
-          var freeSpace = defaultNodeWidth - computedWidth;
+          const freeSpace = defaultNodeWidth - computedWidth;
           if (freeSpace < SORT_ICON_WIDTH) {
             return computedWidth + SORT_ICON_WIDTH;
           }
@@ -119,194 +107,179 @@ export var Column = /*#__PURE__*/function (_Component) {
       }
       return null;
     });
-    _defineProperty(_this, "handleMouseEnter", function () {
-      _this.setState({
+    _defineProperty(this, "handleMouseEnter", () => {
+      this.setState({
         sortVisible: true
       });
     });
-    _defineProperty(_this, "handleMouseLeave", function () {
-      _this.setState({
+    _defineProperty(this, "handleMouseLeave", () => {
+      this.setState({
         sortVisible: false
       });
     });
-    _defineProperty(_this, "handleBlur", function (e) {
-      var relatedTarget = e.relatedTarget;
+    _defineProperty(this, "handleBlur", e => {
+      const relatedTarget = e.relatedTarget;
       if (!isFocusInside(e.currentTarget, relatedTarget) && lastInteraction.isKeyboard()) {
-        _this.setState({
+        this.setState({
           sortVisible: false
         });
       }
     });
-    _defineProperty(_this, "handleSortClick", function (e) {
+    _defineProperty(this, "handleSortClick", e => {
       e.stopPropagation();
-      var _this$asProps = _this.asProps,
-        sort = _this$asProps.sort,
-        onSortChange = _this$asProps.onSortChange,
-        name = _this$asProps.name,
-        sortable = _this$asProps.sortable;
+      const {
+        sort,
+        onSortChange,
+        name,
+        sortable
+      } = this.asProps;
       if (lastInteraction.isMouse() || lastInteraction.isKeyboard() && e.target === e.currentTarget) {
         if (sortable && onSortChange) {
-          var sortDirection = (sort === null || sort === void 0 ? void 0 : sort[0]) === name ? reversedSortDirection[sort[1]] : _this.defaultDirection;
+          const sortDirection = sort?.[0] === name ? reversedSortDirection[sort[1]] : this.defaultDirection;
           onSortChange([name, sortDirection], e);
         }
       }
     });
-    _defineProperty(_this, "handleFocusableCellKeyDown", function (e) {
-      handleKeydownFocusCell(_this.lockedCell, e);
+    _defineProperty(this, "handleFocusableCellKeyDown", e => {
+      handleKeydownFocusCell(this.lockedCell, e);
     });
-    _defineProperty(_this, "handleFocusableCellFocus", function (e) {
-      var cellElement = e.currentTarget;
-      var target = e.target;
+    _defineProperty(this, "handleFocusableCellFocus", e => {
+      const cellElement = e.currentTarget;
+      const target = e.target;
       if (lastInteraction.isKeyboard()) {
-        _this.setState({
+        this.setState({
           sortVisible: true
-        }, function () {
-          handleFocusCell(_this.lockedCell, target, cellElement);
+        }, () => {
+          handleFocusCell(this.lockedCell, target, cellElement);
         });
       } else {
-        var _this$columnRef$curre3, _this$columnRef$curre4;
-        var focusableChildren = Array.from((_this$columnRef$curre3 = (_this$columnRef$curre4 = _this.columnRef.current) === null || _this$columnRef$curre4 === void 0 ? void 0 : _this$columnRef$curre4.children) !== null && _this$columnRef$curre3 !== void 0 ? _this$columnRef$curre3 : []).flatMap(function (node) {
-          return getFocusableIn(node);
-        });
-        if (isInteractiveElement(e.target) && _this.columnRef.current && focusableChildren.length > 1) {
-          _this.lockedCell[0] = _this.columnRef.current;
-          _this.lockedCell[1] = true;
+        const focusableChildren = Array.from(this.columnRef.current?.children ?? []).flatMap(node => getFocusableIn(node));
+        if (isInteractiveElement(e.target) && this.columnRef.current && focusableChildren.length > 1) {
+          this.lockedCell[0] = this.columnRef.current;
+          this.lockedCell[1] = true;
         }
       }
     });
-    _defineProperty(_this, "handleClick", function (e) {
-      var _this$columnRef$curre5, _this$columnRef$curre6;
-      var _this$asProps2 = _this.asProps,
-        sortable = _this$asProps2.sortable,
-        onClick = _this$asProps2.onClick,
-        columnIndex = _this$asProps2.columnIndex;
+    _defineProperty(this, "handleClick", e => {
+      const {
+        sortable,
+        onClick,
+        columnIndex
+      } = this.asProps;
       if (sortable) {
-        _this.handleSortClick(e);
+        this.handleSortClick(e);
       }
-      var focusableChildren = Array.from((_this$columnRef$curre5 = (_this$columnRef$curre6 = _this.columnRef.current) === null || _this$columnRef$curre6 === void 0 ? void 0 : _this$columnRef$curre6.children) !== null && _this$columnRef$curre5 !== void 0 ? _this$columnRef$curre5 : []).flatMap(function (node) {
-        return getFocusableIn(node);
-      });
-      if (isInteractiveElement(e.target) && _this.columnRef.current && focusableChildren.length > 1) {
-        _this.lockedCell[0] = _this.columnRef.current;
-        _this.lockedCell[1] = true;
+      const focusableChildren = Array.from(this.columnRef.current?.children ?? []).flatMap(node => getFocusableIn(node));
+      if (isInteractiveElement(e.target) && this.columnRef.current && focusableChildren.length > 1) {
+        this.lockedCell[0] = this.columnRef.current;
+        this.lockedCell[1] = true;
       }
-      onClick === null || onClick === void 0 || onClick(e, {
+      onClick?.(e, {
         rowIndex: -1,
         colIndex: columnIndex
       });
     });
-    return _this;
   }
-  _inherits(Column, _Component);
-  return _createClass(Column, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this$asProps3 = this.asProps,
-        parent = _this$asProps3.parent,
-        sticky = _this$asProps3.sticky,
-        changeSortSize = _this$asProps3.changeSortSize,
-        name = _this$asProps3.name,
-        sort = _this$asProps3.sort,
-        scrollDirection = _this$asProps3.scrollDirection;
-      if (parent && sticky && scrollDirection !== 'horizontal') {
-        var _columnElement$parent, _groupElement$getBoun;
-        var columnElement = this.columnRef.current;
-        var groupElement = columnElement === null || columnElement === void 0 || (_columnElement$parent = columnElement.parentElement) === null || _columnElement$parent === void 0 ? void 0 : _columnElement$parent.children.item(0);
-        var groupRectHeight = (_groupElement$getBoun = groupElement === null || groupElement === void 0 ? void 0 : groupElement.getBoundingClientRect().height) !== null && _groupElement$getBoun !== void 0 ? _groupElement$getBoun : 0;
-        var topOffset = groupElement instanceof HTMLElement ? cssToIntDefault(groupElement.style.top) : 0;
-        columnElement === null || columnElement === void 0 || columnElement.style.setProperty('top', "".concat(groupRectHeight + topOffset, "px"));
-      }
-      if (canUseDOM() && changeSortSize && (sort === null || sort === void 0 ? void 0 : sort[0]) === name) {
-        this.changeTemplateColumnBySort();
-      }
+  componentDidMount() {
+    const {
+      parent,
+      sticky,
+      changeSortSize,
+      name,
+      sort,
+      scrollDirection
+    } = this.asProps;
+    if (parent && sticky && scrollDirection !== 'horizontal') {
+      const columnElement = this.columnRef.current;
+      const groupElement = columnElement?.parentElement?.children.item(0);
+      const groupRectHeight = groupElement?.getBoundingClientRect().height ?? 0;
+      const topOffset = groupElement instanceof HTMLElement ? cssToIntDefault(groupElement.style.top) : 0;
+      columnElement?.style.setProperty('top', `${groupRectHeight + topOffset}px`);
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var _prevProps$sort, _this$asProps$sort;
-      if (this.asProps.changeSortSize && canUseDOM() && ((_prevProps$sort = prevProps.sort) === null || _prevProps$sort === void 0 ? void 0 : _prevProps$sort[0]) !== ((_this$asProps$sort = this.asProps.sort) === null || _this$asProps$sort === void 0 ? void 0 : _this$asProps$sort[0])) {
-        this.changeTemplateColumnBySort();
-      }
+    if (canUseDOM() && changeSortSize && sort?.[0] === name) {
+      this.changeTemplateColumnBySort();
+    }
+  }
+  componentDidUpdate(prevProps) {
+    if (this.asProps.changeSortSize && canUseDOM() && prevProps.sort?.[0] !== this.asProps.sort?.[0]) {
+      this.changeTemplateColumnBySort();
     }
-  }, {
-    key: "changeTemplateColumnBySort",
-    value: function changeTemplateColumnBySort() {
-      var _this$asProps4 = this.asProps,
-        tableRef = _this$asProps4.tableRef,
-        gridTemplateColumns = _this$asProps4.gridTemplateColumns,
-        columnIndex = _this$asProps4.columnIndex,
-        sort = _this$asProps4.sort,
-        name = _this$asProps4.name;
-      if ((sort === null || sort === void 0 ? void 0 : sort[0]) === name) {
-        var newWidth = this.calculateActiveColumnMinWidth();
-        setTimeout(function () {
-          if (tableRef.current && newWidth !== null) {
-            tableRef.current.style.setProperty('grid-template-columns', gridTemplateColumns.map(function (gtcWidth, index) {
+  }
+  changeTemplateColumnBySort() {
+    const {
+      tableRef,
+      gridTemplateColumns,
+      columnIndex,
+      sort,
+      name
+    } = this.asProps;
+    if (sort?.[0] === name) {
+      const newWidth = this.calculateActiveColumnMinWidth();
+      setTimeout(() => {
+        if (tableRef.current && newWidth !== null) {
+          tableRef.current.style.setProperty('grid-template-columns', gridTemplateColumns.map((gtcWidth, index) => {
+            if (index === columnIndex) {
+              return `${newWidth}px`;
+            }
+            return gtcWidth;
+          }).join(' '));
+        }
+      });
+    } else if (sort?.[0] !== name) {
+      setTimeout(() => {
+        if (tableRef.current) {
+          const currentGridTemplateColumns = tableRef.current.style.getPropertyValue('grid-template-columns');
+          if (currentGridTemplateColumns) {
+            tableRef.current.style.setProperty('grid-template-columns', currentGridTemplateColumns.split(' ').map((gtcWidth, index) => {
               if (index === columnIndex) {
-                return "".concat(newWidth, "px");
+                return gridTemplateColumns[index];
               }
               return gtcWidth;
             }).join(' '));
           }
-        });
-      } else if ((sort === null || sort === void 0 ? void 0 : sort[0]) !== name) {
-        setTimeout(function () {
-          if (tableRef.current) {
-            var currentGridTemplateColumns = tableRef.current.style.getPropertyValue('grid-template-columns');
-            if (currentGridTemplateColumns) {
-              tableRef.current.style.setProperty('grid-template-columns', currentGridTemplateColumns.split(' ').map(function (gtcWidth, index) {
-                if (index === columnIndex) {
-                  return gridTemplateColumns[index];
-                }
-                return gtcWidth;
-              }).join(' '));
-            }
-          }
-        });
-      }
+        }
+      });
     }
-  }, {
-    key: "defaultDirection",
-    get: function get() {
-      var sortable = this.asProps.sortable;
-      if (typeof sortable === 'string') {
-        return sortable;
-      }
-      return DEFAULT_DIRECTION;
+  }
+  get defaultDirection() {
+    const {
+      sortable
+    } = this.asProps;
+    if (typeof sortable === 'string') {
+      return sortable;
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref2;
-      var SColumn = Flex;
-      var SSortWrapper = 'div';
-      var SSortButton = ButtonLink;
-      var _this$asProps5 = this.asProps,
-        styles = _this$asProps5.styles,
-        sortable = _this$asProps5.sortable,
-        sort = _this$asProps5.sort,
-        uid = _this$asProps5.uid,
-        name = _this$asProps5.name,
-        parent = _this$asProps5.parent,
-        sortableColumnDescribeId = _this$asProps5.sortableColumnDescribeId,
-        Children = _this$asProps5.Children;
-      var _ref3 = sort !== null && sort !== void 0 ? sort : [undefined, undefined],
-        _ref4 = _slicedToArray(_ref3, 2),
-        sortBy = _ref4[0],
-        sortDirection = _ref4[1];
-      var isSorted = sortBy === name && !!sortDirection;
-      var SSortIcon = isSorted ? SORTING_ICON[sortDirection] : SORTING_ICON[this.defaultDirection];
-      var visibleSort = Boolean(sortable) && (this.state.sortVisible || isSorted);
-      var ariaDescribedBy = [];
-      if (sortable) {
-        ariaDescribedBy.push(sortableColumnDescribeId);
-      }
-      if (parent) {
-        ariaDescribedBy.push("igc-table-".concat(uid, "-").concat(parent.name, "-group"));
-      }
-      var ariaSortValue = isSorted ? ARIA_SORT[sortDirection] : undefined;
-      return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SColumn, _ref2.cn("SColumn", _objectSpread({}, _assignProps({
+    return DEFAULT_DIRECTION;
+  }
+  render() {
+    var _ref = this.asProps,
+      _ref2;
+    const SColumn = Flex;
+    const SSortWrapper = 'div';
+    const SSortButton = ButtonLink;
+    const {
+      styles,
+      sortable,
+      sort,
+      uid,
+      name,
+      parent,
+      sortableColumnDescribeId,
+      Children
+    } = this.asProps;
+    const [sortBy, sortDirection] = sort ?? [undefined, undefined];
+    const isSorted = sortBy === name && !!sortDirection;
+    const SSortIcon = isSorted ? SORTING_ICON[sortDirection] : SORTING_ICON[this.defaultDirection];
+    const visibleSort = Boolean(sortable) && (this.state.sortVisible || isSorted);
+    const ariaDescribedBy = [];
+    if (sortable) {
+      ariaDescribedBy.push(sortableColumnDescribeId);
+    }
+    if (parent) {
+      ariaDescribedBy.push(`igc-table-${uid}-${parent.name}-group`);
+    }
+    const ariaSortValue = isSorted ? ARIA_SORT[sortDirection] : undefined;
+    return _ref2 = sstyled(styles), /*#__PURE__*/React.createElement(SColumn, _ref2.cn("SColumn", {
+      ..._assignProps({
         "ref": this.columnRef,
         "role": 'columnheader',
         "tabIndex": -1,
@@ -321,18 +294,18 @@ export var Column = /*#__PURE__*/function (_Component) {
         "aria-describedby": ariaDescribedBy.length > 0 ? ariaDescribedBy.join(' ') : undefined,
         "aria-sort": ariaSortValue,
         "use:onClick": this.handleClick
-      }, _ref))), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})), sortable && /*#__PURE__*/React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
-        "ref": this.sortWrapperRef
-      }), /*#__PURE__*/React.createElement(SSortButton, _ref2.cn("SSortButton", {
-        "onClick": this.handleSortClick,
-        "aria-label": ariaSortValue,
-        "color": '--intergalactic-icon-primary-neutral'
-      }), /*#__PURE__*/React.createElement(SSortButton.Addon, {
-        tag: SSortIcon
-      }))));
-    }
-  }]);
-}(Component);
+      }, _ref)
+    }), /*#__PURE__*/React.createElement(Children, _ref2.cn("Children", {})), sortable && /*#__PURE__*/React.createElement(SSortWrapper, _ref2.cn("SSortWrapper", {
+      "ref": this.sortWrapperRef
+    }), /*#__PURE__*/React.createElement(SSortButton, _ref2.cn("SSortButton", {
+      "onClick": this.handleSortClick,
+      "aria-label": ariaSortValue,
+      "color": '--intergalactic-icon-primary-neutral'
+    }), /*#__PURE__*/React.createElement(SSortButton.Addon, {
+      tag: SSortIcon
+    }))));
+  }
+}
 _defineProperty(Column, "displayName", 'Column');
 _defineProperty(Column, "style", style);
 //# sourceMappingURL=Column.js.map