@stordata/design-system 0.1.20260629080514

package/dist/DSProvider-DSGQ7C7X.js

@@ -0,0 +1,59 @@
+import { i as e, r as t } from "./DSButton-BXD09god.js";
+import { useEffect as n, useMemo as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/services/helpers/defaultsDeep.ts
+function a(e, t) {
+	let n = (e) => typeof e == "object" && !!e && !Array.isArray(e);
+	return Object.keys(e).reduce((r, i) => {
+		let o = t[i], s = e[i];
+		return n(s) && n(o) ? r[i] = a(s, o) : i in t ? r[i] = o : r[i] = s, r;
+	}, {});
+}
+//#endregion
+//#region src/services/useDefaults/index.ts
+function o(e, t) {
+	return r(() => a(e, t), [e, t]);
+}
+//#endregion
+//#region lib/DSProvider/index.tsx
+function s({ theme: r, children: a }) {
+	let s = o(e, r);
+	function c() {
+		let e = [], t = s.sizing.one;
+		function n(t, n) {
+			e.push(`${t}: ${n}`);
+		}
+		function r(e, t) {
+			return n(e, `${t}rem`);
+		}
+		function i() {
+			a("size", 0, 50);
+		}
+		function a(e, n, i, a = 1) {
+			for (let o = n; o <= i; o += 1) r(`--${e}-${o}`, t * o * a);
+		}
+		function o() {
+			for (let [e, t] of Object.entries(s.colors)) for (let [r, i] of Object.entries(t)) n(`--${e}-${r}`, i);
+		}
+		function c() {
+			for (let [e, [t, n]] of Object.entries(s.semantic.tokens)) l(e, s.mode === "light" ? t : n);
+		}
+		function l(e, t) {
+			n(e, `var(${t})`);
+		}
+		function u(e, t, n, r) {
+			l(e, `--${t}-${s.mode === "light" ? n : r}`);
+		}
+		i(), a("spacing", 0, 24, s.sizing.spacing.multiplier), n("--radius-focus", "var(--radius-6)"), a("radius", 0, 12, s.sizing.radius.multiplier), o(), c(), n("--color-none", s.mode === "light" ? "#FFFFFF03" : "#00000003"), u("--text-primary", "neutral", "1000", "0"), u("--text-secondary", "neutral", "900", "100"), u("--text-tertiary", "neutral", "800", "200"), u("--text-supporting", "neutral", "700", "300"), u("--text-muted", "neutral", "600", "400"), u("--text-disabled", "neutral", "500", "500"), u("--text-inversed", "neutral", "0", "1000"), u("--text-inversed-soft", "neutral", "400", "600"), u("--text-brand", "brand", "600", "400"), u("--text-info", "blue", "700", "400"), u("--text-success", "green", "700", "400"), u("--text-warning", "orange", "700", "400"), u("--text-danger-default", "red", "600", "500"), u("--text-danger-strong", "red", "700", "400"), u("--surface-primary", "neutral", "0", "1000"), u("--surface-inversed", "neutral", "1000", "0"), u("--surface-brand-default", "brand", "600", "400"), u("--surface-brand-subtle", "brand", "200", "800"), u("--surface-brand-medium", "brand", "300", "700"), u("--surface-disabled-soft", "neutral", "200", "800"), u("--surface-disabled-strong", "neutral", "300", "700"), u("--surface-info", "blue", "300", "700"), u("--surface-info-subtle", "blue", "200", "950"), u("--surface-success", "green", "300", "700"), u("--surface-success-subtle", "green", "200", "950"), u("--surface-warning", "orange", "300", "700"), u("--surface-warning-subtle", "orange", "200", "950"), u("--surface-danger-default", "red", "600", "500"), u("--surface-danger-medium", "red", "300", "800"), u("--surface-danger-subtle", "red", "200", "950"), u("--border-brand", "brand", "600", "400"), u("--border-inversed", "neutral", "0", "1000"), u("--border-brand-subtle", "brand", "300", "800"), u("--border-info", "blue", "600", "400"), u("--border-info-subtle", "blue", "300", "800"), u("--border-success", "green", "600", "400"), u("--border-success-subtle", "green", "300", "800"), u("--border-warning", "orange", "600", "400"), u("--border-warning-subtle", "orange", "300", "800"), u("--border-danger", "red", "600", "400"), u("--border-danger-subtle", "red", "300", "800"), u("--border-disabled", "neutral", "300", "700"), u("--border-soft", "neutral", "400", "600"), u("--border-strong", "neutral", "500", "500"), l("--border-focus", "--border-brand"), l("--border-focus-inversed", "--border-inversed"), u("--icon-default", "neutral", "800", "200"), u("--icon-subtle", "neutral", "600", "400"), l("--icon-disabled", "--text-disabled"), u("--icon-brand", "brand", "600", "400"), l("--icon-inversed", "--text-inversed"), l("--icon-info", "--text-info"), l("--icon-success", "--text-success"), l("--icon-warning", "--text-warning"), l("--icon-danger", "--text-danger-default"), l("--action-brand-text-default", "--text-brand"), u("--action-brand-text-hover", "brand", "700", "300"), u("--action-brand-text-pressed", "brand", "900", "100"), u("--action-brand-text-active", "brand", "800", "200"), l("--action-brand-text-on-brand", "--text-inversed"), l("--action-brand-bg-default", "--surface-brand-default"), u("--action-brand-bg-hover", "brand", "700", "300"), u("--action-brand-bg-hover-subtle", "brand", "100", "900"), u("--action-brand-bg-pressed", "brand", "900", "100"), u("--action-brand-bg-pressed-subtle", "brand", "300", "700"), u("--action-brand-bg-selected", "brand", "800", "200"), u("--action-brand-bg-selected-subtle", "brand", "200", "800"), u("--action-brand-bg-active", "brand", "800", "200"), u("--action-brand-bg-active-subtle", "brand", "200", "800"), l("--action-brand-border-default", "--border-brand"), l("--action-neutral-text-default", "--text-primary"), l("--action-neutral-text-subtle", "--text-supporting"), l("--action-neutral-text-on-neutral", "---action-neutral-text-default"), u("--action-neutral-bg-default", "neutral", "100", "900"), u("--action-neutral-bg-hover", "neutral", "200", "800"), l("--action-neutral-bg-hover-subtle", "--action-neutral-bg-default"), u("--action-neutral-bg-pressed", "neutral", "400", "600"), u("--action-neutral-bg-selected", "neutral", "300", "700"), u("--action-neutral-bg-active", "neutral", "300", "700"), l("--action-neutral-border-default", "--border-default"), l("--action-danger-text-default", "--text-danger-default"), u("--action-danger-text-hover", "red", "700", "300"), u("--action-danger-text-active", "red", "800", "200"), l("--action-danger-text-on-danger", "--text-inversed"), l("--action-danger-bg-default", "--surface-danger-default"), u("--action-danger-bg-hover", "red", "700", "400"), u("--action-danger-bg-hover-subtle", "red", "100", "900"), u("--action-danger-bg-pressed", "red", "900", "300"), u("--action-danger-bg-pressed-subtle", "red", "300", "700"), u("--action-danger-bg-selected", "red", "800", "300"), u("--action-danger-bg-selected-subtle", "red", "200", "800"), u("--action-danger-bg-active", "red", "800", "200"), u("--action-danger-bg-active-subtle", "red", "200", "800"), l("--action-danger-border-default", "--border-danger"), l("--action-disabled-text-default", "--text-disabled"), l("--action-disabled-bg-default", "--action-neutral-bg-default"), l("--action-disabled-border-default", "--border-disabled"), l("--control-on-neutral-border-on", "--border-brand"), u("--control-on-neutral-border-off", "neutral", "600", "400"), l("--control-on-neutral-border-disabled", "--border-disabled"), l("--control-on-neutral-border-focus", "--border-focus"), l("--control-on-neutral-surface-on", "--surface-brand-default"), u("--control-on-neutral-surface-off", "neutral", "500", "400"), l("--control-on-neutral-surface-disabled", "--surface-disabled-strong"), l("--control-on-neutral-icon-brand", "--icon-brand"), u("--control-on-neutral-icon-neutral", "neutral", "500", "500"), u("--control-on-neutral-icon-disabled", "neutral", "200", "800"), u("--control-on-neutral-thumb-on", "brand", "700", "300"), l("--control-on-neutral-thumb-off", "--surface-primary"), u("--control-on-neutral-thumb-disabled", "neutral", "400", "600"), l("--control-on-brand-border-default", "--border-inversed"), u("--control-on-brand-border-disabled", "brand", "400", "600"), l("--control-on-brand-border-on", "--control-on-brand-border-default"), l("--control-on-brand-border-off", "--control-on-brand-border-default"), l("--control-on-brand-border-focus", "--border-focus-inversed"), l("--control-on-brand-surface-on", "--surface-primary"), u("--control-on-brand-surface-disabled", "brand", "400", "600"), l("--control-on-brand-icon-on", "--icon-inversed"), l("--control-on-brand-icon-disabled", "--icon-brand"), u("--control-on-brand-icon-disabled-inversed", "brand", "400", "600"), l("--control-on-brand-thumb-default", "--surface-primary"), l("--control-on-brand-thumb-disabled", "--control-on-brand-surface-disabled"), u("--control-on-brand-thumb-disabled-inversed", "brand", "600", "400"), n("--alpha-white-8", "#FFFFFF14"), n("--alpha-white-12", "#FFFFFF1F"), n("--alpha-white-18", "#FFFFFF2E"), n("--alpha-black-4", "#0000000A"), n("--alpha-black-8", "#00000014"), n("--alpha-black-16", "#00000029"), n("--font-family-sans", s.typography.font.family.sans), n("--font-family-mono", s.typography.font.family.mono), n("--font-weight-regular", s.typography.font.weight.regular), n("--font-weight-medium", s.typography.font.weight.medium), n("--font-weight-semibold", s.typography.font.weight.semibold), n("--font-weight-bold", s.typography.font.weight.bold), n("--line-height-tight", s.typography.line.height.tight), n("--line-height-compact", s.typography.line.height.compact), n("--line-height-default", s.typography.line.height.default), n("--line-height-comfortable", s.typography.line.height.comfortable), n("--line-height-loose", s.typography.line.height.loose), n("--letter-spacing-none", s.typography.letter.spacing.none), n("--letter-spacing-tight", s.typography.letter.spacing.tight), n("--letter-spacing-wide", s.typography.letter.spacing.wide), a("font", 10, 48, s.typography.font.size.multiplier), l("--font-size-default", `--font-${s.typography.font.size.default}`);
+		let d = document.head.appendChild(document.createElement("style"));
+		return d.setAttribute("type", "text/css"), d.setAttribute("id", "DSProviderInsertionPoint"), d.sheet.insertRule(`:root { ${e.join(";")} }`, 0), d.sheet.insertRule("\n        body {\n          font-family: var(--font-family-sans);\n          font-size: var(--font-size-default);\n          font-weight: var(--font-weight-regular);\n          line-height: var(--line-height-default);\n          letter-spacing: var(--letter-spacing-none);\n\n          color: var(--text-primary);\n          background-color: var(--surface-primary);\n        }\n      ", 1), function() {
+			document.head.removeChild(d);
+		};
+	}
+	return n(c, [s]), /* @__PURE__ */ i(t, {
+		value: s,
+		children: a
+	});
+}
+//#endregion
+export { s as t };

package/dist/design-system.css

@@ -0,0 +1,2 @@
+@import "https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100..900&family=Noto+Color+Emoji&family=Roboto:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap";._h1-display_1nowz_1{font-size:var(--font-48);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}._h1_1nowz_1{font-size:var(--font-28);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight)}._h2_1nowz_13{font-size:var(--font-22);font-weight:var(--font-weight-medium);line-height:var(--line-height-compact)}._h3_1nowz_19{font-size:var(--font-18);font-weight:var(--font-weight-regular);line-height:var(--line-height-compact)}._h3-bold_1nowz_25{font-size:var(--font-18);font-weight:var(--font-weight-bold);line-height:var(--line-height-compact)}._h4_1nowz_31{font-size:var(--font-16);font-weight:var(--font-weight-semibold);line-height:var(--line-height-compact)}._display-lg_1nowz_37{font-size:var(--font-36);font-weight:var(--font-weight-semibold)}._display-md_1nowz_42{font-size:var(--font-22);font-weight:var(--font-weight-semibold)}._body-xl_1nowz_47{font-size:var(--font-18);font-weight:var(--font-weight-medium)}._body-lg_1nowz_52{font-size:var(--font-16);font-weight:var(--font-weight-regular)}._body-lg-medium_1nowz_57{font-size:var(--font-16);font-weight:var(--font-weight-medium)}._body-lg-semibold_1nowz_62,._button-text-large_1nowz_62{font-size:var(--font-16);font-weight:var(--font-weight-semibold)}._body-lg-mono_1nowz_67{font-size:var(--font-16);font-weight:var(--font-weight-regular);font-family:var(--font-family-mono), monospace}._body-md_1nowz_73{font-size:var(--font-14);font-weight:var(--font-weight-regular)}._body-md-medium_1nowz_78,._button-text-small_1nowz_78{font-size:var(--font-14);font-weight:var(--font-weight-medium)}._body-md-semibold_1nowz_83,._button-text-medium_1nowz_83,._label-md_1nowz_83{font-size:var(--font-14);font-weight:var(--font-weight-semibold)}._body-md-mono_1nowz_88{font-size:var(--font-14);font-weight:var(--font-weight-regular);font-family:var(--font-family-mono), monospace}._body-sm_1nowz_94,._label-sm_1nowz_94{font-size:var(--font-12);font-weight:var(--font-weight-regular)}._body-sm-medium_1nowz_99,._helper-text-default_1nowz_99,._caption-default_1nowz_99{font-size:var(--font-12);font-weight:var(--font-weight-medium)}._body-sm-semibold_1nowz_104{font-size:var(--font-12);font-weight:var(--font-weight-semibold)}._body-sm-mono_1nowz_109{font-size:var(--font-12);font-weight:var(--font-weight-regular);font-family:var(--font-family-mono), monospace}._body-xs-mono_1nowz_115{font-size:var(--font-10);font-weight:var(--font-weight-medium);font-family:var(--font-family-mono), monospace}._label-md_1nowz_83{line-height:var(--line-height-default)}._label-sm_1nowz_94{line-height:var(--line-height-tight)}._button-text-small_1nowz_78,._button-text-medium_1nowz_83,._button-text-large_1nowz_62{line-height:var(--line-height-compact)}._caption-default_1nowz_99{line-height:var(--line-height-default)}._helper-text-default_1nowz_99{line-height:var(--line-height-tight)}._fullWidth_aevel_1{width:100%}._input_aevel_5{box-sizing:border-box;background-color:inherit;border-radius:.25rem;height:2.125rem;margin:0;padding:0 .75rem;font-family:Roboto,Noto Color Emoji,Helvetica,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.375rem}._ghost_aevel_18{color:#343434;border:1px solid #0000}._ghost_aevel_18::placeholder{color:#9e9e9e}._ghost_aevel_18:hover{box-shadow:inset 0 0 0 1px #555}._ghost_aevel_18:hover::placeholder{color:#343434}._ghost_aevel_18:focus-visible{outline:1px solid #5f73b3;box-shadow:inset 0 0 0 1px #5f73b3}._helperText_aevel_36{gap:4px;height:18px;padding:2px 12px 0}._error_aevel_42{color:#b72427}._checkbox_dpwc5_1{width:var(--size-24);height:var(--size-24);padding:var(--size-3);border-radius:var(--radius-4);background-color:#0000;justify-content:center;align-items:center;display:flex}._checkbox_dpwc5_1 ._indicator_dpwc5_11{border-radius:var(--radius-2)}._checkbox_dpwc5_1._on-neutral_dpwc5_14:not([disabled]) ._indicator_dpwc5_11{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-neutral-border-off);color:#0000}._checkbox_dpwc5_1._on-neutral_dpwc5_14:not([disabled]) ._indicator_dpwc5_11[data-checked]{color:var(--control-on-brand-icon-on);box-shadow:inset 0 0 0 var(--size-2) var(--control-on-neutral-border-on);background-color:var(--control-on-neutral-surface-on)}._checkbox_dpwc5_1._on-neutral_dpwc5_14:not([disabled]):focus-visible{outline:var(--size-2) solid var(--control-on-neutral-border-focus)}._checkbox_dpwc5_1._on-neutral_dpwc5_14:not([disabled]):hover{background-color:var(--control-on-neutral-hover)}._checkbox_dpwc5_1._on-neutral_dpwc5_14:not([disabled]):active{background-color:var(--control-on-neutral-active)}._checkbox_dpwc5_1._on-neutral_dpwc5_14 ._indicator_dpwc5_11{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-neutral-border-disabled);color:#0000}._checkbox_dpwc5_1._on-neutral_dpwc5_14 ._indicator_dpwc5_11[data-checked]{background-color:var(--control-on-neutral-surface-disabled);color:var(--control-on-neutral-icon-disabled)}._checkbox_dpwc5_1._on-brand_dpwc5_40:not([disabled]) ._indicator_dpwc5_11{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-brand-border-off);color:#0000}._checkbox_dpwc5_1._on-brand_dpwc5_40:not([disabled]) ._indicator_dpwc5_11[data-checked]{color:var(--control-on-neutral-icon-brand);box-shadow:inset 0 0 0 var(--size-2) var(--control-on-brand-border-on);background-color:var(--control-on-brand-surface-on)}._checkbox_dpwc5_1._on-brand_dpwc5_40:not([disabled]):focus-visible{outline:var(--size-2) solid var(--control-on-brand-border-focus)}._checkbox_dpwc5_1._on-brand_dpwc5_40:not([disabled]):hover{background-color:var(--control-on-brand-hover)}._checkbox_dpwc5_1._on-brand_dpwc5_40:not([disabled]):active{background-color:var(--control-on-brand-active)}._checkbox_dpwc5_1._on-brand_dpwc5_40 ._indicator_dpwc5_11{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-brand-border-disabled);color:#0000}._checkbox_dpwc5_1._on-brand_dpwc5_40 ._indicator_dpwc5_11[data-checked]{background-color:var(--control-on-brand-surface-disabled);color:var(--control-on-brand-icon-disabled)}._card_1topy_1{gap:var(--spacing-12);padding:var(--spacing-24);border-radius:var(--radius-8);border:var(--size-1) solid var(--border-brand-subtle);flex-direction:column;display:flex}._card_1topy_1 ._title_1topy_9{width:fit-content;color:var(--text-brand);background-color:var(--surface-primary);border-radius:var(--radius-4);padding:var(--spacing-4) var(--spacing-12)}._card_1topy_1._primary_1topy_16{background-color:var(--surface-brand-subtle)}._card_1topy_1._secondary_1topy_19{background-color:var(--surface-primary)}._card_1topy_1._secondary_1topy_19 ._title_1topy_9{border:var(--size-1) solid var(--border-brand-subtle)}._accordion_1opz9_1{width:100%}._accordion_1opz9_1 ._item_1opz9_4{border-radius:var(--radius-4)}._accordion_1opz9_1 ._item_1opz9_4._brand_1opz9_7{border:var(--size-1) solid var(--action-brand-border-default)}._accordion_1opz9_1 ._item_1opz9_4._neutral_1opz9_10{border:var(--size-1) solid var(--action-neutral-border-default)}._accordion_1opz9_1 ._item_1opz9_4._danger_1opz9_13{border:var(--size-1) solid var(--action-danger-border-default)}._accordion_1opz9_1 ._item_1opz9_4 ._button_1opz9_16{width:100%}._accordion_1opz9_1 ._item_1opz9_4 ._button_1opz9_16>:last-child{margin-left:auto}._accordion_1opz9_1 ._item_1opz9_4[data-open] ._button_1opz9_16>:last-child{transform:rotate(45deg)}._accordion_1opz9_1 ._item_1opz9_4 ._panel_1opz9_25{padding:var(--spacing-12);height:var(--accordion-panel-height)}._Value_mvypf_1[data-placeholder]{color:#9e9e9e}._fullWidth_mvypf_5{width:100%}._Select_mvypf_9{box-sizing:border-box;color:#343434;background-color:inherit;-webkit-user-select:none;user-select:none;border:1px solid #0000;border-radius:.25rem;outline:0;justify-content:space-between;align-items:center;gap:.75rem;height:2.125rem;margin:0;padding-left:.75rem;padding-right:.75rem;display:flex}._Select_mvypf_9:hover{border:.0625rem solid #5f73b3}._Select_mvypf_9[data-popup-open],._Select_mvypf_9:focus-visible{outline-offset:.125rem;border:.0625rem solid #5f73b3;outline:.125rem solid #96a4dd}._SelectIcon_mvypf_41{display:flex}._Positioner_mvypf_45{z-index:1;-webkit-user-select:none;user-select:none;outline:none}._Popup_mvypf_52{box-sizing:border-box;min-width:var(--anchor-width);transform-origin:var(--transform-origin);background-color:canvas;background-clip:padding-box;border-radius:.25rem;transition:transform .15s,opacity .15s}._Popup_mvypf_52[data-starting-style],._Popup_mvypf_52[data-ending-style]{opacity:0;transform:scale(.9)}._Popup_mvypf_52[data-side=none]{opacity:1;min-width:calc(var(--anchor-width) + 1rem);transition:none;transform:none}@media (prefers-color-scheme:light){._Popup_mvypf_52{outline:1px solid #02051312;box-shadow:0 10px 15px -3px #02051312,0 4px 6px -4px #02051312}}._List_mvypf_78{box-sizing:border-box;max-height:var(--available-height);padding-block:.25rem;scroll-padding-block:1.5rem;position:relative;overflow-y:auto}._Item_mvypf_87{box-sizing:border-box;padding-block:.5rem;cursor:default;-webkit-user-select:none;user-select:none;outline:0;grid-template-columns:.75rem 1fr;align-items:center;gap:.5rem;padding-left:.75rem;padding-right:.75rem;display:grid}[data-side=none] ._Item_mvypf_87{padding-right:3rem}._Item_mvypf_87[data-highlighted]{z-index:0;position:relative}._Item_mvypf_87[data-highlighted]:before{content:"";z-index:-1;background-color:#e0e8f9;border-radius:.25rem;position:absolute;inset-block:0;inset-inline:.25rem}._ItemIndicator_mvypf_118{grid-column-start:1}._ItemIndicatorIcon_mvypf_122{width:1.125rem;height:1.125rem;display:block}._ItemText_mvypf_128{grid-column-start:2}._ScrollArrow_mvypf_132{color:#4e5c8b;z-index:1;text-align:center;cursor:default;background:canvas;border-radius:.25rem;justify-content:center;align-items:center;width:100%;height:1rem;font-size:.75rem;display:flex}._ScrollArrow_mvypf_132:before{content:"";width:100%;height:100%;position:absolute;left:0}._ScrollArrow_mvypf_132[data-direction=up][data-side=none]:before{top:-100%}._ScrollArrow_mvypf_132[data-direction=down]{bottom:0}._ScrollArrow_mvypf_132[data-direction=down][data-side=none]:before{bottom:-100%}._group_12gwd_1{display:flex}._group_12gwd_1 ._button_12gwd_4:first-child{border-top-right-radius:0;border-bottom-right-radius:0}._group_12gwd_1 ._button_12gwd_4:last-child{border-top-left-radius:0;border-bottom-left-radius:0}._group_12gwd_1 ._button_12gwd_4:not(:first-child):not(:last-child){border-radius:0}._group_12gwd_1 ._button_12gwd_4:not(:first-child){margin-left:calc(var(--size-1) * -1)}._root_1pyrs_1{width:var(--size-24);height:var(--size-24);border-radius:100%;justify-content:center;align-items:center;display:flex}._root_1pyrs_1 ._indicator_1pyrs_9{width:var(--size-18);height:var(--size-18);border-radius:100%;justify-content:center;align-items:center;display:flex}._root_1pyrs_1 ._indicator_1pyrs_9[data-checked]:before{content:"";width:var(--size-10);height:var(--size-10);border-radius:100%;display:block}._root_1pyrs_1._on-neutral_1pyrs_24:not([disabled]):focus-visible{outline:var(--size-2) solid var(--control-on-neutral-border-focus)}._root_1pyrs_1._on-neutral_1pyrs_24:not([disabled]):hover{background-color:var(--control-on-neutral-hover)}._root_1pyrs_1._on-neutral_1pyrs_24:not([disabled]):active{background-color:var(--control-on-neutral-active)}._root_1pyrs_1._on-neutral_1pyrs_24:not([disabled]) ._indicator_1pyrs_9{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-neutral-border-off)}._root_1pyrs_1._on-neutral_1pyrs_24:not([disabled]) ._indicator_1pyrs_9[data-checked]{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-neutral-border-on)}._root_1pyrs_1._on-neutral_1pyrs_24:not([disabled]) ._indicator_1pyrs_9[data-checked]:before{background-color:var(--control-on-neutral-surface-on)}._root_1pyrs_1._on-neutral_1pyrs_24 ._indicator_1pyrs_9{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-neutral-border-disabled)}._root_1pyrs_1._on-neutral_1pyrs_24 ._indicator_1pyrs_9[data-checked]:before{background-color:var(--control-on-neutral-surface-disabled)}._root_1pyrs_1._on-brand_1pyrs_48:not([disabled]):focus-visible{outline:var(--size-2) solid var(--control-on-brand-border-focus)}._root_1pyrs_1._on-brand_1pyrs_48:not([disabled]):hover{background-color:var(--control-on-brand-hover)}._root_1pyrs_1._on-brand_1pyrs_48:not([disabled]):active{background-color:var(--control-on-brand-active)}._root_1pyrs_1._on-brand_1pyrs_48:not([disabled]) ._indicator_1pyrs_9{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-brand-border-off)}._root_1pyrs_1._on-brand_1pyrs_48:not([disabled]) ._indicator_1pyrs_9[data-checked]{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-brand-border-on)}._root_1pyrs_1._on-brand_1pyrs_48:not([disabled]) ._indicator_1pyrs_9[data-checked]:before{background-color:var(--control-on-brand-surface-on)}._root_1pyrs_1._on-brand_1pyrs_48 ._indicator_1pyrs_9{box-shadow:inset 0 0 0 var(--size-2) var(--control-on-brand-border-disabled)}._root_1pyrs_1._on-brand_1pyrs_48 ._indicator_1pyrs_9[data-checked]:before{background-color:var(--control-on-brand-surface-disabled)}._root_ulsrp_1{width:var(--size-46);height:var(--size-28);padding:var(--spacing-3);border-radius:var(--size-24);justify-content:center;align-items:center;display:flex}._root_ulsrp_1 ._track_ulsrp_10{width:100%;height:100%;padding:var(--spacing-2);border-radius:var(--size-24);justify-content:left;align-items:center;display:flex}._root_ulsrp_1 ._track_ulsrp_10 ._thumb_ulsrp_19{width:var(--size-18);height:var(--size-18);border-radius:var(--size-24);box-shadow:0 0 0 var(--size-2) var(--control-on-brand-thumb-shadow);justify-content:center;align-items:center;display:flex}._root_ulsrp_1[data-checked] ._track_ulsrp_10{justify-content:right}._root_ulsrp_1._on-neutral_ulsrp_31:focus-visible{outline:var(--size-2) solid var(--control-on-neutral-border-focus)}._root_ulsrp_1._on-neutral_ulsrp_31:not(:disabled) ._track_ulsrp_10{background-color:var(--control-on-neutral-surface-off)}._root_ulsrp_1._on-neutral_ulsrp_31:not(:disabled) ._track_ulsrp_10 ._thumb_ulsrp_19{color:var(--control-on-neutral-icon-neutral);background-color:var(--control-on-neutral-thumb-off)}._root_ulsrp_1._on-neutral_ulsrp_31:not(:disabled) ._track_ulsrp_10 ._thumb_ulsrp_19:hover{box-shadow:0 0 0 var(--size-4) var(--control-on-neutral-hover)}._root_ulsrp_1._on-neutral_ulsrp_31:not(:disabled) ._track_ulsrp_10 ._thumb_ulsrp_19:active{box-shadow:0 0 0 var(--size-4) var(--control-on-neutral-active)}._root_ulsrp_1._on-neutral_ulsrp_31:not(:disabled)[data-checked] ._track_ulsrp_10{background-color:var(--control-on-neutral-surface-on)}._root_ulsrp_1._on-neutral_ulsrp_31:not(:disabled)[data-checked] ._track_ulsrp_10 ._thumb_ulsrp_19{color:var(--control-on-neutral-icon-brand);background-color:var(--control-on-brand-thumb-default)}._root_ulsrp_1._on-neutral_ulsrp_31 ._track_ulsrp_10{background-color:var(--control-on-neutral-surface-disabled)}._root_ulsrp_1._on-neutral_ulsrp_31 ._track_ulsrp_10 ._thumb_ulsrp_19{color:var(--control-on-neutral-icon-disabled);background-color:var(--control-on-neutral-thumb-disabled)}._root_ulsrp_1._on-brand_ulsrp_61:focus-visible{outline:var(--size-2) solid var(--control-on-brand-border-focus)}._root_ulsrp_1._on-brand_ulsrp_61:not(:disabled) ._track_ulsrp_10{background-color:var(--color-none);box-shadow:inset 0 0 0 var(--size-1) var(--control-on-brand-border-default)}._root_ulsrp_1._on-brand_ulsrp_61:not(:disabled) ._track_ulsrp_10 ._thumb_ulsrp_19{color:var(--control-on-neutral-icon-brand);background-color:var(--control-on-brand-thumb-default)}._root_ulsrp_1._on-brand_ulsrp_61:not(:disabled) ._track_ulsrp_10 ._thumb_ulsrp_19:hover{box-shadow:0 0 0 var(--size-4) var(--control-on-brand-hover)}._root_ulsrp_1._on-brand_ulsrp_61:not(:disabled) ._track_ulsrp_10 ._thumb_ulsrp_19:active{box-shadow:0 0 0 var(--size-4) var(--control-on-brand-active)}._root_ulsrp_1._on-brand_ulsrp_61:not(:disabled)[data-checked] ._track_ulsrp_10{background-color:var(--control-on-brand-surface-on)}._root_ulsrp_1._on-brand_ulsrp_61:not(:disabled)[data-checked] ._track_ulsrp_10 ._thumb_ulsrp_19{color:var(--control-on-brand-icon-on);background-color:var(--control-on-neutral-thumb-on)}._root_ulsrp_1._on-brand_ulsrp_61 ._track_ulsrp_10{background-color:var(--control-on-brand-surface-disabled)}._root_ulsrp_1._on-brand_ulsrp_61 ._track_ulsrp_10 ._thumb_ulsrp_19{color:var(--control-on-brand-icon-disabled-inversed);background-color:var(--control-on-brand-thumb-disabled-inversed)}._icon_wxirn_1>svg{fill:currentColor;width:1em;height:1em}._icon_wxirn_1._extra-small_wxirn_6{font-size:var(--font-18)}._icon_wxirn_1._small_wxirn_9{font-size:var(--font-20)}._icon_wxirn_1._medium_wxirn_12{font-size:var(--font-22)}._icon_wxirn_1._large_wxirn_15{font-size:var(--font-24)}._icon_wxirn_1._extra-large_wxirn_18{font-size:var(--font-26)}._button_130ui_1{text-wrap-mode:nowrap;justify-content:center;align-items:center;gap:var(--spacing-4);border-radius:var(--radius-4);outline-offset:var(--spacing-2);display:flex}._button_130ui_1:focus-visible{outline:var(--size-2) solid var(--border-focus)}._button_130ui_1._small_130ui_13{height:var(--size-28);min-width:var(--size-28)}._button_130ui_1._small_130ui_13._label_130ui_17{padding:0 var(--spacing-8)}._button_130ui_1._medium_130ui_20{height:var(--size-32);min-width:var(--size-32)}._button_130ui_1._medium_130ui_20._label_130ui_17{padding:0 var(--spacing-12)}._button_130ui_1._large_130ui_27{height:var(--size-36);min-width:var(--size-36)}._button_130ui_1._large_130ui_27._label_130ui_17{padding:0 var(--spacing-16)}._button_130ui_1[disabled]{color:var(--action-disabled-text-default);background-color:var(--action-disabled-bg-default)}._button_130ui_1._brand_130ui_38._primary_130ui_38{color:var(--action-brand-text-on-brand);background-color:var(--action-brand-bg-default)}._button_130ui_1._brand_130ui_38._primary_130ui_38:hover{background-color:var(--action-brand-bg-hover)}._button_130ui_1._brand_130ui_38._primary_130ui_38:active{background-color:var(--action-brand-bg-active)}._button_130ui_1._brand_130ui_38._secondary_130ui_48,._button_130ui_1._brand_130ui_38._tertiary_130ui_48{color:var(--action-brand-text-default);background-color:var(--color-none)}._button_130ui_1._brand_130ui_38._secondary_130ui_48._secondary_130ui_48,._button_130ui_1._brand_130ui_38._tertiary_130ui_48._secondary_130ui_48{box-shadow:inset 0 0 0 var(--size-1) var(--action-brand-border-default)}._button_130ui_1._brand_130ui_38._secondary_130ui_48:hover,._button_130ui_1._brand_130ui_38._tertiary_130ui_48:hover{color:var(--action-brand-text-hover);background-color:var(--action-brand-bg-hover-subtle)}._button_130ui_1._brand_130ui_38._secondary_130ui_48:active,._button_130ui_1._brand_130ui_38._tertiary_130ui_48:active{color:var(--action-brand-text-active);background-color:var(--action-brand-bg-active-subtle)}._button_130ui_1._neutral_130ui_63._primary_130ui_38{color:var(--action-neutral-text-on-neutral);background-color:var(--action-neutral-bg-default)}._button_130ui_1._neutral_130ui_63._primary_130ui_38:hover{background-color:var(--action-neutral-bg-hover)}._button_130ui_1._neutral_130ui_63._primary_130ui_38:active{background-color:var(--action-neutral-bg-active)}._button_130ui_1._neutral_130ui_63._secondary_130ui_48,._button_130ui_1._neutral_130ui_63._tertiary_130ui_48{color:var(--action-neutral-text-default);background-color:var(--color-none)}._button_130ui_1._neutral_130ui_63._secondary_130ui_48._secondary_130ui_48,._button_130ui_1._neutral_130ui_63._tertiary_130ui_48._secondary_130ui_48{box-shadow:inset 0 0 0 var(--size-1) var(--action-neutral-border-default)}._button_130ui_1._neutral_130ui_63._secondary_130ui_48:hover,._button_130ui_1._neutral_130ui_63._tertiary_130ui_48:hover{color:var(--action-neutral-text-hover);background-color:var(--action-neutral-bg-hover-subtle)}._button_130ui_1._neutral_130ui_63._secondary_130ui_48:active,._button_130ui_1._neutral_130ui_63._tertiary_130ui_48:active{color:var(--action-neutral-text-active);background-color:var(--action-neutral-bg-active-subtle)}._button_130ui_1._danger_130ui_88._primary_130ui_38{color:var(--action-danger-text-on-danger);background-color:var(--action-danger-bg-default)}._button_130ui_1._danger_130ui_88._primary_130ui_38:hover{background-color:var(--action-danger-bg-hover)}._button_130ui_1._danger_130ui_88._primary_130ui_38:active{background-color:var(--action-danger-bg-active)}._button_130ui_1._danger_130ui_88._secondary_130ui_48,._button_130ui_1._danger_130ui_88._tertiary_130ui_48{color:var(--action-danger-text-default);background-color:var(--color-none)}._button_130ui_1._danger_130ui_88._secondary_130ui_48._secondary_130ui_48,._button_130ui_1._danger_130ui_88._tertiary_130ui_48._secondary_130ui_48{box-shadow:inset 0 0 0 var(--size-1) var(--action-danger-border-default)}._button_130ui_1._danger_130ui_88._secondary_130ui_48:hover,._button_130ui_1._danger_130ui_88._tertiary_130ui_48:hover{color:var(--action-danger-text-hover);background-color:var(--action-danger-bg-hover-subtle)}._button_130ui_1._danger_130ui_88._secondary_130ui_48:active,._button_130ui_1._danger_130ui_88._tertiary_130ui_48:active{color:var(--action-danger-text-active);background-color:var(--action-danger-bg-active-subtle)}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}img,picture,video,canvas,svg{max-width:100%;display:block}input,button,textarea,select{font:inherit;color:inherit}button{background:0 0;border:none}button:not([disabled]){cursor:pointer}ul,ol{list-style:none}a{color:inherit;text-decoration:none}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}._tester_1wzan_1{gap:var(--spacing-12);flex-direction:row;display:flex}._tester_1wzan_1 ._components_1wzan_6{gap:var(--spacing-8);flex-direction:column;flex-grow:1;display:flex}._tester_1wzan_1 ._components_1wzan_6 ._component_1wzan_6{display:flex}._tester_1wzan_1 ._props_1wzan_15{flex-direction:row}._tester_1wzan_1 ._props_1wzan_15 ._prop_1wzan_15 ._option_1wzan_18{gap:var(--spacing-4);margin:var(--spacing-4) 0;display:flex}
+/*$vite$:1*/

package/dist/lib/App/index.d.ts

@@ -0,0 +1 @@
+export default function App(): import("react").JSX.Element;

package/dist/lib/App/index.js

@@ -0,0 +1,491 @@
+import { a as e, c as t, d as n, f as r, g as i, h as a, l as o, m as s, n as c, o as l, p as u, s as d, t as f, u as p } from "../../DSButton-BXD09god.js";
+import { t as m } from "../../DSProvider-DSGQ7C7X.js";
+import { Children as h, cloneElement as g, useId as _, useState as v } from "react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region node_modules/@material-design-icons/svg/filled/123.svg
+var x = (e) => /* @__PURE__ */ y("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	...e,
+	children: /* @__PURE__ */ y("path", { d: "M7 15H5.5v-4.5H4V9h3v6zm6.5-1.5h-3v-1h2c.55 0 1-.45 1-1V10c0-.55-.45-1-1-1H9v1.5h3v1h-2c-.55 0-1 .45-1 1V15h4.5v-1.5zm6 .5v-4c0-.55-.45-1-1-1H15v1.5h3v1h-2v1h2v1h-3V15h3.5c.55 0 1-.45 1-1z" })
+}), S = (e) => /* @__PURE__ */ y("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: 24,
+	height: 24,
+	viewBox: "0 0 24 24",
+	...e,
+	children: /* @__PURE__ */ y("path", { d: "M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-8.5 12H9v-4.5H7.5V9h3v6zm7 0h-1.75L14 12.75V15h-1.5V9H14v2.25L15.75 9h1.75l-2.25 3 2.25 3z" })
+}), C = {
+	tester: "_tester_1wzan_1",
+	components: "_components_1wzan_6",
+	component: "_component_1wzan_6",
+	props: "_props_1wzan_15",
+	prop: "_prop_1wzan_15",
+	option: "_option_1wzan_18"
+};
+//#endregion
+//#region lib/App/ComponentTester/index.tsx
+function w({ title: e, props: t, children: r }) {
+	function i() {
+		return t.reduce((e, t) => ({
+			...e,
+			[t.name]: t.values[0]
+		}), {});
+	}
+	function a(t) {
+		return {
+			id: `${e} ${t}`,
+			...[
+				"onFocus",
+				"onBlur",
+				"onClick",
+				"onMouseEnter",
+				"onMouseLeave",
+				"onChange"
+			].reduce((e, n) => ({
+				...e,
+				[n]: () => d((e) => e.concat([`${n}: ${t}`]))
+			}), {}),
+			...c
+		};
+	}
+	let o = _(), [c, l] = v(i), [u, d] = v([]);
+	return /* @__PURE__ */ b(n, {
+		title: e,
+		variant: "secondary",
+		style: { backgroundColor: `var(--surface-${c.bg})` },
+		children: [/* @__PURE__ */ b("div", {
+			className: C.tester,
+			children: [/* @__PURE__ */ y("div", {
+				className: C.components,
+				children: h.map(r, (e, t) => /* @__PURE__ */ y("div", {
+					className: C.component,
+					children: g(e, a(t))
+				}, JSON.stringify(c)))
+			}), /* @__PURE__ */ y(n, {
+				className: C.props,
+				children: t.map((e) => /* @__PURE__ */ b("div", {
+					className: C.prop,
+					children: [/* @__PURE__ */ y(s, {
+						variant: "label-md",
+						children: e.name
+					}), e.values.map((t) => {
+						let n = o + e.name + t;
+						function r() {
+							l({
+								...c,
+								[e.name]: t
+							});
+						}
+						return /* @__PURE__ */ b("div", {
+							className: C.option,
+							children: [/* @__PURE__ */ y("input", {
+								id: n,
+								name: n,
+								type: "radio",
+								checked: c[e.name] === t,
+								onChange: r
+							}), /* @__PURE__ */ y(s, {
+								variant: "label-sm",
+								htmlFor: n,
+								children: String(t)
+							})]
+						}, n);
+					})]
+				}, o + e.name))
+			})]
+		}), /* @__PURE__ */ y("div", { children: /* @__PURE__ */ y(s, {
+			variant: "body-xs-mono",
+			children: u.join(", ")
+		}) })]
+	});
+}
+//#endregion
+//#region lib/App/index.tsx
+function T() {
+	let [h, g] = v("light"), [_, C] = v(!1);
+	return /* @__PURE__ */ y(m, {
+		theme: { mode: h },
+		children: /* @__PURE__ */ b("div", {
+			style: {
+				display: "flex",
+				flexDirection: "column",
+				padding: "var(--spacing-16)",
+				gap: "var(--spacing-8)"
+			},
+			children: [
+				/* @__PURE__ */ y(s, {
+					variant: "h1",
+					children: "Stordata Design System"
+				}),
+				/* @__PURE__ */ b("div", {
+					style: {
+						display: "flex",
+						gap: "var(--spacing-4)"
+					},
+					children: [/* @__PURE__ */ y(f, {
+						disabled: h === "light",
+						onClick: () => g("light"),
+						children: "Light mode"
+					}), /* @__PURE__ */ y(f, {
+						disabled: h === "dark",
+						onClick: () => g("dark"),
+						children: "Dark mode"
+					})]
+				}),
+				/* @__PURE__ */ b(w, {
+					title: "DSIcon",
+					props: [{
+						name: "size",
+						values: [
+							"extra-small",
+							"small",
+							"medium",
+							"large",
+							"extra-large"
+						]
+					}],
+					children: [
+						/* @__PURE__ */ y(c, { children: /* @__PURE__ */ y(i, {}) }),
+						/* @__PURE__ */ y(c, { children: /* @__PURE__ */ y(x, {}) }),
+						/* @__PURE__ */ y(c, {
+							render: /* @__PURE__ */ y("div", {}),
+							id: "myIcon",
+							className: "myClass",
+							style: { color: "var(--text-brand)" },
+							children: /* @__PURE__ */ y(S, {})
+						})
+					]
+				}),
+				/* @__PURE__ */ b(w, {
+					title: "DSButton",
+					props: [
+						{
+							name: "color",
+							values: [
+								"brand",
+								"neutral",
+								"danger"
+							]
+						},
+						{
+							name: "variant",
+							values: [
+								"primary",
+								"secondary",
+								"tertiary"
+							]
+						},
+						{
+							name: "size",
+							values: [
+								"small",
+								"medium",
+								"large"
+							]
+						},
+						{
+							name: "disabled",
+							values: [!1, !0]
+						}
+					],
+					children: [
+						/* @__PURE__ */ y(f, { children: "Label" }),
+						/* @__PURE__ */ y(f, { children: "A very long label" }),
+						/* @__PURE__ */ y(f, {
+							startIcon: /* @__PURE__ */ y(i, {}),
+							children: "Label"
+						}),
+						/* @__PURE__ */ y(f, {
+							startIcon: /* @__PURE__ */ y(i, {}),
+							endIcon: /* @__PURE__ */ y(i, {}),
+							children: "Label"
+						}),
+						/* @__PURE__ */ y(f, {
+							startIcon: /* @__PURE__ */ y(i, {}),
+							render: /* @__PURE__ */ y("div", { title: "myTitle" }),
+							id: "myId",
+							className: "myClass"
+						})
+					]
+				}),
+				/* @__PURE__ */ b(w, {
+					title: "DSSegmentedButton",
+					props: [
+						{
+							name: "size",
+							values: [
+								"small",
+								"medium",
+								"large"
+							]
+						},
+						{
+							name: "color",
+							values: [
+								"brand",
+								"neutral",
+								"danger"
+							]
+						},
+						{
+							name: "disabled",
+							values: [!1, !0]
+						}
+					],
+					children: [/* @__PURE__ */ b(t, {
+						defaultValue: ["one"],
+						children: [
+							/* @__PURE__ */ y(f, {
+								value: "one",
+								children: "Option 1"
+							}),
+							/* @__PURE__ */ y(f, {
+								value: "two",
+								children: "Option 2"
+							}),
+							/* @__PURE__ */ y(f, {
+								value: "three",
+								children: "Option 3"
+							})
+						]
+					}), /* @__PURE__ */ b(t, {
+						defaultValue: ["three"],
+						startIcon: /* @__PURE__ */ y(a, {}),
+						children: [
+							/* @__PURE__ */ y(f, {
+								value: "one",
+								children: "Option 1"
+							}),
+							/* @__PURE__ */ y(f, {
+								value: "two",
+								children: "Option 2"
+							}),
+							/* @__PURE__ */ y(f, {
+								value: "three",
+								children: "Option 3"
+							}),
+							/* @__PURE__ */ y(f, {
+								value: "four",
+								children: "Option 4"
+							}),
+							/* @__PURE__ */ y(f, {
+								value: "five",
+								children: "Option 5"
+							})
+						]
+					})]
+				}),
+				/* @__PURE__ */ y(w, {
+					title: "DSRadio",
+					props: [
+						{
+							name: "variant",
+							values: ["on-neutral", "on-brand"]
+						},
+						{
+							name: "disabled",
+							values: [!1, !0]
+						},
+						{
+							name: "bg",
+							values: [
+								"primary",
+								"brand-default",
+								"brand-medium",
+								"brand-subtle"
+							]
+						}
+					],
+					children: /* @__PURE__ */ b(l, {
+						defaultValue: "one",
+						children: [
+							/* @__PURE__ */ y(d, { value: "one" }),
+							/* @__PURE__ */ y(d, { value: "two" }),
+							/* @__PURE__ */ y(d, { value: "three" })
+						]
+					})
+				}),
+				/* @__PURE__ */ b(w, {
+					title: "DSSwitch",
+					props: [
+						{
+							name: "variant",
+							values: ["on-neutral", "on-brand"]
+						},
+						{
+							name: "disabled",
+							values: [!1, !0]
+						},
+						{
+							name: "bg",
+							values: [
+								"primary",
+								"brand-default",
+								"brand-medium",
+								"brand-subtle"
+							]
+						}
+					],
+					children: [/* @__PURE__ */ y(e, {}), /* @__PURE__ */ y(e, { defaultChecked: !0 })]
+				}),
+				/* @__PURE__ */ y(w, {
+					title: "DSTypography",
+					props: [{
+						name: "variant",
+						values: /* @__PURE__ */ "h1-display.h1.h2.h3.h3-bold.h4.display-lg.display-md.body-xl.body-lg.body-lg-medium.body-lg-semibold.body-lg-mono.body-md.body-md-medium.body-md-semibold.body-md-mono.body-sm.body-sm-medium.body-sm-semibold.body-sm-mono.body-xs-mono.label-md.label-sm.button-text-small.button-text-medium.button-text-large.caption-default.helper-text-default".split(".")
+					}],
+					children: /* @__PURE__ */ y(s, { children: "The quick brown fox jumps over the lazy dog" })
+				}),
+				/* @__PURE__ */ b(w, {
+					title: "DSAccordion",
+					props: [{
+						name: "color",
+						values: [
+							"brand",
+							"neutral",
+							"danger"
+						]
+					}, {
+						name: "defaultExpanded",
+						values: [!1, !0]
+					}],
+					children: [
+						/* @__PURE__ */ y(p, { title: "Title" }),
+						/* @__PURE__ */ y(p, {
+							title: "Title",
+							icon: /* @__PURE__ */ y(x, {})
+						}),
+						/* @__PURE__ */ y(p, {
+							title: "Title",
+							icon: /* @__PURE__ */ y(i, {}),
+							startIcon: /* @__PURE__ */ y(x, {}),
+							children: /* @__PURE__ */ y(s, { children: "Content" })
+						})
+					]
+				}),
+				/* @__PURE__ */ b(w, {
+					title: "DSCard",
+					props: [{
+						name: "variant",
+						values: ["primary", "secondary"]
+					}],
+					children: [/* @__PURE__ */ y(n, { children: "Content" }), /* @__PURE__ */ y(n, {
+						title: "Title",
+						children: "Content"
+					})]
+				}),
+				/* @__PURE__ */ b(w, {
+					title: "DSCheckbox",
+					props: [
+						{
+							name: "variant",
+							values: ["on-neutral", "on-brand"]
+						},
+						{
+							name: "disabled",
+							values: [!1, !0]
+						},
+						{
+							name: "bg",
+							values: [
+								"primary",
+								"brand-default",
+								"brand-medium",
+								"brand-subtle"
+							]
+						}
+					],
+					children: [
+						/* @__PURE__ */ y(r, {
+							checked: _,
+							onCheckedChange: C
+						}),
+						/* @__PURE__ */ y(r, { defaultChecked: !0 }),
+						/* @__PURE__ */ y(r, {})
+					]
+				}),
+				/* @__PURE__ */ b("form", {
+					style: {
+						marginTop: "24px",
+						display: "flex",
+						flexDirection: "column",
+						gap: "12px",
+						maxWidth: "400px"
+					},
+					children: [
+						/* @__PURE__ */ y(u, {
+							fullWidth: !0,
+							placeholder: "Test"
+						}),
+						/* @__PURE__ */ y(u, {
+							fullWidth: !0,
+							placeholder: "HelperText",
+							helperText: "This is to help"
+						}),
+						/* @__PURE__ */ y(u, {
+							fullWidth: !0,
+							placeholder: "Error",
+							error: { message: "This is an error message" }
+						}),
+						/* @__PURE__ */ y(u, {
+							fullWidth: !0,
+							placeholder: "Required with label s",
+							label: "Test label S",
+							required: !0
+						}),
+						/* @__PURE__ */ y(o, {
+							options: [
+								{
+									value: "option1",
+									label: "Option 1"
+								},
+								{
+									value: "option2",
+									label: "Option 2"
+								},
+								{
+									value: "option3",
+									label: "Option 3"
+								},
+								{
+									value: "option4",
+									label: "Option 4"
+								},
+								{
+									value: "option5",
+									label: "Option 5"
+								},
+								{
+									value: "option6",
+									label: "Option 6"
+								},
+								{
+									value: "option7",
+									label: "Option 7"
+								},
+								{
+									value: "option8",
+									label: "Option 8"
+								},
+								{
+									value: "option9",
+									label: "Option 9"
+								},
+								{
+									value: "option10",
+									label: "Option 10"
+								}
+							],
+							placeholder: "Select an option"
+						})
+					]
+				})
+			]
+		})
+	});
+}
+//#endregion
+export { T as default };

package/dist/lib/DSAccordion/index.d.ts

@@ -0,0 +1,20 @@
+import { AccordionRootState } from '@base-ui/react/accordion';
+import { ReactNode } from 'react';
+import { ComponentColor } from '../../src/services/useTheme/defaultTheme.ts';
+import { DSCommonProps } from '../DSCommonProps.ts';
+export interface DSAccordionProps extends DSCommonProps<'div', AccordionRootState> {
+    title?: string;
+    color?: DSAccordionColor;
+    icon?: ReactNode;
+    startIcon?: ReactNode;
+    defaultValue?: string[];
+    defaultExpanded?: boolean;
+}
+export type DSAccordionColor = ComponentColor;
+/**
+ * DSAccordion Component
+ *
+ * A custom accordion component built using the base Accordion component from '@base-ui/react/accordion'.
+ * This component supports a title, an icon, and custom content passed as children.
+ */
+export default function DSAccordion(p: DSAccordionProps): import("react").JSX.Element;

package/dist/lib/DSAccordion/index.js

@@ -0,0 +1,2 @@
+import { u as e } from "../../DSButton-BXD09god.js";
+export { e as default };

package/dist/lib/DSButton/index.d.ts

@@ -0,0 +1,20 @@
+import { ButtonState } from '@base-ui/react/button';
+import { ReactElement, ReactNode } from 'react';
+import { ComponentColor, ComponentSize, ComponentVariant } from '../../src/services/useTheme/defaultTheme.ts';
+import { DSCommonProps } from '../DSCommonProps.ts';
+export interface DSButtonProps extends DSCommonProps<'button', ButtonState> {
+    size?: DSButtonSize;
+    variant?: DSButtonVariant;
+    color?: DSButtonColor;
+    startIcon?: ReactNode;
+    endIcon?: ReactNode;
+}
+export type DSButtonSize = ComponentSize;
+export type DSButtonColor = ComponentColor;
+export type DSButtonVariant = ComponentVariant;
+/**
+ * DSButton component
+ *
+ * A customizable button component that supports different sizes, variants, colors, and icons.
+ */
+export default function DSButton(p: DSButtonProps): ReactElement;

package/dist/lib/DSButton/index.js

@@ -0,0 +1,2 @@
+import { t as e } from "../../DSButton-BXD09god.js";
+export { e as default };