ods-ant 0.2.0 → 0.4.0

package/dist-lib/display/Timeline.js

@@ -0,0 +1,275 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Icon as t } from "./Icon.js";
+import { Timeline as n } from "antd";
+import { useEffect as r } from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/ds/display/Timeline.tsx
+var o = "ds-timeline-styles", s = "ds-timeline", c = {
+	auditTrail: {
+		mode: "start",
+		orientation: "vertical",
+		density: "comfortable"
+	},
+	workflowHistory: {
+		mode: "alternate",
+		orientation: "vertical",
+		density: "comfortable"
+	},
+	activityFeed: {
+		mode: "start",
+		orientation: "vertical",
+		density: "comfortable"
+	},
+	clinicalTimeline: {
+		mode: "start",
+		orientation: "vertical",
+		density: "comfortable"
+	},
+	compact: {
+		mode: "start",
+		orientation: "vertical",
+		density: "compact"
+	}
+}, l = {
+	complete: "check",
+	inProgress: "sync",
+	blocked: "close",
+	warning: "alertTriangle",
+	neutral: "minus"
+}, u = {
+	complete: "outlined",
+	inProgress: "filled",
+	blocked: "filled",
+	warning: "outlined",
+	neutral: "filled"
+};
+function d(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function f() {
+	if (typeof document > "u") return;
+	let { timeline: t } = e, n = document.getElementById(o);
+	n || (n = document.createElement("style"), n.id = o, document.head.appendChild(n)), n.textContent = `
+    .${s}.ant-timeline {
+      font-family: 'Nunito', sans-serif;
+      color: ${t.text.content};
+      background: ${t.surface.default};
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .${s}.ant-timeline,
+    .${s}.ant-timeline .ant-timeline-item,
+    .${s}.ant-timeline .ant-timeline-item-tail,
+    .${s}.ant-timeline .ant-timeline-item-head,
+    .${s}.ant-timeline .ant-timeline-item-content {
+      transition: none !important;
+      animation-duration: 0s !important;
+    }
+
+    .${s}.ant-timeline .ant-timeline-item {
+      padding-bottom: var(--ds-timeline-item-padding-bottom);
+    }
+
+    .${s}.ant-timeline .ant-timeline-item-tail {
+      inset-inline-start: var(--ds-timeline-tail-left);
+      top: var(--ds-timeline-tail-top);
+      border-inline-start-width: ${t.line.width};
+      border-inline-start-color: ${t.line.default};
+    }
+
+    .${s}.ant-timeline .ant-timeline-item-head {
+      width: var(--ds-timeline-dot-size);
+      height: var(--ds-timeline-dot-size);
+      border: 0 !important;
+      background: transparent !important;
+      inset-inline-start: 0;
+      margin-top: calc((var(--ds-timeline-title-line-height) - var(--ds-timeline-dot-size)) / 2);
+      box-shadow: none !important;
+    }
+
+    .${s}.ant-timeline .ant-timeline-item-head-custom {
+      width: var(--ds-timeline-dot-size);
+      height: var(--ds-timeline-dot-size);
+      inset-inline-start: 0;
+      margin-top: calc((var(--ds-timeline-title-line-height) - var(--ds-timeline-dot-size)) / 2);
+      line-height: 0;
+      transform: none;
+      border: 0 !important;
+      background: transparent !important;
+      box-shadow: none !important;
+      padding: 0;
+    }
+
+    .${s}.ant-timeline .ant-timeline-item-content {
+      margin-inline-start: calc(var(--ds-timeline-dot-size) + var(--ds-timeline-item-gap));
+      min-height: var(--ds-timeline-title-line-height);
+      color: ${t.text.content};
+      font-size: var(--ds-timeline-content-font-size);
+      font-weight: var(--ds-timeline-content-font-weight);
+      line-height: var(--ds-timeline-content-line-height);
+    }
+
+    .${s}.ant-timeline .ds-timeline-title {
+      color: ${t.text.title};
+      font-size: var(--ds-timeline-title-font-size);
+      font-weight: var(--ds-timeline-title-font-weight);
+      line-height: var(--ds-timeline-title-line-height);
+      margin-bottom: 2px;
+      overflow-wrap: anywhere;
+    }
+
+    .${s}.ant-timeline .ds-timeline-content {
+      color: ${t.text.content};
+      font-size: var(--ds-timeline-content-font-size);
+      font-weight: var(--ds-timeline-content-font-weight);
+      line-height: var(--ds-timeline-content-line-height);
+      overflow-wrap: anywhere;
+    }
+
+    .${s}.ant-timeline .ds-timeline-meta {
+      margin-top: 2px;
+      color: ${t.text.meta};
+      font-size: 12px;
+      font-weight: 600;
+      line-height: 16px;
+      overflow-wrap: anywhere;
+    }
+
+    .${s}.ant-timeline .ds-timeline-dot {
+      width: var(--ds-timeline-dot-size);
+      height: var(--ds-timeline-dot-size);
+      min-width: var(--ds-timeline-dot-size);
+      min-height: var(--ds-timeline-dot-size);
+      max-width: var(--ds-timeline-dot-size);
+      max-height: var(--ds-timeline-dot-size);
+      flex: 0 0 var(--ds-timeline-dot-size);
+      aspect-ratio: 1 / 1;
+      padding: 0;
+      border-radius: 999px;
+      background: var(--ds-timeline-dot-color);
+      border: 1px solid color-mix(in srgb, var(--ds-timeline-dot-color) 72%, ${t.surface.default});
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      box-sizing: border-box;
+      line-height: 0;
+    }
+
+    .${s}.ant-timeline .ds-timeline-dot .ds-icon {
+      width: var(--ds-timeline-icon-size);
+      height: var(--ds-timeline-icon-size);
+      font-size: var(--ds-timeline-icon-size);
+      color: ${t.surface.default};
+    }
+
+    .${s}.ant-timeline .ds-timeline-dot[data-ds-timeline-visual='outlined'] {
+      background: ${t.surface.default};
+      border: 1px solid color-mix(in srgb, var(--ds-timeline-dot-color) 72%, ${t.surface.default});
+    }
+
+    .${s}.ant-timeline .ds-timeline-dot[data-ds-timeline-visual='outlined'] .ds-icon {
+      color: var(--ds-timeline-dot-color);
+    }
+
+    .${s}.ant-timeline.ds-timeline--clinicalTimeline {
+      background: ${t.surface.clinical};
+      border-radius: 4px;
+      padding: 12px 14px;
+    }
+
+    .${s}.ant-timeline.ds-timeline--activityFeed .ant-timeline-item-tail {
+      border-inline-start-color: ${t.line.muted};
+    }
+
+    .${s}.ant-timeline .ant-timeline-item-last > .ant-timeline-item-tail {
+      display: none;
+    }
+  `;
+}
+function p(e) {
+	return e.dsStatus ?? "neutral";
+}
+function m(e, t) {
+	return t ?? c[e].density;
+}
+function h(n, r, a) {
+	let o = a !== "compact", s = o ? "filled" : u[n], c = n === "complete" || n === "warning" ? Math.max(r - 4, 8) : r, d = s === "outlined" ? e.timeline.status[n] : e.timeline.surface.default;
+	return /* @__PURE__ */ i("span", {
+		className: "ds-timeline-dot",
+		"data-ds-timeline-has-icon": o ? "true" : "false",
+		"data-ds-timeline-status": n,
+		"data-ds-timeline-visual": s,
+		style: {
+			"--ds-timeline-dot-color": e.timeline.status[n],
+			"--ds-timeline-icon-size": `${c}px`
+		},
+		children: o ? /* @__PURE__ */ i(t, {
+			dsName: l[n],
+			dsSize: c,
+			"aria-label": `${n} timeline item`,
+			style: { color: d }
+		}) : null
+	});
+}
+function g(e, t, n) {
+	return e ? e.map((e) => {
+		let r = p(e), { children: o, color: s, dot: c, dsContent: l, dsMeta: u, dsStatus: d, dsTitle: f, ...m } = e, g = f ?? m.title, _ = l ?? o, v = u, y = !!(g || _ || v);
+		return {
+			...m,
+			icon: m.icon ?? c ?? h(r, t, n),
+			title: void 0,
+			content: y ? /* @__PURE__ */ a("div", { children: [
+				g ? /* @__PURE__ */ i("div", {
+					className: "ds-timeline-title",
+					children: g
+				}) : null,
+				_ ? /* @__PURE__ */ i("div", {
+					className: "ds-timeline-content",
+					children: _
+				}) : null,
+				v ? /* @__PURE__ */ i("div", {
+					className: "ds-timeline-meta",
+					children: v
+				}) : null
+			] }) : _
+		};
+	}) : [];
+}
+function _(t, n) {
+	let r = e.timeline.size[t];
+	return {
+		"--ds-timeline-dot-size": r.dot,
+		"--ds-timeline-icon-size": `${r.icon}px`,
+		"--ds-timeline-item-gap": r.itemGap,
+		"--ds-timeline-item-padding-bottom": r.itemPaddingBottom,
+		"--ds-timeline-tail-top": r.tailTop,
+		"--ds-timeline-tail-left": r.tailLeft,
+		"--ds-timeline-title-font-size": r.title.fontSize,
+		"--ds-timeline-title-line-height": r.title.lineHeight,
+		"--ds-timeline-title-font-weight": r.title.fontWeight,
+		"--ds-timeline-content-font-size": r.content.fontSize,
+		"--ds-timeline-content-line-height": r.content.lineHeight,
+		"--ds-timeline-content-font-weight": r.content.fontWeight,
+		...n
+	};
+}
+var v = ({ className: t, dsDensity: a, dsItems: o, dsVariant: l = "auditTrail", style: u, ...p }) => {
+	r(() => {
+		f();
+	}, []);
+	let h = c[l], v = m(l, a), y = e.timeline.size[v].icon, b = g(o, y, v);
+	return /* @__PURE__ */ i(n, {
+		...p,
+		className: d(s, `ds-timeline--${l}`, `ds-timeline--density-${v}`, t),
+		items: b,
+		mode: h.mode,
+		orientation: h.orientation,
+		style: _(v, u)
+	});
+};
+v.Item = n.Item, v.displayName = "Timeline";
+//#endregion
+export { v as Timeline };
+
+//# sourceMappingURL=Timeline.js.map

package/dist-lib/display/Timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timeline.js","names":[],"sources":["../../src/ds/display/Timeline.tsx"],"sourcesContent":["import { Timeline as AntTimeline } from 'antd';\nimport type { TimelineProps as AntTimelineProps } from 'antd';\nimport type { TimelineItemProps as AntTimelineItemProps } from 'antd';\nimport { useEffect } from 'react';\nimport type { CSSProperties, FC, ReactNode } from 'react';\nimport { Icon } from './Icon';\nimport type { DSIconName } from './Icon';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTimelineVariant = 'auditTrail' | 'workflowHistory' | 'activityFeed' | 'clinicalTimeline' | 'compact';\nexport type DSTimelineDensity = 'comfortable' | 'compact';\nexport type DSTimelineStatus = 'complete' | 'inProgress' | 'blocked' | 'warning' | 'neutral';\ntype DSTimelineDotVisual = 'filled' | 'outlined';\n\nexport type DSTimelineItem = Omit<AntTimelineItemProps, 'color' | 'dot' | 'children'> & {\n  /** Semantic item status to drive dot color and status icon treatment. */\n  dsStatus?: DSTimelineStatus;\n  /** Optional title row for stronger hierarchy in audit and workflow entries. */\n  dsTitle?: ReactNode;\n  /** Main timeline content body. Falls back to `children` when omitted. */\n  dsContent?: ReactNode;\n  /** Optional metadata line under content for timestamp or actor labels. */\n  dsMeta?: ReactNode;\n};\n\ntype RestrictedAntVisualProps = 'items' | 'orientation' | 'mode';\n\nexport type TimelineProps = Omit<AntTimelineProps, RestrictedAntVisualProps> & {\n  /** Semantic DS timeline variant. */\n  dsVariant?: DSTimelineVariant;\n  /** Optional density override. */\n  dsDensity?: DSTimelineDensity;\n  /** Timeline item list with DS semantic fields. */\n  dsItems?: DSTimelineItem[];\n};\n\ntype DSTimelineComponent = FC<TimelineProps> & {\n  Item: typeof AntTimeline.Item;\n};\n\nconst STYLE_ID = 'ds-timeline-styles';\nconst DS_TIMELINE_CLASS = 'ds-timeline';\n\nconst DEFAULTS_BY_VARIANT: Record<DSTimelineVariant, {\n  mode: NonNullable<AntTimelineProps['mode']>;\n  orientation: NonNullable<AntTimelineProps['orientation']>;\n  density: DSTimelineDensity;\n}> = {\n  auditTrail: { mode: 'start', orientation: 'vertical', density: 'comfortable' },\n  workflowHistory: { mode: 'alternate', orientation: 'vertical', density: 'comfortable' },\n  activityFeed: { mode: 'start', orientation: 'vertical', density: 'comfortable' },\n  clinicalTimeline: { mode: 'start', orientation: 'vertical', density: 'comfortable' },\n  compact: { mode: 'start', orientation: 'vertical', density: 'compact' },\n};\n\nconst ICON_NAME_BY_TIMELINE_STATUS: Record<DSTimelineStatus, DSIconName> = {\n  complete: 'check',\n  inProgress: 'sync',\n  blocked: 'close',\n  warning: 'alertTriangle',\n  neutral: 'minus',\n};\n\nconst DOT_VISUAL_BY_STATUS: Record<DSTimelineStatus, DSTimelineDotVisual> = {\n  complete: 'outlined',\n  inProgress: 'filled',\n  blocked: 'filled',\n  warning: 'outlined',\n  neutral: 'filled',\n};\n\nfunction mergeClassNames(...classNames: Array<string | undefined>) {\n  return classNames.filter(Boolean).join(' ').trim();\n}\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { timeline } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .${DS_TIMELINE_CLASS}.ant-timeline {\n      font-family: 'Nunito', sans-serif;\n      color: ${timeline.text.content};\n      background: ${timeline.surface.default};\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline,\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item,\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item-tail,\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item-head,\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item-content {\n      transition: none !important;\n      animation-duration: 0s !important;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item {\n      padding-bottom: var(--ds-timeline-item-padding-bottom);\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item-tail {\n      inset-inline-start: var(--ds-timeline-tail-left);\n      top: var(--ds-timeline-tail-top);\n      border-inline-start-width: ${timeline.line.width};\n      border-inline-start-color: ${timeline.line.default};\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item-head {\n      width: var(--ds-timeline-dot-size);\n      height: var(--ds-timeline-dot-size);\n      border: 0 !important;\n      background: transparent !important;\n      inset-inline-start: 0;\n      margin-top: calc((var(--ds-timeline-title-line-height) - var(--ds-timeline-dot-size)) / 2);\n      box-shadow: none !important;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item-head-custom {\n      width: var(--ds-timeline-dot-size);\n      height: var(--ds-timeline-dot-size);\n      inset-inline-start: 0;\n      margin-top: calc((var(--ds-timeline-title-line-height) - var(--ds-timeline-dot-size)) / 2);\n      line-height: 0;\n      transform: none;\n      border: 0 !important;\n      background: transparent !important;\n      box-shadow: none !important;\n      padding: 0;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item-content {\n      margin-inline-start: calc(var(--ds-timeline-dot-size) + var(--ds-timeline-item-gap));\n      min-height: var(--ds-timeline-title-line-height);\n      color: ${timeline.text.content};\n      font-size: var(--ds-timeline-content-font-size);\n      font-weight: var(--ds-timeline-content-font-weight);\n      line-height: var(--ds-timeline-content-line-height);\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ds-timeline-title {\n      color: ${timeline.text.title};\n      font-size: var(--ds-timeline-title-font-size);\n      font-weight: var(--ds-timeline-title-font-weight);\n      line-height: var(--ds-timeline-title-line-height);\n      margin-bottom: 2px;\n      overflow-wrap: anywhere;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ds-timeline-content {\n      color: ${timeline.text.content};\n      font-size: var(--ds-timeline-content-font-size);\n      font-weight: var(--ds-timeline-content-font-weight);\n      line-height: var(--ds-timeline-content-line-height);\n      overflow-wrap: anywhere;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ds-timeline-meta {\n      margin-top: 2px;\n      color: ${timeline.text.meta};\n      font-size: 12px;\n      font-weight: 600;\n      line-height: 16px;\n      overflow-wrap: anywhere;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ds-timeline-dot {\n      width: var(--ds-timeline-dot-size);\n      height: var(--ds-timeline-dot-size);\n      min-width: var(--ds-timeline-dot-size);\n      min-height: var(--ds-timeline-dot-size);\n      max-width: var(--ds-timeline-dot-size);\n      max-height: var(--ds-timeline-dot-size);\n      flex: 0 0 var(--ds-timeline-dot-size);\n      aspect-ratio: 1 / 1;\n      padding: 0;\n      border-radius: 999px;\n      background: var(--ds-timeline-dot-color);\n      border: 1px solid color-mix(in srgb, var(--ds-timeline-dot-color) 72%, ${timeline.surface.default});\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      box-sizing: border-box;\n      line-height: 0;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ds-timeline-dot .ds-icon {\n      width: var(--ds-timeline-icon-size);\n      height: var(--ds-timeline-icon-size);\n      font-size: var(--ds-timeline-icon-size);\n      color: ${timeline.surface.default};\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ds-timeline-dot[data-ds-timeline-visual='outlined'] {\n      background: ${timeline.surface.default};\n      border: 1px solid color-mix(in srgb, var(--ds-timeline-dot-color) 72%, ${timeline.surface.default});\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ds-timeline-dot[data-ds-timeline-visual='outlined'] .ds-icon {\n      color: var(--ds-timeline-dot-color);\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline.ds-timeline--clinicalTimeline {\n      background: ${timeline.surface.clinical};\n      border-radius: 4px;\n      padding: 12px 14px;\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline.ds-timeline--activityFeed .ant-timeline-item-tail {\n      border-inline-start-color: ${timeline.line.muted};\n    }\n\n    .${DS_TIMELINE_CLASS}.ant-timeline .ant-timeline-item-last > .ant-timeline-item-tail {\n      display: none;\n    }\n  `;\n}\n\nfunction resolveStatus(item: DSTimelineItem): DSTimelineStatus {\n  return item.dsStatus ?? 'neutral';\n}\n\nfunction resolveDensity(dsVariant: DSTimelineVariant, dsDensity: DSTimelineDensity | undefined): DSTimelineDensity {\n  return dsDensity ?? DEFAULTS_BY_VARIANT[dsVariant].density;\n}\n\nfunction getDot(status: DSTimelineStatus, iconSize: number, density: DSTimelineDensity) {\n  const hasIcon = density !== 'compact';\n  const dotVisual = hasIcon ? 'filled' : DOT_VISUAL_BY_STATUS[status];\n  const resolvedIconSize = status === 'complete' || status === 'warning'\n    ? Math.max(iconSize - 4, 8)\n    : iconSize;\n  const iconColor = dotVisual === 'outlined'\n    ? dsSemanticTokens.timeline.status[status]\n    : dsSemanticTokens.timeline.surface.default;\n\n  return (\n    <span\n      className=\"ds-timeline-dot\"\n      data-ds-timeline-has-icon={hasIcon ? 'true' : 'false'}\n      data-ds-timeline-status={status}\n      data-ds-timeline-visual={dotVisual}\n      style={{\n        '--ds-timeline-dot-color': dsSemanticTokens.timeline.status[status],\n        '--ds-timeline-icon-size': `${resolvedIconSize}px`,\n      } as CSSProperties}\n    >\n      {hasIcon ? <Icon dsName={ICON_NAME_BY_TIMELINE_STATUS[status]} dsSize={resolvedIconSize} aria-label={`${status} timeline item`} style={{ color: iconColor }} /> : null}\n    </span>\n  );\n}\n\nfunction normalizeItems(items: DSTimelineItem[] | undefined, iconSize: number, density: DSTimelineDensity): AntTimelineItemProps[] {\n  if (!items) return [];\n\n  return items.map((item) => {\n    const status = resolveStatus(item);\n    const {\n      children,\n      color: _unusedColor,\n      dot,\n      dsContent,\n      dsMeta,\n      dsStatus: _unusedDsStatus,\n      dsTitle,\n      ...rest\n    } = item;\n\n    const title = dsTitle ?? rest.title;\n    const content = dsContent ?? children;\n    const meta = dsMeta;\n    const hasStructuredContent = Boolean(title || content || meta);\n\n    return {\n      ...rest,\n      icon: rest.icon ?? dot ?? getDot(status, iconSize, density),\n      title: undefined,\n      content: hasStructuredContent ? (\n        <div>\n          {title ? <div className=\"ds-timeline-title\">{title}</div> : null}\n          {content ? <div className=\"ds-timeline-content\">{content}</div> : null}\n          {meta ? <div className=\"ds-timeline-meta\">{meta}</div> : null}\n        </div>\n      ) : content,\n    };\n  });\n}\n\nfunction getStyle(density: DSTimelineDensity, userStyle: CSSProperties | undefined) {\n  const size = dsSemanticTokens.timeline.size[density];\n\n  return {\n    '--ds-timeline-dot-size': size.dot,\n    '--ds-timeline-icon-size': `${size.icon}px`,\n    '--ds-timeline-item-gap': size.itemGap,\n    '--ds-timeline-item-padding-bottom': size.itemPaddingBottom,\n    '--ds-timeline-tail-top': size.tailTop,\n    '--ds-timeline-tail-left': size.tailLeft,\n    '--ds-timeline-title-font-size': size.title.fontSize,\n    '--ds-timeline-title-line-height': size.title.lineHeight,\n    '--ds-timeline-title-font-weight': size.title.fontWeight,\n    '--ds-timeline-content-font-size': size.content.fontSize,\n    '--ds-timeline-content-line-height': size.content.lineHeight,\n    '--ds-timeline-content-font-weight': size.content.fontWeight,\n    ...userStyle,\n  } as CSSProperties;\n}\n\nexport const Timeline: DSTimelineComponent = ({\n  className,\n  dsDensity,\n  dsItems,\n  dsVariant = 'auditTrail',\n  style,\n  ...props\n}: TimelineProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaults = DEFAULTS_BY_VARIANT[dsVariant];\n  const density = resolveDensity(dsVariant, dsDensity);\n  const iconSize = dsSemanticTokens.timeline.size[density].icon;\n  const items = normalizeItems(dsItems, iconSize, density);\n\n  return (\n    <AntTimeline\n      {...props}\n      className={mergeClassNames(DS_TIMELINE_CLASS, `ds-timeline--${dsVariant}`, `ds-timeline--density-${density}`, className)}\n      items={items}\n      mode={defaults.mode}\n      orientation={defaults.orientation}\n      style={getStyle(density, style)}\n    />\n  );\n};\n\nTimeline.Item = AntTimeline.Item;\nTimeline.displayName = 'Timeline';\n"],"mappings":"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"}

package/dist-lib/display/Tooltip.cjs

@@ -0,0 +1,70 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-tooltip-styles`;function a(){if(typeof document>`u`)return;let{tooltip:t}=e.dsSemanticTokens,n=document.getElementById(i);n||(n=document.createElement(`style`),n.id=i,document.head.appendChild(n)),n.textContent=`
+    .ds-tooltip-overlay {
+      --ant-tooltip-arrow-background-color: ${t.surface.background};
+    }
+
+    .ds-tooltip-overlay .ant-tooltip-container {
+      background: ${t.surface.background};
+      border-radius: ${t.radius};
+      filter: ${t.elevation};
+      color: ${t.surface.body};
+      letter-spacing: 0;
+      max-width: ${t.width.normal.max};
+      min-width: ${t.width.normal.min};
+      padding: ${t.padding.normal};
+    }
+
+    .ds-tooltip-overlay .ant-tooltip-arrow .ant-tooltip-arrow-content {
+      background: ${t.surface.background};
+    }
+
+    .ds-tooltip-overlay .ant-tooltip-arrow::before {
+      background: ${t.surface.background};
+    }
+
+    .ds-tooltip-overlay.ant-tooltip-placement-left > .ant-tooltip-arrow,
+    .ds-tooltip-overlay.ant-tooltip-placement-leftTop > .ant-tooltip-arrow,
+    .ds-tooltip-overlay.ant-tooltip-placement-leftBottom > .ant-tooltip-arrow {
+      inset-inline-end: 0;
+    }
+
+    .ds-tooltip-overlay.ant-tooltip-placement-right > .ant-tooltip-arrow,
+    .ds-tooltip-overlay.ant-tooltip-placement-rightTop > .ant-tooltip-arrow,
+    .ds-tooltip-overlay.ant-tooltip-placement-rightBottom > .ant-tooltip-arrow {
+      inset-inline-start: 0;
+    }
+
+    .ds-tooltip-overlay.ds-tooltip-size-mini .ant-tooltip-container {
+      min-width: ${t.width.mini.min};
+      max-width: ${t.width.mini.max};
+      padding: ${t.padding.mini};
+      text-align: center;
+    }
+
+    .ds-tooltip-title {
+      margin: 0 0 4px;
+      color: ${t.surface.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+    }
+
+    .ds-tooltip-body {
+      margin: 0;
+      color: ${t.surface.body};
+      font-size: ${t.typography.body.fontSize};
+      font-weight: ${t.typography.body.fontWeight};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .ds-tooltip-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .ds-tooltip-content-mini {
+      align-items: center;
+    }
+  `}function o(e,t,n){return e===`mini`?(0,r.jsx)(`div`,{className:`ds-tooltip-content ds-tooltip-content-mini`,children:(0,r.jsx)(`p`,{className:`ds-tooltip-body`,children:n})}):(0,r.jsxs)(`div`,{className:`ds-tooltip-content`,children:[t?(0,r.jsx)(`p`,{className:`ds-tooltip-title`,children:t}):null,(0,r.jsx)(`p`,{className:`ds-tooltip-body`,children:n})]})}function s(...e){return e.filter(Boolean).join(` `)}var c=({dsSize:i=`normal`,dsTitle:c,dsBody:l,title:u,color:d,arrow:f,styles:p,classNames:m,overlayClassName:h,children:g,..._})=>{let{tooltip:v}=e.dsSemanticTokens;(0,n.useEffect)(()=>{a()},[]);let y=u===void 0?o(i,c,l??(i===`mini`?`Mini Tooltip`:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque fermentum dolor eget.`)):u,b=i===`mini`?{minWidth:v.width.mini.min,maxWidth:v.width.mini.max,padding:v.padding.mini,textAlign:`center`}:{minWidth:v.width.normal.min,maxWidth:v.width.normal.max,padding:v.padding.normal};return(0,r.jsx)(t.Tooltip,{..._,title:y,color:d??v.surface.background,arrow:f??!0,styles:{...p,body:{borderRadius:v.radius,color:v.surface.body,letterSpacing:0,...b,...p?.body}},classNames:{...m,root:s(`ds-tooltip-overlay`,`ds-tooltip-size-${i}`,m?.root,h)},children:g})};exports.Tooltip=c,exports.ensureTooltipStyles=a;
+//# sourceMappingURL=Tooltip.cjs.map

package/dist-lib/display/Tooltip.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../src/ds/display/Tooltip.tsx"],"sourcesContent":["import { Tooltip as AntTooltip } from 'antd';\nimport type { TooltipProps as AntTooltipProps } from 'antd';\nimport { useEffect } from 'react';\nimport type { ReactNode } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTooltipSize = 'mini' | 'normal';\n\nexport type TooltipProps = AntTooltipProps & {\n  /** DS size variant from Figma. */\n  dsSize?: DSTooltipSize;\n  /** Optional DS title text for normal tooltip variant. */\n  dsTitle?: string;\n  /** DS body text used when Ant `title` prop is not provided. */\n  dsBody?: string;\n};\n\nconst STYLE_ID = 'ds-tooltip-styles';\n\nexport function ensureTooltipStyles() {\n  if (typeof document === 'undefined') return;\n  const { tooltip } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-tooltip-overlay {\n      --ant-tooltip-arrow-background-color: ${tooltip.surface.background};\n    }\n\n    .ds-tooltip-overlay .ant-tooltip-container {\n      background: ${tooltip.surface.background};\n      border-radius: ${tooltip.radius};\n      filter: ${tooltip.elevation};\n      color: ${tooltip.surface.body};\n      letter-spacing: 0;\n      max-width: ${tooltip.width.normal.max};\n      min-width: ${tooltip.width.normal.min};\n      padding: ${tooltip.padding.normal};\n    }\n\n    .ds-tooltip-overlay .ant-tooltip-arrow .ant-tooltip-arrow-content {\n      background: ${tooltip.surface.background};\n    }\n\n    .ds-tooltip-overlay .ant-tooltip-arrow::before {\n      background: ${tooltip.surface.background};\n    }\n\n    .ds-tooltip-overlay.ant-tooltip-placement-left > .ant-tooltip-arrow,\n    .ds-tooltip-overlay.ant-tooltip-placement-leftTop > .ant-tooltip-arrow,\n    .ds-tooltip-overlay.ant-tooltip-placement-leftBottom > .ant-tooltip-arrow {\n      inset-inline-end: 0;\n    }\n\n    .ds-tooltip-overlay.ant-tooltip-placement-right > .ant-tooltip-arrow,\n    .ds-tooltip-overlay.ant-tooltip-placement-rightTop > .ant-tooltip-arrow,\n    .ds-tooltip-overlay.ant-tooltip-placement-rightBottom > .ant-tooltip-arrow {\n      inset-inline-start: 0;\n    }\n\n    .ds-tooltip-overlay.ds-tooltip-size-mini .ant-tooltip-container {\n      min-width: ${tooltip.width.mini.min};\n      max-width: ${tooltip.width.mini.max};\n      padding: ${tooltip.padding.mini};\n      text-align: center;\n    }\n\n    .ds-tooltip-title {\n      margin: 0 0 4px;\n      color: ${tooltip.surface.title};\n      font-size: ${tooltip.typography.title.fontSize};\n      font-weight: ${tooltip.typography.title.fontWeight};\n      line-height: ${tooltip.typography.title.lineHeight};\n    }\n\n    .ds-tooltip-body {\n      margin: 0;\n      color: ${tooltip.surface.body};\n      font-size: ${tooltip.typography.body.fontSize};\n      font-weight: ${tooltip.typography.body.fontWeight};\n      line-height: ${tooltip.typography.body.lineHeight};\n    }\n\n    .ds-tooltip-content {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .ds-tooltip-content-mini {\n      align-items: center;\n    }\n  `;\n}\n\nfunction getDefaultContent(dsSize: DSTooltipSize, dsTitle: string | undefined, dsBody: string) {\n  if (dsSize === 'mini') {\n    return (\n      <div className=\"ds-tooltip-content ds-tooltip-content-mini\">\n        <p className=\"ds-tooltip-body\">{dsBody}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"ds-tooltip-content\">\n      {dsTitle ? <p className=\"ds-tooltip-title\">{dsTitle}</p> : null}\n      <p className=\"ds-tooltip-body\">{dsBody}</p>\n    </div>\n  );\n}\n\nfunction mergeClassNames(...names: Array<string | undefined>) {\n  return names.filter(Boolean).join(' ');\n}\n\nexport const Tooltip = ({\n  dsSize = 'normal',\n  dsTitle,\n  dsBody,\n  title,\n  color,\n  arrow,\n  styles,\n  classNames,\n  overlayClassName,\n  children,\n  ...props\n}: TooltipProps) => {\n  const { tooltip } = dsSemanticTokens;\n\n  useEffect(() => {\n    ensureTooltipStyles();\n  }, []);\n\n  const defaultBody = dsSize === 'mini'\n    ? 'Mini Tooltip'\n    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque fermentum dolor eget.';\n\n  const resolvedBody = dsBody ?? defaultBody;\n  const resolvedTitle: ReactNode =\n    title !== undefined\n      ? title\n      : getDefaultContent(dsSize, dsTitle, resolvedBody);\n\n  const sizeBodyStyles = dsSize === 'mini'\n    ? {\n      minWidth: tooltip.width.mini.min,\n      maxWidth: tooltip.width.mini.max,\n      padding: tooltip.padding.mini,\n      textAlign: 'center' as const,\n    }\n    : {\n      minWidth: tooltip.width.normal.min,\n      maxWidth: tooltip.width.normal.max,\n      padding: tooltip.padding.normal,\n    };\n\n  return (\n    <AntTooltip\n      {...props}\n      title={resolvedTitle}\n      color={color ?? tooltip.surface.background}\n      arrow={arrow ?? true}\n      styles={{\n        ...styles,\n        body: {\n          borderRadius: tooltip.radius,\n          color: tooltip.surface.body,\n          letterSpacing: 0,\n          ...sizeBodyStyles,\n          ...styles?.body,\n        },\n      }}\n      classNames={{\n        ...classNames,\n        root: mergeClassNames('ds-tooltip-overlay', `ds-tooltip-size-${dsSize}`, classNames?.root, overlayClassName),\n      }}\n    >\n      {children}\n    </AntTooltip>\n  );\n};\n"],"mappings":"4MAiBA,IAAM,EAAW,oBAEjB,SAAgB,GAAsB,CACpC,GAAI,OAAO,SAAa,IAAa,OACrC,GAAM,CAAE,WAAY,EAAA,iBAChB,EAAQ,SAAS,eAAe,EAAS,CACxC,IACH,EAAQ,SAAS,cAAc,QAAQ,CACvC,EAAM,GAAK,EACX,SAAS,KAAK,YAAY,EAAM,EAGlC,EAAM,YAAc;;8CAEwB,EAAQ,QAAQ,WAAW;;;;oBAIrD,EAAQ,QAAQ,WAAW;uBACxB,EAAQ,OAAO;gBACtB,EAAQ,UAAU;eACnB,EAAQ,QAAQ,KAAK;;mBAEjB,EAAQ,MAAM,OAAO,IAAI;mBACzB,EAAQ,MAAM,OAAO,IAAI;iBAC3B,EAAQ,QAAQ,OAAO;;;;oBAIpB,EAAQ,QAAQ,WAAW;;;;oBAI3B,EAAQ,QAAQ,WAAW;;;;;;;;;;;;;;;;mBAgB5B,EAAQ,MAAM,KAAK,IAAI;mBACvB,EAAQ,MAAM,KAAK,IAAI;iBACzB,EAAQ,QAAQ,KAAK;;;;;;eAMvB,EAAQ,QAAQ,MAAM;mBAClB,EAAQ,WAAW,MAAM,SAAS;qBAChC,EAAQ,WAAW,MAAM,WAAW;qBACpC,EAAQ,WAAW,MAAM,WAAW;;;;;eAK1C,EAAQ,QAAQ,KAAK;mBACjB,EAAQ,WAAW,KAAK,SAAS;qBAC/B,EAAQ,WAAW,KAAK,WAAW;qBACnC,EAAQ,WAAW,KAAK,WAAW;;;;;;;;;;;;IAexD,SAAS,EAAkB,EAAuB,EAA6B,EAAgB,CAS7F,OARI,IAAW,QAEX,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,uDACb,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,2BAAmB,EAAW,CAAA,CACvC,CAAA,EAKR,EAAA,EAAA,MAAC,MAAD,CAAK,UAAU,8BAAf,CACG,GAAU,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,4BAAoB,EAAY,CAAA,CAAG,MAC3D,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,2BAAmB,EAAW,CAAA,CACvC,GAIV,SAAS,EAAgB,GAAG,EAAkC,CAC5D,OAAO,EAAM,OAAO,QAAQ,CAAC,KAAK,IAAI,CAGxC,IAAa,GAAW,CACtB,SAAS,SACT,UACA,SACA,QACA,QACA,QACA,SACA,aACA,mBACA,WACA,GAAG,KACe,CAClB,GAAM,CAAE,WAAY,EAAA,kBAEpB,EAAA,EAAA,eAAgB,CACd,GAAqB,EACpB,EAAE,CAAC,CAON,IAAM,EACJ,IAAU,IAAA,GAEN,EAAkB,EAAQ,EAJX,IAJD,IAAW,OAC3B,eACA,qGAMkD,CADhD,EAGA,EAAiB,IAAW,OAC9B,CACA,SAAU,EAAQ,MAAM,KAAK,IAC7B,SAAU,EAAQ,MAAM,KAAK,IAC7B,QAAS,EAAQ,QAAQ,KACzB,UAAW,SACZ,CACC,CACA,SAAU,EAAQ,MAAM,OAAO,IAC/B,SAAU,EAAQ,MAAM,OAAO,IAC/B,QAAS,EAAQ,QAAQ,OAC1B,CAEH,OACE,EAAA,EAAA,KAAC,EAAA,QAAD,CACE,GAAI,EACJ,MAAO,EACP,MAAO,GAAS,EAAQ,QAAQ,WAChC,MAAO,GAAS,GAChB,OAAQ,CACN,GAAG,EACH,KAAM,CACJ,aAAc,EAAQ,OACtB,MAAO,EAAQ,QAAQ,KACvB,cAAe,EACf,GAAG,EACH,GAAG,GAAQ,KACZ,CACF,CACD,WAAY,CACV,GAAG,EACH,KAAM,EAAgB,qBAAsB,mBAAmB,IAAU,GAAY,KAAM,EAAiB,CAC7G,CAEA,WACU,CAAA"}

package/dist-lib/display/Tooltip.js

@@ -0,0 +1,141 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Tooltip as t } from "antd";
+import { useEffect as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/ds/display/Tooltip.tsx
+var a = "ds-tooltip-styles";
+function o() {
+	if (typeof document > "u") return;
+	let { tooltip: t } = e, n = document.getElementById(a);
+	n || (n = document.createElement("style"), n.id = a, document.head.appendChild(n)), n.textContent = `
+    .ds-tooltip-overlay {
+      --ant-tooltip-arrow-background-color: ${t.surface.background};
+    }
+
+    .ds-tooltip-overlay .ant-tooltip-container {
+      background: ${t.surface.background};
+      border-radius: ${t.radius};
+      filter: ${t.elevation};
+      color: ${t.surface.body};
+      letter-spacing: 0;
+      max-width: ${t.width.normal.max};
+      min-width: ${t.width.normal.min};
+      padding: ${t.padding.normal};
+    }
+
+    .ds-tooltip-overlay .ant-tooltip-arrow .ant-tooltip-arrow-content {
+      background: ${t.surface.background};
+    }
+
+    .ds-tooltip-overlay .ant-tooltip-arrow::before {
+      background: ${t.surface.background};
+    }
+
+    .ds-tooltip-overlay.ant-tooltip-placement-left > .ant-tooltip-arrow,
+    .ds-tooltip-overlay.ant-tooltip-placement-leftTop > .ant-tooltip-arrow,
+    .ds-tooltip-overlay.ant-tooltip-placement-leftBottom > .ant-tooltip-arrow {
+      inset-inline-end: 0;
+    }
+
+    .ds-tooltip-overlay.ant-tooltip-placement-right > .ant-tooltip-arrow,
+    .ds-tooltip-overlay.ant-tooltip-placement-rightTop > .ant-tooltip-arrow,
+    .ds-tooltip-overlay.ant-tooltip-placement-rightBottom > .ant-tooltip-arrow {
+      inset-inline-start: 0;
+    }
+
+    .ds-tooltip-overlay.ds-tooltip-size-mini .ant-tooltip-container {
+      min-width: ${t.width.mini.min};
+      max-width: ${t.width.mini.max};
+      padding: ${t.padding.mini};
+      text-align: center;
+    }
+
+    .ds-tooltip-title {
+      margin: 0 0 4px;
+      color: ${t.surface.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+    }
+
+    .ds-tooltip-body {
+      margin: 0;
+      color: ${t.surface.body};
+      font-size: ${t.typography.body.fontSize};
+      font-weight: ${t.typography.body.fontWeight};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .ds-tooltip-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .ds-tooltip-content-mini {
+      align-items: center;
+    }
+  `;
+}
+function s(e, t, n) {
+	return e === "mini" ? /* @__PURE__ */ r("div", {
+		className: "ds-tooltip-content ds-tooltip-content-mini",
+		children: /* @__PURE__ */ r("p", {
+			className: "ds-tooltip-body",
+			children: n
+		})
+	}) : /* @__PURE__ */ i("div", {
+		className: "ds-tooltip-content",
+		children: [t ? /* @__PURE__ */ r("p", {
+			className: "ds-tooltip-title",
+			children: t
+		}) : null, /* @__PURE__ */ r("p", {
+			className: "ds-tooltip-body",
+			children: n
+		})]
+	});
+}
+function c(...e) {
+	return e.filter(Boolean).join(" ");
+}
+var l = ({ dsSize: i = "normal", dsTitle: a, dsBody: l, title: u, color: d, arrow: f, styles: p, classNames: m, overlayClassName: h, children: g, ..._ }) => {
+	let { tooltip: v } = e;
+	n(() => {
+		o();
+	}, []);
+	let y = u === void 0 ? s(i, a, l ?? (i === "mini" ? "Mini Tooltip" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque fermentum dolor eget.")) : u, b = i === "mini" ? {
+		minWidth: v.width.mini.min,
+		maxWidth: v.width.mini.max,
+		padding: v.padding.mini,
+		textAlign: "center"
+	} : {
+		minWidth: v.width.normal.min,
+		maxWidth: v.width.normal.max,
+		padding: v.padding.normal
+	};
+	return /* @__PURE__ */ r(t, {
+		..._,
+		title: y,
+		color: d ?? v.surface.background,
+		arrow: f ?? !0,
+		styles: {
+			...p,
+			body: {
+				borderRadius: v.radius,
+				color: v.surface.body,
+				letterSpacing: 0,
+				...b,
+				...p?.body
+			}
+		},
+		classNames: {
+			...m,
+			root: c("ds-tooltip-overlay", `ds-tooltip-size-${i}`, m?.root, h)
+		},
+		children: g
+	});
+};
+//#endregion
+export { l as Tooltip, o as ensureTooltipStyles };
+
+//# sourceMappingURL=Tooltip.js.map

package/dist-lib/display/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","names":[],"sources":["../../src/ds/display/Tooltip.tsx"],"sourcesContent":["import { Tooltip as AntTooltip } from 'antd';\nimport type { TooltipProps as AntTooltipProps } from 'antd';\nimport { useEffect } from 'react';\nimport type { ReactNode } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSTooltipSize = 'mini' | 'normal';\n\nexport type TooltipProps = AntTooltipProps & {\n  /** DS size variant from Figma. */\n  dsSize?: DSTooltipSize;\n  /** Optional DS title text for normal tooltip variant. */\n  dsTitle?: string;\n  /** DS body text used when Ant `title` prop is not provided. */\n  dsBody?: string;\n};\n\nconst STYLE_ID = 'ds-tooltip-styles';\n\nexport function ensureTooltipStyles() {\n  if (typeof document === 'undefined') return;\n  const { tooltip } = dsSemanticTokens;\n  let style = document.getElementById(STYLE_ID) as HTMLStyleElement | null;\n  if (!style) {\n    style = document.createElement('style');\n    style.id = STYLE_ID;\n    document.head.appendChild(style);\n  }\n\n  style.textContent = `\n    .ds-tooltip-overlay {\n      --ant-tooltip-arrow-background-color: ${tooltip.surface.background};\n    }\n\n    .ds-tooltip-overlay .ant-tooltip-container {\n      background: ${tooltip.surface.background};\n      border-radius: ${tooltip.radius};\n      filter: ${tooltip.elevation};\n      color: ${tooltip.surface.body};\n      letter-spacing: 0;\n      max-width: ${tooltip.width.normal.max};\n      min-width: ${tooltip.width.normal.min};\n      padding: ${tooltip.padding.normal};\n    }\n\n    .ds-tooltip-overlay .ant-tooltip-arrow .ant-tooltip-arrow-content {\n      background: ${tooltip.surface.background};\n    }\n\n    .ds-tooltip-overlay .ant-tooltip-arrow::before {\n      background: ${tooltip.surface.background};\n    }\n\n    .ds-tooltip-overlay.ant-tooltip-placement-left > .ant-tooltip-arrow,\n    .ds-tooltip-overlay.ant-tooltip-placement-leftTop > .ant-tooltip-arrow,\n    .ds-tooltip-overlay.ant-tooltip-placement-leftBottom > .ant-tooltip-arrow {\n      inset-inline-end: 0;\n    }\n\n    .ds-tooltip-overlay.ant-tooltip-placement-right > .ant-tooltip-arrow,\n    .ds-tooltip-overlay.ant-tooltip-placement-rightTop > .ant-tooltip-arrow,\n    .ds-tooltip-overlay.ant-tooltip-placement-rightBottom > .ant-tooltip-arrow {\n      inset-inline-start: 0;\n    }\n\n    .ds-tooltip-overlay.ds-tooltip-size-mini .ant-tooltip-container {\n      min-width: ${tooltip.width.mini.min};\n      max-width: ${tooltip.width.mini.max};\n      padding: ${tooltip.padding.mini};\n      text-align: center;\n    }\n\n    .ds-tooltip-title {\n      margin: 0 0 4px;\n      color: ${tooltip.surface.title};\n      font-size: ${tooltip.typography.title.fontSize};\n      font-weight: ${tooltip.typography.title.fontWeight};\n      line-height: ${tooltip.typography.title.lineHeight};\n    }\n\n    .ds-tooltip-body {\n      margin: 0;\n      color: ${tooltip.surface.body};\n      font-size: ${tooltip.typography.body.fontSize};\n      font-weight: ${tooltip.typography.body.fontWeight};\n      line-height: ${tooltip.typography.body.lineHeight};\n    }\n\n    .ds-tooltip-content {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .ds-tooltip-content-mini {\n      align-items: center;\n    }\n  `;\n}\n\nfunction getDefaultContent(dsSize: DSTooltipSize, dsTitle: string | undefined, dsBody: string) {\n  if (dsSize === 'mini') {\n    return (\n      <div className=\"ds-tooltip-content ds-tooltip-content-mini\">\n        <p className=\"ds-tooltip-body\">{dsBody}</p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"ds-tooltip-content\">\n      {dsTitle ? <p className=\"ds-tooltip-title\">{dsTitle}</p> : null}\n      <p className=\"ds-tooltip-body\">{dsBody}</p>\n    </div>\n  );\n}\n\nfunction mergeClassNames(...names: Array<string | undefined>) {\n  return names.filter(Boolean).join(' ');\n}\n\nexport const Tooltip = ({\n  dsSize = 'normal',\n  dsTitle,\n  dsBody,\n  title,\n  color,\n  arrow,\n  styles,\n  classNames,\n  overlayClassName,\n  children,\n  ...props\n}: TooltipProps) => {\n  const { tooltip } = dsSemanticTokens;\n\n  useEffect(() => {\n    ensureTooltipStyles();\n  }, []);\n\n  const defaultBody = dsSize === 'mini'\n    ? 'Mini Tooltip'\n    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque fermentum dolor eget.';\n\n  const resolvedBody = dsBody ?? defaultBody;\n  const resolvedTitle: ReactNode =\n    title !== undefined\n      ? title\n      : getDefaultContent(dsSize, dsTitle, resolvedBody);\n\n  const sizeBodyStyles = dsSize === 'mini'\n    ? {\n      minWidth: tooltip.width.mini.min,\n      maxWidth: tooltip.width.mini.max,\n      padding: tooltip.padding.mini,\n      textAlign: 'center' as const,\n    }\n    : {\n      minWidth: tooltip.width.normal.min,\n      maxWidth: tooltip.width.normal.max,\n      padding: tooltip.padding.normal,\n    };\n\n  return (\n    <AntTooltip\n      {...props}\n      title={resolvedTitle}\n      color={color ?? tooltip.surface.background}\n      arrow={arrow ?? true}\n      styles={{\n        ...styles,\n        body: {\n          borderRadius: tooltip.radius,\n          color: tooltip.surface.body,\n          letterSpacing: 0,\n          ...sizeBodyStyles,\n          ...styles?.body,\n        },\n      }}\n      classNames={{\n        ...classNames,\n        root: mergeClassNames('ds-tooltip-overlay', `ds-tooltip-size-${dsSize}`, classNames?.root, overlayClassName),\n      }}\n    >\n      {children}\n    </AntTooltip>\n  );\n};\n"],"mappings":";;;;;AAiBA,IAAM,IAAW;AAEjB,SAAgB,IAAsB;AACpC,KAAI,OAAO,WAAa,IAAa;CACrC,IAAM,EAAE,eAAY,GAChB,IAAQ,SAAS,eAAe,EAAS;AAO7C,CANK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM,GAGlC,EAAM,cAAc;;8CAEwB,EAAQ,QAAQ,WAAW;;;;oBAIrD,EAAQ,QAAQ,WAAW;uBACxB,EAAQ,OAAO;gBACtB,EAAQ,UAAU;eACnB,EAAQ,QAAQ,KAAK;;mBAEjB,EAAQ,MAAM,OAAO,IAAI;mBACzB,EAAQ,MAAM,OAAO,IAAI;iBAC3B,EAAQ,QAAQ,OAAO;;;;oBAIpB,EAAQ,QAAQ,WAAW;;;;oBAI3B,EAAQ,QAAQ,WAAW;;;;;;;;;;;;;;;;mBAgB5B,EAAQ,MAAM,KAAK,IAAI;mBACvB,EAAQ,MAAM,KAAK,IAAI;iBACzB,EAAQ,QAAQ,KAAK;;;;;;eAMvB,EAAQ,QAAQ,MAAM;mBAClB,EAAQ,WAAW,MAAM,SAAS;qBAChC,EAAQ,WAAW,MAAM,WAAW;qBACpC,EAAQ,WAAW,MAAM,WAAW;;;;;eAK1C,EAAQ,QAAQ,KAAK;mBACjB,EAAQ,WAAW,KAAK,SAAS;qBAC/B,EAAQ,WAAW,KAAK,WAAW;qBACnC,EAAQ,WAAW,KAAK,WAAW;;;;;;;;;;;;;;AAexD,SAAS,EAAkB,GAAuB,GAA6B,GAAgB;AAS7F,QARI,MAAW,SAEX,kBAAC,OAAD;EAAK,WAAU;YACb,kBAAC,KAAD;GAAG,WAAU;aAAmB;GAAW,CAAA;EACvC,CAAA,GAKR,kBAAC,OAAD;EAAK,WAAU;YAAf,CACG,IAAU,kBAAC,KAAD;GAAG,WAAU;aAAoB;GAAY,CAAA,GAAG,MAC3D,kBAAC,KAAD;GAAG,WAAU;aAAmB;GAAW,CAAA,CACvC;;;AAIV,SAAS,EAAgB,GAAG,GAAkC;AAC5D,QAAO,EAAM,OAAO,QAAQ,CAAC,KAAK,IAAI;;AAGxC,IAAa,KAAW,EACtB,YAAS,UACT,YACA,WACA,UACA,UACA,UACA,WACA,eACA,qBACA,aACA,GAAG,QACe;CAClB,IAAM,EAAE,eAAY;AAEpB,SAAgB;AACd,KAAqB;IACpB,EAAE,CAAC;CAON,IAAM,IACJ,MAAU,KAAA,IAEN,EAAkB,GAAQ,GAJX,MAJD,MAAW,SAC3B,iBACA,qGAMkD,GADhD,GAGA,IAAiB,MAAW,SAC9B;EACA,UAAU,EAAQ,MAAM,KAAK;EAC7B,UAAU,EAAQ,MAAM,KAAK;EAC7B,SAAS,EAAQ,QAAQ;EACzB,WAAW;EACZ,GACC;EACA,UAAU,EAAQ,MAAM,OAAO;EAC/B,UAAU,EAAQ,MAAM,OAAO;EAC/B,SAAS,EAAQ,QAAQ;EAC1B;AAEH,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,OAAO;EACP,OAAO,KAAS,EAAQ,QAAQ;EAChC,OAAO,KAAS;EAChB,QAAQ;GACN,GAAG;GACH,MAAM;IACJ,cAAc,EAAQ;IACtB,OAAO,EAAQ,QAAQ;IACvB,eAAe;IACf,GAAG;IACH,GAAG,GAAQ;IACZ;GACF;EACD,YAAY;GACV,GAAG;GACH,MAAM,EAAgB,sBAAsB,mBAAmB,KAAU,GAAY,MAAM,EAAiB;GAC7G;EAEA;EACU,CAAA"}