@atlaskit/dynamic-table 18.0.1 → 18.0.3

package/dist/esm/styled/loading-container-advanced.js

@@ -1,58 +1,41 @@
+/* loading-container-advanced.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["children", "testId"];
+import "./loading-container-advanced.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 /* eslint-disable @repo/internal/react/require-jsdoc */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+
 import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-var containerStyles = css({
-  position: 'relative',
-  marginBlockEnd: "var(--ds-space-300, 24px)"
-});
+
+var containerStyles = null;
 export var Container = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
     testId = props.testId,
     rest = _objectWithoutProperties(props, _excluded);
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx("div", _extends({
-      css: containerStyles
-    }, rest, {
-      "data-testid": testId,
-      ref: ref
-    }), children)
-  );
-});
-var spinnerBackdropStyles = css({
-  display: 'flex',
-  position: 'absolute',
-  inset: 0,
-  alignItems: 'center',
-  justifyContent: 'center',
-  pointerEvents: 'none'
+  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+    "data-testid": testId,
+    ref: ref,
+    className: ax(["_kqswh2mm _6rth1ejb"])
+  }), children);
 });
+var spinnerBackdropStyles = null;
 export var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  return jsx("div", {
-    css: spinnerBackdropStyles,
-    "data-testid": testId && "".concat(testId, "--spinner-backdrop")
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId && "".concat(testId, "--spinner-backdrop"),
+    className: ax(["_1r04idpf _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o _lcxvglyw"])
   }, children);
 };
-var spinnerContainerStyles = css({
-  position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  insetBlockStart: 0
-});
+var spinnerContainerStyles = null;
 export var SpinnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var children = _ref2.children;
-  return jsx("div", {
-    css: spinnerContainerStyles,
-    ref: ref
+  return /*#__PURE__*/React.createElement("div", {
+    ref: ref,
+    className: ax(["_kqswh2mm _152tidpf"])
   }, children);
 });

package/dist/esm/styled/loading-container.compiled.css

@@ -0,0 +1,8 @@
+
+._1r04idpf{inset:0}._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._4cvr1h6o{align-items:center}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}
+._tzy47hfw{opacity:var(--_cnddr8)}

package/dist/esm/styled/loading-container.js

@@ -1,51 +1,43 @@
+/* loading-container.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./loading-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+
 export var CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
-var containerStyles = css({
-  position: 'relative'
-});
+var containerStyles = null;
 export var Container = function Container(_ref) {
   var children = _ref.children,
     testId = _ref.testId;
-  return jsx("div", {
-    css: containerStyles,
-    "data-testid": testId && "".concat(testId, "--container")
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId && "".concat(testId, "--container"),
+    className: ax(["_kqswh2mm"])
   }, children);
 };
-var contentsContainerStyles = css({
-  opacity: "var(".concat(CSS_VAR_CONTENTS_OPACITY, ")"),
-  pointerEvents: 'none'
-});
+var contentsContainerStyles = null;
 export var ContentsContainer = function ContentsContainer(_ref2) {
   var children = _ref2.children,
     contentsOpacity = _ref2.contentsOpacity,
     testId = _ref2.testId;
-  return jsx("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    style: _defineProperty({}, CSS_VAR_CONTENTS_OPACITY, contentsOpacity),
-    css: [contentsContainerStyles],
-    "data-testid": testId && "".concat(testId, "--contents--container")
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId && "".concat(testId, "--contents--container"),
+    className: ax(["_tzy47hfw _lcxvglyw"]),
+    style: _objectSpread(_objectSpread({}, _defineProperty({}, CSS_VAR_CONTENTS_OPACITY, contentsOpacity)), {}, {
+      "--_cnddr8": ix("var(".concat(CSS_VAR_CONTENTS_OPACITY, ")"))
+    })
   }, children);
 };
-var spinnerContainerStyles = css({
-  display: 'flex',
-  position: 'absolute',
-  inset: 0,
-  alignItems: 'center',
-  justifyContent: 'center'
-});
-export var SpinnerContainer = function SpinnerContainer(_ref4) {
-  var children = _ref4.children,
-    testId = _ref4.testId;
-  return jsx("div", {
-    css: spinnerContainerStyles,
-    "data-testid": testId && "".concat(testId, "--spinner--container")
+var spinnerContainerStyles = null;
+export var SpinnerContainer = function SpinnerContainer(_ref3) {
+  var children = _ref3.children,
+    testId = _ref3.testId;
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": testId && "".concat(testId, "--spinner--container"),
+    className: ax(["_1r04idpf _1e0c1txw _kqswstnw _4cvr1h6o _1bah1h6o"])
   }, children);
 };

package/dist/esm/styled/rankable/table-cell.compiled.css

@@ -0,0 +1 @@
+._vchhusvi{box-sizing:border-box}

package/dist/esm/styled/rankable/table-cell.js

@@ -1,27 +1,22 @@
+/* table-cell.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isRanking", "innerRef"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
+import "./table-cell.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+
 import { TableBodyCell } from '../table-cell';
-var rankingStyles = css({
-  boxSizing: 'border-box'
-});
+var rankingStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var RankableTableBodyCell = function RankableTableBodyCell(_ref) {
   var isRanking = _ref.isRanking,
     innerRef = _ref.innerRef,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx(TableBodyCell, _extends({
-    css: isRanking && rankingStyles
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props, {
-    innerRef: innerRef
+  return /*#__PURE__*/React.createElement(TableBodyCell, _extends({}, props, {
+    innerRef: innerRef,
+    className: ax([isRanking && "_vchhusvi"])
   }));
 };

package/dist/esm/styled/rankable/table-row.compiled.css

@@ -0,0 +1,7 @@
+
+._2rkogqwt{border-radius:var(--ds-border-radius-050,2px)}._12y3ssc3{outline-width:var(--ds-border-width,2px)}
+._16qs1dt4{box-shadow:var(--_qzf6oc)}
+._1e0c1ule{display:block}
+._bfhk1rd0{background-color:var(--_14yez9t)}
+._mizu1tqa:focus-visible{outline-color:var(--_9ksfq)}
+._ra3xnqa1:focus-visible{outline-style:solid}

package/dist/esm/styled/rankable/table-row.js

@@ -1,31 +1,19 @@
+/* table-row.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isRanking", "isRankingItem", "testId"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+import "./table-row.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+
 import { B100, N20, N50A, N60A } from '@atlaskit/theme/colors';
 import { TableBodyRow } from '../table-row';
-var rankingStyles = css({
-  display: 'block'
-});
-var rankingItemStyles = css({
-  backgroundColor: "var(--ds-surface-overlay, ".concat(N20, ")"),
-  borderRadius: "var(--ds-border-radius-050, 2px)",
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
-});
-var draggableStyles = css({
-  outlineWidth: "var(--ds-border-width, 2px)",
-  '&:focus-visible': {
-    outlineColor: "var(--ds-border-focused, ".concat(B100, ")"),
-    outlineStyle: 'solid'
-  }
-});
+var rankingStyles = null;
+var rankingItemStyles = null;
+var draggableStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var RankableTableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -33,9 +21,15 @@ export var RankableTableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isRankingItem = _ref.isRankingItem,
     testId = _ref.testId,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx(TableBodyRow, _extends({
-    css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
+  return /*#__PURE__*/React.createElement(TableBodyRow, _extends({
     ref: ref,
     testId: testId
-  }, props));
+  }, props, {
+    className: ax([isRanking && "_1e0c1ule", isRankingItem && "_2rkogqwt _bfhk1rd0 _16qs1dt4", "_12y3ssc3 _mizu1tqa _ra3xnqa1"]),
+    style: {
+      "--_14yez9t": ix("var(--ds-surface-overlay, ".concat(N20, ")")),
+      "--_qzf6oc": ix("var(--ds-shadow-overlay, ".concat("0 20px 32px -8px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")),
+      "--_9ksfq": ix("var(--ds-border-focused, ".concat(B100, ")"))
+    }
+  }));
 });

package/dist/esm/styled/table-cell.compiled.css

@@ -0,0 +1,13 @@
+
+._19itglyw{border:none}._18m915vq{overflow-y:hidden}
+._1bsb8a2a{width:var(--local-dynamic-table-width)}
+._1bto1l2s{text-overflow:ellipsis}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1reo15vq{overflow-x:hidden}
+._1s37ze3t:first-of-type{padding-inline-start:var(--ds-space-0,0)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._o5721q9c{white-space:nowrap}
+._uupyze3t:last-child{padding-inline-end:var(--ds-space-0,0)}
+._y3gn1e5h{text-align:left}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}

package/dist/esm/styled/table-cell.js

@@ -1,14 +1,15 @@
+/* table-cell.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["width", "isFixedSize", "shouldTruncate", "innerRef"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
-import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
+import "./table-cell.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { getTruncationStyleVars } from './constants';
+var fixedSizeTruncateStyles = null;
+var overflowTruncateStyles = null;
+var truncationWidthStyles = null;
+var cellStyles = null;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var TableBodyCell = function TableBodyCell(_ref) {
@@ -17,24 +18,17 @@ export var TableBodyCell = function TableBodyCell(_ref) {
     shouldTruncate = _ref.shouldTruncate,
     innerRef = _ref.innerRef,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("td", _extends({
+  return /*#__PURE__*/React.createElement("td", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     style: getTruncationStyleVars({
       width: width
     }),
-    css: [
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    truncationWidthStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    isFixedSize && shouldTruncate && fixedSizeTruncateStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    isFixedSize && overflowTruncateStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
-    cellStyles]
     // HOC withDimensions complains about the types but it is working fine
     // @ts-ignore
-    ,
     ref: innerRef
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    ,
+    className: ax(["_1bsb8a2a", isFixedSize && shouldTruncate && "_1bto1l2s _o5721q9c", isFixedSize && "_1reo15vq _18m915vq", "_19itglyw _85i51b66 _1q511b66 _y4tiu2gc _bozgu2gc _y3gn1e5h _1s37ze3t _uupyze3t", props.className])
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };

package/dist/esm/styled/table-head.compiled.css

@@ -0,0 +1,58 @@
+
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._173zglyw>button{background:none}
+._pw6dglyw>button{border:none}
+._1xgk1j28>button:after, ._1wfn1j28>button:before{border-color:transparent}
+._sklb1l7b>button:after, ._1j091l7b>button:before{border-width:3px}
+._y9yonqa1>button:after, ._997wnqa1>button:before{border-style:solid}
+._h7alglyw{border-inline:none}
+._izbqglyw{border-block:none}
+._179rglyw{border-block-end:none}
+._179rralu{border-block-end:var(--_k02y3n)}
+._191wglyw{border-inline-start:none}
+._c77k1f6e>button:before{border-block-end:var(--_1rdacuj)}
+._c77k2wk4>button:before{border-block-end:var(--_1qca9zt)}
+._f4731f6e>button:after{border-block-start:var(--_1rdacuj)}
+._f4732wk4>button:after{border-block-start:var(--_1qca9zt)}
+._mqm2glyw{border-block-start:none}
+._t51zglyw{border-inline-end:none}._10pp1kw7>button{font-weight:inherit}
+._14gsx0bf>button:after, ._cigmx0bf>button:before{inset-inline-end:var(--ds-space-negative-100,-8px)}
+._18m915vq{overflow-y:hidden}
+._19w61ule>button:after, ._1w611ule>button:before{display:block}
+._1ay31kw7>button{cursor:inherit}
+._1bsb8a2a{width:var(--local-dynamic-table-width)}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1ule{display:block}
+._1fpyidpf>button:after{inset-block-end:0}
+._1hvvidpf>button:after, ._n56nidpf>button:before{width:0}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1reo15vq{overflow-x:hidden}
+._1s37ze3t:first-of-type{padding-inline-start:var(--ds-space-0,0)}
+._1yw3ze3t>button{padding-block-end:var(--ds-space-0,0)}
+._4b5mb3bt>button:after, ._hn3bb3bt>button:before{content:""}
+._58ej1kw7>button{color:inherit}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._8607ze3t>button{padding-inline-end:var(--ds-space-0,0)}
+._a04fh2mm>button{position:relative}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._kqswh2mm{position:relative}
+._mdbq1kw7>button{font-size:inherit}
+._n2fdze3t>button{padding-block-start:var(--ds-space-0,0)}
+._no7mstnw>button:after, ._qh32stnw>button:before{position:absolute}
+._o5721q9c{white-space:nowrap}
+._qzvtu2gc>button:before{inset-block-end:var(--ds-space-100,8px)}
+._s7n4jp4b{vertical-align:top}
+._s7n4nkob{vertical-align:middle}
+._syaz12fi{color:var(--_17ckjys)}
+._szhwze3t>button{padding-inline-start:var(--ds-space-0,0)}
+._uupyze3t:last-child{padding-inline-end:var(--ds-space-0,0)}
+._vchhusvi{box-sizing:border-box}
+._wyc4idpf>button:after, ._1d4oidpf>button:before{height:0}
+._xv14glyw>button{-webkit-appearance:none;appearance:none}
+._y3gn1e5h{text-align:left}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}
+._1ygbuwsq:focus-visible{outline:var(--_jz8ahf)}
+._d0altlke:hover{cursor:pointer}
+._irr3bfnf:hover{background-color:var(--_6j4ewu)}
+@media (forced-colors:active){._142s94yt>button:before{border-block-end:3px solid Highlight}._17x894yt>button:after{border-block-start:3px solid Highlight}._1g2wwc43>button:after, ._ze9fwc43>button:before{border-color:Canvas}._1lcgnqa1>button:after, ._at5qnqa1>button:before{border-style:solid}._o4d71l7b>button:after, ._npl51l7b>button:before{border-width:3px}._1rp11onz>button:before{border-block-end-color:CanvasText}._1iornqa1>button:before{border-block-end-style:solid}._oi051l7b>button:before{border-block-end-width:3px}._1ehx1onz>button:after{border-block-start-color:CanvasText}._19t8nqa1>button:after{border-block-start-style:solid}._1bog1l7b>button:after{border-block-start-width:3px}}

package/dist/esm/styled/table-head.js

@@ -1,165 +1,48 @@
+/* table-head.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["isRanking", "testId"],
   _excluded2 = ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style", "testId"];
+import "./table-head.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /* eslint-disable @repo/internal/react/require-jsdoc */
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+
 import { forwardRef } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+
 import { fg } from '@atlaskit/platform-feature-flags';
-import { B100, N30A } from '@atlaskit/theme/colors';
+import { B100, N300, N30A, N40 } from '@atlaskit/theme/colors';
 import { ASC, DESC } from '../internal/constants';
-import { arrow, head, MSThemeColors, tableBorder } from '../theme';
-import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
+import { getTruncationStyleVars } from './constants';
 var CSS_VAR_TEXT_COLOR = '--local-dynamic-table-text-color';
-var rankingStyles = css({
-  display: 'block'
-});
-var headStyles = css({
-  borderBlockEnd: "none"
-});
+var rankingStyles = null;
+var headStyles = null;
+var overflowTruncateStyles = null;
+var truncationWidthStyles = null;
+var fixedSizeTruncateStyles = null;
+var cellStyles = null;
 export var Head = function Head(_ref) {
   var isRanking = _ref.isRanking,
     testId = _ref.testId,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("thead", _extends({
-    css: [headStyles, isRanking && rankingStyles],
+  return /*#__PURE__*/React.createElement("thead", _extends({
     "data-testid": testId
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
+  }, props, {
+    className: ax(["_179rglyw", isRanking && "_1e0c1ule"])
+  }));
 };
-var headCellBaseStyles = css({
-  boxSizing: 'border-box',
-  position: 'relative',
-  border: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderBlockEnd: "2px solid ".concat(tableBorder.borderColor),
-  color: "var(--ds-text-subtle, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  textAlign: 'left',
-  verticalAlign: 'middle',
-  '&:focus-visible': {
-    outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(B100, ")"))
-  }
-});
-var headCellBaseStylesOld = css({
-  boxSizing: 'border-box',
-  position: 'relative',
-  border: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  borderBlockEnd: "2px solid ".concat(tableBorder.borderColor),
-  color: "var(--ds-text-subtle, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  textAlign: 'left',
-  verticalAlign: 'top',
-  '&:focus-visible': {
-    outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(B100, ")"))
-  }
-});
-var onClickStyles = css({
-  '&:hover': {
-    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30A, ")"),
-    cursor: 'pointer'
-  }
-});
-var baseStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > button': {
-    padding: "var(--ds-space-0, 0)",
-    position: 'relative',
-    appearance: 'none',
-    background: 'none',
-    border: 'none',
-    color: 'inherit',
-    cursor: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontSize: 'inherit',
-    // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-    fontWeight: 'inherit',
-    '&::before, &::after': {
-      display: 'block',
-      width: 0,
-      height: 0,
-      position: 'absolute',
-      border: '3px solid transparent',
-      content: '""',
-      insetInlineEnd: "var(--ds-space-negative-100, -8px)"
-    },
-    '&::before': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      borderBlockEnd: "3px solid ".concat(arrow.defaultColor),
-      insetBlockEnd: "var(--ds-space-100, 8px)"
-    },
-    '&::after': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      borderBlockStart: "3px solid ".concat(arrow.defaultColor),
-      insetBlockEnd: 0
-    }
-  },
-  '@media (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > button': {
-      '&::before, &::after': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        border: "3px solid ".concat(MSThemeColors.Background)
-      },
-      '&::before': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        borderBlockEnd: "3px solid ".concat(MSThemeColors.Text)
-      },
-      '&::after': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        borderBlockStart: "3px solid ".concat(MSThemeColors.Text)
-      }
-    }
-  }
-});
-var ascendingStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > button': {
-    '&::before': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      borderBlockEnd: "3px solid ".concat(arrow.selectedColor)
-    }
-  },
-  '@media (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > button': {
-      '&::before': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        borderBlockEnd: "3px solid ".concat(MSThemeColors.SelectedBackground)
-      }
-    }
-  }
-});
-var descendingStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-  '& > button': {
-    '&::after': {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-      borderBlockStart: "3px solid ".concat(arrow.selectedColor)
-    }
-  },
-  '@media (forced-colors: active)': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '& > button': {
-      '&::after': {
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-        borderBlockStart: "3px solid ".concat(MSThemeColors.SelectedBackground)
-      }
-    }
-  }
-});
+var headCellBaseStyles = null;
+var headCellBaseStylesOld = null;
+var onClickStyles = null;
+var baseStyles = null;
+var ascendingStyles = null;
+var descendingStyles = null;
 export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var width = _ref2.width,
     children = _ref2.children,
@@ -173,7 +56,7 @@ export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     rest = _objectWithoutProperties(_ref2, _excluded2);
   var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && getTruncationStyleVars({
     width: width
-  })), {}, _defineProperty({}, CSS_VAR_TEXT_COLOR, head.textColor));
+  })), {}, _defineProperty({}, CSS_VAR_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(N300, ")")));
   var isASC = sortOrder === ASC;
   var isDESC = sortOrder === DESC;
   var getFormattedSortOrder = function getFormattedSortOrder() {
@@ -188,22 +71,23 @@ export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   // https://dequeuniversity.com/rules/axe/4.7/empty-table-header
   var Component = children ? 'th' : 'td';
   var isVisuallyRefreshed = fg('platform-component-visual-refresh');
-  return jsx(Component, _extends({
+  return /*#__PURE__*/React.createElement(Component, _extends({
     "aria-sort": getFormattedSortOrder()
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: mergedStyles,
-    css: [
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    cellStyles, isVisuallyRefreshed ? headCellBaseStyles : headCellBaseStylesOld, !isVisuallyRefreshed && onClick && onClickStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    truncationWidthStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    isFixedSize && shouldTruncate && fixedSizeTruncateStyles,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    isFixedSize && overflowTruncateStyles, !isVisuallyRefreshed && isSortable && baseStyles, !isVisuallyRefreshed && isASC && ascendingStyles, !isVisuallyRefreshed && isDESC && descendingStyles],
+
     onClick: !isVisuallyRefreshed ? onClick : undefined,
     ref: ref,
     "data-testid": testId
-  }, rest), children);
+  }, rest, {
+    className: ax(["_izbqglyw _h7alglyw _85i51b66 _1q511b66 _y4tiu2gc _bozgu2gc _y3gn1e5h _1s37ze3t _uupyze3t", isVisuallyRefreshed ? "_11c8dcr7 _179rralu _mqm2glyw _vchhusvi _kqswh2mm _syaz12fi _k48pmoej _y3gn1e5h _s7n4nkob _1ygbuwsq" : "_11c8dcr7 _179rralu _mqm2glyw _t51zglyw _191wglyw _vchhusvi _kqswh2mm _syaz12fi _k48pmoej _y3gn1e5h _s7n4jp4b _1ygbuwsq", !isVisuallyRefreshed && onClick && "_irr3bfnf _d0altlke", "_1bsb8a2a", isFixedSize && shouldTruncate && "_1bto1l2s _o5721q9c", isFixedSize && "_1reo15vq _18m915vq", !isVisuallyRefreshed && isSortable && "_173zglyw _pw6dglyw _1xgk1j28 _1wfn1j28 _y9yonqa1 _997wnqa1 _sklb1l7b _1j091l7b _19w61ule _1w611ule _1hvvidpf _n56nidpf _wyc4idpf _1d4oidpf _no7mstnw _qh32stnw _4b5mb3bt _hn3bb3bt _14gsx0bf _cigmx0bf _c77k1f6e _qzvtu2gc _f4731f6e _1fpyidpf _a04fh2mm _xv14glyw _58ej1kw7 _1ay31kw7 _mdbq1kw7 _10pp1kw7 _1yw3ze3t _n2fdze3t _8607ze3t _szhwze3t _1g2wwc43 _ze9fwc43 _1lcgnqa1 _at5qnqa1 _o4d71l7b _npl51l7b _1rp11onz _1iornqa1 _oi051l7b _1ehx1onz _19t8nqa1 _1bog1l7b", !isVisuallyRefreshed && isASC && "_c77k2wk4 _142s94yt", !isVisuallyRefreshed && isDESC && "_f4732wk4 _17x894yt"]),
+    style: _objectSpread(_objectSpread({}, mergedStyles), {}, {
+      "--_k02y3n": ix("2px solid ".concat("var(--ds-border, ".concat(N40, ")"))),
+      "--_17ckjys": ix("var(--ds-text-subtle, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")")),
+      "--_jz8ahf": ix("solid 2px ".concat("var(--ds-border-focused, ".concat(B100, ")"))),
+      "--_6j4ewu": ix("var(--ds-background-neutral-hovered, ".concat(N30A, ")")),
+      "--_1rdacuj": ix("3px solid ".concat("var(--ds-icon-disabled, ".concat(N40, ")"))),
+      "--_1qca9zt": ix("3px solid ".concat("var(--ds-icon-subtle, ".concat(N300, ")")))
+    })
+  }), children);
 });