ods-ant 0.2.0 → 0.4.0

package/dist-lib/display/Empty.js

@@ -0,0 +1,295 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { n as t } from "../useCustomIcon-B-VUK-84.js";
+import { Empty 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/Empty.tsx
+var o = "ds-empty-styles", s = {
+	illustrated: {
+		iconName: "messages",
+		title: "No Messages",
+		description: "When you have received messages, you will see them here."
+	},
+	tablePrompt: { description: "Please search or apply filters to populate list." },
+	tableNoResults: { description: "No results match your search criteria, please adjust your filters." }
+};
+function c() {
+	if (typeof document > "u") return;
+	let { empty: t } = e, n = document.getElementById(o);
+	n || (n = document.createElement("style"), n.id = o, document.head.appendChild(n)), n.textContent = `
+    .ds-empty.ant-empty {
+      margin: 0;
+      padding: 0;
+      color: ${t.text.description};
+      font-family: inherit;
+    }
+
+    .ds-empty.ant-empty .ant-empty-image {
+      height: auto;
+      margin-bottom: var(--ds-empty-illustration-gap);
+      line-height: 1;
+    }
+
+    .ds-empty.ant-empty .ant-empty-description {
+      color: inherit;
+    }
+
+    .ds-empty.ant-empty .ant-empty-footer {
+      margin-top: var(--ds-empty-action-gap);
+    }
+
+    .ds-empty-illustration {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--ds-empty-illustration-size);
+      height: var(--ds-empty-illustration-size);
+      color: ${t.illustration.color};
+    }
+
+    .ds-empty-inbox-illustration {
+      position: relative;
+      display: inline-block;
+      width: var(--ds-empty-illustration-size);
+      height: var(--ds-empty-illustration-size);
+      color: ${t.illustration.color};
+    }
+
+    .ds-empty-inbox-box {
+      position: absolute;
+      left: 22%;
+      right: 22%;
+      bottom: 12%;
+      height: 34%;
+      border: ${t.illustration.strokeWidth} solid currentColor;
+      border-radius: 4px;
+      background: transparent;
+    }
+
+    .ds-empty-inbox-box::before {
+      content: '';
+      position: absolute;
+      left: 22%;
+      right: 22%;
+      bottom: 40%;
+      height: 28%;
+      border-bottom: ${t.illustration.strokeWidth} solid currentColor;
+      border-radius: 0 0 999px 999px;
+    }
+
+    .ds-empty-inbox-ray {
+      position: absolute;
+      top: 8%;
+      left: 50%;
+      width: ${t.illustration.strokeWidth};
+      height: 14%;
+      background: currentColor;
+      border-radius: 999px;
+      transform-origin: bottom center;
+    }
+
+    .ds-empty-inbox-ray[data-ray='left'] {
+      transform: translateX(-50%) rotate(-28deg) translateY(4%);
+    }
+
+    .ds-empty-inbox-ray[data-ray='center'] {
+      transform: translateX(-50%);
+    }
+
+    .ds-empty-inbox-ray[data-ray='right'] {
+      transform: translateX(-50%) rotate(28deg) translateY(4%);
+    }
+
+    .ds-empty-illustration .anticon,
+    .ds-empty-illustration svg {
+      width: var(--ds-empty-illustration-size) !important;
+      height: var(--ds-empty-illustration-size) !important;
+      font-size: var(--ds-empty-illustration-size) !important;
+      color: inherit;
+    }
+
+    .ds-empty-inbox-svg {
+      overflow: visible;
+    }
+
+    .ds-empty-inbox-svg path {
+      fill: none !important;
+      stroke: currentColor;
+      stroke-width: 2;
+      stroke-linecap: round;
+      stroke-linejoin: round;
+    }
+
+    .ds-empty-illustration svg [fill]:not([fill="none"]),
+    .ds-empty-illustration svg path:not([fill="none"]) {
+      fill: currentColor !important;
+    }
+
+    .ds-empty-illustration svg [stroke]:not([stroke="none"]) {
+      stroke: currentColor !important;
+    }
+
+    .ds-empty-copy {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: var(--ds-empty-copy-gap);
+      width: min(var(--ds-empty-copy-width), 100%);
+      margin: 0 auto;
+      text-align: center;
+    }
+
+    .ds-empty-title {
+      color: ${t.text.title};
+      font-size: var(--ds-empty-title-size);
+      font-weight: ${t.title.fontWeight};
+      line-height: var(--ds-empty-title-line-height);
+      letter-spacing: 0;
+      margin: 0;
+    }
+
+    .ds-empty-description {
+      color: ${t.text.description};
+      font-size: var(--ds-empty-description-size);
+      font-weight: ${t.description.fontWeight};
+      line-height: var(--ds-empty-description-line-height);
+      letter-spacing: 0;
+      margin: 0;
+    }
+
+    .ds-empty-table {
+      display: flex;
+      min-height: var(--ds-empty-table-min-height);
+      align-items: center;
+      justify-content: center;
+      padding: var(--ds-empty-table-padding);
+      color: ${t.text.title};
+      font-family: inherit;
+      text-align: center;
+    }
+
+    .ds-empty-table-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: var(--ds-empty-table-action-gap);
+    }
+
+    .ds-empty-table-message {
+      color: ${t.text.title};
+      font-size: var(--ds-empty-table-message-size);
+      font-weight: ${t.table.messageFontWeight};
+      line-height: var(--ds-empty-table-message-line-height);
+      letter-spacing: 0;
+      margin: 0;
+    }
+  `;
+}
+function l(t) {
+	let { empty: n } = e, r = n.size[t];
+	return {
+		"--ds-empty-illustration-size": r.illustrationSize,
+		"--ds-empty-illustration-gap": r.illustrationGap,
+		"--ds-empty-copy-gap": r.copyGap,
+		"--ds-empty-copy-width": r.copyWidth,
+		"--ds-empty-action-gap": r.actionGap,
+		"--ds-empty-title-size": r.title.fontSize,
+		"--ds-empty-title-line-height": r.title.lineHeight,
+		"--ds-empty-description-size": r.description.fontSize,
+		"--ds-empty-description-line-height": r.description.lineHeight,
+		"--ds-empty-table-min-height": r.tableMinHeight,
+		"--ds-empty-table-padding": r.tablePadding,
+		"--ds-empty-table-action-gap": r.tableActionGap,
+		"--ds-empty-table-message-size": r.tableMessage.fontSize,
+		"--ds-empty-table-message-line-height": r.tableMessage.lineHeight
+	};
+}
+function u(e) {
+	return e === "messages" ? /* @__PURE__ */ a("svg", {
+		className: "ds-empty-inbox-svg",
+		viewBox: "0 0 96 96",
+		role: "presentation",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ i("path", { d: "M31 45H65L70 62H26L31 45Z" }),
+			/* @__PURE__ */ i("path", { d: "M26 62H39C41 68 55 68 57 62H70" }),
+			/* @__PURE__ */ i("path", { d: "M48 19V31" }),
+			/* @__PURE__ */ i("path", { d: "M34 25L39 35" }),
+			/* @__PURE__ */ i("path", { d: "M62 25L57 35" })
+		]
+	}) : t(e, { size: 96 });
+}
+var d = ({ dsVariant: e = "illustrated", dsSize: t = "desktop", dsIconName: o, dsTitle: d, dsDescription: f, className: p = "", rootClassName: m = "", style: h = {}, children: g, ..._ }) => {
+	r(() => {
+		c();
+	}, []);
+	let v = s[e], y = l(t);
+	if (e === "tablePrompt" || e === "tableNoResults") return /* @__PURE__ */ i("div", {
+		className: `ds-empty-table${p ? ` ${p}` : ""}`,
+		style: {
+			...y,
+			...h
+		},
+		"data-ds-variant": e,
+		"data-ds-size": t,
+		children: /* @__PURE__ */ a("div", {
+			className: "ds-empty-table-content",
+			children: [/* @__PURE__ */ i("p", {
+				className: "ds-empty-table-message",
+				children: f ?? v.description
+			}), g]
+		})
+	});
+	let b = o ?? v.iconName ?? "messages", x = `ds-empty${p ? ` ${p}` : ""}`, S = `ds-empty${m ? ` ${m}` : ""}`, C = d ?? v.title, w = o ? /* @__PURE__ */ i("span", {
+		className: "ds-empty-illustration",
+		"aria-hidden": "true",
+		children: u(b)
+	}) : /* @__PURE__ */ a("span", {
+		className: "ds-empty-inbox-illustration",
+		"aria-hidden": "true",
+		children: [
+			/* @__PURE__ */ i("span", {
+				className: "ds-empty-inbox-ray",
+				"data-ray": "left"
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "ds-empty-inbox-ray",
+				"data-ray": "center"
+			}),
+			/* @__PURE__ */ i("span", {
+				className: "ds-empty-inbox-ray",
+				"data-ray": "right"
+			}),
+			/* @__PURE__ */ i("span", { className: "ds-empty-inbox-box" })
+		]
+	}), T = /* @__PURE__ */ a("span", {
+		className: "ds-empty-copy",
+		children: [C ? /* @__PURE__ */ i("span", {
+			className: "ds-empty-title",
+			children: C
+		}) : null, /* @__PURE__ */ i("span", {
+			className: "ds-empty-description",
+			children: f ?? v.description
+		})]
+	});
+	return /* @__PURE__ */ i(n, {
+		className: x,
+		rootClassName: S,
+		style: {
+			...y,
+			...h
+		},
+		image: w,
+		description: T,
+		"data-ds-variant": e,
+		"data-ds-size": t,
+		..._,
+		children: g
+	});
+};
+d.displayName = "Empty";
+//#endregion
+export { d as Empty };
+
+//# sourceMappingURL=Empty.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Empty.js","names":[],"sources":["../../src/ds/display/Empty.tsx"],"sourcesContent":["import { Empty as AntEmpty } from 'antd';\nimport type { EmptyProps as AntEmptyProps } from 'antd';\nimport type { CSSProperties, ReactNode } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { useCustomIcon } from '../../utils/icons';\n\nexport type DSEmptyVariant = 'illustrated' | 'tablePrompt' | 'tableNoResults';\nexport type DSEmptySize = 'desktop' | 'mobile';\nexport type DSEmptyIconName = 'messages' | 'folderEmpty' | 'searchAlternate' | 'commonFileText';\n\ntype RestrictedAntProps = 'description' | 'image' | 'imageStyle';\n\nexport type EmptyProps = Omit<AntEmptyProps, RestrictedAntProps> & {\n  /** DS empty-state variant matching Figma usage guidance. */\n  dsVariant?: DSEmptyVariant;\n  /** DS responsive scale for desktop or mobile empty-state blocks. */\n  dsSize?: DSEmptySize;\n  /** Optional illustration/icon override for illustrated empty states. */\n  dsIconName?: DSEmptyIconName;\n  /** Optional title override for illustrated empty states. */\n  dsTitle?: ReactNode;\n  /** Optional body/message override. */\n  dsDescription?: ReactNode;\n};\n\nconst STYLE_ID = 'ds-empty-styles';\n\nconst VARIANT_CONTENT: Record<DSEmptyVariant, {\n  iconName?: DSEmptyIconName;\n  title?: string;\n  description: string;\n}> = {\n  illustrated: {\n    iconName: 'messages',\n    title: 'No Messages',\n    description: 'When you have received messages, you will see them here.',\n  },\n  tablePrompt: {\n    description: 'Please search or apply filters to populate list.',\n  },\n  tableNoResults: {\n    description: 'No results match your search criteria, please adjust your filters.',\n  },\n};\n\nfunction injectStyles() {\n  if (typeof document === 'undefined') return;\n\n  const { empty } = dsSemanticTokens;\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-empty.ant-empty {\n      margin: 0;\n      padding: 0;\n      color: ${empty.text.description};\n      font-family: inherit;\n    }\n\n    .ds-empty.ant-empty .ant-empty-image {\n      height: auto;\n      margin-bottom: var(--ds-empty-illustration-gap);\n      line-height: 1;\n    }\n\n    .ds-empty.ant-empty .ant-empty-description {\n      color: inherit;\n    }\n\n    .ds-empty.ant-empty .ant-empty-footer {\n      margin-top: var(--ds-empty-action-gap);\n    }\n\n    .ds-empty-illustration {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      width: var(--ds-empty-illustration-size);\n      height: var(--ds-empty-illustration-size);\n      color: ${empty.illustration.color};\n    }\n\n    .ds-empty-inbox-illustration {\n      position: relative;\n      display: inline-block;\n      width: var(--ds-empty-illustration-size);\n      height: var(--ds-empty-illustration-size);\n      color: ${empty.illustration.color};\n    }\n\n    .ds-empty-inbox-box {\n      position: absolute;\n      left: 22%;\n      right: 22%;\n      bottom: 12%;\n      height: 34%;\n      border: ${empty.illustration.strokeWidth} solid currentColor;\n      border-radius: 4px;\n      background: transparent;\n    }\n\n    .ds-empty-inbox-box::before {\n      content: '';\n      position: absolute;\n      left: 22%;\n      right: 22%;\n      bottom: 40%;\n      height: 28%;\n      border-bottom: ${empty.illustration.strokeWidth} solid currentColor;\n      border-radius: 0 0 999px 999px;\n    }\n\n    .ds-empty-inbox-ray {\n      position: absolute;\n      top: 8%;\n      left: 50%;\n      width: ${empty.illustration.strokeWidth};\n      height: 14%;\n      background: currentColor;\n      border-radius: 999px;\n      transform-origin: bottom center;\n    }\n\n    .ds-empty-inbox-ray[data-ray='left'] {\n      transform: translateX(-50%) rotate(-28deg) translateY(4%);\n    }\n\n    .ds-empty-inbox-ray[data-ray='center'] {\n      transform: translateX(-50%);\n    }\n\n    .ds-empty-inbox-ray[data-ray='right'] {\n      transform: translateX(-50%) rotate(28deg) translateY(4%);\n    }\n\n    .ds-empty-illustration .anticon,\n    .ds-empty-illustration svg {\n      width: var(--ds-empty-illustration-size) !important;\n      height: var(--ds-empty-illustration-size) !important;\n      font-size: var(--ds-empty-illustration-size) !important;\n      color: inherit;\n    }\n\n    .ds-empty-inbox-svg {\n      overflow: visible;\n    }\n\n    .ds-empty-inbox-svg path {\n      fill: none !important;\n      stroke: currentColor;\n      stroke-width: 2;\n      stroke-linecap: round;\n      stroke-linejoin: round;\n    }\n\n    .ds-empty-illustration svg [fill]:not([fill=\"none\"]),\n    .ds-empty-illustration svg path:not([fill=\"none\"]) {\n      fill: currentColor !important;\n    }\n\n    .ds-empty-illustration svg [stroke]:not([stroke=\"none\"]) {\n      stroke: currentColor !important;\n    }\n\n    .ds-empty-copy {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      gap: var(--ds-empty-copy-gap);\n      width: min(var(--ds-empty-copy-width), 100%);\n      margin: 0 auto;\n      text-align: center;\n    }\n\n    .ds-empty-title {\n      color: ${empty.text.title};\n      font-size: var(--ds-empty-title-size);\n      font-weight: ${empty.title.fontWeight};\n      line-height: var(--ds-empty-title-line-height);\n      letter-spacing: 0;\n      margin: 0;\n    }\n\n    .ds-empty-description {\n      color: ${empty.text.description};\n      font-size: var(--ds-empty-description-size);\n      font-weight: ${empty.description.fontWeight};\n      line-height: var(--ds-empty-description-line-height);\n      letter-spacing: 0;\n      margin: 0;\n    }\n\n    .ds-empty-table {\n      display: flex;\n      min-height: var(--ds-empty-table-min-height);\n      align-items: center;\n      justify-content: center;\n      padding: var(--ds-empty-table-padding);\n      color: ${empty.text.title};\n      font-family: inherit;\n      text-align: center;\n    }\n\n    .ds-empty-table-content {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      gap: var(--ds-empty-table-action-gap);\n    }\n\n    .ds-empty-table-message {\n      color: ${empty.text.title};\n      font-size: var(--ds-empty-table-message-size);\n      font-weight: ${empty.table.messageFontWeight};\n      line-height: var(--ds-empty-table-message-line-height);\n      letter-spacing: 0;\n      margin: 0;\n    }\n  `;\n}\n\nfunction getCustomProperties(size: DSEmptySize): CSSProperties {\n  const { empty } = dsSemanticTokens;\n  const sizeTokens = empty.size[size];\n\n  return {\n    '--ds-empty-illustration-size': sizeTokens.illustrationSize,\n    '--ds-empty-illustration-gap': sizeTokens.illustrationGap,\n    '--ds-empty-copy-gap': sizeTokens.copyGap,\n    '--ds-empty-copy-width': sizeTokens.copyWidth,\n    '--ds-empty-action-gap': sizeTokens.actionGap,\n    '--ds-empty-title-size': sizeTokens.title.fontSize,\n    '--ds-empty-title-line-height': sizeTokens.title.lineHeight,\n    '--ds-empty-description-size': sizeTokens.description.fontSize,\n    '--ds-empty-description-line-height': sizeTokens.description.lineHeight,\n    '--ds-empty-table-min-height': sizeTokens.tableMinHeight,\n    '--ds-empty-table-padding': sizeTokens.tablePadding,\n    '--ds-empty-table-action-gap': sizeTokens.tableActionGap,\n    '--ds-empty-table-message-size': sizeTokens.tableMessage.fontSize,\n    '--ds-empty-table-message-line-height': sizeTokens.tableMessage.lineHeight,\n  } as CSSProperties;\n}\n\nfunction renderIllustration(iconName: DSEmptyIconName) {\n  if (iconName === 'messages') {\n    return (\n      <svg className=\"ds-empty-inbox-svg\" viewBox=\"0 0 96 96\" role=\"presentation\" focusable=\"false\">\n        <path d=\"M31 45H65L70 62H26L31 45Z\" />\n        <path d=\"M26 62H39C41 68 55 68 57 62H70\" />\n        <path d=\"M48 19V31\" />\n        <path d=\"M34 25L39 35\" />\n        <path d=\"M62 25L57 35\" />\n      </svg>\n    );\n  }\n\n  return useCustomIcon(iconName, { size: 96 });\n}\n\nexport const Empty = ({\n  dsVariant = 'illustrated',\n  dsSize = 'desktop',\n  dsIconName,\n  dsTitle,\n  dsDescription,\n  className: userClassName = '',\n  rootClassName: userRootClassName = '',\n  style: userStyle = {},\n  children,\n  ...restProps\n}: EmptyProps) => {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const variantContent = VARIANT_CONTENT[dsVariant];\n  const customProperties = getCustomProperties(dsSize);\n\n  if (dsVariant === 'tablePrompt' || dsVariant === 'tableNoResults') {\n    const className = `ds-empty-table${userClassName ? ` ${userClassName}` : ''}`;\n\n    return (\n      <div\n        className={className}\n        style={{ ...customProperties, ...userStyle }}\n        data-ds-variant={dsVariant}\n        data-ds-size={dsSize}\n      >\n        <div className=\"ds-empty-table-content\">\n          <p className=\"ds-empty-table-message\">{dsDescription ?? variantContent.description}</p>\n          {children}\n        </div>\n      </div>\n    );\n  }\n\n  const iconName = dsIconName ?? variantContent.iconName ?? 'messages';\n  const className = `ds-empty${userClassName ? ` ${userClassName}` : ''}`;\n  const rootClassName = `ds-empty${userRootClassName ? ` ${userRootClassName}` : ''}`;\n  const title = dsTitle ?? variantContent.title;\n\n  const image = dsIconName ? (\n    <span className=\"ds-empty-illustration\" aria-hidden=\"true\">\n      {renderIllustration(iconName)}\n    </span>\n  ) : (\n    <span className=\"ds-empty-inbox-illustration\" aria-hidden=\"true\">\n      <span className=\"ds-empty-inbox-ray\" data-ray=\"left\" />\n      <span className=\"ds-empty-inbox-ray\" data-ray=\"center\" />\n      <span className=\"ds-empty-inbox-ray\" data-ray=\"right\" />\n      <span className=\"ds-empty-inbox-box\" />\n    </span>\n  );\n  const description = (\n    <span className=\"ds-empty-copy\">\n      {title ? <span className=\"ds-empty-title\">{title}</span> : null}\n      <span className=\"ds-empty-description\">{dsDescription ?? variantContent.description}</span>\n    </span>\n  );\n\n  return (\n    <AntEmpty\n      className={className}\n      rootClassName={rootClassName}\n      style={{ ...customProperties, ...userStyle }}\n      image={image}\n      description={description}\n      data-ds-variant={dsVariant}\n      data-ds-size={dsSize}\n      {...restProps}\n    >\n      {children}\n    </AntEmpty>\n  );\n};\n\nEmpty.displayName = 'Empty';\n"],"mappings":"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"}

package/dist-lib/display/Icon.cjs

@@ -0,0 +1,48 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../theme.cjs`),t=require(`../useCustomIcon-DbSB56Pd.cjs`);let n=require(`react`),r=require(`react/jsx-runtime`);var i={status:[`check`,`check1`,`check2`,`close`,`minus`,`clock`,`sync`,`alertTriangle`,`informationCircle`,`alertCircle`,`loading`],action:[`add`,`bin`,`edit`,`searchAlternate`,`downloadBottom`,`uploadTop`,`close`,`cog`,`copy`,`filter`,`lock`],navigation:[`arrowUp`,`arrowDown`,`arrowLeft`,`arrowRight`,`expandLeft`,`shrink`,`home`,`navigationMenuVertical`],feedback:[`messages`,`newMessage`,`questionCircle`,`alarmBell`],empty:[`folderEmpty`,`searchNoResult`,`commonFileText`,`messages`],entity:[`singleNeutralCircle`,`patient`,`medicalFile`,`medicalFolder`,`prescription`,`officeFileSheet`]},a={success:`check1`,warning:`alertTriangle`,error:`removeCircleBold`,info:`informationCircle`,neutral:`alertCircle`,processing:`loading`},o=Array.from(new Set(Object.values(i).flat())),s=`ds-icon-styles`,c=`ds-icon`;function l(...e){return e.filter(Boolean).join(` `).trim()}function u(){if(typeof document>`u`)return;let e=document.getElementById(s);e||(e=document.createElement(`style`),e.id=s,document.head.appendChild(e)),e.textContent=`
+    .${c} {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: var(--ds-icon-size);
+      height: var(--ds-icon-size);
+      color: var(--ds-icon-color);
+      line-height: 0;
+      overflow: visible;
+      vertical-align: -0.125em;
+    }
+
+    .${c} svg,
+    .${c} .anticon,
+    .${c} > span {
+      width: var(--ds-icon-size) !important;
+      height: var(--ds-icon-size) !important;
+      color: inherit;
+      font-size: var(--ds-icon-size) !important;
+      line-height: 0;
+    }
+
+    .${c} svg [fill]:not([fill='none']),
+    .${c} svg path:not([fill='none']) {
+      fill: currentColor !important;
+    }
+
+    .${c} svg [stroke]:not([stroke='none']) {
+      stroke: currentColor !important;
+    }
+
+    .${c}[data-ds-icon-status='processing'],
+    .${c}[data-ds-icon-name='loading'] {
+      width: calc(var(--ds-icon-size) * 1.5);
+      height: calc(var(--ds-icon-size) * 1.5);
+    }
+
+    .${c}[data-ds-icon-status='processing'] {
+      animation: ds-icon-spin 1s infinite linear;
+    }
+
+    @keyframes ds-icon-spin {
+      100% { transform: rotate(360deg); }
+    }
+  `}function d(t){return typeof t==`number`?t:e.dsSemanticTokens.icon.size[t??`sm`]}function f(t,n){return t?e.dsSemanticTokens.icon.status[t]:e.dsSemanticTokens.icon.tone[n]}function p(e,t){return t?a[t]:e??`informationCircle`}function m({"aria-label":e,className:i,dsGroup:a,dsName:o,dsSize:s=`sm`,dsStatus:m,dsTone:h=`default`,role:g,style:_,...v}){(0,n.useEffect)(()=>{u()},[]);let y=d(s),b=p(o,m),x=f(m,h),S={"--ds-icon-size":`${y}px`,"--ds-icon-color":x,..._},C=t.n(b,{size:y,style:{color:`currentColor`}});return(0,r.jsx)(`span`,{...v,"aria-hidden":e?void 0:!0,"aria-label":e,className:l(c,i),"data-ds-icon-group":a,"data-ds-icon-name":b,"data-ds-icon-size":typeof s==`number`?`custom`:s,"data-ds-icon-status":m,"data-ds-icon-tone":m?void 0:h,role:e?g??`img`:g,style:S,children:C})}m.displayName=`Icon`,exports.DS_ICON_GROUPS=i,exports.DS_ICON_NAMES=o,exports.DS_STATUS_ICON_MAP=a,exports.Icon=m;
+//# sourceMappingURL=Icon.cjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.cjs","names":[],"sources":["../../src/ds/display/Icon.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { useCustomIcon } from '../../utils/icons';\n\nexport const DS_ICON_GROUPS = {\n  status: ['check', 'check1', 'check2', 'close', 'minus', 'clock', 'sync', 'alertTriangle', 'informationCircle', 'alertCircle', 'loading'],\n  action: ['add', 'bin', 'edit', 'searchAlternate', 'downloadBottom', 'uploadTop', 'close', 'cog', 'copy', 'filter', 'lock'],\n  navigation: ['arrowUp', 'arrowDown', 'arrowLeft', 'arrowRight', 'expandLeft', 'shrink', 'home', 'navigationMenuVertical'],\n  feedback: ['messages', 'newMessage', 'questionCircle', 'alarmBell'],\n  empty: ['folderEmpty', 'searchNoResult', 'commonFileText', 'messages'],\n  entity: ['singleNeutralCircle', 'patient', 'medicalFile', 'medicalFolder', 'prescription', 'officeFileSheet'],\n} as const;\n\nexport const DS_STATUS_ICON_MAP = {\n  success: 'check1',\n  warning: 'alertTriangle',\n  error: 'removeCircleBold',\n  info: 'informationCircle',\n  neutral: 'alertCircle',\n  processing: 'loading',\n} as const;\n\nexport type DSIconGroup = keyof typeof DS_ICON_GROUPS;\nexport type DSIconStatus = keyof typeof DS_STATUS_ICON_MAP;\nexport type DSIconSize = keyof typeof dsSemanticTokens.icon.size;\nexport type DSIconTone = keyof typeof dsSemanticTokens.icon.tone;\nexport type DSIconName = (typeof DS_ICON_GROUPS)[DSIconGroup][number];\n\nexport const DS_ICON_NAMES = Array.from(new Set(Object.values(DS_ICON_GROUPS).flat())) as DSIconName[];\n\nexport type IconProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> & {\n  /** Semantic icon name from the DS-approved icon groups. */\n  dsName?: DSIconName;\n  /** Semantic status. When provided, it drives both the icon glyph and status color. */\n  dsStatus?: DSIconStatus;\n  /** Semantic group for guidance and Storybook filtering. */\n  dsGroup?: DSIconGroup;\n  /** Token-backed icon size. */\n  dsSize?: DSIconSize | number;\n  /** Token-backed color tone for non-status icons. */\n  dsTone?: DSIconTone;\n  /** Accessible label. Leave empty for decorative icons. */\n  'aria-label'?: string;\n};\n\nconst STYLE_ID = 'ds-icon-styles';\nconst DS_ICON_CLASS = 'ds-icon';\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_ICON_CLASS} {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex: 0 0 auto;\n      width: var(--ds-icon-size);\n      height: var(--ds-icon-size);\n      color: var(--ds-icon-color);\n      line-height: 0;\n      overflow: visible;\n      vertical-align: -0.125em;\n    }\n\n    .${DS_ICON_CLASS} svg,\n    .${DS_ICON_CLASS} .anticon,\n    .${DS_ICON_CLASS} > span {\n      width: var(--ds-icon-size) !important;\n      height: var(--ds-icon-size) !important;\n      color: inherit;\n      font-size: var(--ds-icon-size) !important;\n      line-height: 0;\n    }\n\n    .${DS_ICON_CLASS} svg [fill]:not([fill='none']),\n    .${DS_ICON_CLASS} svg path:not([fill='none']) {\n      fill: currentColor !important;\n    }\n\n    .${DS_ICON_CLASS} svg [stroke]:not([stroke='none']) {\n      stroke: currentColor !important;\n    }\n\n    .${DS_ICON_CLASS}[data-ds-icon-status='processing'],\n    .${DS_ICON_CLASS}[data-ds-icon-name='loading'] {\n      width: calc(var(--ds-icon-size) * 1.5);\n      height: calc(var(--ds-icon-size) * 1.5);\n    }\n\n    .${DS_ICON_CLASS}[data-ds-icon-status='processing'] {\n      animation: ds-icon-spin 1s infinite linear;\n    }\n\n    @keyframes ds-icon-spin {\n      100% { transform: rotate(360deg); }\n    }\n  `;\n}\n\nfunction resolveSize(size: IconProps['dsSize']) {\n  if (typeof size === 'number') return size;\n  return dsSemanticTokens.icon.size[size ?? 'sm'];\n}\n\nfunction resolveColor(status: DSIconStatus | undefined, tone: DSIconTone) {\n  if (status) return dsSemanticTokens.icon.status[status];\n  return dsSemanticTokens.icon.tone[tone];\n}\n\nfunction resolveName(name: DSIconName | undefined, status: DSIconStatus | undefined) {\n  if (status) return DS_STATUS_ICON_MAP[status];\n  return name ?? 'informationCircle';\n}\n\nexport function Icon({\n  'aria-label': ariaLabel,\n  className,\n  dsGroup,\n  dsName,\n  dsSize = 'sm',\n  dsStatus,\n  dsTone = 'default',\n  role,\n  style,\n  ...props\n}: IconProps) {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const size = resolveSize(dsSize);\n  const iconName = resolveName(dsName, dsStatus);\n  const color = resolveColor(dsStatus, dsTone);\n  const iconStyle = {\n    '--ds-icon-size': `${size}px`,\n    '--ds-icon-color': color,\n    ...style,\n  } as CSSProperties;\n  const renderedIcon = useCustomIcon(iconName, { size, style: { color: 'currentColor' } });\n\n  return (\n    <span\n      {...props}\n      aria-hidden={ariaLabel ? undefined : true}\n      aria-label={ariaLabel}\n      className={mergeClassNames(DS_ICON_CLASS, className)}\n      data-ds-icon-group={dsGroup}\n      data-ds-icon-name={iconName}\n      data-ds-icon-size={typeof dsSize === 'number' ? 'custom' : dsSize}\n      data-ds-icon-status={dsStatus}\n      data-ds-icon-tone={dsStatus ? undefined : dsTone}\n      role={ariaLabel ? (role ?? 'img') : role}\n      style={iconStyle}\n    >\n      {renderedIcon}\n    </span>\n  );\n}\n\nIcon.displayName = 'Icon';\n"],"mappings":"qOAKA,IAAa,EAAiB,CAC5B,OAAQ,CAAC,QAAS,SAAU,SAAU,QAAS,QAAS,QAAS,OAAQ,gBAAiB,oBAAqB,cAAe,UAAU,CACxI,OAAQ,CAAC,MAAO,MAAO,OAAQ,kBAAmB,iBAAkB,YAAa,QAAS,MAAO,OAAQ,SAAU,OAAO,CAC1H,WAAY,CAAC,UAAW,YAAa,YAAa,aAAc,aAAc,SAAU,OAAQ,yBAAyB,CACzH,SAAU,CAAC,WAAY,aAAc,iBAAkB,YAAY,CACnE,MAAO,CAAC,cAAe,iBAAkB,iBAAkB,WAAW,CACtE,OAAQ,CAAC,sBAAuB,UAAW,cAAe,gBAAiB,eAAgB,kBAAkB,CAC9G,CAEY,EAAqB,CAChC,QAAS,SACT,QAAS,gBACT,MAAO,mBACP,KAAM,oBACN,QAAS,cACT,WAAY,UACb,CAQY,EAAgB,MAAM,KAAK,IAAI,IAAI,OAAO,OAAO,EAAe,CAAC,MAAM,CAAC,CAAC,CAiBhF,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,IAAI,EAAQ,SAAS,eAAe,EAAS,CACxC,IACH,EAAQ,SAAS,cAAc,QAAQ,CACvC,EAAM,GAAK,EACX,SAAS,KAAK,YAAY,EAAM,EAGlC,EAAM,YAAc;OACf,EAAc;;;;;;;;;;;;;OAad,EAAc;OACd,EAAc;OACd,EAAc;;;;;;;;OAQd,EAAc;OACd,EAAc;;;;OAId,EAAc;;;;OAId,EAAc;OACd,EAAc;;;;;OAKd,EAAc;;;;;;;IAUrB,SAAS,EAAY,EAA2B,CAE9C,OADI,OAAO,GAAS,SAAiB,EAC9B,EAAA,iBAAiB,KAAK,KAAK,GAAQ,MAG5C,SAAS,EAAa,EAAkC,EAAkB,CAExE,OADI,EAAe,EAAA,iBAAiB,KAAK,OAAO,GACzC,EAAA,iBAAiB,KAAK,KAAK,GAGpC,SAAS,EAAY,EAA8B,EAAkC,CAEnF,OADI,EAAe,EAAmB,GAC/B,GAAQ,oBAGjB,SAAgB,EAAK,CACnB,aAAc,EACd,YACA,UACA,SACA,SAAS,KACT,WACA,SAAS,UACT,OACA,QACA,GAAG,GACS,EACZ,EAAA,EAAA,eAAgB,CACd,GAAc,EACb,EAAE,CAAC,CAEN,IAAM,EAAO,EAAY,EAAO,CAC1B,EAAW,EAAY,EAAQ,EAAS,CACxC,EAAQ,EAAa,EAAU,EAAO,CACtC,EAAY,CAChB,iBAAkB,GAAG,EAAK,IAC1B,kBAAmB,EACnB,GAAG,EACJ,CACK,EAAe,EAAA,EAAc,EAAU,CAAE,OAAM,MAAO,CAAE,MAAO,eAAgB,CAAE,CAAC,CAExF,OACE,EAAA,EAAA,KAAC,OAAD,CACE,GAAI,EACJ,cAAa,EAAY,IAAA,GAAY,GACrC,aAAY,EACZ,UAAW,EAAgB,EAAe,EAAU,CACpD,qBAAoB,EACpB,oBAAmB,EACnB,oBAAmB,OAAO,GAAW,SAAW,SAAW,EAC3D,sBAAqB,EACrB,oBAAmB,EAAW,IAAA,GAAY,EAC1C,KAAM,EAAa,GAAQ,MAAS,EACpC,MAAO,WAEN,EACI,CAAA,CAIX,EAAK,YAAc"}

package/dist-lib/display/Icon.js

@@ -0,0 +1,165 @@
+import { dsSemanticTokens as e } from "../theme.js";
+import { n as t } from "../useCustomIcon-B-VUK-84.js";
+import { useEffect as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/ds/display/Icon.tsx
+var i = {
+	status: [
+		"check",
+		"check1",
+		"check2",
+		"close",
+		"minus",
+		"clock",
+		"sync",
+		"alertTriangle",
+		"informationCircle",
+		"alertCircle",
+		"loading"
+	],
+	action: [
+		"add",
+		"bin",
+		"edit",
+		"searchAlternate",
+		"downloadBottom",
+		"uploadTop",
+		"close",
+		"cog",
+		"copy",
+		"filter",
+		"lock"
+	],
+	navigation: [
+		"arrowUp",
+		"arrowDown",
+		"arrowLeft",
+		"arrowRight",
+		"expandLeft",
+		"shrink",
+		"home",
+		"navigationMenuVertical"
+	],
+	feedback: [
+		"messages",
+		"newMessage",
+		"questionCircle",
+		"alarmBell"
+	],
+	empty: [
+		"folderEmpty",
+		"searchNoResult",
+		"commonFileText",
+		"messages"
+	],
+	entity: [
+		"singleNeutralCircle",
+		"patient",
+		"medicalFile",
+		"medicalFolder",
+		"prescription",
+		"officeFileSheet"
+	]
+}, a = {
+	success: "check1",
+	warning: "alertTriangle",
+	error: "removeCircleBold",
+	info: "informationCircle",
+	neutral: "alertCircle",
+	processing: "loading"
+}, o = Array.from(new Set(Object.values(i).flat())), s = "ds-icon-styles", c = "ds-icon";
+function l(...e) {
+	return e.filter(Boolean).join(" ").trim();
+}
+function u() {
+	if (typeof document > "u") return;
+	let e = document.getElementById(s);
+	e || (e = document.createElement("style"), e.id = s, document.head.appendChild(e)), e.textContent = `
+    .${c} {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      flex: 0 0 auto;
+      width: var(--ds-icon-size);
+      height: var(--ds-icon-size);
+      color: var(--ds-icon-color);
+      line-height: 0;
+      overflow: visible;
+      vertical-align: -0.125em;
+    }
+
+    .${c} svg,
+    .${c} .anticon,
+    .${c} > span {
+      width: var(--ds-icon-size) !important;
+      height: var(--ds-icon-size) !important;
+      color: inherit;
+      font-size: var(--ds-icon-size) !important;
+      line-height: 0;
+    }
+
+    .${c} svg [fill]:not([fill='none']),
+    .${c} svg path:not([fill='none']) {
+      fill: currentColor !important;
+    }
+
+    .${c} svg [stroke]:not([stroke='none']) {
+      stroke: currentColor !important;
+    }
+
+    .${c}[data-ds-icon-status='processing'],
+    .${c}[data-ds-icon-name='loading'] {
+      width: calc(var(--ds-icon-size) * 1.5);
+      height: calc(var(--ds-icon-size) * 1.5);
+    }
+
+    .${c}[data-ds-icon-status='processing'] {
+      animation: ds-icon-spin 1s infinite linear;
+    }
+
+    @keyframes ds-icon-spin {
+      100% { transform: rotate(360deg); }
+    }
+  `;
+}
+function d(t) {
+	return typeof t == "number" ? t : e.icon.size[t ?? "sm"];
+}
+function f(t, n) {
+	return t ? e.icon.status[t] : e.icon.tone[n];
+}
+function p(e, t) {
+	return t ? a[t] : e ?? "informationCircle";
+}
+function m({ "aria-label": e, className: i, dsGroup: a, dsName: o, dsSize: s = "sm", dsStatus: m, dsTone: h = "default", role: g, style: _, ...v }) {
+	n(() => {
+		u();
+	}, []);
+	let y = d(s), b = p(o, m), x = f(m, h), S = {
+		"--ds-icon-size": `${y}px`,
+		"--ds-icon-color": x,
+		..._
+	}, C = t(b, {
+		size: y,
+		style: { color: "currentColor" }
+	});
+	return /* @__PURE__ */ r("span", {
+		...v,
+		"aria-hidden": e ? void 0 : !0,
+		"aria-label": e,
+		className: l(c, i),
+		"data-ds-icon-group": a,
+		"data-ds-icon-name": b,
+		"data-ds-icon-size": typeof s == "number" ? "custom" : s,
+		"data-ds-icon-status": m,
+		"data-ds-icon-tone": m ? void 0 : h,
+		role: e ? g ?? "img" : g,
+		style: S,
+		children: C
+	});
+}
+m.displayName = "Icon";
+//#endregion
+export { i as DS_ICON_GROUPS, o as DS_ICON_NAMES, a as DS_STATUS_ICON_MAP, m as Icon };
+
+//# sourceMappingURL=Icon.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","names":[],"sources":["../../src/ds/display/Icon.tsx"],"sourcesContent":["import type { CSSProperties, HTMLAttributes } from 'react';\nimport { useEffect } from 'react';\nimport { dsSemanticTokens } from '../../theme/ontadaTheme';\nimport { useCustomIcon } from '../../utils/icons';\n\nexport const DS_ICON_GROUPS = {\n  status: ['check', 'check1', 'check2', 'close', 'minus', 'clock', 'sync', 'alertTriangle', 'informationCircle', 'alertCircle', 'loading'],\n  action: ['add', 'bin', 'edit', 'searchAlternate', 'downloadBottom', 'uploadTop', 'close', 'cog', 'copy', 'filter', 'lock'],\n  navigation: ['arrowUp', 'arrowDown', 'arrowLeft', 'arrowRight', 'expandLeft', 'shrink', 'home', 'navigationMenuVertical'],\n  feedback: ['messages', 'newMessage', 'questionCircle', 'alarmBell'],\n  empty: ['folderEmpty', 'searchNoResult', 'commonFileText', 'messages'],\n  entity: ['singleNeutralCircle', 'patient', 'medicalFile', 'medicalFolder', 'prescription', 'officeFileSheet'],\n} as const;\n\nexport const DS_STATUS_ICON_MAP = {\n  success: 'check1',\n  warning: 'alertTriangle',\n  error: 'removeCircleBold',\n  info: 'informationCircle',\n  neutral: 'alertCircle',\n  processing: 'loading',\n} as const;\n\nexport type DSIconGroup = keyof typeof DS_ICON_GROUPS;\nexport type DSIconStatus = keyof typeof DS_STATUS_ICON_MAP;\nexport type DSIconSize = keyof typeof dsSemanticTokens.icon.size;\nexport type DSIconTone = keyof typeof dsSemanticTokens.icon.tone;\nexport type DSIconName = (typeof DS_ICON_GROUPS)[DSIconGroup][number];\n\nexport const DS_ICON_NAMES = Array.from(new Set(Object.values(DS_ICON_GROUPS).flat())) as DSIconName[];\n\nexport type IconProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'color'> & {\n  /** Semantic icon name from the DS-approved icon groups. */\n  dsName?: DSIconName;\n  /** Semantic status. When provided, it drives both the icon glyph and status color. */\n  dsStatus?: DSIconStatus;\n  /** Semantic group for guidance and Storybook filtering. */\n  dsGroup?: DSIconGroup;\n  /** Token-backed icon size. */\n  dsSize?: DSIconSize | number;\n  /** Token-backed color tone for non-status icons. */\n  dsTone?: DSIconTone;\n  /** Accessible label. Leave empty for decorative icons. */\n  'aria-label'?: string;\n};\n\nconst STYLE_ID = 'ds-icon-styles';\nconst DS_ICON_CLASS = 'ds-icon';\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_ICON_CLASS} {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      flex: 0 0 auto;\n      width: var(--ds-icon-size);\n      height: var(--ds-icon-size);\n      color: var(--ds-icon-color);\n      line-height: 0;\n      overflow: visible;\n      vertical-align: -0.125em;\n    }\n\n    .${DS_ICON_CLASS} svg,\n    .${DS_ICON_CLASS} .anticon,\n    .${DS_ICON_CLASS} > span {\n      width: var(--ds-icon-size) !important;\n      height: var(--ds-icon-size) !important;\n      color: inherit;\n      font-size: var(--ds-icon-size) !important;\n      line-height: 0;\n    }\n\n    .${DS_ICON_CLASS} svg [fill]:not([fill='none']),\n    .${DS_ICON_CLASS} svg path:not([fill='none']) {\n      fill: currentColor !important;\n    }\n\n    .${DS_ICON_CLASS} svg [stroke]:not([stroke='none']) {\n      stroke: currentColor !important;\n    }\n\n    .${DS_ICON_CLASS}[data-ds-icon-status='processing'],\n    .${DS_ICON_CLASS}[data-ds-icon-name='loading'] {\n      width: calc(var(--ds-icon-size) * 1.5);\n      height: calc(var(--ds-icon-size) * 1.5);\n    }\n\n    .${DS_ICON_CLASS}[data-ds-icon-status='processing'] {\n      animation: ds-icon-spin 1s infinite linear;\n    }\n\n    @keyframes ds-icon-spin {\n      100% { transform: rotate(360deg); }\n    }\n  `;\n}\n\nfunction resolveSize(size: IconProps['dsSize']) {\n  if (typeof size === 'number') return size;\n  return dsSemanticTokens.icon.size[size ?? 'sm'];\n}\n\nfunction resolveColor(status: DSIconStatus | undefined, tone: DSIconTone) {\n  if (status) return dsSemanticTokens.icon.status[status];\n  return dsSemanticTokens.icon.tone[tone];\n}\n\nfunction resolveName(name: DSIconName | undefined, status: DSIconStatus | undefined) {\n  if (status) return DS_STATUS_ICON_MAP[status];\n  return name ?? 'informationCircle';\n}\n\nexport function Icon({\n  'aria-label': ariaLabel,\n  className,\n  dsGroup,\n  dsName,\n  dsSize = 'sm',\n  dsStatus,\n  dsTone = 'default',\n  role,\n  style,\n  ...props\n}: IconProps) {\n  useEffect(() => {\n    injectStyles();\n  }, []);\n\n  const size = resolveSize(dsSize);\n  const iconName = resolveName(dsName, dsStatus);\n  const color = resolveColor(dsStatus, dsTone);\n  const iconStyle = {\n    '--ds-icon-size': `${size}px`,\n    '--ds-icon-color': color,\n    ...style,\n  } as CSSProperties;\n  const renderedIcon = useCustomIcon(iconName, { size, style: { color: 'currentColor' } });\n\n  return (\n    <span\n      {...props}\n      aria-hidden={ariaLabel ? undefined : true}\n      aria-label={ariaLabel}\n      className={mergeClassNames(DS_ICON_CLASS, className)}\n      data-ds-icon-group={dsGroup}\n      data-ds-icon-name={iconName}\n      data-ds-icon-size={typeof dsSize === 'number' ? 'custom' : dsSize}\n      data-ds-icon-status={dsStatus}\n      data-ds-icon-tone={dsStatus ? undefined : dsTone}\n      role={ariaLabel ? (role ?? 'img') : role}\n      style={iconStyle}\n    >\n      {renderedIcon}\n    </span>\n  );\n}\n\nIcon.displayName = 'Icon';\n"],"mappings":";;;;;AAKA,IAAa,IAAiB;CAC5B,QAAQ;EAAC;EAAS;EAAU;EAAU;EAAS;EAAS;EAAS;EAAQ;EAAiB;EAAqB;EAAe;EAAU;CACxI,QAAQ;EAAC;EAAO;EAAO;EAAQ;EAAmB;EAAkB;EAAa;EAAS;EAAO;EAAQ;EAAU;EAAO;CAC1H,YAAY;EAAC;EAAW;EAAa;EAAa;EAAc;EAAc;EAAU;EAAQ;EAAyB;CACzH,UAAU;EAAC;EAAY;EAAc;EAAkB;EAAY;CACnE,OAAO;EAAC;EAAe;EAAkB;EAAkB;EAAW;CACtE,QAAQ;EAAC;EAAuB;EAAW;EAAe;EAAiB;EAAgB;EAAkB;CAC9G,EAEY,IAAqB;CAChC,SAAS;CACT,SAAS;CACT,OAAO;CACP,MAAM;CACN,SAAS;CACT,YAAY;CACb,EAQY,IAAgB,MAAM,KAAK,IAAI,IAAI,OAAO,OAAO,EAAe,CAAC,MAAM,CAAC,CAAC,EAiBhF,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,IAAI,IAAQ,SAAS,eAAe,EAAS;AAO7C,CANK,MACH,IAAQ,SAAS,cAAc,QAAQ,EACvC,EAAM,KAAK,GACX,SAAS,KAAK,YAAY,EAAM,GAGlC,EAAM,cAAc;OACf,EAAc;;;;;;;;;;;;;OAad,EAAc;OACd,EAAc;OACd,EAAc;;;;;;;;OAQd,EAAc;OACd,EAAc;;;;OAId,EAAc;;;;OAId,EAAc;OACd,EAAc;;;;;OAKd,EAAc;;;;;;;;;AAUrB,SAAS,EAAY,GAA2B;AAE9C,QADI,OAAO,KAAS,WAAiB,IAC9B,EAAiB,KAAK,KAAK,KAAQ;;AAG5C,SAAS,EAAa,GAAkC,GAAkB;AAExE,QADI,IAAe,EAAiB,KAAK,OAAO,KACzC,EAAiB,KAAK,KAAK;;AAGpC,SAAS,EAAY,GAA8B,GAAkC;AAEnF,QADI,IAAe,EAAmB,KAC/B,KAAQ;;AAGjB,SAAgB,EAAK,EACnB,cAAc,GACd,cACA,YACA,WACA,YAAS,MACT,aACA,YAAS,WACT,SACA,UACA,GAAG,KACS;AACZ,SAAgB;AACd,KAAc;IACb,EAAE,CAAC;CAEN,IAAM,IAAO,EAAY,EAAO,EAC1B,IAAW,EAAY,GAAQ,EAAS,EACxC,IAAQ,EAAa,GAAU,EAAO,EACtC,IAAY;EAChB,kBAAkB,GAAG,EAAK;EAC1B,mBAAmB;EACnB,GAAG;EACJ,EACK,IAAe,EAAc,GAAU;EAAE;EAAM,OAAO,EAAE,OAAO,gBAAgB;EAAE,CAAC;AAExF,QACE,kBAAC,QAAD;EACE,GAAI;EACJ,eAAa,IAAY,KAAA,IAAY;EACrC,cAAY;EACZ,WAAW,EAAgB,GAAe,EAAU;EACpD,sBAAoB;EACpB,qBAAmB;EACnB,qBAAmB,OAAO,KAAW,WAAW,WAAW;EAC3D,uBAAqB;EACrB,qBAAmB,IAAW,KAAA,IAAY;EAC1C,MAAM,IAAa,KAAQ,QAAS;EACpC,OAAO;YAEN;EACI,CAAA;;AAIX,EAAK,cAAc"}

package/dist-lib/display/Image.cjs

@@ -0,0 +1,69 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`}),require(`../chunk-Bmb41Sf3.cjs`);const e=require(`../core-bPY3ouxp.cjs`);let t=require(`antd`),n=require(`react`),r=require(`react/jsx-runtime`);var i=`ds-image-styles`,a={content:{border:e.t.surface.divider,bg:e.t.surface.container,shadow:`none`,hoverShadow:`none`,radius:8},thumbnail:{border:e.t.surface.divider,bg:e.t.surface.subtle,shadow:`none`,hoverShadow:`none`,radius:6},gallery:{border:e.t.surface.divider,bg:e.t.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.t.brand.brandTint,bg:e.t.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.t.surface.container,shadow:`0 8px 18px rgba(30, 57, 78, 0.16)`,hoverShadow:`0 10px 24px rgba(30, 57, 78, 0.2)`,radius:12}},o={sm:120,md:220,lg:360},s={"1:1":`1 / 1`,"4:3":`4 / 3`,"3:2":`3 / 2`,"16:9":`16 / 9`};function c(...e){return e.filter(Boolean).join(` `).trim()}function l(){if(typeof document>`u`)return;let t=document.getElementById(i);t||(t=document.createElement(`style`),t.id=i,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.t.surface.divider};
+      --ds-image-bg: ${e.t.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.t.text.inverse};
+    }
+
+    .ds-image-shell .ant-image-mask .ant-image-mask-info {
+      color: ${e.t.text.inverse};
+      font-size: 12px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.01em;
+    }
+
+    .ds-image-caption {
+      color: ${e.t.text.secondary};
+      font-size: 12px;
+      line-height: 16px;
+      font-weight: 600;
+    }
+  `}var u=({dsVariant:e=`content`,dsSize:i=`md`,dsRatio:u=`auto`,dsCaption:d,className:f,style:p,width:m,preview:h=!0,...g})=>{(0,n.useEffect)(()=>{l()},[]);let _=a[e],v=m??(e===`hero`?520:o[i]);return(0,r.jsxs)(`span`,{className:`ds-image-shell`,"data-ds-image-ratio":u,"data-ds-image-size":i,"data-ds-image-variant":e,style:{width:typeof v==`number`?`${v}px`:v,"--ds-image-radius":`${_.radius}px`,"--ds-image-border":_.border,"--ds-image-bg":_.bg,"--ds-image-shadow":_.shadow,"--ds-image-shadow-hover":_.hoverShadow,"--ds-image-ratio":u===`auto`?void 0:s[u],"--ds-image-fit":e===`hero`?`cover`:`contain`},children:[(0,r.jsx)(t.Image,{...g,className:c(`ds-image`,f),preview:h,style:p,width:`100%`}),d?(0,r.jsx)(`span`,{className:`ds-image-caption`,children:d}):null]})};u.displayName=`Image`,exports.Image=u;
+//# sourceMappingURL=Image.cjs.map