npm - @clickhouse/click-ui - Versions diffs - 0.0.207 → 0.0.209 - Mend

@clickhouse/click-ui 0.0.207 → 0.0.209

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (15) hide show

package/dist/click-ui.bundled.es.js +65 -19
package/dist/click-ui.bundled.umd.js +65 -19
package/dist/click-ui.es.js +65 -19
package/dist/click-ui.umd.js +65 -19
package/dist/components/ClickUIProvider/ClickUIProvider.d.ts +2 -2
package/dist/components/Icon/IconCommon.d.ts +5 -0
package/dist/components/Icon/types.d.ts +1 -1
package/dist/components/Toast/Toast.d.ts +4 -1
package/dist/components/icons/Bold.d.ts +4 -0
package/dist/components/icons/Italic.d.ts +4 -0
package/dist/components/icons/ListBulleted.d.ts +4 -0
package/dist/components/icons/ListNumbered.d.ts +4 -0
package/dist/components/icons/Underline.d.ts +4 -0
package/dist/components/index.d.ts +1 -0
package/package.json +1 -1

package/dist/click-ui.bundled.es.js CHANGED Viewed

@@ -1271,6 +1271,7 @@ const Blog = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/
   /* @__PURE__ */ 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__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13.75 10.25-6 6" })
 ] });
+const Bold = (props) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ 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 Book = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ 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__ */ 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" })
@@ -1638,6 +1639,7 @@ const Integrations = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www
   /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ 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 Key = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ 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__ */ 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" })
@@ -1682,6 +1684,22 @@ const LineInCircle = (props) => {
     /* @__PURE__ */ jsx("path", { d: "M8 16L16 8", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 };
+const ListBulleted = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M8.99902 6.43673H20.0036", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M20.0036 12.0002H8.99902", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.99902 17.5632H20.0036", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ 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__ */ 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__ */ 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" })
+] });
+const ListNumbered = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 4H20", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11.1504 9H20.0004", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M6.5 9H4H5.25V4L4 5.25", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 15H20", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11.1504 20H20.0004", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 15H6.5V17L4 18.5V20H6.75", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
 const Loading = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M7.625 8.875H4.5V5.75" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.5 12A7.495 7.495 0 0 0 5.188 8.875" }),
@@ -1900,6 +1918,10 @@ const TreeStructure = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", heig
   ] }),
   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_7969_2214", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
 ] });
+const Underline = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 20H18", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ 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" })
+] });
 const Upgrade = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_10418_503", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M16.1664 17.8179H7.83984V18.8864H16.1664V17.8179Z" }) }),
   /* @__PURE__ */ jsx("path", { d: "M7.83984 17.8179V16.5322H6.55413V17.8179H7.83984ZM16.1664 17.8179H17.4521V16.5322H16.1664V17.8179ZM16.1664 18.8864V20.1721H17.4521V18.8864H16.1664ZM7.83984 18.8864H6.55413V20.1721H7.83984V18.8864ZM7.83984 19.1036H16.1664V16.5322H7.83984V19.1036ZM14.8807 17.8179V18.8864H17.4521V17.8179H14.8807ZM16.1664 17.6007H7.83984V20.1721H16.1664V17.6007ZM9.12556 18.8864V17.8179H6.55413V18.8864H9.12556Z", fill: "white", mask: "url(#path-1-inside-1_10418_503)" }),
@@ -1939,6 +1961,7 @@ const ICONS_MAP = {
   bell: Bell,
   beta: Beta,
   blog: Blog,
+  bold: Bold,
   book: Book,
   brackets: Brackets,
   briefcase: Briefcase,
@@ -2013,6 +2036,7 @@ const ICONS_MAP = {
   information: InformationIcon,
   "insert-row": InsertRowIcon,
   integrations: Integrations,
+  italic: Italic,
   key: Key,
   keys: Keys,
   lifebuoy: Lifebuoy,
@@ -2020,6 +2044,8 @@ const ICONS_MAP = {
   "light-bulb-on": LightBulbOn,
   lightening: Lightening,
   "line-in-circle": LineInCircle,
+  "list-bulleted": ListBulleted,
+  "list-numbered": ListNumbered,
   loading: LoadingFlipped,
   "loading-animated": LoadingAnimated,
   lock: Lock,
@@ -2067,6 +2093,7 @@ const ICONS_MAP = {
   taxi: Taxi,
   trash: Trash,
   "tree-structure": TreeStructure,
+  underline: Underline,
   upgrade: Upgrade,
   upload: Upload,
   url: Url,
@@ -15504,7 +15531,9 @@ const CodeBlock = ({
 };
 const ActionsWrapper = pt.div.withConfig({
   componentId: "sc-6eozxy-0"
-})(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+})(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.sm);
 const DialogContent$1 = pt.div.withConfig({
   componentId: "sc-6eozxy-1"
 })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -17669,19 +17698,19 @@ const DialogOverlay = pt($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff).withConfig({
 }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
 const ContentArea = pt($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
   componentId: "sc-1wr6otn-2"
-})(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+})(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
   theme: theme2
 }) => theme2.click.dialog.color.background.default, ({
   theme: theme2
 }) => theme2.click.dialog.radii.all, ({
   theme: theme2
-}) => theme2.click.dialog.space.y, ({
-  theme: theme2
-}) => theme2.click.dialog.space.x, ({
+}) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
   theme: theme2
 }) => theme2.click.dialog.shadow.default, ({
   theme: theme2
-}) => theme2.click.global.color.stroke.default, contentShow);
+}) => theme2.click.global.color.stroke.default, contentShow, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.sm);
 const TitleArea = pt.div.withConfig({
   componentId: "sc-1wr6otn-3"
 })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -39467,15 +39496,24 @@ const MultiSelectCheckboxItem = forwardRef(({
     selectedValues,
     onSelect
   } = useOption();
-  const onSelectValue = (evt) => {
+  const handleSelect = (evt) => {
     if (!disabled) {
       onSelect(value, void 0, evt);
-      if (typeof onSelectProp == "function") {
+      if (typeof onSelectProp === "function") {
         onSelectProp(value, void 0, evt);
       }
     }
   };
-  const onMouseOver = (e) => {
+  const handleMenuItemClick = (evt) => {
+    if (evt.target !== evt.currentTarget) {
+      return;
+    }
+    handleSelect(evt);
+  };
+  const handleCheckboxClick = (evt) => {
+    handleSelect(evt);
+  };
+  const handleMenuItemMouseOver = (e) => {
     if (onMouseOverProp) {
       onMouseOverProp(e);
     }
@@ -39487,11 +39525,8 @@ const MultiSelectCheckboxItem = forwardRef(({
     return null;
   }
   const isChecked = selectedValues.includes(value);
-  const onChange = () => {
-    onSelect(value);
-  };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, 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__ */ 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__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxs("div", { style: {
         display: "flex",
         justifyContent: "center"
@@ -39504,9 +39539,9 @@ const MultiSelectCheckboxItem = forwardRef(({
       }, children: [
         /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }),
         children
-      ] }), onClick: onChange, variant: variant ?? "default" }),
-      icon && iconDir === "end" && /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange, variant: variant ?? "default" }) }),
-      !icon && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange, variant: variant ?? "default" })
+      ] }), onClick: handleCheckboxClick, variant: variant ?? "default" }),
+      icon && iconDir === "end" && /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" }) }),
+      !icon && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" })
     ] }),
     separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });
@@ -42432,13 +42467,23 @@ const Toast = ({
 };
 const Viewport = pt($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
   componentId: "sc-tmc8vl-6"
-})(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+})(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  $align
+}) => {
+  if ($align === "start") {
+    return "left: 0";
+  }
+  return `
+      right: 0;
+  `;
+}, ({
   theme: theme2
 }) => theme2.click.toast.space.gap, ({
   theme: theme2
 }) => theme2.click.toast.size.width);
 const ToastProvider = ({
   children,
+  align = "end",
   ...props
 }) => {
   const [toasts, setToasts] = useState(/* @__PURE__ */ new Map());
@@ -42471,12 +42516,12 @@ const ToastProvider = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
     /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
       children,
       Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsx(Toast, { ...toast, onClose: onClose(id) }, id))
     ] }),
-    /* @__PURE__ */ jsx(Viewport, {})
+    /* @__PURE__ */ jsx(Viewport, { $align: align })
   ] });
 };
 function listCacheClear$1() {
@@ -52010,6 +52055,7 @@ export {
   TextAreaField,
   TextField,
   Title$2 as Title,
+  ToastProvider,
   Tooltip,
   VerticalStepper,
   WarningAlert,

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

@@ -1287,6 +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 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" })
@@ -1654,6 +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 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" })
@@ -1698,6 +1700,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16L16 8", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
     ] });
   };
+  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" })
+  ] });
+  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" })
+  ] });
   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" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.5 12A7.495 7.495 0 0 0 5.188 8.875" }),
@@ -1916,6 +1934,10 @@ 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" })
+  ] });
   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" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.83984 17.8179V16.5322H6.55413V17.8179H7.83984ZM16.1664 17.8179H17.4521V16.5322H16.1664V17.8179ZM16.1664 18.8864V20.1721H17.4521V18.8864H16.1664ZM7.83984 18.8864H6.55413V20.1721H7.83984V18.8864ZM7.83984 19.1036H16.1664V16.5322H7.83984V19.1036ZM14.8807 17.8179V18.8864H17.4521V17.8179H14.8807ZM16.1664 17.6007H7.83984V20.1721H16.1664V17.6007ZM9.12556 18.8864V17.8179H6.55413V18.8864H9.12556Z", fill: "white", mask: "url(#path-1-inside-1_10418_503)" }),
@@ -1955,6 +1977,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     bell: Bell,
     beta: Beta,
     blog: Blog,
+    bold: Bold,
     book: Book,
     brackets: Brackets,
     briefcase: Briefcase,
@@ -2029,6 +2052,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     information: InformationIcon,
     "insert-row": InsertRowIcon,
     integrations: Integrations,
+    italic: Italic,
     key: Key,
     keys: Keys,
     lifebuoy: Lifebuoy,
@@ -2036,6 +2060,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     "light-bulb-on": LightBulbOn,
     lightening: Lightening,
     "line-in-circle": LineInCircle,
+    "list-bulleted": ListBulleted,
+    "list-numbered": ListNumbered,
     loading: LoadingFlipped,
     "loading-animated": LoadingAnimated,
     lock: Lock,
@@ -2083,6 +2109,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     taxi: Taxi,
     trash: Trash,
     "tree-structure": TreeStructure,
+    underline: Underline,
     upgrade: Upgrade,
     upload: Upload,
     url: Url,
@@ -15520,7 +15547,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const ActionsWrapper = pt.div.withConfig({
     componentId: "sc-6eozxy-0"
-  })(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+  })(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const DialogContent$1 = pt.div.withConfig({
     componentId: "sc-6eozxy-1"
   })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -17685,19 +17714,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
   const ContentArea = pt($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1wr6otn-2"
-  })(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+  })(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
     theme: theme2
   }) => theme2.click.dialog.color.background.default, ({
     theme: theme2
   }) => theme2.click.dialog.radii.all, ({
     theme: theme2
-  }) => theme2.click.dialog.space.y, ({
-    theme: theme2
-  }) => theme2.click.dialog.space.x, ({
+  }) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
     theme: theme2
   }) => theme2.click.dialog.shadow.default, ({
     theme: theme2
-  }) => theme2.click.global.color.stroke.default, contentShow);
+  }) => theme2.click.global.color.stroke.default, contentShow, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const TitleArea = pt.div.withConfig({
     componentId: "sc-1wr6otn-3"
   })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -39483,15 +39512,24 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       selectedValues,
       onSelect
     } = useOption();
-    const onSelectValue = (evt) => {
+    const handleSelect = (evt) => {
       if (!disabled) {
         onSelect(value, void 0, evt);
-        if (typeof onSelectProp == "function") {
+        if (typeof onSelectProp === "function") {
           onSelectProp(value, void 0, evt);
         }
       }
     };
-    const onMouseOver = (e) => {
+    const handleMenuItemClick = (evt) => {
+      if (evt.target !== evt.currentTarget) {
+        return;
+      }
+      handleSelect(evt);
+    };
+    const handleCheckboxClick = (evt) => {
+      handleSelect(evt);
+    };
+    const handleMenuItemMouseOver = (e) => {
       if (onMouseOverProp) {
         onMouseOverProp(e);
       }
@@ -39503,11 +39541,8 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       return null;
     }
     const isChecked = selectedValues.includes(value);
-    const onChange = () => {
-      onSelect(value);
-    };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, 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(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"
@@ -39520,9 +39555,9 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: "sm" }),
           children
-        ] }), onClick: onChange, 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: onChange, variant: variant ?? "default" }) }),
-        !icon && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange, variant: variant ?? "default" })
+        ] }), 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" })
       ] }),
       separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
@@ -42448,13 +42483,23 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   const Viewport = pt($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
     componentId: "sc-tmc8vl-6"
-  })(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  })(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+    $align
+  }) => {
+    if ($align === "start") {
+      return "left: 0";
+    }
+    return `
+      right: 0;
+  `;
+  }, ({
     theme: theme2
   }) => theme2.click.toast.space.gap, ({
     theme: theme2
   }) => theme2.click.toast.size.width);
   const ToastProvider = ({
     children,
+    align = "end",
     ...props
   }) => {
     const [toasts, setToasts] = React.useState(/* @__PURE__ */ new Map());
@@ -42487,12 +42532,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         });
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+    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))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Viewport, {})
+      /* @__PURE__ */ jsxRuntime.jsx(Viewport, { $align: align })
     ] });
   };
   function listCacheClear$1() {
@@ -52025,6 +52070,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.TextAreaField = TextAreaField;
   exports2.TextField = TextField;
   exports2.Title = Title$2;
+  exports2.ToastProvider = ToastProvider;
   exports2.Tooltip = Tooltip;
   exports2.VerticalStepper = VerticalStepper;
   exports2.WarningAlert = WarningAlert;

package/dist/click-ui.es.js CHANGED Viewed

@@ -75,6 +75,7 @@ const Blog = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/
   /* @__PURE__ */ 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__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m13.75 10.25-6 6" })
 ] });
+const Bold = (props) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ 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 Book = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ 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__ */ 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" })
@@ -442,6 +443,7 @@ const Integrations = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www
   /* @__PURE__ */ 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__ */ 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__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ 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 Key = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ 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__ */ 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" })
@@ -486,6 +488,22 @@ const LineInCircle = (props) => {
     /* @__PURE__ */ jsx("path", { d: "M8 16L16 8", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 };
+const ListBulleted = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M8.99902 6.43673H20.0036", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M20.0036 12.0002H8.99902", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M8.99902 17.5632H20.0036", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ 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__ */ 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__ */ 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" })
+] });
+const ListNumbered = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M11 4H20", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11.1504 9H20.0004", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M6.5 9H4H5.25V4L4 5.25", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11 15H20", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M11.1504 20H20.0004", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ jsx("path", { d: "M4 15H6.5V17L4 18.5V20H6.75", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })
+] });
 const Loading = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.25, d: "M7.625 8.875H4.5V5.75" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.5 12A7.495 7.495 0 0 0 5.188 8.875" }),
@@ -704,6 +722,10 @@ const TreeStructure = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", heig
   ] }),
   /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", { id: "clip0_7969_2214", children: /* @__PURE__ */ jsx("rect", { width: "24", height: "24", fill: "white" }) }) })
 ] });
+const Underline = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M6 20H18", stroke: "#161517", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }),
+  /* @__PURE__ */ 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" })
+] });
 const Upgrade = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
   /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_10418_503", fill: "white", children: /* @__PURE__ */ jsx("path", { d: "M16.1664 17.8179H7.83984V18.8864H16.1664V17.8179Z" }) }),
   /* @__PURE__ */ jsx("path", { d: "M7.83984 17.8179V16.5322H6.55413V17.8179H7.83984ZM16.1664 17.8179H17.4521V16.5322H16.1664V17.8179ZM16.1664 18.8864V20.1721H17.4521V18.8864H16.1664ZM7.83984 18.8864H6.55413V20.1721H7.83984V18.8864ZM7.83984 19.1036H16.1664V16.5322H7.83984V19.1036ZM14.8807 17.8179V18.8864H17.4521V17.8179H14.8807ZM16.1664 17.6007H7.83984V20.1721H16.1664V17.6007ZM9.12556 18.8864V17.8179H6.55413V18.8864H9.12556Z", fill: "white", mask: "url(#path-1-inside-1_10418_503)" }),
@@ -743,6 +765,7 @@ const ICONS_MAP = {
   bell: Bell,
   beta: Beta,
   blog: Blog,
+  bold: Bold,
   book: Book,
   brackets: Brackets,
   briefcase: Briefcase,
@@ -817,6 +840,7 @@ const ICONS_MAP = {
   information: InformationIcon,
   "insert-row": InsertRowIcon,
   integrations: Integrations,
+  italic: Italic,
   key: Key,
   keys: Keys,
   lifebuoy: Lifebuoy,
@@ -824,6 +848,8 @@ const ICONS_MAP = {
   "light-bulb-on": LightBulbOn,
   lightening: Lightening,
   "line-in-circle": LineInCircle,
+  "list-bulleted": ListBulleted,
+  "list-numbered": ListNumbered,
   loading: LoadingFlipped,
   "loading-animated": LoadingAnimated,
   lock: Lock,
@@ -871,6 +897,7 @@ const ICONS_MAP = {
   taxi: Taxi,
   trash: Trash,
   "tree-structure": TreeStructure,
+  underline: Underline,
   upgrade: Upgrade,
   upload: Upload,
   url: Url,
@@ -14336,7 +14363,9 @@ const CodeBlock = ({
 };
 const ActionsWrapper = styled.div.withConfig({
   componentId: "sc-6eozxy-0"
-})(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+})(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.sm);
 const DialogContent$1 = styled.div.withConfig({
   componentId: "sc-6eozxy-1"
 })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -16501,19 +16530,19 @@ const DialogOverlay = styled($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff).withConf
 }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
 const ContentArea = styled($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
   componentId: "sc-1wr6otn-2"
-})(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+})(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
   theme: theme2
 }) => theme2.click.dialog.color.background.default, ({
   theme: theme2
 }) => theme2.click.dialog.radii.all, ({
   theme: theme2
-}) => theme2.click.dialog.space.y, ({
-  theme: theme2
-}) => theme2.click.dialog.space.x, ({
+}) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
   theme: theme2
 }) => theme2.click.dialog.shadow.default, ({
   theme: theme2
-}) => theme2.click.global.color.stroke.default, contentShow);
+}) => theme2.click.global.color.stroke.default, contentShow, ({
+  theme: theme2
+}) => theme2.breakpoint.sizes.sm);
 const TitleArea = styled.div.withConfig({
   componentId: "sc-1wr6otn-3"
 })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -38299,15 +38328,24 @@ const MultiSelectCheckboxItem = forwardRef(({
     selectedValues,
     onSelect
   } = useOption();
-  const onSelectValue = (evt) => {
+  const handleSelect = (evt) => {
     if (!disabled) {
       onSelect(value, void 0, evt);
-      if (typeof onSelectProp == "function") {
+      if (typeof onSelectProp === "function") {
         onSelectProp(value, void 0, evt);
       }
     }
   };
-  const onMouseOver = (e) => {
+  const handleMenuItemClick = (evt) => {
+    if (evt.target !== evt.currentTarget) {
+      return;
+    }
+    handleSelect(evt);
+  };
+  const handleCheckboxClick = (evt) => {
+    handleSelect(evt);
+  };
+  const handleMenuItemMouseOver = (e) => {
     if (onMouseOverProp) {
       onMouseOverProp(e);
     }
@@ -38319,11 +38357,8 @@ const MultiSelectCheckboxItem = forwardRef(({
     return null;
   }
   const isChecked = selectedValues.includes(value);
-  const onChange = () => {
-    onSelect(value);
-  };
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    /* @__PURE__ */ jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, 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__ */ 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__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ? /* @__PURE__ */ jsxs("div", { style: {
         display: "flex",
         justifyContent: "center"
@@ -38336,9 +38371,9 @@ const MultiSelectCheckboxItem = forwardRef(({
       }, children: [
         /* @__PURE__ */ jsx(SvgImage, { name: icon, size: "sm" }),
         children
-      ] }), onClick: onChange, variant: variant ?? "default" }),
-      icon && iconDir === "end" && /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange, variant: variant ?? "default" }) }),
-      !icon && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange, variant: variant ?? "default" })
+      ] }), onClick: handleCheckboxClick, variant: variant ?? "default" }),
+      icon && iconDir === "end" && /* @__PURE__ */ jsx(IconWrapper$3, { icon, iconDir: "end", children: /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" }) }),
+      !icon && /* @__PURE__ */ jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: handleCheckboxClick, variant: variant ?? "default" })
     ] }),
     separator && /* @__PURE__ */ jsx(Separator, { size: "sm" })
   ] });
@@ -41264,13 +41299,23 @@ const Toast = ({
 };
 const Viewport = styled($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
   componentId: "sc-tmc8vl-6"
-})(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+})(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  $align
+}) => {
+  if ($align === "start") {
+    return "left: 0";
+  }
+  return `
+      right: 0;
+  `;
+}, ({
   theme: theme2
 }) => theme2.click.toast.space.gap, ({
   theme: theme2
 }) => theme2.click.toast.size.width);
 const ToastProvider = ({
   children,
+  align = "end",
   ...props
 }) => {
   const [toasts, setToasts] = useState(/* @__PURE__ */ new Map());
@@ -41303,12 +41348,12 @@ const ToastProvider = ({
       });
     }
   };
-  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+  return /* @__PURE__ */ jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: align === "start" ? "left" : "right", ...props, children: [
     /* @__PURE__ */ jsxs(ToastContext.Provider, { value, children: [
       children,
       Array.from(toasts).map(([id, toast]) => /* @__PURE__ */ jsx(Toast, { ...toast, onClose: onClose(id) }, id))
     ] }),
-    /* @__PURE__ */ jsx(Viewport, {})
+    /* @__PURE__ */ jsx(Viewport, { $align: align })
   ] });
 };
 function listCacheClear$1() {
@@ -50842,6 +50887,7 @@ export {
   TextAreaField,
   TextField,
   Title$2 as Title,
+  ToastProvider,
   Tooltip,
   VerticalStepper,
   WarningAlert,

package/dist/click-ui.umd.js CHANGED Viewed

@@ -90,6 +90,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 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" })
@@ -457,6 +458,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 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" })
@@ -501,6 +503,22 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
       /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 16L16 8", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
     ] });
   };
+  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" })
+  ] });
+  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" })
+  ] });
   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" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M19.5 12A7.495 7.495 0 0 0 5.188 8.875" }),
@@ -719,6 +737,10 @@ 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" })
+  ] });
   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" }) }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.83984 17.8179V16.5322H6.55413V17.8179H7.83984ZM16.1664 17.8179H17.4521V16.5322H16.1664V17.8179ZM16.1664 18.8864V20.1721H17.4521V18.8864H16.1664ZM7.83984 18.8864H6.55413V20.1721H7.83984V18.8864ZM7.83984 19.1036H16.1664V16.5322H7.83984V19.1036ZM14.8807 17.8179V18.8864H17.4521V17.8179H14.8807ZM16.1664 17.6007H7.83984V20.1721H16.1664V17.6007ZM9.12556 18.8864V17.8179H6.55413V18.8864H9.12556Z", fill: "white", mask: "url(#path-1-inside-1_10418_503)" }),
@@ -758,6 +780,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     bell: Bell,
     beta: Beta,
     blog: Blog,
+    bold: Bold,
     book: Book,
     brackets: Brackets,
     briefcase: Briefcase,
@@ -832,6 +855,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     information: InformationIcon,
     "insert-row": InsertRowIcon,
     integrations: Integrations,
+    italic: Italic,
     key: Key,
     keys: Keys,
     lifebuoy: Lifebuoy,
@@ -839,6 +863,8 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     "light-bulb-on": LightBulbOn,
     lightening: Lightening,
     "line-in-circle": LineInCircle,
+    "list-bulleted": ListBulleted,
+    "list-numbered": ListNumbered,
     loading: LoadingFlipped,
     "loading-animated": LoadingAnimated,
     lock: Lock,
@@ -886,6 +912,7 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
     taxi: Taxi,
     trash: Trash,
     "tree-structure": TreeStructure,
+    underline: Underline,
     upgrade: Upgrade,
     upload: Upload,
     url: Url,
@@ -14351,7 +14378,9 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   };
   const ActionsWrapper = styled.styled.div.withConfig({
     componentId: "sc-6eozxy-0"
-  })(["display:flex;justify-content:flex-end;gap:", ";"], (props) => props.theme.click.dialog.space.gap);
+  })(["display:flex;justify-content:flex-end;gap:", ";@media (max-width:", "){flex-direction:column;}"], (props) => props.theme.click.dialog.space.gap, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const DialogContent$1 = styled.styled.div.withConfig({
     componentId: "sc-6eozxy-1"
   })(["overflow:hidden;display:flex;flex-direction:column;"]);
@@ -16516,19 +16545,19 @@ var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "sy
   }) => theme2.click.dialog.color.opaqueBackground.default, overlayShow);
   const ContentArea = styled.styled($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2).withConfig({
     componentId: "sc-1wr6otn-2"
-  })(["background:", ";border-radius:", ";padding:", " ", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;"], ({
+  })(["background:", ";border-radius:", ";padding:", ";box-shadow:", ";border:1px solid ", ";width:75%;max-width:670px;position:fixed;top:50%;left:50%;max-height:75%;overflow:auto;transform:translate(-50%,-50%);animation:", " 150ms cubic-bezier(0.16,1,0.3,1);outline:none;@media (max-width:", "){max-height:100%;border-radius:0;width:100%;}"], ({
     theme: theme2
   }) => theme2.click.dialog.color.background.default, ({
     theme: theme2
   }) => theme2.click.dialog.radii.all, ({
     theme: theme2
-  }) => theme2.click.dialog.space.y, ({
-    theme: theme2
-  }) => theme2.click.dialog.space.x, ({
+  }) => `${theme2.click.dialog.space.y} ${theme2.click.dialog.space.x}`, ({
     theme: theme2
   }) => theme2.click.dialog.shadow.default, ({
     theme: theme2
-  }) => theme2.click.global.color.stroke.default, contentShow);
+  }) => theme2.click.global.color.stroke.default, contentShow, ({
+    theme: theme2
+  }) => theme2.breakpoint.sizes.sm);
   const TitleArea = styled.styled.div.withConfig({
     componentId: "sc-1wr6otn-3"
   })(["display:flex;justify-content:space-between;align-items:center;min-height:", ";"], ({
@@ -38314,15 +38343,24 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       selectedValues,
       onSelect
     } = useOption();
-    const onSelectValue = (evt) => {
+    const handleSelect = (evt) => {
       if (!disabled) {
         onSelect(value, void 0, evt);
-        if (typeof onSelectProp == "function") {
+        if (typeof onSelectProp === "function") {
           onSelectProp(value, void 0, evt);
         }
       }
     };
-    const onMouseOver = (e) => {
+    const handleMenuItemClick = (evt) => {
+      if (evt.target !== evt.currentTarget) {
+        return;
+      }
+      handleSelect(evt);
+    };
+    const handleCheckboxClick = (evt) => {
+      handleSelect(evt);
+    };
+    const handleMenuItemMouseOver = (e) => {
       if (onMouseOverProp) {
         onMouseOverProp(e);
       }
@@ -38334,11 +38372,8 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
       return null;
     }
     const isChecked = selectedValues.includes(value);
-    const onChange = () => {
-      onSelect(value);
-    };
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntime.jsxs(GenericMenuItem, { ...props, "data-value": value, onClick: onSelectValue, onMouseOver, 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(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"
@@ -38351,9 +38386,9 @@ Please read the updated README.md at https://github.com/SortableJS/react-sortabl
         }, children: [
           /* @__PURE__ */ jsxRuntime.jsx(SvgImage, { name: icon, size: "sm" }),
           children
-        ] }), onClick: onChange, 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: onChange, variant: variant ?? "default" }) }),
-        !icon && /* @__PURE__ */ jsxRuntime.jsx(Checkbox, { checked: isChecked, "data-testid": "multi-select-checkbox", disabled, label: label ?? children, onClick: onChange, variant: variant ?? "default" })
+        ] }), 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" })
       ] }),
       separator && /* @__PURE__ */ jsxRuntime.jsx(Separator, { size: "sm" })
     ] });
@@ -41279,13 +41314,23 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   };
   const Viewport = styled.styled($054eb8030ebde76e$export$d5c6c08dc2d3ca7).withConfig({
     componentId: "sc-tmc8vl-6"
-  })(["--viewport-padding:25px;position:fixed;bottom:0;right:0;display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+  })(["--viewport-padding:25px;position:fixed;bottom:0;", ";display:flex;flex-direction:column;padding:var(--viewport-padding);gap:", ";width:", ";max-width:100vw;margin:0;list-style:none;z-index:2147483647;outline:none;"], ({
+    $align
+  }) => {
+    if ($align === "start") {
+      return "left: 0";
+    }
+    return `
+      right: 0;
+  `;
+  }, ({
     theme: theme2
   }) => theme2.click.toast.space.gap, ({
     theme: theme2
   }) => theme2.click.toast.size.width);
   const ToastProvider = ({
     children,
+    align = "end",
     ...props
   }) => {
     const [toasts, setToasts] = React.useState(/* @__PURE__ */ new Map());
@@ -41318,12 +41363,12 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         });
       }
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs($054eb8030ebde76e$export$2881499e37b75b9a, { swipeDirection: "right", ...props, children: [
+    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))
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsx(Viewport, {})
+      /* @__PURE__ */ jsxRuntime.jsx(Viewport, { $align: align })
     ] });
   };
   function listCacheClear$1() {
@@ -50856,6 +50901,7 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   exports2.TextAreaField = TextAreaField;
   exports2.TextField = TextField;
   exports2.Title = Title$2;
+  exports2.ToastProvider = ToastProvider;
   exports2.Tooltip = Tooltip;
   exports2.VerticalStepper = VerticalStepper;
   exports2.WarningAlert = WarningAlert;

package/dist/components/ClickUIProvider/ClickUIProvider.d.ts CHANGED Viewed

@@ -1,12 +1,12 @@
 import { TooltipProviderProps } from '@radix-ui/react-tooltip';
-import { ToastProps } from '@radix-ui/react-toast';
+import { ToastProviderProps } from '../Toast/Toast';
 import { ThemeName } from '../../theme';
 import { ReactNode } from 'react';
 interface Props {
     config?: {
         tooltip?: Omit<TooltipProviderProps, "children">;
-        toast?: Omit<ToastProps, "children">;
+        toast?: Omit<ToastProviderProps, "children">;
     };
     theme: ThemeName;
     children: ReactNode;

package/dist/components/Icon/IconCommon.d.ts CHANGED Viewed

@@ -14,6 +14,7 @@ export declare const ICONS_MAP: {
     bell: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     beta: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     blog: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    bold: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     book: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     brackets: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     briefcase: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -88,6 +89,7 @@ export declare const ICONS_MAP: {
     information: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "insert-row": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     integrations: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    italic: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     key: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     keys: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     lifebuoy: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -95,6 +97,8 @@ export declare const ICONS_MAP: {
     "light-bulb-on": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     lightening: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "line-in-circle": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "list-bulleted": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    "list-numbered": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     loading: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('react').SVGAttributes<SVGElement>, never>> & string & Omit<(props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element, keyof import('react').Component<any, {}, any>>;
     "loading-animated": import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components').FastOmit<import('styled-components').FastOmit<import('react').SVGAttributes<SVGElement>, never>, never>> & string;
     lock: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -142,6 +146,7 @@ export declare const ICONS_MAP: {
     taxi: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     trash: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "tree-structure": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    underline: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     upgrade: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     upload: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     url: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,7 @@ 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", "chart-area", "chart-bar-horizontal", "chart-donut", "chart-heatmap", "chart-scatter", "chart-stacked-horizontal", "chart-stacked-vertical", "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", "globe", "hexagon", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "light-bulb-on", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "minus", "mcp", "moon", "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", "square", "star", "stop", "support", "table", "taxi", "trash", "tree-structure", "upgrade", "upload", "url", "user", "users", "warning", "waves"];
+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", "bold", "book", "brackets", "briefcase", "building", "burger-menu", "calendar", "calendar-with-time", "cards", "cell-tower", "chat", "chart-area", "chart-bar-horizontal", "chart-donut", "chart-heatmap", "chart-scatter", "chart-stacked-horizontal", "chart-stacked-vertical", "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", "globe", "hexagon", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "italic", "key", "keys", "lifebuoy", "light-bulb", "light-bulb-on", "lightening", "line-in-circle", "list-bulleted", "list-numbered", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "minus", "mcp", "moon", "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", "square", "star", "stop", "support", "table", "taxi", "trash", "tree-structure", "upgrade", "upload", "url", "user", "users", "underline", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;

package/dist/components/Toast/Toast.d.ts CHANGED Viewed

@@ -18,4 +18,7 @@ export interface ToastProps {
         altText: string;
     }>;
 }
-export declare const ToastProvider: ({ children, ...props }: RadixUIToast.ToastProps) => import("react/jsx-runtime").JSX.Element;
+export interface ToastProviderProps extends RadixUIToast.ToastProps {
+    align?: "start" | "end";
+}
+export declare const ToastProvider: ({ children, align, ...props }: ToastProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/icons/Bold.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+declare const Bold: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Bold;

package/dist/components/icons/Italic.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+declare const Italic: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Italic;

package/dist/components/icons/ListBulleted.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+declare const ListBulleted: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ListBulleted;

package/dist/components/icons/ListNumbered.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+declare const ListNumbered: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default ListNumbered;

package/dist/components/icons/Underline.d.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+declare const Underline: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Underline;

package/dist/components/index.d.ts CHANGED Viewed

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

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.207",
+  "version": "0.0.209",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",