@atlaskit/page-header 12.1.17 → 12.1.18

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/page-header
 
+## 12.1.18
+
+### Patch Changes
+
+- [`807c3489b9542`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/807c3489b9542) -
+  Restructures internal files so that they have a single export per file.
+
 ## 12.1.17
 
 ### Patch Changes

package/dist/cjs/PageHeader/actions-wrapper.compiled.css

@@ -0,0 +1,8 @@
+._16jlidpf{flex-grow:0}
+._1o9zidpf{flex-shrink:0}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._ahbq1wug{margin-inline-start:auto}
+._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
+._i0dl1wug{flex-basis:auto}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}

package/dist/cjs/PageHeader/actions-wrapper.js

@@ -0,0 +1,27 @@
+/* actions-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./actions-wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var actionStyles = null;
+
+/**
+ * __Actions wrapper__.
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
+var ActionsWrapper = function ActionsWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _p12f1osq _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c"])
+  }, children);
+};
+var _default = exports.default = ActionsWrapper;

package/dist/cjs/PageHeader/bottom-bar.compiled.css

@@ -0,0 +1 @@
+._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}

package/dist/cjs/PageHeader/bottom-bar.js

@@ -0,0 +1,30 @@
+/* bottom-bar.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./bottom-bar.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var styles = {
+  bottomBar: "_1pfhpxbi"
+};
+
+/**
+ * __Bottom bar__.
+ *
+ * A bottom bar is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
+var BottomBar = function BottomBar(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.bottomBar
+  }, children);
+};
+var _default = exports.default = BottomBar;

package/dist/cjs/PageHeader/index.js

@@ -6,7 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _styled = require("./styled");
+var _actionsWrapper = _interopRequireDefault(require("./actions-wrapper"));
+var _bottomBar = _interopRequireDefault(require("./bottom-bar"));
+var _outerWrapper = _interopRequireDefault(require("./outer-wrapper"));
+var _title = _interopRequireDefault(require("./title"));
+var _titleContainer = _interopRequireDefault(require("./title-container"));
+var _titleWrapper = _interopRequireDefault(require("./title-wrapper"));
 // TODO: Remove this eslint-disable when prop names have been renamed.
 // This rule is here as prop name changes are a major as they are used
 // by our consumers. This can be done in the next lite-mode conversion.
@@ -34,15 +39,15 @@ var PageHeader = function PageHeader(_ref) {
     _ref$truncateTitle = _ref.truncateTitle,
     truncateTitle = _ref$truncateTitle === void 0 ? false : _ref$truncateTitle,
     testId = _ref.testId;
-  return /*#__PURE__*/_react.default.createElement(_styled.OuterWrapper, null, breadcrumbs, /*#__PURE__*/_react.default.createElement(_styled.TitleWrapper, {
+  return /*#__PURE__*/_react.default.createElement(_outerWrapper.default, null, breadcrumbs, /*#__PURE__*/_react.default.createElement(_titleWrapper.default, {
     truncateTitle: truncateTitle
-  }, /*#__PURE__*/_react.default.createElement(_styled.TitleContainer, {
+  }, /*#__PURE__*/_react.default.createElement(_titleContainer.default, {
     truncateTitle: truncateTitle
-  }, disableTitleStyles ? children : /*#__PURE__*/_react.default.createElement(_styled.StyledTitleWrapper, {
+  }, disableTitleStyles ? children : /*#__PURE__*/_react.default.createElement(_title.default, {
     ref: innerRef,
     truncateTitle: truncateTitle,
     id: id,
     testId: testId
-  }, children)), actions && /*#__PURE__*/_react.default.createElement(_styled.ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/_react.default.createElement(_styled.BottomBarWrapper, null, " ", bottomBar, " "));
+  }, children)), actions && /*#__PURE__*/_react.default.createElement(_actionsWrapper.default, null, actions)), bottomBar && /*#__PURE__*/_react.default.createElement(_bottomBar.default, null, " ", bottomBar, " "));
 };
 var _default = exports.default = PageHeader;

package/dist/cjs/PageHeader/outer-wrapper.compiled.css

@@ -0,0 +1,4 @@
+._12l2idpf{margin-inline-end:0}
+._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}
+._6rthpxbi{margin-block-end:var(--ds-space-200,1pc)}
+._ahbqidpf{margin-inline-start:0}

package/dist/cjs/PageHeader/outer-wrapper.js

@@ -0,0 +1,28 @@
+/* outer-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./outer-wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var outerStyles = null;
+
+/**
+ * __Outer wrapper__.
+ *
+ * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
+ * the BottomBar and its Breadcrumbs.
+ *
+ */
+var OuterWrapper = function OuterWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_6rthpxbi _1pfh1ejb _12l2idpf _ahbqidpf"])
+  }, children);
+};
+var _default = exports.default = OuterWrapper;

package/dist/cjs/PageHeader/title-container.compiled.css

@@ -0,0 +1,7 @@
+._16jlkb7n{flex-grow:1}
+._1i4q1hna{overflow-wrap:break-word}
+._1o9zkb7n{flex-shrink:1}
+._1ul9idpf{min-width:0}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._i0dl1wug{flex-basis:auto}
+._p12f1osq{max-width:100%}

package/dist/cjs/PageHeader/title-container.js

@@ -0,0 +1,33 @@
+/* title-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./title-container.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var titleContainerStyles = null;
+var titleContainerTruncateStyles = null;
+/**
+ * Title container.
+ *
+ * A title container is a container that wraps around the title and its styles (if applied).
+ *
+ */
+var TitleContainer = function TitleContainer(_ref) {
+  var children = _ref.children,
+    truncateTitle = _ref.truncateTitle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _p12f1osq _6rthu2gc _1i4q1hna", truncateTitle && "_1o9zkb7n"])
+  }, children);
+};
+var _default = exports.default = TitleContainer;

package/dist/cjs/PageHeader/title-wrapper.compiled.css

@@ -0,0 +1,3 @@
+._1e0c1txw{display:flex}
+._1n261q9c{flex-wrap:nowrap}
+._4cvr1y6m{align-items:flex-start}

package/dist/cjs/PageHeader/title-wrapper.js

@@ -0,0 +1,33 @@
+/* title-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./title-wrapper.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var titleWrapperStyles = null;
+var titleWrapperTruncateStyles = null;
+/**
+ * __Title wrapper__.
+ *
+ * A title wrapper is a wrapper around the title and the actions.
+ *
+ */
+var TitleWrapper = function TitleWrapper(_ref) {
+  var children = _ref.children,
+    truncateTitle = _ref.truncateTitle;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1y6m _1n261q9c", truncateTitle && "_1n261q9c"])
+  }, children);
+};
+var _default = exports.default = TitleWrapper;

package/dist/cjs/PageHeader/title.compiled.css

@@ -0,0 +1,11 @@
+._11c810sd{font:var(--ds-font-heading-large,normal 653 24px/28px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1dyz4jg8{letter-spacing:normal}
+._1pfhidpf{margin-block-start:0}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._o5721q9c{white-space:nowrap}
+._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/cjs/PageHeader/title.js

@@ -0,0 +1,38 @@
+/* title.tsx generated by @compiled/babel-plugin v0.39.1 */
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("./title.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _react = _interopRequireDefault(require("react"));
+var truncateStyles = null;
+var titleStyles = null;
+/**
+ * __Styled title wrapper__.
+ *
+ * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
+ *
+ */
+var Title = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    truncateTitle = _ref.truncateTitle,
+    testId = _ref.testId;
+  return /*#__PURE__*/_react.default.createElement("h1", {
+    ref: ref,
+    tabIndex: -1,
+    id: id,
+    "data-testid": testId && "".concat(testId, "--title"),
+    className: (0, _runtime.ax)(["_11c810sd _12ji1r31 _1qu2glyw _12y31o36 _syazi7uo _1dyz4jg8 _1pfhidpf", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+  }, children);
+});
+var _default = exports.default = Title;

package/dist/es2019/PageHeader/actions-wrapper.compiled.css

@@ -0,0 +1,8 @@
+._16jlidpf{flex-grow:0}
+._1o9zidpf{flex-shrink:0}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._ahbq1wug{margin-inline-start:auto}
+._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
+._i0dl1wug{flex-basis:auto}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}

package/dist/es2019/PageHeader/actions-wrapper.js

@@ -0,0 +1,20 @@
+/* actions-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./actions-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const actionStyles = null;
+
+/**
+ * __Actions wrapper__.
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
+const ActionsWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _p12f1osq _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c"])
+  }, children);
+};
+export default ActionsWrapper;

package/dist/es2019/PageHeader/bottom-bar.compiled.css

@@ -0,0 +1 @@
+._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}

package/dist/es2019/PageHeader/bottom-bar.js

@@ -0,0 +1,23 @@
+/* bottom-bar.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./bottom-bar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  bottomBar: "_1pfhpxbi"
+};
+
+/**
+ * __Bottom bar__.
+ *
+ * A bottom bar is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
+const BottomBar = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.bottomBar
+  }, children);
+};
+export default BottomBar;

package/dist/es2019/PageHeader/index.js

@@ -3,7 +3,12 @@
 // by our consumers. This can be done in the next lite-mode conversion.
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 import React from 'react';
-import { ActionsWrapper, BottomBarWrapper, OuterWrapper, StyledTitleWrapper, TitleContainer, TitleWrapper } from './styled';
+import ActionsWrapper from './actions-wrapper';
+import BottomBar from './bottom-bar';
+import OuterWrapper from './outer-wrapper';
+import Title from './title';
+import TitleContainer from './title-container';
+import TitleWrapper from './title-wrapper';
 /**
  * __Page header__
  *
@@ -29,11 +34,11 @@ const PageHeader = ({
     truncateTitle: truncateTitle
   }, /*#__PURE__*/React.createElement(TitleContainer, {
     truncateTitle: truncateTitle
-  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(StyledTitleWrapper, {
+  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(Title, {
     ref: innerRef,
     truncateTitle: truncateTitle,
     id: id,
     testId: testId
-  }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBarWrapper, null, " ", bottomBar, " "));
+  }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBar, null, " ", bottomBar, " "));
 };
 export default PageHeader;

package/dist/es2019/PageHeader/outer-wrapper.compiled.css

@@ -0,0 +1,4 @@
+._12l2idpf{margin-inline-end:0}
+._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}
+._6rthpxbi{margin-block-end:var(--ds-space-200,1pc)}
+._ahbqidpf{margin-inline-start:0}

package/dist/es2019/PageHeader/outer-wrapper.js

@@ -0,0 +1,21 @@
+/* outer-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./outer-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const outerStyles = null;
+
+/**
+ * __Outer wrapper__.
+ *
+ * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
+ * the BottomBar and its Breadcrumbs.
+ *
+ */
+const OuterWrapper = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_6rthpxbi _1pfh1ejb _12l2idpf _ahbqidpf"])
+  }, children);
+};
+export default OuterWrapper;

package/dist/es2019/PageHeader/title-container.compiled.css

@@ -0,0 +1,7 @@
+._16jlkb7n{flex-grow:1}
+._1i4q1hna{overflow-wrap:break-word}
+._1o9zkb7n{flex-shrink:1}
+._1ul9idpf{min-width:0}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._i0dl1wug{flex-basis:auto}
+._p12f1osq{max-width:100%}

package/dist/es2019/PageHeader/title-container.js

@@ -0,0 +1,26 @@
+/* title-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
+import "./title-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const titleContainerStyles = null;
+const titleContainerTruncateStyles = null;
+/**
+ * Title container.
+ *
+ * A title container is a container that wraps around the title and its styles (if applied).
+ *
+ */
+const TitleContainer = ({
+  children,
+  truncateTitle
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _p12f1osq _6rthu2gc _1i4q1hna", truncateTitle && "_1o9zkb7n"])
+  }, children);
+};
+export default TitleContainer;

package/dist/es2019/PageHeader/title-wrapper.compiled.css

@@ -0,0 +1,3 @@
+._1e0c1txw{display:flex}
+._1n261q9c{flex-wrap:nowrap}
+._4cvr1y6m{align-items:flex-start}

package/dist/es2019/PageHeader/title-wrapper.js

@@ -0,0 +1,26 @@
+/* title-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
+import "./title-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const titleWrapperStyles = null;
+const titleWrapperTruncateStyles = null;
+/**
+ * __Title wrapper__.
+ *
+ * A title wrapper is a wrapper around the title and the actions.
+ *
+ */
+const TitleWrapper = ({
+  children,
+  truncateTitle
+}) => {
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_1e0c1txw _4cvr1y6m _1n261q9c", truncateTitle && "_1n261q9c"])
+  }, children);
+};
+export default TitleWrapper;

package/dist/es2019/PageHeader/title.compiled.css

@@ -0,0 +1,11 @@
+._11c810sd{font:var(--ds-font-heading-large,normal 653 24px/28px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._12ji1r31{outline-color:currentColor}
+._12y31o36{outline-width:medium}
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1dyz4jg8{letter-spacing:normal}
+._1pfhidpf{margin-block-start:0}
+._1qu2glyw{outline-style:none}
+._1reo15vq{overflow-x:hidden}
+._o5721q9c{white-space:nowrap}
+._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/es2019/PageHeader/title.js

@@ -0,0 +1,32 @@
+/* title.tsx generated by @compiled/babel-plugin v0.39.1 */
+// TODO: Remove this eslint-disable when prop names have been renamed.
+// This rule is here as prop name changes are a major as they are used
+// by our consumers. The prop name concerned here is truncateTitle.
+// This can be done in the next lite-mode conversion.
+/* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
+import "./title.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React from 'react';
+const truncateStyles = null;
+const titleStyles = null;
+/**
+ * __Styled title wrapper__.
+ *
+ * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
+ *
+ */
+const Title = /*#__PURE__*/React.forwardRef(({
+  children,
+  id,
+  truncateTitle,
+  testId
+}, ref) => {
+  return /*#__PURE__*/React.createElement("h1", {
+    ref: ref,
+    tabIndex: -1,
+    id: id,
+    "data-testid": testId && `${testId}--title`,
+    className: ax(["_11c810sd _12ji1r31 _1qu2glyw _12y31o36 _syazi7uo _1dyz4jg8 _1pfhidpf", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+  }, children);
+});
+export default Title;

package/dist/esm/PageHeader/actions-wrapper.compiled.css

@@ -0,0 +1,8 @@
+._16jlidpf{flex-grow:0}
+._1o9zidpf{flex-shrink:0}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._ahbq1wug{margin-inline-start:auto}
+._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
+._i0dl1wug{flex-basis:auto}
+._o5721q9c{white-space:nowrap}
+._p12f1osq{max-width:100%}

package/dist/esm/PageHeader/actions-wrapper.js

@@ -0,0 +1,19 @@
+/* actions-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./actions-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var actionStyles = null;
+
+/**
+ * __Actions wrapper__.
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
+var ActionsWrapper = function ActionsWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_16jlidpf _1o9zidpf _i0dl1wug _p12f1osq _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c"])
+  }, children);
+};
+export default ActionsWrapper;

package/dist/esm/PageHeader/bottom-bar.compiled.css

@@ -0,0 +1 @@
+._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}

package/dist/esm/PageHeader/bottom-bar.js

@@ -0,0 +1,22 @@
+/* bottom-bar.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./bottom-bar.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  bottomBar: "_1pfhpxbi"
+};
+
+/**
+ * __Bottom bar__.
+ *
+ * A bottom bar is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
+var BottomBar = function BottomBar(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.bottomBar
+  }, children);
+};
+export default BottomBar;

package/dist/esm/PageHeader/index.js

@@ -3,7 +3,12 @@
 // by our consumers. This can be done in the next lite-mode conversion.
 /* eslint-disable @repo/internal/react/boolean-prop-naming-convention */
 import React from 'react';
-import { ActionsWrapper, BottomBarWrapper, OuterWrapper, StyledTitleWrapper, TitleContainer, TitleWrapper } from './styled';
+import ActionsWrapper from './actions-wrapper';
+import BottomBar from './bottom-bar';
+import OuterWrapper from './outer-wrapper';
+import Title from './title';
+import TitleContainer from './title-container';
+import TitleWrapper from './title-wrapper';
 /**
  * __Page header__
  *
@@ -30,11 +35,11 @@ var PageHeader = function PageHeader(_ref) {
     truncateTitle: truncateTitle
   }, /*#__PURE__*/React.createElement(TitleContainer, {
     truncateTitle: truncateTitle
-  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(StyledTitleWrapper, {
+  }, disableTitleStyles ? children : /*#__PURE__*/React.createElement(Title, {
     ref: innerRef,
     truncateTitle: truncateTitle,
     id: id,
     testId: testId
-  }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBarWrapper, null, " ", bottomBar, " "));
+  }, children)), actions && /*#__PURE__*/React.createElement(ActionsWrapper, null, actions)), bottomBar && /*#__PURE__*/React.createElement(BottomBar, null, " ", bottomBar, " "));
 };
 export default PageHeader;

package/dist/esm/PageHeader/outer-wrapper.compiled.css

@@ -0,0 +1,4 @@
+._12l2idpf{margin-inline-end:0}
+._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}
+._6rthpxbi{margin-block-end:var(--ds-space-200,1pc)}
+._ahbqidpf{margin-inline-start:0}

package/dist/esm/PageHeader/outer-wrapper.js

@@ -0,0 +1,20 @@
+/* outer-wrapper.tsx generated by @compiled/babel-plugin v0.39.1 */
+import "./outer-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+var outerStyles = null;
+
+/**
+ * __Outer wrapper__.
+ *
+ * An outer wrapper that is the outermost component of the PageHeader component. It wraps around the PageHeader, its Actions,
+ * the BottomBar and its Breadcrumbs.
+ *
+ */
+var OuterWrapper = function OuterWrapper(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax(["_6rthpxbi _1pfh1ejb _12l2idpf _ahbqidpf"])
+  }, children);
+};
+export default OuterWrapper;

package/dist/esm/PageHeader/title-container.compiled.css

@@ -0,0 +1,7 @@
+._16jlkb7n{flex-grow:1}
+._1i4q1hna{overflow-wrap:break-word}
+._1o9zkb7n{flex-shrink:1}
+._1ul9idpf{min-width:0}
+._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
+._i0dl1wug{flex-basis:auto}
+._p12f1osq{max-width:100%}