@drivenets/design-system 0.1.0 → 0.3.0

package/dist/components/ds-tag-filter/hooks/use-tag-overflow-calculation.js

@@ -0,0 +1,137 @@
+import { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from "../utils.js";
+import { c } from "react/compiler-runtime";
+import { useLayoutEffect, useState } from "react";
+
+//#region src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts
+const TAG_HOVER_BUTTON_SPACE = 20;
+/**
+* Custom hook to calculate how many tags can fit in 2 rows.
+*
+* Row 1: Label + Tags + Clear Button
+* Row 2: Remaining Tags + Expand Tag (only if overflow)
+*
+* Measures actual element widths to determine optimal placement.
+*/
+const useTagOverflowCalculation = (t0) => {
+	const $ = c(16);
+	const { containerRef, measurementRef, totalItems, expanded } = t0;
+	let t1;
+	if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+		t1 = {
+			row1TagCount: 0,
+			row2TagCount: 0,
+			hasOverflow: false
+		};
+		$[0] = t1;
+	} else t1 = $[0];
+	const [state, setState] = useState(t1);
+	let t2;
+	if ($[1] !== containerRef || $[2] !== measurementRef) {
+		t2 = () => {
+			if (!containerRef.current || !measurementRef.current) return;
+			const container = containerRef.current;
+			const measurementContainer = measurementRef.current;
+			const { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } = getElementMeasurements(measurementContainer);
+			if (tagWidths.length === 0) {
+				setState({
+					row1TagCount: 0,
+					row2TagCount: 0,
+					hasOverflow: false
+				});
+				return;
+			}
+			const containerWidth = getContainerAvailableWidth(container);
+			const row1Result = fitTagsInRow(tagWidths, containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE, gap);
+			const remainingTags = tagWidths.slice(row1Result.count);
+			if (remainingTags.length === 0) {
+				setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: 0,
+					hasOverflow: false
+				});
+				return;
+			}
+			const row2WithExpandResult = fitTagsInRow(remainingTags, containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE, gap);
+			if (remainingTags.length > row2WithExpandResult.count) setState({
+				row1TagCount: row1Result.count,
+				row2TagCount: row2WithExpandResult.count,
+				hasOverflow: true
+			});
+			else {
+				const row2FullResult = fitTagsInRow(remainingTags, containerWidth - TAG_HOVER_BUTTON_SPACE, gap);
+				if (row2FullResult.count < remainingTags.length) setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: row2WithExpandResult.count,
+					hasOverflow: true
+				});
+				else setState({
+					row1TagCount: row1Result.count,
+					row2TagCount: row2FullResult.count,
+					hasOverflow: false
+				});
+			}
+		};
+		$[1] = containerRef;
+		$[2] = measurementRef;
+		$[3] = t2;
+	} else t2 = $[3];
+	const calculateLayout = t2;
+	let t3;
+	if ($[4] !== calculateLayout || $[5] !== containerRef) {
+		t3 = () => {
+			const rafId = requestAnimationFrame(() => {
+				calculateLayout();
+			});
+			const resizeObserver = new ResizeObserver(() => {
+				requestAnimationFrame(() => {
+					calculateLayout();
+				});
+			});
+			if (containerRef.current) resizeObserver.observe(containerRef.current);
+			return () => {
+				cancelAnimationFrame(rafId);
+				resizeObserver.disconnect();
+			};
+		};
+		$[4] = calculateLayout;
+		$[5] = containerRef;
+		$[6] = t3;
+	} else t3 = $[6];
+	let t4;
+	if ($[7] !== calculateLayout || $[8] !== containerRef || $[9] !== expanded || $[10] !== measurementRef || $[11] !== totalItems) {
+		t4 = [
+			containerRef,
+			measurementRef,
+			totalItems,
+			expanded,
+			calculateLayout
+		];
+		$[7] = calculateLayout;
+		$[8] = containerRef;
+		$[9] = expanded;
+		$[10] = measurementRef;
+		$[11] = totalItems;
+		$[12] = t4;
+	} else t4 = $[12];
+	useLayoutEffect(t3, t4);
+	if (expanded) {
+		const t5 = totalItems - state.row1TagCount;
+		let t6;
+		if ($[13] !== state.row1TagCount || $[14] !== t5) {
+			t6 = {
+				row1TagCount: state.row1TagCount,
+				row2TagCount: t5,
+				hasOverflow: true
+			};
+			$[13] = state.row1TagCount;
+			$[14] = t5;
+			$[15] = t6;
+		} else t6 = $[15];
+		return t6;
+	}
+	return state;
+};
+
+//#endregion
+export { useTagOverflowCalculation };
+//# sourceMappingURL=use-tag-overflow-calculation.js.map

package/dist/components/ds-tag-filter/hooks/use-tag-overflow-calculation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-tag-overflow-calculation.js","names":["RefObject","useCallback","useLayoutEffect","useState","fitTagsInRow","getContainerAvailableWidth","getElementMeasurements","UseTagOverflowCalculationOptions","containerRef","HTMLDivElement","measurementRef","totalItems","expanded","UseTagOverflowCalculationResult","row1TagCount","row2TagCount","hasOverflow","TAG_HOVER_BUTTON_SPACE","useTagOverflowCalculation","t0","$","_c","t1","Symbol","for","state","setState","t2","current","container","measurementContainer","tagWidths","labelWidth","clearButtonWidth","expandTagWidth","gap","length","containerWidth","row1AvailableWidth","row1Result","remainingTags","slice","count","row2AvailableWithExpand","row2WithExpandResult","overflowExists","row2AvailableWithoutExpand","row2FullResult","calculateLayout","t3","rafId","requestAnimationFrame","resizeObserver","ResizeObserver","observe","cancelAnimationFrame","disconnect","t4","t5","t6"],"sources":["../../../../src/components/ds-tag-filter/hooks/use-tag-overflow-calculation.ts"],"sourcesContent":["import { type RefObject, useCallback, useLayoutEffect, useState } from 'react';\nimport { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements } from '../utils';\n\ninterface UseTagOverflowCalculationOptions {\n\tcontainerRef: RefObject<HTMLDivElement | null>;\n\tmeasurementRef: RefObject<HTMLDivElement | null>;\n\ttotalItems: number;\n\texpanded: boolean;\n}\n\ninterface UseTagOverflowCalculationResult {\n\trow1TagCount: number;\n\trow2TagCount: number;\n\thasOverflow: boolean;\n}\n\n// Extra space needed per row for animated delete button that appears on hover\nconst TAG_HOVER_BUTTON_SPACE = 20;\n\n/**\n * Custom hook to calculate how many tags can fit in 2 rows.\n *\n * Row 1: Label + Tags + Clear Button\n * Row 2: Remaining Tags + Expand Tag (only if overflow)\n *\n * Measures actual element widths to determine optimal placement.\n */\nexport const useTagOverflowCalculation = ({\n\tcontainerRef,\n\tmeasurementRef,\n\ttotalItems,\n\texpanded,\n}: UseTagOverflowCalculationOptions): UseTagOverflowCalculationResult => {\n\tconst [state, setState] = useState<UseTagOverflowCalculationResult>({\n\t\trow1TagCount: 0,\n\t\trow2TagCount: 0,\n\t\thasOverflow: false,\n\t});\n\n\tconst calculateLayout = useCallback(() => {\n\t\tif (!containerRef.current || !measurementRef.current) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst container = containerRef.current;\n\t\tconst measurementContainer = measurementRef.current;\n\n\t\tconst { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap } =\n\t\t\tgetElementMeasurements(measurementContainer);\n\n\t\tif (tagWidths.length === 0) {\n\t\t\tsetState({ row1TagCount: 0, row2TagCount: 0, hasOverflow: false });\n\t\t\treturn;\n\t\t}\n\n\t\tconst containerWidth = getContainerAvailableWidth(container);\n\n\t\t// Calculate Row 1 available space (Label + Tags + Clear Button)\n\t\tconst row1AvailableWidth = containerWidth - labelWidth - clearButtonWidth - TAG_HOVER_BUTTON_SPACE;\n\n\t\t// Calculate how many tags fit in Row 1\n\t\tconst row1Result = fitTagsInRow(tagWidths, row1AvailableWidth, gap);\n\t\tconst remainingTags = tagWidths.slice(row1Result.count);\n\n\t\tif (remainingTags.length === 0) {\n\t\t\t// All tags fit in Row 1, no overflow\n\t\t\tsetState({ row1TagCount: row1Result.count, row2TagCount: 0, hasOverflow: false });\n\t\t\treturn;\n\t\t}\n\n\t\t// Calculate with expand tag reserved (pessimistic)\n\t\tconst row2AvailableWithExpand = containerWidth - expandTagWidth - TAG_HOVER_BUTTON_SPACE;\n\t\tconst row2WithExpandResult = fitTagsInRow(remainingTags, row2AvailableWithExpand, gap);\n\n\t\t// Check if there's overflow (more remaining tags than fit in Row 2 with expand)\n\t\tconst overflowExists = remainingTags.length > row2WithExpandResult.count;\n\n\t\tif (overflowExists) {\n\t\t\t// Use the count with expand tag space reserved\n\t\t\tsetState({\n\t\t\t\trow1TagCount: row1Result.count,\n\t\t\t\trow2TagCount: row2WithExpandResult.count,\n\t\t\t\thasOverflow: true,\n\t\t\t});\n\t\t} else {\n\t\t\t// No overflow - recalculate Row 2 without reserving expand tag space\n\t\t\tconst row2AvailableWithoutExpand = containerWidth - TAG_HOVER_BUTTON_SPACE;\n\t\t\tconst row2FullResult = fitTagsInRow(remainingTags, row2AvailableWithoutExpand, gap);\n\n\t\t\t// Double-check: if even without expand tag we can't fit all, we have overflow\n\t\t\tif (row2FullResult.count < remainingTags.length) {\n\t\t\t\tsetState({\n\t\t\t\t\trow1TagCount: row1Result.count,\n\t\t\t\t\trow2TagCount: row2WithExpandResult.count,\n\t\t\t\t\thasOverflow: true,\n\t\t\t\t});\n\t\t\t} else {\n\t\t\t\tsetState({ row1TagCount: row1Result.count, row2TagCount: row2FullResult.count, hasOverflow: false });\n\t\t\t}\n\t\t}\n\t}, [containerRef, measurementRef]);\n\n\tuseLayoutEffect(() => {\n\t\t// Use requestAnimationFrame to ensure DOM is fully laid out\n\t\tconst rafId = requestAnimationFrame(() => {\n\t\t\tcalculateLayout();\n\t\t});\n\n\t\tconst resizeObserver = new ResizeObserver(() => {\n\t\t\trequestAnimationFrame(() => {\n\t\t\t\tcalculateLayout();\n\t\t\t});\n\t\t});\n\n\t\tif (containerRef.current) {\n\t\t\tresizeObserver.observe(containerRef.current);\n\t\t}\n\n\t\treturn () => {\n\t\t\tcancelAnimationFrame(rafId);\n\t\t\tresizeObserver.disconnect();\n\t\t};\n\t}, [containerRef, measurementRef, totalItems, expanded, calculateLayout]);\n\n\t// When expanded, show all tags\n\tif (expanded) {\n\t\treturn {\n\t\t\trow1TagCount: state.row1TagCount,\n\t\t\trow2TagCount: totalItems - state.row1TagCount,\n\t\t\thasOverflow: true, // Keep expand button visible to allow collapse\n\t\t};\n\t}\n\n\treturn state;\n};\n"],"mappings":"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"}

package/dist/components/ds-tag-filter/index.cjs

@@ -0,0 +1 @@
+const require_ds_tag_filter = require('./ds-tag-filter.cjs');

package/dist/components/ds-tag-filter/index.d.ts

@@ -0,0 +1,2 @@
+import { DsTagFilterProps, TagFilterItem } from "./ds-tag-filter.types.js";
+import { DsTagFilter } from "./ds-tag-filter.js";

package/dist/components/ds-tag-filter/index.js

@@ -0,0 +1 @@
+import ds_tag_filter_default from "./ds-tag-filter.js";

package/dist/components/ds-tag-filter/utils.cjs

@@ -0,0 +1,54 @@
+
+//#region src/components/ds-tag-filter/utils.ts
+/**
+* Calculate how many tags fit within the available width.
+* Pure function for easy testing.
+*/
+function fitTagsInRow(tagWidths, availableWidth, gap) {
+	let usedWidth = 0;
+	let count = 0;
+	for (const tagWidth of tagWidths) {
+		const widthWithGap = tagWidth + (count > 0 ? gap : 0);
+		if (usedWidth + widthWithGap <= availableWidth) {
+			usedWidth += widthWithGap;
+			count++;
+		} else break;
+	}
+	return {
+		count,
+		usedWidth
+	};
+}
+/**
+* Calculate the available width inside a container, accounting for padding.
+*/
+function getContainerAvailableWidth(container) {
+	const containerRect = container.getBoundingClientRect();
+	const containerStyle = getComputedStyle(container);
+	const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+	const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+	return containerRect.width - paddingLeft - paddingRight;
+}
+/**
+* Measure all relevant elements (tags, label, buttons) inside the measurement container.
+*/
+function getElementMeasurements(measurementContainer) {
+	const tags = Array.from(measurementContainer.querySelectorAll("[data-measure-tag]"));
+	const label = measurementContainer.querySelector("[data-measure-label]");
+	const clearButton = measurementContainer.querySelector("[data-measure-clear]");
+	const expandTag = measurementContainer.querySelector("[data-measure-expand]");
+	const computedStyle = getComputedStyle(measurementContainer);
+	const gap = parseFloat(computedStyle.gap) || 8;
+	return {
+		tagWidths: tags.map((tag) => tag.getBoundingClientRect().width),
+		labelWidth: label ? label.getBoundingClientRect().width + gap : 0,
+		clearButtonWidth: clearButton ? clearButton.getBoundingClientRect().width + gap : 0,
+		expandTagWidth: expandTag ? expandTag.getBoundingClientRect().width + gap : 100,
+		gap
+	};
+}
+
+//#endregion
+exports.fitTagsInRow = fitTagsInRow;
+exports.getContainerAvailableWidth = getContainerAvailableWidth;
+exports.getElementMeasurements = getElementMeasurements;

package/dist/components/ds-tag-filter/utils.js

@@ -0,0 +1,52 @@
+//#region src/components/ds-tag-filter/utils.ts
+/**
+* Calculate how many tags fit within the available width.
+* Pure function for easy testing.
+*/
+function fitTagsInRow(tagWidths, availableWidth, gap) {
+	let usedWidth = 0;
+	let count = 0;
+	for (const tagWidth of tagWidths) {
+		const widthWithGap = tagWidth + (count > 0 ? gap : 0);
+		if (usedWidth + widthWithGap <= availableWidth) {
+			usedWidth += widthWithGap;
+			count++;
+		} else break;
+	}
+	return {
+		count,
+		usedWidth
+	};
+}
+/**
+* Calculate the available width inside a container, accounting for padding.
+*/
+function getContainerAvailableWidth(container) {
+	const containerRect = container.getBoundingClientRect();
+	const containerStyle = getComputedStyle(container);
+	const paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;
+	const paddingRight = parseFloat(containerStyle.paddingRight) || 0;
+	return containerRect.width - paddingLeft - paddingRight;
+}
+/**
+* Measure all relevant elements (tags, label, buttons) inside the measurement container.
+*/
+function getElementMeasurements(measurementContainer) {
+	const tags = Array.from(measurementContainer.querySelectorAll("[data-measure-tag]"));
+	const label = measurementContainer.querySelector("[data-measure-label]");
+	const clearButton = measurementContainer.querySelector("[data-measure-clear]");
+	const expandTag = measurementContainer.querySelector("[data-measure-expand]");
+	const computedStyle = getComputedStyle(measurementContainer);
+	const gap = parseFloat(computedStyle.gap) || 8;
+	return {
+		tagWidths: tags.map((tag) => tag.getBoundingClientRect().width),
+		labelWidth: label ? label.getBoundingClientRect().width + gap : 0,
+		clearButtonWidth: clearButton ? clearButton.getBoundingClientRect().width + gap : 0,
+		expandTagWidth: expandTag ? expandTag.getBoundingClientRect().width + gap : 100,
+		gap
+	};
+}
+
+//#endregion
+export { fitTagsInRow, getContainerAvailableWidth, getElementMeasurements };
+//# sourceMappingURL=utils.js.map

package/dist/components/ds-tag-filter/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","names":["FitTagsResult","count","usedWidth","ElementMeasurements","tagWidths","labelWidth","clearButtonWidth","expandTagWidth","gap","fitTagsInRow","availableWidth","tagWidth","widthWithGap","getContainerAvailableWidth","container","HTMLDivElement","containerRect","getBoundingClientRect","containerStyle","getComputedStyle","paddingLeft","parseFloat","paddingRight","width","getElementMeasurements","measurementContainer","tags","Array","from","querySelectorAll","label","querySelector","clearButton","expandTag","computedStyle","map","tag"],"sources":["../../../src/components/ds-tag-filter/utils.ts"],"sourcesContent":["export interface FitTagsResult {\n\tcount: number;\n\tusedWidth: number;\n}\n\nexport interface ElementMeasurements {\n\ttagWidths: number[];\n\tlabelWidth: number;\n\tclearButtonWidth: number;\n\texpandTagWidth: number;\n\tgap: number;\n}\n\n/**\n * Calculate how many tags fit within the available width.\n * Pure function for easy testing.\n */\nexport function fitTagsInRow(tagWidths: number[], availableWidth: number, gap: number): FitTagsResult {\n\tlet usedWidth = 0;\n\tlet count = 0;\n\n\tfor (const tagWidth of tagWidths) {\n\t\tconst widthWithGap = tagWidth + (count > 0 ? gap : 0);\n\t\tif (usedWidth + widthWithGap <= availableWidth) {\n\t\t\tusedWidth += widthWithGap;\n\t\t\tcount++;\n\t\t} else {\n\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn { count, usedWidth };\n}\n\n/**\n * Calculate the available width inside a container, accounting for padding.\n */\nexport function getContainerAvailableWidth(container: HTMLDivElement): number {\n\tconst containerRect = container.getBoundingClientRect();\n\tconst containerStyle = getComputedStyle(container);\n\tconst paddingLeft = parseFloat(containerStyle.paddingLeft) || 0;\n\tconst paddingRight = parseFloat(containerStyle.paddingRight) || 0;\n\treturn containerRect.width - paddingLeft - paddingRight;\n}\n\n/**\n * Measure all relevant elements (tags, label, buttons) inside the measurement container.\n */\nexport function getElementMeasurements(measurementContainer: HTMLDivElement): ElementMeasurements {\n\tconst tags = Array.from(measurementContainer.querySelectorAll('[data-measure-tag]'));\n\tconst label = measurementContainer.querySelector('[data-measure-label]');\n\tconst clearButton = measurementContainer.querySelector('[data-measure-clear]');\n\tconst expandTag = measurementContainer.querySelector('[data-measure-expand]');\n\n\tconst computedStyle = getComputedStyle(measurementContainer);\n\tconst gap = parseFloat(computedStyle.gap) || 8;\n\n\tconst tagWidths = tags.map((tag) => tag.getBoundingClientRect().width);\n\tconst labelWidth = label ? label.getBoundingClientRect().width + gap : 0;\n\tconst clearButtonWidth = clearButton ? clearButton.getBoundingClientRect().width + gap : 0;\n\t// Fallback width for expand tag (~100px for \"+99 filters\" text) if measurement fails\n\tconst expandTagWidth = expandTag ? expandTag.getBoundingClientRect().width + gap : 100;\n\n\treturn { tagWidths, labelWidth, clearButtonWidth, expandTagWidth, gap };\n}\n"],"mappings":";;;;;AAiBA,SAAgBS,aAAaL,WAAqBM,gBAAwBF,KAA4B;CACrG,IAAIN,YAAY;CAChB,IAAID,QAAQ;AAEZ,MAAK,MAAMU,YAAYP,WAAW;EACjC,MAAMQ,eAAeD,YAAYV,QAAQ,IAAIO,MAAM;AACnD,MAAIN,YAAYU,gBAAgBF,gBAAgB;AAC/CR,gBAAaU;AACbX;QAEA;;AAIF,QAAO;EAAEA;EAAOC;EAAW;;;;;AAM5B,SAAgBW,2BAA2BC,WAAmC;CAC7E,MAAME,gBAAgBF,UAAUG,uBAAuB;CACvD,MAAMC,iBAAiBC,iBAAiBL,UAAU;CAClD,MAAMM,cAAcC,WAAWH,eAAeE,YAAY,IAAI;CAC9D,MAAME,eAAeD,WAAWH,eAAeI,aAAa,IAAI;AAChE,QAAON,cAAcO,QAAQH,cAAcE;;;;;AAM5C,SAAgBE,uBAAuBC,sBAA2D;CACjG,MAAMC,OAAOC,MAAMC,KAAKH,qBAAqBI,iBAAiB,qBAAqB,CAAC;CACpF,MAAMC,QAAQL,qBAAqBM,cAAc,uBAAuB;CACxE,MAAMC,cAAcP,qBAAqBM,cAAc,uBAAuB;CAC9E,MAAME,YAAYR,qBAAqBM,cAAc,wBAAwB;CAE7E,MAAMG,gBAAgBf,iBAAiBM,qBAAqB;CAC5D,MAAMjB,MAAMa,WAAWa,cAAc1B,IAAI,IAAI;AAQ7C,QAAO;EAAEJ,WANSsB,KAAKS,KAAKC,QAAQA,IAAInB,uBAAuB,CAACM,MAAM;EAMlDlB,YALDyB,QAAQA,MAAMb,uBAAuB,CAACM,QAAQf,MAAM;EAKvCF,kBAJP0B,cAAcA,YAAYf,uBAAuB,CAACM,QAAQf,MAAM;EAIvCD,gBAF3B0B,YAAYA,UAAUhB,uBAAuB,CAACM,QAAQf,MAAM;EAEjBA;EAAK"}

package/dist/components/ds-text-input/ds-text-input.js

@@ -2,7 +2,7 @@ import ds_text_input_module_default from "./ds-text-input.module.js";
 import { c } from "react/compiler-runtime";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { Fragment } from "react";
+import { Fragment as Fragment$1 } from "react";
 
 //#region src/components/ds-text-input/ds-text-input.tsx
 const DsTextInput = (t0) => {
@@ -18,7 +18,7 @@ const DsTextInput = (t0) => {
 	} else t5 = $[1];
 	const style = t5;
 	const disabled = t4 === void 0 ? false : t4;
-	const InputWrapper = slots?.inputWrapper ?? Fragment;
+	const InputWrapper = slots?.inputWrapper ?? Fragment$1;
 	const t6 = size === "small";
 	const t7 = size === "default";
 	let t8;

package/dist/components/ds-toggle/ds-toggle.d.cts

@@ -1,5 +1,5 @@
 import { DsToggleProps } from "./ds-toggle.types.cjs";
-import * as react_jsx_runtime40 from "react/jsx-runtime";
+import * as react_jsx_runtime56 from "react/jsx-runtime";
 
 //#region src/components/ds-toggle/ds-toggle.d.ts
 /**
@@ -18,7 +18,7 @@ declare const DsToggle: ({
   children,
   checked,
   ...rest
-}: DsToggleProps) => react_jsx_runtime40.JSX.Element;
+}: DsToggleProps) => react_jsx_runtime56.JSX.Element;
 //#endregion
 export { DsToggle };
 //# sourceMappingURL=ds-toggle.d.cts.map

package/dist/components/ds-toggle/ds-toggle.d.ts

@@ -1,5 +1,5 @@
 import { DsToggleProps } from "./ds-toggle.types.js";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime58 from "react/jsx-runtime";
 
 //#region src/components/ds-toggle/ds-toggle.d.ts
 /**
@@ -18,7 +18,7 @@ declare const DsToggle: ({
   children,
   checked,
   ...rest
-}: DsToggleProps) => react_jsx_runtime41.JSX.Element;
+}: DsToggleProps) => react_jsx_runtime58.JSX.Element;
 //#endregion
 export { DsToggle };
 //# sourceMappingURL=ds-toggle.d.ts.map

package/dist/components/ds-vertical-tabs/ds-vertical-tabs.d.cts

@@ -1,5 +1,5 @@
 import { DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps } from "./ds-vertical-tabs.types.cjs";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react_jsx_runtime47 from "react/jsx-runtime";
 
 //#region src/components/ds-vertical-tabs/ds-vertical-tabs.d.ts
 
@@ -28,22 +28,22 @@ declare const DsVerticalTabs: {
     className,
     style,
     children
-  }: DsVerticalTabsRootProps): react_jsx_runtime32.JSX.Element;
+  }: DsVerticalTabsRootProps): react_jsx_runtime47.JSX.Element;
   List: ({
     className,
     children
-  }: DsVerticalTabsListProps) => react_jsx_runtime32.JSX.Element;
+  }: DsVerticalTabsListProps) => react_jsx_runtime47.JSX.Element;
   Tab: ({
     value,
     disabled,
     className,
     children
-  }: DsVerticalTabsTabProps) => react_jsx_runtime32.JSX.Element;
+  }: DsVerticalTabsTabProps) => react_jsx_runtime47.JSX.Element;
   Content: ({
     value,
     className,
     children
-  }: DsVerticalTabsContentProps) => react_jsx_runtime32.JSX.Element;
+  }: DsVerticalTabsContentProps) => react_jsx_runtime47.JSX.Element;
 };
 //#endregion
 export { DsVerticalTabs };

package/dist/components/ds-vertical-tabs/ds-vertical-tabs.d.ts

@@ -1,5 +1,5 @@
 import { DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps } from "./ds-vertical-tabs.types.js";
-import * as react_jsx_runtime42 from "react/jsx-runtime";
+import * as react_jsx_runtime49 from "react/jsx-runtime";
 
 //#region src/components/ds-vertical-tabs/ds-vertical-tabs.d.ts
 
@@ -28,22 +28,22 @@ declare const DsVerticalTabs: {
     className,
     style,
     children
-  }: DsVerticalTabsRootProps): react_jsx_runtime42.JSX.Element;
+  }: DsVerticalTabsRootProps): react_jsx_runtime49.JSX.Element;
   List: ({
     className,
     children
-  }: DsVerticalTabsListProps) => react_jsx_runtime42.JSX.Element;
+  }: DsVerticalTabsListProps) => react_jsx_runtime49.JSX.Element;
   Tab: ({
     value,
     disabled,
     className,
     children
-  }: DsVerticalTabsTabProps) => react_jsx_runtime42.JSX.Element;
+  }: DsVerticalTabsTabProps) => react_jsx_runtime49.JSX.Element;
   Content: ({
     value,
     className,
     children
-  }: DsVerticalTabsContentProps) => react_jsx_runtime42.JSX.Element;
+  }: DsVerticalTabsContentProps) => react_jsx_runtime49.JSX.Element;
 };
 //#endregion
 export { DsVerticalTabs };

package/dist/index.cjs

@@ -6,6 +6,12 @@ require('./components/ds-typography/index.cjs');
 const require_ds_alert_banner = require('./components/ds-alert-banner/ds-alert-banner.cjs');
 const require_ds_alert_banner_types = require('./components/ds-alert-banner/ds-alert-banner.types.cjs');
 require('./components/ds-alert-banner/index.cjs');
+const require_ds_tooltip = require('./components/ds-tooltip/ds-tooltip.cjs');
+require('./components/ds-tooltip/index.cjs');
+const require_ds_avatar = require('./components/ds-avatar/ds-avatar.cjs');
+require('./components/ds-avatar/index.cjs');
+const require_ds_avatar_group = require('./components/ds-avatar-group/ds-avatar-group.cjs');
+require('./components/ds-avatar-group/index.cjs');
 const require_ds_text_input = require('./components/ds-text-input/ds-text-input.cjs');
 const require_ds_dropdown_menu = require('./components/ds-dropdown-menu/ds-dropdown-menu.cjs');
 require('./components/ds-dropdown-menu/index.cjs');
@@ -33,8 +39,6 @@ const require_ds_drawer = require('./components/ds-drawer/ds-drawer.cjs');
 require('./components/ds-drawer/index.cjs');
 const require_ds_expandable_text_input = require('./components/ds-expandable-text-input/ds-expandable-text-input.cjs');
 require('./components/ds-expandable-text-input/index.cjs');
-const require_ds_tooltip = require('./components/ds-tooltip/ds-tooltip.cjs');
-require('./components/ds-tooltip/index.cjs');
 const require_file_upload = require('./components/ds-file-upload/components/file-upload/file-upload.cjs');
 const require_file_upload_errors = require('./components/ds-file-upload/errors/file-upload-errors.cjs');
 const require_use_file_upload = require('./components/ds-file-upload/hooks/use-file-upload.cjs');
@@ -53,6 +57,9 @@ const require_ds_form_control_types = require('./components/ds-form-control/ds-f
 require('./components/ds-form-control/index.cjs');
 const require_ds_grid = require('./components/ds-grid/ds-grid.cjs');
 require('./components/ds-grid/index.cjs');
+const require_ds_loader = require('./components/ds-loader/ds-loader.cjs');
+const require_ds_loader_types = require('./components/ds-loader/ds-loader.types.cjs');
+require('./components/ds-loader/index.cjs');
 const require_ds_modal = require('./components/ds-modal/ds-modal.cjs');
 require('./components/ds-modal/index.cjs');
 const require_ds_panel = require('./components/ds-panel/ds-panel.cjs');
@@ -63,6 +70,12 @@ const require_ds_radio_group = require('./components/ds-radio-group/ds-radio-gro
 require('./components/ds-radio-group/index.cjs');
 const require_ds_segment_group = require('./components/ds-segment-group/ds-segment-group.cjs');
 require('./components/ds-segment-group/index.cjs');
+const require_ds_skeleton_types = require('./components/ds-skeleton/ds-skeleton.types.cjs');
+const require_ds_skeleton_text = require('./components/ds-skeleton/ds-skeleton-text.cjs');
+const require_ds_skeleton_circle = require('./components/ds-skeleton/ds-skeleton-circle.cjs');
+const require_ds_skeleton_rect = require('./components/ds-skeleton/ds-skeleton-rect.cjs');
+const require_ds_skeleton = require('./components/ds-skeleton/ds-skeleton.cjs');
+require('./components/ds-skeleton/index.cjs');
 const require_ds_smart_tabs = require('./components/ds-smart-tabs/ds-smart-tabs.cjs');
 const require_ds_smart_tabs_types = require('./components/ds-smart-tabs/ds-smart-tabs.types.cjs');
 require('./components/ds-smart-tabs/index.cjs');
@@ -85,6 +98,12 @@ const require_create_dual_range_filter_adapter = require('./components/ds-table/
 const require_use_table_filters = require('./components/ds-table/filters/hooks/use-table-filters.cjs');
 const require_ds_table = require('./components/ds-table/ds-table.cjs');
 require('./components/ds-table/index.cjs');
+const require_ds_tabs = require('./components/ds-tabs/ds-tabs.cjs');
+require('./components/ds-tabs/index.cjs');
+const require_ds_tag = require('./components/ds-tag/ds-tag.cjs');
+require('./components/ds-tag/index.cjs');
+const require_ds_tag_filter = require('./components/ds-tag-filter/ds-tag-filter.cjs');
+require('./components/ds-tag-filter/index.cjs');
 const require_ds_toast_context = require('./components/ds-toast/ds-toast-context.cjs');
 require('./components/ds-toast/index.cjs');
 const require_ds_toggle = require('./components/ds-toggle/ds-toggle.cjs');
@@ -93,6 +112,8 @@ const require_ds_vertical_tabs = require('./components/ds-vertical-tabs/ds-verti
 require('./components/ds-vertical-tabs/index.cjs');
 
 exports.DsAlertBanner = require_ds_alert_banner.default;
+exports.DsAvatar = require_ds_avatar.DsAvatar;
+exports.DsAvatarGroup = require_ds_avatar_group.DsAvatarGroup;
 exports.DsBreadcrumb = require_ds_breadcrumb.default;
 exports.DsButton = require_ds_button.default;
 exports.DsCheckbox = require_ds_checkbox.default;
@@ -111,6 +132,7 @@ exports.DsFormControl = require_ds_form_control.default;
 exports.DsGrid = require_ds_grid.DsGrid;
 exports.DsGridItem = require_ds_grid.DsGridItem;
 exports.DsIcon = require_ds_icon.default;
+exports.DsLoader = require_ds_loader.default;
 exports.DsModal = require_ds_modal.default;
 exports.DsNextStepButton = require_ds_step_next_button.DsNextStepButton;
 exports.DsNumberInput = require_ds_number_input.default;
@@ -121,6 +143,10 @@ exports.DsRadioGroup = require_ds_radio_group.DsRadioGroup;
 exports.DsRadioGroupLegacy = require_ds_radio_group.DsRadioGroupLegacy;
 exports.DsSegmentGroup = require_ds_segment_group.DsSegmentGroup;
 exports.DsSelect = require_ds_select.default;
+exports.DsSkeleton = require_ds_skeleton.default;
+exports.DsSkeletonCircle = require_ds_skeleton_circle.default;
+exports.DsSkeletonRect = require_ds_skeleton_rect.default;
+exports.DsSkeletonText = require_ds_skeleton_text.default;
 exports.DsSmartTabs = require_ds_smart_tabs.default;
 exports.DsSpinner = require_ds_spinner.default;
 exports.DsStatusBadge = require_ds_status_badge.default;
@@ -129,6 +155,9 @@ exports.DsStepContent = require_ds_step_content.DsStepContent;
 exports.DsStepper = require_ds_stepper.DsStepper;
 exports.DsSystemStatus = require_ds_system_status.default;
 exports.DsTable = require_ds_table.default;
+exports.DsTabs = require_ds_tabs.DsTabs;
+exports.DsTag = require_ds_tag.default;
+exports.DsTagFilter = require_ds_tag_filter.default;
 exports.DsTextInput = require_ds_text_input.default;
 exports.DsTextarea = require_ds_textarea.default;
 exports.DsToastProvider = require_ds_toast_context.DsToastProvider;
@@ -148,6 +177,9 @@ exports.createDualRangeFilterAdapter = require_create_dual_range_filter_adapter.
 exports.createFilterAdapter = require_create_filter_adapter.createFilterAdapter;
 exports.iconSizes = require_ds_icon_types.iconSizes;
 exports.iconVariants = require_ds_icon_types.iconVariants;
+exports.loaderVariants = require_ds_loader_types.loaderVariants;
+exports.skeletonColorVariants = require_ds_skeleton_types.skeletonColorVariants;
+exports.skeletonRadiusVariants = require_ds_skeleton_types.skeletonRadiusVariants;
 exports.spinnerSizes = require_ds_spinner_types.spinnerSizes;
 exports.systemStatuses = require_ds_system_status_types.systemStatuses;
 exports.textInputSizes = require_ds_text_input_types.textInputSizes;

package/dist/index.d.cts

@@ -2,6 +2,10 @@ import { DsIconProps, IconName, IconSize, IconType, IconVariant, iconSizes, icon
 import { DsIcon } from "./components/ds-icon/ds-icon.cjs";
 import { AlertBannerVariant, DsAlertBannerProps, alertBannerVariants } from "./components/ds-alert-banner/ds-alert-banner.types.cjs";
 import { DsAlertBanner } from "./components/ds-alert-banner/ds-alert-banner.cjs";
+import { DsAvatarProps, DsAvatarSize, DsAvatarType } from "./components/ds-avatar/ds-avatar.types.cjs";
+import { DsAvatar } from "./components/ds-avatar/ds-avatar.cjs";
+import { DsAvatarGroupProps } from "./components/ds-avatar-group/ds-avatar-group.types.cjs";
+import { DsAvatarGroup } from "./components/ds-avatar-group/ds-avatar-group.cjs";
 import { DsBreadcrumbItem, DsBreadcrumbProps } from "./components/ds-breadcrumb/ds-breadcrumb.types.cjs";
 import { DsBreadcrumb } from "./components/ds-breadcrumb/ds-breadcrumb.cjs";
 import { DsButtonUnifiedProps } from "./components/ds-button/ds-button.types.cjs";
@@ -47,6 +51,8 @@ import { ControlStatus, DsFormControlDescriptionProps, DsFormControlProps, contr
 import { DsFormControl } from "./components/ds-form-control/ds-form-control.cjs";
 import { DsGridItemProps, DsGridProps } from "./components/ds-grid/ds-grid.types.cjs";
 import { DsGrid, DsGridItem } from "./components/ds-grid/ds-grid.cjs";
+import { DsLoaderProps, LoaderVariant, loaderVariants } from "./components/ds-loader/ds-loader.types.cjs";
+import { DsLoader } from "./components/ds-loader/ds-loader.cjs";
 import { DsModalColumns, DsModalProps } from "./components/ds-modal/ds-modal.types.cjs";
 import { DsModal } from "./components/ds-modal/ds-modal.cjs";
 import { DsPanelCollapseButtonProps, DsPanelProps, DsPanelVariant } from "./components/ds-panel/ds-panel.types.cjs";
@@ -57,6 +63,13 @@ import { DsRadioGroupItemProps, DsRadioGroupLegacyProps, DsRadioGroupRootProps,
 import { DsRadioGroup, DsRadioGroupLegacy } from "./components/ds-radio-group/ds-radio-group.cjs";
 import { DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps, DsSegmentGroupSize } from "./components/ds-segment-group/ds-segment-group.types.cjs";
 import { DsSegmentGroup } from "./components/ds-segment-group/ds-segment-group.cjs";
+import { DsTypographyProps, SemanticVariant } from "./components/ds-typography/ds-typography.types.cjs";
+import { DsTypography } from "./components/ds-typography/ds-typography.cjs";
+import { DsSkeletonBaseProps, DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps, SkeletonColorVariant, SkeletonRadiusVariant, skeletonColorVariants, skeletonRadiusVariants } from "./components/ds-skeleton/ds-skeleton.types.cjs";
+import { _default } from "./components/ds-skeleton/ds-skeleton.cjs";
+import { DsSkeletonText } from "./components/ds-skeleton/ds-skeleton-text.cjs";
+import { DsSkeletonCircle } from "./components/ds-skeleton/ds-skeleton-circle.cjs";
+import { DsSkeletonRect } from "./components/ds-skeleton/ds-skeleton-rect.cjs";
 import { Color, DsSmartTabProps, DsSmartTabsProps, colors } from "./components/ds-smart-tabs/ds-smart-tabs.types.cjs";
 import { DsSmartTabs } from "./components/ds-smart-tabs/ds-smart-tabs.cjs";
 import { DsSpinnerProps, SpinnerSize, spinnerSizes } from "./components/ds-spinner/ds-spinner.types.cjs";
@@ -80,14 +93,18 @@ import { UseTableFiltersResult, useTableFilters } from "./components/ds-table/fi
 import { RangeFilterProps, RangeFilterValue } from "./components/ds-table/filters/components/range-filter/range-filter.cjs";
 import { Action, DsDataTableProps, DsTableApi, DsTableRowSize, ScrollParams } from "./components/ds-table/ds-table.types.cjs";
 import { DsTable } from "./components/ds-table/ds-table.cjs";
+import { DsTabsContentProps, DsTabsListProps, DsTabsMenuActionItem, DsTabsOrientation, DsTabsProps, DsTabsSize, DsTabsTabProps } from "./components/ds-tabs/ds-tabs.types.cjs";
+import { DsTabs } from "./components/ds-tabs/ds-tabs.cjs";
+import { DsTagProps, TagSize, TagVariant } from "./components/ds-tag/ds-tag.types.cjs";
+import { DsTag } from "./components/ds-tag/ds-tag.cjs";
+import { DsTagFilterProps, TagFilterItem } from "./components/ds-tag-filter/ds-tag-filter.types.cjs";
+import { DsTagFilter } from "./components/ds-tag-filter/ds-tag-filter.cjs";
 import { DsToastProps, ToastVariant } from "./components/ds-toast/ds-toast.types.cjs";
 import { DsToastContextType, DsToastProvider, DsToastProviderProps, useToaster } from "./components/ds-toast/ds-toast-context.cjs";
 import { DsToggleProps, ToggleSize } from "./components/ds-toggle/ds-toggle.types.cjs";
 import { DsToggle } from "./components/ds-toggle/ds-toggle.cjs";
 import { DsTooltipProps } from "./components/ds-tooltip/ds-tooltip.types.cjs";
 import { DsTooltip } from "./components/ds-tooltip/ds-tooltip.cjs";
-import { DsTypographyProps, SemanticVariant } from "./components/ds-typography/ds-typography.types.cjs";
-import { DsTypography } from "./components/ds-typography/ds-typography.cjs";
 import { DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps } from "./components/ds-vertical-tabs/ds-vertical-tabs.types.cjs";
 import { DsVerticalTabs } from "./components/ds-vertical-tabs/ds-vertical-tabs.cjs";
-export { AcceptedFileType, Action, AlertBannerVariant, AnyAdapter, CheckboxFilterAdapterConfig, CheckboxFilterItem, CheckboxFilterProps, ChipItem, ChipSize, Color, ColumnFilterState, ControlStatus, DsAlertBanner, DsAlertBannerProps, DsBreadcrumb, DsBreadcrumbItem, DsBreadcrumbProps, DsButton, DsButtonUnifiedProps, DsCheckbox, DsCheckboxProps, DsChip, DsChipGroup, DsChipGroupProps, DsChipProps, DsConfirmation, DsConfirmationProps, DsDataTableProps, DsDateInput, DsDateInputProps, DsDialog, DsDialogProps, DsDivider, DsDividerProps, DsDrawer, DsDrawerColumns, DsDrawerPosition, DsDrawerProps, DsDropdownMenu, DsDropdownMenuActionsProps, DsDropdownMenuContentProps, DsDropdownMenuHeaderProps, DsDropdownMenuItemGroupContentProps, DsDropdownMenuItemGroupLabelProps, DsDropdownMenuItemGroupProps, DsDropdownMenuItemIndicatorProps, DsDropdownMenuItemProps, DsDropdownMenuLegacy, DsDropdownMenuLegacyProps, DsDropdownMenuOptionLegacy, DsDropdownMenuPositioning, DsDropdownMenuRootProps, DsDropdownMenuSeparatorProps, DsDropdownMenuTriggerItemProps, DsDropdownMenuTriggerProps, DsExpandableTextInput, DsExpandableTextInputProps, DsFileUpload, DsFileUploadProps, DsFormControl, DsFormControlDescriptionProps, DsFormControlProps, DsGrid, DsGridItem, DsGridItemProps, DsGridProps, DsIcon, DsIconProps, DsModal, DsModalColumns, DsModalProps, DsNextStepButton, DsNumberInput, DsNumberInputProps, DsPanel, DsPanelCollapseButtonProps, DsPanelProps, DsPanelVariant, DsPasswordInput, DsPasswordInputProps, DsPopover, DsPopoverProps, DsRadioGroup, DsRadioGroupItemProps, DsRadioGroupLegacy, DsRadioGroupLegacyProps, DsRadioGroupRootProps, DsRadioOptionLegacy, DsSegmentGroup, DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps, DsSegmentGroupSize, DsSelect, DsSelectOption, DsSelectProps, DsSmartTabProps, DsSmartTabs, DsSmartTabsProps, DsSpinner, DsSpinnerProps, DsStatus, DsStatusBadge, DsStatusBadgeProps, DsStep, DsStepContent, DsStepper, DsStepperProps, DsStepperVariant, DsSystemStatus, DsSystemStatusProps, DsTable, DsTableApi, DsTableRowSize, DsTextInput, DsTextInputProps, DsTextarea, DsTextareaProps, DsToastContextType, DsToastProps, DsToastProvider, DsToastProviderProps, DsToggle, DsToggleProps, DsTooltip, DsTooltipProps, DsTypography, DsTypographyProps, DsVerticalTabs, DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps, DualRangeFilterAdapterConfig, DualRangeFilterValue, FatalFileUploadError, FileExtension, FileUpload, FileUploadAdapter, FileUploadError, FileUploadOptions, FileUploadResult, FilterAdapter, FilterAdapterConfig, FilterNavItem, FilterState, IconName, IconSize, IconType, IconVariant, RangeFilterProps, RangeFilterValue, RangeValue, RetryableFileUploadError, RowAction, ScrollParams, SecondaryRowAction, SelectSize, SemanticVariant, SpinnerSize, StatusBadgeSize, SystemStatus, TextInputSize, ToastVariant, ToggleSize, UseFileUploadReturn, UseTableFiltersResult, alertBannerVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDualRangeFilterAdapter, createFilterAdapter, iconSizes, iconVariants, spinnerSizes, systemStatuses, textInputSizes, useFileUpload, useTableFilters, useToaster };
+export { AcceptedFileType, Action, AlertBannerVariant, AnyAdapter, CheckboxFilterAdapterConfig, CheckboxFilterItem, CheckboxFilterProps, ChipItem, ChipSize, Color, ColumnFilterState, ControlStatus, DsAlertBanner, DsAlertBannerProps, DsAvatar, DsAvatarGroup, DsAvatarGroupProps, DsAvatarProps, DsAvatarSize, DsAvatarType, DsBreadcrumb, DsBreadcrumbItem, DsBreadcrumbProps, DsButton, DsButtonUnifiedProps, DsCheckbox, DsCheckboxProps, DsChip, DsChipGroup, DsChipGroupProps, DsChipProps, DsConfirmation, DsConfirmationProps, DsDataTableProps, DsDateInput, DsDateInputProps, DsDialog, DsDialogProps, DsDivider, DsDividerProps, DsDrawer, DsDrawerColumns, DsDrawerPosition, DsDrawerProps, DsDropdownMenu, DsDropdownMenuActionsProps, DsDropdownMenuContentProps, DsDropdownMenuHeaderProps, DsDropdownMenuItemGroupContentProps, DsDropdownMenuItemGroupLabelProps, DsDropdownMenuItemGroupProps, DsDropdownMenuItemIndicatorProps, DsDropdownMenuItemProps, DsDropdownMenuLegacy, DsDropdownMenuLegacyProps, DsDropdownMenuOptionLegacy, DsDropdownMenuPositioning, DsDropdownMenuRootProps, DsDropdownMenuSeparatorProps, DsDropdownMenuTriggerItemProps, DsDropdownMenuTriggerProps, DsExpandableTextInput, DsExpandableTextInputProps, DsFileUpload, DsFileUploadProps, DsFormControl, DsFormControlDescriptionProps, DsFormControlProps, DsGrid, DsGridItem, DsGridItemProps, DsGridProps, DsIcon, DsIconProps, DsLoader, DsLoaderProps, DsModal, DsModalColumns, DsModalProps, DsNextStepButton, DsNumberInput, DsNumberInputProps, DsPanel, DsPanelCollapseButtonProps, DsPanelProps, DsPanelVariant, DsPasswordInput, DsPasswordInputProps, DsPopover, DsPopoverProps, DsRadioGroup, DsRadioGroupItemProps, DsRadioGroupLegacy, DsRadioGroupLegacyProps, DsRadioGroupRootProps, DsRadioOptionLegacy, DsSegmentGroup, DsSegmentGroupItemProps, DsSegmentGroupItemTextProps, DsSegmentGroupRootProps, DsSegmentGroupSize, DsSelect, DsSelectOption, DsSelectProps, _default as DsSkeleton, DsSkeletonBaseProps, DsSkeletonCircle, DsSkeletonCircleProps, DsSkeletonRect, DsSkeletonRectProps, DsSkeletonText, DsSkeletonTextProps, DsSmartTabProps, DsSmartTabs, DsSmartTabsProps, DsSpinner, DsSpinnerProps, DsStatus, DsStatusBadge, DsStatusBadgeProps, DsStep, DsStepContent, DsStepper, DsStepperProps, DsStepperVariant, DsSystemStatus, DsSystemStatusProps, DsTable, DsTableApi, DsTableRowSize, DsTabs, DsTabsContentProps, DsTabsListProps, DsTabsMenuActionItem, DsTabsOrientation, DsTabsProps, DsTabsSize, DsTabsTabProps, DsTag, DsTagFilter, DsTagFilterProps, DsTagProps, DsTextInput, DsTextInputProps, DsTextarea, DsTextareaProps, DsToastContextType, DsToastProps, DsToastProvider, DsToastProviderProps, DsToggle, DsToggleProps, DsTooltip, DsTooltipProps, DsTypography, DsTypographyProps, DsVerticalTabs, DsVerticalTabsContentProps, DsVerticalTabsListProps, DsVerticalTabsRootProps, DsVerticalTabsTabProps, DualRangeFilterAdapterConfig, DualRangeFilterValue, FatalFileUploadError, FileExtension, FileUpload, FileUploadAdapter, FileUploadError, FileUploadOptions, FileUploadResult, FilterAdapter, FilterAdapterConfig, FilterNavItem, FilterState, IconName, IconSize, IconType, IconVariant, LoaderVariant, RangeFilterProps, RangeFilterValue, RangeValue, RetryableFileUploadError, RowAction, ScrollParams, SecondaryRowAction, SelectSize, SemanticVariant, SkeletonColorVariant, SkeletonRadiusVariant, SpinnerSize, StatusBadgeSize, SystemStatus, TagFilterItem, TagSize, TagVariant, TextInputSize, ToastVariant, ToggleSize, UseFileUploadReturn, UseTableFiltersResult, alertBannerVariants, colors, controlStatuses, createCheckboxFilterAdapter, createDualRangeFilterAdapter, createFilterAdapter, iconSizes, iconVariants, loaderVariants, skeletonColorVariants, skeletonRadiusVariants, spinnerSizes, systemStatuses, textInputSizes, useFileUpload, useTableFilters, useToaster };