themelia-react-ui 1.0.2 → 2.0.0

package/dist/{button-BZDasD04.js → button-BS3KDg00.js}

@@ -1,114 +1,115 @@
 "use client";
-import { _ as e, r as t, s as n } from "./ui-provider-DRPn3qNl.js";
+import { _ as e, r as t, s as n } from "./ui-provider-D2_TeLqw.js";
 import { r } from "./theme-scope-kStaAer0.js";
 import { useStrings as i } from "./lib/strings.js";
-import { t as a } from "./utils-BvH9PSmq.js";
-import { a as o } from "./typography-BxQgiZyw.js";
-import { t as s } from "./anchored-positioning-DPnKTvNs.js";
-import { t as c } from "./motion-recipes-B6jKXEcN.js";
-import { t as l } from "./slot-CLF9kLrS.js";
-import { t as u } from "./button-BZyfTvwm.js";
-import * as d from "react";
-import { createContext as f, forwardRef as p, useCallback as m, useContext as h, useEffect as g, useId as _, useLayoutEffect as v, useRef as y, useState as b } from "react";
-import { Fragment as x, jsx as S, jsxs as C } from "react/jsx-runtime";
-import { Loader2 as w } from "lucide-react";
-import { mergeProps as T } from "@base-ui/react/merge-props";
-import { cva as E } from "class-variance-authority";
+import { t as a } from "./utils-Cospvlj1.js";
+import { t as o } from "./affordance-geometry.generated-CCIXb2A1.js";
+import { s } from "./typography-CAr3dQhX.js";
+import { t as c } from "./anchored-positioning-DPnKTvNs.js";
+import { t as l } from "./motion-recipes-B6jKXEcN.js";
+import { t as u } from "./slot-CLF9kLrS.js";
+import { t as d } from "./button-R9CCoH7A.js";
+import * as f from "react";
+import { createContext as p, forwardRef as m, useCallback as h, useContext as g, useEffect as _, useId as v, useLayoutEffect as y, useRef as b, useState as x } from "react";
+import { Fragment as S, jsx as C, jsxs as w } from "react/jsx-runtime";
+import { Loader2 as T } from "lucide-react";
+import { mergeProps as E } from "@base-ui/react/merge-props";
+import { cva as ee } from "class-variance-authority";
 import { Tooltip as D } from "@base-ui/react/tooltip";
 //#region src/components/ui/tooltip.tsx
 function O({ delay: e = 0, delayDuration: t, ...n }) {
-	return /* @__PURE__ */ S(D.Provider, {
+	return /* @__PURE__ */ C(D.Provider, {
 		"data-slot": "tooltip-provider",
 		delay: t ?? e,
 		...n
 	});
 }
 function k({ ...e }) {
-	return /* @__PURE__ */ S(O, { children: /* @__PURE__ */ S(D.Root, {
+	return /* @__PURE__ */ C(O, { children: /* @__PURE__ */ C(D.Root, {
 		"data-slot": "tooltip",
 		...e
 	}) });
 }
 function A({ asChild: e = !1, render: t, children: n, ...r }) {
-	let i = e ? /* @__PURE__ */ S(l, {}) : void 0, a = typeof t == "function" ? ((e, n) => {
+	let i = e ? /* @__PURE__ */ C(u, {}) : void 0, a = typeof t == "function" ? ((e, n) => {
 		let { nativeButton: r, ...i } = e;
 		return t(i, n);
 	}) : t;
-	return /* @__PURE__ */ S(D.Trigger, {
+	return /* @__PURE__ */ C(D.Trigger, {
 		"data-slot": "tooltip-trigger",
 		render: i ?? a,
 		...r,
 		children: n
 	});
 }
-function j({ className: e, container: t, side: n = "top", sideOffset: i = 4, align: o = "center", alignOffset: l = 0, positionMethod: u = s, children: d, ...f }) {
+function j({ className: e, container: t, side: n = "top", sideOffset: i = 4, align: o = "center", alignOffset: s = 0, positionMethod: u = c, children: d, ...f }) {
 	let p = r(t);
-	return /* @__PURE__ */ S(D.Portal, {
+	return /* @__PURE__ */ C(D.Portal, {
 		container: p,
-		children: /* @__PURE__ */ S(D.Positioner, {
+		children: /* @__PURE__ */ C(D.Positioner, {
 			positionMethod: u,
 			align: o,
-			alignOffset: l,
+			alignOffset: s,
 			side: n,
 			sideOffset: i,
 			className: "isolate z-50",
-			children: /* @__PURE__ */ C(D.Popup, {
+			children: /* @__PURE__ */ w(D.Popup, {
 				"data-slot": "tooltip-content",
-				className: a(c.popup, "rounded-radius px-space-sm py-space-xs text-xs bg-inverse-background text-inverse-foreground z-50 w-fit max-w-xs origin-(--transform-origin)", e),
+				className: a(l.popup, "rounded-radius px-space-md py-space-xs text-xs bg-inverse-background text-inverse-foreground z-50 w-fit max-w-xs origin-(--transform-origin)", e),
 				...f,
-				children: [d, /* @__PURE__ */ S(D.Arrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-inverse-background fill-inverse-background z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
+				children: [d, /* @__PURE__ */ C(D.Arrow, { className: "size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 bg-inverse-background fill-inverse-background z-50 data-[side=bottom]:top-1 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" })]
 			})
 		})
 	});
 }
 //#endregion
 //#region src/components/base/display/tooltip.tsx
-var M = f(void 0), N = f(!1);
+var M = p(void 0), N = p(!1);
 function P(e) {
-	let t = h(N), n = _(), [r, i] = b(n), a = /* @__PURE__ */ S(M.Provider, {
+	let t = g(N), n = v(), [r, i] = x(n), a = /* @__PURE__ */ C(M.Provider, {
 		value: {
 			id: r,
 			setId: i
 		},
-		children: /* @__PURE__ */ S(D.Root, {
+		children: /* @__PURE__ */ C(D.Root, {
 			"data-slot": "tooltip",
 			...e
 		})
 	});
-	return t ? a : /* @__PURE__ */ S(O, { children: a });
+	return t ? a : /* @__PURE__ */ C(O, { children: a });
 }
 function F(e) {
-	return /* @__PURE__ */ S(N.Provider, {
+	return /* @__PURE__ */ C(N.Provider, {
 		value: !0,
-		children: /* @__PURE__ */ S(O, { ...e })
+		children: /* @__PURE__ */ C(O, { ...e })
 	});
 }
 function I({ className: e, ...t }) {
-	let n = h(M)?.id;
-	return /* @__PURE__ */ S(A, {
+	let n = g(M)?.id;
+	return /* @__PURE__ */ C(A, {
 		className: a("tooltip-trigger--component active:translate-y-0!", e),
 		...t,
 		"aria-describedby": [t["aria-describedby"], n].filter(Boolean).join(" ") || void 0
 	});
 }
 function L({ children: e, className: t, ...n }) {
-	let r = h(M), i = n.id ?? r?.id;
-	v(() => {
+	let r = g(M), i = n.id ?? r?.id;
+	y(() => {
 		i && r?.setId(i);
 	}, [i, r?.setId]);
-	let s = typeof e == "string" || typeof e == "number" || typeof e == "bigint" ? /* @__PURE__ */ S(o, {
+	let o = typeof e == "string" || typeof e == "number" || typeof e == "bigint" ? /* @__PURE__ */ C(s, {
 		tag: "span",
 		size: "inherit",
 		lineHeight: "snug",
 		className: "tooltip-content--text text-inherit",
 		children: e
 	}) : e;
-	return /* @__PURE__ */ S(j, {
+	return /* @__PURE__ */ C(j, {
 		id: i,
 		role: "tooltip",
-		className: a("tooltip-content--component max-w-xs rounded-radius px-space-sm py-space-xs text-xs leading-snug", t),
+		className: a("tooltip-content--component max-w-xs rounded-radius px-space-md py-space-xs text-xs leading-snug", t),
 		...n,
-		children: s
+		children: o
 	});
 }
 P.displayName = "Tooltip", F.displayName = "TooltipProvider", I.displayName = "TooltipTrigger", L.displayName = "TooltipContent";
@@ -126,7 +127,7 @@ var R = {
 	isLoading: "cursor-wait",
 	icon: "base-button-icon pointer-events-none shrink-0",
 	spinner: "animate-spin"
-}, z = E("box-border inline-flex shrink-0 items-center justify-center gap-space-sm [&_svg:not([class*=size-])]:size-icon [&_svg]:shrink-0 whitespace-nowrap rounded-inner border font-sans font-medium no-underline outline-none transition-[background-color,border-color,color,filter,box-shadow] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50", {
+}, z = ee("box-border inline-flex max-w-full shrink-0 items-center justify-center gap-space-sm [&_svg:not([class*=size-])]:size-icon [&_svg]:shrink-0 text-center [overflow-wrap:break-word] rounded-inner border font-sans font-medium no-underline outline-none transition-[background-color,border-color,color,filter,box-shadow] focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:opacity-50", {
 	variants: {
 		tone: {
 			primary: "",
@@ -143,12 +144,16 @@ var R = {
 			ghost: "border-transparent bg-transparent"
 		},
 		size: {
-			sm: "h-action-sm px-control-sm text-sm leading-none",
-			md: "h-action px-control text-sm leading-none",
-			lg: "h-action-lg px-control text-sm leading-none"
+			sm: `px-control-sm ${o.buttonBlockPadding.sm} text-sm leading-tight`,
+			md: `px-control ${o.buttonBlockPadding.md} text-sm leading-tight`,
+			lg: `px-control ${o.buttonBlockPadding.lg} text-sm leading-tight`
 		},
 		iconOnly: {
-			true: "px-0",
+			true: "px-0 py-0",
+			false: ""
+		},
+		truncate: {
+			true: "min-w-0 shrink whitespace-nowrap",
 			false: ""
 		},
 		fullWidth: {
@@ -230,7 +235,7 @@ var R = {
 		{
 			tone: "secondary",
 			buttonStyle: "outline",
-			class: "border-border/60 text-secondary-foreground"
+			class: "border-foreground/15 text-secondary-foreground"
 		},
 		{
 			tone: "secondary",
@@ -297,6 +302,21 @@ var R = {
 			buttonStyle: "ghost",
 			class: "text-info"
 		},
+		{
+			size: "sm",
+			iconOnly: !1,
+			class: "min-h-action-sm"
+		},
+		{
+			size: "md",
+			iconOnly: !1,
+			class: "min-h-action"
+		},
+		{
+			size: "lg",
+			iconOnly: !1,
+			class: "min-h-action-lg"
+		},
 		{
 			size: "sm",
 			iconOnly: !0,
@@ -314,17 +334,18 @@ var R = {
 		}
 	],
 	defaultVariants: {
-		tone: "primary",
-		buttonStyle: "solid",
+		tone: "secondary",
+		buttonStyle: "outline",
 		size: "md",
 		iconOnly: !1,
-		fullWidth: !1
+		fullWidth: !1,
+		truncate: !1
 	}
 });
 //#endregion
 //#region src/components/base/buttons/use-pending-button-focus.ts
 function B(e, t) {
-	let n = y(null), r = y(!1), i = y(!1), a = y(!1), o = m((e) => {
+	let n = b(null), r = b(!1), i = b(!1), a = b(!1), o = h((e) => {
 		n.current = e;
 		let a = () => {
 			r.current = !0;
@@ -337,7 +358,7 @@ function B(e, t) {
 			e?.removeEventListener("focus", a), e?.removeEventListener("blur", o), n.current === e && (n.current = null), typeof s == "function" ? s() : typeof t == "function" ? t(null) : t && (t.current = null);
 		};
 	}, [t]);
-	return v(() => {
+	return y(() => {
 		let t = n.current, o = i.current;
 		if (i.current = e, !t) return;
 		let s = t.ownerDocument;
@@ -362,87 +383,96 @@ function B(e, t) {
 }
 //#endregion
 //#region src/components/base/buttons/base-button.tsx
-function V({ tone: r, buttonStyle: i, size: a, iconOnly: o = !1, fullWidth: s = !1 }) {
-	let c = t(), { defaultScale: l } = n(), u = {
-		tone: r ?? c.defaultTone,
-		buttonStyle: i ?? c.defaultButtonStyle,
-		size: e(a, l),
+function V({ tone: r, buttonStyle: i, size: a, iconOnly: o = !1, fullWidth: s = !1, truncate: c = !1 }) {
+	let l = t(), { defaultScale: u } = n(), d = {
+		tone: r ?? l.defaultTone,
+		buttonStyle: i ?? (r === void 0 ? l.defaultButtonStyle : "solid"),
+		size: e(a, u),
 		iconOnly: o,
-		fullWidth: s
+		fullWidth: s,
+		truncate: c
 	};
 	return {
-		...u,
-		classes: z(u),
+		...d,
+		classes: z(d),
 		attributes: {
 			"data-slot": "button",
-			"data-tone": u.tone,
-			"data-style": u.buttonStyle,
-			"data-size": u.size,
+			"data-tone": d.tone,
+			"data-style": d.buttonStyle,
+			"data-size": d.size,
 			"data-icon-only": o || void 0,
-			"data-full-width": s || void 0
+			"data-full-width": s || void 0,
+			"data-truncate": c || void 0
 		}
 	};
 }
-function H({ icon: e, iconPosition: t = "left", children: n }) {
-	let r = e && /* @__PURE__ */ S(e, {
+function H({ icon: e, iconPosition: t = "left", truncate: n = !1, children: r }) {
+	let i = e && /* @__PURE__ */ C(e, {
 		className: "size-icon shrink-0",
 		"aria-hidden": "true"
 	});
-	return /* @__PURE__ */ C(x, { children: [
-		t === "left" && r,
-		n,
-		t === "right" && r
+	return /* @__PURE__ */ w(S, { children: [
+		t === "left" && i,
+		n && (typeof r == "string" || typeof r == "number") ? /* @__PURE__ */ C("span", {
+			className: "min-w-0 truncate",
+			children: r
+		}) : r,
+		t === "right" && i
 	] });
 }
-var U = p(function({ tone: e, buttonStyle: t, size: n, iconOnly: r, fullWidth: i, icon: o, iconPosition: s, className: c, children: l, ...d }, f) {
-	let p = V({
+var U = m(function({ tone: e, buttonStyle: t, size: n, iconOnly: r, fullWidth: i, truncate: o, icon: s, iconPosition: c, className: l, children: u, ...f }, p) {
+	let m = V({
 		tone: e,
 		buttonStyle: t,
 		size: n,
 		iconOnly: r,
 		fullWidth: i,
-		children: l
-	}), m = B(d["aria-busy"] === !0 || d["aria-busy"] === "true", f);
-	return /* @__PURE__ */ S(u, {
-		...d,
-		...p.attributes,
-		ref: m,
-		className: (e) => a("base-button--component", p.classes, typeof c == "function" ? c(e) : c),
-		children: /* @__PURE__ */ S(H, {
-			icon: o,
-			iconPosition: s,
-			children: l
+		truncate: o,
+		children: u
+	}), h = B(f["aria-busy"] === !0 || f["aria-busy"] === "true", p);
+	return /* @__PURE__ */ C(d, {
+		...f,
+		...m.attributes,
+		ref: h,
+		className: (e) => a("base-button--component", m.classes, typeof l == "function" ? l(e) : l),
+		children: /* @__PURE__ */ C(H, {
+			icon: s,
+			iconPosition: c,
+			truncate: o,
+			children: u
 		})
 	});
-}), W = p(function({ tone: e, buttonStyle: t, size: n, iconOnly: r, fullWidth: i, icon: o, iconPosition: s, className: c, children: l, disabled: u = !1, tabIndex: d, onClick: f, rel: p, target: m, ...h }, g) {
-	let _ = V({
+}), W = m(function({ tone: e, buttonStyle: t, size: n, iconOnly: r, fullWidth: i, truncate: o, icon: s, iconPosition: c, className: l, children: u, disabled: d = !1, tabIndex: f, onClick: p, rel: m, target: h, ...g }, _) {
+	let v = V({
 		tone: e,
 		buttonStyle: t,
 		size: n,
 		iconOnly: r,
 		fullWidth: i,
-		children: l
-	}), v = new Set(p?.split(/\s+/).filter(Boolean));
-	return m?.toLowerCase() === "_blank" && (v.size || v.add("noreferrer"), v.add("noopener")), /* @__PURE__ */ S("a", {
-		...h,
-		..._.attributes,
-		ref: g,
-		target: m,
-		rel: v.size ? [...v].join(" ") : void 0,
-		"aria-disabled": u || h["aria-disabled"] || void 0,
-		tabIndex: u ? -1 : d,
-		className: a("base-button--component", _.classes, c),
+		truncate: o,
+		children: u
+	}), y = new Set(m?.split(/\s+/).filter(Boolean));
+	return h?.toLowerCase() === "_blank" && (y.size || y.add("noreferrer"), y.add("noopener")), /* @__PURE__ */ C("a", {
+		...g,
+		...v.attributes,
+		ref: _,
+		target: h,
+		rel: y.size ? [...y].join(" ") : void 0,
+		"aria-disabled": d || g["aria-disabled"] || void 0,
+		tabIndex: d ? -1 : f,
+		className: a("base-button--component", v.classes, l),
 		onClick: (e) => {
-			if (u) {
+			if (d) {
 				e.preventDefault(), e.stopPropagation();
 				return;
 			}
-			f?.(e);
+			p?.(e);
 		},
-		children: /* @__PURE__ */ S(H, {
-			icon: o,
-			iconPosition: s,
-			children: l
+		children: /* @__PURE__ */ C(H, {
+			icon: s,
+			iconPosition: c,
+			truncate: o,
+			children: u
 		})
 	});
 }), G = {
@@ -450,12 +480,12 @@ var U = p(function({ tone: e, buttonStyle: t, size: n, iconOnly: r, fullWidth: i
 	completed: "Completed"
 };
 function K({ loading: e = !1, handlesLoading: t, strings: n }) {
-	let r = i(G, n), [a, o] = b(e), [, s] = b(!1);
-	return g(() => {
+	let r = i(G, n), [a, o] = x(e), [, s] = x(!1);
+	return _(() => {
 		e && o(!0);
-	}, [e]), g(() => {
+	}, [e]), _(() => {
 		t && e && o(!0);
-	}, [e, t]), g(() => {
+	}, [e, t]), _(() => {
 		let t;
 		return !e && a && (s(!0), t = setTimeout(() => {
 			o(!1), s(!1);
@@ -467,49 +497,50 @@ function K({ loading: e = !1, handlesLoading: t, strings: n }) {
 		strings: r
 	};
 }
-function q({ isLoading: e, loadingText: t, icon: n, iconPosition: r = "left", size: i, children: s }) {
-	let c = e ? t : s, l = typeof c == "string" || typeof c == "number" || typeof c == "bigint";
-	return /* @__PURE__ */ C(x, { children: [
-		!!e && /* @__PURE__ */ S(w, {
+function q({ isLoading: e, loadingText: t, icon: n, iconPosition: r = "left", size: i, truncate: o = !1, children: c }) {
+	let l = e ? t : c, u = typeof l == "string" || typeof l == "number" || typeof l == "bigint";
+	return /* @__PURE__ */ w(S, { children: [
+		!!e && /* @__PURE__ */ C(T, {
 			className: a(R.icon, R.spinner),
 			"aria-hidden": "true"
 		}),
-		!!n && r === "left" && !e && /* @__PURE__ */ S(n, {
+		!!n && r === "left" && !e && /* @__PURE__ */ C(n, {
 			className: R.icon,
 			"aria-hidden": "true"
 		}),
-		l ? /* @__PURE__ */ S(o, {
+		u ? /* @__PURE__ */ C(s, {
 			tag: "span",
 			size: "inherit",
 			weight: "medium",
-			lineHeight: "none",
-			className: "text-inherit",
-			children: c
-		}) : c,
-		!!n && r === "right" && !e && /* @__PURE__ */ S(n, {
+			lineHeight: "tight",
+			className: a("text-inherit", o && "min-w-0 truncate"),
+			children: l
+		}) : l,
+		!!n && r === "right" && !e && /* @__PURE__ */ C(n, {
 			className: R.icon,
 			"aria-hidden": "true"
 		})
 	] });
 }
-var J = d.forwardRef(({ loading: e = !1, handlesLoading: t, strings: n, icon: r, iconPosition: i = "left", children: o, disabled: s, className: c, ...l }, u) => {
+var J = f.forwardRef(({ loading: e = !1, handlesLoading: t, strings: n, icon: r, iconPosition: i = "left", children: o, disabled: s, className: c, ...l }, u) => {
 	let { isLoading: d, strings: f } = K({
 		loading: e,
 		handlesLoading: t,
 		strings: n
 	});
-	return /* @__PURE__ */ S(U, {
+	return /* @__PURE__ */ C(U, {
 		...l,
 		ref: u,
 		disabled: s || d,
 		"aria-busy": d || void 0,
 		className: a("loader-button--component", d && R.isLoading, c),
-		children: /* @__PURE__ */ S(q, {
+		children: /* @__PURE__ */ C(q, {
 			isLoading: d,
 			loadingText: f.loading,
 			icon: r,
 			iconPosition: i,
 			size: l.size,
+			truncate: l.truncate,
 			children: o
 		})
 	});
@@ -517,93 +548,88 @@ var J = d.forwardRef(({ loading: e = !1, handlesLoading: t, strings: n, icon: r,
 J.displayName = "LoaderButton";
 //#endregion
 //#region src/components/base/buttons/tooltip-button.tsx
-var Y = d.forwardRef(({ withTooltip: e, children: t, ...n }, r) => /* @__PURE__ */ C(P, { children: [/* @__PURE__ */ S(I, { render: (i) => {
-	let o = T(n, i);
-	return /* @__PURE__ */ S(U, {
+var Y = f.forwardRef(({ withTooltip: e, children: t, ...n }, r) => /* @__PURE__ */ w(P, { children: [/* @__PURE__ */ C(I, { render: (i) => {
+	let o = E(n, i);
+	return /* @__PURE__ */ C(U, {
 		...o,
 		"aria-label": n["aria-label"] ?? e,
 		ref: r,
 		className: a("tooltip-button--component", o.className),
 		children: t
 	});
-} }), /* @__PURE__ */ S(L, {
-	className: "px-space-md py-space-xs text-pxs",
-	children: /* @__PURE__ */ S(o, {
-		tag: "span",
-		size: "inherit",
-		className: "text-inherit",
-		children: e
-	})
-})] }));
+} }), /* @__PURE__ */ C(L, { children: /* @__PURE__ */ C(s, {
+	tag: "span",
+	size: "inherit",
+	className: "text-inherit",
+	children: e
+}) })] }));
 Y.displayName = "TooltipButton";
 //#endregion
 //#region src/components/base/buttons/button.tsx
 function X({ loading: e, handlesLoading: t, strings: n }) {
 	return e === !0 || !!t || n !== void 0;
 }
-var Z = d.forwardRef(({ loading: e, handlesLoading: t, strings: n, icon: r, iconPosition: i = "left", children: o, disabled: s, size: c, className: l, ...u }, d) => {
+var Z = f.forwardRef(({ loading: e, handlesLoading: t, strings: n, icon: r, iconPosition: i = "left", children: o, disabled: s, size: c, className: l, ...u }, d) => {
 	let f = K({
 		loading: e,
 		handlesLoading: t,
 		strings: n
 	});
-	return /* @__PURE__ */ S(W, {
+	return /* @__PURE__ */ C(W, {
 		...u,
 		ref: d,
 		size: c,
 		disabled: s || f.isLoading,
 		"aria-busy": f.isLoading || void 0,
 		className: a("loader-button--component", l),
-		children: /* @__PURE__ */ S(q, {
+		children: /* @__PURE__ */ C(q, {
 			isLoading: f.isLoading,
 			loadingText: f.strings.loading,
 			icon: r,
 			iconPosition: i,
 			size: c,
+			truncate: u.truncate,
 			children: o
 		})
 	});
 });
 Z.displayName = "LoadingButtonLink";
-var Q = d.forwardRef(({ withTooltip: e, ...t }, n) => {
-	if (X(t)) return /* @__PURE__ */ S(Z, {
+var Q = f.forwardRef(({ withTooltip: e, ...t }, n) => {
+	if (X(t)) return /* @__PURE__ */ C(Z, {
 		ref: n,
 		...t
 	});
 	let { loading: r, handlesLoading: i, strings: a, ...o } = t;
-	return /* @__PURE__ */ S(W, {
+	return /* @__PURE__ */ C(W, {
 		ref: n,
 		...o
 	});
 });
 Q.displayName = "ButtonLink";
-function ee(e) {
+function te(e) {
 	let { type: t, form: n, formAction: r, formEncType: i, formMethod: a, formNoValidate: o, formTarget: s, name: c, value: l, nativeButton: u, focusableWhenDisabled: d, render: f, ...p } = e;
 	return p;
 }
-var $ = d.forwardRef(({ href: e, withTooltip: t, loading: n, handlesLoading: r, strings: i, ...s }, c) => {
+var $ = f.forwardRef(({ href: e, withTooltip: t, loading: n, handlesLoading: r, strings: i, ...o }, c) => {
 	if (e !== void 0) {
-		let l = ee(s), u = /* @__PURE__ */ S(Q, {
+		let l = te(o), u = /* @__PURE__ */ C(Q, {
 			...l,
 			ref: c,
 			href: e,
 			loading: n,
 			handlesLoading: r,
 			strings: i,
-			"aria-label": s["aria-label"] ?? t,
+			"aria-label": o["aria-label"] ?? t,
 			className: a("button--component", l.className)
 		});
-		return t ? /* @__PURE__ */ C(P, { children: [/* @__PURE__ */ S(I, { render: u }), /* @__PURE__ */ S(L, {
-			className: "px-space-md py-space-xs text-pxs",
-			children: /* @__PURE__ */ S(o, {
-				tag: "span",
-				size: "inherit",
-				className: "text-inherit",
-				children: t
-			})
-		})] }) : u;
+		return t ? /* @__PURE__ */ w(P, { children: [/* @__PURE__ */ C(I, { render: u }), /* @__PURE__ */ C(L, { children: /* @__PURE__ */ C(s, {
+			tag: "span",
+			size: "inherit",
+			className: "text-inherit",
+			children: t
+		}) })] }) : u;
 	}
-	let { download: l, hrefLang: u, media: d, ping: f, referrerPolicy: p, rel: m, target: h, ...g } = s, _ = {
+	let { download: l, hrefLang: u, media: d, ping: f, referrerPolicy: p, rel: m, target: h, ...g } = o, _ = {
 		...g,
 		className: a("button--component", g.className)
 	};
@@ -611,7 +637,7 @@ var $ = d.forwardRef(({ href: e, withTooltip: t, loading: n, handlesLoading: r,
 		loading: n,
 		handlesLoading: r,
 		strings: i
-	}) ? t ? /* @__PURE__ */ C(P, { children: [/* @__PURE__ */ S(I, { render: (e) => /* @__PURE__ */ S(J, {
+	}) ? t ? /* @__PURE__ */ w(P, { children: [/* @__PURE__ */ C(I, { render: (e) => /* @__PURE__ */ C(J, {
 		..._,
 		...e,
 		ref: c,
@@ -621,25 +647,22 @@ var $ = d.forwardRef(({ href: e, withTooltip: t, loading: n, handlesLoading: r,
 		"aria-label": g["aria-label"] ?? t,
 		className: a(e.className, _.className),
 		children: g.children
-	}) }), /* @__PURE__ */ S(L, {
-		className: "px-space-md py-space-xs text-pxs",
-		children: /* @__PURE__ */ S(o, {
-			tag: "span",
-			size: "inherit",
-			className: "text-inherit",
-			children: t
-		})
-	})] }) : /* @__PURE__ */ S(J, {
+	}) }), /* @__PURE__ */ C(L, { children: /* @__PURE__ */ C(s, {
+		tag: "span",
+		size: "inherit",
+		className: "text-inherit",
+		children: t
+	}) })] }) : /* @__PURE__ */ C(J, {
 		..._,
 		ref: c,
 		loading: n,
 		handlesLoading: r,
 		strings: i
-	}) : t ? /* @__PURE__ */ S(Y, {
+	}) : t ? /* @__PURE__ */ C(Y, {
 		..._,
 		ref: c,
 		withTooltip: t
-	}) : /* @__PURE__ */ S(U, {
+	}) : /* @__PURE__ */ C(U, {
 		..._,
 		ref: c
 	});
@@ -648,4 +671,4 @@ $.displayName = "Button";
 //#endregion
 export { P as a, I as c, A as d, z as i, k as l, U as n, L as o, W as r, F as s, $ as t, j as u };
 
-//# sourceMappingURL=button-BZDasD04.js.map
+//# sourceMappingURL=button-BS3KDg00.js.map