@clickhouse/click-ui 0.0.163 → 0.0.165

package/dist/click-ui.es.js

@@ -1546,7 +1546,7 @@ const CalendarWithTime = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg"
   /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.74728 17.4532C6.7342 17.4529 6.72157 17.458 6.71232 17.4672C6.70306 17.4765 6.69799 17.4891 6.69826 17.5022C6.69827 17.5221 6.71032 17.54 6.72876 17.5475C6.7472 17.5551 6.76836 17.5507 6.7823 17.5365C6.79624 17.5222 6.80018 17.501 6.79228 17.4827C6.78438 17.4644 6.7662 17.4527 6.74628 17.4532", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
 ] });
 const Cpu = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_7971_4934)", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_7971_4934)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M14.25 9.75H9.75V14.25H14.25V9.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.75 4.5H5.25C4.83579 4.5 4.5 4.83579 4.5 5.25V18.75C4.5 19.1642 4.83579 19.5 5.25 19.5H18.75C19.1642 19.5 19.5 19.1642 19.5 18.75V5.25C19.5 4.83579 19.1642 4.5 18.75 4.5Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19.5 9.75H21.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -1562,7 +1562,7 @@ const Cpu = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "2
 ] });
 const Minus = (props) => /* @__PURE__ */ jsxRuntimeExports.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18.5 11.5H5.5", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 const Pipe = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_8130_6058)", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_8130_6058)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M10.5 15.75V13.5C10.5 12.7044 10.8161 11.9413 11.3787 11.3787C11.9413 10.8161 12.7044 10.5 13.5 10.5H15.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M15.75 4.5H13.5C11.1131 4.5 8.82387 5.44821 7.13604 7.13604C5.44821 8.82387 4.5 11.1131 4.5 13.5V15.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18 3.75H16.5C16.0858 3.75 15.75 4.08579 15.75 4.5V10.5C15.75 10.9142 16.0858 11.25 16.5 11.25H18C18.4142 11.25 18.75 10.9142 18.75 10.5V4.5C18.75 4.08579 18.4142 3.75 18 3.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -1575,7 +1575,7 @@ const Pipe = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "
   /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_8130_6058", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
 ] });
 const TreeStructure = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_7969_2214)", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_7969_2214)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 9.75H3C2.58579 9.75 2.25 10.0858 2.25 10.5V13.5C2.25 13.9142 2.58579 14.25 3 14.25H6C6.41421 14.25 6.75 13.9142 6.75 13.5V10.5C6.75 10.0858 6.41421 9.75 6 9.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.25 3.75H15.75C15.3358 3.75 15 4.08579 15 4.5V9C15 9.41421 15.3358 9.75 15.75 9.75H20.25C20.6642 9.75 21 9.41421 21 9V4.5C21 4.08579 20.6642 3.75 20.25 3.75Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20.25 14.25H15.75C15.3358 14.25 15 14.5858 15 15V19.5C15 19.9142 15.3358 20.25 15.75 20.25H20.25C20.6642 20.25 21 19.9142 21 19.5V15C21 14.5858 20.6642 14.25 20.25 14.25Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
@@ -2383,7 +2383,7 @@ styled.span.withConfig({
   componentId: "sc-1sddmxu-8"
 })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
 const Switzerland = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_8668_6183)", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { clipPath: "url(#clip0_8668_6183)", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0H0V20H30V0Z", fill: "#D52B1E" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21.6663 7.77783H8.33301V12.2223H21.6663V7.77783Z", fill: "white" }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.2218 3.3335H12.7773V16.6668H17.2218V3.3335Z", fill: "white" })
@@ -3206,6 +3206,7 @@ const SVGIcon = ({
   color,
   width,
   height,
+  state,
   className,
   size: size2,
   ...props
@@ -3214,11 +3215,11 @@ const SVGIcon = ({
   if (!Component2) {
     return null;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { ...props }) });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, state, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component2, { ...props }) });
 };
 const SvgWrapper = styled.div.withConfig({
   componentId: "sc-29ieut-0"
-})(["display:flex;align-items:center;", ""], ({
+})(["display:flex;align-items:center;", " ", ""], ({
   theme: theme2,
   $color = "currentColor",
   $width,
@@ -3237,6 +3238,16 @@ const SvgWrapper = styled.div.withConfig({
       width: ${$width || theme2.click.image[$size || "md"].size.width || "24px"};
       height: ${$height || theme2.click.image[$size || "md"].size.height || "24px"};
     }
+  `, ({
+  theme: theme2,
+  $color = "currentColor",
+  state = "default",
+  $size = "md"
+}) => `
+    background: ${theme2.click.icon.color.background[state]};
+    border-radius: ${theme2.border.radii.full};
+    padding: ${state === "default" ? "none" : theme2.click.icon.space[$size].all};
+    color: ${state === "default" ? $color : theme2.click.icon.color.text[state]};
   `);
 const SvgImage = ({
   name: name2,
@@ -4266,14 +4277,13 @@ let $1746a345f3d73bb7$var$count = 0;
 function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
   const [id, setId] = React.useState($1746a345f3d73bb7$var$useReactId());
   $9f79659886946c16$export$e5c5a5f917a5871c(() => {
-    if (!deterministicId)
-      setId(
-        (reactId) => reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
-      );
+    setId(
+      (reactId) => reactId !== null && reactId !== void 0 ? reactId : String($1746a345f3d73bb7$var$count++)
+    );
   }, [
     deterministicId
   ]);
-  return deterministicId || (id ? `radix-${id}` : "");
+  return id ? `radix-${id}` : "";
 }
 const sides = ["top", "right", "bottom", "left"];
 const min = Math.min;
@@ -9075,25 +9085,25 @@ const Accordion = ({
   children,
   fillWidth = false,
   ...delegated
-}) => /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
-  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, $fillWidth: fillWidth, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
+}) => /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot$1, { type: "single", collapsible: true, $fillWidth: fillWidth, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsxs($1bf158f521e1b1b4$export$6d08773d2e66f8f2, { value: "item", children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger$1, { $size: size2, color, $fillWidth: fillWidth, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper$1, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize || size2, "aria-label": "accordion icon" }) }),
       icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize || size2 }) : null
     ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "div", size: size2, fillWidth, children: title })
   ] }),
-  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent$1, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
     children
   ] })
 ] }) });
-const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
+const AccordionRoot$1 = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
   componentId: "sc-1ysh219-0"
 })(["", ";"], ({
   $fillWidth
 }) => $fillWidth && "width: 100%");
-const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+const AccordionTrigger$1 = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
   componentId: "sc-1ysh219-1"
 })(["border:none;padding:0;background-color:transparent;display:flex;align-items:center;", " ", ";"], ({
   theme: theme2,
@@ -9117,20 +9127,20 @@ const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withC
   `, ({
   $fillWidth
 }) => $fillWidth && "width: 100%");
-const AccordionIconWrapper = styled.div.withConfig({
+const AccordionIconWrapper$1 = styled.div.withConfig({
   componentId: "sc-1ysh219-2"
-})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
-const AccordionIconsWrapper = styled.div.withConfig({
+})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger$1);
+const AccordionIconsWrapper$1 = styled.div.withConfig({
   componentId: "sc-1ysh219-3"
 })(["display:flex;align-items:center;justify-content:center;"]);
-const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
+const AccordionContent$1 = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
   componentId: "sc-1ysh219-4"
 })([""]);
 styled(Accordion).withConfig({
   componentId: "sc-1ysh219-5"
-})(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger, ({
+})(["", "{gap:", ";}p{margin:0;}", "{visibility:hidden;}&:hover ", "{visibility:revert;}&:active ", "{visibility:revert;}", "[data-state='open'] ", "{visibility:revert;}"], AccordionTrigger$1, ({
   theme: theme2
-}) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper, AccordionIconWrapper, AccordionIconWrapper, AccordionTrigger, AccordionIconWrapper);
+}) => theme2.click.sidebar.navigation.item.default.space.gap, AccordionIconWrapper$1, AccordionIconWrapper$1, AccordionIconWrapper$1, AccordionTrigger$1, AccordionIconWrapper$1);
 const AccordionToExport = styled(Accordion).withConfig({
   componentId: "sc-1ysh219-6"
 })([""]);
@@ -10382,7 +10392,7 @@ const HeaderLeft = styled.div.withConfig({
 const Content$3 = styled.div.withConfig({
   componentId: "sc-1drx130-2"
 })(["display:flex;flex-direction:column;flex:1;"]);
-const CustomIcon = styled.img.withConfig({
+const CustomIcon$1 = styled.img.withConfig({
   componentId: "sc-1drx130-3"
 })(["height:", ";width:", ";"], ({
   theme: theme2
@@ -10461,7 +10471,7 @@ const CardSecondary = ({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(Wrapper$a, { "aria-disabled": disabled, tabIndex: 0, $hasShadow: hasShadow, ...props, children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs(Header$4, { children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderLeft, { $disabled: disabled, children: [
-        iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true, size: "lg" }),
+        iconUrl ? /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon$1, { src: iconUrl, alt: "card icon", "aria-hidden": true }) : icon && /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, "aria-hidden": true, size: "lg" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(Title$2, { type: "h3", children: title })
       ] }),
       badgeText && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { text: badgeText, state: disabled == true ? "disabled" : badgeState })
@@ -33501,7 +33511,7 @@ const SelectList = styled.div.withConfig({
 })(["display:flex;flex-direction:column;width:inherit;max-height:calc(var(--radix-popover-content-available-height) - 1rem);"]);
 const SelectListContent = styled.div.withConfig({
   componentId: "sc-oudbwg-8"
-})(["width:inherit;overflow:overlay;flex:1;"]);
+})(["width:inherit;overflow:auto;flex:1;"]);
 const HiddenSelectElement = styled.select.withConfig({
   componentId: "sc-oudbwg-9"
 })(["visibility:hidden;position:absolute;z-index:-1;height:0;"]);
@@ -43367,6 +43377,34 @@ const click$2 = {
       }
     }
   },
+  icon: {
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.2)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+        danger: "rgb(100% 13.7% 13.7% / 0.2)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.2)",
+        warning: "rgb(100% 58% 8.63% / 0.2)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#CCFFD0",
+        neutral: "#c0c0c0",
+        danger: "#ffbaba",
+        info: "#b5cdf9",
+        warning: "#ffca8b"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(62.7% 62.7% 62.7% / 0.2)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+        warning: "rgb(100% 58% 8.63% / 0.05)"
+      }
+    }
+  },
   global: {
     color: {
       background: {
@@ -44208,7 +44246,7 @@ const click$1 = {
   field: {
     color: {
       background: {
-        "default": "rgb(96.6% 96.9% 98.1%)",
+        "default": "rgb(98.5% 98.9% 100%)",
         hover: "rgb(96.6% 96.9% 98.1%)",
         active: "#ffffff",
         disabled: "#dfdfdf",
@@ -44834,6 +44872,34 @@ const click$1 = {
       }
     }
   },
+  icon: {
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#00990D",
+        neutral: "#53575f",
+        danger: "#c10000",
+        info: "#135be6",
+        warning: "#9e5600"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+        warning: "rgb(100% 58% 8.63% / 0.05)"
+      }
+    }
+  },
   global: {
     color: {
       background: {
@@ -46268,7 +46334,7 @@ const click = {
     },
     color: {
       background: {
-        "default": "rgb(96.6% 96.9% 98.1%)",
+        "default": "rgb(98.5% 98.9% 100%)",
         hover: "rgb(96.6% 96.9% 98.1%)",
         active: "#ffffff",
         disabled: "#dfdfdf",
@@ -47649,6 +47715,54 @@ const click = {
       unset: ""
     }
   },
+  icon: {
+    space: {
+      xs: {
+        all: "0.25rem"
+      },
+      sm: {
+        all: "0.25rem"
+      },
+      md: {
+        all: "0.365rem"
+      },
+      lg: {
+        all: "0.5rem"
+      },
+      xl: {
+        all: "0.75rem"
+      },
+      xxl: {
+        all: "1rem"
+      }
+    },
+    color: {
+      background: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.1)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.1)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.1)",
+        warning: "rgb(100% 58% 8.63% / 0.1)"
+      },
+      text: {
+        "default": "rgba(0,0,0,0)",
+        success: "#00990D",
+        neutral: "#53575f",
+        danger: "#c10000",
+        info: "#135be6",
+        warning: "#9e5600"
+      },
+      stroke: {
+        "default": "rgba(0,0,0,0)",
+        success: "rgb(20% 100% 26.7% / 0.05)",
+        neutral: "rgb(41.2% 43.1% 47.5% / 0.1)",
+        danger: "rgb(100% 13.7% 13.7% / 0.05)",
+        info: "rgb(7.45% 35.7% 90.2% / 0.05)",
+        warning: "rgb(100% 58% 8.63% / 0.05)"
+      }
+    }
+  },
   global: {
     color: {
       background: {
@@ -47869,6 +47983,7 @@ const palette = {
     base: "#212121"
   },
   slate: {
+    "25": "#FBFCFF",
     "50": "#f6f7fa",
     "100": "#e6e7e9",
     "200": "#cccfd3",
@@ -48344,6 +48459,153 @@ const VerticalStep = ({
 };
 VerticalStep.displayName = "VerticalStepper.Step";
 VerticalStepper.Step = VerticalStep;
+const MultiAccordionContext = createContext({
+  size: "md",
+  fillWidth: true,
+  showBorder: true,
+  showCheck: false
+});
+const MultiAccordion = ({
+  size: size2 = "md",
+  children,
+  fillWidth = true,
+  showCheck = false,
+  showBorder = true,
+  gap = "md",
+  markAsCompleted,
+  ...delegated
+}) => {
+  const contextValue = {
+    size: size2,
+    fillWidth,
+    showBorder,
+    showCheck,
+    markAsCompleted
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionRoot, { $fillWidth: fillWidth, $gap: gap, ...delegated, children: /* @__PURE__ */ jsxRuntimeExports.jsx(MultiAccordionContext.Provider, { value: contextValue, children }) });
+};
+const MultiAccordionItem = ({
+  value,
+  title,
+  color,
+  icon,
+  iconSize,
+  gap,
+  children,
+  isCompleted = false,
+  ...props
+}) => {
+  const {
+    fillWidth,
+    size: size2,
+    showBorder,
+    showCheck,
+    markAsCompleted
+  } = useContext(MultiAccordionContext);
+  const onClickStatus = (e) => {
+    e.preventDefault();
+    if (typeof markAsCompleted === "function") {
+      markAsCompleted(value);
+    }
+  };
+  const customSize = size2 === "none" ? "sm" : size2;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionItem, { value, $showBorder: showBorder, $fillWidth: fillWidth, ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionTrigger, { $size: size2, color, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionIconsWrapper, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(AccordionIconWrapper, { children: /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: "chevron-right", size: iconSize ?? customSize, "aria-label": "accordion icon" }) }),
+        icon ? /* @__PURE__ */ jsxRuntimeExports.jsx(SvgImage, { name: icon, size: iconSize ?? customSize }) : null
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Container, { isResponsive: false, gap: "sm", alignItems: "center", fillWidth: true, justifyContent: "space-between", component: "span", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Text, { component: "span", size: customSize, fillWidth, children: title }),
+        showCheck && /* @__PURE__ */ jsxRuntimeExports.jsx(CustomIcon, { name: isCompleted ? "check-in-circle" : "circle", $isCompleted: isCompleted, size: iconSize ?? customSize, "aria-label": "accordion icon status", onClick: onClickStatus, "data-icon": "accordion-status", "data-testid": "accordion-status-icon" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs(AccordionContent, { $padding: size2, children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Spacer, { size: gap }),
+      children
+    ] })
+  ] });
+};
+MultiAccordionItem.displayName = "MultiAccordion.Item";
+MultiAccordion.Item = MultiAccordionItem;
+const AccordionRoot = styled($1bf158f521e1b1b4$export$be92b6f5f03c0fe9).withConfig({
+  componentId: "sc-1lb3204-0"
+})(["display:flex;flex-direction:column;justify-content:start;align-items:start;gap:", ";", ";"], ({
+  theme: theme2,
+  $gap
+}) => theme2.click.container.gap[$gap], ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
+const AccordionItem = styled($1bf158f521e1b1b4$export$6d08773d2e66f8f2).withConfig({
+  componentId: "sc-1lb3204-1"
+})(["", ";", ";"], ({
+  theme: theme2,
+  $showBorder
+}) => `
+    border: ${$showBorder ? `1px solid ${theme2.click.global.color.stroke.default}` : "none"};
+    border-radius: ${theme2.border.radii[1]};
+  `, ({
+  $fillWidth
+}) => $fillWidth && "width: 100%");
+const AccordionTrigger = styled($1bf158f521e1b1b4$export$41fb9f06171c75f4).withConfig({
+  componentId: "sc-1lb3204-2"
+})(["width:100%;border:none;padding:0;background-color:transparent;display:flex;align-items:center;", ';border-radius:inherit;&[data-state="open"]{border-bottom-left-radius:0px;border-bottom-right-radius:0px;[data-icon="accordion-status"]{color:', ";}}"], ({
+  theme: theme2,
+  $size = "md",
+  color = "default"
+}) => {
+  const size2 = $size === "none" ? "sm" : $size;
+  return `
+    padding: ${theme2.click.container.space[$size]};
+    gap: ${theme2.click.accordion[size2].space.gap};
+    color: ${theme2.click.accordion.color[color].label.default};
+    font: ${theme2.click.accordion[size2].typography.label.default};
+
+    &:active {
+      color: ${theme2.click.accordion.color[color].label.active};
+      font: ${theme2.click.accordion[size2].typography.label.active};
+    }
+
+    &:hover {
+      color: ${theme2.click.accordion.color[color].label.hover};
+      background: ${theme2.click.global.color.stroke.default};
+      font: ${theme2.click.accordion[size2].typography.label.hover};
+      cursor: pointer;
+    }
+
+  [data-icon="accordion-status"] {
+    color: ${theme2.global.color.stroke.intense};
+  }
+  `;
+}, ({
+  theme: theme2
+}) => theme2.global.color.accent.default);
+const AccordionIconWrapper = styled.div.withConfig({
+  componentId: "sc-1lb3204-3"
+})(["display:flex;align-items:center;justify-content:center;transition:transform 200ms cubic-bezier(0.87,0,0.13,1);", "[data-state='open'] &{transform:rotate(90deg);}"], AccordionTrigger);
+const AccordionIconsWrapper = styled.div.withConfig({
+  componentId: "sc-1lb3204-4"
+})(["display:flex;align-items:center;justify-content:center;"]);
+const CustomIcon = styled(SvgImage).withConfig({
+  componentId: "sc-1lb3204-5"
+})(["", ""], ({
+  $isCompleted,
+  theme: theme2
+}) => $isCompleted && `
+        svg path {
+          stroke: ${theme2.global.color.background.default} !important;
+          &:first-of-type {
+            stroke: ${theme2.global.color.accent.default} !important;
+          }
+          fill: ${theme2.global.color.accent.default} !important;;
+        }
+      `);
+const AccordionContent = styled($1bf158f521e1b1b4$export$7c6e2c02157bb7d2).withConfig({
+  componentId: "sc-1lb3204-6"
+})(["padding:", ";padding-top:0;"], ({
+  theme: theme2,
+  $padding
+}) => theme2.click.container.space[$padding]);
 export {
   AccordionToExport as Accordion,
   Alert,
@@ -48385,6 +48647,7 @@ export {
   Label$1 as Label,
   Link,
   Logo,
+  MultiAccordion,
   MultiSelect,
   NumberField,
   Pagination,