@ktnpm_devops/react-component 0.14.0 → 0.15.0

package/dist/index35.cjs

@@ -2,23 +2,59 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const clsx = require("./index58.cjs");
-const markdown = require("./index69.cjs");
-const MarkdownContent_module = require("./index70.cjs");
-const MarkdownContent = react.forwardRef(
-  ({ markdown: markdown$1, className, ...props }, ref) => {
-    const html = react.useMemo(() => markdown.parseMarkdown(markdown$1), [markdown$1]);
+const lucideReact = require("lucide-react");
+const clsx = require("./index59.cjs");
+const constants = require("./index65.cjs");
+const Loading_module = require("./index114.cjs");
+const Modal = require("./index37.cjs");
+const noop = () => {
+};
+const LoadingBase = react.forwardRef(
+  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {
+    const [activeIndex, setActiveIndex] = react.useState(0);
+    react.useEffect(() => {
+      if (open) setActiveIndex(0);
+    }, [open]);
+    react.useImperativeHandle(
+      ref,
+      () => ({
+        activate: (labelOrIndex) => {
+          const index = typeof labelOrIndex === "number" ? labelOrIndex : labels.indexOf(labelOrIndex);
+          if (index >= 0) setActiveIndex(index);
+        },
+        complete: () => setActiveIndex(labels.length)
+      }),
+      [labels]
+    );
+    if (!open) return null;
+    if (onlyThrobber) {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { className: Loading_module.default.throbber, role: "status", "aria-label": title, children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.spinner, "aria-hidden": "true" }) });
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
+      Modal.Modal,
       {
-        ref,
-        className: clsx.clsx(MarkdownContent_module.default.root, className),
-        dangerouslySetInnerHTML: { __html: html },
-        ...props
+        open,
+        onClose: closable ? onClose ?? noop : noop,
+        className: closable ? void 0 : Loading_module.default.nonClosable,
+        title: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Loading_module.default.titleRow, children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.titleSpinner, "aria-hidden": "true" }),
+          title
+        ] }),
+        children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: Loading_module.default.steps, children: labels.map((label, index) => {
+          const status = index < activeIndex ? "done" : index === activeIndex ? "active" : "pending";
+          return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: clsx.clsx(Loading_module.default.step, Loading_module.default[status]), children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Loading_module.default.iconSlot, "aria-hidden": "true", children: [
+              status === "done" && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { size: constants.ICON_SIZE.MD, className: Loading_module.default.checkIcon }),
+              status === "active" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: Loading_module.default.stepSpinner })
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: label })
+          ] }, label);
+        }) })
       }
     );
   }
 );
-MarkdownContent.displayName = "MarkdownContent";
-exports.MarkdownContent = MarkdownContent;
+LoadingBase.displayName = "Loading";
+const Loading = react.memo(LoadingBase);
+exports.Loading = Loading;
 //# sourceMappingURL=index35.cjs.map

package/dist/index35.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index35.cjs","sources":["../src/primitives/MarkdownContent/MarkdownContent.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport clsx from 'clsx';\nimport { parseMarkdown } from '../../utils/markdown';\nimport type { MarkdownContentProps } from './MarkdownContent.types';\nimport styles from './MarkdownContent.module.css';\n\nexport const MarkdownContent = forwardRef<HTMLDivElement, MarkdownContentProps>(\n  ({ markdown, className, ...props }, ref) => {\n    const html = useMemo(() => parseMarkdown(markdown), [markdown]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.root, className)}\n        dangerouslySetInnerHTML={{ __html: html }}\n        {...props}\n      />\n    );\n  },\n);\n\nMarkdownContent.displayName = 'MarkdownContent';\n"],"names":["forwardRef","markdown","useMemo","parseMarkdown","jsx","clsx","styles"],"mappings":";;;;;;;AAMO,MAAM,kBAAkBA,MAAAA;AAAAA,EAC7B,CAAC,EAAA,UAAEC,YAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,OAAOC,MAAAA,QAAQ,MAAMC,SAAAA,cAAcF,UAAQ,GAAG,CAACA,UAAQ,CAAC;AAE9D,WACEG,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,KAAAA,KAAKC,+BAAO,MAAM,SAAS;AAAA,QACtC,yBAAyB,EAAE,QAAQ,KAAA;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,gBAAgB,cAAc;;"}
+{"version":3,"file":"index35.cjs","sources":["../src/composites/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';\nimport { Check } from 'lucide-react';\nimport clsx from 'clsx';\nimport { Modal } from '../../primitives/Modal';\nimport { ICON_SIZE } from '../../constants';\nimport type { LoadingHandle, LoadingProps, LoadingStepStatus } from './Loading.types';\nimport styles from './Loading.module.css';\n\nconst noop = (): void => {};\n\nconst LoadingBase = forwardRef<LoadingHandle, LoadingProps>(\n  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    useEffect(() => {\n      if (open) setActiveIndex(0);\n    }, [open]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        activate: (labelOrIndex) => {\n          const index = typeof labelOrIndex === 'number' ? labelOrIndex : labels.indexOf(labelOrIndex);\n          if (index >= 0) setActiveIndex(index);\n        },\n        complete: () => setActiveIndex(labels.length),\n      }),\n      [labels],\n    );\n\n    if (!open) return null;\n\n    if (onlyThrobber) {\n      return (\n        <div className={styles.throbber} role=\"status\" aria-label={title}>\n          <span className={styles.spinner} aria-hidden=\"true\" />\n        </div>\n      );\n    }\n\n    return (\n      <Modal\n        open={open}\n        onClose={closable ? (onClose ?? noop) : noop}\n        className={closable ? undefined : styles.nonClosable}\n        title={\n          <span className={styles.titleRow}>\n            <span className={styles.titleSpinner} aria-hidden=\"true\" />\n            {title}\n          </span>\n        }\n      >\n        <ul className={styles.steps}>\n          {labels.map((label, index) => {\n            const status: LoadingStepStatus =\n              index < activeIndex ? 'done' : index === activeIndex ? 'active' : 'pending';\n            return (\n              <li key={label} className={clsx(styles.step, styles[status])}>\n                <span className={styles.iconSlot} aria-hidden=\"true\">\n                  {status === 'done' && <Check size={ICON_SIZE.MD} className={styles.checkIcon} />}\n                  {status === 'active' && <span className={styles.stepSpinner} />}\n                </span>\n                <span>{label}</span>\n              </li>\n            );\n          })}\n        </ul>\n      </Modal>\n    );\n  },\n);\n\nLoadingBase.displayName = 'Loading';\n\nexport const Loading = memo(LoadingBase);\n"],"names":["forwardRef","useState","useEffect","useImperativeHandle","styles","jsx","Modal","jsxs","clsx","Check","ICON_SIZE","memo"],"mappings":";;;;;;;;;AAQA,MAAM,OAAO,MAAY;AAAC;AAE1B,MAAM,cAAcA,MAAAA;AAAAA,EAClB,CAAC,EAAE,OAAO,MAAM,eAAe,OAAO,OAAO,SAAS,CAAA,GAAI,WAAW,OAAO,QAAA,GAAW,QAAQ;AAC7F,UAAM,CAAC,aAAa,cAAc,IAAIC,MAAAA,SAAS,CAAC;AAEhDC,UAAAA,UAAU,MAAM;AACd,UAAI,qBAAqB,CAAC;AAAA,IAC5B,GAAG,CAAC,IAAI,CAAC;AAETC,UAAAA;AAAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,UAAU,CAAC,iBAAiB;AAC1B,gBAAM,QAAQ,OAAO,iBAAiB,WAAW,eAAe,OAAO,QAAQ,YAAY;AAC3F,cAAI,SAAS,EAAG,gBAAe,KAAK;AAAA,QACtC;AAAA,QACA,UAAU,MAAM,eAAe,OAAO,MAAM;AAAA,MAAA;AAAA,MAE9C,CAAC,MAAM;AAAA,IAAA;AAGT,QAAI,CAAC,KAAM,QAAO;AAElB,QAAI,cAAc;AAChB,4CACG,OAAA,EAAI,WAAWC,eAAAA,QAAO,UAAU,MAAK,UAAS,cAAY,OACzD,UAAAC,2BAAAA,IAAC,UAAK,WAAWD,eAAAA,QAAO,SAAS,eAAY,QAAO,GACtD;AAAA,IAEJ;AAEA,WACEC,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,WAAY,WAAW,OAAQ;AAAA,QACxC,WAAW,WAAW,SAAYF,eAAAA,QAAO;AAAA,QACzC,OACEG,2BAAAA,KAAC,QAAA,EAAK,WAAWH,eAAAA,QAAO,UACtB,UAAA;AAAA,UAAAC,2BAAAA,IAAC,QAAA,EAAK,WAAWD,eAAAA,QAAO,cAAc,eAAY,QAAO;AAAA,UACxD;AAAA,QAAA,GACH;AAAA,QAGF,UAAAC,2BAAAA,IAAC,QAAG,WAAWD,eAAAA,QAAO,OACnB,UAAA,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,gBAAM,SACJ,QAAQ,cAAc,SAAS,UAAU,cAAc,WAAW;AACpE,iBACEG,gCAAC,QAAe,WAAWC,KAAAA,KAAKJ,uBAAO,MAAMA,eAAAA,QAAO,MAAM,CAAC,GACzD,UAAA;AAAA,YAAAG,gCAAC,QAAA,EAAK,WAAWH,eAAAA,QAAO,UAAU,eAAY,QAC3C,UAAA;AAAA,cAAA,WAAW,yCAAWK,YAAAA,OAAA,EAAM,MAAMC,UAAAA,UAAU,IAAI,WAAWN,eAAAA,QAAO,UAAA,CAAW;AAAA,cAC7E,WAAW,YAAYC,+BAAC,QAAA,EAAK,WAAWD,eAAAA,QAAO,YAAA,CAAa;AAAA,YAAA,GAC/D;AAAA,YACAC,2BAAAA,IAAC,UAAM,UAAA,MAAA,CAAM;AAAA,UAAA,EAAA,GALN,KAMT;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;AAEnB,MAAM,UAAUM,MAAAA,KAAK,WAAW;;"}

package/dist/index35.js

@@ -1,24 +1,60 @@
-import { jsx } from "react/jsx-runtime";
-import { forwardRef, useMemo } from "react";
-import { clsx } from "./index58.js";
-import { parseMarkdown } from "./index69.js";
-import styles from "./index70.js";
-const MarkdownContent = forwardRef(
-  ({ markdown, className, ...props }, ref) => {
-    const html = useMemo(() => parseMarkdown(markdown), [markdown]);
+import { jsx, jsxs } from "react/jsx-runtime";
+import { memo, forwardRef, useState, useEffect, useImperativeHandle } from "react";
+import { Check } from "lucide-react";
+import { clsx } from "./index59.js";
+import { ICON_SIZE } from "./index65.js";
+import styles from "./index114.js";
+import { Modal } from "./index37.js";
+const noop = () => {
+};
+const LoadingBase = forwardRef(
+  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {
+    const [activeIndex, setActiveIndex] = useState(0);
+    useEffect(() => {
+      if (open) setActiveIndex(0);
+    }, [open]);
+    useImperativeHandle(
+      ref,
+      () => ({
+        activate: (labelOrIndex) => {
+          const index = typeof labelOrIndex === "number" ? labelOrIndex : labels.indexOf(labelOrIndex);
+          if (index >= 0) setActiveIndex(index);
+        },
+        complete: () => setActiveIndex(labels.length)
+      }),
+      [labels]
+    );
+    if (!open) return null;
+    if (onlyThrobber) {
+      return /* @__PURE__ */ jsx("div", { className: styles.throbber, role: "status", "aria-label": title, children: /* @__PURE__ */ jsx("span", { className: styles.spinner, "aria-hidden": "true" }) });
+    }
     return /* @__PURE__ */ jsx(
-      "div",
+      Modal,
       {
-        ref,
-        className: clsx(styles.root, className),
-        dangerouslySetInnerHTML: { __html: html },
-        ...props
+        open,
+        onClose: closable ? onClose ?? noop : noop,
+        className: closable ? void 0 : styles.nonClosable,
+        title: /* @__PURE__ */ jsxs("span", { className: styles.titleRow, children: [
+          /* @__PURE__ */ jsx("span", { className: styles.titleSpinner, "aria-hidden": "true" }),
+          title
+        ] }),
+        children: /* @__PURE__ */ jsx("ul", { className: styles.steps, children: labels.map((label, index) => {
+          const status = index < activeIndex ? "done" : index === activeIndex ? "active" : "pending";
+          return /* @__PURE__ */ jsxs("li", { className: clsx(styles.step, styles[status]), children: [
+            /* @__PURE__ */ jsxs("span", { className: styles.iconSlot, "aria-hidden": "true", children: [
+              status === "done" && /* @__PURE__ */ jsx(Check, { size: ICON_SIZE.MD, className: styles.checkIcon }),
+              status === "active" && /* @__PURE__ */ jsx("span", { className: styles.stepSpinner })
+            ] }),
+            /* @__PURE__ */ jsx("span", { children: label })
+          ] }, label);
+        }) })
       }
     );
   }
 );
-MarkdownContent.displayName = "MarkdownContent";
+LoadingBase.displayName = "Loading";
+const Loading = memo(LoadingBase);
 export {
-  MarkdownContent
+  Loading
 };
 //# sourceMappingURL=index35.js.map

package/dist/index35.js.map

@@ -1 +1 @@
-{"version":3,"file":"index35.js","sources":["../src/primitives/MarkdownContent/MarkdownContent.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport clsx from 'clsx';\nimport { parseMarkdown } from '../../utils/markdown';\nimport type { MarkdownContentProps } from './MarkdownContent.types';\nimport styles from './MarkdownContent.module.css';\n\nexport const MarkdownContent = forwardRef<HTMLDivElement, MarkdownContentProps>(\n  ({ markdown, className, ...props }, ref) => {\n    const html = useMemo(() => parseMarkdown(markdown), [markdown]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.root, className)}\n        dangerouslySetInnerHTML={{ __html: html }}\n        {...props}\n      />\n    );\n  },\n);\n\nMarkdownContent.displayName = 'MarkdownContent';\n"],"names":[],"mappings":";;;;;AAMO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,OAAO,QAAQ,MAAM,cAAc,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE9D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,QACtC,yBAAyB,EAAE,QAAQ,KAAA;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,gBAAgB,cAAc;"}
+{"version":3,"file":"index35.js","sources":["../src/composites/Loading/Loading.tsx"],"sourcesContent":["import { forwardRef, memo, useEffect, useImperativeHandle, useState } from 'react';\nimport { Check } from 'lucide-react';\nimport clsx from 'clsx';\nimport { Modal } from '../../primitives/Modal';\nimport { ICON_SIZE } from '../../constants';\nimport type { LoadingHandle, LoadingProps, LoadingStepStatus } from './Loading.types';\nimport styles from './Loading.module.css';\n\nconst noop = (): void => {};\n\nconst LoadingBase = forwardRef<LoadingHandle, LoadingProps>(\n  ({ open = true, onlyThrobber = false, title, labels = [], closable = false, onClose }, ref) => {\n    const [activeIndex, setActiveIndex] = useState(0);\n\n    useEffect(() => {\n      if (open) setActiveIndex(0);\n    }, [open]);\n\n    useImperativeHandle(\n      ref,\n      () => ({\n        activate: (labelOrIndex) => {\n          const index = typeof labelOrIndex === 'number' ? labelOrIndex : labels.indexOf(labelOrIndex);\n          if (index >= 0) setActiveIndex(index);\n        },\n        complete: () => setActiveIndex(labels.length),\n      }),\n      [labels],\n    );\n\n    if (!open) return null;\n\n    if (onlyThrobber) {\n      return (\n        <div className={styles.throbber} role=\"status\" aria-label={title}>\n          <span className={styles.spinner} aria-hidden=\"true\" />\n        </div>\n      );\n    }\n\n    return (\n      <Modal\n        open={open}\n        onClose={closable ? (onClose ?? noop) : noop}\n        className={closable ? undefined : styles.nonClosable}\n        title={\n          <span className={styles.titleRow}>\n            <span className={styles.titleSpinner} aria-hidden=\"true\" />\n            {title}\n          </span>\n        }\n      >\n        <ul className={styles.steps}>\n          {labels.map((label, index) => {\n            const status: LoadingStepStatus =\n              index < activeIndex ? 'done' : index === activeIndex ? 'active' : 'pending';\n            return (\n              <li key={label} className={clsx(styles.step, styles[status])}>\n                <span className={styles.iconSlot} aria-hidden=\"true\">\n                  {status === 'done' && <Check size={ICON_SIZE.MD} className={styles.checkIcon} />}\n                  {status === 'active' && <span className={styles.stepSpinner} />}\n                </span>\n                <span>{label}</span>\n              </li>\n            );\n          })}\n        </ul>\n      </Modal>\n    );\n  },\n);\n\nLoadingBase.displayName = 'Loading';\n\nexport const Loading = memo(LoadingBase);\n"],"names":[],"mappings":";;;;;;;AAQA,MAAM,OAAO,MAAY;AAAC;AAE1B,MAAM,cAAc;AAAA,EAClB,CAAC,EAAE,OAAO,MAAM,eAAe,OAAO,OAAO,SAAS,CAAA,GAAI,WAAW,OAAO,QAAA,GAAW,QAAQ;AAC7F,UAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAEhD,cAAU,MAAM;AACd,UAAI,qBAAqB,CAAC;AAAA,IAC5B,GAAG,CAAC,IAAI,CAAC;AAET;AAAA,MACE;AAAA,MACA,OAAO;AAAA,QACL,UAAU,CAAC,iBAAiB;AAC1B,gBAAM,QAAQ,OAAO,iBAAiB,WAAW,eAAe,OAAO,QAAQ,YAAY;AAC3F,cAAI,SAAS,EAAG,gBAAe,KAAK;AAAA,QACtC;AAAA,QACA,UAAU,MAAM,eAAe,OAAO,MAAM;AAAA,MAAA;AAAA,MAE9C,CAAC,MAAM;AAAA,IAAA;AAGT,QAAI,CAAC,KAAM,QAAO;AAElB,QAAI,cAAc;AAChB,iCACG,OAAA,EAAI,WAAW,OAAO,UAAU,MAAK,UAAS,cAAY,OACzD,UAAA,oBAAC,UAAK,WAAW,OAAO,SAAS,eAAY,QAAO,GACtD;AAAA,IAEJ;AAEA,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,SAAS,WAAY,WAAW,OAAQ;AAAA,QACxC,WAAW,WAAW,SAAY,OAAO;AAAA,QACzC,OACE,qBAAC,QAAA,EAAK,WAAW,OAAO,UACtB,UAAA;AAAA,UAAA,oBAAC,QAAA,EAAK,WAAW,OAAO,cAAc,eAAY,QAAO;AAAA,UACxD;AAAA,QAAA,GACH;AAAA,QAGF,UAAA,oBAAC,QAAG,WAAW,OAAO,OACnB,UAAA,OAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,gBAAM,SACJ,QAAQ,cAAc,SAAS,UAAU,cAAc,WAAW;AACpE,iBACE,qBAAC,QAAe,WAAW,KAAK,OAAO,MAAM,OAAO,MAAM,CAAC,GACzD,UAAA;AAAA,YAAA,qBAAC,QAAA,EAAK,WAAW,OAAO,UAAU,eAAY,QAC3C,UAAA;AAAA,cAAA,WAAW,8BAAW,OAAA,EAAM,MAAM,UAAU,IAAI,WAAW,OAAO,UAAA,CAAW;AAAA,cAC7E,WAAW,YAAY,oBAAC,QAAA,EAAK,WAAW,OAAO,YAAA,CAAa;AAAA,YAAA,GAC/D;AAAA,YACA,oBAAC,UAAM,UAAA,MAAA,CAAM;AAAA,UAAA,EAAA,GALN,KAMT;AAAA,QAEJ,CAAC,EAAA,CACH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,YAAY,cAAc;AAEnB,MAAM,UAAU,KAAK,WAAW;"}

package/dist/index36.cjs

@@ -1,42 +1,24 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const reactDom = require("react-dom");
-const clsx = require("./index58.cjs");
-const useEscapeKey = require("./index5.cjs");
-const Modal_module = require("./index74.cjs");
-const Modal = ({
-  open,
-  title,
-  onClose,
-  children,
-  footer,
-  portalTarget,
-  className,
-  bodyClassName,
-  style,
-  closeLabel = "×"
-}) => {
-  useEscapeKey.useEscapeKey(onClose, open);
-  if (!open) return null;
-  const modalContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(Modal_module.default.root, className), style, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.header, children: [
-      title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Modal_module.default.title, children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: Modal_module.default.closeBtn,
-          "aria-label": "Close modal",
-          children: closeLabel
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Modal_module.default.body, bodyClassName), children }),
-    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.footer, children: footer })
-  ] }) });
-  return reactDom.createPortal(modalContent, portalTarget ?? document.body);
-};
-exports.Modal = Modal;
+const react = require("react");
+const clsx = require("./index59.cjs");
+const markdown = require("./index62.cjs");
+const MarkdownContent_module = require("./index63.cjs");
+const MarkdownContent = react.forwardRef(
+  ({ markdown: markdown$1, className, ...props }, ref) => {
+    const html = react.useMemo(() => markdown.parseMarkdown(markdown$1), [markdown$1]);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        className: clsx.clsx(MarkdownContent_module.default.root, className),
+        dangerouslySetInnerHTML: { __html: html },
+        ...props
+      }
+    );
+  }
+);
+MarkdownContent.displayName = "MarkdownContent";
+exports.MarkdownContent = MarkdownContent;
 //# sourceMappingURL=index36.cjs.map

package/dist/index36.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index36.cjs","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":["useEscapeKey","jsx","styles","jsxs","clsx","createPortal"],"mappings":";;;;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChBA,eAAAA,aAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJC,+BAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAAC,gCAAC,SAAI,WAAWC,KAAAA,KAAKF,qBAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAAC,2BAAAA,KAAC,OAAA,EAAI,WAAWD,aAAAA,QAAO,QACpB,UAAA;AAAA,MAAA,QAAQD,2BAAAA,IAAC,QAAG,WAAWC,aAAAA,QAAO,OAAQ,UAAA,MAAA,CAAM,mCAAS,QAAA,CAAA,CAAK;AAAA,MAC3DD,2BAAAA;AAAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAWC,aAAAA,QAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACAD,+BAAC,SAAI,WAAWG,KAAAA,KAAKF,aAAAA,QAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAUD,2BAAAA,IAAC,OAAA,EAAI,WAAWC,aAAAA,QAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAOG,SAAAA,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;;"}
+{"version":3,"file":"index36.cjs","sources":["../src/primitives/MarkdownContent/MarkdownContent.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport clsx from 'clsx';\nimport { parseMarkdown } from '../../utils/markdown';\nimport type { MarkdownContentProps } from './MarkdownContent.types';\nimport styles from './MarkdownContent.module.css';\n\nexport const MarkdownContent = forwardRef<HTMLDivElement, MarkdownContentProps>(\n  ({ markdown, className, ...props }, ref) => {\n    const html = useMemo(() => parseMarkdown(markdown), [markdown]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.root, className)}\n        dangerouslySetInnerHTML={{ __html: html }}\n        {...props}\n      />\n    );\n  },\n);\n\nMarkdownContent.displayName = 'MarkdownContent';\n"],"names":["forwardRef","markdown","useMemo","parseMarkdown","jsx","clsx","styles"],"mappings":";;;;;;;AAMO,MAAM,kBAAkBA,MAAAA;AAAAA,EAC7B,CAAC,EAAA,UAAEC,YAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,OAAOC,MAAAA,QAAQ,MAAMC,SAAAA,cAAcF,UAAQ,GAAG,CAACA,UAAQ,CAAC;AAE9D,WACEG,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAWC,KAAAA,KAAKC,+BAAO,MAAM,SAAS;AAAA,QACtC,yBAAyB,EAAE,QAAQ,KAAA;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,gBAAgB,cAAc;;"}

package/dist/index36.js

@@ -1,42 +1,24 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { createPortal } from "react-dom";
-import { clsx } from "./index58.js";
-import { useEscapeKey } from "./index5.js";
-import styles from "./index74.js";
-const Modal = ({
-  open,
-  title,
-  onClose,
-  children,
-  footer,
-  portalTarget,
-  className,
-  bodyClassName,
-  style,
-  closeLabel = "×"
-}) => {
-  useEscapeKey(onClose, open);
-  if (!open) return null;
-  const modalContent = /* @__PURE__ */ jsx("div", { className: styles.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxs("div", { className: clsx(styles.root, className), style, children: [
-    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
-      title ? /* @__PURE__ */ jsx("h2", { className: styles.title, children: title }) : /* @__PURE__ */ jsx("span", {}),
-      /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: styles.closeBtn,
-          "aria-label": "Close modal",
-          children: closeLabel
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: clsx(styles.body, bodyClassName), children }),
-    footer && /* @__PURE__ */ jsx("div", { className: styles.footer, children: footer })
-  ] }) });
-  return createPortal(modalContent, portalTarget ?? document.body);
-};
+import { jsx } from "react/jsx-runtime";
+import { forwardRef, useMemo } from "react";
+import { clsx } from "./index59.js";
+import { parseMarkdown } from "./index62.js";
+import styles from "./index63.js";
+const MarkdownContent = forwardRef(
+  ({ markdown, className, ...props }, ref) => {
+    const html = useMemo(() => parseMarkdown(markdown), [markdown]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: clsx(styles.root, className),
+        dangerouslySetInnerHTML: { __html: html },
+        ...props
+      }
+    );
+  }
+);
+MarkdownContent.displayName = "MarkdownContent";
 export {
-  Modal
+  MarkdownContent
 };
 //# sourceMappingURL=index36.js.map

package/dist/index36.js.map

@@ -1 +1 @@
-{"version":3,"file":"index36.js","sources":["../src/primitives/Modal/Modal.tsx"],"sourcesContent":["import { type CSSProperties, type ReactNode } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\nimport { useEscapeKey } from '../../hooks/useEscapeKey';\nimport styles from './Modal.module.css';\n\nexport interface ModalProps {\n  open: boolean;\n  title?: ReactNode;\n  onClose: () => void;\n  children: ReactNode;\n  footer?: ReactNode;\n  portalTarget?: HTMLElement;\n  className?: string;\n  bodyClassName?: string;\n  style?: CSSProperties;\n  closeLabel?: ReactNode;\n}\n\nexport const Modal = ({\n  open,\n  title,\n  onClose,\n  children,\n  footer,\n  portalTarget,\n  className,\n  bodyClassName,\n  style,\n  closeLabel = '\\u00D7',\n}: ModalProps) => {\n  useEscapeKey(onClose, open);\n\n  if (!open) return null;\n\n  const modalContent = (\n    <div className={styles.overlay} role=\"dialog\" aria-modal=\"true\">\n      <div className={clsx(styles.root, className)} style={style}>\n        <div className={styles.header}>\n          {title ? <h2 className={styles.title}>{title}</h2> : <span />}\n          <button\n            type=\"button\"\n            onClick={onClose}\n            className={styles.closeBtn}\n            aria-label=\"Close modal\"\n          >\n            {closeLabel}\n          </button>\n        </div>\n        <div className={clsx(styles.body, bodyClassName)}>{children}</div>\n        {footer && <div className={styles.footer}>{footer}</div>}\n      </div>\n    </div>\n  );\n\n  return createPortal(modalContent, portalTarget ?? document.body);\n};\n"],"names":[],"mappings":";;;;;AAmBO,MAAM,QAAQ,CAAC;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,aAAa;AACf,MAAkB;AAChB,eAAa,SAAS,IAAI;AAE1B,MAAI,CAAC,KAAM,QAAO;AAElB,QAAM,eACJ,oBAAC,OAAA,EAAI,WAAW,OAAO,SAAS,MAAK,UAAS,cAAW,QACvD,UAAA,qBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,SAAS,GAAG,OAC5C,UAAA;AAAA,IAAA,qBAAC,OAAA,EAAI,WAAW,OAAO,QACpB,UAAA;AAAA,MAAA,QAAQ,oBAAC,QAAG,WAAW,OAAO,OAAQ,UAAA,MAAA,CAAM,wBAAS,QAAA,CAAA,CAAK;AAAA,MAC3D;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAS;AAAA,UACT,WAAW,OAAO;AAAA,UAClB,cAAW;AAAA,UAEV,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACH,GACF;AAAA,IACA,oBAAC,SAAI,WAAW,KAAK,OAAO,MAAM,aAAa,GAAI,UAAS;AAAA,IAC3D,UAAU,oBAAC,OAAA,EAAI,WAAW,OAAO,QAAS,UAAA,OAAA,CAAO;AAAA,EAAA,EAAA,CACpD,EAAA,CACF;AAGF,SAAO,aAAa,cAAc,gBAAgB,SAAS,IAAI;AACjE;"}
+{"version":3,"file":"index36.js","sources":["../src/primitives/MarkdownContent/MarkdownContent.tsx"],"sourcesContent":["import { forwardRef, useMemo } from 'react';\nimport clsx from 'clsx';\nimport { parseMarkdown } from '../../utils/markdown';\nimport type { MarkdownContentProps } from './MarkdownContent.types';\nimport styles from './MarkdownContent.module.css';\n\nexport const MarkdownContent = forwardRef<HTMLDivElement, MarkdownContentProps>(\n  ({ markdown, className, ...props }, ref) => {\n    const html = useMemo(() => parseMarkdown(markdown), [markdown]);\n\n    return (\n      <div\n        ref={ref}\n        className={clsx(styles.root, className)}\n        dangerouslySetInnerHTML={{ __html: html }}\n        {...props}\n      />\n    );\n  },\n);\n\nMarkdownContent.displayName = 'MarkdownContent';\n"],"names":[],"mappings":";;;;;AAMO,MAAM,kBAAkB;AAAA,EAC7B,CAAC,EAAE,UAAU,WAAW,GAAG,MAAA,GAAS,QAAQ;AAC1C,UAAM,OAAO,QAAQ,MAAM,cAAc,QAAQ,GAAG,CAAC,QAAQ,CAAC;AAE9D,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,KAAK,OAAO,MAAM,SAAS;AAAA,QACtC,yBAAyB,EAAE,QAAQ,KAAA;AAAA,QAClC,GAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAGV;AACF;AAEA,gBAAgB,cAAc;"}

package/dist/index37.cjs

@@ -1,230 +1,42 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const react = require("react");
-const clsx = require("./index58.cjs");
-const useClickOutside = require("./index4.cjs");
-const constants = require("./index71.cjs");
-const MultiSelectDropdown_module = require("./index89.cjs");
-const arraysMatch = (a, b) => {
-  if (a.length !== b.length) return false;
-  const set = new Set(b);
-  return a.every((v) => set.has(v));
-};
-const MultiSelectDropdown = ({
-  label,
-  options,
-  selected,
-  onApply,
-  isLoading = false,
-  error = null,
-  allowCustomValues = false,
-  customTriggerLabel,
-  selectionMode,
-  emptyMeansAll = false,
-  triggerSummary = "text"
+const reactDom = require("react-dom");
+const clsx = require("./index59.cjs");
+const useEscapeKey = require("./index5.cjs");
+const Modal_module = require("./index111.cjs");
+const Modal = ({
+  open,
+  title,
+  onClose,
+  children,
+  footer,
+  portalTarget,
+  className,
+  bodyClassName,
+  style,
+  closeLabel = "×"
 }) => {
-  const [isOpen, setIsOpen] = react.useState(false);
-  const [searchTerm, setSearchTerm] = react.useState("");
-  const containerRef = react.useRef(null);
-  const normalizedOptions = react.useMemo(() => {
-    const map = /* @__PURE__ */ new Map();
-    options.forEach((opt) => map.set(opt.value, opt));
-    if (Array.isArray(selected)) {
-      selected.forEach((v) => {
-        if (v && !map.has(v)) map.set(v, { value: v });
-      });
-    }
-    return Array.from(map.values());
-  }, [options, selected]);
-  const filteredOptions = react.useMemo(() => {
-    if (!searchTerm.trim()) return normalizedOptions;
-    const term = searchTerm.trim().toLowerCase();
-    return normalizedOptions.filter((opt) => {
-      const lbl = opt.label ?? opt.value;
-      return lbl.toLowerCase().includes(term) || opt.value.toLowerCase().includes(term);
-    });
-  }, [normalizedOptions, searchTerm]);
-  const allOptionValues = react.useMemo(() => normalizedOptions.map((o) => o.value), [normalizedOptions]);
-  const initialSelection = react.useMemo(() => {
-    if (Array.isArray(selected) && selected.length) return Array.from(new Set(selected));
-    return emptyMeansAll ? allOptionValues : [];
-  }, [selected, allOptionValues, emptyMeansAll]);
-  const [pendingSelection, setPendingSelection] = react.useState(initialSelection);
-  const closeAndReset = react.useCallback(() => {
-    setIsOpen(false);
-    setPendingSelection(initialSelection);
-    setSearchTerm("");
-  }, [initialSelection]);
-  useClickOutside.useClickOutside(containerRef, closeAndReset);
-  react.useEffect(() => {
-    if (isOpen) {
-      setPendingSelection(initialSelection);
-      setSearchTerm("");
-    }
-  }, [isOpen, initialSelection]);
-  react.useEffect(() => {
-    if (!isOpen) setPendingSelection(initialSelection);
-  }, [initialSelection, isOpen]);
-  const handleToggleOption = (value) => {
-    setPendingSelection((prev) => {
-      const unique = Array.from(new Set(prev));
-      return unique.includes(value) ? unique.filter((v) => v !== value) : [...unique, value];
-    });
-  };
-  const handleSelectAll = () => {
-    if (filteredOptions.length === 0) {
-      setPendingSelection([]);
-      return;
-    }
-    setPendingSelection(filteredOptions.map((o) => o.value));
-  };
-  const handleClearAll = () => setPendingSelection([]);
-  const handleApply = () => {
-    const unique = Array.from(new Set(pendingSelection));
-    const mode = unique.length === 0 || unique.length === normalizedOptions.length ? "all" : "custom";
-    onApply(unique, { selectionMode: mode });
-    setIsOpen(false);
-  };
-  const handleCancel = () => {
-    setPendingSelection(Array.from(new Set(Array.isArray(selected) ? selected : [])));
-    setIsOpen(false);
-  };
-  const pendingSet = react.useMemo(() => new Set(pendingSelection), [pendingSelection]);
-  const selectedSet = react.useMemo(() => new Set(Array.isArray(selected) ? selected : []), [selected]);
-  const hasChanges = !arraysMatch(Array.from(pendingSet), Array.from(selectedSet));
-  const totalOptions = normalizedOptions.length;
-  const selectedSize = selectedSet.size;
-  const pendingSize = pendingSet.size;
-  const isSelectedAll = selectedSize === 0 || selectedSize === totalOptions;
-  const isPendingAll = pendingSize === 0 || pendingSize === totalOptions;
-  const selectedCountValue = isSelectedAll ? totalOptions : selectedSize;
-  const pendingCountValue = isPendingAll ? totalOptions : pendingSize;
-  const isActiveFilter = selectionMode !== void 0 ? selectionMode === "custom" : !isSelectedAll;
-  const getSelectedLabel = () => {
-    if (isSelectedAll) return "All";
-    if (selectedSize === 1) {
-      const val = Array.from(selectedSet)[0];
-      const opt = normalizedOptions.find((o) => o.value === val);
-      return (opt == null ? void 0 : opt.label) || (opt == null ? void 0 : opt.value) || String(selectedCountValue);
-    }
-    return String(selectedCountValue);
-  };
-  const shouldDisableControls = isLoading || options.length === 0;
-  const normalizedSearch = searchTerm.trim();
-  const canCreateCustom = allowCustomValues && normalizedSearch.length > 0 && !normalizedOptions.some((o) => o.value.toLowerCase() === normalizedSearch.toLowerCase());
-  const handleCreateCustom = () => {
-    if (!normalizedSearch) return;
-    setPendingSelection((prev) => Array.from(/* @__PURE__ */ new Set([...prev, normalizedSearch])));
-    setSearchTerm("");
-  };
-  const handleClearFilter = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    onApply([], { selectionMode: "all" });
-  };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.root, ref: containerRef, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "button",
-      {
-        type: "button",
-        className: clsx.clsx(MultiSelectDropdown_module.default.trigger, { [MultiSelectDropdown_module.default.active]: isOpen }),
-        onClick: () => setIsOpen((prev) => !prev),
-        "aria-expanded": isOpen,
-        "aria-haspopup": "listbox",
-        children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.triggerContent, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("svg", { className: MultiSelectDropdown_module.default.chevron, width: constants.ICON_SIZE.MD, height: constants.ICON_SIZE.MD, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "6 9 12 15 18 9" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.label, children: label }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.valueGroup, children: [
-            triggerSummary === "text" && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.value, children: customTriggerLabel || getSelectedLabel() }),
-            (triggerSummary === "count" ? selectedSize > 0 : isActiveFilter) && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.badge, children: selectedCountValue }),
-            isActiveFilter && /* @__PURE__ */ jsxRuntime.jsx(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                className: MultiSelectDropdown_module.default.clear,
-                onClick: handleClearFilter,
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    handleClearFilter(e);
-                  }
-                },
-                "aria-label": `Clear ${label} filter`,
-                children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: constants.ICON_SIZE.SM, height: constants.ICON_SIZE.SM, viewBox: constants.SVG_VIEWBOX, fill: "none", stroke: "currentColor", strokeWidth: constants.SVG_STROKE_WIDTH, strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                  /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-                ] })
-              }
-            )
-          ] })
-        ] })
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.panel, role: "dialog", "aria-label": `${label} filter`, children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.header, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "search",
-            className: MultiSelectDropdown_module.default.search,
-            placeholder: `Search ${label.toLowerCase()}`,
-            value: searchTerm,
-            onChange: (e) => setSearchTerm(e.target.value),
-            disabled: shouldDisableControls
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.headerActions, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: MultiSelectDropdown_module.default.chip, onClick: handleSelectAll, disabled: shouldDisableControls, children: "Select all" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: clsx.clsx(MultiSelectDropdown_module.default.chip, MultiSelectDropdown_module.default.chipGhost), onClick: handleClearAll, disabled: pendingSize === 0, children: "Deselect all" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.list, role: "listbox", children: [
-        isLoading && /* @__PURE__ */ jsxRuntime.jsx("p", { className: MultiSelectDropdown_module.default.status, children: "Loading options..." }),
-        !isLoading && error && /* @__PURE__ */ jsxRuntime.jsx("p", { className: clsx.clsx(MultiSelectDropdown_module.default.status, MultiSelectDropdown_module.default.statusError), children: error }),
-        !isLoading && !error && filteredOptions.length === 0 && /* @__PURE__ */ jsxRuntime.jsx("p", { className: MultiSelectDropdown_module.default.status, children: "No matches" }),
-        !isLoading && !error && filteredOptions.map((opt) => {
-          const checked = pendingSet.has(opt.value);
-          return /* @__PURE__ */ jsxRuntime.jsxs("label", { className: MultiSelectDropdown_module.default.option, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "checkbox",
-                checked,
-                onChange: () => handleToggleOption(opt.value),
-                "aria-checked": checked
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.optionLabel, children: [
-              opt.label ?? opt.value,
-              opt.count !== void 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: MultiSelectDropdown_module.default.optionCount, children: opt.count })
-            ] })
-          ] }, opt.value);
-        }),
-        !isLoading && !error && canCreateCustom && /* @__PURE__ */ jsxRuntime.jsxs("button", { type: "button", className: MultiSelectDropdown_module.default.create, onClick: handleCreateCustom, children: [
-          'Use "',
-          normalizedSearch,
-          '"'
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.footer, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.selection, children: [
-          isPendingAll ? "All selected" : `${pendingCountValue} selected`,
-          hasChanges && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: MultiSelectDropdown_module.default.selectionDelta, children: [
-            "(",
-            pendingCountValue - selectedCountValue >= 0 ? "+" : "",
-            pendingCountValue - selectedCountValue,
-            ")"
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: MultiSelectDropdown_module.default.footerActions, children: [
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: clsx.clsx(MultiSelectDropdown_module.default.chip, MultiSelectDropdown_module.default.chipGhost), onClick: handleCancel, children: "Cancel" }),
-          /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: MultiSelectDropdown_module.default.chip, onClick: handleApply, disabled: !hasChanges, children: "Apply" })
-        ] })
-      ] })
-    ] })
-  ] });
+  useEscapeKey.useEscapeKey(onClose, open);
+  if (!open) return null;
+  const modalContent = /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.overlay, role: "dialog", "aria-modal": "true", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: clsx.clsx(Modal_module.default.root, className), style, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: Modal_module.default.header, children: [
+      title ? /* @__PURE__ */ jsxRuntime.jsx("h2", { className: Modal_module.default.title, children: title }) : /* @__PURE__ */ jsxRuntime.jsx("span", {}),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onClose,
+          className: Modal_module.default.closeBtn,
+          "aria-label": "Close modal",
+          children: closeLabel
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: clsx.clsx(Modal_module.default.body, bodyClassName), children }),
+    footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: Modal_module.default.footer, children: footer })
+  ] }) });
+  return reactDom.createPortal(modalContent, portalTarget ?? document.body);
 };
-exports.MultiSelectDropdown = MultiSelectDropdown;
+exports.Modal = Modal;
 //# sourceMappingURL=index37.cjs.map