@agregio-solutions/design-system 2.2.0 → 2.3.1

package/dist/components/Timeline/components/BlockLineContainer/utils/computeItemPosition/computeItemPosition.js

@@ -0,0 +1,10 @@
+//#region packages/components/Timeline/components/BlockLineContainer/utils/computeItemPosition/computeItemPosition.ts
+var e = (e, t, n) => {
+	let r = e.startDate < t ? t : e.startDate, i = e.endDate > n ? n : e.endDate, a = n.getTime() - t.getTime(), o = i.getTime() - r.getTime(), s = (r.getTime() - t.getTime()) / a, c = o / a;
+	return {
+		start: (s * 100).toFixed(2),
+		width: (c * 100).toFixed(2)
+	};
+};
+//#endregion
+export { e as computeItemPosition };

package/dist/components/Timeline/components/BlockLineContainer/utils/getBlockStyles/getBlockStyles.js

@@ -0,0 +1,25 @@
+//#region packages/components/Timeline/components/BlockLineContainer/utils/getBlockStyles/getBlockStyles.ts
+function e({ start: e, width: t, block: n, lineStartDate: r, lineEndDate: i, indentLevel: a }) {
+	let o = n.startDate < r, s = n.endDate > i, c = o && s, l = "var(--timeline-block-radius, 32px)", u = l;
+	c ? u = "0" : s ? u = `${l} 0 0 ${l}` : o && (u = `0 ${l} ${l} 0`);
+	let d = "1px";
+	c ? d = "1px 0 1px 0" : s ? d = "1px 0 1px 1px" : o && (d = "1px 1px 1px 0");
+	let f = a && a > 0 ? `color-mix(in srgb, ${n.color} 25%, transparent)` : n.color;
+	return {
+		display: "block",
+		position: "absolute",
+		top: 0,
+		bottom: 0,
+		width: `calc(${t}% - 1px)`,
+		left: `${e}%`,
+		borderStyle: "solid",
+		borderColor: n.color,
+		borderWidth: d,
+		backgroundColor: f,
+		borderRadius: u,
+		zIndex: "var(--z-index-base)",
+		cursor: n.onClick ? "pointer" : "default"
+	};
+}
+//#endregion
+export { e as getBlockStyles };

package/dist/components/Timeline/components/BlockLineContainer/utils/getLineHeight/getLineHeight.js

@@ -0,0 +1,8 @@
+import { lineHeightForIndentLevel as e, maxLanesToDisplayBeforeCollapsingForIndentLevel as t } from "../../../../utils/Timeline.types.js";
+//#region packages/components/Timeline/components/BlockLineContainer/utils/getLineHeight/getLineHeight.ts
+function n({ nbOfLanes: n, isCollapsed: r, indentLevel: i }) {
+	let a = t(i), o = e(i);
+	return r || n <= a ? o : o + (n - a) * 9;
+}
+//#endregion
+export { n as default };

package/dist/components/Timeline/components/BlockLineContainer/utils/groupOverlappingBlocks/groupOverlappingBlocks.js

@@ -0,0 +1,27 @@
+//#region packages/components/Timeline/components/BlockLineContainer/utils/groupOverlappingBlocks/groupOverlappingBlocks.ts
+function e(e) {
+	let n = [];
+	for (let r of e) {
+		let e = n.filter((e) => t(r, e));
+		if (e.length === 0 && n.push({
+			start: r.startDate,
+			end: r.endDate,
+			blocks: [r]
+		}), e.length === 1) {
+			let t = e[0];
+			t.blocks.push(r), r.startDate < t.start && (t.start = r.startDate), r.endDate > t.end && (t.end = r.endDate);
+		}
+		if (e.length > 1) {
+			let t = {
+				start: e.reduce((e, t) => t.start < e ? t.start : e, e[0].start),
+				end: e.reduce((e, t) => t.end > e ? t.end : e, e[0].end),
+				blocks: [...e.flatMap((e) => e.blocks), r]
+			};
+			n = n.filter((t) => !e.includes(t)), n.push(t);
+		}
+	}
+	return n;
+}
+var t = (e, t) => e.startDate === t.start || e.startDate < t.end && e.startDate >= t.start || e.endDate > t.start && e.endDate <= t.end || e.endDate === t.end || e.startDate < t.start && e.endDate > t.end;
+//#endregion
+export { e as default, t as isBlockInGroup };

package/dist/components/Timeline/components/BlockLineContainer/utils/isBlockInBoundaries/isBlockInBoundaries.js

@@ -0,0 +1,6 @@
+//#region packages/components/Timeline/components/BlockLineContainer/utils/isBlockInBoundaries/isBlockInBoundaries.ts
+function e(e, t, n) {
+	return !(e.startDate < t && e.endDate <= t || e.startDate >= n);
+}
+//#endregion
+export { e as isBlockInBoundaries };

package/dist/components/Timeline/components/GroupLineContainer/GroupLineContainer.js

@@ -0,0 +1,32 @@
+import e from "../BlockLineContainer/BlockLineContainer.js";
+import { mergeBlocksByColor as t } from "../../utils/mergeBlocksByColor/mergeBlocksByColor.js";
+import { Root as n } from "./GroupLineContainer.styled.js";
+import { useMemo as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region packages/components/Timeline/components/GroupLineContainer/GroupLineContainer.tsx
+function s({ name: s, subLines: c, lineStartDate: l, lineEndDate: u, groupHoverText: d, isExpanded: f, onExpandedChange: p }) {
+	let [m, h] = i(!1), g = f ?? m, _ = r(() => t(c, d), [c, d]);
+	return /* @__PURE__ */ o(n, {
+		"data-is-expanded": g,
+		children: [/* @__PURE__ */ a(e, {
+			name: s,
+			blocks: _,
+			lineStartDate: l,
+			lineEndDate: u,
+			isGroupParent: !0,
+			isGroupExpanded: g,
+			onNameClick: () => {
+				let e = !g;
+				f === void 0 && h(e), p?.(e);
+			}
+		}), g && c.map((t, n) => /* @__PURE__ */ a(e, {
+			name: t.name,
+			blocks: t.blocks,
+			lineStartDate: l,
+			lineEndDate: u,
+			indentLevel: 1
+		}, `sub-line-${t.name}-${n}`))]
+	});
+}
+//#endregion
+export { s as default };

package/dist/components/Timeline/components/GroupLineContainer/GroupLineContainer.styled.js

@@ -0,0 +1,13 @@
+import { styled as e } from "styled-components";
+//#region packages/components/Timeline/components/GroupLineContainer/GroupLineContainer.styled.tsx
+var t = e.div`
+  display: flex;
+  flex-direction: column;
+
+  &[data-is-expanded="true"] {
+    border-bottom: 1px solid var(--color-content-neutral-tertiary);
+    background: var(--color-background-neutral-underground-1);
+  }
+`;
+//#endregion
+export { t as Root };

package/dist/components/Timeline/components/TimelineRange/TimelineRange.js

@@ -0,0 +1,34 @@
+import { Day as e, Hour as t, HourDot as n, TimelineContainerStyle as r } from "./TimelineRange.styled.js";
+import { ONE_DAY_IN_MS as i, ONE_HOUR_IN_MS as a, getUnitMode as o } from "../../utils/getUnitMode/getUnitMode.js";
+import { useLocale as s } from "react-aria-components";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region packages/components/Timeline/components/TimelineRange/TimelineRange.tsx
+var u = ({ startDate: u, endDate: d }) => {
+	let f = s(), p = d.getTime() - u.getTime(), m = o(p);
+	if (m === "hours") {
+		let e = Math.ceil(p / a);
+		return /* @__PURE__ */ c(r, { children: Array(e).fill(0).map((e, r) => {
+			let i = r + 1;
+			return i % 2 == 0 ? /* @__PURE__ */ c(t, {
+				"data-type": "dot",
+				children: /* @__PURE__ */ c(n, { "data-testid": `hour-dot-${i}` })
+			}, i) : /* @__PURE__ */ c(t, {
+				"data-type": "number",
+				children: /* @__PURE__ */ l("span", { children: [i.toString().padStart(2, "0"), "h"] })
+			}, i);
+		}) });
+	}
+	let h = Math.ceil(p / i), g = Array(h).fill(0).map((e, t) => {
+		let n = new Date(u);
+		return n.setDate(n.getDate() + t), n;
+	});
+	return /* @__PURE__ */ c(r, { children: g.map((t) => {
+		let n = t.toLocaleDateString(f.locale, { weekday: "short" }), r = t.toLocaleDateString(f.locale, {
+			day: "2-digit",
+			month: m === "week" ? "2-digit" : void 0
+		});
+		return /* @__PURE__ */ l(e, { children: [m !== "month" && /* @__PURE__ */ c("div", { children: n }), /* @__PURE__ */ c("div", { children: r })] }, t.toISOString());
+	}) });
+};
+//#endregion
+export { u as default };

package/dist/components/Timeline/components/TimelineRange/TimelineRange.styled.js

@@ -0,0 +1,50 @@
+import { styled as e } from "styled-components";
+//#region packages/components/Timeline/components/TimelineRange/TimelineRange.styled.tsx
+var t = e.div`
+  margin-left: ${188}px;
+  min-width: 576px;
+  display: flex;
+  padding-bottom: var(--spacing-xs);
+  color: var(--color-content-neutral-secondary);
+  text-align: center;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 16px;
+  border-bottom: 1px solid var(--color-content-neutral-stroke);
+`, n = e.div`
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  &[data-type="number"] span,
+  &[data-type="dot"] div {
+    transform: translateX(50%);
+  }
+
+  &:last-child[data-type="dot"] div {
+    transform: none;
+  }
+`, r = e.div`
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: var(--color-content-neutral-secondary);
+`, i = e.div`
+  flex-grow: 1;
+  flex-shrink: 0;
+  flex-basis: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-right: 1px solid var(--color-content-neutral-stroke);
+
+  &:last-child {
+    border-right: none;
+  }
+`;
+//#endregion
+export { i as Day, n as Hour, r as HourDot, t as TimelineContainerStyle };

package/dist/components/Timeline/utils/Timeline.types.js

@@ -0,0 +1,7 @@
+//#region packages/components/Timeline/utils/Timeline.types.ts
+function e(e) {
+	return e.type === "group";
+}
+var t = (e) => e > 0 ? 40 : 58, n = 5, r = 3, i = (e) => e > 0 ? r : n;
+//#endregion
+export { e as isGroupLine, t as lineHeightForIndentLevel, i as maxLanesToDisplayBeforeCollapsingForIndentLevel };

package/dist/components/Timeline/utils/getGridLineDates/getGridLineDates.js

@@ -0,0 +1,11 @@
+import { ONE_DAY_IN_MS as e, ONE_HOUR_IN_MS as t, getUnitMode as n } from "../getUnitMode/getUnitMode.js";
+//#region packages/components/Timeline/utils/getGridLineDates/getGridLineDates.ts
+function r(r, i) {
+	let a = i.getTime() - r.getTime();
+	if (a <= 0) return [];
+	let o = n(a) === "hours" ? t : e, s = [];
+	for (let e = o; e < a; e += o) s.push(new Date(r.getTime() + e));
+	return s;
+}
+//#endregion
+export { r as getGridLineDates };

package/dist/components/Timeline/utils/getUnitMode/getUnitMode.js

@@ -0,0 +1,7 @@
+//#region packages/components/Timeline/utils/getUnitMode/getUnitMode.ts
+var e = 36e5, t = e * 24, n = t * 7, r = t * 14;
+function i(e) {
+	return e <= 864e5 ? "hours" : e <= 6048e5 ? "week" : e <= 12096e5 ? "two-weeks" : "month";
+}
+//#endregion
+export { t as ONE_DAY_IN_MS, e as ONE_HOUR_IN_MS, r as ONE_TWO_WEEKS_IN_MS, n as ONE_WEEK_IN_MS, i as getUnitMode };

package/dist/components/Timeline/utils/mergeBlocksByColor/mergeBlocksByColor.js

@@ -0,0 +1,41 @@
+//#region packages/components/Timeline/utils/mergeBlocksByColor/mergeBlocksByColor.ts
+function e(e) {
+	return `${String(e.getDate()).padStart(2, "0")}/${String(e.getMonth() + 1).padStart(2, "0")}/${e.getFullYear()} ${String(e.getHours()).padStart(2, "0")}:${String(e.getMinutes()).padStart(2, "0")}`;
+}
+function t(t, n) {
+	let r = t.flatMap((e) => e.blocks), i = /* @__PURE__ */ new Map();
+	for (let e of r) {
+		let t = i.get(e.color) ?? [];
+		t.push(e), i.set(e.color, t);
+	}
+	let a = [];
+	for (let [t, r] of i) {
+		let i = [...r].sort((e, t) => e.startDate.getTime() - t.startDate.getTime()), o = [];
+		for (let e of i) {
+			let t = o[o.length - 1];
+			t && e.startDate < t.endDate ? (e.endDate > t.endDate && (t.endDate = e.endDate), t.blocks.push(e)) : o.push({
+				startDate: new Date(e.startDate),
+				endDate: new Date(e.endDate),
+				blocks: [e]
+			});
+		}
+		for (let r = 0; r < o.length; r++) {
+			let { startDate: i, endDate: s, blocks: c } = o[r];
+			a.push({
+				id: `merged-${t}-${r}`,
+				startDate: i,
+				endDate: s,
+				color: t,
+				hoverText: n ? n({
+					startDate: i,
+					endDate: s,
+					color: t,
+					blocks: c
+				}) : `${e(i)} - ${e(s)}`
+			});
+		}
+	}
+	return a;
+}
+//#endregion
+export { t as mergeBlocksByColor };

package/dist/components/Toaster/Toaster.js

@@ -0,0 +1,24 @@
+import e from "../Icon/Icon.js";
+import t from "../Loader/Loader.js";
+import { Toaster as n } from "./Toaster.styles.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region packages/components/Toaster/Toaster.tsx
+function i({ position: i = "bottom-center", expand: a = !1, visibleToasts: o = 3, offset: s = 32 }) {
+	return /* @__PURE__ */ r(n, {
+		position: i,
+		expand: a,
+		visibleToasts: o,
+		offset: s,
+		closeButton: !0,
+		duration: 5e3,
+		icons: {
+			error: /* @__PURE__ */ r(e, { name: "error_outline" }),
+			success: /* @__PURE__ */ r(e, { name: "check" }),
+			info: /* @__PURE__ */ r(e, { name: "help_outline" }),
+			warning: /* @__PURE__ */ r(e, { name: "warning_amber" }),
+			loading: /* @__PURE__ */ r(t, {})
+		}
+	});
+}
+//#endregion
+export { i as default };

package/dist/components/Toaster/Toaster.styles.js

@@ -0,0 +1,59 @@
+import { styled as e } from "styled-components";
+import { Toaster as t } from "sonner";
+//#region packages/components/Toaster/Toaster.styles.ts
+var n = e(t)`
+  /* Only add styles for the "styled" versions of the toasts (i.e. not toast.custom) */
+  li[data-styled="true"] {
+    padding: var(--spacing-xs) var(--spacing-xs) var(--spacing-xs)
+      var(--spacing-sm) !important;
+    border-radius: var(--radius-rounded) !important;
+    background: var(--color-content-message-informative-darker) !important;
+    color: var(--color-content-neutral-primary-reversed) !important;
+    font-size: var(--text-font-size-sm) !important;
+    gap: var(--spacing-xs) !important;
+    border: none !important;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
+
+    &[data-type="success"] {
+      background: var(--color-content-message-positive-darker) !important;
+    }
+
+    &[data-type="error"] {
+      background: var(--color-content-message-negative-darker) !important;
+    }
+
+    &[data-type="warning"] {
+      background: var(--color-content-message-warning-darker) !important;
+    }
+
+    /* Text content */
+    [data-content] {
+      flex: 1 !important;
+      margin-left: var(--spacing-xs) !important;
+    }
+
+    /* Left icon */
+    [data-icon] > svg {
+      width: var(--text-font-size-xl) !important;
+      height: var(--text-font-size-xl) !important;
+    }
+
+    /* Close button */
+    [data-close-button="true"] {
+      all: unset !important;
+      order: 4 !important;
+      margin-left: auto !important;
+      display: flex !important;
+      align-items: center !important;
+      justify-content: center !important;
+      cursor: pointer !important;
+
+      & > svg {
+        width: var(--text-font-size-xl) !important;
+        height: var(--text-font-size-xl) !important;
+      }
+    }
+  }
+`;
+//#endregion
+export { n as Toaster };

package/dist/components/ToggleButton/ToggleButton.js

@@ -0,0 +1,26 @@
+"use client";
+import e from "../Icon/Icon.js";
+import t from "../Tooltip/Tooltip.js";
+import { StyledToggleButton as n } from "./ToggleButton.styled.js";
+import r from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region packages/components/ToggleButton/ToggleButton.tsx
+var a = r.forwardRef(({ children: r, iconName: a, isDisabled: o, isSelected: s, defaultSelected: c, onChange: l, mode: u = "primary", tooltip: d, ...f }, p) => {
+	let m = a ? /* @__PURE__ */ i(e, { name: a }) : r, h = /* @__PURE__ */ i(n, {
+		ref: p,
+		isDisabled: o,
+		isSelected: s,
+		defaultSelected: c,
+		onChange: l,
+		"data-design-system-component": "ToggleButton",
+		"data-mode": u,
+		...f,
+		children: m
+	});
+	return d ? /* @__PURE__ */ i(t, {
+		label: d,
+		children: h
+	}) : h;
+});
+//#endregion
+export { a as default };

package/dist/components/ToggleButton/ToggleButton.styled.js

@@ -0,0 +1,61 @@
+import { styled as e } from "styled-components";
+import { ToggleButton as t } from "react-aria-components";
+//#region packages/components/ToggleButton/ToggleButton.styled.ts
+var n = e(t)`
+  display: inline-flex;
+  height: 30px;
+  min-width: 30px;
+  justify-content: center;
+  align-items: center;
+  border: none;
+  outline: none;
+  border-radius: var(--spacing-md);
+  background: var(--color-background-neutral-underground-2);
+  cursor: pointer;
+  color: var(--color-content-neutral-primary);
+  font-size: var(--text-font-size-sm);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-sm);
+
+  --selected-background-color: var(--color-content-action-action);
+  --hover-border-color: var(--color-content-action-action);
+
+  &[data-mode="warning"][data-selected="true"] {
+    --hover-border-color: var(--color-content-message-warning-lighter);
+    --selected-background-color: var(--color-content-message-warning-darker);
+  }
+
+  &[data-selected="true"] {
+    --hover-border-color: var(--color-content-action-action-lighter);
+    background: var(--selected-background-color);
+    color: var(--color-content-neutral-primary-reversed);
+  }
+
+  &[data-hovered="true"],
+  &[data-focus-visible="true"] {
+    border: 1px solid var(--hover-border-color);
+    outline: none;
+    box-shadow:
+      0 0 6px -1.2px rgba(161, 161, 161, 0.44),
+      0 0 3px -2.5px rgba(161, 161, 161, 0.44),
+      0 0 2px -1.2px rgba(161, 161, 161, 0.44);
+  }
+
+  /* prettier-ignore */
+  &[data-hovered="true"]:not([data-selected="true"]):not([data-disabled="true"]),
+  &[data-focus-visible="true"]:not([data-selected="true"]):not([data-disabled="true"]) {
+    background: var(--color-content-action-action-lighter);
+  }
+
+  &[data-disabled="true"] {
+    border-radius: var(--text-font-size-xl);
+    border: 1px solid var(--color-content-neutral-stroke);
+    background: var(--color-background-neutral-underground-1);
+    cursor: not-allowed;
+    color: var(--color-content-neutral-tertiary);
+    box-shadow: none;
+  }
+`;
+//#endregion
+export { n as StyledToggleButton };

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,36 @@
+"use client";
+import e from "../../internal-components/FormGroupWrapper/FormGroupWrapper.js";
+import { StyledReactAriaToggleButtonGroup as t } from "./ToggleButtonGroup.styled.js";
+import n from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region packages/components/ToggleButtonGroup/ToggleButtonGroup.tsx
+var i = n.forwardRef(({ children: n, isDisabled: i, selectionMode: a = "multiple", selectedKeys: o, defaultSelectedKeys: s, onSelectionChange: c, wrapperProps: l, label: u, labelIconRight: d, labelIconRightTooltip: f, helperTextIcon: p, helperText: m, errorHelperText: h, errorHelperTextIcon: g, successHelperText: _, successHelperTextIcon: v, warningHelperText: y, warningHelperTextIcon: b, orientation: x, required: S, ...C }, w) => /* @__PURE__ */ r(e, {
+	...l,
+	label: u,
+	labelIconRight: d,
+	labelIconRightTooltip: f,
+	helperTextIcon: p,
+	helperText: m,
+	errorHelperText: h,
+	errorHelperTextIcon: g,
+	successHelperText: _,
+	successHelperTextIcon: v,
+	warningHelperText: y,
+	warningHelperTextIcon: b,
+	orientation: x,
+	required: S,
+	children: /* @__PURE__ */ r(t, {
+		ref: w,
+		isDisabled: i,
+		selectionMode: a,
+		selectedKeys: o,
+		defaultSelectedKeys: s,
+		onSelectionChange: (e) => c?.(Array.from(e).map(String)),
+		orientation: "horizontal",
+		"data-design-system-component": "ToggleButtonGroup",
+		...C,
+		children: n
+	})
+}));
+//#endregion
+export { i as default };

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.styled.js

@@ -0,0 +1,10 @@
+import { styled as e } from "styled-components";
+import { ToggleButtonGroup as t } from "react-aria-components";
+//#region packages/components/ToggleButtonGroup/ToggleButtonGroup.styled.ts
+var n = e(t)`
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xs);
+`;
+//#endregion
+export { n as StyledReactAriaToggleButtonGroup };

package/dist/components/Tooltip/Tooltip.js

@@ -0,0 +1,36 @@
+import { AriaTooltip as e, OverlayArrow as t, UnstyledTooltipTrigger as n } from "./Tooltip.styled.js";
+import "react";
+import { TooltipTrigger as r } from "react-aria-components";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region packages/components/Tooltip/Tooltip.tsx
+function o({ children: n, label: o, delay: s = 200, closeDelay: c = 500, trigger: l, defaultOpen: u, isOpen: d, onOpenChange: f, placement: p = "top", isDisabled: m, hideArrow: h = !1, fluid: g = !1 }) {
+	return /* @__PURE__ */ a(r, {
+		delay: s,
+		closeDelay: c,
+		trigger: l,
+		isOpen: d,
+		defaultOpen: u,
+		onOpenChange: f,
+		isDisabled: m,
+		"aria-label": o,
+		children: [n, /* @__PURE__ */ a(e, {
+			placement: p,
+			"data-fluid": g,
+			children: [o, !h && /* @__PURE__ */ i(t, { children: /* @__PURE__ */ i("svg", {
+				width: 8,
+				height: 8,
+				viewBox: "0 0 8 8",
+				fill: "#001A70",
+				children: /* @__PURE__ */ i("path", { d: "M0 0 L4 4 L8 0" })
+			}) })]
+		})]
+	});
+}
+function s({ children: e, triggerButtonProps: t }) {
+	return /* @__PURE__ */ i(n, {
+		...t,
+		children: e
+	});
+}
+//#endregion
+export { s as TooltipTrigger, o as default };

package/dist/components/Tooltip/Tooltip.styled.js

@@ -0,0 +1,90 @@
+import { styled as e } from "styled-components";
+import { Button as t, OverlayArrow as n, Tooltip as r } from "react-aria-components";
+//#region packages/components/Tooltip/Tooltip.styled.ts
+var i = e(r)`
+  max-width: 160px;
+
+  &[data-fluid="true"] {
+    max-width: none;
+  }
+  padding: var(--spacing-xs);
+  border-radius: var(--radius-rounded);
+  background: var(--color-content-neutral-primary);
+
+  color: var(--color-content-neutral-primary-reversed);
+  font-size: var(--text-font-size-xs);
+  font-style: normal;
+  font-weight: 400;
+  line-height: var(--text-line-height-xs);
+  text-align: center;
+  white-space: pre-line;
+
+  forced-color-adjust: none;
+  outline: none;
+  /* fixes FF gap */
+  transform: translate3d(0, 0, 0);
+  transition:
+    transform 200ms,
+    opacity 200ms;
+
+  &[data-entering],
+  &[data-exiting] {
+    transform: var(--origin);
+    opacity: 0;
+  }
+
+  &[data-placement="top"] {
+    margin-bottom: var(--spacing-xs);
+    --origin: translateY(4px);
+  }
+
+  &[data-placement="bottom"] {
+    margin-top: var(--spacing-xs);
+    --origin: translateY(-4px);
+  }
+
+  &[data-placement="right"] {
+    margin-left: var(--spacing-xs);
+    --origin: translateX(-4px);
+  }
+
+  &[data-placement="left"] {
+    margin-right: var(--spacing-xs);
+    --origin: translateX(4px);
+  }
+`, a = e(n)`
+  line-height: 0;
+
+  &[data-placement="bottom"] svg {
+    transform: rotate(180deg);
+  }
+
+  &[data-placement="right"] svg {
+    transform: rotate(90deg);
+  }
+
+  &[data-placement="left"] svg {
+    transform: rotate(-90deg);
+  }
+`, o = e(t)`
+  background: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  font: inherit;
+  color: inherit;
+  text-align: inherit;
+  line-height: inherit;
+  cursor: inherit;
+  appearance: none;
+  box-shadow: none;
+  outline: none;
+  display: inline;
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+`;
+//#endregion
+export { i as AriaTooltip, a as OverlayArrow, o as UnstyledTooltipTrigger };