@rei/cedar 13.4.0-alpha.1 → 13.4.0

package/dist/src/components/switch/CdrSwitch.vue.mjs

@@ -0,0 +1,76 @@
+import { defineComponent as h, useCssModule as p, computed as m, resolveComponent as u, openBlock as C, createElementBlock as y, normalizeClass as s, createElementVNode as n, renderSlot as _, createVNode as f } from "vue";
+import b from "../../utils/propValidator.mjs";
+import { buildBooleanClass as w } from "../../utils/buildClass.mjs";
+import k from "../icon/comps/check-sm.vue.mjs";
+import $ from "../icon/comps/x-sm.vue.mjs";
+import v from "../../utils/mapClasses.mjs";
+import S from "../../utils/uid.mjs";
+import V from "./styles/CdrSwitch.module.scss.mjs";
+import z from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const B = h({
+  name: "CdrSwitch",
+  components: {
+    IconCheckSm: k,
+    IconXSm: $
+  },
+  props: {
+    id: {
+      type: String
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => b(e, ["medium", "large"])
+    },
+    fullWidth: {
+      type: Boolean,
+      default: !1
+    },
+    modelValue: {
+      type: Boolean,
+      required: !0
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(e, l) {
+    const d = p(), a = e.id ? e.id : S(), c = (r) => {
+      l.emit("update:modelValue", !r);
+    }, o = "cdr-switch", t = m(() => e.size ? `cdr-switch--${e.size}` : "cdr-switch--medium"), i = m(() => e.fullWidth && w(o, e.fullWidth, "full-width"));
+    return {
+      style: d,
+      mapClasses: v,
+      uniqueId: a,
+      onClick: c,
+      baseClass: o,
+      sizeClass: t,
+      fullWidthClass: i
+    };
+  }
+}), I = ["id"], W = ["aria-checked", "aria-labelledby"];
+function g(e, l, d, a, c, o) {
+  const t = u("icon-check-sm"), i = u("icon-x-sm");
+  return C(), y("div", {
+    class: s(e.mapClasses(e.style, e.baseClass, e.fullWidthClass, e.sizeClass))
+  }, [n("div", {
+    id: e.uniqueId,
+    class: s(e.style["cdr-switch__label"])
+  }, [_(e.$slots, "default")], 10, I), n("button", {
+    onClick: l[0] || (l[0] = (r) => e.onClick(e.modelValue)),
+    class: s(e.style["cdr-switch__button"]),
+    role: "switch",
+    "aria-checked": e.modelValue,
+    "aria-labelledby": e.uniqueId
+  }, [f(t, {
+    class: s(e.style["cdr-switch__button-icon"])
+  }, null, 8, ["class"]), f(i, {
+    class: s(e.style["cdr-switch__button-icon"])
+  }, null, 8, ["class"]), n("div", {
+    class: s(e.style["cdr-switch__handle"])
+  }, null, 2)], 10, W)], 2);
+}
+const q = {
+  $style: V
+}, F = /* @__PURE__ */ z(B, [["render", g], ["__cssModules", q]]);
+export {
+  F as default
+};

package/dist/src/components/switch/styles/CdrSwitch.module.scss.mjs

@@ -0,0 +1,13 @@
+const c = {
+  "cdr-switch": "cdr-switch_13-4-0",
+  "cdr-switch__button": "cdr-switch__button_13-4-0",
+  "cdr-switch__button-icon": "cdr-switch__button-icon_13-4-0",
+  "cdr-switch__handle": "cdr-switch__handle_13-4-0",
+  "cdr-switch__label": "cdr-switch__label_13-4-0",
+  "cdr-switch--full-width": "cdr-switch--full-width_13-4-0",
+  "cdr-switch--large": "cdr-switch--large_13-4-0",
+  "cdr-switch--medium": "cdr-switch--medium_13-4-0"
+};
+export {
+  c as default
+};

package/dist/src/components/table/CdrTable.vue.mjs

@@ -0,0 +1,63 @@
+import { defineComponent as u, computed as l, useCssModule as f, openBlock as m, createElementBlock as p, normalizeClass as C, createElementVNode as c, mergeProps as $, renderSlot as b } from "vue";
+import h from "../../utils/mapClasses.mjs";
+import { buildBooleanClass as v } from "../../utils/buildClass.mjs";
+import y from "../../utils/propValidator.mjs";
+import B from "./styles/CdrTable.module.scss.mjs";
+import z from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const W = u({
+  name: "CdrTable",
+  props: {
+    striped: {
+      type: Boolean,
+      default: !1
+    },
+    border: {
+      type: Boolean,
+      default: !0
+    },
+    fullWidth: {
+      type: [Boolean, String],
+      default: !0
+    },
+    responsive: {
+      type: Boolean,
+      default: !0
+    },
+    hover: {
+      type: Boolean,
+      default: !1
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: (e) => y(e, ["small", "medium", "large"])
+    }
+  },
+  setup(e) {
+    const s = "cdr-table", t = l(() => e.size && `${s}--${e.size}`), o = l(() => e.striped && `${s}--striped`), r = l(() => e.hover && `${s}--hover`), a = l(() => e.border && !e.striped && `${s}--border`), d = l(() => e.fullWidth && v(s, e.fullWidth, "full-width")), i = l(() => e.responsive && `${s}--responsive`), n = f();
+    return {
+      mapClasses: h,
+      baseClass: s,
+      sizeClass: t,
+      stripedClass: o,
+      hoverClass: r,
+      borderClass: a,
+      fullWidthClass: d,
+      wrapperClass: i,
+      style: n
+    };
+  }
+});
+function g(e, s, t, o, r, a) {
+  return m(), p("div", {
+    class: C(e.style[e.wrapperClass])
+  }, [c("table", $(e.$attrs, {
+    class: e.mapClasses(e.style, e.baseClass, e.sizeClass, e.stripedClass, e.hoverClass, e.borderClass, e.fullWidthClass)
+  }), [b(e.$slots, "default")], 16)], 2);
+}
+const w = {
+  $style: B
+}, N = /* @__PURE__ */ z(W, [["render", g], ["__cssModules", w]]);
+export {
+  N as default
+};

package/dist/src/components/table/styles/CdrTable.module.scss.mjs

@@ -0,0 +1,18 @@
+const l = {
+  "cdr-table": "cdr-table_13-4-0",
+  "cdr-table--small": "cdr-table--small_13-4-0",
+  "cdr-table--medium": "cdr-table--medium_13-4-0",
+  "cdr-table--large": "cdr-table--large_13-4-0",
+  "cdr-table--striped": "cdr-table--striped_13-4-0",
+  "cdr-table--border": "cdr-table--border_13-4-0",
+  "cdr-table--full-width": "cdr-table--full-width_13-4-0",
+  "cdr-table--responsive": "cdr-table--responsive_13-4-0",
+  "cdr-table--hover": "cdr-table--hover_13-4-0",
+  "cdr-table--full-width@xs": "cdr-table--full-width@xs_13-4-0",
+  "cdr-table--full-width@sm": "cdr-table--full-width@sm_13-4-0",
+  "cdr-table--full-width@md": "cdr-table--full-width@md_13-4-0",
+  "cdr-table--full-width@lg": "cdr-table--full-width@lg_13-4-0"
+};
+export {
+  l as default
+};

package/dist/src/components/tabs/CdrTabPanel.vue.mjs

@@ -0,0 +1,38 @@
+import { defineComponent as r, inject as c, computed as i, useCssModule as d, watch as m, withDirectives as p, openBlock as u, createElementBlock as b, normalizeClass as f, renderSlot as h, vShow as v } from "vue";
+import { kebabCase as $ } from "lodash-es";
+import y from "./styles/CdrTabPanel.module.scss.mjs";
+import C from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const _ = r({
+  name: "CdrTabPanel",
+  props: {
+    name: String
+  },
+  emits: ["tab-change"],
+  setup(e, s) {
+    const a = c("selectedTabName"), t = i(() => e.name === (a == null ? void 0 : a.value)), n = i(() => `${$(e.name)}-panel`), o = d();
+    return m(t, (l) => {
+      s.emit("tab-change", l, n.value);
+    }), {
+      selectedTabName: a,
+      isActive: t,
+      panelId: n,
+      style: o
+    };
+  }
+}), g = ["aria-hidden", "id", "aria-labelledby"];
+function k(e, s, a, t, n, o) {
+  return p((u(), b("section", {
+    tabindex: "0",
+    "aria-hidden": !e.isActive,
+    role: "tabpanel",
+    class: f(e.style["cdr-tab-panel"]),
+    id: e.panelId,
+    "aria-labelledby": e.name
+  }, [h(e.$slots, "default")], 10, g)), [[v, e.isActive]]);
+}
+const w = {
+  $style: y
+}, I = /* @__PURE__ */ C(_, [["render", k], ["__cssModules", w]]);
+export {
+  I as default
+};

package/dist/src/components/tabs/CdrTabs.vue.mjs

@@ -0,0 +1,168 @@
+import { defineComponent as V, ref as r, provide as j, computed as h, onMounted as q, useCssModule as G, openBlock as L, createElementBlock as N, normalizeClass as c, normalizeStyle as C, createElementVNode as b, Fragment as J, renderList as Q, withModifiers as Y, withKeys as W, toDisplayString as Z, renderSlot as x, nextTick as ee } from "vue";
+import { debounce as A } from "lodash-es";
+import { CdrColorBackgroundPrimary as te, CdrSpaceHalfX as ae, CdrSpaceOneX as le } from "../../../node_modules/@rei/cdr-tokens/dist/js/cdr-tokens.mjs";
+import se from "../../utils/mapClasses.mjs";
+import { modifyClassName as B } from "../../utils/buildClass.mjs";
+import re from "./styles/CdrTabs.module.scss.mjs";
+import ne from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const ie = V({
+  name: "CdrTabs",
+  props: {
+    height: {
+      type: String,
+      default: "240px"
+    },
+    activeTab: {
+      type: Number,
+      default: 0
+    },
+    modifier: String,
+    size: String,
+    backgroundColor: {
+      type: String,
+      default: te
+    }
+  },
+  setup(e, d) {
+    var R;
+    const T = (R = d.slots.default()[0].children) != null && R.length ? d.slots.default()[0].children : d.slots.default(), z = "cdr-tabs", p = r(T.map((a) => ({
+      name: a.props.name,
+      disabled: a.props.disabled,
+      id: a.props["aria-labelledby"]
+    }))), m = r(null), l = r(null), n = r(!1), s = r(0), o = r([]), v = r(null), S = r(null), k = r(!1), w = r(!1), i = r(0), f = r(0);
+    j("selectedTabName", m);
+    const X = h(() => e.modifier && B("cdr-tabs", e.modifier)), O = h(() => e.size && B("cdr-tabs", e.size)), P = h(() => ({
+      transform: `translateX(${i.value}px)`,
+      width: `${f.value}px`
+    })), F = h(() => ({
+      background: `linear-gradient(to left, rgba(255, 255, 255, 0), ${e.backgroundColor})`
+    })), _ = h(() => ({
+      background: `linear-gradient(to right, rgba(255, 255, 255, 0),
+        ${e.backgroundColor})`
+    })), H = (a, t) => l.value === a && !t.disabled, y = () => {
+      let a = 0;
+      if (S.value && (a = S.value.offsetWidth), n.value = s.value > a, n.value) {
+        const t = v.value.scrollLeft;
+        k.value = t > 1, w.value = t + 1 < s.value - a;
+      } else
+        k.value = !1, w.value = !1;
+    }, E = () => {
+      let a = [];
+      v.value && (a = Array.from(v.value.children));
+      let t = 0;
+      return a.forEach((u, $) => {
+        $ > 0 && (t += e.size === "small" ? Number(ae) : Number(le)), t += u.offsetWidth || 0;
+      }), t;
+    }, g = () => {
+      if (o.value.length > 0) {
+        const t = o.value[l.value].getBoundingClientRect(), u = v.value.getBoundingClientRect(), $ = t.x - u.x;
+        i.value = $ - v.value.scrollLeft, f.value = t.width, i.value + f.value >= u.width ? (f.value = Math.max(0, u.width - i.value), i.value = Math.min(i.value, u.width)) : i.value < 0 && (f.value = Math.max(0, f.value + i.value), i.value = 0);
+      }
+    }, I = async (a) => {
+      const t = o.value[a];
+      m.value = p.value[a].name, l.value = a, await ee(), t.focus(), g();
+    }, K = () => {
+      if (l.value === o.value.length - 1)
+        return;
+      let t = l.value + 1;
+      o.value[t].disabled && (t += 1), t <= o.value.length - 1 && I(t);
+    }, D = () => {
+      if (l.value <= 0)
+        return;
+      let t = l.value - 1;
+      o.value[t].disabled && (t -= 1), t >= 0 && I(t);
+    }, M = () => {
+      o.value.forEach((a, t) => {
+        !a.disabled && l.value === null && (l.value = t, m.value = p.value[t].name);
+      });
+    };
+    q(() => {
+      M(), s.value = E(), y(), setTimeout(() => {
+        g();
+      }, 250), window.addEventListener("resize", A(() => {
+        s.value = E(), y(), g();
+      }, 250)), v.value.addEventListener("scroll", A(() => {
+        y(), g();
+      }, 50));
+    });
+    const U = G();
+    return {
+      slottedTabs: T,
+      baseClass: z,
+      tabs: p,
+      selectedTabName: m,
+      selectedIndex: l,
+      headerOverflow: n,
+      headerWidth: s,
+      tabElements: o,
+      tablist: v,
+      containerEl: S,
+      overflowLeft: k,
+      overflowRight: w,
+      underlineOffsetX: i,
+      underlineWidth: f,
+      mapClasses: se,
+      modifierClass: X,
+      sizeClass: O,
+      underlineStyle: P,
+      gradientLeftStyle: F,
+      gradientRightStyle: _,
+      checkIfActive: H,
+      calculateOverflow: y,
+      getHeaderWidth: E,
+      updateUnderline: g,
+      selectTabNext: K,
+      selectTabPrev: D,
+      selectTab: I,
+      setInitialTabStates: M,
+      style: U
+    };
+  }
+}), oe = ["id", "disabled", "aria-selected", "tabIndex", "onClick"];
+function de(e, d, T, z, p, m) {
+  return L(), N("div", {
+    class: c(e.mapClasses(e.style, e.baseClass, e.modifierClass, e.sizeClass)),
+    ref: "containerEl",
+    style: C({
+      height: e.height
+    })
+  }, [b("div", {
+    class: c(e.style["cdr-tabs__gradient-container"])
+  }, [b("div", {
+    class: c(e.mapClasses(e.style, "cdr-tabs__gradient", "cdr-tabs__gradient--left", e.overflowLeft ? "cdr-tabs__gradient--active" : "")),
+    style: C(e.gradientLeftStyle)
+  }, null, 6), b("ul", {
+    class: c(e.style["cdr-tabs__header-container"]),
+    role: "tablist",
+    ref: "tablist"
+  }, [(L(!0), N(J, null, Q(e.tabs, (l, n) => (L(), N("li", {
+    key: `${l.name}-${n}`,
+    role: "presentation",
+    class: c(e.style["cdr-tabs__header"])
+  }, [b("button", {
+    ref_for: !0,
+    ref: (s) => {
+      e.tabElements[n] = s;
+    },
+    id: l.id,
+    disabled: l.disabled,
+    "aria-selected": e.checkIfActive(n, l),
+    tabIndex: e.checkIfActive(n, l) ? 0 : -1,
+    class: c(e.mapClasses(e.style, e.checkIfActive(n, l) ? "cdr-tabs__header-item-active" : "", "cdr-tabs__header-item", l.disabled ? "cdr-tabs__header-item--disabled" : "")),
+    role: "tab",
+    onClick: Y((s) => e.selectTab(n), ["prevent"]),
+    onKeyup: [d[0] || (d[0] = W((...s) => e.selectTabNext && e.selectTabNext(...s), ["right"])), d[1] || (d[1] = W((...s) => e.selectTabPrev && e.selectTabPrev(...s), ["left"]))]
+  }, Z(l.name), 43, oe)], 2))), 128))], 2), b("div", {
+    class: c(e.mapClasses(e.style, "cdr-tabs__gradient", "cdr-tabs__gradient--right", e.overflowRight ? "cdr-tabs__gradient--active" : "")),
+    style: C(e.gradientRightStyle)
+  }, null, 6), b("div", {
+    class: c(e.style["cdr-tabs__underline"]),
+    style: C(e.underlineStyle)
+  }, null, 6)], 2), x(e.$slots, "default")], 6);
+}
+const ue = {
+  $style: re
+}, pe = /* @__PURE__ */ ne(ie, [["render", de], ["__cssModules", ue]]);
+export {
+  pe as default
+};

package/dist/src/components/tabs/styles/CdrTabPanel.module.scss.mjs

@@ -0,0 +1,10 @@
+const t = {
+  "cdr-tab-panel": "cdr-tab-panel_13-4-0",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-4-0",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-4-0",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-4-0",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-4-0"
+};
+export {
+  t as default
+};

package/dist/src/components/tabs/styles/CdrTabs.module.scss.mjs

@@ -0,0 +1,33 @@
+const e = {
+  "cdr-tab-panel": "cdr-tab-panel_13-4-0",
+  "cdr-tab-panel-enter-left": "cdr-tab-panel-enter-left_13-4-0",
+  "cdr-tab-panel-enter-right": "cdr-tab-panel-enter-right_13-4-0",
+  "cdr-tab-panel-exit-left": "cdr-tab-panel-exit-left_13-4-0",
+  "cdr-tab-panel-exit-right": "cdr-tab-panel-exit-right_13-4-0",
+  "cdr-tabs": "cdr-tabs_13-4-0",
+  "cdr-tabs__header-container": "cdr-tabs__header-container_13-4-0",
+  "cdr-tabs__header": "cdr-tabs__header_13-4-0",
+  "cdr-tabs__header-item": "cdr-tabs__header-item_13-4-0",
+  "cdr-tabs__header-item-active": "cdr-tabs__header-item-active_13-4-0",
+  "cdr-tabs__header-item--disabled": "cdr-tabs__header-item--disabled_13-4-0",
+  "cdr-tabs__gradient-container": "cdr-tabs__gradient-container_13-4-0",
+  "cdr-tabs__gradient": "cdr-tabs__gradient_13-4-0",
+  "cdr-tabs__gradient--left": "cdr-tabs__gradient--left_13-4-0",
+  "cdr-tabs__gradient--right": "cdr-tabs__gradient--right_13-4-0",
+  "cdr-tabs__gradient--active": "cdr-tabs__gradient--active_13-4-0",
+  "cdr-tabs__underline": "cdr-tabs__underline_13-4-0",
+  "cdr-tabs__content-container": "cdr-tabs__content-container_13-4-0",
+  "fade-enter-active": "fade-enter-active_13-4-0",
+  "fade-leave-active": "fade-leave-active_13-4-0",
+  "fade-enter": "fade-enter_13-4-0",
+  "fade-leave-to": "fade-leave-to_13-4-0",
+  "cdr-tabs--compact": "cdr-tabs--compact_13-4-0",
+  "cdr-tabs__header-item-label": "cdr-tabs__header-item-label_13-4-0",
+  "cdr-tabs--small": "cdr-tabs--small_13-4-0",
+  "cdr-tabs--no-border": "cdr-tabs--no-border_13-4-0",
+  "cdr-tabs--full-width": "cdr-tabs--full-width_13-4-0",
+  "cdr-tabs--centered": "cdr-tabs--centered_13-4-0"
+};
+export {
+  e as default
+};

package/dist/src/components/text/CdrText.vue.mjs

@@ -0,0 +1,31 @@
+import { defineComponent as t, useCssModule as s, openBlock as o, createBlock as r, resolveDynamicComponent as n, normalizeClass as l, withCtx as a, renderSlot as p } from "vue";
+import c from "./styles/CdrText.module.scss.mjs";
+import d from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const u = t({
+  name: "CdrText",
+  props: {
+    tag: {
+      type: String,
+      default: "p"
+    }
+  },
+  setup() {
+    return {
+      style: s()
+    };
+  }
+});
+function f(e, i, _, C, y, $) {
+  return o(), r(n(e.tag), {
+    class: l(e.style["cdr-text"])
+  }, {
+    default: a(() => [p(e.$slots, "default")]),
+    _: 3
+  }, 8, ["class"]);
+}
+const m = {
+  $style: c
+}, h = /* @__PURE__ */ d(u, [["render", f], ["__cssModules", m]]);
+export {
+  h as default
+};

package/dist/src/components/text/styles/CdrText.module.scss.mjs

@@ -0,0 +1,6 @@
+const t = {
+  "cdr-text": "cdr-text_13-4-0"
+};
+export {
+  t as default
+};

package/dist/src/components/toast/CdrToast.vue.mjs

@@ -0,0 +1,110 @@
+import { defineComponent as D, useCssModule as L, ref as _, computed as N, watch as g, onUpdated as w, resolveComponent as C, openBlock as u, createBlock as I, Transition as M, withCtx as $, createElementBlock as E, normalizeClass as n, createElementVNode as T, renderSlot as f, createCommentVNode as b, createVNode as h } from "vue";
+import S from "../../utils/propValidator.mjs";
+import V from "../icon/comps/x-sm.vue.mjs";
+import z from "../button/CdrButton.vue.mjs";
+import H from "./styles/CdrToast.module.scss.mjs";
+import P from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const U = D({
+  name: "CdrToast",
+  components: {
+    IconXSm: V,
+    CdrButton: z
+  },
+  props: {
+    type: {
+      type: String,
+      validator: (e) => S(e, ["info", "warning", "success", "error", "default"]),
+      default: "default"
+    },
+    open: {
+      type: Boolean,
+      default: !1
+    },
+    autoDismiss: {
+      type: Boolean,
+      default: !0
+    },
+    dismissDelay: {
+      type: Number,
+      default: 5e3
+    }
+  },
+  emits: ["open", "closed"],
+  setup(e, a) {
+    const d = "cdr-toast", v = L(), p = a.slots["icon-left"], l = _(null), r = _(null);
+    let s, t;
+    const k = N(() => e.type && `${d}--${e.type}`), i = (o) => {
+      s ? clearTimeout(s) : a.emit("open", o), l.value = !0, e.autoDismiss && !o && c();
+    }, B = (o) => {
+      m(), l.value = !1, a.emit("closed", o);
+    }, c = (o) => {
+      s = setTimeout(() => {
+        m(), l.value = !1, a.emit("closed", o);
+      }, e.dismissDelay);
+    }, y = () => {
+      t = r.value, t && (t.addEventListener("mouseover", i), t.addEventListener("mouseleave", c));
+    }, m = () => {
+      t && (t.removeEventListener("mouseover", i), t.removeEventListener("mouseleave", c));
+    };
+    return g(() => e.open, () => {
+      e.open && i();
+    }), w(() => {
+      e.autoDismiss && y();
+    }), {
+      baseClass: d,
+      style: v,
+      hasIconLeft: p,
+      opened: l,
+      toastEl: r,
+      timeout: s,
+      toastElement: t,
+      typeClass: k,
+      openToast: i,
+      closeToast: B,
+      closeToastWithDelay: c,
+      addHandlers: y,
+      removeHandlers: m
+    };
+  }
+});
+function W(e, a, d, v, p, l) {
+  const r = C("icon-x-sm"), s = C("cdr-button");
+  return u(), I(M, {
+    "enter-from-class": e.style["cdr-toast__transition--toast-enter-from"],
+    "enter-active-class": e.style["cdr-toast__transition--toast-enter-active"],
+    "leave-to-class": e.style["cdr-toast__transition--toast-leave-to"],
+    "leave-active-class": e.style["cdr-toast__transition--toast-leave-active"]
+  }, {
+    default: $(() => [e.opened ? (u(), E("div", {
+      key: 0,
+      class: n([e.style[e.baseClass], e.style[e.typeClass]]),
+      role: "status",
+      ref: "toastEl"
+    }, [T("div", {
+      class: n([e.style["cdr-toast__main"]])
+    }, [e.hasIconLeft ? (u(), E("div", {
+      key: 0,
+      class: n([e.style["cdr-toast__icon-left"]])
+    }, [f(e.$slots, "icon-left")], 2)) : b("", !0), T("span", {
+      class: n([e.style["cdr-toast__message"]])
+    }, [f(e.$slots, "default")], 2), h(s, {
+      class: n([e.style["cdr-toast__close-button"]]),
+      "icon-only": "",
+      onClick: e.closeToast,
+      "aria-label": "Close",
+      size: "small"
+    }, {
+      default: $(() => [f(e.$slots, "icon", {}, () => [h(r, {
+        "inherit-color": ""
+      })])]),
+      _: 3
+    }, 8, ["class", "onClick"])], 2)], 2)) : b("", !0)]),
+    _: 3
+  }, 8, ["enter-from-class", "enter-active-class", "leave-to-class", "leave-active-class"]);
+}
+const X = {
+  $style: H
+}, K = /* @__PURE__ */ P(U, [["render", W], ["__cssModules", X]]);
+export {
+  K as default
+};

package/dist/src/components/toast/styles/CdrToast.module.scss.mjs

@@ -0,0 +1,62 @@
+const t = {
+  "cdr-button": "cdr-button_13-4-0",
+  "cdr-button--has-icon-left": "cdr-button--has-icon-left_13-4-0",
+  "cdr-button--has-icon-right": "cdr-button--has-icon-right_13-4-0",
+  "cdr-button--primary": "cdr-button--primary_13-4-0",
+  "cdr-button--secondary": "cdr-button--secondary_13-4-0",
+  "cdr-button--dark": "cdr-button--dark_13-4-0",
+  "cdr-button--sale": "cdr-button--sale_13-4-0",
+  "cdr-button--link": "cdr-button--link_13-4-0",
+  "cdr-button--large": "cdr-button--large_13-4-0",
+  "cdr-button--medium": "cdr-button--medium_13-4-0",
+  "cdr-button--small": "cdr-button--small_13-4-0",
+  "cdr-button--icon-only": "cdr-button--icon-only_13-4-0",
+  "cdr-button--icon-only-large": "cdr-button--icon-only-large_13-4-0",
+  "cdr-button--with-background": "cdr-button--with-background_13-4-0",
+  "cdr-button--full-width": "cdr-button--full-width_13-4-0",
+  "cdr-button--small@xs": "cdr-button--small@xs_13-4-0",
+  "cdr-button--medium@xs": "cdr-button--medium@xs_13-4-0",
+  "cdr-button--large@xs": "cdr-button--large@xs_13-4-0",
+  "cdr-button--full-width@xs": "cdr-button--full-width@xs_13-4-0",
+  "cdr-button--small@sm": "cdr-button--small@sm_13-4-0",
+  "cdr-button--medium@sm": "cdr-button--medium@sm_13-4-0",
+  "cdr-button--large@sm": "cdr-button--large@sm_13-4-0",
+  "cdr-button--full-width@sm": "cdr-button--full-width@sm_13-4-0",
+  "cdr-button--small@md": "cdr-button--small@md_13-4-0",
+  "cdr-button--medium@md": "cdr-button--medium@md_13-4-0",
+  "cdr-button--large@md": "cdr-button--large@md_13-4-0",
+  "cdr-button--full-width@md": "cdr-button--full-width@md_13-4-0",
+  "cdr-button--small@lg": "cdr-button--small@lg_13-4-0",
+  "cdr-button--medium@lg": "cdr-button--medium@lg_13-4-0",
+  "cdr-button--large@lg": "cdr-button--large@lg_13-4-0",
+  "cdr-button--full-width@lg": "cdr-button--full-width@lg_13-4-0",
+  "cdr-icon": "cdr-icon_13-4-0",
+  "cdr-icon--small": "cdr-icon--small_13-4-0",
+  "cdr-icon--large": "cdr-icon--large_13-4-0",
+  "cdr-icon--small@xs": "cdr-icon--small@xs_13-4-0",
+  "cdr-icon--large@xs": "cdr-icon--large@xs_13-4-0",
+  "cdr-icon--small@sm": "cdr-icon--small@sm_13-4-0",
+  "cdr-icon--large@sm": "cdr-icon--large@sm_13-4-0",
+  "cdr-icon--small@md": "cdr-icon--small@md_13-4-0",
+  "cdr-icon--large@md": "cdr-icon--large@md_13-4-0",
+  "cdr-icon--small@lg": "cdr-icon--small@lg_13-4-0",
+  "cdr-icon--large@lg": "cdr-icon--large@lg_13-4-0",
+  "cdr-icon--inherit-color": "cdr-icon--inherit-color_13-4-0",
+  "cdr-toast": "cdr-toast_13-4-0",
+  "cdr-toast__transition--toast-enter-from": "cdr-toast__transition--toast-enter-from_13-4-0",
+  "cdr-toast__transition--toast-enter-active": "cdr-toast__transition--toast-enter-active_13-4-0",
+  "cdr-toast__transition--toast-leave-to": "cdr-toast__transition--toast-leave-to_13-4-0",
+  "cdr-toast__transition--toast-leave-active": "cdr-toast__transition--toast-leave-active_13-4-0",
+  "cdr-toast__main": "cdr-toast__main_13-4-0",
+  "cdr-toast__icon-left": "cdr-toast__icon-left_13-4-0",
+  "cdr-toast__message": "cdr-toast__message_13-4-0",
+  "cdr-toast__close-button": "cdr-toast__close-button_13-4-0",
+  "cdr-toast--default": "cdr-toast--default_13-4-0",
+  "cdr-toast--info": "cdr-toast--info_13-4-0",
+  "cdr-toast--warning": "cdr-toast--warning_13-4-0",
+  "cdr-toast--success": "cdr-toast--success_13-4-0",
+  "cdr-toast--error": "cdr-toast--error_13-4-0"
+};
+export {
+  t as default
+};