@atlaskit/page-header 12.1.16 → 12.1.18

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%}

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

@@ -0,0 +1,25 @@
+/* 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";
+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: ax(["_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _p12f1osq _6rthu2gc _1i4q1hna", truncateTitle && "_1o9zkb7n"])
+  }, children);
+};
+export default TitleContainer;

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

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

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

@@ -0,0 +1,25 @@
+/* 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";
+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: ax(["_1e0c1txw _4cvr1y6m _1n261q9c", truncateTitle && "_1n261q9c"])
+  }, children);
+};
+export default TitleWrapper;

package/dist/esm/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/esm/PageHeader/title.js

@@ -0,0 +1,31 @@
+/* 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';
+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.forwardRef(function (_ref, ref) {
+  var children = _ref.children,
+    id = _ref.id,
+    truncateTitle = _ref.truncateTitle,
+    testId = _ref.testId;
+  return /*#__PURE__*/React.createElement("h1", {
+    ref: ref,
+    tabIndex: -1,
+    id: id,
+    "data-testid": testId && "".concat(testId, "--title"),
+    className: ax(["_11c810sd _12ji1r31 _1qu2glyw _12y31o36 _syazi7uo _1dyz4jg8 _1pfhidpf", truncateTitle && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+  }, children);
+});
+export default Title;

package/dist/types/PageHeader/actions-wrapper.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * __Actions wrapper__.
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
+declare const ActionsWrapper: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default ActionsWrapper;

package/dist/types/PageHeader/bottom-bar.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * __Bottom bar__.
+ *
+ * A bottom bar is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
+declare const BottomBar: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default BottomBar;

package/dist/types/PageHeader/outer-wrapper.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * __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.
+ *
+ */
+declare const OuterWrapper: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default OuterWrapper;

package/dist/types/PageHeader/title-container.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+interface TitleProps {
+    truncateTitle?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Title container.
+ *
+ * A title container is a container that wraps around the title and its styles (if applied).
+ *
+ */
+declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => JSX.Element;
+export default TitleContainer;

package/dist/types/PageHeader/title-wrapper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+interface TitleProps {
+    truncateTitle?: boolean;
+    children?: ReactNode;
+}
+/**
+ * __Title wrapper__.
+ *
+ * A title wrapper is a wrapper around the title and the actions.
+ *
+ */
+declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => JSX.Element;
+export default TitleWrapper;

package/dist/types/PageHeader/title.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+interface TitleProps {
+    children?: React.ReactNode;
+    id?: string;
+    truncateTitle?: boolean;
+    testId?: string;
+}
+/**
+ * __Styled title wrapper__.
+ *
+ * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
+ *
+ */
+declare const Title: React.ForwardRefExoticComponent<React.PropsWithoutRef<TitleProps> & React.RefAttributes<HTMLHeadingElement>>;
+export default Title;

package/dist/types-ts4.5/PageHeader/actions-wrapper.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * __Actions wrapper__.
+ *
+ * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
+ *
+ */
+declare const ActionsWrapper: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default ActionsWrapper;

package/dist/types-ts4.5/PageHeader/bottom-bar.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * __Bottom bar__.
+ *
+ * A bottom bar is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
+ *
+ */
+declare const BottomBar: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default BottomBar;

package/dist/types-ts4.5/PageHeader/outer-wrapper.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+/**
+ * __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.
+ *
+ */
+declare const OuterWrapper: ({ children }: {
+    children: ReactNode;
+}) => JSX.Element;
+export default OuterWrapper;

package/dist/types-ts4.5/PageHeader/title-container.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+interface TitleProps {
+    truncateTitle?: boolean;
+    children?: ReactNode;
+}
+/**
+ * Title container.
+ *
+ * A title container is a container that wraps around the title and its styles (if applied).
+ *
+ */
+declare const TitleContainer: ({ children, truncateTitle }: TitleProps) => JSX.Element;
+export default TitleContainer;

package/dist/types-ts4.5/PageHeader/title-wrapper.d.ts

@@ -0,0 +1,17 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import { type ReactNode } from 'react';
+interface TitleProps {
+    truncateTitle?: boolean;
+    children?: ReactNode;
+}
+/**
+ * __Title wrapper__.
+ *
+ * A title wrapper is a wrapper around the title and the actions.
+ *
+ */
+declare const TitleWrapper: ({ children, truncateTitle }: TitleProps) => JSX.Element;
+export default TitleWrapper;

package/dist/types-ts4.5/PageHeader/title.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+import React from 'react';
+interface TitleProps {
+    children?: React.ReactNode;
+    id?: string;
+    truncateTitle?: boolean;
+    testId?: string;
+}
+/**
+ * __Styled title wrapper__.
+ *
+ * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
+ *
+ */
+declare const Title: React.ForwardRefExoticComponent<React.PropsWithoutRef<TitleProps> & React.RefAttributes<HTMLHeadingElement>>;
+export default Title;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/page-header",
-	"version": "12.1.16",
+	"version": "12.1.18",
 	"description": "A page header defines the top of a page. It contains a title and can be optionally combined with breadcrumbs buttons, search, and filters.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -25,10 +25,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/css": "^0.19.0",
-		"@atlaskit/primitives": "^17.1.0",
-		"@atlaskit/tokens": "^10.0.0",
+		"@atlaskit/primitives": "^18.1.0",
+		"@atlaskit/tokens": "^11.4.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.6"
+		"@compiled/react": "^0.20.0"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",
@@ -38,17 +38,18 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/breadcrumbs": "^15.3.0",
-		"@atlaskit/button": "^23.9.0",
-		"@atlaskit/docs": "^11.3.0",
-		"@atlaskit/ds-lib": "^5.3.0",
+		"@atlaskit/breadcrumbs": "^16.0.0",
+		"@atlaskit/button": "^23.10.0",
+		"@atlaskit/docs": "^11.7.0",
+		"@atlaskit/ds-lib": "^6.0.0",
 		"@atlaskit/inline-edit": "^15.6.0",
 		"@atlaskit/link": "^3.3.0",
 		"@atlaskit/page": "^14.0.0",
 		"@atlaskit/section-message": "^8.12.0",
-		"@atlaskit/select": "^21.7.0",
+		"@atlaskit/select": "^21.8.0",
 		"@atlaskit/textfield": "^8.2.0",
 		"@atlassian/ssr-tests": "workspace:^",
+		"@atlassian/structured-docs-types": "workspace:^",
 		"@testing-library/react": "^16.3.0",
 		"react-dom": "^18.2.0"
 	},

package/page-header.docs.tsx

@@ -0,0 +1,47 @@
+import path from 'path';
+
+import type { ComponentStructuredContentSource } from '@atlassian/structured-docs-types';
+
+const documentation: ComponentStructuredContentSource[] = [
+	{
+		name: 'PageHeader',
+		description: 'A component for page headers.',
+		status: 'general-availability',
+		import: {
+			name: 'PageHeader',
+			package: '@atlaskit/page-header',
+			type: 'default',
+			packagePath: path.resolve(__dirname),
+			packageJson: require('./package.json'),
+		},
+		usageGuidelines: [
+			'Use for consistent page header layout',
+			'Include breadcrumbs for navigation context',
+			'Provide relevant page actions',
+			'Use appropriate header hierarchy',
+		],
+		contentGuidelines: [
+			'Use clear, descriptive page titles',
+			'Provide meaningful breadcrumb labels',
+			'Use action-oriented button text',
+			'Keep header content focused',
+		],
+		accessibilityGuidelines: [
+			'Provide clear page titles',
+			'Use appropriate heading hierarchy',
+			'Ensure breadcrumb navigation is accessible',
+			'Provide clear action labels',
+		],
+		examples: [
+			{
+				name: 'Page Header',
+				description: 'Page Header example',
+				source: path.resolve(__dirname, './examples/ai/page-header.tsx'),
+			},
+		],
+		keywords: ['page', 'header', 'title', 'breadcrumbs', 'actions'],
+		categories: ['layout'],
+	},
+];
+
+export default documentation;

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

@@ -1,30 +0,0 @@
-._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}
-._12l2idpf{margin-inline-end:0}
-._12y31o36{outline-width:medium}
-._16jlidpf{flex-grow:0}
-._16jlkb7n{flex-grow:1}
-._18m915vq{overflow-y:hidden}
-._1bto1l2s{text-overflow:ellipsis}
-._1dyz4jg8{letter-spacing:normal}
-._1e0c1txw{display:flex}
-._1i4q1hna{overflow-wrap:break-word}
-._1n261q9c{flex-wrap:nowrap}
-._1o9zidpf{flex-shrink:0}
-._1o9zkb7n{flex-shrink:1}
-._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}
-._1pfhidpf{margin-block-start:0}
-._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}
-._1qu2glyw{outline-style:none}
-._1reo15vq{overflow-x:hidden}
-._1ul9idpf{min-width:0}
-._4cvr1y6m{align-items:flex-start}
-._6rthpxbi{margin-block-end:var(--ds-space-200,1pc)}
-._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
-._ahbq1wug{margin-inline-start:auto}
-._ahbqidpf{margin-inline-start:0}
-._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
-._i0dl1wug{flex-basis:auto}
-._o5721q9c{white-space:nowrap}
-._p12f1osq{max-width:100%}
-._syazi7uo{color:var(--ds-text,#292a2e)}

package/dist/cjs/PageHeader/styled.js

@@ -1,114 +0,0 @@
-/* styled.tsx generated by @compiled/babel-plugin v0.38.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.TitleWrapper = exports.TitleContainer = exports.StyledTitleWrapper = exports.OuterWrapper = exports.BottomBarWrapper = exports.ActionsWrapper = void 0;
-require("./styled.compiled.css");
-var _runtime = require("@compiled/react/runtime");
-var _react = _interopRequireDefault(require("react"));
-var _compiled = require("@atlaskit/primitives/compiled");
-var styles = {
-  bottomBar: "_1pfhpxbi"
-};
-var truncateStyles = null;
-var outerStyles = null;
-var titleStyles = null;
-var titleWrapperStyles = null;
-var titleWrapperTruncateStyles = null;
-var titleContainerStyles = null;
-var actionStyles = null;
-var titleContainerTruncateStyles = 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 = exports.OuterWrapper = function OuterWrapper(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_6rthpxbi _1pfh1ejb _12l2idpf _ahbqidpf"])
-  }, children);
-};
-/**
- * __Styled title wrapper__.
- *
- * A styled title wrapper is a wrapper around the title that controls its the styles exclusively.
- *
- */
-var StyledTitleWrapper = exports.StyledTitleWrapper = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
-  var children = _ref2.children,
-    id = _ref2.id,
-    truncateTitle = _ref2.truncateTitle,
-    testId = _ref2.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);
-});
-/**
- * __Title wrapper__.
- *
- * A title wrapper is a wrapper around the title and the actions.
- *
- */
-var TitleWrapper = exports.TitleWrapper = function TitleWrapper(_ref3) {
-  var children = _ref3.children,
-    truncateTitle = _ref3.truncateTitle;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1y6m _1n261q9c", truncateTitle && "_1n261q9c"])
-  }, children);
-};
-
-/**
- * Title container.
- *
- * A title container is a container that wraps around the title and its styles (if applied).
- *
- */
-var TitleContainer = exports.TitleContainer = function TitleContainer(_ref4) {
-  var children = _ref4.children,
-    truncateTitle = _ref4.truncateTitle;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_16jlkb7n _1o9zkb7n _i0dl1wug _1ul9idpf _p12f1osq _6rthu2gc _1i4q1hna", truncateTitle && "_1o9zkb7n"])
-  }, children);
-};
-
-/**
- * __Actions wrapper__.
- *
- * An actions wrapper is a wrapper for the actions, which appear on the top right of the PageHeader component.
- *
- */
-var ActionsWrapper = exports.ActionsWrapper = function ActionsWrapper(_ref5) {
-  var children = _ref5.children;
-  return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _runtime.ax)(["_16jlidpf _1o9zidpf _i0dl1wug _p12f1osq _6rthu2gc _ahbq1wug _bozgxy5q _o5721q9c"])
-  }, children);
-};
-
-/**
- * __Bottom bar wrapper__.
- *
- * A bottom bar wrapper is a wrapper for the bottom bar, which appears at the bottom of the PageHeader component.
- *
- */
-var BottomBarWrapper = exports.BottomBarWrapper = function BottomBarWrapper(_ref6) {
-  var children = _ref6.children;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: styles.bottomBar
-  }, children);
-};

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

@@ -1,30 +0,0 @@
-._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}
-._12l2idpf{margin-inline-end:0}
-._12y31o36{outline-width:medium}
-._16jlidpf{flex-grow:0}
-._16jlkb7n{flex-grow:1}
-._18m915vq{overflow-y:hidden}
-._1bto1l2s{text-overflow:ellipsis}
-._1dyz4jg8{letter-spacing:normal}
-._1e0c1txw{display:flex}
-._1i4q1hna{overflow-wrap:break-word}
-._1n261q9c{flex-wrap:nowrap}
-._1o9zidpf{flex-shrink:0}
-._1o9zkb7n{flex-shrink:1}
-._1pfh1ejb{margin-block-start:var(--ds-space-300,24px)}
-._1pfhidpf{margin-block-start:0}
-._1pfhpxbi{margin-block-start:var(--ds-space-200,1pc)}
-._1qu2glyw{outline-style:none}
-._1reo15vq{overflow-x:hidden}
-._1ul9idpf{min-width:0}
-._4cvr1y6m{align-items:flex-start}
-._6rthpxbi{margin-block-end:var(--ds-space-200,1pc)}
-._6rthu2gc{margin-block-end:var(--ds-space-100,8px)}
-._ahbq1wug{margin-inline-start:auto}
-._ahbqidpf{margin-inline-start:0}
-._bozgxy5q{padding-inline-start:var(--ds-space-400,2pc)}
-._i0dl1wug{flex-basis:auto}
-._o5721q9c{white-space:nowrap}
-._p12f1osq{max-width:100%}
-._syazi7uo{color:var(--ds-text,#292a2e)}