@drivenets/design-system 0.3.0 → 0.4.0

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

@@ -17,77 +17,76 @@ import { Dialog } from "@ark-ui/react/dialog";
 */
 const DsModal = (t0) => {
 	const $ = c(20);
-	const { open, onOpenChange, columns: t1, style, className, modal: t2, closeOnEscape, closeOnInteractOutside: t3, children } = t0;
+	const { open, columns: t1, dividers: t2, style, className, modal: t3, closeOnEscape, closeOnInteractOutside: t4, children, onOpenChange } = t0;
 	const columns = t1 === void 0 ? 6 : t1;
-	const modal = t2 === void 0 ? true : t2;
-	const closeOnInteractOutside = t3 === void 0 ? false : t3;
-	let t4;
+	const dividers = t2 === void 0 ? false : t2;
+	const modal = t3 === void 0 ? true : t3;
+	const closeOnInteractOutside = t4 === void 0 ? false : t4;
+	let t5;
 	if ($[0] !== onOpenChange) {
-		t4 = (details) => {
+		t5 = (details) => {
 			onOpenChange(details.open);
 		};
 		$[0] = onOpenChange;
-		$[1] = t4;
-	} else t4 = $[1];
-	const handleOpenChange = t4;
-	let t5;
+		$[1] = t5;
+	} else t5 = $[1];
+	const handleOpenChange = t5;
+	let t6;
 	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t5 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: ds_modal_module_default.overlay });
-		$[2] = t5;
-	} else t5 = $[2];
-	const t6 = ds_modal_module_default[`cols-${columns}`];
-	let t7;
-	if ($[3] !== className || $[4] !== t6) {
-		t7 = classNames(ds_modal_module_default.modal, className, t6);
-		$[3] = className;
-		$[4] = t6;
-		$[5] = t7;
-	} else t7 = $[5];
+		t6 = /* @__PURE__ */ jsx(Dialog.Backdrop, { className: ds_modal_module_default.overlay });
+		$[2] = t6;
+	} else t6 = $[2];
+	const t7 = ds_modal_module_default[`cols-${columns}`];
 	let t8;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = classNames(ds_modal_module_default.content);
-		$[6] = t8;
-	} else t8 = $[6];
-	let t9;
-	if ($[7] !== children) {
-		t9 = /* @__PURE__ */ jsx("div", {
-			className: t8,
+	if ($[3] !== className || $[4] !== t7) {
+		t8 = classNames(ds_modal_module_default.modal, className, t7);
+		$[3] = className;
+		$[4] = t7;
+		$[5] = t8;
+	} else t8 = $[5];
+	const t9 = dividers || void 0;
+	let t10;
+	if ($[6] !== children || $[7] !== t9) {
+		t10 = /* @__PURE__ */ jsx("div", {
+			className: ds_modal_module_default.content,
+			"data-dividers": t9,
 			children
 		});
-		$[7] = children;
-		$[8] = t9;
-	} else t9 = $[8];
-	let t10;
-	if ($[9] !== style || $[10] !== t7 || $[11] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(Portal, { children: [t5, /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsx(Dialog.Content, {
+		$[6] = children;
+		$[7] = t9;
+		$[8] = t10;
+	} else t10 = $[8];
+	let t11;
+	if ($[9] !== style || $[10] !== t10 || $[11] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Portal, { children: [t6, /* @__PURE__ */ jsx(Dialog.Positioner, { children: /* @__PURE__ */ jsx(Dialog.Content, {
 			style,
-			className: t7,
-			children: t9
+			className: t8,
+			children: t10
 		}) })] });
 		$[9] = style;
-		$[10] = t7;
-		$[11] = t9;
-		$[12] = t10;
-	} else t10 = $[12];
-	let t11;
-	if ($[13] !== closeOnEscape || $[14] !== closeOnInteractOutside || $[15] !== handleOpenChange || $[16] !== modal || $[17] !== open || $[18] !== t10) {
-		t11 = /* @__PURE__ */ jsx(Dialog.Root, {
+		$[10] = t10;
+		$[11] = t8;
+		$[12] = t11;
+	} else t11 = $[12];
+	let t12;
+	if ($[13] !== closeOnEscape || $[14] !== closeOnInteractOutside || $[15] !== handleOpenChange || $[16] !== modal || $[17] !== open || $[18] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Dialog.Root, {
 			open,
 			onOpenChange: handleOpenChange,
 			modal,
 			closeOnEscape,
 			closeOnInteractOutside,
-			children: t10
+			children: t11
 		});
 		$[13] = closeOnEscape;
 		$[14] = closeOnInteractOutside;
 		$[15] = handleOpenChange;
 		$[16] = modal;
 		$[17] = open;
-		$[18] = t10;
-		$[19] = t11;
-	} else t11 = $[19];
-	return t11;
+		$[18] = t11;
+		$[19] = t12;
+	} else t12 = $[19];
+	return t12;
 };
 const Header = (t0) => {
 	const $ = c(6);

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

@@ -1 +1 @@
-{"version":3,"file":"ds-modal.js","names":["CSSProperties","ReactNode","Dialog","Portal","classNames","DsModalProps","styles","DsIcon","DsTypography","DsModal","t0","$","_c","open","onOpenChange","columns","t1","style","className","modal","t2","closeOnEscape","closeOnInteractOutside","t3","children","undefined","t4","details","handleOpenChange","t5","Symbol","for","overlay","t6","t7","t8","content","t9","t10","t11","Header","header","Title","title","CloseTrigger","Body","body","Footer","footer","Actions","actions"],"sources":["../../../src/components/ds-modal/ds-modal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { Dialog } from '@ark-ui/react/dialog';\nimport { Portal } from '@ark-ui/react/portal';\nimport classNames from 'classnames';\nimport type { DsModalProps } from './ds-modal.types';\nimport styles from './ds-modal.module.scss';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * Composable modal dialog.\n * Supports custom header, footer, and body content with grid-based sizing.\n * Use columns prop to control modal width (1-12 grid columns).\n */\nconst DsModal = ({\n\topen,\n\tonOpenChange,\n\tcolumns = 6,\n\tstyle,\n\tclassName,\n\tmodal = true,\n\tcloseOnEscape,\n\tcloseOnInteractOutside = false,\n\tchildren,\n}: DsModalProps) => {\n\tconst handleOpenChange = (details: { open: boolean }) => {\n\t\tonOpenChange(details.open);\n\t};\n\n\treturn (\n\t\t<Dialog.Root\n\t\t\topen={open}\n\t\t\tonOpenChange={handleOpenChange}\n\t\t\tmodal={modal}\n\t\t\tcloseOnEscape={closeOnEscape}\n\t\t\tcloseOnInteractOutside={closeOnInteractOutside}\n\t\t>\n\t\t\t<Portal>\n\t\t\t\t<Dialog.Backdrop className={styles.overlay} />\n\t\t\t\t<Dialog.Positioner>\n\t\t\t\t\t<Dialog.Content\n\t\t\t\t\t\tstyle={style}\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles.modal,\n\t\t\t\t\t\t\tclassName,\n\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n\t\t\t\t\t\t\tstyles[`cols-${columns}`],\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={classNames(styles.content)}>{children}</div>\n\t\t\t\t\t</Dialog.Content>\n\t\t\t\t</Dialog.Positioner>\n\t\t\t</Portal>\n\t\t</Dialog.Root>\n\t);\n};\n\nconst Header = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.header, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Title = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<Dialog.Title className={classNames(styles.title, className)} style={style} asChild>\n\t\t<DsTypography variant=\"heading3\">{children}</DsTypography>\n\t</Dialog.Title>\n);\n\nconst CloseTrigger = ({ style, className }: { style?: CSSProperties; className?: string }) => (\n\t<Dialog.CloseTrigger style={style} className={className}>\n\t\t<DsIcon icon=\"close\" size=\"small\"></DsIcon>\n\t</Dialog.CloseTrigger>\n);\n\nconst Body = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.body, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Footer = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.footer, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Actions = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.actions, className)}>\n\t\t{children}\n\t</div>\n);\n\nDsModal.Header = Header;\nDsModal.Title = Title;\nDsModal.CloseTrigger = CloseTrigger;\nDsModal.Body = Body;\nDsModal.Footer = Footer;\nDsModal.Actions = Actions;\n\nexport default DsModal;\n"],"mappings":"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"}
+{"version":3,"file":"ds-modal.js","names":["CSSProperties","ReactNode","Dialog","Portal","classNames","DsModalProps","styles","DsIcon","DsTypography","DsModal","t0","$","_c","open","columns","t1","dividers","t2","style","className","modal","t3","closeOnEscape","closeOnInteractOutside","t4","children","onOpenChange","undefined","t5","details","handleOpenChange","t6","Symbol","for","overlay","t7","t8","t9","t10","content","t11","t12","Header","header","Title","title","CloseTrigger","Body","body","Footer","footer","Actions","actions"],"sources":["../../../src/components/ds-modal/ds-modal.tsx"],"sourcesContent":["import type { CSSProperties, ReactNode } from 'react';\nimport { Dialog } from '@ark-ui/react/dialog';\nimport { Portal } from '@ark-ui/react/portal';\nimport classNames from 'classnames';\nimport type { DsModalProps } from './ds-modal.types';\nimport styles from './ds-modal.module.scss';\nimport { DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\n/**\n * Composable modal dialog.\n * Supports custom header, footer, and body content with grid-based sizing.\n * Use columns prop to control modal width (1-12 grid columns).\n */\nconst DsModal = ({\n\topen,\n\tcolumns = 6,\n\tdividers = false,\n\tstyle,\n\tclassName,\n\tmodal = true,\n\tcloseOnEscape,\n\tcloseOnInteractOutside = false,\n\tchildren,\n\tonOpenChange,\n}: DsModalProps) => {\n\tconst handleOpenChange = (details: { open: boolean }) => {\n\t\tonOpenChange(details.open);\n\t};\n\n\treturn (\n\t\t<Dialog.Root\n\t\t\topen={open}\n\t\t\tonOpenChange={handleOpenChange}\n\t\t\tmodal={modal}\n\t\t\tcloseOnEscape={closeOnEscape}\n\t\t\tcloseOnInteractOutside={closeOnInteractOutside}\n\t\t>\n\t\t\t<Portal>\n\t\t\t\t<Dialog.Backdrop className={styles.overlay} />\n\t\t\t\t<Dialog.Positioner>\n\t\t\t\t\t<Dialog.Content\n\t\t\t\t\t\tstyle={style}\n\t\t\t\t\t\tclassName={classNames(\n\t\t\t\t\t\t\tstyles.modal,\n\t\t\t\t\t\t\tclassName,\n\n\t\t\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/restrict-template-expressions\n\t\t\t\t\t\t\tstyles[`cols-${columns}`],\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<div className={styles.content} data-dividers={dividers || undefined}>\n\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</Dialog.Content>\n\t\t\t\t</Dialog.Positioner>\n\t\t\t</Portal>\n\t\t</Dialog.Root>\n\t);\n};\n\nconst Header = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.header, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Title = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<Dialog.Title className={classNames(styles.title, className)} style={style} asChild>\n\t\t<DsTypography variant=\"heading3\">{children}</DsTypography>\n\t</Dialog.Title>\n);\n\nconst CloseTrigger = ({ style, className }: { style?: CSSProperties; className?: string }) => (\n\t<Dialog.CloseTrigger style={style} className={className}>\n\t\t<DsIcon icon=\"close\" size=\"small\"></DsIcon>\n\t</Dialog.CloseTrigger>\n);\n\nconst Body = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.body, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Footer = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.footer, className)}>\n\t\t{children}\n\t</div>\n);\n\nconst Actions = ({\n\tstyle,\n\tclassName,\n\tchildren,\n}: {\n\tstyle?: CSSProperties;\n\tclassName?: string;\n\tchildren: ReactNode;\n}) => (\n\t<div style={style} className={classNames(styles.actions, className)}>\n\t\t{children}\n\t</div>\n);\n\nDsModal.Header = Header;\nDsModal.Title = Title;\nDsModal.CloseTrigger = CloseTrigger;\nDsModal.Body = Body;\nDsModal.Footer = Footer;\nDsModal.Actions = Actions;\n\nexport default DsModal;\n"],"mappings":"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"}

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

@@ -1,30 +1,30 @@
 
 //#region src/components/ds-modal/ds-modal.module.scss
 var ds_modal_module_default = {
-	"overlay": "_overlay_rw1e4_1",
-	"fade-in-overlay": "_fade-in-overlay_rw1e4_1",
-	"fade-out-overlay": "_fade-out-overlay_rw1e4_1",
-	"modal": "_modal_rw1e4_1",
-	"scale-in-modal": "_scale-in-modal_rw1e4_1",
-	"scale-out-modal": "_scale-out-modal_rw1e4_1",
-	"content": "_content_rw1e4_1",
-	"header": "_header_rw1e4_1",
-	"footer": "_footer_rw1e4_1",
-	"body": "_body_rw1e4_1",
-	"title": "_title_rw1e4_1",
-	"actions": "_actions_rw1e4_1",
-	"cols-1": "_cols-1_rw1e4_1",
-	"cols-2": "_cols-2_rw1e4_1",
-	"cols-3": "_cols-3_rw1e4_1",
-	"cols-4": "_cols-4_rw1e4_1",
-	"cols-5": "_cols-5_rw1e4_1",
-	"cols-6": "_cols-6_rw1e4_1",
-	"cols-7": "_cols-7_rw1e4_1",
-	"cols-8": "_cols-8_rw1e4_1",
-	"cols-9": "_cols-9_rw1e4_1",
-	"cols-10": "_cols-10_rw1e4_1",
-	"cols-11": "_cols-11_rw1e4_1",
-	"cols-12": "_cols-12_rw1e4_1"
+	"overlay": "_overlay_5aciv_1",
+	"fade-in-overlay": "_fade-in-overlay_5aciv_1",
+	"fade-out-overlay": "_fade-out-overlay_5aciv_1",
+	"modal": "_modal_5aciv_1",
+	"scale-in-modal": "_scale-in-modal_5aciv_1",
+	"scale-out-modal": "_scale-out-modal_5aciv_1",
+	"content": "_content_5aciv_1",
+	"header": "_header_5aciv_1",
+	"footer": "_footer_5aciv_1",
+	"body": "_body_5aciv_1",
+	"title": "_title_5aciv_1",
+	"actions": "_actions_5aciv_1",
+	"cols-1": "_cols-1_5aciv_1",
+	"cols-2": "_cols-2_5aciv_1",
+	"cols-3": "_cols-3_5aciv_1",
+	"cols-4": "_cols-4_5aciv_1",
+	"cols-5": "_cols-5_5aciv_1",
+	"cols-6": "_cols-6_5aciv_1",
+	"cols-7": "_cols-7_5aciv_1",
+	"cols-8": "_cols-8_5aciv_1",
+	"cols-9": "_cols-9_5aciv_1",
+	"cols-10": "_cols-10_5aciv_1",
+	"cols-11": "_cols-11_5aciv_1",
+	"cols-12": "_cols-12_5aciv_1"
 };
 
 //#endregion

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

@@ -1,29 +1,29 @@
 //#region src/components/ds-modal/ds-modal.module.scss
 var ds_modal_module_default = {
-	"overlay": "_overlay_rw1e4_1",
-	"fade-in-overlay": "_fade-in-overlay_rw1e4_1",
-	"fade-out-overlay": "_fade-out-overlay_rw1e4_1",
-	"modal": "_modal_rw1e4_1",
-	"scale-in-modal": "_scale-in-modal_rw1e4_1",
-	"scale-out-modal": "_scale-out-modal_rw1e4_1",
-	"content": "_content_rw1e4_1",
-	"header": "_header_rw1e4_1",
-	"footer": "_footer_rw1e4_1",
-	"body": "_body_rw1e4_1",
-	"title": "_title_rw1e4_1",
-	"actions": "_actions_rw1e4_1",
-	"cols-1": "_cols-1_rw1e4_1",
-	"cols-2": "_cols-2_rw1e4_1",
-	"cols-3": "_cols-3_rw1e4_1",
-	"cols-4": "_cols-4_rw1e4_1",
-	"cols-5": "_cols-5_rw1e4_1",
-	"cols-6": "_cols-6_rw1e4_1",
-	"cols-7": "_cols-7_rw1e4_1",
-	"cols-8": "_cols-8_rw1e4_1",
-	"cols-9": "_cols-9_rw1e4_1",
-	"cols-10": "_cols-10_rw1e4_1",
-	"cols-11": "_cols-11_rw1e4_1",
-	"cols-12": "_cols-12_rw1e4_1"
+	"overlay": "_overlay_5aciv_1",
+	"fade-in-overlay": "_fade-in-overlay_5aciv_1",
+	"fade-out-overlay": "_fade-out-overlay_5aciv_1",
+	"modal": "_modal_5aciv_1",
+	"scale-in-modal": "_scale-in-modal_5aciv_1",
+	"scale-out-modal": "_scale-out-modal_5aciv_1",
+	"content": "_content_5aciv_1",
+	"header": "_header_5aciv_1",
+	"footer": "_footer_5aciv_1",
+	"body": "_body_5aciv_1",
+	"title": "_title_5aciv_1",
+	"actions": "_actions_5aciv_1",
+	"cols-1": "_cols-1_5aciv_1",
+	"cols-2": "_cols-2_5aciv_1",
+	"cols-3": "_cols-3_5aciv_1",
+	"cols-4": "_cols-4_5aciv_1",
+	"cols-5": "_cols-5_5aciv_1",
+	"cols-6": "_cols-6_5aciv_1",
+	"cols-7": "_cols-7_5aciv_1",
+	"cols-8": "_cols-8_5aciv_1",
+	"cols-9": "_cols-9_5aciv_1",
+	"cols-10": "_cols-10_5aciv_1",
+	"cols-11": "_cols-11_5aciv_1",
+	"cols-12": "_cols-12_5aciv_1"
 };
 
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"ds-modal.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/shared/_modal.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-modal/ds-modal.module.scss"],"sourcesContent":["@use '../../styles/shared/modal' as shared;\n\n$pad-x: 24px;\n$pad-y: 16px;\n$max-width: 90vw;\n$max-height: 90vh;\n\n.overlay {\n\t@include shared.overlay-base;\n}\n\n.modal {\n\t@include shared.modal-base;\n}\n\n.content {\n\t@include shared.content-base;\n\theight: 100%;\n}\n\n.header,\n.footer,\n.body {\n\tpadding: $pad-y $pad-x;\n}\n\n.header {\n\t@include shared.header-base;\n}\n\n.footer {\n\t@include shared.footer-base;\n\tdisplay: flex;\n}\n\n.title {\n\t@include shared.title-base;\n}\n\n.body {\n\t@include shared.body-base;\n}\n\n.actions {\n\t@include shared.actions-base;\n\tmargin-left: auto;\n}\n\n// width classes derived from DS grid\n.modal {\n\tinline-size: min(var(--col-span-6), $max-width);\n}\n\n.modal.cols-1 {\n\tinline-size: min(var(--col-span-1), $max-width);\n}\n\n.modal.cols-2 {\n\tinline-size: min(var(--col-span-2), $max-width);\n}\n\n.modal.cols-3 {\n\tinline-size: min(var(--col-span-3), $max-width);\n}\n\n.modal.cols-4 {\n\tinline-size: min(var(--col-span-4), $max-width);\n}\n\n.modal.cols-5 {\n\tinline-size: min(var(--col-span-5), $max-width);\n}\n\n.modal.cols-6 {\n\tinline-size: min(var(--col-span-6), $max-width);\n}\n\n.modal.cols-7 {\n\tinline-size: min(var(--col-span-7), $max-width);\n}\n\n.modal.cols-8 {\n\tinline-size: min(var(--col-span-8), $max-width);\n}\n\n.modal.cols-9 {\n\tinline-size: min(var(--col-span-9), $max-width);\n}\n\n.modal.cols-10 {\n\tinline-size: min(var(--col-span-10), $max-width);\n}\n\n.modal.cols-11 {\n\tinline-size: min(var(--col-span-11), $max-width);\n}\n\n.modal.cols-12 {\n\tinline-size: min(var(--col-span-12), $max-width);\n}\n"],"mappings":""}
+{"version":3,"file":"ds-modal.module.js","names":[],"sources":["../../../src/components/ds-modal/ds-modal.module.scss"],"sourcesContent":["$pad-x: var(--spacing-lg);\n$pad-y: var(--spacing-standard);\n$max-width: 90vw;\n$border-size: 1px;\n$border: $border-size solid var(--color-border-secondary);\n\n.overlay {\n\tposition: fixed;\n\tinset: 0;\n\tbackground: var(--color-background-brand);\n\topacity: 0.4;\n\tz-index: 1199;\n\n\t&[data-state='open'] {\n\t\tanimation: fade-in-overlay 0.2s ease-in-out both;\n\t}\n\n\t&[data-state='closed'] {\n\t\tanimation: fade-out-overlay 0.2s 0.1s ease-in-out both;\n\t}\n}\n\n@keyframes fade-in-overlay {\n\t0% {\n\t\topacity: 0;\n\t}\n\n\t100% {\n\t\topacity: 0.4;\n\t}\n}\n\n@keyframes fade-out-overlay {\n\t0% {\n\t\topacity: 0.4;\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t}\n}\n\n.modal {\n\tposition: fixed;\n\tinset: 50% auto auto 50%;\n\tbackground: var(--color-background);\n\tborder-radius: 4px;\n\tbox-shadow: 0 5px 15px 0 rgba(0, 0, 0, 0.15);\n\tz-index: 1200;\n\toverflow: hidden;\n\tinline-size: min(var(--col-span-6), $max-width);\n\n\t&[data-state='open'] {\n\t\tanimation: scale-in-modal 0.2s 0.1s ease-in-out both;\n\t}\n\n\t&[data-state='closed'] {\n\t\tanimation: scale-out-modal 0.2s ease-in-out both;\n\t}\n}\n\n@keyframes scale-in-modal {\n\t0% {\n\t\topacity: 0;\n\t\ttransform: translate(-50%, -50%) scale(0.9);\n\t}\n\n\t100% {\n\t\topacity: 1;\n\t\ttransform: translate(-50%, -50%) scale(1);\n\t}\n}\n\n@keyframes scale-out-modal {\n\t0% {\n\t\topacity: 1;\n\t\ttransform: translate(-50%, -50%) scale(1);\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t\ttransform: translate(-50%, -50%) scale(0.9);\n\t}\n}\n\n.content {\n\tdisplay: flex;\n\tflex-direction: column;\n\theight: 100%;\n}\n\n.header,\n.footer,\n.body {\n\tpadding: $pad-y $pad-x;\n}\n\n.header {\n\tdisplay: flex;\n\talign-items: center;\n\tgap: var(--spacing-xs);\n\tposition: relative;\n\tbackground: inherit;\n\tflex-shrink: 0;\n\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\tbottom: 0;\n\t\tleft: $pad-x;\n\t\tright: $pad-x;\n\t\theight: $border-size;\n\t\tbackground: var(--color-border-secondary);\n\t}\n}\n\n.footer {\n\tdisplay: flex;\n\tbackground: inherit;\n\tflex-shrink: 0;\n}\n\n.title {\n\tcolor: var(--color-font-main);\n\tmargin: 0;\n\tflex: 1;\n}\n\n.body {\n\tflex: 1;\n\toverflow-y: auto;\n\toverflow-x: hidden;\n\tmin-height: 0;\n}\n\n.actions {\n\tdisplay: flex;\n\tgap: var(--spacing-xs);\n\tjustify-content: flex-end;\n\tmargin-left: auto;\n}\n\n// Dividers mode: full-width borders on header and footer\n.content[data-dividers] {\n\t.header {\n\t\tborder-bottom: $border;\n\n\t\t&::after {\n\t\t\tdisplay: none;\n\t\t}\n\t}\n\n\t.footer {\n\t\tborder-top: $border;\n\t}\n}\n\n// Width classes derived from DS grid\n@for $i from 1 through 12 {\n\t.modal.cols-#{$i} {\n\t\tinline-size: min(var(--col-span-#{$i}), $max-width);\n\t}\n}\n"],"mappings":""}

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

@@ -15,16 +15,16 @@ interface DsModalProps extends Pick<UseDialogProps, 'modal' | 'closeOnEscape' |
    * Whether the modal is open
    */
   open: boolean;
-  /**
-   * Callback when modal open state changes
-   * @param open - whether the modal is open
-   */
-  onOpenChange: (open: boolean) => void;
   /**
    * Number of grid columns for modal width
    * @default 6
    */
   columns?: DsModalColumns;
+  /**
+   * Show full-width dividers between header, body, and footer sections
+   * @default false
+   */
+  dividers?: boolean;
   /**
    * Optional inline styles to apply to the component
    */
@@ -37,6 +37,11 @@ interface DsModalProps extends Pick<UseDialogProps, 'modal' | 'closeOnEscape' |
    * Modal body content
    */
   children: ReactNode;
+  /**
+   * Callback when modal open state changes
+   * @param open - whether the modal is open
+   */
+  onOpenChange: (open: boolean) => void;
 }
 //#endregion
 export { DsModalColumns, DsModalProps };

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

@@ -1 +1 @@
-{"version":3,"file":"ds-modal.types.d.cts","names":[],"sources":["../../../src/components/ds-modal/ds-modal.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAMA;AAKiB,KALL,cAAA,GAKkB,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;;;AA+BnB,UA/BM,YAAA,SAAqB,IA+B3B,CA9BV,cA8BU,EAAA,OAAA,GAAA,eAAA,GAAA,wBAAA,CAAA,CAAA;EA/B2B;;;;;;;;;;;;;YAkB3B;;;;UAIF;;;;;;;;YASE"}
+{"version":3,"file":"ds-modal.types.d.cts","names":[],"sources":["../../../src/components/ds-modal/ds-modal.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAMA;AAKiB,KALL,cAAA,GAKkB,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;;;AAkCnB,UAlCM,YAAA,SAAqB,IAkC3B,CAjCV,cAiCU,EAAA,OAAA,GAAA,eAAA,GAAA,wBAAA,CAAA,CAAA;EAlC2B;;;;;;;;YAa3B;;;;;;;;;UAWF;;;;;;;;YAUE"}

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

@@ -15,16 +15,16 @@ interface DsModalProps extends Pick<UseDialogProps, 'modal' | 'closeOnEscape' |
    * Whether the modal is open
    */
   open: boolean;
-  /**
-   * Callback when modal open state changes
-   * @param open - whether the modal is open
-   */
-  onOpenChange: (open: boolean) => void;
   /**
    * Number of grid columns for modal width
    * @default 6
    */
   columns?: DsModalColumns;
+  /**
+   * Show full-width dividers between header, body, and footer sections
+   * @default false
+   */
+  dividers?: boolean;
   /**
    * Optional inline styles to apply to the component
    */
@@ -37,6 +37,11 @@ interface DsModalProps extends Pick<UseDialogProps, 'modal' | 'closeOnEscape' |
    * Modal body content
    */
   children: ReactNode;
+  /**
+   * Callback when modal open state changes
+   * @param open - whether the modal is open
+   */
+  onOpenChange: (open: boolean) => void;
 }
 //#endregion
 export { DsModalColumns, DsModalProps };

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

@@ -1 +1 @@
-{"version":3,"file":"ds-modal.types.d.ts","names":[],"sources":["../../../src/components/ds-modal/ds-modal.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAMA;AAKiB,KALL,cAAA,GAKkB,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;;;AA+BnB,UA/BM,YAAA,SAAqB,IA+B3B,CA9BV,cA8BU,EAAA,OAAA,GAAA,eAAA,GAAA,wBAAA,CAAA,CAAA;EA/B2B;;;;;;;;;;;;;YAkB3B;;;;UAIF;;;;;;;;YASE"}
+{"version":3,"file":"ds-modal.types.d.ts","names":[],"sources":["../../../src/components/ds-modal/ds-modal.types.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAMA;AAKiB,KALL,cAAA,GAKkB,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,CAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA;;;;AAkCnB,UAlCM,YAAA,SAAqB,IAkC3B,CAjCV,cAiCU,EAAA,OAAA,GAAA,eAAA,GAAA,wBAAA,CAAA,CAAA;EAlC2B;;;;;;;;YAa3B;;;;;;;;;UAWF;;;;;;;;YAUE"}

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

@@ -1,5 +1,5 @@
 import { DsPanelProps } from "./ds-panel.types.cjs";
-import * as react_jsx_runtime32 from "react/jsx-runtime";
+import * as react_jsx_runtime37 from "react/jsx-runtime";
 
 //#region src/components/ds-panel/ds-panel.d.ts
 declare function DsPanel({
@@ -11,7 +11,7 @@ declare function DsPanel({
   variant,
   disablePadding,
   ...props
-}: DsPanelProps): react_jsx_runtime32.JSX.Element;
+}: DsPanelProps): react_jsx_runtime37.JSX.Element;
 //#endregion
 export { DsPanel };
 //# sourceMappingURL=ds-panel.d.cts.map

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

@@ -1,5 +1,5 @@
 import { DsPanelProps } from "./ds-panel.types.js";
-import * as react_jsx_runtime41 from "react/jsx-runtime";
+import * as react_jsx_runtime44 from "react/jsx-runtime";
 
 //#region src/components/ds-panel/ds-panel.d.ts
 declare function DsPanel({
@@ -11,7 +11,7 @@ declare function DsPanel({
   variant,
   disablePadding,
   ...props
-}: DsPanelProps): react_jsx_runtime41.JSX.Element;
+}: DsPanelProps): react_jsx_runtime44.JSX.Element;
 //#endregion
 export { DsPanel };
 //# sourceMappingURL=ds-panel.d.ts.map

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

@@ -13,8 +13,8 @@ let react_compiler_runtime = require("react/compiler-runtime");
 let classnames = require("classnames");
 classnames = require_rolldown_runtime.__toESM(classnames);
 let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
 let __ark_ui_react_portal = require("@ark-ui/react/portal");
+let react = require("react");
 let __ark_ui_react_select = require("@ark-ui/react/select");
 
 //#region src/components/ds-select/ds-select.tsx

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

@@ -1,5 +1,5 @@
 import { DsSelectProps } from "./ds-select.types.cjs";
-import * as react_jsx_runtime33 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 
 //#region src/components/ds-select/ds-select.d.ts
 declare const DsSelect: ({
@@ -15,7 +15,7 @@ declare const DsSelect: ({
   placeholder,
   disabled,
   ...multiselectProps
-}: DsSelectProps) => react_jsx_runtime33.JSX.Element;
+}: DsSelectProps) => react_jsx_runtime38.JSX.Element;
 //#endregion
 export { DsSelect };
 //# sourceMappingURL=ds-select.d.cts.map

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

@@ -11,8 +11,8 @@ import { SelectItemsChips } from "./select-items-chips.js";
 import { c } from "react/compiler-runtime";
 import classNames from "classnames";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 import { Portal } from "@ark-ui/react/portal";
+import { useState } from "react";
 import { Select, createListCollection, useSelect } from "@ark-ui/react/select";
 
 //#region src/components/ds-select/ds-select.tsx

package/dist/components/ds-skeleton/ds-skeleton-circle.d.cts

@@ -1,5 +1,5 @@
 import { DsSkeletonCircleProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime39 from "react/jsx-runtime";
+import * as react_jsx_runtime40 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-circle.d.ts
 
@@ -12,7 +12,7 @@ declare const DsSkeletonCircle: ({
   color,
   className,
   style
-}: DsSkeletonCircleProps) => react_jsx_runtime39.JSX.Element;
+}: DsSkeletonCircleProps) => react_jsx_runtime40.JSX.Element;
 //#endregion
 export { DsSkeletonCircle };
 //# sourceMappingURL=ds-skeleton-circle.d.cts.map

package/dist/components/ds-skeleton/ds-skeleton-circle.d.ts

@@ -1,5 +1,5 @@
 import { DsSkeletonCircleProps } from "./ds-skeleton.types.js";
-import * as react_jsx_runtime13 from "react/jsx-runtime";
+import * as react_jsx_runtime26 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-circle.d.ts
 
@@ -12,7 +12,7 @@ declare const DsSkeletonCircle: ({
   color,
   className,
   style
-}: DsSkeletonCircleProps) => react_jsx_runtime13.JSX.Element;
+}: DsSkeletonCircleProps) => react_jsx_runtime26.JSX.Element;
 //#endregion
 export { DsSkeletonCircle };
 //# sourceMappingURL=ds-skeleton-circle.d.ts.map

package/dist/components/ds-skeleton/ds-skeleton-rect.d.cts

@@ -1,5 +1,5 @@
 import { DsSkeletonRectProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime34 from "react/jsx-runtime";
+import * as react_jsx_runtime39 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-rect.d.ts
 /**
@@ -12,7 +12,7 @@ declare const DsSkeletonRect: ({
   color,
   className,
   style
-}: DsSkeletonRectProps) => react_jsx_runtime34.JSX.Element;
+}: DsSkeletonRectProps) => react_jsx_runtime39.JSX.Element;
 //#endregion
 export { DsSkeletonRect };
 //# sourceMappingURL=ds-skeleton-rect.d.cts.map

package/dist/components/ds-skeleton/ds-skeleton-rect.d.ts

@@ -1,5 +1,5 @@
 import { DsSkeletonRectProps } from "./ds-skeleton.types.js";
-import * as react_jsx_runtime8 from "react/jsx-runtime";
+import * as react_jsx_runtime13 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-rect.d.ts
 /**
@@ -12,7 +12,7 @@ declare const DsSkeletonRect: ({
   color,
   className,
   style
-}: DsSkeletonRectProps) => react_jsx_runtime8.JSX.Element;
+}: DsSkeletonRectProps) => react_jsx_runtime13.JSX.Element;
 //#endregion
 export { DsSkeletonRect };
 //# sourceMappingURL=ds-skeleton-rect.d.ts.map

package/dist/components/ds-skeleton/ds-skeleton-rect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ds-skeleton-rect.d.ts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton-rect.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAE+D,cAOzD,cAwBL,EAAA,CAAA;EAAA,KAAA;EAAA,MAAA;EAAA,MAAA;EAAA,KAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAjBE,mBAiBF,EAAA,GAjBqB,kBAAA,CAAA,GAAA,CAAA,OAiBrB"}
+{"version":3,"file":"ds-skeleton-rect.d.ts","names":[],"sources":["../../../src/components/ds-skeleton/ds-skeleton-rect.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAE+D,cAOzD,cAwBL,EAAA,CAAA;EAAA,KAAA;EAAA,MAAA;EAAA,MAAA;EAAA,KAAA;EAAA,SAAA;EAAA;AAAA,CAAA,EAjBE,mBAiBF,EAAA,GAjBqB,mBAAA,CAAA,GAAA,CAAA,OAiBrB"}

package/dist/components/ds-skeleton/ds-skeleton-text.d.cts

@@ -1,5 +1,5 @@
 import { DsSkeletonTextProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime35 from "react/jsx-runtime";
+import * as react_jsx_runtime41 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-text.d.ts
 
@@ -15,7 +15,7 @@ declare const DsSkeletonText: ({
   radius,
   className,
   style
-}: DsSkeletonTextProps) => react_jsx_runtime35.JSX.Element;
+}: DsSkeletonTextProps) => react_jsx_runtime41.JSX.Element;
 //#endregion
 export { DsSkeletonText };
 //# sourceMappingURL=ds-skeleton-text.d.cts.map

package/dist/components/ds-skeleton/ds-skeleton-text.d.ts

@@ -1,5 +1,5 @@
 import { DsSkeletonTextProps } from "./ds-skeleton.types.js";
-import * as react_jsx_runtime12 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton-text.d.ts
 
@@ -15,7 +15,7 @@ declare const DsSkeletonText: ({
   radius,
   className,
   style
-}: DsSkeletonTextProps) => react_jsx_runtime12.JSX.Element;
+}: DsSkeletonTextProps) => react_jsx_runtime22.JSX.Element;
 //#endregion
 export { DsSkeletonText };
 //# sourceMappingURL=ds-skeleton-text.d.ts.map

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

@@ -1,5 +1,5 @@
 import { DsSkeletonCircleProps, DsSkeletonRectProps, DsSkeletonTextProps } from "./ds-skeleton.types.cjs";
-import * as react_jsx_runtime36 from "react/jsx-runtime";
+import * as react_jsx_runtime42 from "react/jsx-runtime";
 
 //#region src/components/ds-skeleton/ds-skeleton.d.ts
 declare const _default: {
@@ -11,13 +11,13 @@ declare const _default: {
     radius,
     className,
     style
-  }: DsSkeletonTextProps) => react_jsx_runtime36.JSX.Element;
+  }: DsSkeletonTextProps) => react_jsx_runtime42.JSX.Element;
   Circle: ({
     size,
     color,
     className,
     style
-  }: DsSkeletonCircleProps) => react_jsx_runtime36.JSX.Element;
+  }: DsSkeletonCircleProps) => react_jsx_runtime42.JSX.Element;
   Rect: ({
     width,
     height,
@@ -25,7 +25,7 @@ declare const _default: {
     color,
     className,
     style
-  }: DsSkeletonRectProps) => react_jsx_runtime36.JSX.Element;
+  }: DsSkeletonRectProps) => react_jsx_runtime42.JSX.Element;
 };
 //#endregion
 export { _default };