@drivenets/design-system 0.16.0 → 0.17.0

package/src/components/ds-icon/figma/ds-icon-special.figma.batch.ts

@@ -12,7 +12,7 @@ export default {
 	example: icon
 		? figma.code`<DsIcon icon="${icon}" />`
 		: figma.code`{/* This icon is not available in @drivenets/design-system */}`,
-	imports: ["import { DsIcon } from '@drivenets/design-system'"],
+	imports: ["import { DsIcon } from '@drivenets/design-system';"],
 	id: batch.id,
 	metadata: { nestable: true, props: { icon } },
 };

package/src/components/ds-key-value-pair/ds-key-value-pair.figma.ts

@@ -18,7 +18,7 @@ const orientation =
 
 export default {
 	example: figma.code`<DsKeyValuePair keyLabel="Label" value="Value" orientation="${orientation}" />`,
-	imports: ["import { DsKeyValuePair } from '@drivenets/design-system'"],
+	imports: ["import { DsKeyValuePair } from '@drivenets/design-system';"],
 	id: 'ds-key-value-pair',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -5,7 +5,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsLoader />`,
-	imports: ["import { DsLoader } from '@drivenets/design-system'"],
+	imports: ["import { DsLoader } from '@drivenets/design-system';"],
 	id: 'ds-loader',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -13,7 +13,7 @@ import { DsTypography } from '../ds-typography';
  * Supports custom header, footer, and body content with grid-based sizing.
  * Use columns prop to control modal width (1-12 grid columns).
  */
-const DsModal = ({
+const DsModalRoot = ({
 	open,
 	columns = 6,
 	dividers = false,
@@ -145,13 +145,14 @@ Body.displayName = 'DsModal.Body';
 Footer.displayName = 'DsModal.Footer';
 Actions.displayName = 'DsModal.Actions';
 
-DsModal.Header = Header;
-DsModal.Title = Title;
-DsModal.CloseTrigger = CloseTrigger;
-DsModal.Body = Body;
-DsModal.Footer = Footer;
-DsModal.Actions = Actions;
-
-DsModal.displayName = 'DsModal';
+const DsModal = Object.assign(DsModalRoot, {
+	displayName: 'DsModal',
+	Header,
+	Title,
+	CloseTrigger,
+	Body,
+	Footer,
+	Actions,
+});
 
 export default DsModal;

package/src/components/ds-modal/figma/ds-modal-content.figma.ts

@@ -12,7 +12,7 @@ const content = instance.getSlot('Modal content slot');
 
 export default {
 	example: figma.code`<DsModal.Body>${content}</DsModal.Body>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-modal/figma/ds-modal-footer.figma.ts

@@ -13,7 +13,7 @@ const rightButtons = instance.getSlot('right side buttons');
 
 export default {
 	example: figma.code`<DsModal.Footer><DsModal.Actions>${rightButtons}</DsModal.Actions></DsModal.Footer>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-modal/figma/ds-modal-header.figma.ts

@@ -15,7 +15,7 @@ const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Modal title';
 
 export default {
 	example: figma.code`<DsModal.Header><DsModal.Title>${title}</DsModal.Title><DsModal.CloseTrigger /></DsModal.Header>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -30,7 +30,7 @@ if (footer.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsModal open columns={6} onOpenChange={() => {}}>${headerCode}${contentCode}${footerCode}</DsModal>`,
-	imports: ["import { DsModal } from '@drivenets/design-system'"],
+	imports: ["import { DsModal } from '@drivenets/design-system';"],
 	id: 'ds-modal',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -35,6 +35,7 @@ const DsNumberInput: FC<DsNumberInputProps> = ({
 	return (
 		<NumberInput.Root
 			id={id}
+			ids={{ input: id }}
 			min={min}
 			max={max}
 			step={step}

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

@@ -10,7 +10,7 @@ const openAttr = open ? 'open' : 'open={false}';
 
 export default {
 	example: figma.code`<DsPanel ${openAttr}>{/* panel content */}</DsPanel>`,
-	imports: ["import { DsPanel } from '@drivenets/design-system'"],
+	imports: ["import { DsPanel } from '@drivenets/design-system';"],
 	id: 'ds-panel',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover-content-item.figma.ts

@@ -12,7 +12,7 @@ const body = instance.getSlot('Slot');
 
 export default {
 	example: figma.code`<DsPopover.ContentItem${headlineAttr}>${body}</DsPopover.ContentItem>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover-content-item',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover-content.figma.ts

@@ -9,7 +9,7 @@ const items = instance.getSlot('Slot');
 
 export default {
 	example: figma.code`<DsPopover.Content>${items}</DsPopover.Content>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover-content',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover-footer.figma.ts

@@ -13,7 +13,7 @@ if (button.type === 'INSTANCE') {
 
 export default {
 	example: figma.code`<DsPopover.Footer>${buttonCode}</DsPopover.Footer>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover-footer',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-popover/figma/ds-popover-header.figma.ts

@@ -10,7 +10,7 @@ const title = titleNode.type === 'TEXT' ? titleNode.textContent : 'Popover title
 
 export default {
 	example: figma.code`<DsPopover.Header>${title}</DsPopover.Header>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover-header',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -28,7 +28,7 @@ export default {
 	<DsPopover.Trigger>{/* trigger element */}</DsPopover.Trigger>
 	<DsPopover.Panel>${headerCode}${contentCode}${footerCode}</DsPopover.Panel>
 </DsPopover.Root>`,
-	imports: ["import { DsPopover } from '@drivenets/design-system'"],
+	imports: ["import { DsPopover } from '@drivenets/design-system';"],
 	id: 'ds-popover',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-arc/ds-progress-arc.figma.ts

@@ -17,7 +17,7 @@ const variant = instance.getEnum('State', {
 
 export default {
 	example: figma.code`<DsProgressArc variant="${variant}" size="${size}" value={0} />`,
-	imports: ["import { DsProgressArc } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressArc } from '@drivenets/design-system';"],
 	id: 'ds-progress-arc',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-donut/ds-progress-donut.figma.ts

@@ -39,7 +39,7 @@ const valueProp = typeof value === 'number' ? ` value={${String(value)}}` : '';
 
 export default {
 	example: figma.code`<DsProgressDonut variant="${variant}" size="${size}"${valueProp} />`,
-	imports: ["import { DsProgressDonut } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressDonut } from '@drivenets/design-system';"],
 	id: 'ds-progress-donut',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-linear/ds-progress-linear.figma.ts

@@ -20,7 +20,7 @@ const variant = instance.getEnum('Type', {
 
 export default {
 	example: figma.code`<DsProgressLinear variant="${variant}" size="${size}" value={0} />`,
-	imports: ["import { DsProgressLinear } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressLinear } from '@drivenets/design-system';"],
 	id: 'ds-progress-linear',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-progress-task-bar/ds-progress-task-bar.figma.ts

@@ -23,7 +23,7 @@ const attrs = [
 
 export default {
 	example: zero ? figma.code`<DsProgressTaskBar total={999} />` : figma.code`<DsProgressTaskBar ${attrs} />`,
-	imports: ["import { DsProgressTaskBar } from '@drivenets/design-system'"],
+	imports: ["import { DsProgressTaskBar } from '@drivenets/design-system';"],
 	id: 'ds-progress-task-bar',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-radio-group/figma/ds-radio-group-item.figma.ts

@@ -18,7 +18,7 @@ const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disab
 
 export default {
 	example: figma.code`<DsRadioGroup.Item ${attrs} />`,
-	imports: ["import { DsRadioGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system';"],
 	id: 'ds-radio-group-item',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -8,7 +8,7 @@ export default {
 	<DsRadioGroup.Item value="option-1" label="Option 1" />
 	<DsRadioGroup.Item value="option-2" label="Option 2" />
 </DsRadioGroup.Root>`,
-	imports: ["import { DsRadioGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsRadioGroup } from '@drivenets/design-system';"],
 	id: 'ds-radio-group',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-segment-group/figma/ds-segment-group-item.figma.ts

@@ -19,7 +19,7 @@ const attrs = ['value="option"', 'label="Option"', state === 'disabled' ? 'disab
 
 export default {
 	example: figma.code`<DsSegmentGroup.Item ${attrs} />`,
-	imports: ["import { DsSegmentGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
 	id: 'ds-segment-group-item',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -17,7 +17,7 @@ export default {
 	<DsSegmentGroup.Item value="option-1" label="Option 1" />
 	<DsSegmentGroup.Item value="option-2" label="Option 2" />
 </DsSegmentGroup.Root>`,
-	imports: ["import { DsSegmentGroup } from '@drivenets/design-system'"],
+	imports: ["import { DsSegmentGroup } from '@drivenets/design-system';"],
 	id: 'ds-segment-group',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -47,7 +47,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsSelect ${attrs} />`,
-	imports: ["import { DsSelect } from '@drivenets/design-system'"],
+	imports: ["import { DsSelect } from '@drivenets/design-system';"],
 	id: 'ds-select',
 	metadata: { nestable: true, props: { fcMember: 'Select', fcProps: attrs } },
-};
+} satisfies figma.Template;

package/src/components/ds-site-node/ds-site-node.figma.ts

@@ -21,7 +21,7 @@ export default {
 		state === 'overflow'
 			? figma.code`<DsSiteNode state="${state}" overflowLabel="${overflowLabel}" />`
 			: figma.code`<DsSiteNode state="${state}" tier="${tier}" siteCode="${siteCode}" />`,
-	imports: ["import { DsSiteNode } from '@drivenets/design-system'"],
+	imports: ["import { DsSiteNode } from '@drivenets/design-system';"],
 	id: 'ds-site-node',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -86,7 +86,7 @@ const DsSmartTab: React.FC<DsSmartTabProps> = ({
 /**
  * Design system SmartTabs component
  */
-const DsSmartTabs = ({
+const DsSmartTabsRoot = ({
 	activeTab,
 	onTabClick,
 	className,
@@ -110,8 +110,9 @@ const DsSmartTabs = ({
 
 DsSmartTab.displayName = 'DsSmartTabs.Tab';
 
-DsSmartTabs.Tab = DsSmartTab;
-
-DsSmartTabs.displayName = 'DsSmartTabs';
+const DsSmartTabs = Object.assign(DsSmartTabsRoot, {
+	displayName: 'DsSmartTabs',
+	Tab: DsSmartTab,
+});
 
 export default DsSmartTabs;

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

@@ -13,7 +13,7 @@ const size = instance.getEnum('Size', {
 
 export default {
 	example: figma.code`<DsSpinner size="${size}" />`,
-	imports: ["import { DsSpinner } from '@drivenets/design-system'"],
+	imports: ["import { DsSpinner } from '@drivenets/design-system';"],
 	id: 'ds-spinner',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -89,7 +89,7 @@ const buttonProps = [
 
 export default {
 	example: figma.code`<DsSplitButton size="${size}"${disabled ? ' disabled' : ''} slotProps={{ button: { ${buttonProps} }, select: { options: [], value: '' } }} />`,
-	imports: ["import { DsSplitButton } from '@drivenets/design-system'"],
+	imports: ["import { DsSplitButton } from '@drivenets/design-system';"],
 	id: 'ds-split-button',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -35,7 +35,7 @@ export default {
 			: structure === 'text-only'
 				? figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" icon={null} />`
 				: figma.code`<DsStatusBadgeV2 phase="${phase}" label="${label}" variant="${variant}" size="${size}" />`,
-	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system'"],
+	imports: ["import { DsStatusBadgeV2 } from '@drivenets/design-system';"],
 	id: 'ds-status-badge-v2',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

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

@@ -32,7 +32,7 @@ export default {
 	</DsStep>
 	{/* Add a <DsStep> per step */}
 </DsStepper>`,
-	imports: ["import { DsStepper, DsStep, DsStepContent, DsNextStepButton } from '@drivenets/design-system'"],
+	imports: ["import { DsStepper, DsStep, DsStepContent, DsNextStepButton } from '@drivenets/design-system';"],
 	id: 'ds-stepper',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-table/components/ds-table-group-header-cell/index.ts

@@ -1,2 +1 @@
 export { DsTableGroupHeaderCell } from './ds-table-group-header-cell';
-export type { DsTableGroupHeaderCellProps } from './ds-table-group-header-cell.types';

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

@@ -1,8 +1,8 @@
 @use '../../../../styles/typography';
 @use '../../styles/variables' as vars;
 
-.stickyHeader {
-	background-color: var(--background);
+.header {
+	background-color: var(--background-secondary);
 }
 
 .virtualizedHeader {

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

@@ -15,12 +15,10 @@ import { DsTableGroupHeaderCell } from '../ds-table-group-header-cell';
 import { isFirstLeafColumnOfGroup } from '../../grouping';
 
 const DsTableHeader = <TData,>({ table }: DsTableHeaderProps<TData>) => {
-	const { stickyHeader, bordered, virtualized } = useDsTableContext<TData, unknown>();
+	const { bordered, virtualized } = useDsTableContext<TData, unknown>();
 
 	return (
-		<TableHeader
-			className={classnames(stickyHeader && styles.stickyHeader, virtualized && styles.virtualizedHeader)}
-		>
+		<TableHeader className={classnames(styles.header, virtualized && styles.virtualizedHeader)}>
 			{table.getHeaderGroups().map((headerGroup) => (
 				<TableRow
 					key={headerGroup.id}

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

@@ -18,9 +18,24 @@ $bulk-actions-reserved-space: 80px;
 	border-style: solid;
 	border-color: var(--color-dap-gray-400);
 	background: var(--background);
+	display: flex;
+	flex-direction: column;
+	max-height: 100%;
+	overflow: hidden;
+}
+
+.controls {
+	background: var(--background);
+	border-bottom: 1px solid var(--border);
+	padding: var(--xs) var(--standard);
+	display: flex;
+	align-items: center;
+	flex-shrink: 0;
 }
 
 .dataTableContainer {
+	flex: 1;
+	min-height: 0;
 	max-height: 100%;
 	overflow-x: auto;
 	overflow-y: hidden;

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

@@ -52,6 +52,7 @@ const DsTable = <TData extends { id: string }, TValue>({
 	ref,
 	columns: columnsProp,
 	data: tableData,
+	controls,
 	virtualized = false,
 	virtualizedOptions,
 	className,
@@ -336,41 +337,43 @@ const DsTable = <TData extends { id: string }, TValue>({
 	return (
 		<DsTableContext.Provider value={contextValue}>
 			<div
-				ref={tableContainerRef}
-				className={classnames(
-					styles.container,
-					!virtualized && styles.dataTableContainer,
-					virtualized && styles.virtualizedContainer,
-					isBulkActionsVisible && styles.bulkActionsVisible,
-					className,
-				)}
+				className={classnames(styles.container, isBulkActionsVisible && styles.bulkActionsVisible, className)}
 			>
-				<DragWrapper>
-					<Table className={classnames(fullWidth && styles.fullWidth, !bordered && styles.tableNoBorder)}>
-						<DsTableHeader table={table} />
-						{virtualized ? (
-							<DsTableBodyVirtualized
-								table={table}
-								emptyState={emptyState}
-								estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
-								overscan={virtualizedOptions?.overscan}
-								onScroll={onScroll}
-								rowSelection={rowSelection}
-								infiniteScroll={infiniteScroll}
-							/>
-						) : (
-							<TableBody>
-								<SortableWrapper>
-									{rows.length
-										? rows.map((row) => (
-												<DsTableRow key={row.id} row={row} isSelected={!!rowSelection[row.id]} />
-											))
-										: renderEmptyState()}
-								</SortableWrapper>
-							</TableBody>
-						)}
-					</Table>
-				</DragWrapper>
+				{controls && <div className={styles.controls}>{controls}</div>}
+				<div
+					ref={tableContainerRef}
+					className={classnames(
+						!virtualized && styles.dataTableContainer,
+						virtualized && styles.virtualizedContainer,
+					)}
+				>
+					<DragWrapper>
+						<Table className={classnames(fullWidth && styles.fullWidth, !bordered && styles.tableNoBorder)}>
+							<DsTableHeader table={table} />
+							{virtualized ? (
+								<DsTableBodyVirtualized
+									table={table}
+									emptyState={emptyState}
+									estimateSize={virtualizedOptions?.estimateSize || ROW_SIZE_HEIGHT_MAP[rowSize]}
+									overscan={virtualizedOptions?.overscan}
+									onScroll={onScroll}
+									rowSelection={rowSelection}
+									infiniteScroll={infiniteScroll}
+								/>
+							) : (
+								<TableBody>
+									<SortableWrapper>
+										{rows.length
+											? rows.map((row) => (
+													<DsTableRow key={row.id} row={row} isSelected={!!rowSelection[row.id]} />
+												))
+											: renderEmptyState()}
+									</SortableWrapper>
+								</TableBody>
+							)}
+						</Table>
+					</DragWrapper>
+				</div>
 				{selectable && actions.length > 0 && (
 					<DsTableBulkActions
 						numSelectedRows={selectedRows.length}

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

@@ -228,6 +228,12 @@ export interface DsDataTableProps<TData, TValue> {
 	 */
 	data: TData[];
 
+	/**
+	 * Optional content rendered in a pinned controls bar above the table header
+	 * (e.g. filters, action buttons). Layout is owned by the consumer.
+	 */
+	controls?: React.ReactNode;
+
 	/**
 	 * Whether the table is virtualized
 	 * @default false

package/src/components/ds-table/figma/ds-table-expandable.figma.ts

@@ -11,7 +11,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsTable columns={columns} data={data} expandable renderExpandedRow={(row) => null} />`,
-	imports: ["import { DsTable } from '@drivenets/design-system'"],
+	imports: ["import { DsTable } from '@drivenets/design-system';"],
 	id: 'ds-table-expandable',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -10,7 +10,7 @@ import figma from 'figma';
 
 export default {
 	example: figma.code`<DsTable columns={columns} data={data} />`,
-	imports: ["import { DsTable } from '@drivenets/design-system'"],
+	imports: ["import { DsTable } from '@drivenets/design-system';"],
 	id: 'ds-table',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

package/src/components/ds-tabs/figma/ds-tabs-tab-vertical.figma.ts

@@ -72,7 +72,7 @@ const attrs = [`value="${value}"`, `label="${label}"`, icon ? `icon="${icon}"` :
 
 export default {
 	example: figma.code`<DsTabs.Tab ${attrs} />`,
-	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	imports: ["import { DsTabs } from '@drivenets/design-system';"],
 	id: 'ds-tabs-tab-vertical',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-tabs/figma/ds-tabs-tab.figma.ts

@@ -83,7 +83,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<DsTabs.Tab ${attrs} />`,
-	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	imports: ["import { DsTabs } from '@drivenets/design-system';"],
 	id: 'ds-tabs-tab',
 	metadata: { nestable: true },
-};
+} satisfies figma.Template;

package/src/components/ds-tabs/figma/ds-tabs-vertical.figma.ts

@@ -25,7 +25,7 @@ export default {
 	<DsTabs.List>${tabs}</DsTabs.List>
 	{/* Add a <DsTabs.Content value="..."> panel for each tab */}
 </DsTabs.Root>`,
-	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	imports: ["import { DsTabs } from '@drivenets/design-system';"],
 	id: 'ds-tabs-vertical',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -23,7 +23,7 @@ export default {
 	<DsTabs.List>${tabs}</DsTabs.List>
 	{/* Add a <DsTabs.Content value="..."> panel for each tab */}
 </DsTabs.Root>`,
-	imports: ["import { DsTabs } from '@drivenets/design-system'"],
+	imports: ["import { DsTabs } from '@drivenets/design-system';"],
 	id: 'ds-tabs',
 	metadata: { nestable: false },
-};
+} satisfies figma.Template;

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

@@ -81,7 +81,7 @@ const attrs = [
 
 export default {
 	example: figma.code`<${info.component} ${attrs} />`,
-	imports: [`import { ${info.component} } from '@drivenets/design-system'`],
+	imports: [`import { ${info.component} } from '@drivenets/design-system';`],
 	id: 'ds-input-field-v02',
 	metadata: { nestable: true, props: { fcMember: info.fcMember, fcProps: attrs } },
-};
+} satisfies figma.Template;

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

@@ -54,7 +54,7 @@ export default {
 			: type === 'password'
 				? figma.code`<DsPasswordInput ${sizeAttr} ${disabled ? 'disabled' : ''} />`
 				: figma.code`<DsTextInput ${sizeAttr} ${disabled ? 'disabled' : ''} ${readOnly ? 'readOnly' : ''} />`,
-	imports: [`import { ${componentName} } from '@drivenets/design-system'`],
+	imports: [`import { ${componentName} } from '@drivenets/design-system';`],
 	id: 'ds-text-input',
 	metadata: { nestable: true, props: { fcMember, fcProps } },
-};
+} satisfies figma.Template;

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

@@ -12,7 +12,7 @@ export default {
 	example: figma.code`const [value, setValue] = useState<Date | null>(null);
 
 <DsTimePicker value={value} onChange={setValue} placeholder="hh:mm AM/PM" />`,
-	imports: ["import { useState } from 'react'", "import { DsTimePicker } from '@drivenets/design-system'"],
+	imports: ["import { DsTimePicker } from '@drivenets/design-system';", "import { useState } from 'react';"],
 	id: 'ds-time-picker',
 	metadata: { nestable: true, props: { fcMember: 'TimePicker', fcProps: '' } },
-};
+} satisfies figma.Template;