@robuust-digital/vue-components 1.3.2 → 2.0.0-rc.0

package/dist/rich-text-editor/index.js

@@ -0,0 +1,262 @@
+import { createElementBlock as r, openBlock as s, createElementVNode as n, ref as p, useAttrs as H, computed as x, watch as L, Fragment as A, createVNode as v, renderSlot as C, withCtx as _, normalizeClass as M, createCommentVNode as $, unref as m, renderList as B, createBlock as E, resolveDynamicComponent as S } from "vue";
+import { useEditor as O, EditorContent as T } from "@tiptap/vue-3";
+import N from "@tiptap/extension-link";
+import U from "@tiptap/starter-kit";
+import { _ as q } from "../_shared/Tooltip-BKXJoJ1x.js";
+import { _ as z } from "../_shared/FormInput-abFMz_J4.js";
+import { _ as D } from "../_shared/Modal-COVlUEud.js";
+function I(a, c) {
+  return s(), r("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    n("path", {
+      "fill-rule": "evenodd",
+      d: "M3 3a1 1 0 0 1 1-1h5a3.5 3.5 0 0 1 2.843 5.541A3.75 3.75 0 0 1 9.25 14H4a1 1 0 0 1-1-1V3Zm2.5 3.5v-2H9a1 1 0 0 1 0 2H5.5Zm0 2.5v2.5h3.75a1.25 1.25 0 1 0 0-2.5H5.5Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function R(a, c) {
+  return s(), r("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    n("path", {
+      "fill-rule": "evenodd",
+      d: "M6.25 2.75A.75.75 0 0 1 7 2h6a.75.75 0 0 1 0 1.5h-2.483l-3.429 9H9A.75.75 0 0 1 9 14H3a.75.75 0 0 1 0-1.5h2.483l3.429-9H7a.75.75 0 0 1-.75-.75Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function j(a, c) {
+  return s(), r("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    n("path", {
+      "fill-rule": "evenodd",
+      d: "M8.914 6.025a.75.75 0 0 1 1.06 0 3.5 3.5 0 0 1 0 4.95l-2 2a3.5 3.5 0 0 1-5.396-4.402.75.75 0 0 1 1.251.827 2 2 0 0 0 3.085 2.514l2-2a2 2 0 0 0 0-2.828.75.75 0 0 1 0-1.06Z",
+      "clip-rule": "evenodd"
+    }),
+    n("path", {
+      "fill-rule": "evenodd",
+      d: "M7.086 9.975a.75.75 0 0 1-1.06 0 3.5 3.5 0 0 1 0-4.95l2-2a3.5 3.5 0 0 1 5.396 4.402.75.75 0 0 1-1.251-.827 2 2 0 0 0-3.085-2.514l-2 2a2 2 0 0 0 0 2.828.75.75 0 0 1 0 1.06Z",
+      "clip-rule": "evenodd"
+    })
+  ]);
+}
+function F(a, c) {
+  return s(), r("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    n("path", { d: "M3 4.75a1 1 0 1 0 0-2 1 1 0 0 0 0 2ZM6.25 3a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 7.25a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM6.25 11.5a.75.75 0 0 0 0 1.5h7a.75.75 0 0 0 0-1.5h-7ZM4 12.25a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM3 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" })
+  ]);
+}
+function K(a, c) {
+  return s(), r("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 16 16",
+    fill: "currentColor",
+    "aria-hidden": "true",
+    "data-slot": "icon"
+  }, [
+    n("path", { d: "M2.995 1a.625.625 0 1 0 0 1.25h.38v2.125a.625.625 0 1 0 1.25 0v-2.75A.625.625 0 0 0 4 1H2.995ZM3.208 7.385a2.37 2.37 0 0 1 1.027-.124L2.573 8.923a.625.625 0 0 0 .439 1.067l1.987.011a.625.625 0 0 0 .006-1.25l-.49-.003.777-.776c.215-.215.335-.506.335-.809 0-.465-.297-.957-.842-1.078a3.636 3.636 0 0 0-1.993.121.625.625 0 1 0 .416 1.179ZM2.625 11a.625.625 0 1 0 0 1.25H4.25a.125.125 0 0 1 0 .25H3.5a.625.625 0 1 0 0 1.25h.75a.125.125 0 0 1 0 .25H2.625a.625.625 0 1 0 0 1.25H4.25a1.375 1.375 0 0 0 1.153-2.125A1.375 1.375 0 0 0 4.25 11H2.625ZM7.25 2a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-6ZM7.25 7.25a.75.75 0 0 0 0 1.5h6a.75.75 0 0 0 0-1.5h-6ZM6.5 13.25a.75.75 0 0 1 .75-.75h6a.75.75 0 0 1 0 1.5h-6a.75.75 0 0 1-.75-.75Z" })
+  ]);
+}
+const P = { class: "rvc-rich-text-toolbar" }, G = ["disabled", "aria-label", "onClick"], le = /* @__PURE__ */ Object.assign({ inheritAttrs: !1 }, {
+  __name: "RichTextEditor",
+  props: {
+    id: {
+      type: String,
+      required: !0
+    },
+    modelValue: {
+      type: String,
+      default: ""
+    },
+    rootClass: {
+      type: String,
+      default: void 0
+    },
+    config: {
+      type: String,
+      default: "default",
+      validator: (a) => ["default", "simple"].includes(a)
+    },
+    customExtensions: {
+      type: Array,
+      default: () => []
+    },
+    customCommands: {
+      type: Array,
+      default: () => []
+    }
+  },
+  emits: ["update:modelValue", "tiptap:onCreate"],
+  setup(a, { emit: c }) {
+    const i = a, h = c, g = p(!1), u = p(!1), d = p(""), f = H(), k = f.class ? `${f.class} ` : "", V = [
+      U,
+      N.configure({
+        openOnClick: !1
+      })
+    ], t = O({
+      extensions: [...V, ...i.customExtensions],
+      content: i.modelValue,
+      editorProps: {
+        attributes: {
+          ...f,
+          id: i.id,
+          class: `${k}rvc-textarea rvc-rich-text-textarea`
+        }
+      },
+      onCreate: ({ editor: l }) => {
+        h("tiptap:onCreate", l);
+      },
+      onUpdate: ({ editor: l }) => {
+        const o = l.isEmpty ? "" : l.getHTML();
+        h("update:modelValue", o);
+      },
+      onSelectionUpdate({ editor: l }) {
+        g.value = !l.view.state.selection.empty;
+      }
+    }), y = x(() => [
+      {
+        name: "bold",
+        icon: I,
+        title: "Bold",
+        isVisible: !0,
+        isActive: () => t.value.isActive("bold"),
+        action: () => t.value.commands.toggleBold()
+      },
+      {
+        name: "italic",
+        icon: R,
+        title: "Italic",
+        isVisible: !0,
+        isActive: () => t.value.isActive("italic"),
+        action: () => t.value.commands.toggleItalic()
+      },
+      {
+        name: "bulletList",
+        icon: F,
+        title: "Bullet List",
+        isVisible: i.config === "default",
+        isActive: () => t.value.isActive("bulletList"),
+        action: () => t.value.commands.toggleBulletList()
+      },
+      {
+        name: "orderedList",
+        icon: K,
+        title: "Ordered List",
+        isVisible: i.config === "default",
+        isActive: () => t.value.isActive("orderedList"),
+        action: () => t.value.commands.toggleOrderedList()
+      },
+      {
+        name: "link",
+        icon: j,
+        title: "Hyperlink",
+        isVisible: i.config === "default",
+        disabled: !g.value && !t.value.isActive("link"),
+        isActive: () => t.value.isActive("link"),
+        action: () => {
+          d.value = t.value.getAttributes("link").href, u.value = !0;
+        }
+      }
+    ]), b = x(() => {
+      const l = y.value.filter((e) => i.config === "default" || ["bold", "italic"].includes(e.name)), o = i.customCommands.map((e) => ({
+        ...e,
+        isVisible: e.isVisible ?? !0,
+        disabled: typeof e.disabled == "function" ? e.disabled(t.value) : e.disabled ?? !1,
+        isActive: () => {
+          var w;
+          return ((w = e.isActive) == null ? void 0 : w.call(e, t.value)) ?? !1;
+        },
+        action: () => e.action(t.value)
+      }));
+      return [...l, ...o];
+    });
+    L(() => i.modelValue, (l) => {
+      t.value.getHTML() === l || t.value.commands.setContent(l, !1);
+    });
+    const Z = () => {
+      t.value.commands.setLink({ href: d.value }), u.value = !1, d.value = null;
+    };
+    return (l, o) => (s(), r(A, null, [
+      v(D, {
+        id: `${i.id}-modal-add-hyperlink`,
+        title: "Add Hyperlink",
+        as: "form",
+        show: u.value,
+        "onModal:close": o[1] || (o[1] = (e) => u.value = !1),
+        "onModal:save": Z
+      }, {
+        default: _(() => [
+          v(z, {
+            modelValue: d.value,
+            "onUpdate:modelValue": o[0] || (o[0] = (e) => d.value = e),
+            placeholder: "https://www.example.com",
+            type: "url",
+            required: ""
+          }, null, 8, ["modelValue"])
+        ]),
+        _: 1
+      }, 8, ["id", "show"]),
+      C(l.$slots, "default"),
+      n("div", {
+        class: M(["rvc-rich-text", a.rootClass])
+      }, [
+        m(t) ? C(l.$slots, "toolbar", {
+          key: 0,
+          commands: b.value,
+          tiptap: m(t)
+        }, () => [
+          n("ul", P, [
+            (s(!0), r(A, null, B(b.value.filter((e) => e.isVisible), (e) => (s(), r("li", {
+              key: `toolbar-item-command-${e.name}`
+            }, [
+              v(q, {
+                content: e.title,
+                placement: "bottom",
+                size: "sm",
+                class: "text-sm font-medium"
+              }, {
+                default: _(() => [
+                  n("button", {
+                    disabled: e.disabled,
+                    type: "button",
+                    "aria-label": e.title,
+                    class: M([{ "rvc-rich-text-button-active": e.isActive() }, "rvc-rich-text-button"]),
+                    onClick: e.action
+                  }, [
+                    (s(), E(S(e.icon)))
+                  ], 10, G)
+                ]),
+                _: 2
+              }, 1032, ["content"])
+            ]))), 128))
+          ])
+        ]) : $("", !0),
+        v(m(T), { editor: m(t) }, null, 8, ["editor"])
+      ], 2)
+    ], 64));
+  }
+});
+export {
+  le as RichTextEditor,
+  le as default
+};

package/dist/rich-text-editor/rich-text.css

@@ -0,0 +1,83 @@
+:root {
+  --rvc-rich-text-list-padding: calc(var(--spacing) * 2.5);
+  --rvc-rich-text-list-position: inside;
+  --rvc-rich-text-paragraph-spacing: calc(var(--spacing) * 4);
+  --rvc-rich-text-icon-size: calc(var(--spacing) * 4);
+  --rvc-rich-text-button-border-radius: var(--rvc-base-border-radius);
+  --rvc-rich-text-button-padding: calc(var(--spacing) * 1);
+  --rvc-rich-text-button-bg-color: transparent;
+  --rvc-rich-text-button-bg-color-hover: var(--color-slate-100);
+  --rvc-rich-text-button-color: var(--color-slate-600);
+  --rvc-rich-text-button-color-active: var(--color-indigo-700);
+  --rvc-rich-text-anchor-color: var(--color-indigo-700);
+  --rvc-rich-text-anchor-font-weight: var(--font-weight-bold);
+  --rvc-rich-text-anchor-text-decoration: underline;
+  --rvc-rich-text-min-height: calc(var(--spacing) * 24);
+}
+
+@layer components {
+  .rvc-rich-text {
+    position: relative;
+
+    .rvc-rich-text-textarea {
+      min-height: var(--rvc-rich-text-min-height);
+      padding-top: calc(var(--rvc-textarea-padding-x) + var(--rvc-rich-text-icon-size) + (var(--rvc-rich-text-button-padding) * 2) + var(--rvc-textarea-padding-y));
+
+      > *:not(:last-child) {
+        margin-bottom: var(--rvc-rich-text-paragraph-spacing);
+      }
+
+      ul, ol {
+        list-style-position: var(--rvc-rich-text-list-position);
+        padding-left: var(--rvc-rich-text-list-padding);
+
+        li > * {
+          display: inline;
+        }
+      }
+
+      ul { list-style-type: disc; }
+      ol { list-style-type: decimal; }
+
+      a {
+        text-decoration: var(--rvc-rich-text-anchor-text-decoration);
+        font-weight: var(--rvc-rich-text-anchor-font-weight);
+        color: var(--rvc-rich-text-anchor-color);
+      }
+    }
+
+    .rvc-rich-text-toolbar {
+      padding: var(--rvc-textarea-padding-x);
+      gap: calc(var(--spacing) * 1);
+      display: flex;
+      align-items: center;
+      position: absolute;
+      inset-block-start: 0;
+      inset-inline: 0;
+      flex-wrap: wrap;
+      z-index: 1;
+      pointer-events: none;
+    }
+
+    .rvc-rich-text-button {
+      border-radius: var(--rvc-rich-text-button-border-radius);
+      padding: var(--rvc-rich-text-button-padding);
+      background-color: var(--rvc-rich-text-button-bg-color);
+      color: var(--rvc-rich-text-button-color);
+      pointer-events: auto;
+
+      &:hover {
+        background-color: var(--rvc-rich-text-button-bg-color-hover);
+      }
+
+      &.rvc-rich-text-button-active {
+        color: var(--rvc-rich-text-button-color-active);
+      }
+
+      svg {
+        width: var(--rvc-rich-text-icon-size);
+        height: var(--rvc-rich-text-icon-size);
+      }
+    }
+  }
+}

package/dist/rich-text-editor/styles.css

@@ -0,0 +1 @@
+@import "./rich-text.css";

package/dist/toast/index.js

@@ -0,0 +1,100 @@
+import { onMounted as p, watch as v, createBlock as i, openBlock as s, unref as r, withCtx as c, resolveDynamicComponent as u, normalizeClass as w, renderSlot as a, createElementVNode as m, createCommentVNode as d, toDisplayString as h, createElementBlock as $, createVNode as g } from "vue";
+import { TransitionRoot as C } from "@headlessui/vue";
+import { r as b } from "../_shared/XMarkIcon-90mcPzBs.js";
+const k = { class: "rvc-toast-title" }, V = {
+  __name: "Toast",
+  props: {
+    show: {
+      type: Boolean
+    },
+    as: {
+      type: String,
+      default: "div"
+    },
+    title: {
+      type: String,
+      default: ""
+    },
+    icon: {
+      type: [Object, Function],
+      default: null
+    },
+    timeout: {
+      type: [Number, Boolean],
+      default: 5e3
+    },
+    position: {
+      type: String,
+      default: "bottom",
+      validator: (t) => ["top", "bottom"].includes(t)
+    },
+    type: {
+      type: String,
+      default: "info",
+      validator: (t) => ["success", "warning", "danger", "info"].includes(t)
+    },
+    showClose: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["toast:close"],
+  setup(t, { emit: f }) {
+    const e = t, y = f, n = () => {
+      e.timeout && e.show && setTimeout(() => {
+        y("toast:close");
+      }, e.timeout);
+    };
+    return p(() => {
+      n();
+    }), v(() => e.show, (o) => {
+      o && n();
+    }), (o, l) => (s(), i(r(C), {
+      show: t.show,
+      as: "template",
+      enter: "transition-opacity duration-300",
+      "enter-from": "opacity-0",
+      "enter-to": "opacity-100",
+      leave: "transition-opacity duration-300",
+      "leave-from": "opacity-100",
+      "leave-to": "opacity-0"
+    }, {
+      default: c(() => [
+        (s(), i(u(t.as), {
+          class: w(["rvc-toast transition-opacity", `rvc-toast-${t.position}`, `rvc-toast-${t.type}`, { "rvc-toast-open": t.show }])
+        }, {
+          default: c(() => [
+            a(o.$slots, "icon", {}, () => [
+              t.icon ? (s(), i(u(t.icon), {
+                key: 0,
+                class: "rvc-toast-icon"
+              })) : d("", !0)
+            ]),
+            m("div", null, [
+              a(o.$slots, "title", {}, () => [
+                m("span", k, h(t.title), 1)
+              ]),
+              a(o.$slots, "default")
+            ]),
+            a(o.$slots, "close", {}, () => [
+              t.showClose ? (s(), $("button", {
+                key: 0,
+                type: "button",
+                class: "rvc-toast-close transition-colors",
+                onClick: l[0] || (l[0] = (B) => o.$emit("toast:close"))
+              }, [
+                g(r(b), { class: "size-5" })
+              ])) : d("", !0)
+            ])
+          ]),
+          _: 3
+        }, 8, ["class"]))
+      ]),
+      _: 3
+    }, 8, ["show"]));
+  }
+};
+export {
+  V as Toast,
+  V as default
+};

package/dist/toast/styles.css

@@ -0,0 +1 @@
+@import "./toast.css";

package/dist/toast/toast.css

@@ -0,0 +1,187 @@
+:root {
+  /* Base Toast variables */
+  --rvc-toast-border-radius: var(--rvc-base-border-radius);
+  --rvc-toast-transition-duration: var(--rvc-base-transition-duration);
+  --rvc-toast-transition-timing-function: var(--rvc-base-transition-timing-function);
+  --rvc-toast-border-width: var(--rvc-base-border-width);
+  --rvc-toast-padding-x: calc(var(--spacing) * 6);
+  --rvc-toast-padding-y: calc(var(--spacing) * 6);
+  --rvc-toast-width: calc(var(--spacing) * 160);
+  --rvc-toast-max-width: calc(100vw - (var(--spacing) * 12));
+  --rvc-toast-font-size: var(--text-base);
+  --rvc-toast-gap: calc(var(--spacing) * 1.5);
+  --rvc-toast-anchor-decoration: underline;
+  --rvc-toast-icon-size: calc(var(--spacing) * 6);
+  --rvc-toast-title-font-weight: var(--font-weight-medium);
+  --rvc-toast-transition-property: colors;
+  --rvc-toast-offset: calc(var(--spacing) * 6);
+
+  /* Default (Info) variant */
+  --rvc-toast-bg-color: var(--color-blue-50);
+  --rvc-toast-border-color: var(--color-blue-200);
+  --rvc-toast-color: var(--color-blue-700);
+  --rvc-toast-icon-color: var(--color-blue-500);
+  --rvc-toast-title-color: var(--color-blue-800);
+  --rvc-toast-close-bg-color: var(--color-blue-200);
+  --rvc-toast-close-bg-color-hover: var(--color-blue-300);
+  --rvc-toast-anchor-color-hover: var(--color-blue-600);
+
+  /* Warning variant */
+  --rvc-toast-bg-color-warning: var(--color-yellow-50);
+  --rvc-toast-border-color-warning: var(--color-yellow-200);
+  --rvc-toast-color-warning: var(--color-yellow-700);
+  --rvc-toast-icon-color-warning: var(--color-yellow-500);
+  --rvc-toast-title-color-warning: var(--color-yellow-800);
+  --rvc-toast-close-bg-color-warning: var(--color-yellow-200);
+  --rvc-toast-close-bg-color-warning-hover: var(--color-yellow-300);
+  --rvc-toast-anchor-color-warning-hover: var(--color-yellow-600);
+
+  /* Success variant */
+  --rvc-toast-bg-color-success: var(--color-green-50);
+  --rvc-toast-border-color-success: var(--color-green-200);
+  --rvc-toast-color-success: var(--color-green-700);
+  --rvc-toast-icon-color-success: var(--color-green-500);
+  --rvc-toast-title-color-success: var(--color-green-800);
+  --rvc-toast-close-bg-color-success: var(--color-green-200);
+  --rvc-toast-close-bg-color-success-hover: var(--color-green-300);
+  --rvc-toast-anchor-color-success-hover: var(--color-green-600);
+
+  /* Danger variant */
+  --rvc-toast-bg-color-danger: var(--color-red-50);
+  --rvc-toast-border-color-danger: var(--color-red-200);
+  --rvc-toast-color-danger: var(--color-red-700);
+  --rvc-toast-icon-color-danger: var(--color-red-500);
+  --rvc-toast-title-color-danger: var(--color-red-800);
+  --rvc-toast-close-bg-color-danger: var(--color-red-200);
+  --rvc-toast-close-bg-color-danger-hover: var(--color-red-300);
+  --rvc-toast-anchor-color-danger-hover: var(--color-red-600);
+}
+
+@layer components {
+  .rvc-toast {
+    gap: var(--rvc-toast-gap);
+    padding: var(--rvc-toast-padding-y) var(--rvc-toast-padding-x);
+    border-radius: var(--rvc-toast-border-radius);
+    font-size: var(--rvc-toast-font-size);
+    background-color: var(--rvc-toast-bg-color);
+    color: var(--rvc-toast-color);
+    width: var(--rvc-toast-width);
+    max-width: var(--rvc-toast-max-width);
+    border-width: var(--rvc-toast-border-width);
+    border-color: var(--rvc-toast-border-color);
+    filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.05));
+    display: flex;
+    position: fixed;
+    left: 50%;
+    transform: translateX(-50%);
+    overflow: hidden;
+    z-index: 99;
+
+    &.rvc-toast-bottom {
+      bottom: var(--rvc-toast-offset);
+    }
+
+    &.rvc-toast-top {
+      top: var(--rvc-toast-offset);
+    }
+
+    a {
+      text-decoration: var(--rvc-toast-anchor-decoration);
+      transition-property: var(--rvc-toast-transition-property);
+      transition-duration: var(--rvc-toast-transition-duration);
+      transition-timing-function: var(--rvc-toast-transition-timing-function);
+      color: var(--rvc-toast-anchor-color);
+
+      &:hover {
+        color: var(--rvc-toast-anchor-color);
+      }
+    }
+
+    ul, ol {
+      list-style-position: inside;
+      margin: 0;
+      padding-left: calc(var(--spacing) * 2);
+    }
+
+    ul {
+      list-style-type: disc;
+    }
+
+    ol {
+      list-style-type: decimal;
+    }
+
+    .rvc-toast-close {
+      background-color: var(--rvc-toast-close-bg-color);
+      color: var(--rvc-toast-icon-color);
+      border-bottom-left-radius: var(--rvc-toast-border-radius);
+      transition-property: var(--rvc-toast-transition-property);
+      transition-duration: var(--rvc-toast-transition-duration);
+      transition-timing-function: var(--rvc-toast-transition-timing-function);
+      display: inline-flex;
+      justify-content: center;
+      align-items: center;
+      position: absolute;
+      top: 0;
+      right: 0;
+      padding: calc(var(--spacing) * 1.5);
+
+      &:hover {
+        background-color: var(--rvc-toast-close-bg-color-hover);
+        color: var(--rvc-toast-icon-color-hover);
+      }
+    }
+
+    .rvc-toast-icon {
+      width: var(--rvc-toast-icon-size);
+      height: var(--rvc-toast-icon-size);
+      color: var(--rvc-toast-icon-color);
+      display: block;
+      flex-shrink: 0;
+    }
+
+    .rvc-toast-title {
+      color: var(--rvc-toast-title-color);
+      font-weight: var(--rvc-toast-title-font-weight);
+      display: block;
+      margin-bottom: calc(var(--spacing) * 2);
+
+      &:last-child {
+        margin-bottom: 0;
+      }
+    }
+
+    &.rvc-toast-warning {
+      --rvc-toast-bg-color: var(--rvc-toast-bg-color-warning);
+      --rvc-toast-border-color: var(--rvc-toast-border-color-warning);
+      --rvc-toast-color: var(--rvc-toast-color-warning);
+      --rvc-toast-icon-color: var(--rvc-toast-icon-color-warning);
+      --rvc-toast-title-color: var(--rvc-toast-title-color-warning);
+      --rvc-toast-close-bg-color: var(--rvc-toast-close-bg-color-warning);
+      --rvc-toast-close-bg-color-hover: var(--rvc-toast-close-bg-color-warning-hover);
+      --rvc-toast-anchor-color-hover: var(--rvc-toast-anchor-color-warning-hover);
+    }
+
+    &.rvc-toast-success {
+      --rvc-toast-bg-color: var(--rvc-toast-bg-color-success);
+      --rvc-toast-border-color: var(--rvc-toast-border-color-success);
+      --rvc-toast-color: var(--rvc-toast-color-success);
+      --rvc-toast-icon-color: var(--rvc-toast-icon-color-success);
+      --rvc-toast-title-color: var(--rvc-toast-title-color-success);
+      --rvc-toast-close-bg-color: var(--rvc-toast-close-bg-color-success);
+      --rvc-toast-close-bg-color-hover: var(--rvc-toast-close-bg-color-success-hover);
+      --rvc-toast-anchor-color-hover: var(--rvc-toast-anchor-color-success-hover);
+    }
+
+    &.rvc-toast-danger {
+      --rvc-toast-bg-color: var(--rvc-toast-bg-color-danger);
+      --rvc-toast-border-color: var(--rvc-toast-border-color-danger);
+      --rvc-toast-color: var(--rvc-toast-color-danger);
+      --rvc-toast-icon-color: var(--rvc-toast-icon-color-danger);
+      --rvc-toast-title-color: var(--rvc-toast-title-color-danger);
+      --rvc-toast-close-bg-color: var(--rvc-toast-close-bg-color-danger);
+      --rvc-toast-close-bg-color-hover: var(--rvc-toast-close-bg-color-danger-hover);
+      --rvc-toast-anchor-color-hover: var(--rvc-toast-anchor-color-danger-hover);
+    }
+  }
+}

package/dist/tooltip/index.js

@@ -0,0 +1,5 @@
+import { _ as o } from "../_shared/Tooltip-BKXJoJ1x.js";
+export {
+  o as Tooltip,
+  o as default
+};

package/dist/tooltip/styles.css

@@ -0,0 +1 @@
+@import "./tooltip.css";