@clickhouse/click-ui 0.0.209 → 0.0.211

package/dist/click-ui.bundled.umd.js

@@ -1287,7 +1287,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M21 7v10a4 4 0 0 1-4 4H7a4 4 0 0 1-4-4V7a4 4 0 0 1 4-4h10a4 4 0 0 1 4 4Z", clipRule: "evenodd" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13.75 10.25-6 6" })
   ] });
-  const Bold = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.75 12H13.75C15.683 12 17.25 13.567 17.25 15.5V15.5C17.25 17.433 15.683 19 13.75 19H6.75V5H12.583C14.516 5 16.083 6.567 16.083 8.5V8.5C16.083 10.433 14.516 12 12.583 12", stroke: "#161517", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) });
+  const Bold = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.75 12H13.75C15.683 12 17.25 13.567 17.25 15.5V15.5C17.25 17.433 15.683 19 13.75 19H6.75V5H12.583C14.516 5 16.083 6.567 16.083 8.5V8.5C16.083 10.433 14.516 12 12.583 12", stroke: "#161517", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const Book = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 16.37a6.368 6.368 0 0 0-7.495-1.12c-.684.364-1.509-.085-1.509-.86V5.295c0-.637.294-1.249.812-1.618A6.367 6.367 0 0 1 12 4.364a6.367 6.367 0 0 1 8.191-.687c.518.37.813.981.813 1.618v9.095c0 .775-.826 1.225-1.509.86A6.368 6.368 0 0 0 12 16.37Z", clipRule: "evenodd" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4.505 19.387A6.368 6.368 0 0 1 12 20.507a6.368 6.368 0 0 1 7.495-1.12M12 16.37V4.363" })
@@ -1655,7 +1655,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M10 9.056C9.094 7.818 7.652 7 6 7v0a5 5 0 0 0-5 5v0a5 5 0 0 0 5 5v0a5.299 5.299 0 0 0 4.543-2.572L12 12l1.457-2.428A5.299 5.299 0 0 1 18 7v0a5 5 0 0 1 5 5v0a5 5 0 0 1-5 5v0c-1.652 0-3.094-.818-4-2.056" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m9.93 6.028.521 2.954-2.954.52" })
   ] });
-  const Italic = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.1821 18H5.45508H9.43508L14.5651 6H18.5451H9.81808", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }) });
+  const Italic = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.1821 18H5.45508H9.43508L14.5651 6H18.5451H9.81808", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const Key = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15.0312 9.34226C15.0312 9.13526 14.8633 8.96826 14.6562 8.96826C14.4492 8.96926 14.2812 9.13726 14.2812 9.34426C14.2812 9.55126 14.4492 9.71926 14.6562 9.71826C14.8633 9.71826 15.0312 9.55026 15.0312 9.34326", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12.499 14.7852L11.469 15.8172H9.637V17.2862H8.172V19.1222L6.798 20.5002H3.5V17.1952L9.223 11.4592C8.417 9.36524 8.849 6.90324 10.534 5.21424C12.814 2.92924 16.511 2.92924 18.791 5.21424C21.071 7.49924 21.071 11.2042 18.791 13.4902C17.089 15.1942 14.601 15.6242 12.499 14.7852Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
@@ -1701,20 +1701,20 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ] });
   };
   const ListBulleted = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.99902 6.43673H20.0036", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.0036 12.0002H8.99902", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.99902 17.5632H20.0036", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.49728 5.93652C4.22102 5.93652 3.99707 6.16047 3.99707 6.43673C3.99707 6.71299 4.22102 6.93694 4.49728 6.93694C4.77354 6.93694 4.99749 6.71299 4.99749 6.43673C4.99749 6.16047 4.77354 5.93652 4.49728 5.93652", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.49728 11.5C4.22102 11.5 3.99707 11.724 3.99707 12.0002C3.99707 12.2765 4.22102 12.5004 4.49728 12.5004C4.77354 12.5004 4.99749 12.2765 4.99749 12.0002C4.99749 11.724 4.77354 11.5 4.49728 11.5", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.49728 17.063C4.22102 17.063 3.99707 17.2869 3.99707 17.5632C3.99707 17.8395 4.22102 18.0634 4.49728 18.0634C4.77354 18.0634 4.99749 17.8395 4.99749 17.5632C4.99749 17.2869 4.77354 17.063 4.49728 17.063", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.99902 6.43673H20.0036", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20.0036 12.0002H8.99902", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8.99902 17.5632H20.0036", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.49728 5.93652C4.22102 5.93652 3.99707 6.16047 3.99707 6.43673C3.99707 6.71299 4.22102 6.93694 4.49728 6.93694C4.77354 6.93694 4.99749 6.71299 4.99749 6.43673C4.99749 6.16047 4.77354 5.93652 4.49728 5.93652", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.49728 11.5C4.22102 11.5 3.99707 11.724 3.99707 12.0002C3.99707 12.2765 4.22102 12.5004 4.49728 12.5004C4.77354 12.5004 4.99749 12.2765 4.99749 12.0002C4.99749 11.724 4.77354 11.5 4.49728 11.5", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.49728 17.063C4.22102 17.063 3.99707 17.2869 3.99707 17.5632C3.99707 17.8395 4.22102 18.0634 4.49728 18.0634C4.77354 18.0634 4.99749 17.8395 4.99749 17.5632C4.99749 17.2869 4.77354 17.063 4.49728 17.063", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
   const ListNumbered = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 4H20", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.1504 9H20.0004", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 9H4H5.25V4L4 5.25", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 15H20", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.1504 20H20.0004", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 15H6.5V17L4 18.5V20H6.75", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 4H20", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.1504 9H20.0004", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6.5 9H4H5.25V4L4 5.25", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11 15H20", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M11.1504 20H20.0004", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 15H6.5V17L4 18.5V20H6.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
   const Loading = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M7.625 8.875H4.5V5.75" }),
@@ -1923,6 +1923,17 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "path-17-inside-9_3169_15708", fill: "white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M14.1433 4.71436H13.2861V5.5715H14.1433V4.71436Z" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.2861 4.71436V3.21436H11.7861V4.71436H13.2861ZM14.1433 4.71436H15.6433V3.21436H14.1433V4.71436ZM14.1433 5.5715V7.0715H15.6433V5.5715H14.1433ZM13.2861 5.5715H11.7861V7.0715H13.2861V5.5715ZM13.2861 6.21436H14.1433V3.21436H13.2861V6.21436ZM12.6433 4.71436V5.5715H15.6433V4.71436H12.6433ZM14.1433 4.0715H13.2861V7.0715H14.1433V4.0715ZM14.7861 5.5715V4.71436H11.7861V5.5715H14.7861Z", fill: "#161517", mask: "url(#path-17-inside-9_3169_15708)" })
   ] });
+  const TextSlash = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("g", { "clip-path": "url(#clip0_12066_12491)", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4.5 3.75L19.5 20.25", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18.75H15", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 12V18.75", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 5.25V7.54031", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9.91797 5.25H18.7502V8.25", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5.25 8.25V5.25H5.86406", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_12066_12491", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
+  ] });
   const Trash = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M18 6v12.75c0 1.243-1.027 2.25-2.269 2.25h-7.5A2.233 2.233 0 0 1 6 18.75V6M19.5 6h-15M10 3h4M14 10v7M10 17v-7" }) });
   const TreeStructure = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("g", { clipPath: "url(#clip0_7969_2214)", children: [
@@ -1935,8 +1946,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     /* @__PURE__ */ jsxRuntime.jsx("defs", { children: /* @__PURE__ */ jsxRuntime.jsx("clipPath", { id: "clip0_7969_2214", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
   ] });
   const Underline = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 20H18", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
-    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 4V11C17 13.761 14.761 16 12 16C9.239 16 7 13.761 7 11V4", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 20H18", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M17 4V11C17 13.761 14.761 16 12 16C9.239 16 7 13.761 7 11V4", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
   const Upgrade = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "path-1-inside-1_10418_503", fill: "white", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.1664 17.8179H7.83984V18.8864H16.1664V17.8179Z" }) }),
@@ -2107,6 +2118,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     support: Support,
     table: Table$1,
     taxi: Taxi,
+    "text-slash": TextSlash,
     trash: Trash,
     "tree-structure": TreeStructure,
     underline: Underline,
@@ -8963,6 +8975,80 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   const PopoverArrow = (props) => {
     return /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "10", viewBox: "0 0 30 10", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M0 -1L15 9L30 -1", strokeWidth: "1.5", strokeLinejoin: "round" }) });
   };
+  const _Container = ({
+    component,
+    alignItems,
+    children,
+    fillWidth = true,
+    gap = "none",
+    grow,
+    shrink,
+    isResponsive,
+    justifyContent = "start",
+    maxWidth,
+    minWidth,
+    orientation = "horizontal",
+    padding = "none",
+    wrap = "nowrap",
+    fillHeight,
+    maxHeight,
+    minHeight,
+    overflow,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$d, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
+  };
+  const Wrapper$d = pt.div.withConfig({
+    componentId: "sc-bcplth-0"
+  })(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
+    $grow,
+    $shrink
+  }) => `
+    ${$grow && `flex: ${$grow}`};
+    ${$shrink && `flex-shrink: ${$shrink}`};
+  `, ({
+    $fillHeight,
+    $maxHeight,
+    $minHeight
+  }) => `
+    ${$fillHeight && "height: 100%"};
+    ${$maxHeight && `max-height: ${$maxHeight}`};
+    ${$minHeight && `min-height: ${$minHeight}`};
+  `, ({
+    $overflow
+  }) => `
+    ${$overflow && `overflow: ${$overflow}`};
+  `, ({
+    $wrap = "nowrap"
+  }) => $wrap, ({
+    theme: theme2,
+    $gapSize
+  }) => theme2.click.container.gap[$gapSize], ({
+    $maxWidth
+  }) => $maxWidth ?? "none", ({
+    $minWidth
+  }) => $minWidth ?? "auto", ({
+    theme: theme2,
+    $paddingSize
+  }) => theme2.click.container.space[$paddingSize], ({
+    $fillWidth = true
+  }) => $fillWidth === true ? "100%" : "auto", ({
+    $orientation = "horizontal"
+  }) => $orientation === "horizontal" ? "row" : "column", ({
+    $alignItems = "center"
+  }) => $alignItems, ({
+    $justifyContent = "left"
+  }) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.md, ({
+    $isResponsive = true,
+    $fillWidth = true
+  }) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
+    $isResponsive = true
+  }) => $isResponsive === true ? "none" : "auto", ({
+    $isResponsive = true
+  }) => $isResponsive === true ? "column" : "auto");
+  const Container = React.forwardRef(_Container);
   const mergeRefs = (refs) => (value) => {
     refs.forEach((ref) => {
       if (typeof ref === "function") {
@@ -8986,14 +9072,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     }]), ...props });
   };
   const EllipsisContent = React.forwardRef(_EllipsisContent);
-  const LabelContainer$1 = pt.div.withConfig({
-    componentId: "sc-1likhxd-0"
-  })(["display:grid;grid-template-columns:", ";align-items:center;justify-content:flex-start;width:100%;width:-webkit-fill-available;width:fill-available;width:stretch;gap:", ";"], ({
-    $hasIcon,
-    $iconDir
-  }) => `${$hasIcon && $iconDir === "start" ? "auto " : ""}1fr${$hasIcon && $iconDir === "end" ? " auto" : ""}`, ({
-    theme: theme2
-  }) => theme2.click.sidebar.navigation.item.default.space.gap);
   const IconWrapper$3 = ({
     icon,
     iconDir = "start",
@@ -9002,10 +9080,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     height,
     children,
     ellipsisContent = true,
+    gap = "sm",
     ...props
   }) => {
     const TextWrapper2 = ellipsisContent ? EllipsisContent : "div";
-    return /* @__PURE__ */ jsxRuntime.jsxs(LabelContainer$1, { $hasIcon: typeof icon === "string", $iconDir: iconDir, ...props, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap, ...props, children: [
       icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: size2, width, height }),
       /* @__PURE__ */ jsxRuntime.jsx(TextWrapper2, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-icon-wrapper-text`, children }),
       icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: size2, width, height })
@@ -9564,7 +9643,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     ...delegated
   }) => {
     const [isVisible, setIsVisible] = React.useState(true);
-    return isVisible ? /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$d, { $size: size2, $state: state, $type: type, "data-testid": "click-alert", ...delegated, children: [
+    return isVisible ? /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$c, { $size: size2, $state: state, $type: type, "data-testid": "click-alert", ...delegated, children: [
       dismissible && type === "banner" && /* @__PURE__ */ jsxRuntime.jsx(DismissWrapper$1, {}),
       showIcon && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$2, { $state: state, $size: size2, $type: type, children: /* @__PURE__ */ jsxRuntime.jsx(StyledIcon, { $size: size2, size: "sm", "aria-hidden": true, name: customIcon || stateIconMap[state] }) }),
       /* @__PURE__ */ jsxRuntime.jsxs(TextWrapper, { $state: state, $size: size2, children: [
@@ -9574,7 +9653,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       dismissible && /* @__PURE__ */ jsxRuntime.jsx(DismissWrapper$1, { "data-testid": "click-alert-dismiss-button", onClick: () => setIsVisible(false), children: /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: "cross", "aria-label": "close" }) })
     ] }) : null;
   };
-  const Wrapper$d = pt.div.withConfig({
+  const Wrapper$c = pt.div.withConfig({
     componentId: "sc-1wvczk0-0"
   })(["display:flex;border-radius:", ";justify-content:", ";overflow:hidden;background-color:", ";color:", ";width:100%;"], ({
     $type,
@@ -10428,7 +10507,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       font: ${theme2.click.avatar.typography.label[$textSize].hover};
       }
   `);
-  const Wrapper$c = pt.div.withConfig({
+  const Wrapper$b = pt.div.withConfig({
     componentId: "sc-471xo0-0"
   })(["display:inline-flex;", ""], ({
     $state = "default",
@@ -10485,7 +10564,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     onClose,
     ellipsisContent = true,
     ...props
-  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$c, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content$4, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, children: [
+  }) => /* @__PURE__ */ jsxRuntime.jsx(Wrapper$b, { $state: state, $size: size2, $type: type, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(Content$4, { "data-testid": `${ellipsisContent ? "ellipsed" : "normal"}-badge-content`, children: [
     /* @__PURE__ */ jsxRuntime.jsx(BadgeContent, { as: IconWrapper$3, icon, iconDir, size: size2, $state: state, ellipsisContent, children: text2 }),
     dismissible && /* @__PURE__ */ jsxRuntime.jsx(SvgContainer, { name: "cross", $state: state, as: SvgImage, onClick: onClose, "aria-label": "close" })
   ] }) });
@@ -10500,11 +10579,11 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     state = "default",
     title = "Title",
     ...props
-  }) => /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$b, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
+  }) => /* @__PURE__ */ jsxRuntime.jsxs(Wrapper$a, { $height: height, $order: order, $size: size2, $spacing: spacing, $state: state, $fillWidth: fillWidth, $maxWidth: maxWidth, ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Label, { $state: state, $size: size2, children: label }),
     /* @__PURE__ */ jsxRuntime.jsx(Title$3, { $state: state, $size: size2, children: title })
   ] });
-  const Wrapper$b = pt.div.withConfig({
+  const Wrapper$a = pt.div.withConfig({
     componentId: "sc-u5029o-0"
   })(["display:flex;justify-content:center;box-sizing:border-box;", ""], ({
     $fillWidth = false,
@@ -10731,7 +10810,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   })(["display:flex;flex-direction:column;align-self:start;gap:", ";flex:1;width:100%;"], ({
     theme: theme2
   }) => theme2.click.card.horizontal.space.gap);
-  const Wrapper$a = pt.div.withConfig({
+  const Wrapper$9 = pt.div.withConfig({
     componentId: "sc-1qnbjoa-2"
   })(["display:inline-flex;width:100%;max-width:100%;align-items:center;justify-content:flex-start;", ""], ({
     theme: theme2,
@@ -10837,7 +10916,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
         window.open(infoUrl, "_blank");
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$a, { $disabled: disabled, $isSelected: isSelected, $isSelectable: isSelectable, $color: color, tabIndex: 0, onClick: handleClick, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$9, { $disabled: disabled, $isSelected: isSelected, $isSelectable: isSelectable, $color: color, tabIndex: 0, onClick: handleClick, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs(ContentWrapper, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(IconTextContentWrapper, { children: [
         icon && /* @__PURE__ */ jsxRuntime.jsx(CardIcon$1, { name: icon, "aria-hidden": true }),
         /* @__PURE__ */ jsxRuntime.jsxs(Container, { padding: "none", orientation: "vertical", children: [
@@ -10905,80 +10984,6 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => $fillWidth && "width: 100%");
   _Text.displayName = "Text";
   const Text = React.forwardRef(_Text);
-  const _Container = ({
-    component,
-    alignItems,
-    children,
-    fillWidth = true,
-    gap = "none",
-    grow,
-    shrink,
-    isResponsive,
-    justifyContent = "start",
-    maxWidth,
-    minWidth,
-    orientation = "horizontal",
-    padding = "none",
-    wrap = "nowrap",
-    fillHeight,
-    maxHeight,
-    minHeight,
-    overflow,
-    ...props
-  }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx(Wrapper$9, { ref, as: component ?? "div", $alignItems: alignItems ?? (orientation === "vertical" ? "start" : "center"), $fillWidth: fillWidth, $gapSize: gap, $grow: grow, $shrink: shrink, $isResponsive: isResponsive, $justifyContent: justifyContent, $maxWidth: maxWidth, $minWidth: minWidth, $orientation: orientation, $paddingSize: padding, $wrap: wrap, $fillHeight: fillHeight, $maxHeight: maxHeight, $minHeight: minHeight, $overflow: overflow, "data-testid": "container", ...props, children });
-  };
-  const Wrapper$9 = pt.div.withConfig({
-    componentId: "sc-bcplth-0"
-  })(["display:flex;", " ", " ", " flex-wrap:", ";gap:", ";max-width:", ";min-width:", ";padding:", ";width:", ";flex-direction:", ";align-items:", ";justify-content:", ";@media (max-width:", "){width:", ";max-width:", ";flex-direction:", ";}"], ({
-    $grow,
-    $shrink
-  }) => `
-    ${$grow && `flex: ${$grow}`};
-    ${$shrink && `flex-shrink: ${$shrink}`};
-  `, ({
-    $fillHeight,
-    $maxHeight,
-    $minHeight
-  }) => `
-    ${$fillHeight && "height: 100%"};
-    ${$maxHeight && `max-height: ${$maxHeight}`};
-    ${$minHeight && `min-height: ${$minHeight}`};
-  `, ({
-    $overflow
-  }) => `
-    ${$overflow && `overflow: ${$overflow}`};
-  `, ({
-    $wrap = "nowrap"
-  }) => $wrap, ({
-    theme: theme2,
-    $gapSize
-  }) => theme2.click.container.gap[$gapSize], ({
-    $maxWidth
-  }) => $maxWidth ?? "none", ({
-    $minWidth
-  }) => $minWidth ?? "auto", ({
-    theme: theme2,
-    $paddingSize
-  }) => theme2.click.container.space[$paddingSize], ({
-    $fillWidth = true
-  }) => $fillWidth === true ? "100%" : "auto", ({
-    $orientation = "horizontal"
-  }) => $orientation === "horizontal" ? "row" : "column", ({
-    $alignItems = "center"
-  }) => $alignItems, ({
-    $justifyContent = "left"
-  }) => $justifyContent === "start" ? "start" : `${$justifyContent}`, ({
-    theme: theme2
-  }) => theme2.breakpoint.sizes.md, ({
-    $isResponsive = true,
-    $fillWidth = true
-  }) => $isResponsive === true ? "100%" : $fillWidth === true ? "100%" : "auto", ({
-    $isResponsive = true
-  }) => $isResponsive === true ? "none" : "auto", ({
-    $isResponsive = true
-  }) => $isResponsive === true ? "column" : "auto");
-  const Container = React.forwardRef(_Container);
   const TopBadgeWrapper = pt(Container).withConfig({
     componentId: "sc-1d5pqpo-0"
   })(["position:relative;"]);
@@ -35850,6 +35855,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     color: ${theme2.click.genericMenu.button.color.label.default};
     cursor: ${$clickable ? "pointer" : "default"}
   `);
+  const SelectItemDescriptionText = pt.div.withConfig({
+    componentId: "sc-oudbwg-14"
+  })(["white-space:normal;[data-disabled] &,[disabled] &{color:inherit;}", " &{display:none;}"], StyledSelectTrigger);
   const OptionContext = React.createContext({
     search: "",
     selectedValues: [],
@@ -39135,7 +39143,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       children,
       label
     } = valueNode ?? {};
-    return /* @__PURE__ */ jsxRuntime.jsx(SelectValueContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, children: label ?? children ?? value }) });
+    return /* @__PURE__ */ jsxRuntime.jsx(SelectValueContainer, { children: /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ?? children ?? value }) });
   };
   const useOption = () => {
     const result = React.useContext(OptionContext);
@@ -39394,14 +39402,11 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
                   options: itemList = [],
                   ...groupProps
                 } = props2;
-                return /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { ...groupProps, children: itemList.map(({
-                  label: label2,
-                  ...itemProps
-                }, itemIndex) => {
+                return /* @__PURE__ */ jsxRuntime.jsx(SelectGroup, { ...groupProps, children: itemList.map((itemProps, itemIndex) => {
                   if (checkbox) {
-                    return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectCheckboxItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                    return /* @__PURE__ */ jsxRuntime.jsx(MultiSelectCheckboxItem, { ...itemProps }, `select-${id}-group-${index2}-item-${itemIndex}`);
                   }
-                  return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { ...itemProps, children: label2 }, `select-${id}-group-${index2}-item-${itemIndex}`);
+                  return /* @__PURE__ */ jsxRuntime.jsx(SelectItem, { ...itemProps }, `select-${id}-group-${index2}-item-${itemIndex}`);
                 }) }, `select-${id}-group-${index2}`);
               } else {
                 if (checkbox) {
@@ -39448,6 +39453,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     disabled = false,
     children,
     label,
+    description,
     separator,
     onSelect: onSelectProp,
     value = "",
@@ -39485,7 +39491,10 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     const isChecked = selectedValues.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, ref: forwardedRef, "data-state": isChecked ? "checked" : "unchecked", "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "cui-select-item": "", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, children: label ?? children }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          label,
+          description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
+        ] }) : children }),
         /* @__PURE__ */ jsxRuntime.jsx(CheckIcon$1, { as: SvgImage, name: "check", size: "sm", $showCheck: isChecked })
       ] }),
       separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
@@ -39498,6 +39507,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     icon,
     iconDir = "end",
     label,
+    description,
     onMouseOver: onMouseOverProp,
     onSelect: onSelectProp,
     separator,
@@ -39512,7 +39522,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       selectedValues,
       onSelect
     } = useOption();
-    const handleSelect = (evt) => {
+    const handleMenuItemClick = (evt) => {
       if (!disabled) {
         onSelect(value, void 0, evt);
         if (typeof onSelectProp === "function") {
@@ -39520,15 +39530,6 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         }
       }
     };
-    const handleMenuItemClick = (evt) => {
-      if (evt.target !== evt.currentTarget) {
-        return;
-      }
-      handleSelect(evt);
-    };
-    const handleCheckboxClick = (evt) => {
-      handleSelect(evt);
-    };
     const handleMenuItemMouseOver = (e) => {
       if (onMouseOverProp) {
         onMouseOverProp(e);
@@ -39542,27 +39543,24 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
     }
     const isChecked = selectedValues.includes(value);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: [
-        icon && iconDir === "start" && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-          display: "flex",
-          justifyContent: "center"
-        }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: "sm" }),
-          label
-        ] }) : /* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
-          display: "flex",
-          justifyContent: "center"
-        }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: "sm" }),
-          children
-        ] }), onClick: handleCheckboxClick, variant: variant ?? "default" }),
-        icon && iconDir === "end" && /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" }) }),
-        !icon && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" })
-      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(GenericMenuItem, { ...props, "data-value": value, onClick: handleMenuItemClick, onMouseOver: handleMenuItemMouseOver, ref: forwardedRef, "data-disabled": disabled ? true : void 0, "data-highlighted": highlighted == value ? "true" : void 0, "data-testid": `multi-select-checkbox-${value}`, "cui-select-item": "", children: /* @__PURE__ */ jsxRuntime.jsxs(Container, { orientation: "horizontal", gap: "xs", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, variant: variant ?? "default" }),
+        /* @__PURE__ */ jsxRuntime.jsx(IconWrapper$3, { icon, iconDir, gap: "xxs", children: label ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          label,
+          description && /* @__PURE__ */ jsxRuntime.jsx(SelectItemDescription, { children: description })
+        ] }) : children })
+      ] }) }),
       separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
   });
   MultiSelectCheckboxItem.displayName = "Select.Item";
+  const SelectItemDescription = React.forwardRef(({
+    children,
+    ...props
+  }) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Text, { component: SelectItemDescriptionText, color: "muted", ...props, children });
+  });
+  SelectItemDescription.displayName = "Select.ItemDescription";
   const Select = ({
     value: valueProp,
     defaultValue,
@@ -39610,6 +39608,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
   };
   Select.Group = SelectGroup;
   Select.Item = SelectItem;
+  Select.ItemDescription = SelectItemDescription;
   const MultiSelect = ({
     value: valueProp,
     defaultValue,
@@ -39655,6 +39654,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
   };
   MultiSelect.Group = SelectGroup;
   MultiSelect.Item = SelectItem;
+  MultiSelect.ItemDescription = SelectItemDescription;
   const CheckboxMultiSelect = ({
     value: valueProp,
     defaultValue,
@@ -39701,6 +39701,7 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
   };
   CheckboxMultiSelect.Group = SelectGroup;
   CheckboxMultiSelect.Item = MultiSelectCheckboxItem;
+  CheckboxMultiSelect.ItemDescription = SelectItemDescription;
   const $89eedd556c436f6a$var$DEFAULT_ORIENTATION = "horizontal";
   const $89eedd556c436f6a$var$ORIENTATIONS = [
     "horizontal",
@@ -42433,7 +42434,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   `);
   const ToastDescriptionContainer = pt.div.withConfig({
     componentId: "sc-tmc8vl-3"
-  })(["display:flex;justify-content:space-between;width:100%;align-items:flex-end;gap:inherit;", ""], ({
+  })(["display:flex;flex-direction:column;justify-content:space-between;width:100%;align-items:flex-end;gap:inherit;", ""], ({
     theme: theme2
   }) => `
     font: ${theme2.click.toast.typography.title.default};
@@ -42477,7 +42478,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         actions.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(ToastDescriptionContent, { children: actions.map(({
           altText,
           ...btnProps
-        }) => /* @__PURE__ */ jsxRuntime.jsx($054eb8030ebde76e$export$e19cd5f9376f8cee, { altText, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...btnProps }) })) })
+        }) => /* @__PURE__ */ jsxRuntime.jsx($054eb8030ebde76e$export$e19cd5f9376f8cee, { altText, asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Button, { ...btnProps }) }) }, altText)) })
       ] })
     ] });
   };
@@ -42502,13 +42503,21 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     align = "end",
     ...props
   }) => {
-    const [toasts, setToasts] = React.useState(/* @__PURE__ */ new Map());
+    const [toasts, setToasts] = React.useState({
+      start: /* @__PURE__ */ new Map(),
+      end: /* @__PURE__ */ new Map()
+    });
     React.useEffect(() => {
       const listener = (toast) => {
         setToasts((currentToasts) => {
-          const newMap = new Map(currentToasts);
-          newMap.set((toast == null ? void 0 : toast.id) ?? String(Date.now()), toast);
-          return newMap;
+          const alignment = toast.align ?? "end";
+          const newToasts = {
+            ...currentToasts
+          };
+          const map2 = new Map(newToasts[alignment]);
+          map2.set((toast == null ? void 0 : toast.id) ?? String(Date.now()), toast);
+          newToasts[alignment] = map2;
+          return newToasts;
         });
       };
       toastsEventEmitter.on(listener);
@@ -42517,28 +42526,36 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
     const onClose = (id) => (open2) => {
       if (!open2) {
         setToasts((currentToasts) => {
-          const newMap = new Map(currentToasts);
-          newMap.delete(id);
-          return newMap;
+          const newToasts = {
+            ...currentToasts
+          };
+          const map2 = new Map(newToasts[align]);
+          map2.delete(id);
+          newToasts[align] = map2;
+          return newToasts;
         });
       }
     };
     const value = {
-      createToast: (toast) => {
+      createToast: (toast, toastAlign = align) => {
         setToasts((currentToasts) => {
-          const newMap = new Map(currentToasts);
-          newMap.set((toast == null ? void 0 : toast.id) ?? String(Date.now()), toast);
-          return newMap;
+          const newToasts = {
+            ...currentToasts
+          };
+          const map2 = new Map(newToasts[toastAlign]);
+          map2.set((toast == null ? void 0 : toast.id) ?? String(Date.now()), toast);
+          newToasts[toastAlign] = map2;
+          return newToasts;
         });
       }
     };
     return /* @__PURE__ */ jsxRuntime.jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value, children: [
         children,
-        Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onClose: onClose(id) }, id))
+        Array.from(toasts[align]).map(([id, toast]) => /* @__PURE__ */ jsxRuntime.jsx(Toast, { ...toast, onClose: onClose(id) }, id))
       ] }),
       /* @__PURE__ */ jsxRuntime.jsx(Viewport, { $align: align })
-    ] });
+    ] }, `toast-provider-${align}`);
   };
   function listCacheClear$1() {
     this.__data__ = [];
@@ -52070,6 +52087,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.TextAreaField = TextAreaField;
   exports2.TextField = TextField;
   exports2.Title = Title$2;
+  exports2.Toast = Toast;
   exports2.ToastProvider = ToastProvider;
   exports2.Tooltip = Tooltip;
   exports2.VerticalStepper = VerticalStepper;