@drivenets/design-system 0.15.0 → 0.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivenets/design-system",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "Apache-2.0",
   "type": "module",
   "types": "./dist/index.d.cts",
@@ -44,7 +44,6 @@
     "@radix-ui/react-collapsible": "^1.1.13",
     "@radix-ui/react-dialog": "^1.1.16",
     "@radix-ui/react-dropdown-menu": "^2.1.17",
-    "@radix-ui/react-tooltip": "^1.2.9",
     "@radix-ui/react-visually-hidden": "^1.2.5",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.14.2",
@@ -74,14 +73,15 @@
     "@storybook/react-vite": "^10.4.1",
     "@tanstack/react-query": "^5.100.14",
     "@tanstack/react-router": "^1.170.8",
-    "@tsdown/css": "^0.22.0",
+    "@tsdown/css": "^0.22.12",
     "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/react": "^19.2.15",
     "@types/react-dom": "^19.2.3",
-    "@typescript/native-preview": "7.0.0-dev.20260521.1",
+    "@types/serve-handler": "^6.1.4",
+    "@typescript/native": "npm:typescript@^7.0.2",
     "@vitejs/plugin-react": "^6.0.2",
-    "@vitest/browser-playwright": "^4.1.7",
-    "@vitest/coverage-v8": "^4.1.7",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
     "babel-plugin-react-compiler": "^1.0.0",
     "eslint": "^10.0.1",
     "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -96,17 +96,18 @@
     "react-hook-form": "^7.76.1",
     "remark-gfm": "^4.0.1",
     "sass-embedded": "^1.100.0",
+    "serve-handler": "^6.1.7",
     "storybook": "^10.4.1",
-    "tsdown": "^0.22.0",
+    "tsdown": "^0.22.12",
     "typed-scss-modules": "^8.1.1",
-    "typescript": "^6.0.3",
+    "typescript": "npm:@typescript/typescript6",
     "typescript-plugin-css-modules": "^5.2.0",
     "vite": "8.0.14",
-    "vitest": "^4.1.7",
+    "vitest": "^4.1.10",
     "vitest-browser-react": "^2.1.0",
     "zod": "^4.4.3",
-    "@drivenets/vite-plugin-design-system": "0.0.10",
-    "@drivenets/eslint-plugin-internal": "0.0.0"
+    "@drivenets/eslint-plugin-internal": "0.0.0",
+    "@drivenets/vite-plugin-design-system": "0.0.10"
   },
   "scripts": {
     "start": "storybook dev -p 6006",
@@ -115,15 +116,16 @@
     "//": "ESLINT_ARGS is used to pass arguments to eslint. We're using it so we don't need to duplicate the lint script.",
     "lint:fix": "ESLINT_ARGS=--fix pnpm lint",
     "lint:build": "publint && attw --pack",
-    "typecheck": "pnpm generate-scss-dts && tsgo; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
+    "typecheck": "pnpm generate-scss-dts && tsc; EXIT_CODE=$?; rm -rf .scss-dts; exit $EXIT_CODE",
     "generate-scss-dts": "typed-scss-modules ./src -o ./.scss-dts --nameFormat all --exportType default > /dev/null 2>&1",
     "figma:lint": "figma connect parse --exit-on-unreadable-files",
     "figma:publish": "figma connect publish --exit-on-unreadable-files",
-    "test": "vitest --project=\"!requires-build\"",
+    "test": "vitest --project=unit --project=browser --project=storybook",
     "test:coverage": "pnpm test --coverage",
     "test:unit": "vitest --project=unit",
     "test:browser": "vitest --project=browser",
     "test:requires-build": "vitest --project=requires-build",
+    "test:storybook-docs": "vitest --project=storybook-docs",
     "build": "tsdown",
     "build:watch": "pnpm build --watch",
     "build:storybook": "storybook build"

package/src/components/ds-alert-banner/ds-alert-banner.tsx

@@ -6,8 +6,11 @@ import { DsIcon } from '../ds-icon';
 import { DsTypography } from '../ds-typography';
 
 /**
- * Design system AlertBanner component
- * Controlled component that displays alert messages with different variants
+ * @summary Controlled banner for surfacing contextual status messages.
+ *
+ * Renders as an inline bordered card or a full-width global bar, with five
+ * severity variants, an optional icon, and an optional close button. Compose the
+ * content with `DsAlertBanner.Title`, `DsAlertBanner.Body`, and `DsAlertBanner.Actions`.
  */
 const DsAlertBanner = ({
 	open,
@@ -108,8 +111,14 @@ const Actions = ({
 	</div>
 );
 
+Title.displayName = 'DsAlertBanner.Title';
+Body.displayName = 'DsAlertBanner.Body';
+Actions.displayName = 'DsAlertBanner.Actions';
+
 DsAlertBanner.Title = Title;
 DsAlertBanner.Body = Body;
 DsAlertBanner.Actions = Actions;
 
+DsAlertBanner.displayName = 'DsAlertBanner';
+
 export default DsAlertBanner;

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

@@ -0,0 +1,36 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14824-7324
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-autocomplete
+// component=DsAutocomplete
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const state = instance.getEnum('State', {
+	Default: 'default',
+	Hover: 'hover',
+	Focus: 'focus',
+	Disable: 'disable',
+	Error: 'error',
+	'read only': 'readOnly',
+});
+
+const comboBox = instance.getEnum('Combo box', {
+	ON: 'on',
+	OFF: 'off',
+});
+
+const attrs = [
+	'options={[]}',
+	comboBox === 'off' ? 'showTrigger={false}' : '',
+	state === 'disable' ? 'disabled' : '',
+	state === 'error' ? 'invalid' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsAutocomplete ${attrs} />`,
+	imports: ["import { DsAutocomplete } from '@drivenets/design-system'"],
+	id: 'ds-autocomplete',
+	metadata: { nestable: true },
+};

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

@@ -140,3 +140,5 @@ export const DsAutocomplete = ({
 		</Combobox.Root>
 	);
 };
+
+DsAutocomplete.displayName = 'DsAutocomplete';

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

@@ -0,0 +1,30 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14860-11893
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-avatar
+// component=DsAvatar
+//
+// `Size` and `Type` map to the code props. Figma's boolean `Placeholder` variant has no
+// code equivalent — initials-vs-photo is automatic (required `name` drives initials, an
+// optional `src` drives the photo) — so it is ignored. `name` is content, not derivable
+// from Figma, so it is emitted as a placeholder (see `ds-user-card.figma.ts`).
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size =
+	instance.getEnum('Size', {
+		'XSM - 18': 'xsm',
+		'SM - 24': 'sm',
+		'Regular - 32': 'regular',
+		'MD - 48': 'md',
+		'LG - 80': 'lg',
+		'XL - 144': 'xl',
+	}) ?? 'regular';
+
+const type = instance.getEnum('Type', { Circle: 'circle', Rounded: 'rounded' }) ?? 'circle';
+
+export default {
+	example: figma.code`<DsAvatar name="Full Name" size="${size}" type="${type}" />`,
+	imports: ["import { DsAvatar } from '@drivenets/design-system'"],
+	id: 'ds-avatar',
+	metadata: { nestable: true },
+};

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

@@ -6,7 +6,11 @@ import type { DsAvatarProps } from './ds-avatar.types';
 import { DsTooltip } from '../ds-tooltip';
 
 /**
- * DsAvatar component for displaying user profile pictures or initials
+ * @summary Displays a user's profile picture, falling back to initials.
+ *
+ * Renders a circular or rounded avatar from an image `src`. When the image is
+ * missing or fails to load, the trimmed initials derived from `name` are shown
+ * instead, and `name` is surfaced in a tooltip on hover.
  */
 export const DsAvatar: FC<DsAvatarProps> = ({
 	src,
@@ -40,3 +44,4 @@ export const DsAvatar: FC<DsAvatarProps> = ({
 		</DsTooltip>
 	);
 };
+DsAvatar.displayName = 'DsAvatar';

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

@@ -1,7 +1,10 @@
 import type { CSSProperties } from 'react';
 
-export type DsAvatarSize = 'xsm' | 'sm' | 'regular' | 'md' | 'lg' | 'xl';
-export type DsAvatarType = 'circle' | 'rounded';
+export const dsAvatarSizes = ['xsm', 'sm', 'regular', 'md', 'lg', 'xl'] as const;
+export const dsAvatarTypes = ['circle', 'rounded'] as const;
+
+export type DsAvatarSize = (typeof dsAvatarSizes)[number];
+export type DsAvatarType = (typeof dsAvatarTypes)[number];
 
 export interface DsAvatarProps {
 	/**

package/src/components/ds-avatar-group/ds-avatar-group.figma.ts

@@ -0,0 +1,27 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=14870-20161
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-avatar-group
+// component=DsAvatarGroup
+//
+// `Size` maps to the code prop (note the key is `XS - 18`, unlike `ds-avatar`'s `XSM - 18`).
+// `avatars` is a required data array, not derivable from Figma, so it is emitted as an empty
+// placeholder for the developer to fill in (see `ds-select.figma.ts`). The Figma set only
+// models `type=circle` (code also supports `rounded`) and does not expose `max`, so neither
+// is mapped.
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const size =
+	instance.getEnum('Size', {
+		'XS - 18': 'xsm',
+		'SM - 24': 'sm',
+		'Regular - 32': 'regular',
+		'MD - 48': 'md',
+	}) ?? 'regular';
+
+export default {
+	example: figma.code`<DsAvatarGroup avatars={[]} size="${size}" />`,
+	imports: ["import { DsAvatarGroup } from '@drivenets/design-system'"],
+	id: 'ds-avatar-group',
+	metadata: { nestable: true },
+};

package/src/components/ds-avatar-group/ds-avatar-group.tsx

@@ -7,7 +7,11 @@ import { DsTooltip } from '../ds-tooltip';
 import { DsTypography } from '../ds-typography';
 
 /**
- * DsAvatarGroup component for displaying a list of avatars with overlap
+ * @summary Overlapping avatars with overflow collapse and tooltip.
+ *
+ * Renders a row of {@link DsAvatar} members that share `size` and `type`. When
+ * `avatars.length` exceeds `max`, the remainder collapse behind a `+N`
+ * indicator; hovering it lists the hidden names in a tooltip.
  */
 export const DsAvatarGroup: FC<DsAvatarGroupProps> = ({
 	avatars,
@@ -49,3 +53,4 @@ export const DsAvatarGroup: FC<DsAvatarGroupProps> = ({
 		</div>
 	);
 };
+DsAvatarGroup.displayName = 'DsAvatarGroup';

package/src/components/ds-avatar-group/ds-avatar-group.types.ts

@@ -2,7 +2,9 @@ import type { DsAvatarProps, DsAvatarSize, DsAvatarType } from '../ds-avatar';
 
 export interface DsAvatarGroupProps {
 	/**
-	 * Array of avatar items
+	 * Avatar items to display. Each item accepts `DsAvatar` props except `size`
+	 * and `type`, which are set on the group. `name` is required; `src` and `alt`
+	 * are optional — without `src`, initials are shown per `DsAvatar`.
 	 */
 	avatars: Omit<DsAvatarProps, 'size' | 'type'>[];
 	/**

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

@@ -0,0 +1,19 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=15015-2480
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-breadcrumb
+// component=DsBreadcrumb
+//
+// `DAP_Breadcrumbs-nav_v01` maps to `DsBreadcrumb`. Its `steps`/`icons`/`back` variants do
+// not map to props: the trail is built from a single `items` array (Figma's fixed
+// `steps=1..7` variants only exist because a component can't repeat an array), the per-item
+// icon lives in each `items` entry, and there is no back-navigation feature in code. `items`
+// is required data, so it is emitted as an empty placeholder (see `ds-select.figma.ts`). The
+// single-crumb atom `DAP_Breadcrumbs-item_v01` has no public export and is intentionally not
+// connected.
+import figma from 'figma';
+
+export default {
+	example: figma.code`<DsBreadcrumb items={[]} />`,
+	imports: ["import { DsBreadcrumb } from '@drivenets/design-system'"],
+	id: 'ds-breadcrumb',
+	metadata: { nestable: true },
+};

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

@@ -91,4 +91,6 @@ const DsBreadcrumb: React.FC<DsBreadcrumbProps> = ({ items, onSelect, className
 	);
 };
 
+DsBreadcrumb.displayName = 'DsBreadcrumb';
+
 export default DsBreadcrumb;

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

@@ -9,4 +9,6 @@ const DsButton = (props: DsButtonUnifiedProps) => {
 	return <DsButtonLegacy {...props} />;
 };
 
+DsButton.displayName = 'DsButton';
+
 export default DsButton;

package/src/components/ds-button-v3/ds-button-v3.figma.ts

@@ -5,7 +5,7 @@ import figma from 'figma';
 
 const instance = figma.selectedInstance;
 
-const variant = instance.getEnum('Variant', {
+const variant = instance.getEnum('buttonType', {
 	primary: 'primary',
 	secondary: 'secondary',
 	tertiary: 'tertiary',

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

@@ -11,6 +11,12 @@ const iconSizeMap: Record<ButtonV3Size, IconSize> = Object.freeze({
 	tiny: 'tiny',
 });
 
+/**
+ * Button for user-triggered actions that do not navigate to another route.
+ * Supports color palettes, emphasis variants, sizes, icon-only layout, loading and selected states.
+ *
+ * @summary action button with color/variant/size, icon-only, loading and selected states
+ */
 const DsButtonV3 = ({
 	ref,
 	className,

package/src/components/ds-button-v3/index.ts

@@ -3,4 +3,6 @@ import DsButtonV3Base from './ds-button-v3';
 
 export const DsButtonV3 = withResponsiveProps(DsButtonV3Base, ['size']);
 
+DsButtonV3.displayName = 'DsButtonV3';
+
 export * from './ds-button-v3.types';

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

@@ -51,9 +51,8 @@ const Root = ({
 };
 
 /**
- * Card header - contains title and extra content.
- * Use with DsCard.Title and DsCard.Extra for standard layout,
- * or provide custom children for full flexibility.
+ * Card header — title row and optional trailing content.
+ * Provide custom children for full layout flexibility.
  */
 const Header = ({ className, children, ref, ...rest }: DsCardHeaderProps) => (
 	<div ref={ref} className={classNames(styles.header, className)} {...rest}>
@@ -79,6 +78,11 @@ const Footer = ({ className, children, ref, ...rest }: DsCardFooterProps) => (
 	</div>
 );
 
+Root.displayName = 'DsCard.Root';
+Header.displayName = 'DsCard.Header';
+Body.displayName = 'DsCard.Body';
+Footer.displayName = 'DsCard.Footer';
+
 export const DsCard = {
 	Root,
 	Header,

package/src/components/ds-catalog-layout/ds-catalog-layout.tsx

@@ -121,10 +121,18 @@ const ContentHeader = ({
 	</div>
 );
 
+Header.displayName = 'DsCatalogLayout.Header';
+Body.displayName = 'DsCatalogLayout.Body';
+SideMenu.displayName = 'DsCatalogLayout.SideMenu';
+Content.displayName = 'DsCatalogLayout.Content';
+ContentHeader.displayName = 'DsCatalogLayout.ContentHeader';
+
 DsCatalogLayout.Header = Header;
 DsCatalogLayout.Body = Body;
 DsCatalogLayout.SideMenu = SideMenu;
 DsCatalogLayout.Content = Content;
 DsCatalogLayout.ContentHeader = ContentHeader;
 
+DsCatalogLayout.displayName = 'DsCatalogLayout';
+
 export default DsCatalogLayout;

package/src/components/ds-checkbox/ds-checkbox-level-2.figma.ts

@@ -0,0 +1,40 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34856-101385
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-checkbox
+// component=DsCheckbox
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const inner = instance.findInstance('DAP_checkbox_v03', { traverseInstances: true });
+
+const color =
+	inner.type === 'INSTANCE' ? inner.getEnum('color', { Default: 'default', warning: 'warning' }) : 'default';
+
+const checked =
+	inner.type === 'INSTANCE'
+		? inner.getEnum('checked', { unchecked: 'unchecked', checked: 'checked', partial: 'partial' })
+		: 'unchecked';
+
+const state =
+	inner.type === 'INSTANCE'
+		? inner.getEnum('state', { default: 'default', hover: 'hover', focus: 'focus', disabled: 'disabled' })
+		: 'default';
+
+const checkedAttr =
+	checked === 'partial' ? 'defaultChecked="indeterminate"' : checked === 'checked' ? 'defaultChecked' : '';
+
+const attrs = [
+	'label="Label"',
+	color === 'warning' ? 'variant="warning"' : '',
+	checkedAttr,
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsCheckbox ${attrs} />`,
+	imports: ["import { DsCheckbox } from '@drivenets/design-system'"],
+	id: 'ds-checkbox-level-2',
+	metadata: { nestable: true },
+};

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

@@ -0,0 +1,45 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=33315-40861
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-checkbox
+// component=DsCheckbox
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const color = instance.getEnum('color', {
+	Default: 'default',
+	warning: 'warning',
+});
+
+const checked = instance.getEnum('checked', {
+	unchecked: 'unchecked',
+	checked: 'checked',
+	partial: 'partial',
+});
+
+const state = instance.getEnum('state', {
+	default: 'default',
+	hover: 'hover',
+	focus: 'focus',
+	disabled: 'disabled',
+});
+
+// `partial` is Ark's indeterminate state; both checked values seed the
+// uncontrolled `defaultChecked` so the snippet renders without a handler.
+const checkedAttr =
+	checked === 'partial' ? 'defaultChecked="indeterminate"' : checked === 'checked' ? 'defaultChecked' : '';
+
+const attrs = [
+	'label="Label"',
+	color === 'warning' ? 'variant="warning"' : '',
+	checkedAttr,
+	state === 'disabled' ? 'disabled' : '',
+]
+	.filter(Boolean)
+	.join(' ');
+
+export default {
+	example: figma.code`<DsCheckbox ${attrs} />`,
+	imports: ["import { DsCheckbox } from '@drivenets/design-system'"],
+	id: 'ds-checkbox',
+	metadata: { nestable: true },
+};

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

@@ -1,4 +1,4 @@
-@use '../../styles/root_new';
+@use '../../styles/root';
 @use '../../styles/typography';
 
 $checkbox-size: 16px;

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

@@ -5,7 +5,13 @@ import type { DsCheckboxProps } from './ds-checkbox.types';
 import { DsIcon } from '../ds-icon';
 
 /**
- * Design system Checkbox component
+ * @summary Checkbox for single and grouped selection
+ *
+ * Checkbox for boolean and multi-select inputs. Use standalone for a single
+ * toggle, or compose inside `DsCheckboxGroup` for multi-select lists. Import
+ * `useCheckboxSelectAll` from `ds-checkbox-group` for parent "select all"
+ * checkboxes. `checked` accepts `true`, `false`, or `"indeterminate"`.
+ *
  */
 const DsCheckbox = ({
 	variant = 'default',
@@ -42,4 +48,6 @@ const DsCheckbox = ({
 	);
 };
 
+DsCheckbox.displayName = 'DsCheckbox';
+
 export default DsCheckbox;

package/src/components/ds-checkbox-group/ds-checkbox-group.figma.ts

@@ -0,0 +1,15 @@
+// url=https://www.figma.com/design/nha3m67y7S57cHCSuQO2gp/DAP-Design-System-1.2?node-id=34859-101457
+// source=https://github.com/drivenets/design-system/tree/main/packages/design-system/src/components/ds-checkbox-group
+// component=DsCheckboxGroup
+import figma from 'figma';
+
+const instance = figma.selectedInstance;
+
+const checkboxes = instance.getSlot('checkboxes slot');
+
+export default {
+	example: figma.code`<DsCheckboxGroup>${checkboxes}</DsCheckboxGroup>`,
+	imports: ["import { DsCheckboxGroup, DsCheckbox } from '@drivenets/design-system'"],
+	id: 'ds-checkbox-group',
+	metadata: { nestable: false },
+};

package/src/components/ds-checkbox-group/ds-checkbox-group.tsx

@@ -17,4 +17,6 @@ const DsCheckboxGroup: React.FC<DsCheckboxGroupProps> = ({
 	);
 };
 
+DsCheckboxGroup.displayName = 'DsCheckboxGroup';
+
 export default DsCheckboxGroup;

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

@@ -71,4 +71,6 @@ const DsChip: React.FC<DsChipProps> = ({
 	);
 };
 
+DsChip.displayName = 'DsChip';
+
 export default DsChip;

package/src/components/ds-chip-group/ds-chip-group.tsx

@@ -119,4 +119,6 @@ const DsChipGroup: React.FC<DsChipGroupProps> = ({
 	);
 };
 
+DsChipGroup.displayName = 'DsChipGroup';
+
 export default DsChipGroup;

package/src/components/ds-comment-bubble/components/ds-comment-thread/ds-comment-thread.tsx

@@ -81,3 +81,4 @@ export const DsCommentThread = ({
 		</div>
 	);
 };
+DsCommentThread.displayName = 'DsCommentThread';

package/src/components/ds-comment-bubble/components/ds-thread-item/ds-thread-item.tsx

@@ -136,3 +136,4 @@ export const DsThreadItem = ({
 		</div>
 	);
 };
+DsThreadItem.displayName = 'DsThreadItem';

package/src/components/ds-comment-bubble/ds-comment-bubble.tsx

@@ -247,3 +247,4 @@ export const DsCommentBubble = ({
 		</div>
 	);
 };
+DsCommentBubble.displayName = 'DsCommentBubble';

package/src/components/ds-comment-card/ds-comment-card.tsx

@@ -169,3 +169,4 @@ export const DsCommentCard = ({
 		</button>
 	);
 };
+DsCommentCard.displayName = 'DsCommentCard';

package/src/components/ds-comment-indicator/ds-comment-indicator.tsx

@@ -46,3 +46,4 @@ export const DsCommentIndicator = ({
 		</button>
 	);
 };
+DsCommentIndicator.displayName = 'DsCommentIndicator';

package/src/components/ds-comments-drawer/ds-comments-drawer.tsx

@@ -207,3 +207,4 @@ export const DsCommentsDrawer = ({
 		</>
 	);
 };
+DsCommentsDrawer.displayName = 'DsCommentsDrawer';

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

@@ -15,3 +15,4 @@ DsConfirmation.CloseTrigger = DsModal.CloseTrigger;
 DsConfirmation.Body = DsModal.Body;
 DsConfirmation.Footer = DsModal.Footer;
 DsConfirmation.Actions = DsModal.Actions;
+DsConfirmation.displayName = 'DsConfirmation';

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

@@ -307,4 +307,6 @@ const YearView = () => (
 	</DatePicker.View>
 );
 
+DsDateInput.displayName = 'DsDateInput';
+
 export default DsDateInput;

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

@@ -20,6 +20,13 @@ import { DayView } from './components/day-view';
 import { MonthView } from './components/month-view';
 import { YearView } from './components/year-view';
 
+/**
+ * @summary Date and optional time input with calendar popover and manual typing.
+ *
+ * Supports controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) modes.
+ * Pass `withTime` to include a nested time picker. A clear button appears when a
+ * value is set unless `hideClearButton` is set.
+ */
 const DsDatePicker = ({
 	placeholder,
 	className,
@@ -211,4 +218,6 @@ const DsDatePicker = ({
 	);
 };
 
+DsDatePicker.displayName = 'DsDatePicker';
+
 export default DsDatePicker;

package/src/components/ds-date-picker/ds-date-picker.types.ts

@@ -98,7 +98,7 @@ export interface DsDatePickerProps extends Pick<
 
 	/**
 	 * Whether to hide the clear button
-	 * @default true
+	 * @default false
 	 */
 	hideClearButton?: boolean;
 

package/src/components/ds-date-range-picker/ds-date-range-picker.tsx

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