@clickhouse/click-ui 0.0.163 → 0.0.165

package/dist/click-ui.umd.js

@@ -1563,7 +1563,7 @@ var __publicField = (obj, key, value) => {
     /* @__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" }),
@@ -1579,7 +1579,7 @@ var __publicField = (obj, key, value) => {
   ] });
   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" }),
@@ -1592,7 +1592,7 @@ var __publicField = (obj, key, value) => {
     /* @__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" }),
@@ -2400,7 +2400,7 @@ var __publicField = (obj, key, value) => {
     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" })
@@ -3223,6 +3223,7 @@ var __publicField = (obj, key, value) => {
     color,
     width,
     height,
+    state,
     className,
     size: size2,
     ...props
@@ -3231,11 +3232,11 @@ var __publicField = (obj, key, value) => {
     if (!Component) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...props }) });
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(SvgWrapper, { $color: color, $width: width, $height: height, $size: size2, className, state, children: /* @__PURE__ */ jsxRuntimeExports.jsx(Component, { ...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,
@@ -3254,6 +3255,16 @@ var __publicField = (obj, key, value) => {
       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,
@@ -4283,14 +4294,13 @@ var __publicField = (obj, key, value) => {
   function $1746a345f3d73bb7$export$f680877a34711e37(deterministicId) {
     const [id, setId] = React__namespace.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;
@@ -9092,25 +9102,25 @@ var __publicField = (obj, key, value) => {
     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,
@@ -9134,20 +9144,20 @@ var __publicField = (obj, key, value) => {
   `, ({
     $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"
   })([""]);
@@ -10399,7 +10409,7 @@ var __publicField = (obj, key, value) => {
   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
@@ -10478,7 +10488,7 @@ var __publicField = (obj, key, value) => {
     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 })
@@ -33518,7 +33528,7 @@ var __publicField = (obj, key, value) => {
   })(["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;"]);
@@ -43384,6 +43394,34 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -44225,7 +44263,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     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",
@@ -44851,6 +44889,34 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       }
     },
+    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: {
@@ -46285,7 +46351,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       },
       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",
@@ -47666,6 +47732,54 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         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: {
@@ -47886,6 +48000,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
       base: "#212121"
     },
     slate: {
+      "25": "#FBFCFF",
       "50": "#f6f7fa",
       "100": "#e6e7e9",
       "200": "#cccfd3",
@@ -48361,6 +48476,153 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   VerticalStep.displayName = "VerticalStepper.Step";
   VerticalStepper.Step = VerticalStep;
+  const MultiAccordionContext = React.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
+    } = React.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]);
   exports2.Accordion = AccordionToExport;
   exports2.Alert = Alert;
   exports2.AutoComplete = AutoComplete;
@@ -48401,6 +48663,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.Label = Label$1;
   exports2.Link = Link;
   exports2.Logo = Logo;
+  exports2.MultiAccordion = MultiAccordion;
   exports2.MultiSelect = MultiSelect;
   exports2.NumberField = NumberField;
   exports2.Pagination = Pagination;

package/dist/components/Container/Container.d.ts

@@ -2,10 +2,10 @@ import { ComponentProps, ElementType, ReactNode } from 'react';
 import { Orientation } from '..';
 
 type AlignItemsOptions = "start" | "center" | "end" | "stretch";
-type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type GrowShrinkOptions = "0" | "1" | "2" | "3" | "4" | "5" | "6";
 type JustifyContentOptions = "center" | "space-between" | "space-around" | "space-evenly" | "start" | "end" | "left" | "right";
-type PaddingOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type PaddingOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type WrapOptions = "nowrap" | "wrap" | "wrap-reverse";
 export interface ContainerProps<T extends ElementType = "div"> {
     component?: T;

package/dist/components/Icon/types.d.ts

@@ -5,12 +5,14 @@ import { LogoName } from '../Logos/types';
 import { PaymentName, PaymentProps } from '../icons/Payments';
 
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type IconState = "default" | "success" | "warning" | "danger" | "info";
 export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "calendar", "calendar-with-time", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cpu", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "minus", "no-cloud", "pause", "payment", "pencil", "pie-chart", "pipe", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "sandglass", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "tree-structure", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;
     color?: string;
     size?: IconSize;
+    state?: IconState;
 }
 type NoThemeType = {
     theme?: never;

package/dist/components/MultiAccordion/MultiAccordion.d.ts

@@ -0,0 +1,35 @@
+import { IconSize } from '../Icon/types';
+import { IconName } from '..';
+import { ReactElement, ReactNode } from 'react';
+import { GapOptions } from '../Container/Container';
+import { SizeType as SpacerSizeType } from '../Spacer/Spacer';
+import * as RadixAccordion from "@radix-ui/react-accordion";
+type Size = "none" | "sm" | "md" | "lg";
+type Color = "default" | "link";
+type MarkAsCompletedFunctionType = (value: string) => void | Promise<void>;
+interface MultiAccordionCommonProps {
+    children: React.ReactNode;
+    size?: Size;
+    fillWidth?: boolean;
+    gap?: GapOptions;
+    showBorder?: boolean;
+    showCheck?: boolean;
+    markAsCompleted?: MarkAsCompletedFunctionType;
+}
+export type MultiAccordionProps = MultiAccordionCommonProps & (Omit<RadixAccordion.AccordionMultipleProps, "children"> | Omit<RadixAccordion.AccordionSingleProps, "children">);
+export declare const MultiAccordion: {
+    ({ size, children, fillWidth, showCheck, showBorder, gap, markAsCompleted, ...delegated }: MultiAccordionProps): import("react/jsx-runtime").JSX.Element;
+    Item: {
+        ({ value, title, color, icon, iconSize, gap, children, isCompleted, ...props }: MultiAccordionItemProps): ReactElement;
+        displayName: string;
+    };
+};
+interface MultiAccordionItemProps extends Omit<RadixAccordion.AccordionItemProps, "title"> {
+    title: ReactNode;
+    color?: Color;
+    icon?: IconName;
+    iconSize?: IconSize;
+    gap?: SpacerSizeType;
+    isCompleted?: boolean;
+}
+export {};

package/dist/components/MultiAccordion/MultiAccordionDemo.d.ts

@@ -0,0 +1,4 @@
+import { ReactElement } from 'react';
+
+declare const MultiAccordionDemo: () => ReactElement;
+export default MultiAccordionDemo;

package/dist/components/Spacer/Spacer.d.ts

@@ -1,6 +1,5 @@
-type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+export type SizeType = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export interface SpacerProps {
     size?: SizeType;
 }
 export declare const Spacer: ({ size }: SpacerProps) => import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/index.d.ts

@@ -64,3 +64,4 @@ export { useToast } from './Toast/useToast';
 export { createToast } from './Toast/toastEmitter';
 export { UserIcon as ProfileIcon } from './icons/UserIcon';
 export { default as VerticalStepper } from './VerticalStepper/VerticalStepper';
+export { MultiAccordion } from './MultiAccordion/MultiAccordion';

package/dist/components/types.d.ts

@@ -56,6 +56,7 @@ export type { AutoCompleteProps, AutoCompleteOptionListItem, } from './AutoCompl
 export type { PaginationProps } from './Pagination/Pagination';
 export type { ContextMenuItemProps } from './ContextMenu/ContextMenu';
 export type { GenericLabelProps } from './GenericLabel/GenericLabel';
+export type { MultiAccordionProps } from './MultiAccordion/MultiAccordion';
 export type { IconButtonProps };
 export type { AlertProps };
 export type { AvatarProps };

package/dist/styles/types.d.ts

@@ -2651,6 +2651,54 @@ export interface Theme {
                 "unset": string;
             };
         };
+        "icon": {
+            "space": {
+                "xs": {
+                    "all": string;
+                };
+                "sm": {
+                    "all": string;
+                };
+                "md": {
+                    "all": string;
+                };
+                "lg": {
+                    "all": string;
+                };
+                "xl": {
+                    "all": string;
+                };
+                "xxl": {
+                    "all": string;
+                };
+            };
+            "color": {
+                "background": {
+                    "default": string;
+                    "success": string;
+                    "neutral": string;
+                    "danger": string;
+                    "info": string;
+                    "warning": string;
+                };
+                "text": {
+                    "default": string;
+                    "success": string;
+                    "neutral": string;
+                    "danger": string;
+                    "info": string;
+                    "warning": string;
+                };
+                "stroke": {
+                    "default": string;
+                    "success": string;
+                    "neutral": string;
+                    "danger": string;
+                    "info": string;
+                    "warning": string;
+                };
+            };
+        };
         "global": {
             "color": {
                 "background": {
@@ -2871,6 +2919,7 @@ export interface Theme {
             "base": string;
         };
         "slate": {
+            "25": string;
             "50": string;
             "100": string;
             "200": string;