ods-ant 0.2.0 → 0.4.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.cjs","names":[],"sources":["../../src/ds/display/Image.tsx"],"sourcesContent":["import { Image as AntImage } from 'antd';\nimport type { ImageProps as AntImageProps } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { CORE_COLORS } from '../../tokens/core';\n\nexport type DSImageVariant = 'content' | 'thumbnail' | 'gallery' | 'evidence' | 'hero';\nexport type DSImageSize = 'sm' | 'md' | 'lg';\nexport type DSImageRatio = 'auto' | '1:1' | '4:3' | '3:2' | '16:9';\n\nexport type ImageProps = AntImageProps & {\n  /** Semantic DS variant for common product image contexts. */\n  dsVariant?: DSImageVariant;\n  /** DS size preset used when width is not provided. */\n  dsSize?: DSImageSize;\n  /** Optional aspect ratio lock. */\n  dsRatio?: DSImageRatio;\n  /** Optional caption rendered below the image. */\n  dsCaption?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-image-styles';\n\nconst VARIANT_STYLES: Record<\n  DSImageVariant,\n  {\n    border: string;\n    bg: string;\n    shadow: string;\n    hoverShadow: string;\n    radius: number;\n  }\n> = {\n  content: {\n    border: CORE_COLORS.surface.divider,\n    bg: CORE_COLORS.surface.container,\n    shadow: 'none',\n    hoverShadow: 'none',\n    radius: 8,\n  },\n  thumbnail: {\n    border: CORE_COLORS.surface.divider,\n    bg: CORE_COLORS.surface.subtle,\n    shadow: 'none',\n    hoverShadow: 'none',\n    radius: 6,\n  },\n  gallery: {\n    border: CORE_COLORS.surface.divider,\n    bg: CORE_COLORS.surface.container,\n    shadow: '0 2px 6px rgba(30, 57, 78, 0.08)',\n    hoverShadow: '0 4px 10px rgba(30, 57, 78, 0.14)',\n    radius: 10,\n  },\n  evidence: {\n    border: CORE_COLORS.brand.brandTint,\n    bg: CORE_COLORS.surface.container,\n    shadow: '0 1px 4px rgba(30, 57, 78, 0.08)',\n    hoverShadow: '0 2px 8px rgba(30, 57, 78, 0.12)',\n    radius: 8,\n  },\n  hero: {\n    border: 'transparent',\n    bg: CORE_COLORS.surface.container,\n    shadow: '0 8px 18px rgba(30, 57, 78, 0.16)',\n    hoverShadow: '0 10px 24px rgba(30, 57, 78, 0.2)',\n    radius: 12,\n  },\n};\n\nconst WIDTH_BY_SIZE: Record<DSImageSize, number> = {\n  sm: 120,\n  md: 220,\n  lg: 360,\n};\n\nconst RATIO_BY_NAME: Record<Exclude<DSImageRatio, 'auto'>, string> = {\n  '1:1': '1 / 1',\n  '4:3': '4 / 3',\n  '3:2': '3 / 2',\n  '16:9': '16 / 9',\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  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-image-shell {\n      display: inline-flex;\n      flex-direction: column;\n      gap: 8px;\n      max-width: 100%;\n      font-family: 'Nunito', sans-serif;\n      --ds-image-radius: 8px;\n      --ds-image-border: ${CORE_COLORS.surface.divider};\n      --ds-image-bg: ${CORE_COLORS.surface.container};\n      --ds-image-shadow: none;\n      --ds-image-shadow-hover: none;\n    }\n\n    .ds-image-shell .ant-image {\n      display: inline-block;\n      width: 100%;\n      max-width: 100%;\n      border-radius: var(--ds-image-radius);\n      border: 1px solid var(--ds-image-border);\n      background: var(--ds-image-bg);\n      box-shadow: var(--ds-image-shadow);\n      overflow: hidden;\n      transition: box-shadow 120ms ease-out;\n    }\n\n    .ds-image-shell[data-ds-image-variant=\"gallery\"] .ant-image:hover,\n    .ds-image-shell[data-ds-image-variant=\"evidence\"] .ant-image:hover,\n    .ds-image-shell[data-ds-image-variant=\"hero\"] .ant-image:hover {\n      box-shadow: var(--ds-image-shadow-hover);\n    }\n\n    .ds-image-shell .ant-image .ant-image-img {\n      width: 100%;\n      height: 100%;\n      object-fit: var(--ds-image-fit, cover);\n      vertical-align: middle;\n      display: block;\n      background: var(--ds-image-bg);\n    }\n\n    .ds-image-shell[data-ds-image-ratio=\"1:1\"] .ant-image,\n    .ds-image-shell[data-ds-image-ratio=\"4:3\"] .ant-image,\n    .ds-image-shell[data-ds-image-ratio=\"3:2\"] .ant-image,\n    .ds-image-shell[data-ds-image-ratio=\"16:9\"] .ant-image {\n      aspect-ratio: var(--ds-image-ratio);\n    }\n\n    .ds-image-shell .ant-image-mask {\n      background: rgba(22, 62, 94, 0.58);\n      color: ${CORE_COLORS.text.inverse};\n    }\n\n    .ds-image-shell .ant-image-mask .ant-image-mask-info {\n      color: ${CORE_COLORS.text.inverse};\n      font-size: 12px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.01em;\n    }\n\n    .ds-image-caption {\n      color: ${CORE_COLORS.text.secondary};\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 600;\n    }\n  `;\n}\n\nexport const Image = ({\n  dsVariant = 'content',\n  dsSize = 'md',\n  dsRatio = 'auto',\n  dsCaption,\n  className,\n  style,\n  width,\n  preview = true,\n  ...props\n}: ImageProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const variant = VARIANT_STYLES[dsVariant];\n  const resolvedWidth = width ?? (dsVariant === 'hero' ? 520 : WIDTH_BY_SIZE[dsSize]);\n\n  const shellStyle: CSSProperties = {\n    width: typeof resolvedWidth === 'number' ? `${resolvedWidth}px` : resolvedWidth,\n    ['--ds-image-radius' as string]: `${variant.radius}px`,\n    ['--ds-image-border' as string]: variant.border,\n    ['--ds-image-bg' as string]: variant.bg,\n    ['--ds-image-shadow' as string]: variant.shadow,\n    ['--ds-image-shadow-hover' as string]: variant.hoverShadow,\n    ['--ds-image-ratio' as string]: dsRatio === 'auto' ? undefined : RATIO_BY_NAME[dsRatio],\n    ['--ds-image-fit' as string]: dsVariant === 'hero' ? 'cover' : 'contain',\n  };\n\n  return (\n    <span\n      className=\"ds-image-shell\"\n      data-ds-image-ratio={dsRatio}\n      data-ds-image-size={dsSize}\n      data-ds-image-variant={dsVariant}\n      style={shellStyle}\n    >\n      <AntImage\n        {...props}\n        className={mergeClassNames('ds-image', className)}\n        preview={preview}\n        style={style}\n        width=\"100%\"\n      />\n      {dsCaption ? <span className=\"ds-image-caption\">{dsCaption}</span> : null}\n    </span>\n  );\n};\n\nImage.displayName = 'Image';"],"mappings":"oNAqBA,IAAM,EAAW,kBAEX,EASF,CACF,QAAS,CACP,OAAQ,EAAA,EAAY,QAAQ,QAC5B,GAAI,EAAA,EAAY,QAAQ,UACxB,OAAQ,OACR,YAAa,OACb,OAAQ,EACT,CACD,UAAW,CACT,OAAQ,EAAA,EAAY,QAAQ,QAC5B,GAAI,EAAA,EAAY,QAAQ,OACxB,OAAQ,OACR,YAAa,OACb,OAAQ,EACT,CACD,QAAS,CACP,OAAQ,EAAA,EAAY,QAAQ,QAC5B,GAAI,EAAA,EAAY,QAAQ,UACxB,OAAQ,mCACR,YAAa,oCACb,OAAQ,GACT,CACD,SAAU,CACR,OAAQ,EAAA,EAAY,MAAM,UAC1B,GAAI,EAAA,EAAY,QAAQ,UACxB,OAAQ,mCACR,YAAa,mCACb,OAAQ,EACT,CACD,KAAM,CACJ,OAAQ,cACR,GAAI,EAAA,EAAY,QAAQ,UACxB,OAAQ,oCACR,YAAa,oCACb,OAAQ,GACT,CACF,CAEK,EAA6C,CACjD,GAAI,IACJ,GAAI,IACJ,GAAI,IACL,CAEK,EAA+D,CACnE,MAAO,QACP,MAAO,QACP,MAAO,QACP,OAAQ,SACT,CAED,SAAS,EAAgB,GAAG,EAAuC,CACjE,OAAO,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM,CAGpD,SAAS,GAAe,CACtB,GAAI,OAAO,SAAa,IAAa,OAErC,IAAI,EAAQ,SAAS,eAAe,EAAS,CACxC,IACH,EAAQ,SAAS,cAAc,QAAQ,CACvC,EAAM,GAAK,EACX,SAAS,KAAK,YAAY,EAAM,EAGlC,EAAM,YAAc;;;;;;;;2BAQK,EAAA,EAAY,QAAQ,QAAQ;uBAChC,EAAA,EAAY,QAAQ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAyCtC,EAAA,EAAY,KAAK,QAAQ;;;;eAIzB,EAAA,EAAY,KAAK,QAAQ;;;;;;;;eAQzB,EAAA,EAAY,KAAK,UAAU;;;;;IAQ1C,IAAa,GAAS,CACpB,YAAY,UACZ,SAAS,KACT,UAAU,OACV,YACA,YACA,QACA,QACA,UAAU,GACV,GAAG,KACa,EAChB,EAAA,EAAA,eAAgB,CACd,GAAc,EACb,EAAE,CAAC,CAEN,IAAM,EAAU,EAAe,GACzB,EAAgB,IAAU,IAAc,OAAS,IAAM,EAAc,IAa3E,OACE,EAAA,EAAA,MAAC,OAAD,CACE,UAAU,iBACV,sBAAqB,EACrB,qBAAoB,EACpB,wBAAuB,EACvB,MAAO,CAhBT,MAAO,OAAO,GAAkB,SAAW,GAAG,EAAc,IAAM,EACjE,oBAAgC,GAAG,EAAQ,OAAO,IAClD,oBAAgC,EAAQ,OACxC,gBAA4B,EAAQ,GACpC,oBAAgC,EAAQ,OACxC,0BAAsC,EAAQ,YAC9C,mBAA+B,IAAY,OAAS,IAAA,GAAY,EAAc,GAC9E,iBAA6B,IAAc,OAAS,QAAU,UAStD,UALT,EAOE,EAAA,EAAA,KAAC,EAAA,MAAD,CACE,GAAI,EACJ,UAAW,EAAgB,WAAY,EAAU,CACxC,UACF,QACP,MAAM,OACN,CAAA,CACD,GAAY,EAAA,EAAA,KAAC,OAAD,CAAM,UAAU,4BAAoB,EAAiB,CAAA,CAAG,KAChE,IAIX,EAAM,YAAc"}

package/dist-lib/display/Image.js

@@ -0,0 +1,163 @@
+import { t as e } from "../core-C-tv3mqr.js";
+import { Image 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/Image.tsx
+var a = "ds-image-styles", o = {
+	content: {
+		border: e.surface.divider,
+		bg: e.surface.container,
+		shadow: "none",
+		hoverShadow: "none",
+		radius: 8
+	},
+	thumbnail: {
+		border: e.surface.divider,
+		bg: e.surface.subtle,
+		shadow: "none",
+		hoverShadow: "none",
+		radius: 6
+	},
+	gallery: {
+		border: e.surface.divider,
+		bg: e.surface.container,
+		shadow: "0 2px 6px rgba(30, 57, 78, 0.08)",
+		hoverShadow: "0 4px 10px rgba(30, 57, 78, 0.14)",
+		radius: 10
+	},
+	evidence: {
+		border: e.brand.brandTint,
+		bg: e.surface.container,
+		shadow: "0 1px 4px rgba(30, 57, 78, 0.08)",
+		hoverShadow: "0 2px 8px rgba(30, 57, 78, 0.12)",
+		radius: 8
+	},
+	hero: {
+		border: "transparent",
+		bg: e.surface.container,
+		shadow: "0 8px 18px rgba(30, 57, 78, 0.16)",
+		hoverShadow: "0 10px 24px rgba(30, 57, 78, 0.2)",
+		radius: 12
+	}
+}, s = {
+	sm: 120,
+	md: 220,
+	lg: 360
+}, c = {
+	"1:1": "1 / 1",
+	"4:3": "4 / 3",
+	"3:2": "3 / 2",
+	"16:9": "16 / 9"
+};
+function l(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function u() {
+	if (typeof document > "u") return;
+	let t = document.getElementById(a);
+	t || (t = document.createElement("style"), t.id = a, document.head.appendChild(t)), t.textContent = `
+    .ds-image-shell {
+      display: inline-flex;
+      flex-direction: column;
+      gap: 8px;
+      max-width: 100%;
+      font-family: 'Nunito', sans-serif;
+      --ds-image-radius: 8px;
+      --ds-image-border: ${e.surface.divider};
+      --ds-image-bg: ${e.surface.container};
+      --ds-image-shadow: none;
+      --ds-image-shadow-hover: none;
+    }
+
+    .ds-image-shell .ant-image {
+      display: inline-block;
+      width: 100%;
+      max-width: 100%;
+      border-radius: var(--ds-image-radius);
+      border: 1px solid var(--ds-image-border);
+      background: var(--ds-image-bg);
+      box-shadow: var(--ds-image-shadow);
+      overflow: hidden;
+      transition: box-shadow 120ms ease-out;
+    }
+
+    .ds-image-shell[data-ds-image-variant="gallery"] .ant-image:hover,
+    .ds-image-shell[data-ds-image-variant="evidence"] .ant-image:hover,
+    .ds-image-shell[data-ds-image-variant="hero"] .ant-image:hover {
+      box-shadow: var(--ds-image-shadow-hover);
+    }
+
+    .ds-image-shell .ant-image .ant-image-img {
+      width: 100%;
+      height: 100%;
+      object-fit: var(--ds-image-fit, cover);
+      vertical-align: middle;
+      display: block;
+      background: var(--ds-image-bg);
+    }
+
+    .ds-image-shell[data-ds-image-ratio="1:1"] .ant-image,
+    .ds-image-shell[data-ds-image-ratio="4:3"] .ant-image,
+    .ds-image-shell[data-ds-image-ratio="3:2"] .ant-image,
+    .ds-image-shell[data-ds-image-ratio="16:9"] .ant-image {
+      aspect-ratio: var(--ds-image-ratio);
+    }
+
+    .ds-image-shell .ant-image-mask {
+      background: rgba(22, 62, 94, 0.58);
+      color: ${e.text.inverse};
+    }
+
+    .ds-image-shell .ant-image-mask .ant-image-mask-info {
+      color: ${e.text.inverse};
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.01em;
+    }
+
+    .ds-image-caption {
+      color: ${e.text.secondary};
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 600;
+    }
+  `;
+}
+var d = ({ dsVariant: e = "content", dsSize: a = "md", dsRatio: d = "auto", dsCaption: f, className: p, style: m, width: h, preview: g = !0, ..._ }) => {
+	n(() => {
+		u();
+	}, []);
+	let v = o[e], y = h ?? (e === "hero" ? 520 : s[a]);
+	return /* @__PURE__ */ i("span", {
+		className: "ds-image-shell",
+		"data-ds-image-ratio": d,
+		"data-ds-image-size": a,
+		"data-ds-image-variant": e,
+		style: {
+			width: typeof y == "number" ? `${y}px` : y,
+			"--ds-image-radius": `${v.radius}px`,
+			"--ds-image-border": v.border,
+			"--ds-image-bg": v.bg,
+			"--ds-image-shadow": v.shadow,
+			"--ds-image-shadow-hover": v.hoverShadow,
+			"--ds-image-ratio": d === "auto" ? void 0 : c[d],
+			"--ds-image-fit": e === "hero" ? "cover" : "contain"
+		},
+		children: [/* @__PURE__ */ r(t, {
+			..._,
+			className: l("ds-image", p),
+			preview: g,
+			style: m,
+			width: "100%"
+		}), f ? /* @__PURE__ */ r("span", {
+			className: "ds-image-caption",
+			children: f
+		}) : null]
+	});
+};
+d.displayName = "Image";
+//#endregion
+export { d as Image };
+
+//# sourceMappingURL=Image.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Image.js","names":[],"sources":["../../src/ds/display/Image.tsx"],"sourcesContent":["import { Image as AntImage } from 'antd';\nimport type { ImageProps as AntImageProps } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { CORE_COLORS } from '../../tokens/core';\n\nexport type DSImageVariant = 'content' | 'thumbnail' | 'gallery' | 'evidence' | 'hero';\nexport type DSImageSize = 'sm' | 'md' | 'lg';\nexport type DSImageRatio = 'auto' | '1:1' | '4:3' | '3:2' | '16:9';\n\nexport type ImageProps = AntImageProps & {\n  /** Semantic DS variant for common product image contexts. */\n  dsVariant?: DSImageVariant;\n  /** DS size preset used when width is not provided. */\n  dsSize?: DSImageSize;\n  /** Optional aspect ratio lock. */\n  dsRatio?: DSImageRatio;\n  /** Optional caption rendered below the image. */\n  dsCaption?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-image-styles';\n\nconst VARIANT_STYLES: Record<\n  DSImageVariant,\n  {\n    border: string;\n    bg: string;\n    shadow: string;\n    hoverShadow: string;\n    radius: number;\n  }\n> = {\n  content: {\n    border: CORE_COLORS.surface.divider,\n    bg: CORE_COLORS.surface.container,\n    shadow: 'none',\n    hoverShadow: 'none',\n    radius: 8,\n  },\n  thumbnail: {\n    border: CORE_COLORS.surface.divider,\n    bg: CORE_COLORS.surface.subtle,\n    shadow: 'none',\n    hoverShadow: 'none',\n    radius: 6,\n  },\n  gallery: {\n    border: CORE_COLORS.surface.divider,\n    bg: CORE_COLORS.surface.container,\n    shadow: '0 2px 6px rgba(30, 57, 78, 0.08)',\n    hoverShadow: '0 4px 10px rgba(30, 57, 78, 0.14)',\n    radius: 10,\n  },\n  evidence: {\n    border: CORE_COLORS.brand.brandTint,\n    bg: CORE_COLORS.surface.container,\n    shadow: '0 1px 4px rgba(30, 57, 78, 0.08)',\n    hoverShadow: '0 2px 8px rgba(30, 57, 78, 0.12)',\n    radius: 8,\n  },\n  hero: {\n    border: 'transparent',\n    bg: CORE_COLORS.surface.container,\n    shadow: '0 8px 18px rgba(30, 57, 78, 0.16)',\n    hoverShadow: '0 10px 24px rgba(30, 57, 78, 0.2)',\n    radius: 12,\n  },\n};\n\nconst WIDTH_BY_SIZE: Record<DSImageSize, number> = {\n  sm: 120,\n  md: 220,\n  lg: 360,\n};\n\nconst RATIO_BY_NAME: Record<Exclude<DSImageRatio, 'auto'>, string> = {\n  '1:1': '1 / 1',\n  '4:3': '4 / 3',\n  '3:2': '3 / 2',\n  '16:9': '16 / 9',\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  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-image-shell {\n      display: inline-flex;\n      flex-direction: column;\n      gap: 8px;\n      max-width: 100%;\n      font-family: 'Nunito', sans-serif;\n      --ds-image-radius: 8px;\n      --ds-image-border: ${CORE_COLORS.surface.divider};\n      --ds-image-bg: ${CORE_COLORS.surface.container};\n      --ds-image-shadow: none;\n      --ds-image-shadow-hover: none;\n    }\n\n    .ds-image-shell .ant-image {\n      display: inline-block;\n      width: 100%;\n      max-width: 100%;\n      border-radius: var(--ds-image-radius);\n      border: 1px solid var(--ds-image-border);\n      background: var(--ds-image-bg);\n      box-shadow: var(--ds-image-shadow);\n      overflow: hidden;\n      transition: box-shadow 120ms ease-out;\n    }\n\n    .ds-image-shell[data-ds-image-variant=\"gallery\"] .ant-image:hover,\n    .ds-image-shell[data-ds-image-variant=\"evidence\"] .ant-image:hover,\n    .ds-image-shell[data-ds-image-variant=\"hero\"] .ant-image:hover {\n      box-shadow: var(--ds-image-shadow-hover);\n    }\n\n    .ds-image-shell .ant-image .ant-image-img {\n      width: 100%;\n      height: 100%;\n      object-fit: var(--ds-image-fit, cover);\n      vertical-align: middle;\n      display: block;\n      background: var(--ds-image-bg);\n    }\n\n    .ds-image-shell[data-ds-image-ratio=\"1:1\"] .ant-image,\n    .ds-image-shell[data-ds-image-ratio=\"4:3\"] .ant-image,\n    .ds-image-shell[data-ds-image-ratio=\"3:2\"] .ant-image,\n    .ds-image-shell[data-ds-image-ratio=\"16:9\"] .ant-image {\n      aspect-ratio: var(--ds-image-ratio);\n    }\n\n    .ds-image-shell .ant-image-mask {\n      background: rgba(22, 62, 94, 0.58);\n      color: ${CORE_COLORS.text.inverse};\n    }\n\n    .ds-image-shell .ant-image-mask .ant-image-mask-info {\n      color: ${CORE_COLORS.text.inverse};\n      font-size: 12px;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.01em;\n    }\n\n    .ds-image-caption {\n      color: ${CORE_COLORS.text.secondary};\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 600;\n    }\n  `;\n}\n\nexport const Image = ({\n  dsVariant = 'content',\n  dsSize = 'md',\n  dsRatio = 'auto',\n  dsCaption,\n  className,\n  style,\n  width,\n  preview = true,\n  ...props\n}: ImageProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const variant = VARIANT_STYLES[dsVariant];\n  const resolvedWidth = width ?? (dsVariant === 'hero' ? 520 : WIDTH_BY_SIZE[dsSize]);\n\n  const shellStyle: CSSProperties = {\n    width: typeof resolvedWidth === 'number' ? `${resolvedWidth}px` : resolvedWidth,\n    ['--ds-image-radius' as string]: `${variant.radius}px`,\n    ['--ds-image-border' as string]: variant.border,\n    ['--ds-image-bg' as string]: variant.bg,\n    ['--ds-image-shadow' as string]: variant.shadow,\n    ['--ds-image-shadow-hover' as string]: variant.hoverShadow,\n    ['--ds-image-ratio' as string]: dsRatio === 'auto' ? undefined : RATIO_BY_NAME[dsRatio],\n    ['--ds-image-fit' as string]: dsVariant === 'hero' ? 'cover' : 'contain',\n  };\n\n  return (\n    <span\n      className=\"ds-image-shell\"\n      data-ds-image-ratio={dsRatio}\n      data-ds-image-size={dsSize}\n      data-ds-image-variant={dsVariant}\n      style={shellStyle}\n    >\n      <AntImage\n        {...props}\n        className={mergeClassNames('ds-image', className)}\n        preview={preview}\n        style={style}\n        width=\"100%\"\n      />\n      {dsCaption ? <span className=\"ds-image-caption\">{dsCaption}</span> : null}\n    </span>\n  );\n};\n\nImage.displayName = 'Image';"],"mappings":";;;;;AAqBA,IAAM,IAAW,mBAEX,IASF;CACF,SAAS;EACP,QAAQ,EAAY,QAAQ;EAC5B,IAAI,EAAY,QAAQ;EACxB,QAAQ;EACR,aAAa;EACb,QAAQ;EACT;CACD,WAAW;EACT,QAAQ,EAAY,QAAQ;EAC5B,IAAI,EAAY,QAAQ;EACxB,QAAQ;EACR,aAAa;EACb,QAAQ;EACT;CACD,SAAS;EACP,QAAQ,EAAY,QAAQ;EAC5B,IAAI,EAAY,QAAQ;EACxB,QAAQ;EACR,aAAa;EACb,QAAQ;EACT;CACD,UAAU;EACR,QAAQ,EAAY,MAAM;EAC1B,IAAI,EAAY,QAAQ;EACxB,QAAQ;EACR,aAAa;EACb,QAAQ;EACT;CACD,MAAM;EACJ,QAAQ;EACR,IAAI,EAAY,QAAQ;EACxB,QAAQ;EACR,aAAa;EACb,QAAQ;EACT;CACF,EAEK,IAA6C;CACjD,IAAI;CACJ,IAAI;CACJ,IAAI;CACL,EAEK,IAA+D;CACnE,OAAO;CACP,OAAO;CACP,OAAO;CACP,QAAQ;CACT;AAED,SAAS,EAAgB,GAAG,GAAuC;AACjE,QAAO,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM;;AAGpD,SAAS,IAAe;AACtB,KAAI,OAAO,WAAa,IAAa;CAErC,IAAI,IAAQ,SAAS,eAAe,EAAS;AAO7C,CANK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM,GAGlC,EAAM,cAAc;;;;;;;;2BAQK,EAAY,QAAQ,QAAQ;uBAChC,EAAY,QAAQ,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;eAyCtC,EAAY,KAAK,QAAQ;;;;eAIzB,EAAY,KAAK,QAAQ;;;;;;;;eAQzB,EAAY,KAAK,UAAU;;;;;;;AAQ1C,IAAa,KAAS,EACpB,eAAY,WACZ,YAAS,MACT,aAAU,QACV,cACA,cACA,UACA,UACA,aAAU,IACV,GAAG,QACa;AAChB,SAAgB;AACd,KAAc;IACb,EAAE,CAAC;CAEN,IAAM,IAAU,EAAe,IACzB,IAAgB,MAAU,MAAc,SAAS,MAAM,EAAc;AAa3E,QACE,kBAAC,QAAD;EACE,WAAU;EACV,uBAAqB;EACrB,sBAAoB;EACpB,yBAAuB;EACvB,OAAO;GAhBT,OAAO,OAAO,KAAkB,WAAW,GAAG,EAAc,MAAM;GACjE,qBAAgC,GAAG,EAAQ,OAAO;GAClD,qBAAgC,EAAQ;GACxC,iBAA4B,EAAQ;GACpC,qBAAgC,EAAQ;GACxC,2BAAsC,EAAQ;GAC9C,oBAA+B,MAAY,SAAS,KAAA,IAAY,EAAc;GAC9E,kBAA6B,MAAc,SAAS,UAAU;GAStD;YALT,CAOE,kBAAC,GAAD;GACE,GAAI;GACJ,WAAW,EAAgB,YAAY,EAAU;GACxC;GACF;GACP,OAAM;GACN,CAAA,EACD,IAAY,kBAAC,QAAD;GAAM,WAAU;aAAoB;GAAiB,CAAA,GAAG,KAChE;;;AAIX,EAAM,cAAc"}

package/dist-lib/display/List.cjs

@@ -0,0 +1,142 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`./Empty.cjs`);let n=require(`antd`),r=require(`react`),i=require(`react/jsx-runtime`);var a=`ds-list-styles`,o=`ds-list`;function s(...e){return e.filter(Boolean).join(` `).trim()}function c(){if(typeof document>`u`)return;let{list:t}=e.dsSemanticTokens,n=document.getElementById(a);n||(n=document.createElement(`style`),n.id=a,document.head.appendChild(n)),n.textContent=`
+    .${o}.ant-list {
+      width: 100%;
+      color: ${t.text.body};
+      font-family: 'Nunito', sans-serif;
+      background: ${t.surface.default};
+    }
+
+    .${o}.ant-list,
+    .${o}.ant-list .ant-list-item,
+    .${o}.ant-list .ant-list-item-meta,
+    .${o}.ant-list .ant-list-item-action,
+    .${o}.ant-list .ant-list-empty-text {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${o}.ant-list .ant-list-header,
+    .${o}.ant-list .ant-list-footer {
+      color: ${t.text.secondary};
+      font-size: ${t.typography.secondary.fontSize};
+      font-weight: 700;
+      line-height: ${t.typography.secondary.lineHeight};
+      text-transform: uppercase;
+      letter-spacing: 0.48px;
+    }
+
+    .${o}.ant-list .ant-list-item {
+      align-items: center;
+      padding: ${t.spacing.default};
+      border-block-end-color: ${t.border.default};
+      color: ${t.text.body};
+      gap: 12px;
+    }
+
+    .${o}.ant-list .ant-list-item-meta {
+      align-items: center;
+      min-width: 0;
+    }
+
+    .${o}.ant-list .ant-list-item-meta-avatar {
+      margin-inline-end: 12px;
+    }
+
+    .${o}.ant-list .ant-list-item-meta-title,
+    .${o}.ant-list .ant-list-item-meta-title > a,
+    .${o}.ant-list .ds-list-title {
+      margin: 0;
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+    }
+
+    .${o}.ant-list .ant-list-item-meta-description,
+    .${o}.ant-list .ds-list-description {
+      color: ${t.text.secondary};
+      font-size: ${t.typography.body.fontSize};
+      font-weight: ${t.typography.body.fontWeight};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .${o}.ant-list .ant-list-item-action {
+      margin-inline-start: 16px;
+    }
+
+    .${o}.ant-list .ant-list-item-action > li {
+      padding-inline: 0;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='recordList'],
+    .${o}.ant-list[data-ds-list-variant='selectionList'],
+    .${o}.ant-list[data-ds-list-variant='withActions'] {
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      overflow: hidden;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='activityList'] {
+      background: ${t.surface.activity};
+      border-radius: ${t.border.radius};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='activityList'] .ant-list-item {
+      align-items: flex-start;
+      padding: ${t.spacing.activity};
+      background: ${t.surface.default};
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      margin-block-end: 8px;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='activityList'] .ant-list-item:last-child {
+      margin-block-end: 0;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='compact'] {
+      border-block: 1px solid ${t.border.default};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='compact'] .ant-list-item {
+      min-height: 38px;
+      padding: ${t.spacing.compact};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='withActions'] .ant-list-item {
+      padding: ${t.spacing.action};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item,
+    .${o}.ant-list[data-ds-list-variant='withActions'] .ant-list-item {
+      cursor: pointer;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item:hover,
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item:focus-within,
+    .${o}.ant-list[data-ds-list-variant='withActions'] .ant-list-item:hover,
+    .${o}.ant-list[data-ds-list-variant='withActions'] .ant-list-item:focus-within {
+      background: ${t.surface.hover};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item.ds-list-item-selected,
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item[aria-selected='true'] {
+      background: ${t.surface.selected};
+      box-shadow: inset 3px 0 0 ${t.border.selected};
+    }
+
+    .${o}.ant-list .ant-list-empty-text {
+      padding: 0;
+    }
+
+    .ds-list-kicker {
+      margin: 0 0 2px;
+      color: ${t.text.secondary};
+      font-size: ${t.typography.secondary.fontSize};
+      font-weight: 700;
+      line-height: ${t.typography.secondary.lineHeight};
+      letter-spacing: 0.48px;
+      text-transform: uppercase;
+    }
+  `}var l=({dsVariant:e=`recordList`,className:a,locale:l,...u})=>{(0,r.useEffect)(()=>{c()},[]);let d={emptyText:(0,i.jsx)(t.Empty,{dsVariant:`tableNoResults`,dsSize:`desktop`}),...l};return(0,i.jsx)(n.List,{...u,className:s(o,a),"data-ds-list-variant":e,locale:d})};l.Item=n.List.Item,exports.List=l;
+//# sourceMappingURL=List.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.cjs","names":[],"sources":["../../src/ds/display/List.tsx"],"sourcesContent":["import { List as AntList } from 'antd';\nimport type { ListProps as AntListProps } from 'antd';\nimport type { ReactElement } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { Empty } from './Empty';\n\nexport type DSListVariant = 'recordList' | 'activityList' | 'selectionList' | 'compact' | 'withActions';\n\nexport type ListProps<T = unknown> = AntListProps<T> & {\n  /** Semantic DS list variant for records, activity, selectable rows, compact rows, or rows with actions. */\n  dsVariant?: DSListVariant;\n};\n\ntype DSListComponent = (<T = unknown>(props: ListProps<T>) => ReactElement) & {\n  Item: typeof AntList.Item;\n};\n\nconst STYLE_ID = 'ds-list-styles';\nconst DS_LIST_CLASS = 'ds-list';\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 { list } = 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_LIST_CLASS}.ant-list {\n      width: 100%;\n      color: ${list.text.body};\n      font-family: 'Nunito', sans-serif;\n      background: ${list.surface.default};\n    }\n\n    .${DS_LIST_CLASS}.ant-list,\n    .${DS_LIST_CLASS}.ant-list .ant-list-item,\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta,\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-action,\n    .${DS_LIST_CLASS}.ant-list .ant-list-empty-text {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-header,\n    .${DS_LIST_CLASS}.ant-list .ant-list-footer {\n      color: ${list.text.secondary};\n      font-size: ${list.typography.secondary.fontSize};\n      font-weight: 700;\n      line-height: ${list.typography.secondary.lineHeight};\n      text-transform: uppercase;\n      letter-spacing: 0.48px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item {\n      align-items: center;\n      padding: ${list.spacing.default};\n      border-block-end-color: ${list.border.default};\n      color: ${list.text.body};\n      gap: 12px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta {\n      align-items: center;\n      min-width: 0;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta-avatar {\n      margin-inline-end: 12px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta-title,\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta-title > a,\n    .${DS_LIST_CLASS}.ant-list .ds-list-title {\n      margin: 0;\n      color: ${list.text.title};\n      font-size: ${list.typography.title.fontSize};\n      font-weight: ${list.typography.title.fontWeight};\n      line-height: ${list.typography.title.lineHeight};\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta-description,\n    .${DS_LIST_CLASS}.ant-list .ds-list-description {\n      color: ${list.text.secondary};\n      font-size: ${list.typography.body.fontSize};\n      font-weight: ${list.typography.body.fontWeight};\n      line-height: ${list.typography.body.lineHeight};\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-action {\n      margin-inline-start: 16px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-action > li {\n      padding-inline: 0;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='recordList'],\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'],\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] {\n      border: 1px solid ${list.border.default};\n      border-radius: ${list.border.radius};\n      overflow: hidden;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='activityList'] {\n      background: ${list.surface.activity};\n      border-radius: ${list.border.radius};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='activityList'] .ant-list-item {\n      align-items: flex-start;\n      padding: ${list.spacing.activity};\n      background: ${list.surface.default};\n      border: 1px solid ${list.border.default};\n      border-radius: ${list.border.radius};\n      margin-block-end: 8px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='activityList'] .ant-list-item:last-child {\n      margin-block-end: 0;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='compact'] {\n      border-block: 1px solid ${list.border.default};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='compact'] .ant-list-item {\n      min-height: 38px;\n      padding: ${list.spacing.compact};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] .ant-list-item {\n      padding: ${list.spacing.action};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] .ant-list-item {\n      cursor: pointer;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item:hover,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item:focus-within,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] .ant-list-item:hover,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] .ant-list-item:focus-within {\n      background: ${list.surface.hover};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item.ds-list-item-selected,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item[aria-selected='true'] {\n      background: ${list.surface.selected};\n      box-shadow: inset 3px 0 0 ${list.border.selected};\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-empty-text {\n      padding: 0;\n    }\n\n    .ds-list-kicker {\n      margin: 0 0 2px;\n      color: ${list.text.secondary};\n      font-size: ${list.typography.secondary.fontSize};\n      font-weight: 700;\n      line-height: ${list.typography.secondary.lineHeight};\n      letter-spacing: 0.48px;\n      text-transform: uppercase;\n    }\n  `;\n}\n\nconst ListComponent = <T,>({\n  dsVariant = 'recordList',\n  className,\n  locale,\n  ...props\n}: ListProps<T>): ReactElement => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const dsLocale = {\n    emptyText: <Empty dsVariant=\"tableNoResults\" dsSize=\"desktop\" />,\n    ...locale,\n  };\n\n  return (\n    <AntList<T>\n      {...props}\n      className={mergeClassNames(DS_LIST_CLASS, className)}\n      data-ds-list-variant={dsVariant}\n      locale={dsLocale}\n    />\n  );\n};\n\nexport const List = ListComponent as DSListComponent;\n\nList.Item = AntList.Item;"],"mappings":"qOAkBA,IAAM,EAAW,iBACX,EAAgB,UAEtB,SAAS,EAAgB,GAAG,EAAuC,CACjE,OAAO,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM,CAGpD,SAAS,GAAe,CACtB,GAAI,OAAO,SAAa,IAAa,OAErC,GAAM,CAAE,QAAS,EAAA,iBACb,EAAQ,SAAS,eAAe,EAAS,CACxC,IACH,EAAQ,SAAS,cAAc,QAAQ,CACvC,EAAM,GAAK,EACX,SAAS,KAAK,YAAY,EAAM,EAGlC,EAAM,YAAc;OACf,EAAc;;eAEN,EAAK,KAAK,KAAK;;oBAEV,EAAK,QAAQ,QAAQ;;;OAGlC,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;;;;;OAKd,EAAc;OACd,EAAc;eACN,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,UAAU,SAAS;;qBAEjC,EAAK,WAAW,UAAU,WAAW;;;;;OAKnD,EAAc;;iBAEJ,EAAK,QAAQ,QAAQ;gCACN,EAAK,OAAO,QAAQ;eACrC,EAAK,KAAK,KAAK;;;;OAIvB,EAAc;;;;;OAKd,EAAc;;;;OAId,EAAc;OACd,EAAc;OACd,EAAc;;eAEN,EAAK,KAAK,MAAM;mBACZ,EAAK,WAAW,MAAM,SAAS;qBAC7B,EAAK,WAAW,MAAM,WAAW;qBACjC,EAAK,WAAW,MAAM,WAAW;;;OAG/C,EAAc;OACd,EAAc;eACN,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,KAAK,SAAS;qBAC5B,EAAK,WAAW,KAAK,WAAW;qBAChC,EAAK,WAAW,KAAK,WAAW;;;OAG9C,EAAc;;;;OAId,EAAc;;;;OAId,EAAc;OACd,EAAc;OACd,EAAc;0BACK,EAAK,OAAO,QAAQ;uBACvB,EAAK,OAAO,OAAO;;;;OAInC,EAAc;oBACD,EAAK,QAAQ,SAAS;uBACnB,EAAK,OAAO,OAAO;;;OAGnC,EAAc;;iBAEJ,EAAK,QAAQ,SAAS;oBACnB,EAAK,QAAQ,QAAQ;0BACf,EAAK,OAAO,QAAQ;uBACvB,EAAK,OAAO,OAAO;;;;OAInC,EAAc;;;;OAId,EAAc;gCACW,EAAK,OAAO,QAAQ;;;OAG7C,EAAc;;iBAEJ,EAAK,QAAQ,QAAQ;;;OAG/B,EAAc;iBACJ,EAAK,QAAQ,OAAO;;;OAG9B,EAAc;OACd,EAAc;;;;OAId,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;oBACD,EAAK,QAAQ,MAAM;;;OAGhC,EAAc;OACd,EAAc;oBACD,EAAK,QAAQ,SAAS;kCACR,EAAK,OAAO,SAAS;;;OAGhD,EAAc;;;;;;eAMN,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,UAAU,SAAS;;qBAEjC,EAAK,WAAW,UAAU,WAAW;;;;IAgC1D,IAAa,GAzBc,CACzB,YAAY,aACZ,YACA,SACA,GAAG,KAC6B,EAChC,EAAA,EAAA,eAAgB,CACd,GAAc,EACb,EAAE,CAAC,CAEN,IAAM,EAAW,CACf,WAAW,EAAA,EAAA,KAAC,EAAA,MAAD,CAAO,UAAU,iBAAiB,OAAO,UAAY,CAAA,CAChE,GAAG,EACJ,CAED,OACE,EAAA,EAAA,KAAC,EAAA,KAAD,CACE,GAAI,EACJ,UAAW,EAAgB,EAAe,EAAU,CACpD,uBAAsB,EACtB,OAAQ,EACR,CAAA,EAMN,EAAK,KAAO,EAAA,KAAQ"}

package/dist-lib/display/List.js

@@ -0,0 +1,178 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { Empty as t } from "./Empty.js";
+import { List as n } from "antd";
+import { useEffect as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/ds/display/List.tsx
+var a = "ds-list-styles", o = "ds-list";
+function s(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function c() {
+	if (typeof document > "u") return;
+	let { list: t } = e, n = document.getElementById(a);
+	n || (n = document.createElement("style"), n.id = a, document.head.appendChild(n)), n.textContent = `
+    .${o}.ant-list {
+      width: 100%;
+      color: ${t.text.body};
+      font-family: 'Nunito', sans-serif;
+      background: ${t.surface.default};
+    }
+
+    .${o}.ant-list,
+    .${o}.ant-list .ant-list-item,
+    .${o}.ant-list .ant-list-item-meta,
+    .${o}.ant-list .ant-list-item-action,
+    .${o}.ant-list .ant-list-empty-text {
+      transition: none !important;
+      animation: none !important;
+    }
+
+    .${o}.ant-list .ant-list-header,
+    .${o}.ant-list .ant-list-footer {
+      color: ${t.text.secondary};
+      font-size: ${t.typography.secondary.fontSize};
+      font-weight: 700;
+      line-height: ${t.typography.secondary.lineHeight};
+      text-transform: uppercase;
+      letter-spacing: 0.48px;
+    }
+
+    .${o}.ant-list .ant-list-item {
+      align-items: center;
+      padding: ${t.spacing.default};
+      border-block-end-color: ${t.border.default};
+      color: ${t.text.body};
+      gap: 12px;
+    }
+
+    .${o}.ant-list .ant-list-item-meta {
+      align-items: center;
+      min-width: 0;
+    }
+
+    .${o}.ant-list .ant-list-item-meta-avatar {
+      margin-inline-end: 12px;
+    }
+
+    .${o}.ant-list .ant-list-item-meta-title,
+    .${o}.ant-list .ant-list-item-meta-title > a,
+    .${o}.ant-list .ds-list-title {
+      margin: 0;
+      color: ${t.text.title};
+      font-size: ${t.typography.title.fontSize};
+      font-weight: ${t.typography.title.fontWeight};
+      line-height: ${t.typography.title.lineHeight};
+    }
+
+    .${o}.ant-list .ant-list-item-meta-description,
+    .${o}.ant-list .ds-list-description {
+      color: ${t.text.secondary};
+      font-size: ${t.typography.body.fontSize};
+      font-weight: ${t.typography.body.fontWeight};
+      line-height: ${t.typography.body.lineHeight};
+    }
+
+    .${o}.ant-list .ant-list-item-action {
+      margin-inline-start: 16px;
+    }
+
+    .${o}.ant-list .ant-list-item-action > li {
+      padding-inline: 0;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='recordList'],
+    .${o}.ant-list[data-ds-list-variant='selectionList'],
+    .${o}.ant-list[data-ds-list-variant='withActions'] {
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      overflow: hidden;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='activityList'] {
+      background: ${t.surface.activity};
+      border-radius: ${t.border.radius};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='activityList'] .ant-list-item {
+      align-items: flex-start;
+      padding: ${t.spacing.activity};
+      background: ${t.surface.default};
+      border: 1px solid ${t.border.default};
+      border-radius: ${t.border.radius};
+      margin-block-end: 8px;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='activityList'] .ant-list-item:last-child {
+      margin-block-end: 0;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='compact'] {
+      border-block: 1px solid ${t.border.default};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='compact'] .ant-list-item {
+      min-height: 38px;
+      padding: ${t.spacing.compact};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='withActions'] .ant-list-item {
+      padding: ${t.spacing.action};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item,
+    .${o}.ant-list[data-ds-list-variant='withActions'] .ant-list-item {
+      cursor: pointer;
+    }
+
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item:hover,
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item:focus-within,
+    .${o}.ant-list[data-ds-list-variant='withActions'] .ant-list-item:hover,
+    .${o}.ant-list[data-ds-list-variant='withActions'] .ant-list-item:focus-within {
+      background: ${t.surface.hover};
+    }
+
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item.ds-list-item-selected,
+    .${o}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item[aria-selected='true'] {
+      background: ${t.surface.selected};
+      box-shadow: inset 3px 0 0 ${t.border.selected};
+    }
+
+    .${o}.ant-list .ant-list-empty-text {
+      padding: 0;
+    }
+
+    .ds-list-kicker {
+      margin: 0 0 2px;
+      color: ${t.text.secondary};
+      font-size: ${t.typography.secondary.fontSize};
+      font-weight: 700;
+      line-height: ${t.typography.secondary.lineHeight};
+      letter-spacing: 0.48px;
+      text-transform: uppercase;
+    }
+  `;
+}
+var l = ({ dsVariant: e = "recordList", className: a, locale: l, ...u }) => {
+	r(() => {
+		c();
+	}, []);
+	let d = {
+		emptyText: /* @__PURE__ */ i(t, {
+			dsVariant: "tableNoResults",
+			dsSize: "desktop"
+		}),
+		...l
+	};
+	return /* @__PURE__ */ i(n, {
+		...u,
+		className: s(o, a),
+		"data-ds-list-variant": e,
+		locale: d
+	});
+};
+l.Item = n.Item;
+//#endregion
+export { l as List };
+
+//# sourceMappingURL=List.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":[],"sources":["../../src/ds/display/List.tsx"],"sourcesContent":["import { List as AntList } from 'antd';\nimport type { ListProps as AntListProps } from 'antd';\nimport type { ReactElement } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { Empty } from './Empty';\n\nexport type DSListVariant = 'recordList' | 'activityList' | 'selectionList' | 'compact' | 'withActions';\n\nexport type ListProps<T = unknown> = AntListProps<T> & {\n  /** Semantic DS list variant for records, activity, selectable rows, compact rows, or rows with actions. */\n  dsVariant?: DSListVariant;\n};\n\ntype DSListComponent = (<T = unknown>(props: ListProps<T>) => ReactElement) & {\n  Item: typeof AntList.Item;\n};\n\nconst STYLE_ID = 'ds-list-styles';\nconst DS_LIST_CLASS = 'ds-list';\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 { list } = 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_LIST_CLASS}.ant-list {\n      width: 100%;\n      color: ${list.text.body};\n      font-family: 'Nunito', sans-serif;\n      background: ${list.surface.default};\n    }\n\n    .${DS_LIST_CLASS}.ant-list,\n    .${DS_LIST_CLASS}.ant-list .ant-list-item,\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta,\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-action,\n    .${DS_LIST_CLASS}.ant-list .ant-list-empty-text {\n      transition: none !important;\n      animation: none !important;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-header,\n    .${DS_LIST_CLASS}.ant-list .ant-list-footer {\n      color: ${list.text.secondary};\n      font-size: ${list.typography.secondary.fontSize};\n      font-weight: 700;\n      line-height: ${list.typography.secondary.lineHeight};\n      text-transform: uppercase;\n      letter-spacing: 0.48px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item {\n      align-items: center;\n      padding: ${list.spacing.default};\n      border-block-end-color: ${list.border.default};\n      color: ${list.text.body};\n      gap: 12px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta {\n      align-items: center;\n      min-width: 0;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta-avatar {\n      margin-inline-end: 12px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta-title,\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta-title > a,\n    .${DS_LIST_CLASS}.ant-list .ds-list-title {\n      margin: 0;\n      color: ${list.text.title};\n      font-size: ${list.typography.title.fontSize};\n      font-weight: ${list.typography.title.fontWeight};\n      line-height: ${list.typography.title.lineHeight};\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-meta-description,\n    .${DS_LIST_CLASS}.ant-list .ds-list-description {\n      color: ${list.text.secondary};\n      font-size: ${list.typography.body.fontSize};\n      font-weight: ${list.typography.body.fontWeight};\n      line-height: ${list.typography.body.lineHeight};\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-action {\n      margin-inline-start: 16px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-item-action > li {\n      padding-inline: 0;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='recordList'],\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'],\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] {\n      border: 1px solid ${list.border.default};\n      border-radius: ${list.border.radius};\n      overflow: hidden;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='activityList'] {\n      background: ${list.surface.activity};\n      border-radius: ${list.border.radius};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='activityList'] .ant-list-item {\n      align-items: flex-start;\n      padding: ${list.spacing.activity};\n      background: ${list.surface.default};\n      border: 1px solid ${list.border.default};\n      border-radius: ${list.border.radius};\n      margin-block-end: 8px;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='activityList'] .ant-list-item:last-child {\n      margin-block-end: 0;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='compact'] {\n      border-block: 1px solid ${list.border.default};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='compact'] .ant-list-item {\n      min-height: 38px;\n      padding: ${list.spacing.compact};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] .ant-list-item {\n      padding: ${list.spacing.action};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] .ant-list-item {\n      cursor: pointer;\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item:hover,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item:focus-within,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] .ant-list-item:hover,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='withActions'] .ant-list-item:focus-within {\n      background: ${list.surface.hover};\n    }\n\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item.ds-list-item-selected,\n    .${DS_LIST_CLASS}.ant-list[data-ds-list-variant='selectionList'] .ant-list-item[aria-selected='true'] {\n      background: ${list.surface.selected};\n      box-shadow: inset 3px 0 0 ${list.border.selected};\n    }\n\n    .${DS_LIST_CLASS}.ant-list .ant-list-empty-text {\n      padding: 0;\n    }\n\n    .ds-list-kicker {\n      margin: 0 0 2px;\n      color: ${list.text.secondary};\n      font-size: ${list.typography.secondary.fontSize};\n      font-weight: 700;\n      line-height: ${list.typography.secondary.lineHeight};\n      letter-spacing: 0.48px;\n      text-transform: uppercase;\n    }\n  `;\n}\n\nconst ListComponent = <T,>({\n  dsVariant = 'recordList',\n  className,\n  locale,\n  ...props\n}: ListProps<T>): ReactElement => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const dsLocale = {\n    emptyText: <Empty dsVariant=\"tableNoResults\" dsSize=\"desktop\" />,\n    ...locale,\n  };\n\n  return (\n    <AntList<T>\n      {...props}\n      className={mergeClassNames(DS_LIST_CLASS, className)}\n      data-ds-list-variant={dsVariant}\n      locale={dsLocale}\n    />\n  );\n};\n\nexport const List = ListComponent as DSListComponent;\n\nList.Item = AntList.Item;"],"mappings":";;;;;;AAkBA,IAAM,IAAW,kBACX,IAAgB;AAEtB,SAAS,EAAgB,GAAG,GAAuC;AACjE,QAAO,EAAW,OAAO,QAAQ,CAAC,KAAK,IAAI,CAAC,MAAM;;AAGpD,SAAS,IAAe;AACtB,KAAI,OAAO,WAAa,IAAa;CAErC,IAAM,EAAE,YAAS,GACb,IAAQ,SAAS,eAAe,EAAS;AAO7C,CANK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM,GAGlC,EAAM,cAAc;OACf,EAAc;;eAEN,EAAK,KAAK,KAAK;;oBAEV,EAAK,QAAQ,QAAQ;;;OAGlC,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;;;;;OAKd,EAAc;OACd,EAAc;eACN,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,UAAU,SAAS;;qBAEjC,EAAK,WAAW,UAAU,WAAW;;;;;OAKnD,EAAc;;iBAEJ,EAAK,QAAQ,QAAQ;gCACN,EAAK,OAAO,QAAQ;eACrC,EAAK,KAAK,KAAK;;;;OAIvB,EAAc;;;;;OAKd,EAAc;;;;OAId,EAAc;OACd,EAAc;OACd,EAAc;;eAEN,EAAK,KAAK,MAAM;mBACZ,EAAK,WAAW,MAAM,SAAS;qBAC7B,EAAK,WAAW,MAAM,WAAW;qBACjC,EAAK,WAAW,MAAM,WAAW;;;OAG/C,EAAc;OACd,EAAc;eACN,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,KAAK,SAAS;qBAC5B,EAAK,WAAW,KAAK,WAAW;qBAChC,EAAK,WAAW,KAAK,WAAW;;;OAG9C,EAAc;;;;OAId,EAAc;;;;OAId,EAAc;OACd,EAAc;OACd,EAAc;0BACK,EAAK,OAAO,QAAQ;uBACvB,EAAK,OAAO,OAAO;;;;OAInC,EAAc;oBACD,EAAK,QAAQ,SAAS;uBACnB,EAAK,OAAO,OAAO;;;OAGnC,EAAc;;iBAEJ,EAAK,QAAQ,SAAS;oBACnB,EAAK,QAAQ,QAAQ;0BACf,EAAK,OAAO,QAAQ;uBACvB,EAAK,OAAO,OAAO;;;;OAInC,EAAc;;;;OAId,EAAc;gCACW,EAAK,OAAO,QAAQ;;;OAG7C,EAAc;;iBAEJ,EAAK,QAAQ,QAAQ;;;OAG/B,EAAc;iBACJ,EAAK,QAAQ,OAAO;;;OAG9B,EAAc;OACd,EAAc;;;;OAId,EAAc;OACd,EAAc;OACd,EAAc;OACd,EAAc;oBACD,EAAK,QAAQ,MAAM;;;OAGhC,EAAc;OACd,EAAc;oBACD,EAAK,QAAQ,SAAS;kCACR,EAAK,OAAO,SAAS;;;OAGhD,EAAc;;;;;;eAMN,EAAK,KAAK,UAAU;mBAChB,EAAK,WAAW,UAAU,SAAS;;qBAEjC,EAAK,WAAW,UAAU,WAAW;;;;;;AAgC1D,IAAa,KAzBc,EACzB,eAAY,cACZ,cACA,WACA,GAAG,QAC6B;AAChC,SAAgB;AACd,KAAc;IACb,EAAE,CAAC;CAEN,IAAM,IAAW;EACf,WAAW,kBAAC,GAAD;GAAO,WAAU;GAAiB,QAAO;GAAY,CAAA;EAChE,GAAG;EACJ;AAED,QACE,kBAAC,GAAD;EACE,GAAI;EACJ,WAAW,EAAgB,GAAe,EAAU;EACpD,wBAAsB;EACtB,QAAQ;EACR,CAAA;;AAMN,EAAK,OAAO,EAAQ"}

package/dist-lib/display/Popover.cjs

@@ -0,0 +1,62 @@
+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-popover-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-popover-overlay .ant-popover-inner {
+      background: ${t.surface.background};
+      border-radius: ${t.radius};
+      box-shadow: none;
+      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-popover-overlay .ant-popover-arrow {
+      width: ${t.arrow.width};
+      height: ${t.arrow.height};
+    }
+
+    .ds-popover-overlay .ant-popover-arrow::before,
+    .ds-popover-overlay .ant-popover-arrow::after {
+      background: ${t.surface.background};
+    }
+
+    .ds-popover-overlay.ds-popover-size-mini .ant-popover-inner {
+      min-width: ${t.width.mini.min};
+      max-width: ${t.width.mini.max};
+      padding: ${t.padding.mini};
+      text-align: center;
+    }
+
+    .ds-popover-overlay .ant-popover-title,
+    .ds-popover-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};
+      border: 0;
+      padding: 0;
+      min-height: 0;
+    }
+
+    .ds-popover-overlay .ant-popover-inner-content,
+    .ds-popover-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-popover-content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    .ds-popover-content-mini {
+      align-items: center;
+    }
+  `}function o(...e){return e.filter(Boolean).join(` `)}function s(e,t){return e===`mini`?(0,r.jsx)(`div`,{className:`ds-popover-content ds-popover-content-mini`,children:(0,r.jsx)(`p`,{className:`ds-popover-body`,children:t})}):(0,r.jsx)(`p`,{className:`ds-popover-body`,children:t})}var c=({dsSize:i=`normal`,dsTitle:c,dsBody:l,title:u,content:d,color:f,arrow:p,styles:m,classNames:h,overlayClassName:g,..._})=>{let{tooltip:v}=e.dsSemanticTokens;(0,n.useEffect)(()=>{a()},[]);let y=d===void 0?s(i,l??(i===`mini`?`Mini Popover`:`Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque fermentum dolor eget.`)):d,b=u===void 0?i===`normal`&&c?(0,r.jsx)(`p`,{className:`ds-popover-title`,children:c}):void 0:u,x=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.Popover,{..._,title:b,content:y,color:f??v.surface.background,arrow:p??!0,styles:{...m,body:{borderRadius:v.radius,color:v.surface.body,letterSpacing:0,...x,...m?.body}},classNames:{...h,root:o(`ds-popover-overlay`,`ds-popover-size-${i}`,h?.root,g)}})};exports.Popover=c;
+//# sourceMappingURL=Popover.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.cjs","names":[],"sources":["../../src/ds/display/Popover.tsx"],"sourcesContent":["import { Popover as AntPopover } from 'antd';\nimport type { PopoverProps as AntPopoverProps } from 'antd';\nimport { useEffect } from 'react';\nimport type { ReactNode } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\n\nexport type DSPopoverSize = 'mini' | 'normal';\n\nexport type PopoverProps = AntPopoverProps & {\n  /** DS size variant from Figma. */\n  dsSize?: DSPopoverSize;\n  /** Optional DS title text for normal popover variant. */\n  dsTitle?: string;\n  /** DS body text used when Ant `content` prop is not provided. */\n  dsBody?: string;\n};\n\nconst STYLE_ID = 'ds-popover-styles';\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\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-popover-overlay .ant-popover-inner {\n      background: ${tooltip.surface.background};\n      border-radius: ${tooltip.radius};\n      box-shadow: none;\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-popover-overlay .ant-popover-arrow {\n      width: ${tooltip.arrow.width};\n      height: ${tooltip.arrow.height};\n    }\n\n    .ds-popover-overlay .ant-popover-arrow::before,\n    .ds-popover-overlay .ant-popover-arrow::after {\n      background: ${tooltip.surface.background};\n    }\n\n    .ds-popover-overlay.ds-popover-size-mini .ant-popover-inner {\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-popover-overlay .ant-popover-title,\n    .ds-popover-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      border: 0;\n      padding: 0;\n      min-height: 0;\n    }\n\n    .ds-popover-overlay .ant-popover-inner-content,\n    .ds-popover-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-popover-content {\n      display: flex;\n      flex-direction: column;\n      gap: 4px;\n    }\n\n    .ds-popover-content-mini {\n      align-items: center;\n    }\n  `;\n}\n\nfunction mergeClassNames(...names: Array<string | undefined>) {\n  return names.filter(Boolean).join(' ');\n}\n\nfunction getDefaultContent(dsSize: DSPopoverSize, dsBody: string) {\n  if (dsSize === 'mini') {\n    return (\n      <div className=\"ds-popover-content ds-popover-content-mini\">\n        <p className=\"ds-popover-body\">{dsBody}</p>\n      </div>\n    );\n  }\n\n  return <p className=\"ds-popover-body\">{dsBody}</p>;\n}\n\nexport const Popover = ({\n  dsSize = 'normal',\n  dsTitle,\n  dsBody,\n  title,\n  content,\n  color,\n  arrow,\n  styles,\n  classNames,\n  overlayClassName,\n  ...props\n}: PopoverProps) => {\n  const { tooltip } = dsSemanticTokens;\n\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const defaultBody = dsSize === 'mini'\n    ? 'Mini Popover'\n    : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla pellentesque fermentum dolor eget.';\n\n  const resolvedBody = dsBody ?? defaultBody;\n  const resolvedContent: ReactNode =\n    content !== undefined ? content : getDefaultContent(dsSize, resolvedBody);\n\n  const resolvedTitle: ReactNode =\n    title !== undefined\n      ? title\n      : dsSize === 'normal' && dsTitle\n        ? <p className=\"ds-popover-title\">{dsTitle}</p>\n        : undefined;\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    <AntPopover\n      {...props}\n      title={resolvedTitle}\n      content={resolvedContent}\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-popover-overlay', `ds-popover-size-${dsSize}`, classNames?.root, overlayClassName),\n      }}\n    />\n  );\n};"],"mappings":"4MAiBA,IAAM,EAAW,oBAEjB,SAAS,GAAe,CACtB,GAAI,OAAO,SAAa,IAAa,OAErC,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;;oBAEF,EAAQ,QAAQ,WAAW;uBACxB,EAAQ,OAAO;;gBAEtB,EAAQ,UAAU;eACnB,EAAQ,QAAQ,KAAK;;mBAEjB,EAAQ,MAAM,OAAO,IAAI;mBACzB,EAAQ,MAAM,OAAO,IAAI;iBAC3B,EAAQ,QAAQ,OAAO;;;;eAIzB,EAAQ,MAAM,MAAM;gBACnB,EAAQ,MAAM,OAAO;;;;;oBAKjB,EAAQ,QAAQ,WAAW;;;;mBAI5B,EAAQ,MAAM,KAAK,IAAI;mBACvB,EAAQ,MAAM,KAAK,IAAI;iBACzB,EAAQ,QAAQ,KAAK;;;;;;;eAOvB,EAAQ,QAAQ,MAAM;mBAClB,EAAQ,WAAW,MAAM,SAAS;qBAChC,EAAQ,WAAW,MAAM,WAAW;qBACpC,EAAQ,WAAW,MAAM,WAAW;;;;;;;;;eAS1C,EAAQ,QAAQ,KAAK;mBACjB,EAAQ,WAAW,KAAK,SAAS;qBAC/B,EAAQ,WAAW,KAAK,WAAW;qBACnC,EAAQ,WAAW,KAAK,WAAW;;;;;;;;;;;;IAexD,SAAS,EAAgB,GAAG,EAAkC,CAC5D,OAAO,EAAM,OAAO,QAAQ,CAAC,KAAK,IAAI,CAGxC,SAAS,EAAkB,EAAuB,EAAgB,CAShE,OARI,IAAW,QAEX,EAAA,EAAA,KAAC,MAAD,CAAK,UAAU,uDACb,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,2BAAmB,EAAW,CAAA,CACvC,CAAA,EAIH,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,2BAAmB,EAAW,CAAA,CAGpD,IAAa,GAAW,CACtB,SAAS,SACT,UACA,SACA,QACA,UACA,QACA,QACA,SACA,aACA,mBACA,GAAG,KACe,CAClB,GAAM,CAAE,WAAY,EAAA,kBAEpB,EAAA,EAAA,eAAgB,CACd,GAAc,EACb,EAAE,CAAC,CAON,IAAM,EACJ,IAAY,IAAA,GAAsB,EAAkB,EAFjC,IAJD,IAAW,OAC3B,eACA,qGAIuE,CAAjD,EAEpB,EACJ,IAAU,IAAA,GAEN,IAAW,UAAY,GACrB,EAAA,EAAA,KAAC,IAAD,CAAG,UAAU,4BAAoB,EAAY,CAAA,CAC7C,IAAA,GAHF,EAKA,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,QAAS,EACT,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,CACD,CAAA"}