@drivenets/design-system 0.4.0 → 0.5.0

package/dist/components/ds-card/ds-card.js

@@ -0,0 +1,262 @@
+import ds_card_module_default from "./ds-card.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/ds-card/ds-card.tsx
+/**
+* Card root component - container with optional selectable behavior.
+* Use composition with DsCard.Header, DsCard.Body, DsCard.Footer for full flexibility.
+*/
+const Root = (t0) => {
+	const $ = c(33);
+	let children;
+	let className;
+	let onClick;
+	let onKeyDown;
+	let ref;
+	let rest;
+	let style;
+	let t1;
+	let t2;
+	let t3;
+	let t4;
+	let t5;
+	if ($[0] !== t0) {
+		({ref, size: t1, selectable: t2, selected: t3, highlightSelected: t4, disabled: t5, className, style, children, onClick, onKeyDown, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = onClick;
+		$[4] = onKeyDown;
+		$[5] = ref;
+		$[6] = rest;
+		$[7] = style;
+		$[8] = t1;
+		$[9] = t2;
+		$[10] = t3;
+		$[11] = t4;
+		$[12] = t5;
+	} else {
+		children = $[1];
+		className = $[2];
+		onClick = $[3];
+		onKeyDown = $[4];
+		ref = $[5];
+		rest = $[6];
+		style = $[7];
+		t1 = $[8];
+		t2 = $[9];
+		t3 = $[10];
+		t4 = $[11];
+		t5 = $[12];
+	}
+	const size = t1 === void 0 ? "medium" : t1;
+	const selectable = t2 === void 0 ? false : t2;
+	const selected = t3 === void 0 ? false : t3;
+	const highlightSelected = t4 === void 0 ? false : t4;
+	const disabled = t5 === void 0 ? false : t5;
+	let t6;
+	if ($[13] !== disabled || $[14] !== selectable || $[15] !== selected) {
+		t6 = selectable ? {
+			role: "button",
+			tabIndex: disabled ? -1 : 0,
+			"aria-pressed": selected,
+			"aria-disabled": disabled || void 0
+		} : {};
+		$[13] = disabled;
+		$[14] = selectable;
+		$[15] = selected;
+		$[16] = t6;
+	} else t6 = $[16];
+	const interactiveProps = t6;
+	const t7 = disabled ? void 0 : onClick;
+	const t8 = disabled ? void 0 : onKeyDown;
+	const t9 = selectable || void 0;
+	const t10 = selected || void 0;
+	const t11 = disabled || void 0;
+	const t12 = selected && highlightSelected || void 0;
+	let t13;
+	if ($[17] !== className) {
+		t13 = classNames(ds_card_module_default.root, className);
+		$[17] = className;
+		$[18] = t13;
+	} else t13 = $[18];
+	let t14;
+	if ($[19] !== children || $[20] !== interactiveProps || $[21] !== ref || $[22] !== rest || $[23] !== size || $[24] !== style || $[25] !== t10 || $[26] !== t11 || $[27] !== t12 || $[28] !== t13 || $[29] !== t7 || $[30] !== t8 || $[31] !== t9) {
+		t14 = /* @__PURE__ */ jsx("div", {
+			ref,
+			...rest,
+			...interactiveProps,
+			onClick: t7,
+			onKeyDown: t8,
+			"data-size": size,
+			"data-selectable": t9,
+			"data-selected": t10,
+			"data-disabled": t11,
+			"data-highlight": t12,
+			className: t13,
+			style,
+			children
+		});
+		$[19] = children;
+		$[20] = interactiveProps;
+		$[21] = ref;
+		$[22] = rest;
+		$[23] = size;
+		$[24] = style;
+		$[25] = t10;
+		$[26] = t11;
+		$[27] = t12;
+		$[28] = t13;
+		$[29] = t7;
+		$[30] = t8;
+		$[31] = t9;
+		$[32] = t14;
+	} else t14 = $[32];
+	return t14;
+};
+/**
+* Card header - contains title and extra content.
+* Use with DsCard.Title and DsCard.Extra for standard layout,
+* or provide custom children for full flexibility.
+*/
+const Header = (t0) => {
+	const $ = c(12);
+	let children;
+	let className;
+	let ref;
+	let rest;
+	if ($[0] !== t0) {
+		({className, children, ref, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = ref;
+		$[4] = rest;
+	} else {
+		children = $[1];
+		className = $[2];
+		ref = $[3];
+		rest = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = classNames(ds_card_module_default.header, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== ref || $[9] !== rest || $[10] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t1,
+			...rest,
+			children
+		});
+		$[7] = children;
+		$[8] = ref;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+/**
+* Card body - main content area.
+*/
+const Body = (t0) => {
+	const $ = c(12);
+	let children;
+	let className;
+	let ref;
+	let rest;
+	if ($[0] !== t0) {
+		({className, children, ref, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = ref;
+		$[4] = rest;
+	} else {
+		children = $[1];
+		className = $[2];
+		ref = $[3];
+		rest = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = classNames(ds_card_module_default.body, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== ref || $[9] !== rest || $[10] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t1,
+			...rest,
+			children
+		});
+		$[7] = children;
+		$[8] = ref;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+/**
+* Card footer - bottom section for actions or additional info.
+*/
+const Footer = (t0) => {
+	const $ = c(12);
+	let children;
+	let className;
+	let ref;
+	let rest;
+	if ($[0] !== t0) {
+		({className, children, ref, ...rest} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = ref;
+		$[4] = rest;
+	} else {
+		children = $[1];
+		className = $[2];
+		ref = $[3];
+		rest = $[4];
+	}
+	let t1;
+	if ($[5] !== className) {
+		t1 = classNames(ds_card_module_default.footer, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[7] !== children || $[8] !== ref || $[9] !== rest || $[10] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			ref,
+			className: t1,
+			...rest,
+			children
+		});
+		$[7] = children;
+		$[8] = ref;
+		$[9] = rest;
+		$[10] = t1;
+		$[11] = t2;
+	} else t2 = $[11];
+	return t2;
+};
+const DsCard = {
+	Root,
+	Header,
+	Body,
+	Footer
+};
+
+//#endregion
+export { DsCard };
+//# sourceMappingURL=ds-card.js.map

package/dist/components/ds-card/ds-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-card.js","names":["classNames","styles","DsCardRootProps","DsCardHeaderProps","DsCardBodyProps","DsCardFooterProps","Root","t0","$","_c","children","className","onClick","onKeyDown","ref","rest","style","t1","t2","t3","t4","t5","size","selectable","selected","highlightSelected","disabled","undefined","t6","role","const","tabIndex","interactiveProps","t7","t8","t9","t10","t11","t12","t13","root","t14","Header","header","Body","body","Footer","footer","DsCard"],"sources":["../../../src/components/ds-card/ds-card.tsx"],"sourcesContent":["import classNames from 'classnames';\n\nimport styles from './ds-card.module.scss';\nimport type { DsCardRootProps, DsCardHeaderProps, DsCardBodyProps, DsCardFooterProps } from './ds-card.types';\n\n/**\n * Card root component - container with optional selectable behavior.\n * Use composition with DsCard.Header, DsCard.Body, DsCard.Footer for full flexibility.\n */\nconst Root = ({\n\tref,\n\tsize = 'medium',\n\tselectable = false,\n\tselected = false,\n\thighlightSelected = false,\n\tdisabled = false,\n\tclassName,\n\tstyle,\n\tchildren,\n\tonClick,\n\tonKeyDown,\n\t...rest\n}: DsCardRootProps) => {\n\tconst interactiveProps = selectable\n\t\t? {\n\t\t\t\trole: 'button' as const,\n\t\t\t\ttabIndex: disabled ? -1 : 0,\n\t\t\t\t'aria-pressed': selected,\n\t\t\t\t'aria-disabled': disabled || undefined,\n\t\t\t}\n\t\t: {};\n\n\treturn (\n\t\t<div\n\t\t\tref={ref}\n\t\t\t{...rest}\n\t\t\t{...interactiveProps}\n\t\t\tonClick={disabled ? undefined : onClick}\n\t\t\tonKeyDown={disabled ? undefined : onKeyDown}\n\t\t\tdata-size={size}\n\t\t\tdata-selectable={selectable || undefined}\n\t\t\tdata-selected={selected || undefined}\n\t\t\tdata-disabled={disabled || undefined}\n\t\t\tdata-highlight={(selected && highlightSelected) || undefined}\n\t\t\tclassName={classNames(styles.root, className)}\n\t\t\tstyle={style}\n\t\t>\n\t\t\t{children}\n\t\t</div>\n\t);\n};\n\n/**\n * Card header - contains title and extra content.\n * Use with DsCard.Title and DsCard.Extra for standard layout,\n * or provide custom children for full flexibility.\n */\nconst Header = ({ className, children, ref, ...rest }: DsCardHeaderProps) => (\n\t<div ref={ref} className={classNames(styles.header, className)} {...rest}>\n\t\t{children}\n\t</div>\n);\n\n/**\n * Card body - main content area.\n */\nconst Body = ({ className, children, ref, ...rest }: DsCardBodyProps) => (\n\t<div ref={ref} className={classNames(styles.body, className)} {...rest}>\n\t\t{children}\n\t</div>\n);\n\n/**\n * Card footer - bottom section for actions or additional info.\n */\nconst Footer = ({ className, children, ref, ...rest }: DsCardFooterProps) => (\n\t<div ref={ref} className={classNames(styles.footer, className)} {...rest}>\n\t\t{children}\n\t</div>\n);\n\nexport const DsCard = {\n\tRoot,\n\tHeader,\n\tBody,\n\tFooter,\n};\n"],"mappings":"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"}

package/dist/components/ds-card/ds-card.module.cjs

@@ -0,0 +1,11 @@
+
+//#region src/components/ds-card/ds-card.module.scss
+var ds_card_module_default = {
+	"root": "_root_gpxo3_1",
+	"header": "_header_gpxo3_1",
+	"body": "_body_gpxo3_1",
+	"footer": "_footer_gpxo3_1"
+};
+
+//#endregion
+exports.default = ds_card_module_default;

package/dist/components/ds-card/ds-card.module.js

@@ -0,0 +1,11 @@
+//#region src/components/ds-card/ds-card.module.scss
+var ds_card_module_default = {
+	"root": "_root_gpxo3_1",
+	"header": "_header_gpxo3_1",
+	"body": "_body_gpxo3_1",
+	"footer": "_footer_gpxo3_1"
+};
+
+//#endregion
+export { ds_card_module_default as default };
+//# sourceMappingURL=ds-card.module.js.map

package/dist/components/ds-card/ds-card.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-card.module.js","names":[],"sources":["../../../src/components/ds-card/ds-card.module.scss"],"sourcesContent":["$border-radius: 8px;\n$min-width-small: 224px;\n$min-width-medium: 264px;\n$min-width-large: 368px;\n$transition-duration: 0.2s;\n\n.root {\n\tposition: relative;\n\tdisplay: flex;\n\tflex-direction: column;\n\tbackground: var(--color-background);\n\tborder: 1px solid var(--color-border-contrast);\n\toverflow: hidden;\n\tbox-sizing: border-box;\n\tborder-radius: $border-radius;\n}\n\n.root[data-disabled] {\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tinset: 0;\n\t\t// TODO: remove once we import all the tokens from figma\n\t\tbackground: rgba(255, 255, 255, 0.6);\n\t\tpointer-events: none;\n\t\tborder-radius: inherit;\n\t}\n}\n\n.root[data-size='small'] {\n\tmin-width: $min-width-small;\n\n\t.header,\n\t.body,\n\t.footer {\n\t\tpadding: var(--spacing-xs) var(--spacing-sm);\n\t}\n}\n\n.root[data-size='medium'] {\n\tmin-width: $min-width-medium;\n\n\t.header,\n\t.body,\n\t.footer {\n\t\tpadding: var(--spacing-xs) var(--spacing-standard);\n\t}\n}\n\n.root[data-size='large'] {\n\tmin-width: $min-width-large;\n\n\t.header,\n\t.body,\n\t.footer {\n\t\tpadding: var(--spacing-xs) var(--spacing-xl);\n\t}\n}\n\n.root[data-selectable] {\n\tcursor: pointer;\n\ttransition:\n\t\tborder-color $transition-duration ease-in-out,\n\t\tbox-shadow $transition-duration ease-in-out,\n\t\tbackground-color $transition-duration ease-in-out;\n\n\t&:focus {\n\t\toutline: none;\n\t}\n\n\t&:hover:not([data-disabled]):not([data-selected]) {\n\t\tborder-color: var(--color-border-action-secondary);\n\t}\n\n\t&:focus-visible:not([data-selected]),\n\t&[data-focus-visible]:not([data-selected]) {\n\t\tborder-color: var(--color-border-action-secondary);\n\t\tbox-shadow: inset 0 0 0 1px var(--color-border-action-secondary);\n\t\toutline: none;\n\t}\n\n\t&:focus-visible[data-selected],\n\t&[data-focus-visible][data-selected] {\n\t\toutline: none;\n\t}\n\n\t&[data-disabled] {\n\t\tcursor: not-allowed;\n\t\tborder-color: var(--color-border-disabled);\n\t}\n}\n\n.root[data-selected] {\n\tborder-color: var(--color-border-action-primary);\n\n\t&:hover:not([data-disabled]),\n\t&:focus-visible,\n\t&[data-focus-visible] {\n\t\tbox-shadow: inset 0 0 0 1px var(--color-border-action-primary);\n\t}\n\n\t&[data-highlight] {\n\t\tbackground: var(--color-background-selected-weak);\n\t}\n}\n\n.header {\n\tdisplay: flex;\n\talign-items: center;\n}\n\n.body {\n\tflex: 1;\n}\n\n.footer {\n\tdisplay: flex;\n\talign-items: center;\n}\n"],"mappings":""}

package/dist/components/ds-card/ds-card.types.cjs

@@ -0,0 +1,10 @@
+
+//#region src/components/ds-card/ds-card.types.ts
+const cardSizes = [
+	"small",
+	"medium",
+	"large"
+];
+
+//#endregion
+exports.cardSizes = cardSizes;

package/dist/components/ds-card/ds-card.types.d.cts

@@ -0,0 +1,65 @@
+import { CSSProperties, HTMLAttributes, ReactNode, Ref } from "react";
+
+//#region src/components/ds-card/ds-card.types.d.ts
+declare const cardSizes: readonly ["small", "medium", "large"];
+type DsCardSize = (typeof cardSizes)[number];
+/**
+ * Props for the Card root component
+ */
+interface DsCardRootProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Forwarded ref for the card element
+   */
+  ref?: Ref<HTMLDivElement>;
+  /**
+   * Card size variant
+   * @default 'medium'
+   */
+  size?: DsCardSize;
+  /**
+   * Enable selectable/interactive mode. When false, the card is a static display container.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Selected state (controlled). Required when selectable is true.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * When true, shows a highlighted background when selected
+   * @default false
+   */
+  highlightSelected?: boolean;
+  /**
+   * Disabled state - prevents interaction
+   */
+  disabled?: boolean;
+}
+/**
+ * Common props for card slot components
+ */
+interface DsCardSlotProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply
+   */
+  style?: CSSProperties;
+  /**
+   * Slot content
+   */
+  children?: ReactNode;
+  /**
+   * Forwarded ref
+   */
+  ref?: Ref<HTMLDivElement>;
+}
+type DsCardHeaderProps = DsCardSlotProps;
+type DsCardBodyProps = DsCardSlotProps;
+type DsCardFooterProps = DsCardSlotProps;
+//#endregion
+export { DsCardBodyProps, DsCardFooterProps, DsCardHeaderProps, DsCardRootProps, DsCardSize, cardSizes };
+//# sourceMappingURL=ds-card.types.d.cts.map

package/dist/components/ds-card/ds-card.types.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-card.types.d.cts","names":[],"sources":["../../../src/components/ds-card/ds-card.types.ts"],"sourcesContent":[],"mappings":";;;cAEa;KACD,UAAA,WAAqB;AADjC;AACA;AAKA;AAAwD,UAAvC,eAAA,SAAwB,cAAe,CAAA,cAAA,CAAA,CAAA;EAI7C;;;EAJ8B,GAAA,CAAA,EAIlC,GAJkC,CAI9B,cAJ8B,CAAA;EAAc;AAuCvD;;;EAcY,IAAA,CAAA,EA3CJ,UA2CI;EAKD;;;;EAGC,UAAA,CAAA,EAAA,OAAiB;EACjB;AACZ;;;;;;;;;;;;;;;;;UAxBiB,eAAA,SAAwB,eAAe;;;;;;;;UAS/C;;;;aAKG;;;;QAKL,IAAI;;KAGC,iBAAA,GAAoB;KACpB,eAAA,GAAkB;KAClB,iBAAA,GAAoB"}

package/dist/components/ds-card/ds-card.types.d.ts

@@ -0,0 +1,65 @@
+import { CSSProperties, HTMLAttributes, ReactNode, Ref } from "react";
+
+//#region src/components/ds-card/ds-card.types.d.ts
+declare const cardSizes: readonly ["small", "medium", "large"];
+type DsCardSize = (typeof cardSizes)[number];
+/**
+ * Props for the Card root component
+ */
+interface DsCardRootProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Forwarded ref for the card element
+   */
+  ref?: Ref<HTMLDivElement>;
+  /**
+   * Card size variant
+   * @default 'medium'
+   */
+  size?: DsCardSize;
+  /**
+   * Enable selectable/interactive mode. When false, the card is a static display container.
+   * @default false
+   */
+  selectable?: boolean;
+  /**
+   * Selected state (controlled). Required when selectable is true.
+   * @default false
+   */
+  selected?: boolean;
+  /**
+   * When true, shows a highlighted background when selected
+   * @default false
+   */
+  highlightSelected?: boolean;
+  /**
+   * Disabled state - prevents interaction
+   */
+  disabled?: boolean;
+}
+/**
+ * Common props for card slot components
+ */
+interface DsCardSlotProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply
+   */
+  style?: CSSProperties;
+  /**
+   * Slot content
+   */
+  children?: ReactNode;
+  /**
+   * Forwarded ref
+   */
+  ref?: Ref<HTMLDivElement>;
+}
+type DsCardHeaderProps = DsCardSlotProps;
+type DsCardBodyProps = DsCardSlotProps;
+type DsCardFooterProps = DsCardSlotProps;
+//#endregion
+export { DsCardBodyProps, DsCardFooterProps, DsCardHeaderProps, DsCardRootProps, DsCardSize, cardSizes };
+//# sourceMappingURL=ds-card.types.d.ts.map

package/dist/components/ds-card/ds-card.types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-card.types.d.ts","names":[],"sources":["../../../src/components/ds-card/ds-card.types.ts"],"sourcesContent":[],"mappings":";;;cAEa;KACD,UAAA,WAAqB;AADjC;AACA;AAKA;AAAwD,UAAvC,eAAA,SAAwB,cAAe,CAAA,cAAA,CAAA,CAAA;EAI7C;;;EAJ8B,GAAA,CAAA,EAIlC,GAJkC,CAI9B,cAJ8B,CAAA;EAAc;AAuCvD;;;EAcY,IAAA,CAAA,EA3CJ,UA2CI;EAKD;;;;EAGC,UAAA,CAAA,EAAA,OAAiB;EACjB;AACZ;;;;;;;;;;;;;;;;;UAxBiB,eAAA,SAAwB,eAAe;;;;;;;;UAS/C;;;;aAKG;;;;QAKL,IAAI;;KAGC,iBAAA,GAAoB;KACpB,eAAA,GAAkB;KAClB,iBAAA,GAAoB"}

package/dist/components/ds-card/ds-card.types.js

@@ -0,0 +1,10 @@
+//#region src/components/ds-card/ds-card.types.ts
+const cardSizes = [
+	"small",
+	"medium",
+	"large"
+];
+
+//#endregion
+export { cardSizes };
+//# sourceMappingURL=ds-card.types.js.map

package/dist/components/ds-card/ds-card.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-card.types.js","names":["CSSProperties","HTMLAttributes","ReactNode","Ref","cardSizes","const","DsCardSize","DsCardRootProps","HTMLDivElement","ref","size","selectable","selected","highlightSelected","disabled","DsCardSlotProps","className","style","children","DsCardHeaderProps","DsCardBodyProps","DsCardFooterProps"],"sources":["../../../src/components/ds-card/ds-card.types.ts"],"sourcesContent":["import type { CSSProperties, HTMLAttributes, ReactNode, Ref } from 'react';\n\nexport const cardSizes = ['small', 'medium', 'large'] as const;\nexport type DsCardSize = (typeof cardSizes)[number];\n\n/**\n * Props for the Card root component\n */\nexport interface DsCardRootProps extends HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Forwarded ref for the card element\n\t */\n\tref?: Ref<HTMLDivElement>;\n\n\t/**\n\t * Card size variant\n\t * @default 'medium'\n\t */\n\tsize?: DsCardSize;\n\n\t/**\n\t * Enable selectable/interactive mode. When false, the card is a static display container.\n\t * @default false\n\t */\n\tselectable?: boolean;\n\n\t/**\n\t * Selected state (controlled). Required when selectable is true.\n\t * @default false\n\t */\n\tselected?: boolean;\n\n\t/**\n\t * When true, shows a highlighted background when selected\n\t * @default false\n\t */\n\thighlightSelected?: boolean;\n\n\t/**\n\t * Disabled state - prevents interaction\n\t */\n\tdisabled?: boolean;\n}\n\n/**\n * Common props for card slot components\n */\nexport interface DsCardSlotProps extends HTMLAttributes<HTMLDivElement> {\n\t/**\n\t * Additional CSS class names\n\t */\n\tclassName?: string;\n\n\t/**\n\t * Additional styles to apply\n\t */\n\tstyle?: CSSProperties;\n\n\t/**\n\t * Slot content\n\t */\n\tchildren?: ReactNode;\n\n\t/**\n\t * Forwarded ref\n\t */\n\tref?: Ref<HTMLDivElement>;\n}\n\nexport type DsCardHeaderProps = DsCardSlotProps;\nexport type DsCardBodyProps = DsCardSlotProps;\nexport type DsCardFooterProps = DsCardSlotProps;\n"],"mappings":";AAEA,MAAaI,YAAY;CAAC;CAAS;CAAU;CAAQ"}

package/dist/components/ds-card/index.cjs

@@ -0,0 +1,2 @@
+const require_ds_card = require('./ds-card.cjs');
+const require_ds_card_types = require('./ds-card.types.cjs');

package/dist/components/ds-card/index.d.ts

@@ -0,0 +1,2 @@
+import { DsCardBodyProps, DsCardFooterProps, DsCardHeaderProps, DsCardRootProps, DsCardSize, cardSizes } from "./ds-card.types.js";
+import { DsCard } from "./ds-card.js";

package/dist/components/ds-card/index.js

@@ -0,0 +1,2 @@
+import { DsCard } from "./ds-card.js";
+import { cardSizes } from "./ds-card.types.js";

package/dist/components/ds-checkbox/ds-checkbox.cjs

@@ -7,8 +7,8 @@ let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-let __radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
-__radix_ui_react_checkbox = require_rolldown_runtime.__toESM(__radix_ui_react_checkbox);
+let _radix_ui_react_checkbox = require("@radix-ui/react-checkbox");
+_radix_ui_react_checkbox = require_rolldown_runtime.__toESM(_radix_ui_react_checkbox);
 
 //#region src/components/ds-checkbox/ds-checkbox.tsx
 /**
@@ -58,7 +58,7 @@ const DsCheckbox = (t0) => {
 	if ($[11] !== t2) {
 		t3 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: require_ds_checkbox_module.default.checkboxWrapper,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_checkbox.Indicator, {
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_checkbox.Indicator, {
 				className: require_ds_checkbox_module.default.checkboxIndicator,
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, {
 					icon: t2,
@@ -72,7 +72,7 @@ const DsCheckbox = (t0) => {
 	} else t3 = $[12];
 	let t4;
 	if ($[13] !== checkboxId || $[14] !== checked || $[15] !== defaultChecked || $[16] !== onCheckedChange || $[17] !== props || $[18] !== t3) {
-		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_checkbox.Root, {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_checkbox.Root, {
 			className: require_ds_checkbox_module.default.checkboxRoot,
 			id: checkboxId,
 			checked,

package/dist/components/ds-chip-group/ds-chip-group.cjs

@@ -14,9 +14,9 @@ let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
 let react = require("react");
-let __radix_ui_react_dialog = require("@radix-ui/react-dialog");
-__radix_ui_react_dialog = require_rolldown_runtime.__toESM(__radix_ui_react_dialog);
-let __radix_ui_react_visually_hidden = require("@radix-ui/react-visually-hidden");
+let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+_radix_ui_react_dialog = require_rolldown_runtime.__toESM(_radix_ui_react_dialog);
+let _radix_ui_react_visually_hidden = require("@radix-ui/react-visually-hidden");
 
 //#region src/components/ds-chip-group/ds-chip-group.tsx
 /**
@@ -79,10 +79,10 @@ const DsChipGroup = ({ items, label = "Filtered by:", onClearAll, onItemDelete,
 				onClick: onClearAll,
 				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_icon.default, { icon: "close" }), "Clear all"]
 			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_dialog.Root, {
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Root, {
 				open: dialogOpen,
 				onOpenChange: setDialogOpen,
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_visually_hidden.Root, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Title, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_dialog.Content, {
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_visually_hidden.Root, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {}) }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Content, {
 					style: dialogStyle,
 					className: require_ds_chip_group_module.default.dialog,
 					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {

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

@@ -1,5 +1,5 @@
 import { DsConfirmationProps } from "./ds-confirmation.types.cjs";
-import * as react_jsx_runtime4 from "react/jsx-runtime";
+import * as react_jsx_runtime6 from "react/jsx-runtime";
 import * as react0 from "react";
 
 //#region src/components/ds-confirmation/ds-confirmation.d.ts
@@ -8,7 +8,7 @@ import * as react0 from "react";
  * @see {@link ../ds-modal} for the replacement component.
  */
 declare const DsConfirmation: {
-  (props: DsConfirmationProps): react_jsx_runtime4.JSX.Element;
+  (props: DsConfirmationProps): react_jsx_runtime6.JSX.Element;
   Header: ({
     style,
     className,
@@ -17,7 +17,7 @@ declare const DsConfirmation: {
     style?: react0.CSSProperties;
     className?: string;
     children: react0.ReactNode;
-  }) => react_jsx_runtime4.JSX.Element;
+  }) => react_jsx_runtime6.JSX.Element;
   Title: ({
     style,
     className,
@@ -26,14 +26,14 @@ declare const DsConfirmation: {
     style?: react0.CSSProperties;
     className?: string;
     children: react0.ReactNode;
-  }) => react_jsx_runtime4.JSX.Element;
+  }) => react_jsx_runtime6.JSX.Element;
   CloseTrigger: ({
     style,
     className
   }: {
     style?: react0.CSSProperties;
     className?: string;
-  }) => react_jsx_runtime4.JSX.Element;
+  }) => react_jsx_runtime6.JSX.Element;
   Body: ({
     style,
     className,
@@ -42,7 +42,7 @@ declare const DsConfirmation: {
     style?: react0.CSSProperties;
     className?: string;
     children: react0.ReactNode;
-  }) => react_jsx_runtime4.JSX.Element;
+  }) => react_jsx_runtime6.JSX.Element;
   Footer: ({
     style,
     className,
@@ -51,7 +51,7 @@ declare const DsConfirmation: {
     style?: react0.CSSProperties;
     className?: string;
     children: react0.ReactNode;
-  }) => react_jsx_runtime4.JSX.Element;
+  }) => react_jsx_runtime6.JSX.Element;
   Actions: ({
     style,
     className,
@@ -60,7 +60,7 @@ declare const DsConfirmation: {
     style?: react0.CSSProperties;
     className?: string;
     children: react0.ReactNode;
-  }) => react_jsx_runtime4.JSX.Element;
+  }) => react_jsx_runtime6.JSX.Element;
 };
 //#endregion
 export { DsConfirmation };