@rei/cedar 13.5.3 → 14.0.0-beta.0

package/dist/src/components/banner/CdrBanner.vue.mjs

@@ -1,61 +1,9 @@
-import { defineComponent as b, computed as y, useCssModule as g, openBlock as o, createElementBlock as a, normalizeClass as e, createElementVNode as i, renderSlot as r, createCommentVNode as l } from "vue";
-import h from "../../utils/propValidator.mjs";
-import $ from "./styles/CdrBanner.module.scss.mjs";
-import C from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const v = b({
-  name: "CdrBanner",
-  props: {
-    /**
-     * Sets the banner style.
-     * @demoSelectMultiple false
-     * @values info, warning, success, error, default
-    */
-    type: {
-      type: String,
-      validator: (s) => h(s, ["info", "warning", "success", "error", "default"]),
-      default: "default"
-    }
-  },
-  setup(s, n) {
-    const t = "cdr-banner", d = y(() => `${t}--${s.type}`), c = y(() => n.slots["message-body"] ? `${t}__wrapper--prominence` : void 0), p = n.slots["icon-left"], f = n.slots["icon-right"], m = n.slots["message-body"], u = n.slots["info-action"];
-    return {
-      style: g(),
-      baseClass: t,
-      typeClass: d,
-      prominenceClass: c,
-      hasIconLeft: p,
-      hasIconRight: f,
-      hasMessageBody: m,
-      hasInfoAction: u
-    };
-  }
-});
-function k(s, n, t, d, c, p) {
-  return o(), a("div", {
-    class: e([s.style[s.baseClass], s.style[s.typeClass]])
-  }, [i("div", {
-    class: e([s.style["cdr-banner__wrapper"], s.style[s.prominenceClass]])
-  }, [i("div", {
-    class: e([s.style["cdr-banner__main"]])
-  }, [s.hasIconLeft ? (o(), a("div", {
-    key: 0,
-    class: e([s.style["cdr-banner__icon-left"]])
-  }, [r(s.$slots, "icon-left")], 2)) : l("", !0), i("span", {
-    class: e([s.style["cdr-banner__message"]])
-  }, [r(s.$slots, "default")], 2), s.hasIconRight ? (o(), a("div", {
-    key: 1,
-    class: e([s.style["cdr-banner__icon-right"]])
-  }, [r(s.$slots, "icon-right")], 2)) : l("", !0)], 2), s.hasMessageBody ? (o(), a("div", {
-    key: 0,
-    class: e([s.style["cdr-banner__message-body"]])
-  }, [r(s.$slots, "message-body")], 2)) : l("", !0)], 2), s.hasInfoAction ? (o(), a("div", {
-    key: 0,
-    class: e([s.style["cdr-banner__info-action"]])
-  }, [r(s.$slots, "info-action")], 2)) : l("", !0)], 2);
-}
-const B = {
-  $style: $
-}, A = /* @__PURE__ */ C(v, [["render", k], ["__cssModules", B]]);
+import s from "./CdrBanner.vue2.mjs";
+import o from "./styles/CdrBanner.module.scss.mjs";
+import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const t = {
+  $style: o
+}, f = /* @__PURE__ */ r(s, [["__cssModules", t]]);
 export {
-  A as default
+  f as default
 };

package/dist/src/components/banner/CdrBanner.vue2.mjs

@@ -0,0 +1,45 @@
+import { defineComponent as h, useSlots as C, useCssModule as $, computed as m, openBlock as r, createElementBlock as t, normalizeClass as n, unref as e, createElementVNode as d, renderSlot as c, createCommentVNode as l } from "vue";
+import k from "../../utils/propValidator.mjs";
+const p = "cdr-banner", S = /* @__PURE__ */ h({
+  name: "CdrBanner",
+  __name: "CdrBanner",
+  props: {
+    /**
+      * Sets the banner style.
+      * @demoSelectMultiple false
+      * @values info, warning, success, error, default
+    */
+    type: {
+      type: String,
+      validator: (i) => k(i, ["info", "warning", "success", "error", "default"]),
+      default: "default"
+    }
+  },
+  setup(i) {
+    const u = i, o = C(), s = $(), f = m(() => `${p}--${u.type}`), _ = m(() => o["message-body"] ? `${p}__wrapper--prominence` : ""), y = o["icon-left"], b = o["icon-right"], g = o["message-body"], v = o["info-action"];
+    return (a, B) => (r(), t("div", {
+      class: n([e(s)[p], e(s)[f.value]])
+    }, [d("div", {
+      class: n([e(s)["cdr-banner__wrapper"], e(s)[_.value]])
+    }, [d("div", {
+      class: n([e(s)["cdr-banner__main"]])
+    }, [e(y) ? (r(), t("div", {
+      key: 0,
+      class: n([e(s)["cdr-banner__icon-left"]])
+    }, [c(a.$slots, "icon-left")], 2)) : l("", !0), d("span", {
+      class: n([e(s)["cdr-banner__message"]])
+    }, [c(a.$slots, "default")], 2), e(b) ? (r(), t("div", {
+      key: 1,
+      class: n([e(s)["cdr-banner__icon-right"]])
+    }, [c(a.$slots, "icon-right")], 2)) : l("", !0)], 2), e(g) ? (r(), t("div", {
+      key: 0,
+      class: n([e(s)["cdr-banner__message-body"]])
+    }, [c(a.$slots, "message-body")], 2)) : l("", !0)], 2), e(v) ? (r(), t("div", {
+      key: 0,
+      class: n([e(s)["cdr-banner__info-action"]])
+    }, [c(a.$slots, "info-action")], 2)) : l("", !0)], 2));
+  }
+});
+export {
+  S as default
+};

package/dist/src/components/banner/styles/CdrBanner.module.scss.mjs

@@ -1,18 +1,18 @@
 const n = {
-  "cdr-banner": "cdr-banner_13-5-3",
-  "cdr-banner__wrapper--prominence": "cdr-banner__wrapper--prominence_13-5-3",
-  "cdr-banner__main": "cdr-banner__main_13-5-3",
-  "cdr-banner__icon-left": "cdr-banner__icon-left_13-5-3",
-  "cdr-banner__message": "cdr-banner__message_13-5-3",
-  "cdr-banner__message-body": "cdr-banner__message-body_13-5-3",
-  "cdr-banner__icon-right": "cdr-banner__icon-right_13-5-3",
-  "cdr-banner__info-action": "cdr-banner__info-action_13-5-3",
-  "cdr-banner--default": "cdr-banner--default_13-5-3",
-  "cdr-banner__wrapper": "cdr-banner__wrapper_13-5-3",
-  "cdr-banner--info": "cdr-banner--info_13-5-3",
-  "cdr-banner--warning": "cdr-banner--warning_13-5-3",
-  "cdr-banner--success": "cdr-banner--success_13-5-3",
-  "cdr-banner--error": "cdr-banner--error_13-5-3"
+  "cdr-banner": "cdr-banner_14-0-0-beta-0",
+  "cdr-banner__wrapper--prominence": "cdr-banner__wrapper--prominence_14-0-0-beta-0",
+  "cdr-banner__main": "cdr-banner__main_14-0-0-beta-0",
+  "cdr-banner__icon-left": "cdr-banner__icon-left_14-0-0-beta-0",
+  "cdr-banner__message": "cdr-banner__message_14-0-0-beta-0",
+  "cdr-banner__message-body": "cdr-banner__message-body_14-0-0-beta-0",
+  "cdr-banner__icon-right": "cdr-banner__icon-right_14-0-0-beta-0",
+  "cdr-banner__info-action": "cdr-banner__info-action_14-0-0-beta-0",
+  "cdr-banner--default": "cdr-banner--default_14-0-0-beta-0",
+  "cdr-banner__wrapper": "cdr-banner__wrapper_14-0-0-beta-0",
+  "cdr-banner--info": "cdr-banner--info_14-0-0-beta-0",
+  "cdr-banner--warning": "cdr-banner--warning_14-0-0-beta-0",
+  "cdr-banner--success": "cdr-banner--success_14-0-0-beta-0",
+  "cdr-banner--error": "cdr-banner--error_14-0-0-beta-0"
 };
 export {
   n as default

package/dist/src/components/breadcrumb/CdrBreadcrumb.vue.mjs

@@ -1,115 +1,9 @@
-import { defineComponent as h, ref as u, computed as b, watch as g, useCssModule as p, openBlock as r, createElementBlock as l, normalizeClass as s, createElementVNode as n, createCommentVNode as f, Fragment as k, renderList as C, withDirectives as _, renderSlot as $, toDisplayString as E, vShow as v, nextTick as L } from "vue";
-import B from "../../utils/uid.mjs";
-import w from "./styles/CdrBreadcrumb.module.scss.mjs";
-import q from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const S = h({
-  name: "CdrBreadcrumb",
-  props: {
-    /**
-     * Sets the array of a breadcrumb object containing a 'url' and 'name' property.
-     * @demoIgnore true
-     */
-    items: {
-      type: Array,
-      default: () => [],
-      validator: (e) => {
-        if (e.length && e.length > 0)
-          for (let t = 0; t < e.length; t += 1) {
-            if (typeof e[t].item != "object")
-              return console.error("Breadcrumb items array missing item key at index ", t), !1;
-            if (!Object.hasOwnProperty.call(e[t].item, "name"))
-              return console.error("Breadcrumb items array is missing item.name value at index ", t), !1;
-          }
-        return !0;
-      }
-    },
-    /**
-     * Controls the ability to truncate the entire breadcrumb path. If this value is false, truncation will no longer occur.
-     */
-    truncationEnabled: {
-      type: Boolean,
-      default: !0
-    },
-    /**
-     * Define a custom ID for the `<nav>` element. Randomly generated if no ID provided.
-     * @demoIgnore true
-     */
-    id: {
-      type: String
-    }
-  },
-  emits: {
-    /**
-     * Emits when a breadcrumb item is clicked. `e.preventDefault()` may be used to override the default link navigation.
-     * @param breadcrumb The breadcrumb data object
-     */
-    navigate: null
-  },
-  setup(e) {
-    const t = e.id ? e.id : B(), a = u(e.truncationEnabled && e.items.length > 2), o = u(null), d = b(() => {
-      const i = e.items.length - 2 > 1 ? "s" : "";
-      return `show ${e.items.length - 2} more navigation level${i}`;
-    }), m = () => {
-      a.value = !1, L(() => {
-        o.value.querySelector("li a").focus();
-      });
-    };
-    return g(() => e.items, () => {
-      a.value = e.truncationEnabled && e.items.length > 2;
-    }), {
-      style: p(),
-      uniqueId: t,
-      truncate: a,
-      itemListEl: o,
-      ellipsisLabel: d,
-      handleEllipsisClick: m
-    };
-  }
-}), I = ["id"], M = ["id"], j = ["aria-controls", "aria-label"], D = ["href", "onClick"];
-function N(e, t, a, o, d, m) {
-  return r(), l("nav", {
-    class: s(e.style["cdr-breadcrumb"]),
-    id: e.uniqueId,
-    "aria-label": "breadcrumbs"
-  }, [n("ol", {
-    id: `${e.uniqueId}List`,
-    class: s(e.style["cdr-breadcrumb__list"]),
-    ref: "itemListEl"
-  }, [e.truncate ? (r(), l("li", {
-    key: 0,
-    class: s(e.style["cdr-breadcrumb__item"])
-  }, [n("button", {
-    onClick: t[0] || (t[0] = (...i) => e.handleEllipsisClick && e.handleEllipsisClick(...i)),
-    "aria-expanded": "false",
-    class: s(e.style["cdr-breadcrumb__ellipses"]),
-    "aria-controls": `${e.uniqueId}List`,
-    "aria-label": e.ellipsisLabel
-  }, [n("span", {
-    class: s(e.style["cdr-breadcrumb__ellipses-icon"]),
-    "aria-hidden": "true"
-  }, " . . . ", 2)], 10, j), n("span", {
-    class: s(e.style["cdr-breadcrumb__delimiter"]),
-    "aria-hidden": "true"
-  }, " / ", 2)], 2)) : f("", !0), (r(!0), l(k, null, C(e.items, (i, c) => _((r(), l("li", {
-    class: s(e.style["cdr-breadcrumb__item"]),
-    key: i.item.id || i.item.name.replace(/ /g, "-").toLowerCase()
-  }, [$(e.$slots, "link", {
-    class: s(e.style["cdr-breadcrumb__link"]),
-    href: i.item.url,
-    content: i.item.name
-  }, () => [n("a", {
-    class: s(e.style["cdr-breadcrumb__link"]),
-    href: i.item.url,
-    onClick: (y) => e.$emit("navigate", i, y)
-  }, E(i.item.name), 11, D)]), c < e.items.length - 1 ? (r(), l("span", {
-    key: 0,
-    class: s(e.style["cdr-breadcrumb__delimiter"]),
-    "aria-hidden": "true"
-  }, " / ", 2)) : f("", !0)], 2)), [[v, !e.truncate || c >= e.items.length - 2]])), 128))], 10, M)], 10, I);
-}
-const O = {
-  $style: w
-}, P = /* @__PURE__ */ q(S, [["render", N], ["__cssModules", O]]);
+import s from "./CdrBreadcrumb.vue2.mjs";
+import o from "./styles/CdrBreadcrumb.module.scss.mjs";
+import r from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const t = {
+  $style: o
+}, f = /* @__PURE__ */ r(s, [["__cssModules", t]]);
 export {
-  P as default
+  f as default
 };

package/dist/src/components/breadcrumb/CdrBreadcrumb.vue2.mjs

@@ -0,0 +1,103 @@
+import { defineComponent as v, useCssModule as C, ref as h, computed as E, watch as B, openBlock as s, createElementBlock as c, normalizeClass as a, unref as t, createElementVNode as o, createCommentVNode as p, Fragment as L, renderList as w, withDirectives as $, renderSlot as S, toDisplayString as x, vShow as j, nextTick as q } from "vue";
+import A from "../../utils/uid.mjs";
+const D = ["id"], N = ["id"], O = ["aria-controls", "aria-label"], V = ["href", "onClick"], I = /* @__PURE__ */ v({
+  name: "CdrBreadcrumb",
+  __name: "CdrBreadcrumb",
+  props: {
+    /**
+      * Sets the array of a breadcrumb object containing a 'url' and 'name' property.
+      * @demoIgnore true
+      */
+    items: {
+      type: Array,
+      default: () => [],
+      validator: (r) => {
+        if (r.length && r.length > 0)
+          for (let e = 0; e < r.length; e += 1) {
+            if (typeof r[e].item != "object")
+              return console.error("Breadcrumb items array missing item key at index ", e), !1;
+            if (!Object.hasOwnProperty.call(r[e].item, "name"))
+              return console.error("Breadcrumb items array is missing item.name value at index ", e), !1;
+          }
+        return !0;
+      }
+    },
+    /**
+     * Controls the ability to truncate the entire breadcrumb path. If this value is false, truncation will no longer occur.
+     */
+    truncationEnabled: {
+      type: Boolean,
+      default: !0
+    },
+    /**
+     * Define a custom ID for the `<nav>` element. Randomly generated if no ID provided.
+     * @demoIgnore true
+     */
+    id: {
+      type: String
+    }
+  },
+  emits: {
+    /**
+    * Emits when a breadcrumb item is clicked. `e.preventDefault()` may be used to override the default link navigation.
+    * @param breadcrumb The breadcrumb data object
+    */
+    navigate: null
+  },
+  setup(r) {
+    const e = r, i = C(), m = e.id ? e.id : A(), d = h(e.truncationEnabled && e.items.length > 2), f = h(null), _ = h(null), g = E(() => {
+      const n = e.items.length - 2 > 1 ? "s" : "";
+      return `show ${e.items.length - 2} more navigation level${n}`;
+    }), y = () => {
+      d.value = !1, q(() => {
+        var n, u;
+        _.value = (n = f.value) == null ? void 0 : n.querySelector("li a"), (u = _.value) == null || u.focus();
+      });
+    };
+    return B(() => e.items, () => {
+      d.value = e.truncationEnabled && e.items.length > 2;
+    }), (n, u) => (s(), c("nav", {
+      class: a(t(i)["cdr-breadcrumb"]),
+      id: t(m),
+      "aria-label": "breadcrumbs"
+    }, [o("ol", {
+      id: `${t(m)}List`,
+      class: a(t(i)["cdr-breadcrumb__list"]),
+      ref_key: "itemListEl",
+      ref: f
+    }, [d.value ? (s(), c("li", {
+      key: 0,
+      class: a(t(i)["cdr-breadcrumb__item"])
+    }, [o("button", {
+      onClick: y,
+      "aria-expanded": "false",
+      class: a(t(i)["cdr-breadcrumb__ellipses"]),
+      "aria-controls": `${t(m)}List`,
+      "aria-label": g.value
+    }, [o("span", {
+      class: a(t(i)["cdr-breadcrumb__ellipses-icon"]),
+      "aria-hidden": "true"
+    }, " . . . ", 2)], 10, O), o("span", {
+      class: a(t(i)["cdr-breadcrumb__delimiter"]),
+      "aria-hidden": "true"
+    }, " / ", 2)], 2)) : p("", !0), (s(!0), c(L, null, w(r.items, (l, b) => $((s(), c("li", {
+      class: a(t(i)["cdr-breadcrumb__item"]),
+      key: l.item.id || l.item.name.replace(/ /g, "-").toLowerCase()
+    }, [S(n.$slots, "link", {
+      class: a(t(i)["cdr-breadcrumb__link"]),
+      href: l.item.url,
+      content: l.item.name
+    }, () => [o("a", {
+      class: a(t(i)["cdr-breadcrumb__link"]),
+      href: l.item.url,
+      onClick: (k) => n.$emit("navigate", l, k)
+    }, x(l.item.name), 11, V)]), b < r.items.length - 1 ? (s(), c("span", {
+      key: 0,
+      class: a(t(i)["cdr-breadcrumb__delimiter"]),
+      "aria-hidden": "true"
+    }, " / ", 2)) : p("", !0)], 2)), [[j, !d.value || b >= r.items.length - 2]])), 128))], 10, N)], 10, D));
+  }
+});
+export {
+  I as default
+};

package/dist/src/components/breadcrumb/styles/CdrBreadcrumb.module.scss.mjs

@@ -1,11 +1,11 @@
 const r = {
-  "cdr-breadcrumb": "cdr-breadcrumb_13-5-3",
-  "cdr-breadcrumb__list": "cdr-breadcrumb__list_13-5-3",
-  "cdr-breadcrumb__item": "cdr-breadcrumb__item_13-5-3",
-  "cdr-breadcrumb__link": "cdr-breadcrumb__link_13-5-3",
-  "cdr-breadcrumb__delimiter": "cdr-breadcrumb__delimiter_13-5-3",
-  "cdr-breadcrumb__ellipses": "cdr-breadcrumb__ellipses_13-5-3",
-  "cdr-breadcrumb__ellipses-icon": "cdr-breadcrumb__ellipses-icon_13-5-3"
+  "cdr-breadcrumb": "cdr-breadcrumb_14-0-0-beta-0",
+  "cdr-breadcrumb__list": "cdr-breadcrumb__list_14-0-0-beta-0",
+  "cdr-breadcrumb__item": "cdr-breadcrumb__item_14-0-0-beta-0",
+  "cdr-breadcrumb__link": "cdr-breadcrumb__link_14-0-0-beta-0",
+  "cdr-breadcrumb__delimiter": "cdr-breadcrumb__delimiter_14-0-0-beta-0",
+  "cdr-breadcrumb__ellipses": "cdr-breadcrumb__ellipses_14-0-0-beta-0",
+  "cdr-breadcrumb__ellipses-icon": "cdr-breadcrumb__ellipses-icon_14-0-0-beta-0"
 };
 export {
   r as default

package/dist/src/components/button/CdrButton.vue.mjs

@@ -1,104 +1,9 @@
-import { defineComponent as y, computed as o, useCssModule as C, openBlock as g, createBlock as h, resolveDynamicComponent as p, normalizeClass as $, withCtx as b, renderSlot as n } from "vue";
-import B from "../../utils/mapClasses.mjs";
-import { buildBooleanClass as k, responsiveModifyClass as w } from "../../utils/buildClass.mjs";
-import e from "../../utils/propValidator.mjs";
-import O from "./styles/CdrButton.module.scss.mjs";
-import v from "../../../_virtual/_plugin-vue_export-helper.mjs";
-const z = y({
-  name: "CdrButton",
-  props: {
-    /**
-     * Renders CdrButton as a <button> or <a> element. When using the value of <a>, this element renders as an anchor link.
-     * @demoIgnore true
-     * @values button, a
-     */
-    tag: {
-      type: String,
-      default: "button",
-      validator: (t) => e(t, ["button", "a"])
-    },
-    /**
-     * Sets the button type
-     * @demoIgnore true
-     * @values button, submit, reset
-     */
-    type: {
-      type: String,
-      default: "button",
-      validator: (t) => e(t, ["button", "submit", "reset"])
-    },
-    /**
-     * Modifies the style variant for this component
-     * @demoSelectMultiple false
-     * @values primary, secondary, sale, dark, link
-     */
-    modifier: {
-      type: String,
-      default: "primary",
-      validator: (t) => e(t, ["primary", "secondary", "sale", "dark", "link"])
-    },
-    /**
-     * Sets the button size; values can target responsive breakpoints. Example: `large@sm`.
-     * @demoSelectMultiple false
-     * @values small, medium, large
-     */
-    size: {
-      type: String,
-      default: "medium",
-      validator: (t) => e(t, ["small", "medium", "large"])
-    },
-    /**
-     * Sets button width to 100%. Setting this value to true will set the button width to 100% of the parent container. Use the 'fullWidth' prop with the 'size' prop to control top and bottom padding.
-     */
-    fullWidth: {
-      type: [String, Boolean],
-      default: !1,
-      validator: (t) => typeof t == "string" ? e(t, ["@xs", "@sm", "@md", "@lg"], !1) : typeof t == "boolean"
-    },
-    /**
-     * Renders an 'icon-only' button. When this value is true, it will override the size and 'responsiveSize' props. Can be used in conjunction with 'with-background'
-     */
-    iconOnly: {
-      type: Boolean,
-      default: !1
-    },
-    /**
-     * Renders an 'icon-only' button with a background color and border. Must be used in conjunction with the 'iconOnly' prop.
-     */
-    withBackground: {
-      type: Boolean,
-      default: !1
-    }
-  },
-  setup(t, l) {
-    const s = "cdr-button", a = o(() => t.tag === "button" ? t.type : null), i = o(() => `${s}--${t.modifier}`), r = o(() => !t.iconOnly && t.fullWidth && k(s, t.fullWidth, "full-width")), d = o(() => t.iconOnly ? `cdr-button--icon-only-${t.size}` : w(s, "", t.size)), u = o(() => l.slots["icon-left"] && l.slots.default && `${s}--has-icon-left`), f = o(() => l.slots["icon-right"] && l.slots.default && `${s}--has-icon-right`), c = o(() => t.iconOnly && `${s}--icon-only`), m = o(() => t.iconOnly && t.withBackground && `${s}--with-background`);
-    return {
-      style: C(),
-      mapClasses: B,
-      baseClass: s,
-      buttonType: a,
-      modifierClass: i,
-      fullWidthClass: r,
-      sizeClass: d,
-      iconLeftClass: u,
-      iconRightClass: f,
-      iconOnlyClass: c,
-      withBackgroundClass: m
-    };
-  }
-});
-function S(t, l, s, a, i, r) {
-  return g(), h(p(t.tag), {
-    class: $(t.mapClasses(t.style, t.baseClass, t.modifierClass, t.sizeClass, t.fullWidthClass, t.iconOnlyClass, t.iconLeftClass, t.iconRightClass, t.withBackgroundClass)),
-    type: t.buttonType
-  }, {
-    default: b(() => [n(t.$slots, "icon-left"), n(t.$slots, "icon"), n(t.$slots, "default"), n(t.$slots, "icon-right")]),
-    _: 3
-  }, 8, ["class", "type"]);
-}
-const W = {
-  $style: O
-}, j = /* @__PURE__ */ v(z, [["render", S], ["__cssModules", W]]);
+import o from "./CdrButton.vue2.mjs";
+import s from "./styles/CdrButton.module.scss.mjs";
+import t from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: s
+}, f = /* @__PURE__ */ t(o, [["__cssModules", r]]);
 export {
-  j as default
+  f as default
 };

package/dist/src/components/button/CdrButton.vue2.mjs

@@ -0,0 +1,85 @@
+import { defineComponent as h, useSlots as v, useCssModule as b, computed as e, openBlock as B, createBlock as $, resolveDynamicComponent as k, normalizeClass as S, unref as r, withCtx as w, renderSlot as i } from "vue";
+import O from "../../utils/mapClasses.mjs";
+import { buildBooleanClass as z, responsiveModifyClass as W } from "../../utils/buildClass.mjs";
+import n from "../../utils/propValidator.mjs";
+const l = "cdr-button", T = /* @__PURE__ */ h({
+  name: "CdrButton",
+  __name: "CdrButton",
+  props: {
+    /**
+       * Renders CdrButton as a <button> or <a> element. When using the value of <a>, this element renders as an anchor link.
+       * @demoIgnore true
+       * @values button, a
+       */
+    tag: {
+      type: String,
+      default: "button",
+      validator: (t) => n(t, ["button", "a"])
+    },
+    /**
+     * Sets the button type
+     * @demoIgnore true
+     * @values button, submit, reset
+     */
+    type: {
+      type: String,
+      default: "button",
+      validator: (t) => n(t, ["button", "submit", "reset"])
+    },
+    /**
+     * Modifies the style variant for this component
+     * @demoSelectMultiple false
+     * @values primary, secondary, sale, dark, link
+     */
+    modifier: {
+      type: String,
+      default: "primary",
+      validator: (t) => n(t, ["primary", "secondary", "sale", "dark", "link"])
+    },
+    /**
+     * Sets the button size; values can target responsive breakpoints. Example: `large@sm`.
+     * @demoSelectMultiple false
+     * @values small, medium, large
+     */
+    size: {
+      type: String,
+      default: "medium",
+      validator: (t) => n(t, ["small", "medium", "large"])
+    },
+    /**
+     * Sets button width to 100%. Setting this value to true will set the button width to 100% of the parent container. Use the 'fullWidth' prop with the 'size' prop to control top and bottom padding.
+     */
+    fullWidth: {
+      type: [String, Boolean],
+      default: !1,
+      validator: (t) => typeof t == "string" ? n(t, ["@xs", "@sm", "@md", "@lg"], !1) : typeof t == "boolean"
+    },
+    /**
+     * Renders an 'icon-only' button. When this value is true, it will override the size and 'responsiveSize' props. Can be used in conjunction with 'with-background'
+     */
+    iconOnly: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * Renders an 'icon-only' button with a background color and border. Must be used in conjunction with the 'iconOnly' prop.
+     */
+    withBackground: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  setup(t) {
+    const o = t, s = v(), u = b(), d = e(() => o.tag === "button" ? o.type : null), c = e(() => `${l}--${o.modifier}`), f = e(() => !o.iconOnly && o.fullWidth ? z(l, o.fullWidth, "full-width") : ""), p = e(() => o.iconOnly ? `cdr-button--icon-only-${o.size}` : W(l, "", o.size)), m = e(() => s["icon-left"] && s.default ? `${l}--has-icon-left` : ""), y = e(() => s["icon-right"] && s.default ? `${l}--has-icon-right` : ""), g = e(() => o.iconOnly ? `${l}--icon-only` : ""), C = e(() => o.iconOnly && o.withBackground ? `${l}--with-background` : "");
+    return (a, M) => (B(), $(k(t.tag), {
+      class: S(r(O)(r(u), l, c.value, p.value, f.value, g.value, m.value, y.value, C.value)),
+      type: d.value
+    }, {
+      default: w(() => [i(a.$slots, "icon-left"), i(a.$slots, "icon"), i(a.$slots, "default"), i(a.$slots, "icon-right")]),
+      _: 3
+    }, 8, ["class", "type"]));
+  }
+});
+export {
+  T as default
+};