@atlaskit/dynamic-table 14.17.0 → 14.17.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/dynamic-table
 
+## 14.17.1
+
+### Patch Changes
+
+-   [#101939](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101939)
+    [`07080a7364c9`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/07080a7364c9) -
+    Update dimension and font size values to be in rem. Internal change to use typography tokens.
+
 ## 14.17.0
 
 ### Minor Changes

package/dist/cjs/components/rankable/table-cell.js

@@ -48,7 +48,9 @@ var RankableTableCell = exports.RankableTableCell = /*#__PURE__*/function (_Reac
         isFixedSize: isFixedSize,
         shouldTruncate: shouldTruncate,
         width: width,
-        isRanking: isRanking,
+        isRanking: isRanking
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: inlineStyles,
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();

package/dist/cjs/components/rankable/table-row.js

@@ -79,7 +79,9 @@ var RankableTableRow = exports.RankableTableRow = /*#__PURE__*/function (_React$
           // It is necessary to prevent the passing of aria-labelledby
           "aria-labelledby": undefined,
           "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-labelledby'],
-          ref: _this2.innerRef(provided.innerRef),
+          ref: _this2.innerRef(provided.innerRef)
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
           style: _objectSpread(_objectSpread({}, provided.draggableProps.style), inlineStyles),
           isHighlighted: isHighlighted || isRowHighlighted,
           isRanking: isRanking,

package/dist/cjs/components/stateless.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.17.0";
+var packageVersion = "14.17.1";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case _constants.DESC:

package/dist/cjs/components/table-head-cell.js

@@ -19,7 +19,9 @@ var TableHeadCell = function TableHeadCell(_ref) {
     isSortable = _ref.isSortable,
     onClick = _ref.onClick,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell, (0, _extends2.default)({
+  return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , (0, _extends2.default)({
     style: inlineStyles,
     testId: testId && "".concat(testId, "--head--cell"),
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs

package/dist/cjs/styled/dynamic-table.js

@@ -10,13 +10,11 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _theme = require("../theme");
 var _excluded = ["isFixedSize", "hasDataRow", "children", "testId", "isLoading"];
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /** @jsx jsx */
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-var gridSize = (0, _constants.gridSize)();
 // CSS vars for table row
 // these are declared here to avoid being re-declared in each table row
 var tableRowCSSVars = exports.tableRowCSSVars = {
@@ -46,6 +44,7 @@ var Table = exports.Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react2.jsx)("table", (0, _extends2.default)({
     inert: isLoading ? '' : undefined,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, _theme.row.hoverBackground), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, _theme.row.highlightedBackground), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, _theme.row.hoverHighlightedBackground), (0, _defineProperty2.default)(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, _theme.row.focusOutline), _ref2),
     css: [tableStyles, isFixedSize && fixedSizeTableStyles, hasDataRow && bodyBorder],
     ref: ref
@@ -54,20 +53,22 @@ var Table = exports.Table = /*#__PURE__*/(0, _react.forwardRef)(function (_ref,
   }), children);
 });
 var captionStyles = (0, _react2.css)({
-  fontSize: '1.42857143em',
-  fontStyle: 'inherit',
-  fontWeight: 'var(--ds-font-weight-medium)',
-  letterSpacing: '-0.008em',
-  lineHeight: 1.2,
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   marginBlockEnd: "var(--ds-space-100, 8px)",
-  marginBlockStart: "".concat(gridSize * 3.5, "px"),
-  textAlign: 'left',
   willChange: 'transform'
 });
+var oldCaptionStyles = (0, _react2.css)({
+  fontWeight: "var(--ds-font-weight-regular, 400)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginBlockStart: 28
+});
+var newCaptionStyles = (0, _react2.css)({
+  marginBlockStart: "var(--ds-space-300, 24px)"
+});
 var Caption = exports.Caption = function Caption(_ref3) {
   var children = _ref3.children;
   return (0, _react2.jsx)("caption", {
-    css: captionStyles
+    css: [captionStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.dynamic-table-typography_7zio6') ? newCaptionStyles : oldCaptionStyles]
   }, children);
 };
 var paginationWrapperStyles = (0, _react2.css)({

package/dist/cjs/styled/empty-body.js

@@ -5,14 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EmptyViewWithFixedHeight = exports.EmptyViewContainer = void 0;
 var _react = require("@emotion/react");
-var _constants = require("@atlaskit/theme/constants");
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /** @jsx jsx */
 
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-
 var fixedHeightStyles = (0, _react.css)({
-  height: "".concat((0, _constants.gridSize)() * 18, "px")
+  height: '9rem'
 });
 var EmptyViewWithFixedHeight = exports.EmptyViewWithFixedHeight = function EmptyViewWithFixedHeight(_ref) {
   var children = _ref.children,

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

@@ -13,8 +13,8 @@ var _excluded = ["children", "testId"];
 /* eslint-disable @repo/internal/react/require-jsdoc */
 /** @jsx jsx */
 var containerStyles = (0, _react2.css)({
-  marginBottom: "var(--ds-space-300, 24px)",
-  position: 'relative'
+  position: 'relative',
+  marginBlockEnd: "var(--ds-space-300, 24px)"
 });
 var Container = exports.Container = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var children = props.children,
@@ -49,7 +49,7 @@ var SpinnerBackdrop = exports.SpinnerBackdrop = function SpinnerBackdrop(_ref) {
 var spinnerContainerStyles = (0, _react2.css)({
   position: 'relative',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0
+  insetBlockStart: 0
 });
 var SpinnerContainer = exports.SpinnerContainer = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
   var children = _ref2.children;

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

@@ -31,6 +31,7 @@ var ContentsContainer = exports.ContentsContainer = function ContentsContainer(_
     contentsOpacity = _ref2.contentsOpacity,
     testId = _ref2.testId;
   return (0, _react.jsx)("div", {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: (0, _defineProperty2.default)({}, CSS_VAR_CONTENTS_OPACITY, contentsOpacity),
     css: [contentsContainerStyles],
     "data-testid": testId && "".concat(testId, "--contents--container")

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

@@ -19,6 +19,7 @@ var TableBodyCell = exports.TableBodyCell = function TableBodyCell(_ref) {
     innerRef = _ref.innerRef,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react.jsx)("td", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: (0, _constants.getTruncationStyleVars)({
       width: width
     }),

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

@@ -10,6 +10,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("../internal/constants");
 var _theme = require("../theme");
@@ -37,20 +38,25 @@ var Head = exports.Head = function Head(_ref) {
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
-var headCellStyles = (0, _react2.css)([_constants2.cellStyles, {
+var headCellBaseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   position: 'relative',
   border: 'none',
-  borderBottom: "2px solid ".concat(_theme.tableBorder.borderColor),
+  borderBlockEnd: "2px solid ".concat(_theme.tableBorder.borderColor),
   color: "var(--ds-text-subtlest, ".concat("var(".concat(CSS_VAR_TEXT_COLOR, ")"), ")"),
-  fontSize: '12px',
-  fontWeight: 600,
   textAlign: 'left',
   verticalAlign: 'top',
   '&:focus-visible': {
     outline: "solid 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
   }
-}]);
+});
+var headCellOldStyles = (0, _react2.css)({
+  fontSize: '0.75rem',
+  fontWeight: "var(--ds-font-weight-semibold, 600)"
+});
+var headCellNewStyles = (0, _react2.css)({
+  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 var onClickStyles = (0, _react2.css)({
   '&:hover': {
     backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")"),
@@ -156,9 +162,11 @@ var HeadCell = exports.HeadCell = /*#__PURE__*/(0, _react.forwardRef)(function (
   // https://dequeuniversity.com/rules/axe/4.7/empty-table-header
   var Component = children ? 'th' : 'td';
   return (0, _react2.jsx)(Component, (0, _extends2.default)({
-    "aria-sort": getFormattedSortOrder(),
+    "aria-sort": getFormattedSortOrder()
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: mergedStyles,
-    css: [headCellStyles, onClick && onClickStyles, _constants2.truncationWidthStyles, isFixedSize && shouldTruncate && _constants2.fixedSizeTruncateStyles, isFixedSize && _constants2.overflowTruncateStyles, isSortable && baseStyles, isASC && ascendingStyles, isDESC && descendingStyles],
+    css: [_constants2.cellStyles, headCellBaseStyles, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.dynamic-table-typography_7zio6') ? headCellNewStyles : headCellOldStyles, onClick && onClickStyles, _constants2.truncationWidthStyles, isFixedSize && shouldTruncate && _constants2.fixedSizeTruncateStyles, isFixedSize && _constants2.overflowTruncateStyles, isSortable && baseStyles, isASC && ascendingStyles, isDESC && descendingStyles],
     onClick: onClick,
     ref: ref,
     "data-testid": testId

package/dist/cjs/styled/table-row.js

@@ -39,6 +39,7 @@ var TableBodyRow = exports.TableBodyRow = /*#__PURE__*/(0, _react.forwardRef)(fu
     testId = _ref.testId,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (0, _react2.jsx)("tr", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,
     css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
   }, rest, {

package/dist/cjs/types.js

@@ -1,3 +1,5 @@
 "use strict";
 
-var _analyticsNext = require("@atlaskit/analytics-next");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/es2019/components/rankable/table-cell.js

@@ -28,7 +28,9 @@ export class RankableTableCell extends React.Component {
       isFixedSize: isFixedSize,
       shouldTruncate: shouldTruncate,
       width: width,
-      isRanking: isRanking,
+      isRanking: isRanking
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+      ,
       style: inlineStyles,
       onKeyDown: e => e.stopPropagation(),
       innerRef: innerRef,

package/dist/es2019/components/rankable/table-row.js

@@ -53,7 +53,9 @@ export class RankableTableRow extends React.Component {
         // It is necessary to prevent the passing of aria-labelledby
         "aria-labelledby": undefined,
         "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-labelledby'],
-        ref: this.innerRef(provided.innerRef),
+        ref: this.innerRef(provided.innerRef)
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: {
           ...provided.draggableProps.style,
           ...inlineStyles

package/dist/es2019/components/stateless.js

@@ -14,7 +14,7 @@ import LoadingContainerAdvanced from './loading-container-advanced';
 import ManagedPagination from './managed-pagination';
 import TableHead from './table-head';
 const packageName = "@atlaskit/dynamic-table";
-const packageVersion = "14.17.0";
+const packageVersion = "14.17.1";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:

package/dist/es2019/components/table-head-cell.js

@@ -11,7 +11,9 @@ const TableHeadCell = ({
   onClick,
   ...rest
 }) => {
-  return /*#__PURE__*/React.createElement(HeadCell, _extends({
+  return /*#__PURE__*/React.createElement(HeadCell
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , _extends({
     style: inlineStyles,
     testId: testId && `${testId}--head--cell`,
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs

package/dist/es2019/styled/dynamic-table.js

@@ -3,11 +3,8 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { row, tableBorder } from '../theme';
-const gridSize = getGridSize();
 // CSS vars for table row
 // these are declared here to avoid being re-declared in each table row
 export const tableRowCSSVars = {
@@ -37,6 +34,7 @@ export const Table = /*#__PURE__*/forwardRef(({
 }, ref) => {
   return jsx("table", _extends({
     inert: isLoading ? '' : undefined,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: {
       [tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND]: row.hoverBackground,
       [tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND]: row.highlightedBackground,
@@ -50,20 +48,22 @@ export const Table = /*#__PURE__*/forwardRef(({
   }), children);
 });
 const captionStyles = css({
-  fontSize: '1.42857143em',
-  fontStyle: 'inherit',
-  fontWeight: 'var(--ds-font-weight-medium)',
-  letterSpacing: '-0.008em',
-  lineHeight: 1.2,
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   marginBlockEnd: "var(--ds-space-100, 8px)",
-  marginBlockStart: `${gridSize * 3.5}px`,
-  textAlign: 'left',
   willChange: 'transform'
 });
+const oldCaptionStyles = css({
+  fontWeight: "var(--ds-font-weight-regular, 400)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginBlockStart: 28
+});
+const newCaptionStyles = css({
+  marginBlockStart: "var(--ds-space-300, 24px)"
+});
 export const Caption = ({
   children
 }) => jsx("caption", {
-  css: captionStyles
+  css: [captionStyles, getBooleanFF('platform.design-system-team.dynamic-table-typography_7zio6') ? newCaptionStyles : oldCaptionStyles]
 }, children);
 const paginationWrapperStyles = css({
   display: 'flex',

package/dist/es2019/styled/empty-body.js

@@ -2,11 +2,8 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
 const fixedHeightStyles = css({
-  height: `${gridSize() * 18}px`
+  height: '9rem'
 });
 export const EmptyViewWithFixedHeight = ({
   children,

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

@@ -4,8 +4,8 @@ import _extends from "@babel/runtime/helpers/extends";
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 const containerStyles = css({
-  marginBottom: "var(--ds-space-300, 24px)",
-  position: 'relative'
+  position: 'relative',
+  marginBlockEnd: "var(--ds-space-300, 24px)"
 });
 export const Container = /*#__PURE__*/forwardRef((props, ref) => {
   const {
@@ -41,7 +41,7 @@ export const SpinnerBackdrop = ({
 const spinnerContainerStyles = css({
   position: 'relative',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0
+  insetBlockStart: 0
 });
 export const SpinnerContainer = /*#__PURE__*/forwardRef(({
   children

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

@@ -22,6 +22,7 @@ export const ContentsContainer = ({
   contentsOpacity,
   testId
 }) => jsx("div", {
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   style: {
     [CSS_VAR_CONTENTS_OPACITY]: contentsOpacity
   },

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

@@ -12,6 +12,7 @@ export const TableBodyCell = ({
   innerRef,
   ...props
 }) => jsx("td", _extends({
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
   style: getTruncationStyleVars({
     width
   }),

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

@@ -3,6 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { B100, N30A } from '@atlaskit/theme/colors';
 import { ASC, DESC } from '../internal/constants';
 import { arrow, head, MSThemeColors, tableBorder } from '../theme';
@@ -25,20 +26,25 @@ export const Head = ({
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
-const headCellStyles = css([cellStyles, {
+const headCellBaseStyles = css({
   boxSizing: 'border-box',
   position: 'relative',
   border: 'none',
-  borderBottom: `2px solid ${tableBorder.borderColor}`,
+  borderBlockEnd: `2px solid ${tableBorder.borderColor}`,
   color: `var(--ds-text-subtlest, ${`var(${CSS_VAR_TEXT_COLOR})`})`,
-  fontSize: '12px',
-  fontWeight: 600,
   textAlign: 'left',
   verticalAlign: 'top',
   '&:focus-visible': {
     outline: `solid 2px ${`var(--ds-border-focused, ${B100})`}`
   }
-}]);
+});
+const headCellOldStyles = css({
+  fontSize: '0.75rem',
+  fontWeight: "var(--ds-font-weight-semibold, 600)"
+});
+const headCellNewStyles = css({
+  font: "var(--ds-font-heading-xxsmall, normal 600 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+});
 const onClickStyles = css({
   '&:hover': {
     backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`,
@@ -149,9 +155,11 @@ export const HeadCell = /*#__PURE__*/forwardRef(({
   // https://dequeuniversity.com/rules/axe/4.7/empty-table-header
   const Component = children ? 'th' : 'td';
   return jsx(Component, _extends({
-    "aria-sort": getFormattedSortOrder(),
+    "aria-sort": getFormattedSortOrder()
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: mergedStyles,
-    css: [headCellStyles, onClick && onClickStyles, truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, isSortable && baseStyles, isASC && ascendingStyles, isDESC && descendingStyles],
+    css: [cellStyles, headCellBaseStyles, getBooleanFF('platform.design-system-team.dynamic-table-typography_7zio6') ? headCellNewStyles : headCellOldStyles, onClick && onClickStyles, truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, isSortable && baseStyles, isASC && ascendingStyles, isDESC && descendingStyles],
     onClick: onClick,
     ref: ref,
     "data-testid": testId

package/dist/es2019/styled/table-row.js

@@ -31,6 +31,7 @@ export const TableBodyRow = /*#__PURE__*/forwardRef(({
   ...rest
 }, ref) => {
   return jsx("tr", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: style,
     css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
   }, rest, {

package/dist/es2019/types.js

@@ -1,14 +1 @@
-/* eslint-disable @repo/internal/react/consistent-types-definitions */
-
-import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-
-/**
- * Enum style type to determine whether sort results are ascending or descending.
- */
-
-/**
- * Determines the size of the table loading spinner.
- * This matches the underlying `Size` type in `@atlaskit/spinner`
- */
-
-// TODO should this be removed?
+export {};

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

@@ -41,7 +41,9 @@ export var RankableTableCell = /*#__PURE__*/function (_React$Component) {
         isFixedSize: isFixedSize,
         shouldTruncate: shouldTruncate,
         width: width,
-        isRanking: isRanking,
+        isRanking: isRanking
+        // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+        ,
         style: inlineStyles,
         onKeyDown: function onKeyDown(e) {
           return e.stopPropagation();

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

@@ -74,7 +74,9 @@ export var RankableTableRow = /*#__PURE__*/function (_React$Component) {
           // It is necessary to prevent the passing of aria-labelledby
           "aria-labelledby": undefined,
           "aria-describedby": (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP['aria-labelledby'],
-          ref: _this2.innerRef(provided.innerRef),
+          ref: _this2.innerRef(provided.innerRef)
+          // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+          ,
           style: _objectSpread(_objectSpread({}, provided.draggableProps.style), inlineStyles),
           isHighlighted: isHighlighted || isRowHighlighted,
           isRanking: isRanking,

package/dist/esm/components/stateless.js

@@ -25,7 +25,7 @@ import LoadingContainerAdvanced from './loading-container-advanced';
 import ManagedPagination from './managed-pagination';
 import TableHead from './table-head';
 var packageName = "@atlaskit/dynamic-table";
-var packageVersion = "14.17.0";
+var packageVersion = "14.17.1";
 function toggleSortOrder(currentSortOrder) {
   switch (currentSortOrder) {
     case DESC:

package/dist/esm/components/table-head-cell.js

@@ -12,7 +12,9 @@ var TableHeadCell = function TableHeadCell(_ref) {
     isSortable = _ref.isSortable,
     onClick = _ref.onClick,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(HeadCell, _extends({
+  return /*#__PURE__*/React.createElement(HeadCell
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+  , _extends({
     style: inlineStyles,
     testId: testId && "".concat(testId, "--head--cell"),
     ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs

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

@@ -6,11 +6,8 @@ var _excluded = ["isFixedSize", "hasDataRow", "children", "testId", "isLoading"]
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize as getGridSize } from '@atlaskit/theme/constants';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { row, tableBorder } from '../theme';
-var gridSize = getGridSize();
 // CSS vars for table row
 // these are declared here to avoid being re-declared in each table row
 export var tableRowCSSVars = {
@@ -40,6 +37,7 @@ export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   return jsx("table", _extends({
     inert: isLoading ? '' : undefined,
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: (_ref2 = {}, _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, row.hoverBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, row.highlightedBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, row.hoverHighlightedBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, row.focusOutline), _ref2),
     css: [tableStyles, isFixedSize && fixedSizeTableStyles, hasDataRow && bodyBorder],
     ref: ref
@@ -48,20 +46,22 @@ export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), children);
 });
 var captionStyles = css({
-  fontSize: '1.42857143em',
-  fontStyle: 'inherit',
-  fontWeight: 'var(--ds-font-weight-medium)',
-  letterSpacing: '-0.008em',
-  lineHeight: 1.2,
+  font: "var(--ds-font-heading-medium, normal 500 20px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   marginBlockEnd: "var(--ds-space-100, 8px)",
-  marginBlockStart: "".concat(gridSize * 3.5, "px"),
-  textAlign: 'left',
   willChange: 'transform'
 });
+var oldCaptionStyles = css({
+  fontWeight: "var(--ds-font-weight-regular, 400)",
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
+  marginBlockStart: 28
+});
+var newCaptionStyles = css({
+  marginBlockStart: "var(--ds-space-300, 24px)"
+});
 export var Caption = function Caption(_ref3) {
   var children = _ref3.children;
   return jsx("caption", {
-    css: captionStyles
+    css: [captionStyles, getBooleanFF('platform.design-system-team.dynamic-table-typography_7zio6') ? newCaptionStyles : oldCaptionStyles]
   }, children);
 };
 var paginationWrapperStyles = css({

package/dist/esm/styled/empty-body.js

@@ -2,11 +2,8 @@
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';
-
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize } from '@atlaskit/theme/constants';
 var fixedHeightStyles = css({
-  height: "".concat(gridSize() * 18, "px")
+  height: '9rem'
 });
 export var EmptyViewWithFixedHeight = function EmptyViewWithFixedHeight(_ref) {
   var children = _ref.children,

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

@@ -6,8 +6,8 @@ var _excluded = ["children", "testId"];
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 var containerStyles = css({
-  marginBottom: "var(--ds-space-300, 24px)",
-  position: 'relative'
+  position: 'relative',
+  marginBlockEnd: "var(--ds-space-300, 24px)"
 });
 export var Container = /*#__PURE__*/forwardRef(function (props, ref) {
   var children = props.children,
@@ -42,7 +42,7 @@ export var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
 var spinnerContainerStyles = css({
   position: 'relative',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 0
+  insetBlockStart: 0
 });
 export var SpinnerContainer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var children = _ref2.children;

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

@@ -24,6 +24,7 @@ export var ContentsContainer = function ContentsContainer(_ref2) {
     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")

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

@@ -14,6 +14,7 @@ export var TableBodyCell = function TableBodyCell(_ref) {
     innerRef = _ref.innerRef,
     props = _objectWithoutProperties(_ref, _excluded);
   return jsx("td", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     style: getTruncationStyleVars({
       width: width
     }),