@atlaskit/table-tree 11.2.2 → 12.0.0

package/dist/es2019/components/headers.js

@@ -1,16 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-/* eslint-disable @repo/internal/react/no-clone-element */
+/* headers.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./headers.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children, cloneElement } from 'react';
+/* eslint-disable @repo/internal/react/no-clone-element */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-const containerStyles = css({
-  display: 'flex',
-  borderBlockEnd: `solid 2px ${"var(--ds-border, #dfe1e6)"}`
-});
+const containerStyles = null;
 /**
  * __Headers__
  *
@@ -21,12 +16,9 @@ const containerStyles = css({
  */
 const Headers = ({
   children
-}) =>
-// TODO: Determine whether proper `tr` elements can be used instead of
-// roles (DSP-11588)
-jsx("div", {
-  css: containerStyles,
-  role: "row"
+}) => /*#__PURE__*/React.createElement("div", {
+  role: "row",
+  className: ax(["_179r17qy _1e0c1txw"])
 }, Children.map(children, (header, index) => /*#__PURE__*/cloneElement(header, {
   key: index,
   columnIndex: index

package/dist/es2019/components/internal/common-cell.compiled.css

@@ -0,0 +1,10 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1yt413wy{padding:var(--ds-space-100,10px) var(--ds-space-300,25px) var(--ds-space-100,10px) var(--indent,var(--ds-space-300,25px))}
+._1e0c1txw{display:flex}
+._1nmz1hna{word-break:break-word}
+._1tke1ylp{min-height:40px}
+._4cvr1h6o{align-items:center}
+._ct361wug{-ms-hyphens:auto;hyphens:auto}
+._kqswh2mm{position:relative}
+._syaz1fxt{color:var(--ds-text,#172b4d)}
+._vchhusvi{box-sizing:border-box}

package/dist/es2019/components/internal/common-cell.js

@@ -1,26 +1,10 @@
+/* common-cell.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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';
+import "./common-cell.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { N800 } from '@atlaskit/theme/colors';
-import { indentBase } from './styled';
-const commonStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  minHeight: 40,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: `${"var(--ds-space-100, 10px)"} ${indentBase} ${"var(--ds-space-100, 10px)"} var(--indent, ${indentBase})`,
-  position: 'relative',
-  alignItems: 'center',
-  color: `var(--ds-text, ${N800})`,
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  hyphens: 'auto',
-  wordBreak: 'break-word'
-});
+const commonStyles = null;
 /**
  * __Common cell__
  */
@@ -28,7 +12,7 @@ const CommonCell = ({
   indent,
   width,
   ...props
-}) => jsx("div", _extends({
+}) => /*#__PURE__*/React.createElement("div", _extends({
   role: "gridcell"
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props, {
@@ -37,6 +21,6 @@ const CommonCell = ({
     '--indent': indent,
     width
   },
-  css: commonStyles
+  className: ax(["_1yt413wy _11c82smr _1e0c1txw _vchhusvi _1tke1ylp _kqswh2mm _4cvr1h6o _syaz1fxt _ct361wug _1nmz1hna"])
 }));
 export default CommonCell;

package/dist/es2019/components/internal/item.js

@@ -1,12 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 /* eslint-disable @repo/internal/react/no-clone-element */
-import { cloneElement } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { cloneElement } from 'react';
 import toItemId from '../../utils/to-item-id';
 import Items from './items';
 /**
@@ -31,9 +24,9 @@ function Item({
     depth,
     data,
     loadingLabel,
-    renderChildren: () => jsx("div", {
+    renderChildren: () => /*#__PURE__*/React.createElement("div", {
       id: !!itemId ? toItemId(itemId) : undefined
-    }, jsx(Items, {
+    }, /*#__PURE__*/React.createElement(Items, {
       depth: depth,
       items: items,
       render: render,

package/dist/es2019/components/internal/loader-item.js

@@ -2,7 +2,7 @@
 import React, { useEffect, useState } from 'react';
 import Spinner from '@atlaskit/spinner';
 import CommonCell from './common-cell';
-import { indentBase, LoaderItemContainer, TreeRowContainer } from './styled';
+import { LoaderItemContainer, TreeRowContainer } from './styled';
 const LoaderItem = ({
   depth = 1,
   loadingLabel,
@@ -19,7 +19,7 @@ const LoaderItem = ({
     }
   }, [isCompleting, onComplete, phase]);
   return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
-    indent: `calc(${indentBase} * ${depth})`,
+    indent: `calc(${"var(--ds-space-300, 25px)"} * ${depth})`,
     width: "100%"
   }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
     isRoot: depth === 1

package/dist/es2019/components/internal/overflow-container.compiled.css

@@ -0,0 +1,4 @@
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._o5721q9c{white-space:nowrap}

package/dist/es2019/components/internal/overflow-container.js

@@ -1,16 +1,9 @@
+/* overflow-container.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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';
-const overflowContainerStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
+import "./overflow-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const overflowContainerStyles = null;
 
 /**
  * __Overflow container__
@@ -18,8 +11,7 @@ const overflowContainerStyles = css({
 const OverflowContainer = ({
   isSingleLine,
   ...props
-}) => jsx("span", _extends({
-  css: isSingleLine && overflowContainerStyles
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-}, props));
+}) => /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  className: ax([isSingleLine && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+}));
 export default OverflowContainer;

package/dist/es2019/components/internal/styled.compiled.css

@@ -0,0 +1,8 @@
+._179r1l7n{border-block-end:1px solid var(--ds-border,#ebecf0)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1pfhj39m{margin-block-start:-3px}
+._4cvr1h6o{align-items:center}
+._ahbqf2s7{margin-inline-start:calc(var(--ds-space-300, 25px)*-1)}
+._bozg1ssb{padding-inline-start:50%}
+._kqswstnw{position:absolute}

package/dist/es2019/components/internal/styled.js

@@ -1,54 +1,31 @@
+/* styled.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @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';
+import "./styled.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { N30 } from '@atlaskit/theme/colors';
-export const indentBase = "var(--ds-space-300, 25px)";
-const treeRowContainerStyles = css({
-  display: 'flex',
-  borderBlockEnd: `1px solid ${`var(--ds-border, ${N30})`}`
-});
+const treeRowContainerStyles = null;
 
 /**
  * __Tree row container__
  */
-export const TreeRowContainer = props => jsx("div", _extends({
-  role: "row",
-  css: treeRowContainerStyles
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-}, props));
-const commonCellElementStyles = css({
-  display: 'flex',
-  position: 'absolute',
-  alignItems: 'center',
-  // indentBase is re-used elsewhere and is primarily used as positive value; we need to negate it here
-  marginInlineStart: `calc(${indentBase} * -1)`
-});
-const commonChevronContainerStyles = css({
-  // Aligns position:absolute chevron button with the adjacent text. Any future visual breaking changes
-  // should consider setting this to `-2px` for better alignment, or refactor completely
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginBlockStart: -3
-});
+export const TreeRowContainer = props => /*#__PURE__*/React.createElement("div", _extends({
+  role: "row"
+}, props, {
+  className: ax(["_179r1l7n _1e0c1txw"])
+}));
+const commonCellElementStyles = null;
+const commonChevronContainerStyles = null;
 /**
  * __Chevron container__
  *
  * A wrapper container around the expand table tree button.
  */
-export const ChevronContainer = props => jsx("span", _extends({}, props, {
-  css: [commonCellElementStyles, commonChevronContainerStyles]
+export const ChevronContainer = props => /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  className: ax(["_1e0c1txw _kqswstnw _4cvr1h6o _ahbqf2s7", "_1pfhj39m"])
 }));
-const loadingItemContainerStyles = css({
-  width: '100%'
-});
-const paddingLeftStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  paddingInlineStart: '50%'
-});
+const loadingItemContainerStyles = null;
+const paddingLeftStyles = null;
 /**
  * __Loader item container__
  *
@@ -57,7 +34,6 @@ const paddingLeftStyles = css({
 export const LoaderItemContainer = ({
   isRoot,
   ...props
-}) => jsx("span", _extends({
-  css: [commonCellElementStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles]
-  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-}, props));
+}) => /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  className: ax(["_1e0c1txw _kqswstnw _4cvr1h6o _ahbqf2s7", "_1bsb1osq", isRoot && "_bozg1ssb"])
+}));

package/dist/es2019/components/row.compiled.css

@@ -0,0 +1 @@
+._80omtlke{cursor:pointer}

package/dist/es2019/components/row.js

@@ -1,18 +1,12 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* row.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./row.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { Fragment, useEffect, useState } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
-const treeRowClickableStyles = css({
-  cursor: 'pointer'
-});
+const treeRowClickableStyles = null;
 const getExtendedLabel = (cellContent, cellIndex, mainColumnForExpandCollapseLabel) => {
   /**
    * First condition - when we pass data via `items` property in `<TableTree />`
@@ -53,7 +47,7 @@ function Row({
     actionSubject: 'tableTree',
     componentName: 'row',
     packageName: "@atlaskit/table-tree",
-    packageVersion: "11.2.2"
+    packageVersion: "12.0.0"
   });
   const onCollapse = usePlatformLeafEventHandler({
     fn: value => providedOnCollapse && providedOnCollapse(value),
@@ -61,7 +55,7 @@ function Row({
     actionSubject: 'tableTree',
     componentName: 'row',
     packageName: "@atlaskit/table-tree",
-    packageVersion: "11.2.2"
+    packageVersion: "12.0.0"
   });
 
   /**
@@ -100,7 +94,7 @@ function Row({
     let cellContent = cell.props.children || [];
     const extendedLabel = getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
     if (isFirstCell && hasChildren) {
-      cellContent = [jsx(Chevron, {
+      cellContent = [/*#__PURE__*/React.createElement(Chevron, {
         key: "chevron",
         expandLabel: expandLabel,
         collapseLabel: collapseLabel,
@@ -118,11 +112,11 @@ function Row({
       indentLevel
     }, cellContent);
   };
-  return jsx(Fragment, null, jsx(TreeRowContainer, {
-    css: hasChildren && shouldExpandOnClick ? treeRowClickableStyles : undefined,
+  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TreeRowContainer, {
     onClick: hasChildren && shouldExpandOnClick ? onClickHandler : undefined,
     "aria-expanded": hasChildren ? isExpandedState : undefined,
-    "aria-level": depth ? depth : undefined
+    "aria-level": depth ? depth : undefined,
+    className: ax([hasChildren && shouldExpandOnClick && "_80omtlke"])
   }, React.Children.map(children, (cell, index) => renderCell(cell, index))), hasChildren && (isProvidedExpanded !== undefined ? isProvidedExpanded : isExpandedState) && renderChildren && renderChildren());
 }
 

package/dist/esm/components/cell.js

@@ -4,7 +4,6 @@ var _excluded = ["children", "singleLine", "indentLevel", "width", "className"];
 import React from 'react';
 import CommonCell from './internal/common-cell';
 import OverflowContainer from './internal/overflow-container';
-import { indentBase } from './internal/styled';
 import withColumnWidth from './internal/with-column-width';
 var CellComponent = function CellComponent(_ref) {
   var children = _ref.children,
@@ -14,7 +13,7 @@ var CellComponent = function CellComponent(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React.createElement(CommonCell, _extends({
-    indent: indentLevel ? "calc(".concat(indentBase, " * ").concat(indentLevel, ")") : undefined,
+    indent: indentLevel ? "calc(".concat("var(--ds-space-300, 25px)", " * ", indentLevel, ")") : undefined,
     width: width
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/esm/components/header.compiled.css

@@ -0,0 +1,3 @@
+._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)}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._syaz1vvm{color:var(--_bbz764)}

package/dist/esm/components/header.js

@@ -1,18 +1,11 @@
-/**
- * @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';
+/* header.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./header.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { N300 } from '@atlaskit/theme/colors';
 import CommonCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';
-var headerStyles = css({
-  color: "var(--ds-text-subtle, ".concat(N300, ")"),
-  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)"
-});
+var headerStyles = null;
 
 /**
  * This is hard-coded here because our actual <Header /> has no typings
@@ -32,12 +25,15 @@ var HeaderComponent = function HeaderComponent(_ref) {
     role = _ref$role === void 0 ? 'columnheader' : _ref$role;
   // TODO: Determine whether proper `th` elements can be used instead of
   // roles (DSP-11588)
-  return jsx(CommonCell, {
-    css: headerStyles,
+  return /*#__PURE__*/React.createElement(CommonCell, {
     role: role,
     width: width,
     id: id,
-    onClick: onClick
+    onClick: onClick,
+    className: ax(["_11c8dcr7 _syaz1vvm _k48pmoej"]),
+    style: {
+      "--_bbz764": ix("var(--ds-text-subtle, ".concat(N300, ")"))
+    }
   }, children);
 };
 var Header = withColumnWidth(HeaderComponent);

package/dist/esm/components/headers.compiled.css

@@ -0,0 +1,2 @@
+._179r1avd{border-block-end:var(--_zailfs)}
+._1e0c1txw{display:flex}

package/dist/esm/components/headers.js

@@ -1,16 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-/* eslint-disable @repo/internal/react/no-clone-element */
+/* headers.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./headers.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Children, cloneElement } from 'react';
+/* eslint-disable @repo/internal/react/no-clone-element */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-var containerStyles = css({
-  display: 'flex',
-  borderBlockEnd: "solid 2px ".concat("var(--ds-border, #dfe1e6)")
-});
+var containerStyles = null;
 /**
  * __Headers__
  *
@@ -21,18 +16,17 @@ var containerStyles = css({
  */
 var Headers = function Headers(_ref) {
   var children = _ref.children;
-  return (
-    // TODO: Determine whether proper `tr` elements can be used instead of
-    // roles (DSP-11588)
-    jsx("div", {
-      css: containerStyles,
-      role: "row"
-    }, Children.map(children, function (header, index) {
-      return /*#__PURE__*/cloneElement(header, {
-        key: index,
-        columnIndex: index
-      });
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "row",
+    className: ax(["_179r1avd _1e0c1txw"]),
+    style: {
+      "--_zailfs": ix("solid 2px ".concat("var(--ds-border, #dfe1e6)"))
+    }
+  }, Children.map(children, function (header, index) {
+    return /*#__PURE__*/cloneElement(header, {
+      key: index,
+      columnIndex: index
+    });
+  }));
 };
 export default Headers;

package/dist/esm/components/internal/common-cell.compiled.css

@@ -0,0 +1,10 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1yt41p08{padding:var(--_1s9siax)}
+._1e0c1txw{display:flex}
+._1nmz1hna{word-break:break-word}
+._1tke1ylp{min-height:40px}
+._4cvr1h6o{align-items:center}
+._ct361wug{-ms-hyphens:auto;hyphens:auto}
+._kqswh2mm{position:relative}
+._syaz1o8f{color:var(--_ggxzyp)}
+._vchhusvi{box-sizing:border-box}

package/dist/esm/components/internal/common-cell.js

@@ -1,28 +1,15 @@
+/* common-cell.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["indent", "width"];
-/**
- * @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';
+import "./common-cell.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; }
 import { N800 } from '@atlaskit/theme/colors';
-import { indentBase } from './styled';
-var commonStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  minHeight: 40,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: "var(--ds-space-100, 10px)".concat(" ", indentBase, " ", "var(--ds-space-100, 10px)", " var(--indent, ").concat(indentBase, ")"),
-  position: 'relative',
-  alignItems: 'center',
-  color: "var(--ds-text, ".concat(N800, ")"),
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  hyphens: 'auto',
-  wordBreak: 'break-word'
-});
+var commonStyles = null;
 /**
  * __Common cell__
  */
@@ -30,16 +17,18 @@ var CommonCell = function CommonCell(_ref) {
   var indent = _ref.indent,
     width = _ref.width,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     role: "gridcell"
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props, {
-    // 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: {
+    className: ax(["_1yt41p08 _11c82smr _1e0c1txw _vchhusvi _1tke1ylp _kqswh2mm _4cvr1h6o _syaz1o8f _ct361wug _1nmz1hna"]),
+    style: _objectSpread(_objectSpread({}, {
       '--indent': indent,
       width: width
-    },
-    css: commonStyles
+    }), {}, {
+      "--_1s9siax": ix("var(--ds-space-100, 10px)".concat(" ", "var(--ds-space-300, 25px)", " ", "var(--ds-space-100, 10px)", " var(--indent, ", "var(--ds-space-300, 25px)", ")")),
+      "--_ggxzyp": ix("var(--ds-text, ".concat(N800, ")"))
+    })
   }));
 };
 export default CommonCell;

package/dist/esm/components/internal/item.js

@@ -1,12 +1,5 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
 /* eslint-disable @repo/internal/react/no-clone-element */
-import { cloneElement } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import React, { cloneElement } from 'react';
 import toItemId from '../../utils/to-item-id';
 import Items from './items';
 /**
@@ -32,9 +25,9 @@ function Item(_ref) {
     data: data,
     loadingLabel: loadingLabel,
     renderChildren: function renderChildren() {
-      return jsx("div", {
+      return /*#__PURE__*/React.createElement("div", {
         id: !!itemId ? toItemId(itemId) : undefined
-      }, jsx(Items, {
+      }, /*#__PURE__*/React.createElement(Items, {
         depth: depth,
         items: items,
         render: render,

package/dist/esm/components/internal/loader-item.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useEffect, useState } from 'react';
 import Spinner from '@atlaskit/spinner';
 import CommonCell from './common-cell';
-import { indentBase, LoaderItemContainer, TreeRowContainer } from './styled';
+import { LoaderItemContainer, TreeRowContainer } from './styled';
 var LoaderItem = function LoaderItem(_ref) {
   var _ref$depth = _ref.depth,
     depth = _ref$depth === void 0 ? 1 : _ref$depth,
@@ -23,7 +23,7 @@ var LoaderItem = function LoaderItem(_ref) {
     }
   }, [isCompleting, onComplete, phase]);
   return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
-    indent: "calc(".concat(indentBase, " * ").concat(depth, ")"),
+    indent: "calc(".concat("var(--ds-space-300, 25px)", " * ", depth, ")"),
     width: "100%"
   }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
     isRoot: depth === 1

package/dist/esm/components/internal/overflow-container.compiled.css

@@ -0,0 +1,4 @@
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._o5721q9c{white-space:nowrap}

package/dist/esm/components/internal/overflow-container.js

@@ -1,18 +1,11 @@
+/* overflow-container.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 = ["isSingleLine"];
-/**
- * @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';
-var overflowContainerStyles = css({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
+import "./overflow-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var overflowContainerStyles = null;
 
 /**
  * __Overflow container__
@@ -20,9 +13,8 @@ var overflowContainerStyles = css({
 var OverflowContainer = function OverflowContainer(_ref) {
   var isSingleLine = _ref.isSingleLine,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("span", _extends({
-    css: isSingleLine && overflowContainerStyles
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
+  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+    className: ax([isSingleLine && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+  }));
 };
 export default OverflowContainer;

package/dist/esm/components/internal/styled.compiled.css

@@ -0,0 +1,8 @@
+._179rskuj{border-block-end:var(--_1prvtx9)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1pfhj39m{margin-block-start:-3px}
+._4cvr1h6o{align-items:center}
+._ahbq1dum{margin-inline-start:var(--_1izje1g)}
+._bozg1ssb{padding-inline-start:50%}
+._kqswstnw{position:absolute}