@drivenets/design-system 0.8.0 → 0.9.1

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

@@ -19,13 +19,16 @@ export const DsTableCell = <TData, TValue>({
 	primaryRowActions = [],
 	secondaryRowActions = [],
 }: DsTableCellProps<TData, TValue>) => {
-	if (primaryRowActions.length || secondaryRowActions.length) {
-		const hasSecondaryRowActions = secondaryRowActions.some((action) => !action.disabled?.(row.original));
+	const visiblePrimary = primaryRowActions.filter((action) => !action.hidden?.(row.original));
+	const visibleSecondary = secondaryRowActions.filter((action) => !action.hidden?.(row.original));
+
+	if (visiblePrimary.length || visibleSecondary.length) {
+		const hasSecondaryRowActions = visibleSecondary.length > 0;
 		return (
 			<div className={styles.lastCell}>
 				<DsDefaultTableCell cell={cell} />
 				<div className={styles.cellActions}>
-					{primaryRowActions.map((action, i) => {
+					{visiblePrimary.map((action, i) => {
 						const isDisabled = action.disabled?.(row.original);
 						const label = typeof action.label === 'function' ? action.label(row.original) : action.label;
 						return (
@@ -67,7 +70,7 @@ export const DsTableCell = <TData, TValue>({
 								</button>
 							</DsDropdownMenu.Trigger>
 							<DsDropdownMenu.Content>
-								{secondaryRowActions.map((action, i) => {
+								{visibleSecondary.map((action, i) => {
 									const label =
 										typeof action.label === 'function' ? action.label(row.original) : action.label;
 									const isDisabled = action.disabled?.(row.original);

package/src/components/ds-table/components/ds-table-cell/ds-table-cell.types.ts

@@ -20,6 +20,12 @@ export interface RowAction<TData> {
 	 */
 	tooltip?: string;
 
+	/**
+	 * Optional function to determine if the action should be hidden for a specific row.
+	 * When it returns `true`, the action is omitted from that row's menu. Takes precedence over `disabled`.
+	 */
+	hidden?: (row: TData) => boolean;
+
 	/**
 	 * Optional function to determine if the action should be disabled for a specific row
 	 */

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

@@ -2,6 +2,8 @@
 @use '../../styles/utilities' as utils;
 @use './styles/variables' as vars;
 
+$bulk-actions-height: 60px;
+
 .container {
 	border-radius: vars.$border-radius;
 	border-width: vars.$border-width;
@@ -45,3 +47,7 @@
 	height: vars.$virtualized-height;
 	overflow: auto;
 }
+
+.bulkActionsVisible {
+	padding-bottom: $bulk-actions-height;
+}

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

@@ -204,6 +204,8 @@ const DsTable = <TData extends { id: string }, TValue>({
 		.map(([key]) => rowsById[key]?.original)
 		.filter((v) => !!v);
 
+	const isBulkActionsVisible = selectable && actions.length > 0 && selectedRows.length > 0;
+
 	const contextValue: DsTableContextType<TData, TValue> = {
 		stickyHeader,
 		bordered,
@@ -230,6 +232,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 					styles.container,
 					!virtualized && styles.dataTableContainer,
 					virtualized && styles.virtualizedContainer,
+					isBulkActionsVisible && styles.bulkActionsVisible,
 					className,
 				)}
 			>

package/src/components/ds-time-picker/ds-time-picker.module.scss

@@ -0,0 +1,11 @@
+.root {
+	&:where(:hover, :focus-within) {
+		.clearTrigger {
+			visibility: visible;
+		}
+	}
+}
+
+.clearTrigger {
+	visibility: hidden;
+}

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

@@ -1,6 +1,7 @@
 import { type ChangeEvent, Fragment, useEffect, useRef, useState } from 'react';
 import { Popover } from '@ark-ui/react/popover';
 import { Portal } from '@ark-ui/react/portal';
+import classNames from 'classnames';
 import type { DsTimePickerProps } from './ds-time-picker.types';
 import { clampTime, formatTime, parseTime, timeScrollerAdapter } from './ds-time-picker.utils';
 import { TimeScroller } from './components/time-scroller/time-scroller';
@@ -8,6 +9,7 @@ import { DsIcon } from '../ds-icon';
 import { DsButton } from '../ds-button';
 import { DsTextInput } from '../ds-text-input';
 import { useControlled } from '../../utils/use-controlled';
+import styles from './ds-time-picker.module.scss';
 
 const DsTimePicker = (props: DsTimePickerProps) => {
 	const {
@@ -19,6 +21,7 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 		max,
 		disabled,
 		readOnly,
+		hideClearButton = false,
 		disablePortal = false,
 		locale,
 		slotProps,
@@ -103,6 +106,8 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 		setIsOpen(details.open);
 	};
 
+	const showClearButton = !hideClearButton && !disabled && !readOnly && !!value;
+
 	const Wrapper = disablePortal ? Fragment : Portal;
 
 	return (
@@ -112,7 +117,7 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 			positioning={{ placement: 'bottom-start', gutter: 4 }}
 		>
 			<Popover.Anchor asChild>
-				<div ref={ref} className={className}>
+				<div ref={ref} className={classNames(styles.root, className)}>
 					<DsTextInput
 						ref={inputRef}
 						id={id}
@@ -126,17 +131,32 @@ const DsTimePicker = (props: DsTimePickerProps) => {
 						{...slotProps?.input}
 						slots={{
 							endAdornment: slotProps?.input?.slots?.endAdornment ?? (
-								<Popover.Trigger asChild>
-									<DsButton
-										design="v1.2"
-										size="tiny"
-										buttonType="tertiary"
-										disabled={disabled || readOnly}
-										aria-label={locale?.openLabel ?? 'Open time picker'}
-									>
-										<DsIcon icon="schedule" variant="outlined" size="tiny" />
-									</DsButton>
-								</Popover.Trigger>
+								<>
+									{showClearButton && (
+										<DsButton
+											className={styles.clearTrigger}
+											design="v1.2"
+											size="tiny"
+											buttonType="tertiary"
+											disabled={disabled}
+											aria-label={locale?.clearLabel ?? 'Clear time'}
+											onClick={() => setValue(null)}
+										>
+											<DsIcon icon="close" size="tiny" />
+										</DsButton>
+									)}
+									<Popover.Trigger asChild>
+										<DsButton
+											design="v1.2"
+											size="tiny"
+											buttonType="tertiary"
+											disabled={disabled || readOnly}
+											aria-label={locale?.openLabel ?? 'Open time picker'}
+										>
+											<DsIcon icon="schedule" variant="outlined" size="tiny" />
+										</DsButton>
+									</Popover.Trigger>
+								</>
 							),
 							...slotProps?.input?.slots,
 						}}

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

@@ -21,6 +21,12 @@ export interface DsTimePickerProps {
 	disabled?: boolean;
 	readOnly?: boolean;
 
+	/**
+	 * Whether to hide the clear button
+	 * @default false
+	 */
+	hideClearButton?: boolean;
+
 	/**
 	 * Whether to disable the portal for the popover content
 	 * @default false

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

@@ -15,12 +15,12 @@ export interface DsTreeNode {
 export const dsTreeSizes = ['medium', 'small'] as const;
 export type DsTreeSize = (typeof dsTreeSizes)[number];
 
-interface DsTreeBaseProps {
+export interface DsTreeBaseProps {
 	className?: string;
 	style?: CSSProperties;
 }
 
-interface DsTreeBasePropsWithChildren extends DsTreeBaseProps {
+export interface DsTreeBasePropsWithChildren extends DsTreeBaseProps {
 	children?: ReactNode;
 }
 

package/src/index.ts

@@ -4,6 +4,7 @@ export * from './components/ds-avatar';
 export * from './components/ds-avatar-group';
 export * from './components/ds-breadcrumb';
 export * from './components/ds-button';
+export * from './components/ds-button-v3';
 export * from './components/ds-card';
 export * from './components/ds-checkbox';
 export * from './components/ds-chip';
@@ -42,6 +43,8 @@ export * from './components/ds-select';
 export * from './components/ds-skeleton';
 export * from './components/ds-smart-tabs';
 export * from './components/ds-spinner';
+export * from './components/ds-split-button';
+export * from './components/ds-stack';
 export * from './components/ds-status-badge';
 export * from './components/ds-stepper';
 export * from './components/ds-system-status';
@@ -58,3 +61,4 @@ export * from './components/ds-tooltip';
 export * from './components/ds-tree';
 export * from './components/ds-typography';
 export * from './components/ds-vertical-tabs';
+export * from './utils/responsive';

package/src/styles/_breakpoints.module.scss

@@ -0,0 +1,5 @@
+@use 'variables' as var;
+
+:export {
+	breakpointLg: #{var.$breakpoint-lg};
+}

package/src/styles/_grid.scss

@@ -19,7 +19,11 @@
 	@for $i from 1 through grid-vars.$columns {
 		// Margins are added to all column spans to ensure proper alignment
 		// The last column span (full width) receives 2 margins (left + right), others receive 1 margin (typically left)
-		$margins: if($i == grid-vars.$columns, 2, 1);
+		$margins: 1;
+
+		@if $i == grid-vars.$columns {
+			$margins: 2;
+		}
 
 		// Calculate total width for spanning i columns:
 		// - i columns × column width

package/src/styles/_mixin.scss

@@ -1,2 +1,2 @@
-@import './mixins/disabled';
-@import './mixins/list';
+@forward './mixins/disabled';
+@forward './mixins/list';

package/src/styles/_responsive.scss

@@ -0,0 +1,13 @@
+@use 'variables' as var;
+
+@mixin lg {
+	@media (min-width: #{var.$breakpoint-lg}) {
+		@content;
+	}
+}
+
+@mixin md {
+	@media (max-width: #{var.$breakpoint-lg - 1}) {
+		@content;
+	}
+}

package/src/styles/_root_updated.scss

@@ -181,15 +181,15 @@
 	--positive-050: var(--color-dap-green-050); // was --color-positive-050
 	--positive-700-default: var(--color-dap-green-700); // was --color-positive-700-default
 
-	/* Alias - negative */
-	--negative-100: var(--color-dap-red-100); // ⚠ NEW VALUE (was #f5c2bf in --color-negative-100)
-	--negative-200: var(--color-dap-red-200); // was --color-negative-200
-	--negative-300: var(--color-dap-red-300); // was --color-negative-300
-	--negative-500: var(--color-dap-red-500); // was --color-negative-500
-	--negative-600: var(--color-dap-red-600); // was --color-negative-600
-	--negative-700: var(--color-dap-red-700); // was --color-negative-700
-	--negative-050: var(--color-dap-red-050); // was --color-negative-050
-	--negative-400-default: var(--color-dap-red-400); // was --color-negative-400-default
+	/* Alias - error */
+	--error-100: var(--color-dap-red-100); // ⚠ NEW VALUE (was #f5c2bf in --color-negative-100)
+	--error-200: var(--color-dap-red-200); // was --color-negative-200
+	--error-300: var(--color-dap-red-300); // was --color-negative-300
+	--error-500: var(--color-dap-red-500); // was --color-negative-500
+	--error-600: var(--color-dap-red-600); // was --color-negative-600
+	--error-700: var(--color-dap-red-700); // was --color-negative-700
+	--error-050: var(--color-dap-red-050); // was --color-negative-050
+	--error-400-default: var(--color-dap-red-400); // was --color-negative-400-default
 
 	/* Alias - warning */
 	--warning-100: var(--color-dap-orange-100); // was --color-warning-100
@@ -268,11 +268,11 @@
 	--background-background-info-strong: var(--primary-800); // was --color-background-info-strong
 	--background-background-warning: var(--warning-100); // was --color-background-warning
 	--background-background-warning-strong: var(--warning-600-default); // was --color-background-warning-strong
-	--background-background-negative: var(--negative-400-default); // was --color-negative-400-default
-	--background-background-negative-hover: var(--negative-500); // was --color-background-danger-strong-hover
-	--background-background-negative-selected: var(--negative-600); // was --color-negative-600
-	--background-background-negative-secondary-hover: var(--negative-050); // was --color-negative-050
-	--background-background-negative-secondary-selected: var(--negative-100);
+	--background-background-error: var(--error-400-default); // was --color-negative-400-default
+	--background-background-error-hover: var(--error-500); // was --color-background-danger-strong-hover
+	--background-background-error-selected: var(--error-600); // was --color-negative-600
+	--background-background-error-secondary-hover: var(--error-050); // was --color-negative-050
+	--background-background-error-secondary-selected: var(--error-100);
 	--background-background-active-moderate: var(--primary-400); // was --color-background-active-moderate
 	--background-background-transparent-hover: rgba(255, 255, 255, 0.15);
 	--background-background-transparent-active: rgba(255, 255, 255, 0.3);
@@ -298,9 +298,9 @@
 	--border-border-action-secondary-hover: var(--brand-400); // was --color-border-action-secondary-hover
 	--border-border-positive: var(--positive-600); // was --color-positive-600
 	--border-border-warning-strong: var(--warning-600-default); // was --color-background-warning-strong
-	--border-border-negative-weak: var(--negative-100);
-	--border-border-negative: var(--negative-400-default); // was --color-negative-400-default
-	--border-border-negative-hover: var(--negative-500); // was --color-negative-500
+	--border-border-error-weak: var(--error-100);
+	--border-border-error: var(--error-400-default); // was --color-negative-400-default
+	--border-border-error-hover: var(--error-500); // was --color-negative-500
 	--border-border-inverse: var(--secondary-050); // was --color-border-inverse
 	--border-border-field: var(--secondary-200); // was --color-border-disabled
 	--border-border-field-hover: var(--brand-600); // was --color-background-action-hover
@@ -320,7 +320,7 @@
 	--font-font-on-disabled: var(--secondary-800); // was --color-font-on-disabled
 	--font-font-positive: var(--positive-700-default); // was --color-font-success
 	--font-font-warning: var(--warning-700); // was --color-font-warning
-	--font-font-negative: var(--negative-500); // was --color-font-danger
+	--font-font-error: var(--error-500); // was --color-font-danger
 	--font-font-code: var(--primary-900); // was --color-font-code
 	--font-font-highlight: var(--color-dap-data-deep-fuchsia); // was --color-font-highlight
 	--font-font-placeholder: var(--secondary-500-net-4); // was --color-font-disabled
@@ -339,7 +339,7 @@
 	--icon-icon-positive: var(--positive-700-default); // was --color-icon-success
 	--icon-icon-warning-light: var(--warning-400); // was --color-warning-400
 	--icon-icon-warning: var(--warning-600-default); // was --color-icon-warning
-	--icon-icon-negative: var(--negative-500); // was --color-negative-500
+	--icon-icon-error: var(--error-500); // was --color-negative-500
 	--icon-icon-pause: var(--paused-600); // was --color-data-blue
 	--icon-icon-information-main: var(--secondary-500-net-4); // was --color-icon-information-main
 	--icon-icon-information-secondary: var(--primary-600); // was --color-icon-information-secondary
@@ -397,7 +397,7 @@
 	--status-bg-pending: var(--warning-100); // was --color-status-bg-pending
 	--status-bg-warning: var(--warning-200); // was --color-status-bg-warning
 	--status-bg-inactive: var(--background-background-tertiary-selected-weak);
-	--status-bg-failed: var(--background-background-negative-secondary-hover);
+	--status-bg-failed: var(--background-background-error-secondary-hover);
 
 	/* Semantic - Dark Buttons */
 	--dark-buttons-primary: var(--darks-400); // was --color-dark-buttons-primary

package/src/styles/_scrollbars.scss

@@ -25,7 +25,12 @@ $scrollbar-thin-size: 4px;
 
 @mixin firefox-scrollbar($size) {
 	@-moz-document url-prefix() {
-		scrollbar-width: if($size == $scrollbar-thin-size, thin, auto);
+		@if $size == $scrollbar-thin-size {
+			scrollbar-width: thin;
+		} @else {
+			scrollbar-width: auto;
+		}
+
 		scrollbar-color: var(--color-background-deselected-hover) var(--color-background-secondary);
 	}
 }

package/src/styles/_variables.scss

@@ -42,3 +42,5 @@ $line-height-action-small: 20px;
 $sidebar-spacing: 10px;
 $sidebar-width: 64px;
 $sidebar-width-expanded: 256px;
+
+$breakpoint-lg: 1440px;

package/src/styles/shared/_button.scss

@@ -0,0 +1,2 @@
+$transition-duration-default: 0.3s; // it looks a bit better with 0.3 than 0.2
+$transition-duration-quick: 0.15s;

package/src/styles/shared/_input.scss

@@ -57,8 +57,7 @@ $textarea-height-default: 120px;
 
 	&:has(.input:disabled) {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 		cursor: not-allowed;
 
 		.input {
@@ -82,26 +81,7 @@ $textarea-height-default: 120px;
 
 	&:disabled {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
-		cursor: not-allowed;
-	}
-}
-
-@mixin form-control-states {
-	&:hover:not(:disabled) {
-		border-color: var(--form-control-border-color, var(--color-background-action-hover));
-	}
-
-	&:focus {
-		border-color: var(--form-control-border-color, var(--color-border-action-primary));
-		outline: none;
-	}
-
-	&:disabled {
-		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 		cursor: not-allowed;
 	}
 }
@@ -129,8 +109,7 @@ $textarea-height-default: 120px;
 
 	&[data-disabled] {
 		color: var(--color-background-deselected);
-		background: var(--color-background-secondary);
-		border-color: var(--color-border-disabled);
+		border-color: var(--border-border-disabled);
 
 		&,
 		& * {
@@ -245,22 +224,6 @@ $textarea-height-default: 120px;
 	}
 }
 
-// Form control base styles
-@mixin formControl {
-	@include base-input-container;
-	@include form-control-states;
-	cursor: pointer;
-	justify-content: space-between;
-}
-
-@mixin formControlSmall {
-	max-height: $input-text-height-small;
-}
-
-@mixin formControlDefault {
-	max-height: $input-text-height-default;
-}
-
 // Select trigger styles
 @mixin selectControl {
 	display: grid;

package/src/utils/responsive.browser.test.ts

@@ -0,0 +1,94 @@
+import { createElement } from 'react';
+import { describe, expect, it, vi } from 'vitest';
+import { page } from 'vitest/browser';
+import { renderHook } from 'vitest-browser-react';
+
+import { useBreakpoint, useResponsiveValue, withResponsiveProps } from './responsive';
+
+const mockMatchMedia = (matches: boolean) => {
+	const listeners: Array<() => void> = [];
+
+	Object.defineProperty(window, 'matchMedia', {
+		writable: true,
+		value: vi.fn().mockReturnValue({
+			matches,
+			addEventListener: (_: string, cb: () => void) => listeners.push(cb),
+			removeEventListener: (_: string, cb: () => void) => {
+				const idx = listeners.indexOf(cb);
+
+				if (idx >= 0) {
+					listeners.splice(idx, 1);
+				}
+			},
+		}),
+	});
+
+	return {
+		triggerChange: () => listeners.forEach((cb) => cb()),
+	};
+};
+
+describe('useBreakpoint', () => {
+	it('should return lg when viewport >= 1440px', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useBreakpoint());
+
+		expect(result.current).toBe('lg');
+	});
+
+	it('should return md when viewport < 1440px', async () => {
+		mockMatchMedia(false);
+		const { result } = await renderHook(() => useBreakpoint());
+
+		expect(result.current).toBe('md');
+	});
+});
+
+describe('useResponsiveValue', () => {
+	it('should return a static value unchanged', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useResponsiveValue('large'));
+
+		expect(result.current).toBe('large');
+	});
+
+	it('should resolve lg value on large screens', async () => {
+		mockMatchMedia(true);
+		const { result } = await renderHook(() => useResponsiveValue({ lg: 'large', md: 'small' }));
+
+		expect(result.current).toBe('large');
+	});
+
+	it('should resolve md value on small screens', async () => {
+		mockMatchMedia(false);
+		const { result } = await renderHook(() => useResponsiveValue({ lg: 'large', md: 'small' }));
+
+		expect(result.current).toBe('small');
+	});
+});
+
+describe('withResponsiveProps', () => {
+	const Base = ({ value }: { value?: string }) => createElement('span', null, value);
+	const Enhanced = withResponsiveProps(Base, ['value']);
+
+	it('should resolve responsive prop to lg value on large screens', async () => {
+		mockMatchMedia(true);
+		await page.render(createElement(Enhanced, { value: { lg: 'desktop', md: 'mobile' } }));
+
+		await expect.element(page.getByText('desktop')).toBeInTheDocument();
+	});
+
+	it('should resolve responsive prop to md value on small screens', async () => {
+		mockMatchMedia(false);
+		await page.render(createElement(Enhanced, { value: { lg: 'desktop', md: 'mobile' } }));
+
+		await expect.element(page.getByText('mobile')).toBeInTheDocument();
+	});
+
+	it('should pass through static values unchanged', async () => {
+		mockMatchMedia(true);
+		await page.render(createElement(Enhanced, { value: 'static' }));
+
+		await expect.element(page.getByText('static')).toBeInTheDocument();
+	});
+});

package/src/utils/responsive.ts

@@ -0,0 +1,79 @@
+import { createElement, useSyncExternalStore, type FunctionComponent } from 'react';
+
+import breakpointTokens from '../styles/_breakpoints.module.scss';
+
+export const BREAKPOINT_LG = parseInt(breakpointTokens.breakpointLg, 10);
+
+export const breakpoints = ['lg', 'md'] as const;
+export type Breakpoint = (typeof breakpoints)[number];
+
+export type Responsive<T> = Partial<Record<Breakpoint, T>>;
+
+export type ResponsiveValue<T> = T | Responsive<T>;
+
+export const isResponsiveValue = <T>(value: ResponsiveValue<T>): value is Responsive<T> =>
+	value !== null && typeof value === 'object' && breakpoints.some((bp) => bp in value);
+
+export const resolveResponsiveValue = <T>(value: ResponsiveValue<T>, breakpoint: Breakpoint): T => {
+	if (!isResponsiveValue(value)) {
+		return value;
+	}
+
+	return (value[breakpoint] ?? value.lg ?? value.md) as T;
+};
+
+const MEDIA_QUERY = `(min-width: ${String(BREAKPOINT_LG)}px)`;
+
+const subscribe = (callback: () => void) => {
+	const mql = window.matchMedia(MEDIA_QUERY);
+	mql.addEventListener('change', callback);
+	return () => mql.removeEventListener('change', callback);
+};
+
+const getSnapshot = (): Breakpoint => (window.matchMedia(MEDIA_QUERY).matches ? 'lg' : 'md');
+
+const getServerSnapshot = (): Breakpoint => 'lg';
+
+export const useBreakpoint = (): Breakpoint =>
+	useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+
+/**
+ * Resolves a `ResponsiveValue<T>` to `T` using the current breakpoint.
+ * Use for conditional rendering or JS logic that depends on the breakpoint.
+ */
+export const useResponsiveValue = <T>(value: ResponsiveValue<T>): T =>
+	resolveResponsiveValue(value, useBreakpoint());
+
+/**
+ * Wraps a component so that the specified props accept `ResponsiveValue<T>`.
+ * The wrapper resolves each responsive prop to a plain value before rendering,
+ * so the wrapped component stays completely unaware of breakpoints.
+ */
+export function withResponsiveProps<Props, const Keys extends readonly (keyof Props)[]>(
+	Component: FunctionComponent<Props>,
+	responsiveKeys: Keys,
+) {
+	type EnhancedProps = {
+		[P in keyof Props]: P extends Keys[number] ? ResponsiveValue<NonNullable<Props[P]>> : Props[P];
+	};
+
+	const Wrapper = (props: EnhancedProps) => {
+		const breakpoint = useBreakpoint();
+		const resolved = { ...props } as Record<string, unknown>;
+
+		for (const key of responsiveKeys) {
+			const k = String(key);
+			const value = resolved[k];
+
+			if (value !== undefined) {
+				resolved[k] = resolveResponsiveValue(value, breakpoint);
+			}
+		}
+
+		return createElement(Component as FunctionComponent<Record<string, unknown>>, resolved);
+	};
+
+	Wrapper.displayName = `withResponsiveProps(${Component.displayName ?? Component.name})`;
+
+	return Wrapper;
+}