@veeqo/ui 13.14.0 → 13.15.0

package/dist/components/DataGrid/DataGrid.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._baseCell_t7iek_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_t7iek_1:focus, ._baseCell_t7iek_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_t7iek_10::after, ._pinnedColumnRight_t7iek_10::after, ._pinnedColumnLeft_t7iek_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_t7iek_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_t7iek_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}");
-var styles = {"baseCell":"_baseCell_t7iek_1","pinnedColumnBase":"_pinnedColumnBase_t7iek_10","pinnedColumnRight":"_pinnedColumnRight_t7iek_10","pinnedColumnLeft":"_pinnedColumnLeft_t7iek_10"};
+___$insertStyle("._baseCell_19atg_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_19atg_1:focus, ._baseCell_19atg_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_19atg_10::after, ._pinnedColumnRight_19atg_10::after, ._pinnedColumnLeft_19atg_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_19atg_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_19atg_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}");
+var styles = {"baseCell":"_baseCell_19atg_1","pinnedColumnBase":"_pinnedColumnBase_19atg_10","pinnedColumnRight":"_pinnedColumnRight_19atg_10","pinnedColumnLeft":"_pinnedColumnLeft_19atg_10"};
 
 module.exports = styles;
 //# sourceMappingURL=DataGrid.module.scss.cjs.map

package/dist/components/DataGrid/DataGrid.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,k4BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"DataGrid.module.scss.cjs","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n      var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n    transition: opacity 0.3s;\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n    opacity: var(--pinned-left-shadow-opacity, 1);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n    opacity: var(--pinned-right-shadow-opacity, 1);\n  }\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,ogCAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/DataGrid.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../_virtual/____insertStyle.js';
 
-insertStyle("._baseCell_t7iek_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_t7iek_1:focus, ._baseCell_t7iek_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_t7iek_10::after, ._pinnedColumnRight_t7iek_10::after, ._pinnedColumnLeft_t7iek_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_t7iek_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_t7iek_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}");
-var styles = {"baseCell":"_baseCell_t7iek_1","pinnedColumnBase":"_pinnedColumnBase_t7iek_10","pinnedColumnRight":"_pinnedColumnRight_t7iek_10","pinnedColumnLeft":"_pinnedColumnLeft_t7iek_10"};
+insertStyle("._baseCell_19atg_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_19atg_1:focus, ._baseCell_19atg_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_19atg_10::after, ._pinnedColumnRight_19atg_10::after, ._pinnedColumnLeft_19atg_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_19atg_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_19atg_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}");
+var styles = {"baseCell":"_baseCell_19atg_1","pinnedColumnBase":"_pinnedColumnBase_19atg_10","pinnedColumnRight":"_pinnedColumnRight_19atg_10","pinnedColumnLeft":"_pinnedColumnLeft_19atg_10"};
 
 export { styles as default };
 //# sourceMappingURL=DataGrid.module.scss.js.map

package/dist/components/DataGrid/DataGrid.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,k4BAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"DataGrid.module.scss.js","sources":["../../../src/components/DataGrid/DataGrid.module.scss"],"sourcesContent":[".baseCell {\n  position: relative;\n  box-sizing: border-box;\n\n  &:focus,\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line)\n      var(--colors-secondary-blue-base);\n  }\n}\n\n.pinnedColumnBase {\n  &::after {\n    position: absolute;\n\n    top: var(--sizes-none);\n    bottom: -1px;\n    width: 30px;\n\n    content: '';\n    pointer-events: none;\n\n    box-sizing: border-box;\n    transition: opacity 0.3s;\n  }\n}\n\n.pinnedColumnLeft {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(100%);\n\n    right: var(--sizes-none);\n\n    box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 25%);\n    opacity: var(--pinned-left-shadow-opacity, 1);\n  }\n}\n\n.pinnedColumnRight {\n  @extend .pinnedColumnBase;\n\n  &::after {\n    transform: translate(-100%);\n\n    left: var(--sizes-none);\n\n    box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 25%);\n    opacity: var(--pinned-right-shadow-opacity, 1);\n  }\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,ogCAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._baseCell_1vcew_1, ._bodyCell_1vcew_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1vcew_1:focus, ._bodyCell_1vcew_1:focus, ._baseCell_1vcew_1:focus-visible, ._bodyCell_1vcew_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1vcew_10::after, ._pinnedColumnRight_1vcew_10::after, ._pinnedColumnLeft_1vcew_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1vcew_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1vcew_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1vcew_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}");
-var styles = {"baseCell":"_baseCell_1vcew_1","bodyCell":"_bodyCell_1vcew_1","pinnedColumnBase":"_pinnedColumnBase_1vcew_10","pinnedColumnRight":"_pinnedColumnRight_1vcew_10","pinnedColumnLeft":"_pinnedColumnLeft_1vcew_10"};
+___$insertStyle("._baseCell_msj6c_1, ._bodyCell_msj6c_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_msj6c_1:focus, ._bodyCell_msj6c_1:focus, ._baseCell_msj6c_1:focus-visible, ._bodyCell_msj6c_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_msj6c_10::after, ._pinnedColumnRight_msj6c_10::after, ._pinnedColumnLeft_msj6c_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_msj6c_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_msj6c_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._bodyCell_msj6c_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}");
+var styles = {"baseCell":"_baseCell_msj6c_1","bodyCell":"_bodyCell_msj6c_1","pinnedColumnBase":"_pinnedColumnBase_msj6c_10","pinnedColumnRight":"_pinnedColumnRight_msj6c_10","pinnedColumnLeft":"_pinnedColumnLeft_msj6c_10"};
 
 module.exports = styles;
 //# sourceMappingURL=BodyCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,6vCAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"BodyCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+3CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
 
-insertStyle("._baseCell_1vcew_1, ._bodyCell_1vcew_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1vcew_1:focus, ._bodyCell_1vcew_1:focus, ._baseCell_1vcew_1:focus-visible, ._bodyCell_1vcew_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1vcew_10::after, ._pinnedColumnRight_1vcew_10::after, ._pinnedColumnLeft_1vcew_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1vcew_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1vcew_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._bodyCell_1vcew_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}");
-var styles = {"baseCell":"_baseCell_1vcew_1","bodyCell":"_bodyCell_1vcew_1","pinnedColumnBase":"_pinnedColumnBase_1vcew_10","pinnedColumnRight":"_pinnedColumnRight_1vcew_10","pinnedColumnLeft":"_pinnedColumnLeft_1vcew_10"};
+insertStyle("._baseCell_msj6c_1, ._bodyCell_msj6c_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_msj6c_1:focus, ._bodyCell_msj6c_1:focus, ._baseCell_msj6c_1:focus-visible, ._bodyCell_msj6c_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_msj6c_10::after, ._pinnedColumnRight_msj6c_10::after, ._pinnedColumnLeft_msj6c_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_msj6c_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_msj6c_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._bodyCell_msj6c_1 {\n  background-color: white;\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}");
+var styles = {"baseCell":"_baseCell_msj6c_1","bodyCell":"_bodyCell_msj6c_1","pinnedColumnBase":"_pinnedColumnBase_msj6c_10","pinnedColumnRight":"_pinnedColumnRight_msj6c_10","pinnedColumnLeft":"_pinnedColumnLeft_msj6c_10"};
 
 export { styles as default };
 //# sourceMappingURL=BodyCell.module.scss.js.map

package/dist/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"BodyCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,6vCAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"BodyCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Body/BodyCell/BodyCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.bodyCell {\n  @extend .baseCell;\n\n  background-color: white;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-size: var(--text-body-small-font-size);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+3CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._baseCell_1v1wo_1, ._footerCell_1v1wo_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1v1wo_1:focus, ._footerCell_1v1wo_1:focus, ._baseCell_1v1wo_1:focus-visible, ._footerCell_1v1wo_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1v1wo_10::after, ._pinnedColumnRight_1v1wo_10::after, ._pinnedColumnLeft_1v1wo_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1v1wo_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1v1wo_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._footerCell_1v1wo_1 {\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
-var styles = {"baseCell":"_baseCell_1v1wo_1","footerCell":"_footerCell_1v1wo_1","pinnedColumnBase":"_pinnedColumnBase_1v1wo_10","pinnedColumnRight":"_pinnedColumnRight_1v1wo_10","pinnedColumnLeft":"_pinnedColumnLeft_1v1wo_10"};
+___$insertStyle("._baseCell_1lipn_1, ._footerCell_1lipn_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1lipn_1:focus, ._footerCell_1lipn_1:focus, ._baseCell_1lipn_1:focus-visible, ._footerCell_1lipn_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1lipn_10::after, ._pinnedColumnRight_1lipn_10::after, ._pinnedColumnLeft_1lipn_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_1lipn_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_1lipn_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._footerCell_1lipn_1 {\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"baseCell":"_baseCell_1lipn_1","footerCell":"_footerCell_1lipn_1","pinnedColumnBase":"_pinnedColumnBase_1lipn_10","pinnedColumnRight":"_pinnedColumnRight_1lipn_10","pinnedColumnLeft":"_pinnedColumnLeft_1lipn_10"};
 
 module.exports = styles;
 //# sourceMappingURL=FooterCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n  @extend .baseCell;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,+2CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"FooterCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n  @extend .baseCell;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,i/CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
 
-insertStyle("._baseCell_1v1wo_1, ._footerCell_1v1wo_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1v1wo_1:focus, ._footerCell_1v1wo_1:focus, ._baseCell_1v1wo_1:focus-visible, ._footerCell_1v1wo_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1v1wo_10::after, ._pinnedColumnRight_1v1wo_10::after, ._pinnedColumnLeft_1v1wo_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_1v1wo_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_1v1wo_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._footerCell_1v1wo_1 {\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
-var styles = {"baseCell":"_baseCell_1v1wo_1","footerCell":"_footerCell_1v1wo_1","pinnedColumnBase":"_pinnedColumnBase_1v1wo_10","pinnedColumnRight":"_pinnedColumnRight_1v1wo_10","pinnedColumnLeft":"_pinnedColumnLeft_1v1wo_10"};
+insertStyle("._baseCell_1lipn_1, ._footerCell_1lipn_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1lipn_1:focus, ._footerCell_1lipn_1:focus, ._baseCell_1lipn_1:focus-visible, ._footerCell_1lipn_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1lipn_10::after, ._pinnedColumnRight_1lipn_10::after, ._pinnedColumnLeft_1lipn_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_1lipn_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_1lipn_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._footerCell_1lipn_1 {\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}");
+var styles = {"baseCell":"_baseCell_1lipn_1","footerCell":"_footerCell_1lipn_1","pinnedColumnBase":"_pinnedColumnBase_1lipn_10","pinnedColumnRight":"_pinnedColumnRight_1lipn_10","pinnedColumnLeft":"_pinnedColumnLeft_1lipn_10"};
 
 export { styles as default };
 //# sourceMappingURL=FooterCell.module.scss.js.map

package/dist/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"FooterCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n  @extend .baseCell;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,+2CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}
+{"version":3,"file":"FooterCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Footer/FooterCell/FooterCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.footerCell {\n  @extend .baseCell;\n\n  color: var(--text-body-small-color);\n  font-family: var(--text-body-small-font-family);\n  font-style: var(--text-body-small-font-style);\n  font-weight: var(--text-body-small-font-weight);\n  line-height: var(--text-body-small-line-height);\n\n  border-top: var(--sizes-line) solid var(--colors-secondary-blue-base);\n  background-color: var(--colors-neutral-grey-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,i/CAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA;;;;"}

package/dist/components/DataGrid/components/GridContainer/Container/Container.cjs

@@ -17,7 +17,7 @@ const borderModeClassMap = {
 /**
  * A container element, which wraps the grid and applies a border and overflow.
  */
-const Container = React__default.default.forwardRef(({ borderMode, style, children }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([Container_module.container, borderModeClassMap[borderMode]]), style: style }, children)));
+const Container = React__default.default.forwardRef(({ borderMode, className, children, ...rest }, ref) => (React__default.default.createElement("div", { ref: ref, className: buildClassnames.buildClassnames([Container_module.container, borderModeClassMap[borderMode], className]), ...rest }, children)));
 
 exports.Container = Container;
 //# sourceMappingURL=Container.cjs.map

package/dist/components/DataGrid/components/GridContainer/Container/Container.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Container.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Child elements.\n   */\n  children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n  full: styles.borderModeFull,\n  vertical: styles.borderModeVertical,\n  none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, style, children }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.container, borderModeClassMap[borderMode]])}\n      style={style}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["styles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAwBA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAEA,gBAAM,CAAC,cAAc;IAC3B,QAAQ,EAAEA,gBAAM,CAAC,kBAAkB;IACnC,IAAI,EAAEA,gBAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;MACU,SAAS,GAAGC,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,sBAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACF,gBAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9E,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}
+{"version":3,"file":"Container.cjs","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = React.HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n};\n\nconst borderModeClassMap = {\n  full: styles.borderModeFull,\n  vertical: styles.borderModeVertical,\n  none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.container, borderModeClassMap[borderMode], className])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["styles","React","buildClassnames"],"mappings":";;;;;;;;;;;AAcA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAEA,gBAAM,CAAC,cAAc;IAC3B,QAAQ,EAAEA,gBAAM,CAAC,kBAAkB;IACnC,IAAI,EAAEA,gBAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;AACU,MAAA,SAAS,GAAGC,sBAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAChDA,sBACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAEC,+BAAe,CAAC,CAACF,gBAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACrF,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;;;;"}

package/dist/components/DataGrid/components/GridContainer/Container/Container.d.ts

@@ -1,21 +1,11 @@
 import React from 'react';
 import { BorderMode } from '../../../types/enums';
-type ContainerProps = {
+/**
+ * A container element, which wraps the grid and applies a border and overflow.
+ */
+export declare const Container: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Border mode.
      */
     borderMode: BorderMode;
-    /**
-     * Additional container styles.
-     */
-    style?: React.CSSProperties;
-    /**
-     * Child elements.
-     */
-    children: React.ReactNode;
-};
-/**
- * A container element, which wraps the grid and applies a border and overflow.
- */
-export declare const Container: React.ForwardRefExoticComponent<ContainerProps & React.RefAttributes<HTMLDivElement>>;
-export {};
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/DataGrid/components/GridContainer/Container/Container.js

@@ -11,7 +11,7 @@ const borderModeClassMap = {
 /**
  * A container element, which wraps the grid and applies a border and overflow.
  */
-const Container = React__default.forwardRef(({ borderMode, style, children }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.container, borderModeClassMap[borderMode]]), style: style }, children)));
+const Container = React__default.forwardRef(({ borderMode, className, children, ...rest }, ref) => (React__default.createElement("div", { ref: ref, className: buildClassnames([styles.container, borderModeClassMap[borderMode], className]), ...rest }, children)));
 
 export { Container };
 //# sourceMappingURL=Container.js.map

package/dist/components/DataGrid/components/GridContainer/Container/Container.js.map

@@ -1 +1 @@
-{"version":3,"file":"Container.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n\n  /**\n   * Additional container styles.\n   */\n  style?: React.CSSProperties;\n\n  /**\n   * Child elements.\n   */\n  children: React.ReactNode;\n};\n\nconst borderModeClassMap = {\n  full: styles.borderModeFull,\n  vertical: styles.borderModeVertical,\n  none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, style, children }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.container, borderModeClassMap[borderMode]])}\n      style={style}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["React"],"mappings":";;;;;AAwBA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAC,kBAAkB;IACnC,IAAI,EAAE,MAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;MACU,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,GAAG,MACnCA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,CAAC,CAAC,EAC9E,KAAK,EAAE,KAAK,IAEX,QAAQ,CACL,CACP;;;;"}
+{"version":3,"file":"Container.js","sources":["../../../../../../src/components/DataGrid/components/GridContainer/Container/Container.tsx"],"sourcesContent":["import React from 'react';\n\nimport { buildClassnames } from '../../../../../utils';\nimport { BorderMode } from '../../../types/enums';\n\nimport styles from './Container.module.scss';\n\ntype ContainerProps = React.HTMLAttributes<HTMLDivElement> & {\n  /**\n   * Border mode.\n   */\n  borderMode: BorderMode;\n};\n\nconst borderModeClassMap = {\n  full: styles.borderModeFull,\n  vertical: styles.borderModeVertical,\n  none: styles.borderModeNone,\n};\n\n/**\n * A container element, which wraps the grid and applies a border and overflow.\n */\nexport const Container = React.forwardRef<HTMLDivElement, ContainerProps>(\n  ({ borderMode, className, children, ...rest }, ref) => (\n    <div\n      ref={ref}\n      className={buildClassnames([styles.container, borderModeClassMap[borderMode], className])}\n      {...rest}\n    >\n      {children}\n    </div>\n  ),\n);\n"],"names":["React"],"mappings":";;;;;AAcA,MAAM,kBAAkB,GAAG;IACzB,IAAI,EAAE,MAAM,CAAC,cAAc;IAC3B,QAAQ,EAAE,MAAM,CAAC,kBAAkB;IACnC,IAAI,EAAE,MAAM,CAAC,cAAc;CAC5B;AAED;;AAEG;AACU,MAAA,SAAS,GAAGA,cAAK,CAAC,UAAU,CACvC,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,MAChDA,cACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,eAAe,CAAC,CAAC,MAAM,CAAC,SAAS,EAAE,kBAAkB,CAAC,UAAU,CAAC,EAAE,SAAS,CAAC,CAAC,EAAA,GACrF,IAAI,EAAA,EAEP,QAAQ,CACL,CACP;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs

@@ -2,7 +2,11 @@
 
 var React = require('react');
 var index = require('../../../../theme/index.cjs');
+require('../../../../hooks/useFocusVisible.cjs');
 var buildClassnames = require('../../../../utils/buildClassnames.cjs');
+require('uid/secure');
+require('lodash.throttle');
+var useScrollPosition = require('../../../../hooks/useScrollPosition/useScrollPosition.cjs');
 var Container = require('./Container/Container.cjs');
 var GridContainer_module = require('./GridContainer.module.scss.cjs');
 var usePinnedColumnLayout = require('../../hooks/usePinnedColumnLayout.cjs');
@@ -11,7 +15,6 @@ require('../../../Stack/Stack.cjs');
 require('../../../Choice/components/styled.cjs');
 require('../../../Text/Text.cjs');
 require('../../../Checkbox/styled.cjs');
-require('uid/secure');
 require('../../../Radio/Radio.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
@@ -25,11 +28,18 @@ const gridContainerClassname = buildClassnames.buildClassnames([GridContainer_mo
  */
 const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, }) => {
     const { pinnedColumnLayoutStyles } = usePinnedColumnLayout.usePinnedColumnLayout({ table });
-    return (React__default.default.createElement(Container.Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
+    const { scrollPosition, onScroll } = useScrollPosition.useScrollPosition({ containerRef });
+    // CSS variables to control pinned column shadow visibility
+    const shadowVisibility = {
+        '--pinned-left-shadow-opacity': scrollPosition === 'start' || scrollPosition === 'none' ? 0 : 1,
+        '--pinned-right-shadow-opacity': scrollPosition === 'end' || scrollPosition === 'none' ? 0 : 1,
+    };
+    return (React__default.default.createElement(Container.Container, { ref: containerRef, borderMode: borderMode, style: containerStyles, onScroll: onScroll },
         React__default.default.createElement("table", { id: id, ref: tableRef, className: buildClassnames.buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {
                 tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
                 '--density': index.theme.sizes[density],
                 ...pinnedColumnLayoutStyles,
+                ...shadowVisibility,
             }, "aria-colcount": table.getFlatHeaders().length, "aria-rowcount": table.getRowCount(), "aria-label": ariaLabel }, children)));
 };
 

package/dist/components/DataGrid/components/GridContainer/GridContainer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;AA+DA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEC,sBAAA,CAAA,aAAA,CAACC,mBAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;QAC1ED,sBACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEH,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEK,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.cjs","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': scrollPosition === 'start' || scrollPosition === 'none' ? 0 : 1,\n    '--pinned-right-shadow-opacity': scrollPosition === 'end' || scrollPosition === 'none' ? 0 : 1,\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["buildClassnames","styles","usePinnedColumnLayout","useScrollPosition","React","Container","theme"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAGA,+BAAe,CAAC,CAACC,oBAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAGC,2CAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAGC,mCAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;AAGxE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC;AAC/F,QAAA,+BAA+B,EAAE,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC;KAC/F;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,mBAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBD,sBACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAEJ,+BAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAEM,WAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/GridContainer/GridContainer.js

@@ -1,6 +1,10 @@
 import React__default from 'react';
 import { theme } from '../../../../theme/index.js';
+import '../../../../hooks/useFocusVisible.js';
 import { buildClassnames } from '../../../../utils/buildClassnames.js';
+import 'uid/secure';
+import 'lodash.throttle';
+import { useScrollPosition } from '../../../../hooks/useScrollPosition/useScrollPosition.js';
 import { Container } from './Container/Container.js';
 import styles from './GridContainer.module.scss.js';
 import { usePinnedColumnLayout } from '../../hooks/usePinnedColumnLayout.js';
@@ -9,7 +13,6 @@ import '../../../Stack/Stack.js';
 import '../../../Choice/components/styled.js';
 import '../../../Text/Text.js';
 import '../../../Checkbox/styled.js';
-import 'uid/secure';
 import '../../../Radio/Radio.js';
 
 const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);
@@ -19,11 +22,18 @@ const gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid
  */
 const GridContainer = ({ containerRef, tableRef, borderMode, containerStyles, ariaRoles, enableResizeableColumns, density, table, children, id, className, 'aria-label': ariaLabel, }) => {
     const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });
-    return (React__default.createElement(Container, { ref: containerRef, borderMode: borderMode, style: containerStyles },
+    const { scrollPosition, onScroll } = useScrollPosition({ containerRef });
+    // CSS variables to control pinned column shadow visibility
+    const shadowVisibility = {
+        '--pinned-left-shadow-opacity': scrollPosition === 'start' || scrollPosition === 'none' ? 0 : 1,
+        '--pinned-right-shadow-opacity': scrollPosition === 'end' || scrollPosition === 'none' ? 0 : 1,
+    };
+    return (React__default.createElement(Container, { ref: containerRef, borderMode: borderMode, style: containerStyles, onScroll: onScroll },
         React__default.createElement("table", { id: id, ref: tableRef, className: buildClassnames([gridContainerClassname, className]), role: ariaRoles.table, style: {
                 tableLayout: enableResizeableColumns ? 'fixed' : 'auto',
                 '--density': theme.sizes[density],
                 ...pinnedColumnLayoutStyles,
+                ...shadowVisibility,
             }, "aria-colcount": table.getFlatHeaders().length, "aria-rowcount": table.getRowCount(), "aria-label": ariaLabel }, children)));
 };
 

package/dist/components/DataGrid/components/GridContainer/GridContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n\n  return (\n    <Container ref={containerRef} borderMode={borderMode} style={containerStyles}>\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;AA+DA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AAErE,IAAA,QACEA,cAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,GAAG,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,KAAK,EAAE,eAAe,EAAA;QAC1EA,cACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AACX,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}
+{"version":3,"file":"GridContainer.js","sources":["../../../../../src/components/DataGrid/components/GridContainer/GridContainer.tsx"],"sourcesContent":["import React, { RefObject, CSSProperties, ReactNode, AriaAttributes } from 'react';\nimport { Table } from '@tanstack/react-table';\n\nimport { theme } from 'Theme';\nimport { SizeScale } from 'Theme/modules/sizes';\n\nimport { useScrollPosition } from '../../../../hooks';\nimport { BorderMode } from '../../types/enums';\nimport { AriaRoles } from '../../types';\nimport { buildClassnames } from '../../../../utils/buildClassnames';\n\nimport { Container } from './Container';\n\nimport styles from './GridContainer.module.scss';\nimport { usePinnedColumnLayout } from '../../hooks';\n\ntype GridContainerProps = Pick<AriaAttributes, 'aria-label'> &\n  Pick<React.HTMLAttributes<HTMLTableElement>, 'id' | 'className'> & {\n    /**\n     * Reference to be used for the outer container element.\n     */\n    containerRef?: RefObject<HTMLDivElement>;\n\n    /**\n     * Reference to be used for the table element.\n     */\n    tableRef?: RefObject<HTMLTableElement>;\n\n    /**\n     * Border mode.\n     */\n    borderMode: BorderMode;\n\n    /**\n     * Additional container styles.\n     */\n    containerStyles?: CSSProperties;\n\n    /**\n     * ARIA roles used in the grid.\n     */\n    ariaRoles: AriaRoles;\n\n    /**\n     * Whether resizeable columns are enabled or not.\n     */\n    enableResizeableColumns: boolean;\n\n    /**\n     * Density of the grid.\n     */\n    density: keyof SizeScale;\n\n    /**\n     * The TanStack Table instance.\n     */\n    table: Table<any>;\n\n    /**\n     * Child elements (table contents).\n     */\n    children: ReactNode;\n  };\n\nconst gridContainerClassname = buildClassnames([styles.dataGridStyle, 'data-grid']);\n\n/**\n * The Grid container, which includes a wrapper and the table element itself. Controls table layout, applies\n * styling and sets table-specific CSS variables (such as density).\n */\nexport const GridContainer = ({\n  containerRef,\n  tableRef,\n  borderMode,\n  containerStyles,\n  ariaRoles,\n  enableResizeableColumns,\n  density,\n  table,\n  children,\n  id,\n  className,\n  'aria-label': ariaLabel,\n}: GridContainerProps) => {\n  const { pinnedColumnLayoutStyles } = usePinnedColumnLayout({ table });\n  const { scrollPosition, onScroll } = useScrollPosition({ containerRef });\n\n  // CSS variables to control pinned column shadow visibility\n  const shadowVisibility = {\n    '--pinned-left-shadow-opacity': scrollPosition === 'start' || scrollPosition === 'none' ? 0 : 1,\n    '--pinned-right-shadow-opacity': scrollPosition === 'end' || scrollPosition === 'none' ? 0 : 1,\n  };\n\n  return (\n    <Container\n      ref={containerRef}\n      borderMode={borderMode}\n      style={containerStyles}\n      onScroll={onScroll}\n    >\n      <table\n        id={id}\n        ref={tableRef}\n        className={buildClassnames([gridContainerClassname, className])}\n        role={ariaRoles.table}\n        style={\n          {\n            tableLayout: enableResizeableColumns ? 'fixed' : 'auto',\n            '--density': theme.sizes[density],\n            ...pinnedColumnLayoutStyles,\n            ...shadowVisibility,\n          } as CSSProperties\n        }\n        aria-colcount={table.getFlatHeaders().length}\n        aria-rowcount={table.getRowCount()}\n        aria-label={ariaLabel}\n      >\n        {children}\n      </table>\n    </Container>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;;;;;;;;;;AAgEA,MAAM,sBAAsB,GAAG,eAAe,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,WAAW,CAAC,CAAC;AAEnF;;;AAGG;AACI,MAAM,aAAa,GAAG,CAAC,EAC5B,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,eAAe,EACf,SAAS,EACT,uBAAuB,EACvB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,EAAE,EACF,SAAS,EACT,YAAY,EAAE,SAAS,GACJ,KAAI;IACvB,MAAM,EAAE,wBAAwB,EAAE,GAAG,qBAAqB,CAAC,EAAE,KAAK,EAAE,CAAC;AACrE,IAAA,MAAM,EAAE,cAAc,EAAE,QAAQ,EAAE,GAAG,iBAAiB,CAAC,EAAE,YAAY,EAAE,CAAC;;AAGxE,IAAA,MAAM,gBAAgB,GAAG;AACvB,QAAA,8BAA8B,EAAE,cAAc,KAAK,OAAO,IAAI,cAAc,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC;AAC/F,QAAA,+BAA+B,EAAE,cAAc,KAAK,KAAK,IAAI,cAAc,KAAK,MAAM,GAAG,CAAC,GAAG,CAAC;KAC/F;AAED,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,SAAS,IACR,GAAG,EAAE,YAAY,EACjB,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,eAAe,EACtB,QAAQ,EAAE,QAAQ,EAAA;QAElBA,cACE,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,QAAQ,EACb,SAAS,EAAE,eAAe,CAAC,CAAC,sBAAsB,EAAE,SAAS,CAAC,CAAC,EAC/D,IAAI,EAAE,SAAS,CAAC,KAAK,EACrB,KAAK,EACH;gBACE,WAAW,EAAE,uBAAuB,GAAG,OAAO,GAAG,MAAM;AACvD,gBAAA,WAAW,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC;AACjC,gBAAA,GAAG,wBAAwB;AAC3B,gBAAA,GAAG,gBAAgB;AACH,aAAA,EAAA,eAAA,EAEL,KAAK,CAAC,cAAc,EAAE,CAAC,MAAM,mBAC7B,KAAK,CAAC,WAAW,EAAE,gBACtB,SAAS,EAAA,EAEpB,QAAQ,CACH,CACE;AAEhB;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs

@@ -2,8 +2,8 @@
 
 var ___$insertStyle = require('../../../../../_virtual/____insertStyle.cjs');
 
-___$insertStyle("._baseCell_h19s0_1, ._headerCell_h19s0_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_h19s0_1:focus, ._headerCell_h19s0_1:focus, ._baseCell_h19s0_1:focus-visible, ._headerCell_h19s0_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_h19s0_10::after, ._pinnedColumnRight_h19s0_10::after, ._pinnedColumnLeft_h19s0_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_h19s0_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_h19s0_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._headerCell_h19s0_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_h19s0_37, ._clickableHeaderContent_h19s0_37 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._headerOverflow_h19s0_50 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_h19s0_37 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_h19s0_37:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n}\n._clickableHeaderContent_h19s0_37:hover ._sortIcon_h19s0_68 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_h19s0_68 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
-var styles = {"baseCell":"_baseCell_h19s0_1","headerCell":"_headerCell_h19s0_1","pinnedColumnBase":"_pinnedColumnBase_h19s0_10","pinnedColumnRight":"_pinnedColumnRight_h19s0_10","pinnedColumnLeft":"_pinnedColumnLeft_h19s0_10","headerContent":"_headerContent_h19s0_37","clickableHeaderContent":"_clickableHeaderContent_h19s0_37","headerOverflow":"_headerOverflow_h19s0_50","sortIcon":"_sortIcon_h19s0_68"};
+___$insertStyle("._baseCell_1xd7o_1, ._headerCell_1xd7o_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1xd7o_1:focus, ._headerCell_1xd7o_1:focus, ._baseCell_1xd7o_1:focus-visible, ._headerCell_1xd7o_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1xd7o_10::after, ._pinnedColumnRight_1xd7o_10::after, ._pinnedColumnLeft_1xd7o_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_1xd7o_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_1xd7o_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._headerCell_1xd7o_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_1xd7o_40, ._clickableHeaderContent_1xd7o_40 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._headerOverflow_1xd7o_53 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_1xd7o_40 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_1xd7o_40:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n}\n._clickableHeaderContent_1xd7o_40:hover ._sortIcon_1xd7o_71 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_1xd7o_71 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"baseCell":"_baseCell_1xd7o_1","headerCell":"_headerCell_1xd7o_1","pinnedColumnBase":"_pinnedColumnBase_1xd7o_10","pinnedColumnRight":"_pinnedColumnRight_1xd7o_10","pinnedColumnLeft":"_pinnedColumnLeft_1xd7o_10","headerContent":"_headerContent_1xd7o_40","clickableHeaderContent":"_clickableHeaderContent_1xd7o_40","headerOverflow":"_headerOverflow_1xd7o_53","sortIcon":"_sortIcon_1xd7o_71"};
 
 module.exports = styles;
 //# sourceMappingURL=HeaderCell.module.scss.cjs.map

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n  @extend .baseCell;\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density) var(--sizes-2);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  @extend .headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px\n      var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,g6EAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"HeaderCell.module.scss.cjs","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n  @extend .baseCell;\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density) var(--sizes-2);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  @extend .headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px\n      var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":[],"mappings":";;;;AACE,eAAA,CAAA,kiFAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js

@@ -1,7 +1,7 @@
 import insertStyle from '../../../../../_virtual/____insertStyle.js';
 
-insertStyle("._baseCell_h19s0_1, ._headerCell_h19s0_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_h19s0_1:focus, ._headerCell_h19s0_1:focus, ._baseCell_h19s0_1:focus-visible, ._headerCell_h19s0_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_h19s0_10::after, ._pinnedColumnRight_h19s0_10::after, ._pinnedColumnLeft_h19s0_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n}\n\n._pinnedColumnLeft_h19s0_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._pinnedColumnRight_h19s0_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n}\n\n._headerCell_h19s0_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_h19s0_37, ._clickableHeaderContent_h19s0_37 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._headerOverflow_h19s0_50 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_h19s0_37 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_h19s0_37:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n}\n._clickableHeaderContent_h19s0_37:hover ._sortIcon_h19s0_68 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_h19s0_68 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
-var styles = {"baseCell":"_baseCell_h19s0_1","headerCell":"_headerCell_h19s0_1","pinnedColumnBase":"_pinnedColumnBase_h19s0_10","pinnedColumnRight":"_pinnedColumnRight_h19s0_10","pinnedColumnLeft":"_pinnedColumnLeft_h19s0_10","headerContent":"_headerContent_h19s0_37","clickableHeaderContent":"_clickableHeaderContent_h19s0_37","headerOverflow":"_headerOverflow_h19s0_50","sortIcon":"_sortIcon_h19s0_68"};
+insertStyle("._baseCell_1xd7o_1, ._headerCell_1xd7o_1 {\n  position: relative;\n  box-sizing: border-box;\n}\n._baseCell_1xd7o_1:focus, ._headerCell_1xd7o_1:focus, ._baseCell_1xd7o_1:focus-visible, ._headerCell_1xd7o_1:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: inset var(--sizes-none) var(--sizes-none) var(--sizes-none) var(--sizes-line) var(--colors-secondary-blue-base);\n}\n\n._pinnedColumnBase_1xd7o_10::after, ._pinnedColumnRight_1xd7o_10::after, ._pinnedColumnLeft_1xd7o_10::after {\n  position: absolute;\n  top: var(--sizes-none);\n  bottom: -1px;\n  width: 30px;\n  content: \"\";\n  pointer-events: none;\n  box-sizing: border-box;\n  transition: opacity 0.3s;\n}\n\n._pinnedColumnLeft_1xd7o_10::after {\n  transform: translate(100%);\n  right: var(--sizes-none);\n  box-shadow: inset 10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-left-shadow-opacity, 1);\n}\n\n._pinnedColumnRight_1xd7o_10::after {\n  transform: translate(-100%);\n  left: var(--sizes-none);\n  box-shadow: inset -10px 0px 10px -8px rgba(0, 0, 0, 0.25);\n  opacity: var(--pinned-right-shadow-opacity, 1);\n}\n\n._headerCell_1xd7o_1 {\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n._headerContent_1xd7o_40, ._clickableHeaderContent_1xd7o_40 {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n  padding: var(--density) var(--sizes-2);\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n._headerOverflow_1xd7o_53 {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n._clickableHeaderContent_1xd7o_40 {\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n}\n._clickableHeaderContent_1xd7o_40:focus-visible {\n  outline: var(--sizes-none);\n  box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px var(--colors-secondary-blue-light);\n}\n._clickableHeaderContent_1xd7o_40:hover ._sortIcon_1xd7o_71 {\n  background-color: var(--colors-neutral-grey-light);\n  color: var(--colors-neutral-ink-base);\n}\n\n._sortIcon_1xd7o_71 {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}");
+var styles = {"baseCell":"_baseCell_1xd7o_1","headerCell":"_headerCell_1xd7o_1","pinnedColumnBase":"_pinnedColumnBase_1xd7o_10","pinnedColumnRight":"_pinnedColumnRight_1xd7o_10","pinnedColumnLeft":"_pinnedColumnLeft_1xd7o_10","headerContent":"_headerContent_1xd7o_40","clickableHeaderContent":"_clickableHeaderContent_1xd7o_40","headerOverflow":"_headerOverflow_1xd7o_53","sortIcon":"_sortIcon_1xd7o_71"};
 
 export { styles as default };
 //# sourceMappingURL=HeaderCell.module.scss.js.map

package/dist/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss.js.map

@@ -1 +1 @@
-{"version":3,"file":"HeaderCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n  @extend .baseCell;\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density) var(--sizes-2);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  @extend .headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px\n      var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,g6EAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}
+{"version":3,"file":"HeaderCell.module.scss.js","sources":["../../../../../../src/components/DataGrid/components/Header/HeaderCell/HeaderCell.module.scss"],"sourcesContent":["@use '../../../DataGrid.module.scss';\n\n.headerCell {\n  @extend .baseCell;\n\n  background-color: white;\n  border-bottom: var(--sizes-line) solid var(--colors-neutral-grey-base);\n}\n\n.headerContent {\n  display: flex;\n  align-items: center;\n  gap: var(--sizes-sm);\n  white-space: nowrap;\n\n  padding: var(--density) var(--sizes-2);\n\n  color: var(--text-heading-table-color);\n  font-family: var(--text-heading-table-font-family);\n  font-size: var(--text-heading-table-font-size);\n  font-weight: var(--text-heading-table-font-weight);\n  line-height: var(--text-heading-table-line-height);\n}\n\n.headerOverflow {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.clickableHeaderContent {\n  @extend .headerContent;\n\n  appearance: none;\n  background-color: transparent;\n  cursor: pointer;\n\n  border: var(--sizes-none);\n  border-radius: var(--sizes-sm);\n  width: 100%;\n\n  &:focus-visible {\n    outline: var(--sizes-none);\n    box-shadow: var(--sizes-none) var(--sizes-none) var(--sizes-none) 2px\n      var(--colors-secondary-blue-light);\n  }\n\n  &:hover {\n    .sortIcon {\n      background-color: var(--colors-neutral-grey-light);\n      color: var(--colors-neutral-ink-base);\n    }\n  }\n}\n\n.sortIcon {\n  width: var(--sizes-4);\n  height: var(--sizes-4);\n\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  background-color: white;\n  color: var(--colors-neutral-ink-lightest);\n}\n"],"names":["___$insertStyle"],"mappings":";;AACEA,WAAA,CAAA,kiFAAA;AACA,aAAA,CAAA,UAAA,CAAA,mBAAA,CAAA,YAAA,CAAA,qBAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,mBAAA,CAAA,6BAAA,CAAA,kBAAA,CAAA,4BAAA,CAAA,eAAA,CAAA,yBAAA,CAAA,wBAAA,CAAA,kCAAA,CAAA,gBAAA,CAAA,0BAAA,CAAA,UAAA,CAAA,oBAAA;;;;"}

package/dist/components/DataTable/DataTable.cjs

@@ -7,6 +7,7 @@ require('../../hooks/useFocusVisible.cjs');
 require('uid/secure');
 var useDragToScroll = require('../../hooks/useDragToScroll.cjs');
 require('lodash.throttle');
+var useScrollPosition = require('../../hooks/useScrollPosition/useScrollPosition.cjs');
 var generateTableCss = require('./utils/generateTableCss.cjs');
 require('./types.cjs');
 require('../../theme/modules/sizes.cjs');
@@ -16,7 +17,6 @@ require('styled-components');
 var InfoIcon = require('../../icons/design-system/components/InfoIcon.cjs');
 var useCellWidths = require('./hooks/useCellWidths.cjs');
 var useColumns = require('./hooks/useColumns.cjs');
-var useScrollPosition = require('./hooks/useScrollPosition.cjs');
 var useSelection = require('./hooks/useSelection.cjs');
 var renderCell = require('./renderers/renderCell.cjs');
 var renderFooter = require('./renderers/renderFooter.cjs');
@@ -76,7 +76,7 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
         ? visible.map((col, i) => Number.isNaN(calcColumnWidths[col.id] || '') ? cellWidths[i] : calcColumnWidths[col.id])
         : cellWidths;
     // Generate styles
-    const { scrollPosition } = useScrollPosition.useScrollPosition(scrollContainerRef);
+    const { scrollPosition, onScroll } = useScrollPosition.useScrollPosition({ containerRef: scrollContainerRef });
     const tableCss = generateTableCss.generateTableCss({
         pinnedLeft,
         pinnedRight,
@@ -94,7 +94,7 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
             data: null,
         }));
         return (React__default.default.createElement(Wrapper.Wrapper, { borderMode: borderMode },
-            React__default.default.createElement(ScrollContainer.ScrollContainer, { ref: scrollContainerRef },
+            React__default.default.createElement(ScrollContainer.ScrollContainer, { ref: scrollContainerRef, onScroll: onScroll },
                 React__default.default.createElement(TableGrid.TableGrid, { css: tableCss, ref: tableRef, role: "table" },
                     React__default.default.createElement("thead", { role: "rowgroup" },
                         React__default.default.createElement(Row.Row, { role: "row" }, visible.map((column, i) => renderHeader.renderHeader({
@@ -110,7 +110,7 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
     }
     if (rows.length === 0) {
         return (React__default.default.createElement(Wrapper.Wrapper, { borderMode: borderMode },
-            React__default.default.createElement(ScrollContainer.ScrollContainer, { ref: scrollContainerRef },
+            React__default.default.createElement(ScrollContainer.ScrollContainer, { ref: scrollContainerRef, onScroll: onScroll },
                 React__default.default.createElement(TableGrid.TableGrid, { css: tableCss, ref: tableRef, role: "table" },
                     React__default.default.createElement("thead", { role: "rowgroup" },
                         React__default.default.createElement(Row.Row, { role: "row" }, visible.map((column, i) => renderHeader.renderHeader({
@@ -179,7 +179,7 @@ const DataTable = ({ actionBarSlot, borderMode, columns: initialColumns, emptySt
     const shouldRenderActionBar = selectedRowIds.length > 0 && !!actionBarSlot;
     return (React__default.default.createElement(Wrapper.Wrapper, { borderMode: borderMode },
         shouldRenderActionBar && (React__default.default.createElement(ActionBar.ActionBar, { selectionColumn: selectionColumn, intersectionTargetRef: intersectionTargetRef, containerRef: scrollContainerRef }, actionBarSlot)),
-        React__default.default.createElement(ScrollContainer.ScrollContainer, { ref: scrollContainerRef },
+        React__default.default.createElement(ScrollContainer.ScrollContainer, { ref: scrollContainerRef, onScroll: onScroll },
             enableStickyHeader && (React__default.default.createElement(StickyHead.StickyHead, { tableCss: tableCss, intersectionTargetRef: intersectionTargetRef, containerRef: scrollContainerRef, cellWidths: adjustedCellWidths, stickyHeaderTop: stickyHeaderTop }, headersMarkup)),
             React__default.default.createElement("div", { ref: intersectionTargetRef, style: { height: 0 } }),
             React__default.default.createElement(TableGrid.TableGrid, { css: tableCss, ref: tableRef, role: "table" },