@drivenets/design-system 0.15.0 → 0.16.0

package/src/components/ds-spinner/ds-spinner.figma.ts

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15119-13518
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-spinner
+// component=DsSpinner
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('Size', {
+	SM: 'small',
+	Default: 'medium',
+	LG: 'large',
+});
+
+export default {
+	example: figma.code`<DsSpinner size="${size}" />`,
+	imports: ["import { DsSpinner } from '@drivenets/design-system'"],
+	id: 'ds-spinner',
+	metadata: { nestable: true },
+};

package/src/components/ds-spinner/ds-spinner.tsx

@@ -48,4 +48,6 @@ const DsSpinner: React.FC<DsSpinnerProps> = ({ size = 'medium', className, style
 	);
 };
 
+DsSpinner.displayName = 'DsSpinner';
+
 export default DsSpinner;

package/src/components/ds-split-button/ds-split-button.tsx

@@ -4,6 +4,12 @@ import styles from './ds-split-button.module.scss';
 import type { DsSplitButtonProps, SplitButtonSize } from './ds-split-button.types';
 import { DsButtonV3 } from '../ds-button-v3';
 
+/**
+ * Secondary action button paired with a dropdown select for choosing a related option.
+ * Both slots share a size and disabled state controlled by the split button.
+ *
+ * @summary split action button with a primary action and an option select
+ */
 const DsSplitButton = ({
 	ref,
 	className,

package/src/components/ds-status-badge/ds-status-badge.tsx

@@ -39,4 +39,6 @@ const DsStatusBadge: React.FC<DsStatusBadgeProps> = ({
 	);
 };
 
+DsStatusBadge.displayName = 'DsStatusBadge';
+
 export default DsStatusBadge;

package/src/components/ds-status-badge-v2/index.ts

@@ -11,3 +11,5 @@ export type {
 	DsStatusBadgeV2Props,
 } from './ds-status-badge-v2.types';
 export { statusBadgeV2Phases, statusBadgeV2Variants, statusBadgeV2Sizes } from './ds-status-badge-v2.types';
+
+DsStatusBadgeV2.displayName = 'DsStatusBadgeV2';

package/src/components/ds-stepper/components/ds-step-content.tsx

@@ -48,3 +48,5 @@ export function DsStepContent({ index, label, description, actions }: DsStepCont
 		</div>
 	);
 }
+
+DsStepContent.displayName = 'DsStepContent';

package/src/components/ds-stepper/components/ds-step-next-button.tsx

@@ -20,3 +20,5 @@ export function DsNextStepButton({ children, size = 'small', ...rest }: DsNextSt
 		</DsButton>
 	);
 }
+
+DsNextStepButton.displayName = 'DsNextStepButton';

package/src/components/ds-stepper/components/ds-step.tsx

@@ -116,3 +116,5 @@ export function DsStep({
 		</Wrapper>
 	);
 }
+
+DsStep.displayName = 'DsStep';

package/src/components/ds-stepper/ds-stepper.figma.ts

@@ -0,0 +1,38 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=29164-187694
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-stepper
+// component=DsStepper
+//
+// `direction` maps to `orientation`. Figma's `type` (detailed|compact) is not a code prop:
+// detailed steps carry a `description` on each `DsStepContent`, compact steps omit it. The
+// steps are composed in code (`DsStep` > `DsStepContent` > `DsNextStepButton`), not derivable
+// from Figma's step atoms, and `count` is data — so a representative two-step composition is
+// emitted for the developer to extend (one `DsStep` per step). The panel-docked wrappers
+// (`DAP_stepper-panel-*_v01`) are a `DsPanel` composition and are intentionally not connected;
+// the stepper still resolves when nested inside them.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const orientation =
+	instance.getEnum('direction', {
+		vertical: 'vertical',
+		horizontal: 'horizontal',
+	}) ?? 'vertical';
+
+const detailed = instance.getEnum('type', { detailed: true, compact: false }) ?? true;
+const description = detailed ? ' description="Step description"' : '';
+
+export default {
+	example: figma.code`<DsStepper count={2} orientation="${orientation}">
+	<DsStep index={0}>
+		<DsStepContent index={0} label="Step title"${description} actions={<DsNextStepButton>Next</DsNextStepButton>} />
+	</DsStep>
+	<DsStep index={1}>
+		<DsStepContent index={1} label="Step title"${description} actions={<DsNextStepButton>Finish</DsNextStepButton>} />
+	</DsStep>
+	{/* Add a <DsStep> per step */}
+</DsStepper>`,
+	imports: ["import { DsStepper, DsStep, DsStepContent, DsNextStepButton } from '@drivenets/design-system'"],
+	id: 'ds-stepper',
+	metadata: { nestable: true },
+};

package/src/components/ds-stepper/ds-stepper.tsx

@@ -58,3 +58,4 @@ export function DsStepper({
 		</StepperContext.Provider>
 	);
 }
+DsStepper.displayName = 'DsStepper';

package/src/components/ds-system-status/ds-system-status.tsx

@@ -30,4 +30,6 @@ const DsSystemStatus: React.FC<DsSystemStatusProps> = ({ status, label, classNam
 	);
 };
 
+DsSystemStatus.displayName = 'DsSystemStatus';
+
 export default DsSystemStatus;

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-checkbox.tsx

@@ -25,3 +25,4 @@ export const DsTableEditCellCheckbox = <TData extends RowData>({
 		/>
 	);
 };
+DsTableEditCellCheckbox.displayName = 'DsTableEditCellCheckbox';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-date.tsx

@@ -48,3 +48,4 @@ export const DsTableEditCellDate = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellDate.displayName = 'DsTableEditCellDate';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-number.tsx

@@ -49,3 +49,4 @@ export const DsTableEditCellNumber = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellNumber.displayName = 'DsTableEditCellNumber';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-select.tsx

@@ -34,3 +34,4 @@ export const DsTableEditCellSelect = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellSelect.displayName = 'DsTableEditCellSelect';

package/src/components/ds-table/components/edit/cell-editors/ds-table-edit-cell-text.tsx

@@ -48,3 +48,4 @@ export const DsTableEditCellText = <TData extends RowData>({
 		</TableEditFormControl>
 	);
 };
+DsTableEditCellText.displayName = 'DsTableEditCellText';

package/src/components/ds-table/components/edit/ds-table-editable-cell/ds-table-editable-cell.tsx

@@ -56,3 +56,4 @@ export const DsTableEditableCell = <TData, TValue>({
 		</div>
 	);
 };
+DsTableEditableCell.displayName = 'DsTableEditableCell';

package/src/components/ds-table/components/edit/ds-table-editing-cell/ds-table-editing-cell.tsx

@@ -74,3 +74,4 @@ export const DsTableEditingCell = <TData, TValue>({ cell }: DsTableEditingCellPr
 		</div>
 	);
 };
+DsTableEditingCell.displayName = 'DsTableEditingCell';

package/src/components/ds-table/ds-table.tsx

@@ -386,4 +386,6 @@ const DsTable = <TData extends { id: string }, TValue>({
 	);
 };
 
+DsTable.displayName = 'DsTable';
+
 export default DsTable;

package/src/components/ds-table/index.ts

@@ -10,6 +10,9 @@ export type { DsTableEditDisabledResult } from './ds-table-column.types';
 export { default as DsTable } from './ds-table';
 export * from './ds-table.types';
 
+export { createColumnHelper } from '@tanstack/react-table';
+export type { ColumnDef } from '@tanstack/react-table';
+
 export { useCellEditor } from './hooks/use-cell-editor';
 export type {
 	UseCellEditorOptions,

package/src/components/ds-tabs/components/ds-tabs-content/ds-tabs-content.tsx

@@ -10,3 +10,5 @@ export const DsTabsContent = ({ value, className, style, children }: DsTabsConte
 		</Tabs.Content>
 	);
 };
+
+DsTabsContent.displayName = 'DsTabs.Content';

package/src/components/ds-tabs/components/ds-tabs-list/ds-tabs-list.tsx

@@ -12,3 +12,5 @@ export const DsTabsList = ({ className, style, children }: DsTabsListProps) => {
 		</Tabs.List>
 	);
 };
+
+DsTabsList.displayName = 'DsTabs.List';

package/src/components/ds-tabs/components/ds-tabs-tab/ds-tabs-tab.tsx

@@ -127,3 +127,5 @@ export const DsTabsTab = ({
 		</>
 	);
 };
+
+DsTabsTab.displayName = 'DsTabs.Tab';

package/src/components/ds-tabs/ds-tabs.tsx

@@ -38,6 +38,8 @@ const DsTabsRoot = ({
 	);
 };
 
+DsTabsRoot.displayName = 'DsTabs.Root';
+
 export const DsTabs = {
 	Root: DsTabsRoot,
 	List: DsTabsList,

package/src/components/ds-tag/ds-tag.tsx

@@ -134,4 +134,6 @@ const DsTag = ({
 	);
 };
 
+DsTag.displayName = 'DsTag';
+
 export default DsTag;

package/src/components/ds-tag-filter/ds-tag-filter.tsx

@@ -133,4 +133,6 @@ const DsTagFilter = ({
 	);
 };
 
+DsTagFilter.displayName = 'DsTagFilter';
+
 export default DsTagFilter;

package/src/components/ds-text-input/ds-input-field-v02.figma.ts

@@ -0,0 +1,87 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=39475-58722
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-text-input
+// component=DsTextInput
+import figma from 'figma';
+
+interface FieldInfo {
+	component: string;
+	fcMember?: string;
+	size?: boolean;
+	readOnly?: boolean;
+	invalid?: boolean;
+	data?: string;
+}
+
+const textInfo: FieldInfo = { component: 'DsTextInput', fcMember: 'TextInput', size: true, readOnly: true };
+
+const registry: Record<string, FieldInfo> = {
+	text: textInfo,
+	textArea: { component: 'DsTextarea', fcMember: 'Textarea' },
+	number: { component: 'DsNumberInput', fcMember: 'NumberInput', size: true, readOnly: true },
+	password: { component: 'DsPasswordInput', fcMember: 'PasswordInput', size: true, readOnly: true },
+	select: { component: 'DsSelect', fcMember: 'Select', invalid: true, data: 'options={[]} value=""' },
+	date: { component: 'DsDateInput', fcMember: 'DateInput' },
+	time: { component: 'DsTimePicker', fcMember: 'TimePicker' },
+	autocompleteSearch: {
+		component: 'DsAutocomplete',
+		invalid: true,
+		data: 'options={[]} showTrigger={false}',
+	},
+	autocompleteCombobox: { component: 'DsAutocomplete', invalid: true, data: 'options={[]}' },
+};
+
+const instance = figma.selectedInstance;
+
+const size = instance.getEnum('size', {
+	small: 'small',
+	medium: 'medium',
+	large: 'large',
+});
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+	'read-only': 'readOnly',
+	error: 'error',
+});
+
+const part = instance.findInstance('DAP-part_InputType_v01', { traverseInstances: true });
+const inputType =
+	(part.type === 'INSTANCE'
+		? part.getEnum('inputType', {
+				text: 'text',
+				'text-area': 'textArea',
+				select: 'select',
+				password: 'password',
+				number: 'number',
+				date: 'date',
+				time: 'time',
+				'autocomplete-search': 'autocompleteSearch',
+				'autocomplete-combobox': 'autocompleteCombobox',
+			})
+		: 'text') ?? 'text';
+
+const info = registry[inputType] ?? textInfo;
+
+const disabled = state === 'disabled';
+const readOnly = state === 'readOnly';
+const error = state === 'error';
+
+const attrs = [
+	info.size && size === 'small' ? 'size="small"' : '',
+	info.data ?? '',
+	disabled ? 'disabled' : '',
+	info.readOnly && readOnly ? 'readOnly' : '',
+	info.invalid && error ? 'invalid' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<${info.component} ${attrs} />`,
+	imports: [`import { ${info.component} } from '@drivenets/design-system'`],
+	id: 'ds-input-field-v02',
+	metadata: { nestable: true, props: { fcMember: info.fcMember, fcProps: attrs } },
+};

package/src/components/ds-text-input/ds-text-input.tsx

@@ -76,4 +76,6 @@ const DsTextInput: FC<DsTextInputProps> = ({
 	);
 };
 
+DsTextInput.displayName = 'DsTextInput';
+
 export default DsTextInput;

package/src/components/ds-textarea/ds-textarea.tsx

@@ -46,4 +46,6 @@ const DsTextarea: React.FC<DsTextareaProps> = ({
 	);
 };
 
+DsTextarea.displayName = 'DsTextarea';
+
 export default DsTextarea;

package/src/components/ds-time-picker/ds-time-picker.tsx

@@ -182,4 +182,6 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 	);
 };
 
+DsTimePicker.displayName = 'DsTimePicker';
+
 export default DsTimePicker;

package/src/components/ds-toast/ds-toast-context.tsx

@@ -77,3 +77,4 @@ export const useToaster = (): DsToastContextType => {
 	}
 	return context;
 };
+DsToastProvider.displayName = 'DsToastProvider';

package/src/components/ds-toast/ds-toast.figma.ts

@@ -0,0 +1,34 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15100-3016
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-toast
+// component=DsToast
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const variant = instance.getEnum('Type', {
+	info: 'info',
+	success: 'success',
+	warning: 'warning',
+	error: 'error',
+});
+
+const extended = instance.getEnum('Extended', { True: true, False: false });
+const cta = instance.getEnum('CTA', { True: true, False: false });
+
+const titleLine = extended ? `\n\ttitle: 'Title',` : '';
+const actionsLine = cta ? `\n\tactions: <DsButtonV3 variant="secondary">Action</DsButtonV3>,` : '';
+
+export default {
+	example: figma.code`const { createToast } = useToaster();
+
+createToast({
+	variant: '${variant}',${titleLine}
+	description: 'Description',${actionsLine}
+});`,
+	imports: [
+		"import { useToaster } from '@drivenets/design-system'",
+		"import { DsButtonV3 } from '@drivenets/design-system'",
+	],
+	id: 'ds-toast',
+	metadata: { nestable: false },
+};

package/src/components/ds-toast/ds-toast.tsx

@@ -51,4 +51,7 @@ const DsToastGroup: React.FC<{ toaster: CreateToasterReturn }> = ({ toaster }) =
 	return <Toaster toaster={toaster}>{(toast: DsToastProps) => <DsToast {...toast} />}</Toaster>;
 };
 
+DsToast.displayName = 'DsToast';
+DsToastGroup.displayName = 'DsToastGroup';
+
 export { DsToast, DsToastGroup };

package/src/components/ds-toggle/ds-toggle.figma.ts

@@ -0,0 +1,39 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15035-29699
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-toggle
+// component=DsToggle
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const on = instance.getEnum('On', {
+	Yes: 'yes',
+	No: 'no',
+});
+
+const size = instance.getEnum('Size', {
+	Default: 'default',
+	Small: 'small',
+});
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Focus: 'focus',
+	Disabled: 'disabled',
+});
+
+const attrs = [
+	'label="Label"',
+	size === 'small' ? 'size="small"' : '',
+	on === 'yes' ? 'checked' : '',
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsToggle ${attrs} />`,
+	imports: ["import { DsToggle } from '@drivenets/design-system'"],
+	id: 'ds-toggle',
+	metadata: { nestable: true },
+};

package/src/components/ds-toggle/ds-toggle.tsx

@@ -75,4 +75,6 @@ const DsToggle = ({
 	);
 };
 
+DsToggle.displayName = 'DsToggle';
+
 export default DsToggle;

package/src/components/ds-tooltip/ds-tooltip.figma.ts

@@ -0,0 +1,16 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14845-9203
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-tooltip
+// component=DsTooltip
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const labelNode = instance.findText('Tooltip', { traverseInstances: true });
+const content = labelNode.type === 'TEXT' ? labelNode.textContent : 'Tooltip text';
+
+export default {
+	example: figma.code`<DsTooltip content="${content}">{/* trigger element */}</DsTooltip>`,
+	imports: ["import { DsTooltip } from '@drivenets/design-system'"],
+	id: 'ds-tooltip',
+	metadata: { nestable: false },
+};

package/src/components/ds-tooltip/ds-tooltip.module.scss

@@ -1,4 +1,7 @@
+@use '../../styles/typography';
+
 .tooltip {
+	--arrow-size: 7px;
 	color: var(--font-on-action);
 	background-color: var(--background-brand);
 	padding: var(--xs) var(--sm);
@@ -8,6 +11,10 @@
 	z-index: 9999;
 }
 
+.text {
+	@include typography.body-xs-reg;
+}
+
 .arrow {
-	fill: var(--color-dap-gray-700);
+	--arrow-background: var(--color-dap-gray-700);
 }

package/src/components/ds-tooltip/ds-tooltip.tsx

@@ -1,33 +1,53 @@
 import { type FC, isValidElement } from 'react';
-import * as Tooltip from '@radix-ui/react-tooltip';
+import { Tooltip } from '@ark-ui/react/tooltip';
+import { Portal } from '@ark-ui/react/portal';
 import classNames from 'classnames';
 import styles from './ds-tooltip.module.scss';
 import type { DsTooltipProps } from './ds-tooltip.types';
-import { DsTypography } from '../ds-typography';
 
-const DsTooltip: FC<DsTooltipProps> = ({ content, children, slotProps }) => {
+const OPEN_DELAY_MS = 200;
+const CLOSE_DELAY_MS = 0;
+const TOOLTIP_GUTTER_PX = 0;
+
+const DsTooltip: FC<DsTooltipProps> = ({
+	content,
+	children,
+	placement = 'top',
+	disabled = false,
+	getAnchorRect,
+	slotProps,
+}) => {
 	if (content === undefined) {
 		return children;
 	}
+
 	return (
-		<Tooltip.Provider delayDuration={200}>
-			<Tooltip.Root>
-				<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
-				<Tooltip.Portal>
+		<Tooltip.Root
+			openDelay={OPEN_DELAY_MS}
+			closeDelay={CLOSE_DELAY_MS}
+			disabled={disabled}
+			positioning={{ placement, gutter: TOOLTIP_GUTTER_PX, getAnchorRect: getAnchorRect ?? undefined }}
+			lazyMount
+			unmountOnExit
+		>
+			<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>
+			<Portal>
+				<Tooltip.Positioner>
 					<Tooltip.Content
 						className={classNames(styles.tooltip, slotProps?.content?.className)}
 						style={slotProps?.content?.style}
-						side="top"
-						align="center"
-						sideOffset={4}
 					>
-						{isValidElement(content) ? content : <DsTypography variant="body-xs-reg">{content}</DsTypography>}
-						<Tooltip.Arrow className={styles.arrow} />
+						{isValidElement(content) ? content : <span className={styles.text}>{content}</span>}
+						<Tooltip.Arrow className={styles.arrow}>
+							<Tooltip.ArrowTip />
+						</Tooltip.Arrow>
 					</Tooltip.Content>
-				</Tooltip.Portal>
-			</Tooltip.Root>
-		</Tooltip.Provider>
+				</Tooltip.Positioner>
+			</Portal>
+		</Tooltip.Root>
 	);
 };
 
+DsTooltip.displayName = 'DsTooltip';
+
 export default DsTooltip;

package/src/components/ds-tooltip/ds-tooltip.types.ts

@@ -1,5 +1,32 @@
 import type { CSSProperties, ReactNode } from 'react';
 
+export const tooltipPlacements = [
+	'top',
+	'top-start',
+	'top-end',
+	'bottom',
+	'bottom-start',
+	'bottom-end',
+	'left',
+	'left-start',
+	'left-end',
+	'right',
+	'right-start',
+	'right-end',
+] as const;
+
+export type TooltipPlacement = (typeof tooltipPlacements)[number];
+
+/**
+ * Viewport-relative rect (CSS pixels) the tooltip anchors to, instead of the trigger.
+ */
+export interface TooltipAnchorRect {
+	x: number;
+	y: number;
+	width: number;
+	height: number;
+}
+
 export interface DsTooltipProps {
 	/**
 	 * Tooltip content
@@ -9,6 +36,19 @@ export interface DsTooltipProps {
 	 * The content to be rendered inside the tooltip
 	 */
 	children: ReactNode;
+	/**
+	 * Placement relative to the trigger; `-start` / `-end` align to that edge.
+	 */
+	placement?: TooltipPlacement;
+	/**
+	 * When true the trigger renders but the tooltip never opens.
+	 */
+	disabled?: boolean;
+	/**
+	 * Anchors the tooltip to a virtual rect instead of the trigger, re-evaluated on
+	 * each reposition. Return `null` to fall back to the trigger.
+	 */
+	getAnchorRect?: () => TooltipAnchorRect | null;
 	/**
 	 * Props forwarded to nested sub-components.
 	 */

package/src/components/ds-tree/ds-tree.tsx

@@ -153,6 +153,22 @@ const DsTreeItemAction = ({ className, style, children, onClick }: DsTreeItemAct
 	</button>
 );
 
+DsTreeRoot.displayName = 'DsTree.Root';
+DsTreeTree.displayName = 'DsTree.Tree';
+Object.defineProperty(TreeView.NodeProvider, 'displayName', { value: 'DsTree.NodeProvider' });
+Object.defineProperty(TreeView.NodeContext, 'displayName', { value: 'DsTree.NodeContext' });
+DsTreeBranch.displayName = 'DsTree.Branch';
+DsTreeBranchControl.displayName = 'DsTree.BranchControl';
+DsTreeBranchIndicator.displayName = 'DsTree.BranchIndicator';
+DsTreeBranchText.displayName = 'DsTree.BranchText';
+DsTreeBranchContent.displayName = 'DsTree.BranchContent';
+DsTreeBranchIndentGuide.displayName = 'DsTree.BranchIndentGuide';
+DsTreeItem.displayName = 'DsTree.Item';
+DsTreeItemText.displayName = 'DsTree.ItemText';
+DsTreeItemIndicator.displayName = 'DsTree.ItemIndicator';
+DsTreeItemAction.displayName = 'DsTree.ItemAction';
+DsTreeNodeCheckbox.displayName = 'DsTree.NodeCheckbox';
+
 export const DsTree = {
 	Root: DsTreeRoot,
 	Tree: DsTreeTree,

package/src/components/ds-typography/ds-typography.config.ts

@@ -30,7 +30,7 @@ export const typographyVariantConfig = {
 	heading4: { element: 'h4', component: ark.h4 },
 } as const;
 
-/** Semantic text colors backed by `--font-*` tokens in `_root_new.scss`. */
+/** Semantic text colors backed by `--font-*` tokens in `_root.scss`. */
 export const typographyColors = [
 	'main',
 	'secondary',