@drivenets/design-system 0.0.2 → 0.0.4

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

@@ -0,0 +1,129 @@
+import ds_icon_default from "../ds-icon/ds-icon.js";
+import "../ds-icon/index.js";
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import "../ds-typography/index.js";
+import ds_toast_module_default from "./ds-toast.module.js";
+import { c } from "react/compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Toast, Toaster } from "@ark-ui/react";
+
+//#region src/components/ds-toast/ds-toast.tsx
+const variantIcons = {
+	success: "check_circle",
+	info: "info",
+	warning: "error",
+	error: "cancel"
+};
+/**
+* Design system Toast component
+* This component is used within the Toaster render function
+*/
+const DsToast = (t0) => {
+	const $ = c(19);
+	const { style, className, variant: t1, title, description, onDismiss, actions } = t0;
+	const t2 = variantIcons[t1 === void 0 ? "info" : t1];
+	let t3;
+	if ($[0] !== t2) {
+		t3 = /* @__PURE__ */ jsx(ds_icon_default, {
+			icon: t2,
+			size: "small",
+			filled: true,
+			className: ds_toast_module_default.icon
+		});
+		$[0] = t2;
+		$[1] = t3;
+	} else t3 = $[1];
+	let t4;
+	if ($[2] !== title) {
+		t4 = title && /* @__PURE__ */ jsx(ds_typography_default, {
+			variant: "body-sm-md",
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Toast.Title, { children: title })
+		});
+		$[2] = title;
+		$[3] = t4;
+	} else t4 = $[3];
+	let t5;
+	if ($[4] !== description) {
+		t5 = description && /* @__PURE__ */ jsx(ds_typography_default, {
+			variant: "body-sm-reg",
+			asChild: true,
+			children: /* @__PURE__ */ jsx(Toast.Description, { children: description })
+		});
+		$[4] = description;
+		$[5] = t5;
+	} else t5 = $[5];
+	let t6;
+	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+		t6 = /* @__PURE__ */ jsx(ds_icon_default, {
+			icon: "close",
+			size: "small"
+		});
+		$[6] = t6;
+	} else t6 = $[6];
+	let t7;
+	if ($[7] !== onDismiss) {
+		t7 = /* @__PURE__ */ jsx(Toast.CloseTrigger, {
+			onClick: onDismiss,
+			children: t6
+		});
+		$[7] = onDismiss;
+		$[8] = t7;
+	} else t7 = $[8];
+	let t8;
+	if ($[9] !== actions) {
+		t8 = actions && /* @__PURE__ */ jsx("div", {
+			className: ds_toast_module_default.actions,
+			children: actions
+		});
+		$[9] = actions;
+		$[10] = t8;
+	} else t8 = $[10];
+	let t9;
+	if ($[11] !== className || $[12] !== style || $[13] !== t3 || $[14] !== t4 || $[15] !== t5 || $[16] !== t7 || $[17] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(Toast.Root, {
+			style,
+			className,
+			children: [
+				t3,
+				t4,
+				t5,
+				t7,
+				t8
+			]
+		});
+		$[11] = className;
+		$[12] = style;
+		$[13] = t3;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = t7;
+		$[17] = t8;
+		$[18] = t9;
+	} else t9 = $[18];
+	return t9;
+};
+/**
+* Design system Toast Group component that wraps the Toaster
+*/
+const DsToastGroup = (t0) => {
+	const $ = c(2);
+	const { toaster } = t0;
+	let t1;
+	if ($[0] !== toaster) {
+		t1 = /* @__PURE__ */ jsx(Toaster, {
+			toaster,
+			children: _temp
+		});
+		$[0] = toaster;
+		$[1] = t1;
+	} else t1 = $[1];
+	return t1;
+};
+function _temp(toast) {
+	return /* @__PURE__ */ jsx(DsToast, { ...toast });
+}
+
+//#endregion
+export { DsToastGroup };
+//# sourceMappingURL=ds-toast.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-toast.js","names":["React","CreateToasterReturn","Toast","Toaster","styles","DsToastProps","ToastVariant","IconType","DsIcon","DsTypography","variantIcons","success","info","warning","error","Record","DsToast","t0","$","_c","style","className","variant","t1","title","description","onDismiss","actions","undefined","t2","t3","icon","t4","t5","t6","Symbol","for","t7","t8","t9","DsToastGroup","FC","toaster","_temp","toast"],"sources":["../../../src/components/ds-toast/ds-toast.tsx"],"sourcesContent":["import type React from 'react';\nimport { type CreateToasterReturn, Toast, Toaster } from '@ark-ui/react';\nimport styles from './ds-toast.module.scss';\nimport type { DsToastProps, ToastVariant } from './ds-toast.types';\nimport { type IconType, DsIcon } from '../ds-icon';\nimport { DsTypography } from '../ds-typography';\n\nconst variantIcons = {\n\tsuccess: 'check_circle',\n\tinfo: 'info',\n\twarning: 'error',\n\terror: 'cancel',\n} satisfies Record<ToastVariant, IconType>;\n\n/**\n * Design system Toast component\n * This component is used within the Toaster render function\n */\nconst DsToast = ({\n\tstyle,\n\tclassName,\n\tvariant = 'info',\n\ttitle,\n\tdescription,\n\tonDismiss,\n\tactions,\n}: DsToastProps) => (\n\t<Toast.Root style={style} className={className}>\n\t\t<DsIcon icon={variantIcons[variant]} size=\"small\" filled className={styles.icon} />\n\t\t{title && (\n\t\t\t<DsTypography variant=\"body-sm-md\" asChild>\n\t\t\t\t<Toast.Title>{title}</Toast.Title>\n\t\t\t</DsTypography>\n\t\t)}\n\t\t{description && (\n\t\t\t<DsTypography variant=\"body-sm-reg\" asChild>\n\t\t\t\t<Toast.Description>{description}</Toast.Description>\n\t\t\t</DsTypography>\n\t\t)}\n\t\t<Toast.CloseTrigger onClick={onDismiss}>\n\t\t\t<DsIcon icon=\"close\" size=\"small\" />\n\t\t</Toast.CloseTrigger>\n\t\t{actions && <div className={styles.actions}>{actions}</div>}\n\t</Toast.Root>\n);\n\n/**\n * Design system Toast Group component that wraps the Toaster\n */\nconst DsToastGroup: React.FC<{ toaster: CreateToasterReturn }> = ({ toaster }) => {\n\treturn <Toaster toaster={toaster}>{(toast: DsToastProps) => <DsToast {...toast} />}</Toaster>;\n};\n\nexport { DsToast, DsToastGroup };\n"],"mappings":";;;;;;;;;;AAOA,MAAMU,eAAe;CACpBC,SAAS;CACTC,MAAM;CACNC,SAAS;CACTC,OAAO;CACP;;;;;AAMD,MAAME,WAAUC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,OAAAC,WAAAC,SAAAC,IAAAC,OAAAC,aAAAC,WAAAC,YAAAV;CAUD,MAAAY,KAAAnB,aAPfa,OAAAK,SAAA,SAAAL;CAOoC,IAAAO;AAAA,KAAAZ,EAAA,OAAAW,IAAA;AAAnCC,OAAA,oBAAC;GAAa,MAAAD;GAA4B,MAAA;GAAQ,QAAA;GAAkB,WAAAzB,wBAAM2B;IAAS;AAAAb,IAAA,KAAAW;AAAAX,IAAA,KAAAY;OAAAA,MAAAZ,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,OAAAM,OAAA;AAClFQ,OAAAR,SACA,oBAAC;GAAqB,SAAA;GAAa,SAAA;aAClC,oBAAA,MAAA,mBAAcA,QACf;IACA;AAAAN,IAAA,KAAAM;AAAAN,IAAA,KAAAc;OAAAA,MAAAd,EAAA;CAAA,IAAAe;AAAA,KAAAf,EAAA,OAAAO,aAAA;AACAQ,OAAAR,eACA,oBAAC;GAAqB,SAAA;GAAc,SAAA;aACnC,oBAAA,MAAA,yBAAoBA,cACrB;IACA;AAAAP,IAAA,KAAAO;AAAAP,IAAA,KAAAe;OAAAA,MAAAf,EAAA;CAAA,IAAAgB;AAAA,KAAAhB,EAAA,OAAAiB,OAAAC,IAAA,4BAAA,EAAA;AAEAF,OAAA,oBAAC;GAAY,MAAA;GAAa,MAAA;IAAU;AAAAhB,IAAA,KAAAgB;OAAAA,MAAAhB,EAAA;CAAA,IAAAmB;AAAA,KAAAnB,EAAA,OAAAQ,WAAA;AADrCW,OAAA,oBAAA,MAAA;GAA6BX,SAAAA;aAC5BQ;IACoB;AAAAhB,IAAA,KAAAQ;AAAAR,IAAA,KAAAmB;OAAAA,MAAAnB,EAAA;CAAA,IAAAoB;AAAA,KAAApB,EAAA,OAAAS,SAAA;AACpBW,OAAAX,WAAW,oBAAA;GAAgB,WAAAvB,wBAAMuB;aAAWA;IAAc;AAAAT,IAAA,KAAAS;AAAAT,IAAA,MAAAoB;OAAAA,MAAApB,EAAA;CAAA,IAAAqB;AAAA,KAAArB,EAAA,QAAAG,aAAAH,EAAA,QAAAE,SAAAF,EAAA,QAAAY,MAAAZ,EAAA,QAAAc,MAAAd,EAAA,QAAAe,MAAAf,EAAA,QAAAmB,MAAAnB,EAAA,QAAAoB,IAAA;AAf5DC,OAAA,qBAAA,MAAA;GAAmBnB;GAAkBC;;IACpCS;IACCE;IAKAC;IAKDI;IAGCC;;IACW;AAAApB,IAAA,MAAAG;AAAAH,IAAA,MAAAE;AAAAF,IAAA,MAAAY;AAAAZ,IAAA,MAAAc;AAAAd,IAAA,MAAAe;AAAAf,IAAA,MAAAmB;AAAAnB,IAAA,MAAAoB;AAAApB,IAAA,MAAAqB;OAAAA,MAAArB,EAAA;AAAA,QAhBbqB;;;;;AAsBD,MAAMC,gBAA2DvB,OAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAC,MAAA,EAAAuB,YAAAzB;CAAW,IAAAM;AAAA,KAAAL,EAAA,OAAAwB,SAAA;AACrEnB,OAAA,oBAAC;GAAiBmB;aAAUC;IAA0D;AAAAzB,IAAA,KAAAwB;AAAAxB,IAAA,KAAAK;OAAAA,MAAAL,EAAA;AAAA,QAAtFK;;AADyD,SAAAoB,MAAAC,OAAA;AAAA,QACJ,oBAAC,WAAO,GAAKA,QAAS"}

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

@@ -0,0 +1,11 @@
+
+//#region src/components/ds-toast/ds-toast.module.scss
+var ds_toast_module_default = {
+	"slide-in": "_slide-in_17obg_1",
+	"fade-out": "_fade-out_17obg_1",
+	"actions": "_actions_17obg_1",
+	"icon": "_icon_17obg_1"
+};
+
+//#endregion
+exports.default = ds_toast_module_default;

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

@@ -0,0 +1,11 @@
+//#region src/components/ds-toast/ds-toast.module.scss
+var ds_toast_module_default = {
+	"slide-in": "_slide-in_17obg_1",
+	"fade-out": "_fade-out_17obg_1",
+	"actions": "_actions_17obg_1",
+	"icon": "_icon_17obg_1"
+};
+
+//#endregion
+export { ds_toast_module_default as default };
+//# sourceMappingURL=ds-toast.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-toast.module.js","names":[],"sources":["../../../src/components/ds-toast/ds-toast.module.scss"],"sourcesContent":["[data-scope='toast'][data-part='root'] {\n\tdisplay: grid;\n\tgrid-template-columns: auto 1fr auto;\n\tgrid-template-rows: auto 1fr auto;\n\tgrid-template-areas:\n\t\t'icon title close'\n\t\t'description description description'\n\t\t'actions actions actions';\n\talign-items: start;\n\tpadding: var(--spacing-standard);\n\tborder-radius: 4px;\n\tcolumn-gap: var(--spacing-xs);\n\trow-gap: var(--spacing-4xs);\n\tcolor: var(--color-font-on-action);\n\tbox-shadow: 0 1.25px 4px 0 rgba(0, 0, 0, 0.25);\n\t// approx. 6 columns (64 * 2)\n\tmin-width: 384px;\n\t// approx. 10 columns (64 * 10)\n\tmax-width: 640px;\n\toverflow-wrap: anywhere;\n\ttranslate: var(--x) var(--y);\n\tz-index: var(--z-index);\n\n\twill-change: translate, opacity, scale;\n\n\t&[data-state='open'] {\n\t\tanimation: slide-in 0.35s ease-in-out both;\n\t\ttransition: 0.35s all;\n\t}\n\n\t&[data-state='closed'] {\n\t\tanimation: fade-out 0.25s ease-out forwards;\n\t}\n\n\t&[data-type='success'] {\n\t\tbackground: var(--color-background-success-strong);\n\t}\n\n\t&[data-type='info'] {\n\t\tbackground: var(--color-background-info-strong);\n\t}\n\n\t&[data-type='warning'] {\n\t\tbackground: var(--color-background-warning-strong);\n\t}\n\n\t&[data-type='error'] {\n\t\tbackground: var(--color-background-danger-strong);\n\t}\n\n\t&:not(:has([data-scope='toast'][data-part='title'])) {\n\t\tgrid-template-columns: auto 1fr auto auto;\n\t\tgrid-template-areas: 'icon description actions close';\n\t\talign-items: center;\n\n\t\t.actions {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n}\n\n[data-scope='toast'][data-part='close-trigger'] {\n\tgrid-area: close;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\tborder-radius: var(--spacing-4xs);\n\n\t&:hover {\n\t\tbackground: rgba(0, 0, 0, 0.05);\n\t}\n\n\t&:focus-visible {\n\t\toutline: 2px solid currentColor;\n\t\toutline-offset: 1px;\n\t}\n}\n\n[data-scope='toast'][data-part='title'] {\n\tgrid-area: title;\n}\n\n[data-scope='toast'][data-part='description'] {\n\tgrid-area: description;\n}\n\n.icon {\n\tgrid-area: icon;\n\tcolor: var(--color-icon-inverse);\n}\n\n.actions {\n\tgrid-area: actions;\n\tmargin-top: var(--spacing-sm);\n}\n\n@media (max-width: 640px) {\n\t[data-scope='toast'][data-part='group'] {\n\t\twidth: 100%;\n\t}\n\n\t[data-scope='toast'][data-part='root'] {\n\t\tinset-inline: 0;\n\t\twidth: calc(100% - var(--gap) * 2);\n\t}\n}\n\n@keyframes slide-in {\n\t0% {\n\t\topacity: 0;\n\t\tscale: 0.9;\n\t}\n\n\t60% {\n\t\tscale: 1.05;\n\t}\n\n\t100% {\n\t\topacity: 1;\n\t\tscale: 1;\n\t}\n}\n\n@keyframes fade-out {\n\t0% {\n\t\topacity: 1;\n\t\ttranslate: 0 var(--offset);\n\t}\n\n\t100% {\n\t\topacity: 0;\n\t\ttranslate: 0 var(--offset);\n\t}\n}\n"],"mappings":""}

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

@@ -0,0 +1,53 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-toast/ds-toast.types.d.ts
+declare const toastVariants: readonly ["info", "success", "warning", "error"];
+type ToastVariant = (typeof toastVariants)[number];
+type DsToastConfig = {
+  persistent?: never;
+  /**
+   * Duration in milliseconds before auto-dismiss (ignored if persistent is true)
+   * @default 6000 (6 seconds)
+   */
+  duration?: number;
+} | {
+  duration?: never;
+  /**
+   * Whether the toast should persist until manually dismissed
+   * @default false
+   */
+  persistent?: boolean;
+};
+type DsToastProps = DsToastConfig & {
+  /**
+   * Toast type that determines styling and icon
+   */
+  variant?: ToastVariant;
+  /**
+   * Toast title
+   */
+  title?: ReactNode;
+  /**
+   * Toast description/message
+   */
+  description?: ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+  /**
+   * Optional action buttons to be rendered inside the component
+   */
+  actions?: ReactNode;
+  /**
+   * Callback when toast is dismissed
+   */
+  onDismiss?: () => void;
+};
+//#endregion
+export { DsToastProps, ToastVariant };
+//# sourceMappingURL=ds-toast.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-toast.types.d.cts","names":[],"sources":["../../../src/components/ds-toast/ds-toast.types.tsx"],"sourcesContent":[],"mappings":";;;cAEa;KACD,YAAA,WAAuB;AADtB,KAGD,aAAA,GAHiE;EACjE,UAAA,CAAA,EAAA,KAAY;EAEZ;AAkBZ;;;EAQS,QAAA,CAAA,EAAA,MAAA;CAIM,GAAA;EAQN,QAAA,CAAA,EAAA,KAAA;EAIE;;;;;;KAxBC,YAAA,GAAe;;;;YAIhB;;;;UAIF;;;;gBAIM;;;;;;;;UAQN;;;;YAIE"}

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

@@ -0,0 +1,53 @@
+import { CSSProperties, ReactNode } from "react";
+
+//#region src/components/ds-toast/ds-toast.types.d.ts
+declare const toastVariants: readonly ["info", "success", "warning", "error"];
+type ToastVariant = (typeof toastVariants)[number];
+type DsToastConfig = {
+  persistent?: never;
+  /**
+   * Duration in milliseconds before auto-dismiss (ignored if persistent is true)
+   * @default 6000 (6 seconds)
+   */
+  duration?: number;
+} | {
+  duration?: never;
+  /**
+   * Whether the toast should persist until manually dismissed
+   * @default false
+   */
+  persistent?: boolean;
+};
+type DsToastProps = DsToastConfig & {
+  /**
+   * Toast type that determines styling and icon
+   */
+  variant?: ToastVariant;
+  /**
+   * Toast title
+   */
+  title?: ReactNode;
+  /**
+   * Toast description/message
+   */
+  description?: ReactNode;
+  /**
+   * Additional CSS class names
+   */
+  className?: string;
+  /**
+   * Additional styles to apply to the component
+   */
+  style?: CSSProperties;
+  /**
+   * Optional action buttons to be rendered inside the component
+   */
+  actions?: ReactNode;
+  /**
+   * Callback when toast is dismissed
+   */
+  onDismiss?: () => void;
+};
+//#endregion
+export { DsToastProps, ToastVariant };
+//# sourceMappingURL=ds-toast.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-toast.types.d.ts","names":[],"sources":["../../../src/components/ds-toast/ds-toast.types.tsx"],"sourcesContent":[],"mappings":";;;cAEa;KACD,YAAA,WAAuB;AADtB,KAGD,aAAA,GAHiE;EACjE,UAAA,CAAA,EAAA,KAAY;EAEZ;AAkBZ;;;EAQS,QAAA,CAAA,EAAA,MAAA;CAIM,GAAA;EAQN,QAAA,CAAA,EAAA,KAAA;EAIE;;;;;;KAxBC,YAAA,GAAe;;;;YAIhB;;;;UAIF;;;;gBAIM;;;;;;;;UAQN;;;;YAIE"}

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

@@ -0,0 +1 @@
+const require_ds_toast_context = require('./ds-toast-context.cjs');

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

@@ -0,0 +1,2 @@
+import { DsToastProps, ToastVariant } from "./ds-toast.types.js";
+import { DsToastContextType, DsToastProvider, DsToastProviderProps, useToaster } from "./ds-toast-context.js";

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

@@ -0,0 +1 @@
+import { DsToastProvider, useToaster } from "./ds-toast-context.js";

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

@@ -0,0 +1,74 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_typography = require('../ds-typography/ds-typography.cjs');
+require('../ds-typography/index.cjs');
+const require_ds_tooltip_module = require('./ds-tooltip.module.cjs');
+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 __radix_ui_react_tooltip = require("@radix-ui/react-tooltip");
+__radix_ui_react_tooltip = require_rolldown_runtime.__toESM(__radix_ui_react_tooltip);
+
+//#region src/components/ds-tooltip/ds-tooltip.tsx
+const DsTooltip = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(11);
+	const { content, children } = t0;
+	if (content === void 0) return children;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_tooltip.Trigger, {
+			asChild: true,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = (0, classnames.default)(require_ds_tooltip_module.default.tooltip);
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== content) {
+		t3 = (0, react.isValidElement)(content) ? content : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ds_typography.default, {
+			variant: "body-xs-reg",
+			className: require_ds_tooltip_module.default.content,
+			children: content
+		});
+		$[3] = content;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_tooltip.Arrow, { className: require_ds_tooltip_module.default.arrow });
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t3) {
+		t5 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_tooltip.Portal, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_tooltip.Content, {
+			className: t2,
+			side: "top",
+			align: "center",
+			sideOffset: 4,
+			children: [t3, t4]
+		}) });
+		$[6] = t3;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t1 || $[9] !== t5) {
+		t6 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__radix_ui_react_tooltip.Provider, {
+			delayDuration: 200,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__radix_ui_react_tooltip.Root, { children: [t1, t5] })
+		});
+		$[8] = t1;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
+};
+var ds_tooltip_default = DsTooltip;
+
+//#endregion
+exports.default = ds_tooltip_default;

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

@@ -0,0 +1,8 @@
+import { DsTooltipProps } from "./ds-tooltip.types.cjs";
+import { FC } from "react";
+
+//#region src/components/ds-tooltip/ds-tooltip.d.ts
+declare const DsTooltip: FC<DsTooltipProps>;
+//#endregion
+export { DsTooltip };
+//# sourceMappingURL=ds-tooltip.d.cts.map

package/dist/components/ds-tooltip/ds-tooltip.d.cts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tooltip.d.cts","names":[],"sources":["../../../src/components/ds-tooltip/ds-tooltip.tsx"],"sourcesContent":[],"mappings":";;;;cAOM,WAAW,GAAG"}

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

@@ -0,0 +1,8 @@
+import { DsTooltipProps } from "./ds-tooltip.types.js";
+import { FC } from "react";
+
+//#region src/components/ds-tooltip/ds-tooltip.d.ts
+declare const DsTooltip: FC<DsTooltipProps>;
+//#endregion
+export { DsTooltip };
+//# sourceMappingURL=ds-tooltip.d.ts.map

package/dist/components/ds-tooltip/ds-tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tooltip.d.ts","names":[],"sources":["../../../src/components/ds-tooltip/ds-tooltip.tsx"],"sourcesContent":[],"mappings":";;;;cAOM,WAAW,GAAG"}

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

@@ -0,0 +1,72 @@
+import ds_typography_default from "../ds-typography/ds-typography.js";
+import "../ds-typography/index.js";
+import ds_tooltip_module_default from "./ds-tooltip.module.js";
+import { c } from "react/compiler-runtime";
+import classNames from "classnames";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { isValidElement } from "react";
+import * as Tooltip from "@radix-ui/react-tooltip";
+
+//#region src/components/ds-tooltip/ds-tooltip.tsx
+const DsTooltip = (t0) => {
+	const $ = c(11);
+	const { content, children } = t0;
+	if (content === void 0) return children;
+	let t1;
+	if ($[0] !== children) {
+		t1 = /* @__PURE__ */ jsx(Tooltip.Trigger, {
+			asChild: true,
+			children
+		});
+		$[0] = children;
+		$[1] = t1;
+	} else t1 = $[1];
+	let t2;
+	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+		t2 = classNames(ds_tooltip_module_default.tooltip);
+		$[2] = t2;
+	} else t2 = $[2];
+	let t3;
+	if ($[3] !== content) {
+		t3 = isValidElement(content) ? content : /* @__PURE__ */ jsx(ds_typography_default, {
+			variant: "body-xs-reg",
+			className: ds_tooltip_module_default.content,
+			children: content
+		});
+		$[3] = content;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t4 = /* @__PURE__ */ jsx(Tooltip.Arrow, { className: ds_tooltip_module_default.arrow });
+		$[5] = t4;
+	} else t4 = $[5];
+	let t5;
+	if ($[6] !== t3) {
+		t5 = /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
+			className: t2,
+			side: "top",
+			align: "center",
+			sideOffset: 4,
+			children: [t3, t4]
+		}) });
+		$[6] = t3;
+		$[7] = t5;
+	} else t5 = $[7];
+	let t6;
+	if ($[8] !== t1 || $[9] !== t5) {
+		t6 = /* @__PURE__ */ jsx(Tooltip.Provider, {
+			delayDuration: 200,
+			children: /* @__PURE__ */ jsxs(Tooltip.Root, { children: [t1, t5] })
+		});
+		$[8] = t1;
+		$[9] = t5;
+		$[10] = t6;
+	} else t6 = $[10];
+	return t6;
+};
+var ds_tooltip_default = DsTooltip;
+
+//#endregion
+export { ds_tooltip_default as default };
+//# sourceMappingURL=ds-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tooltip.js","names":["FC","isValidElement","Tooltip","classNames","styles","DsTooltipProps","DsTypography","DsTooltip","t0","$","_c","content","children","undefined","t1","t2","Symbol","for","tooltip","t3","t4","arrow","t5","t6"],"sources":["../../../src/components/ds-tooltip/ds-tooltip.tsx"],"sourcesContent":["import { type FC, isValidElement } from 'react';\nimport * as Tooltip from '@radix-ui/react-tooltip';\nimport classNames from 'classnames';\nimport styles from './ds-tooltip.module.scss';\nimport type { DsTooltipProps } from './ds-tooltip.types';\nimport { DsTypography } from '../ds-typography';\n\nconst DsTooltip: FC<DsTooltipProps> = ({ content, children }) => {\n\tif (content === undefined) {\n\t\treturn children;\n\t}\n\treturn (\n\t\t<Tooltip.Provider delayDuration={200}>\n\t\t\t<Tooltip.Root>\n\t\t\t\t<Tooltip.Trigger asChild>{children}</Tooltip.Trigger>\n\t\t\t\t<Tooltip.Portal>\n\t\t\t\t\t<Tooltip.Content className={classNames(styles.tooltip)} side=\"top\" align=\"center\" sideOffset={4}>\n\t\t\t\t\t\t{isValidElement(content) ? (\n\t\t\t\t\t\t\tcontent\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<DsTypography variant=\"body-xs-reg\" className={styles.content}>\n\t\t\t\t\t\t\t\t{content}\n\t\t\t\t\t\t\t</DsTypography>\n\t\t\t\t\t\t)}\n\t\t\t\t\t\t<Tooltip.Arrow className={styles.arrow} />\n\t\t\t\t\t</Tooltip.Content>\n\t\t\t\t</Tooltip.Portal>\n\t\t\t</Tooltip.Root>\n\t\t</Tooltip.Provider>\n\t);\n};\n\nexport default DsTooltip;\n"],"mappings":";;;;;;;;;;AAOA,MAAMO,aAAgCC,OAAA;CAAA,MAAAC,IAAAC,EAAA,GAAA;CAAC,MAAA,EAAAC,SAAAC,aAAAJ;AACtC,KAAIG,YAAYE,OAAS,QACjBD;CACP,IAAAE;AAAA,KAAAL,EAAA,OAAAG,UAAA;AAIEE,OAAA,oBAAA,QAAA;GAAiB,SAAA;GAASF;IAA2B;AAAAH,IAAA,KAAAG;AAAAH,IAAA,KAAAK;OAAAA,MAAAL,EAAA;CAAA,IAAAM;AAAA,KAAAN,EAAA,OAAAO,OAAAC,IAAA,4BAAA,EAAA;AAExBF,OAAAZ,WAAWC,0BAAMc,QAAS;AAAAT,IAAA,KAAAM;OAAAA,MAAAN,EAAA;CAAA,IAAAU;AAAA,KAAAV,EAAA,OAAAE,SAAA;AACpDQ,OAAAlB,eAAeU,QAMf,GANAA,UAGA,oBAAC;GAAqB,SAAA;GAAyB,WAAAP,0BAAMO;aACnDA;IAEF;AAAAF,IAAA,KAAAE;AAAAF,IAAA,KAAAU;OAAAA,MAAAV,EAAA;CAAA,IAAAW;AAAA,KAAAX,EAAA,OAAAO,OAAAC,IAAA,4BAAA,EAAA;AACDG,OAAA,oBAAA,QAAA,SAA0B,WAAAhB,0BAAMiB,QAAU;AAAAZ,IAAA,KAAAW;OAAAA,MAAAX,EAAA;CAAA,IAAAa;AAAA,KAAAb,EAAA,OAAAU,IAAA;AAT5CG,OAAA,oBAAA,QAAA,oBACC,qBAAA,QAAA;GAA4B,WAAAP;GAAiC,MAAA;GAAY,OAAA;GAAqB,YAAA;cAC5FI,IAODC;IAEF,GAAiB;AAAAX,IAAA,KAAAU;AAAAV,IAAA,KAAAa;OAAAA,MAAAb,EAAA;CAAA,IAAAc;AAAA,KAAAd,EAAA,OAAAK,MAAAL,EAAA,OAAAa,IAAA;AAdnBC,OAAA,oBAAA,QAAA;GAAiC,eAAA;aAChC,qBAAA,QAAA,mBACCT,IACAQ,MAaF;IAAmB;AAAAb,IAAA,KAAAK;AAAAL,IAAA,KAAAa;AAAAb,IAAA,MAAAc;OAAAA,MAAAd,EAAA;AAAA,QAhBnBc;;AAoBF,yBAAehB"}

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

@@ -0,0 +1,10 @@
+
+//#region src/components/ds-tooltip/ds-tooltip.module.scss
+var ds_tooltip_module_default = {
+	"tooltip": "_tooltip_93aez_1",
+	"content": "_content_93aez_1",
+	"arrow": "_arrow_93aez_1"
+};
+
+//#endregion
+exports.default = ds_tooltip_module_default;

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

@@ -0,0 +1,10 @@
+//#region src/components/ds-tooltip/ds-tooltip.module.scss
+var ds_tooltip_module_default = {
+	"tooltip": "_tooltip_93aez_1",
+	"content": "_content_93aez_1",
+	"arrow": "_arrow_93aez_1"
+};
+
+//#endregion
+export { ds_tooltip_module_default as default };
+//# sourceMappingURL=ds-tooltip.module.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tooltip.module.js","names":[],"sources":["../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/components/ds-tooltip/ds-tooltip.module.scss","../../../file:/home/runner/work/design-system/design-system/packages/design-system/src/styles/_typography.scss"],"sourcesContent":["@use '../../styles/typography';\n\n.tooltip {\n\tcolor: var(--color-font-on-action);\n\tbackground-color: var(--color-background-brand);\n\tpadding: var(--spacing-xs) var(--spacing-sm);\n\tborder-radius: var(--exo-spacing-2x-small);\n\t// approx. 6 grid columns\n\tmax-width: 384px;\n\tz-index: 9999;\n\n\t.content {\n\t\t@include typography.line-clamp(3);\n\t}\n}\n\n.arrow {\n\tfill: var(--neutral-1);\n}\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+//#region src/components/ds-tooltip/ds-tooltip.types.d.ts
+interface DsTooltipProps {
+  /**
+   * Tooltip content
+   */
+  content?: string | ReactNode;
+  /**
+   * The content to be rendered inside the tooltip
+   */
+  children: ReactNode;
+}
+//#endregion
+export { DsTooltipProps };
+//# sourceMappingURL=ds-tooltip.types.d.cts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tooltip.types.d.cts","names":[],"sources":["../../../src/components/ds-tooltip/ds-tooltip.types.tsx"],"sourcesContent":[],"mappings":";;;UAEiB,cAAA;;AAAjB;;qBAIoB;;;;YAIT"}

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

@@ -0,0 +1,16 @@
+import { ReactNode } from "react";
+
+//#region src/components/ds-tooltip/ds-tooltip.types.d.ts
+interface DsTooltipProps {
+  /**
+   * Tooltip content
+   */
+  content?: string | ReactNode;
+  /**
+   * The content to be rendered inside the tooltip
+   */
+  children: ReactNode;
+}
+//#endregion
+export { DsTooltipProps };
+//# sourceMappingURL=ds-tooltip.types.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ds-tooltip.types.d.ts","names":[],"sources":["../../../src/components/ds-tooltip/ds-tooltip.types.tsx"],"sourcesContent":[],"mappings":";;;UAEiB,cAAA;;AAAjB;;qBAIoB;;;;YAIT"}

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

@@ -0,0 +1 @@
+const require_ds_tooltip = require('./ds-tooltip.cjs');

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

@@ -0,0 +1,2 @@
+import { DsTooltipProps } from "./ds-tooltip.types.js";
+import { DsTooltip } from "./ds-tooltip.js";

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

@@ -0,0 +1 @@
+import ds_tooltip_default from "./ds-tooltip.js";

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

@@ -0,0 +1,65 @@
+const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
+const require_ds_typography_config = require('./ds-typography.config.cjs');
+const require_ds_typography_module = require('./ds-typography.module.cjs');
+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 __radix_ui_react_slot = require("@radix-ui/react-slot");
+
+//#region src/components/ds-typography/ds-typography.tsx
+const DsTypography = (t0) => {
+	const $ = (0, react_compiler_runtime.c)(16);
+	let children;
+	let className;
+	let props;
+	let ref;
+	let t1;
+	let variant;
+	if ($[0] !== t0) {
+		({ref, variant, asChild: t1, className, children, ...props} = t0);
+		$[0] = t0;
+		$[1] = children;
+		$[2] = className;
+		$[3] = props;
+		$[4] = ref;
+		$[5] = t1;
+		$[6] = variant;
+	} else {
+		children = $[1];
+		className = $[2];
+		props = $[3];
+		ref = $[4];
+		t1 = $[5];
+		variant = $[6];
+	}
+	const Component = (t1 === void 0 ? false : t1) ? __radix_ui_react_slot.Slot : require_ds_typography_config.semanticElementMap[variant];
+	const t2 = require_ds_typography_module.default[variant];
+	let t3;
+	if ($[7] !== className || $[8] !== t2) {
+		t3 = (0, classnames.default)(t2, className);
+		$[7] = className;
+		$[8] = t2;
+		$[9] = t3;
+	} else t3 = $[9];
+	let t4;
+	if ($[10] !== Component || $[11] !== children || $[12] !== props || $[13] !== ref || $[14] !== t3) {
+		t4 = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Component, {
+			ref,
+			className: t3,
+			...props,
+			children
+		});
+		$[10] = Component;
+		$[11] = children;
+		$[12] = props;
+		$[13] = ref;
+		$[14] = t3;
+		$[15] = t4;
+	} else t4 = $[15];
+	return t4;
+};
+var ds_typography_default = DsTypography;
+
+//#endregion
+exports.default = ds_typography_default;

package/dist/components/ds-typography/ds-typography.config.cjs

@@ -0,0 +1,30 @@
+
+//#region src/components/ds-typography/ds-typography.config.ts
+const semanticElementMap = {
+	"body-md-reg": "p",
+	"body-md-md": "p",
+	"body-md-semi-bold": "p",
+	"body-md-bold": "p",
+	"body-md-link": "a",
+	"body-sm-reg": "span",
+	"body-sm-md": "span",
+	"body-sm-semi-bold": "span",
+	"body-sm-bold": "span",
+	"body-sm-link": "a",
+	"body-xs-reg": "span",
+	"body-xs-md": "span",
+	"body-xs-semi-bold": "span",
+	"body-xs-bold": "span",
+	"body-xs-link": "a",
+	"code-sm-reg": "code",
+	"code-sm-semi-bold": "code",
+	"code-xs-reg": "code",
+	"code-xs-semi-bold": "code",
+	heading1: "h1",
+	heading2: "h2",
+	heading3: "h3",
+	heading4: "h4"
+};
+
+//#endregion
+exports.semanticElementMap = semanticElementMap;