@rei/cedar 15.5.0 → 15.6.1-beta.0

package/dist/components/choreographer/styles/CdrChoreographer.module.scss.mjs

@@ -1,8 +1,8 @@
 const r = {
-  "cdr-choreographer__kicker": "cdr-choreographer__kicker_15-5-0",
-  "cdr-choreographer__title": "cdr-choreographer__title_15-5-0",
-  "cdr-choreographer__rating": "cdr-choreographer__rating_15-5-0",
-  "cdr-choreographer__abstract": "cdr-choreographer__abstract_15-5-0"
+  "cdr-choreographer__kicker": "cdr-choreographer__kicker_15-6-1-beta-0",
+  "cdr-choreographer__title": "cdr-choreographer__title_15-6-1-beta-0",
+  "cdr-choreographer__rating": "cdr-choreographer__rating_15-6-1-beta-0",
+  "cdr-choreographer__abstract": "cdr-choreographer__abstract_15-6-1-beta-0"
 };
 export {
   r as default

package/dist/components/container/CdrContainer.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as i, useCssModule as l, computed as c, openBlock as d, createBlock as m, resolveDynamicComponent as f, normalizeClass as p, unref as t, withCtx as u, renderSlot as C } from "vue";
+import { defineComponent as i, useCssModule as l, computed as c, createBlock as d, openBlock as m, resolveDynamicComponent as f, normalizeClass as p, unref as t, withCtx as u, renderSlot as C } from "vue";
 import v from "../../utils/propValidator.mjs";
 import g from "../../utils/mapClasses.mjs";
 const a = "cdr-container", h = /* @__PURE__ */ i({
@@ -23,7 +23,7 @@ const a = "cdr-container", h = /* @__PURE__ */ i({
   },
   setup(e) {
     const o = e, s = l(), r = c(() => `${a}--${o.modifier}`);
-    return (n, y) => (d(), m(f(e.tag), {
+    return (n, y) => (m(), d(f(e.tag), {
       class: p(t(g)(t(s), a, r.value))
     }, {
       default: u(() => [C(n.$slots, "default")]),

package/dist/components/container/styles/CdrContainer.module.scss.mjs

@@ -1,6 +1,6 @@
 const t = {
-  "cdr-container": "cdr-container_15-5-0",
-  "cdr-container--static": "cdr-container--static_15-5-0"
+  "cdr-container": "cdr-container_15-6-1-beta-0",
+  "cdr-container--static": "cdr-container--static_15-6-1-beta-0"
 };
 export {
   t as default

package/dist/components/filmstrip/CdrFilmstrip.vue.mjs

@@ -0,0 +1,92 @@
+import { defineComponent as E, useAttrs as b, provide as P, ref as n, computed as r, useId as T, watch as I, createElementBlock as M, createCommentVNode as $, openBlock as v, mergeProps as B, renderSlot as N, createVNode as O, normalizeClass as W, unref as x, withCtx as G, createBlock as V, resolveDynamicComponent as H, normalizeProps as K, guardReactiveProps as L, h as U } from "vue";
+import j from "./CdrFilmstripEngine.vue.mjs";
+import { useDebounceFn as q, useResizeObserver as J } from "@vueuse/core";
+import { CdrFilmstripEventKey as Q } from "../../types/symbols.mjs";
+const X = 6, se = /* @__PURE__ */ E({
+  name: "CdrFilmstrip",
+  __name: "CdrFilmstrip",
+  props: {
+    adapter: {
+      type: Function,
+      default: () => (console.warn("No adapter provided for CdrFilmstrip"), {
+        frames: [],
+        filmstripId: "empty-filmstrip",
+        component: U("div"),
+        description: "An empty filmstrip"
+      })
+    },
+    model: {
+      default: () => ({})
+    }
+  },
+  setup(m, {
+    emit: y
+  }) {
+    var p, f;
+    const i = y, h = (e, s) => {
+      i(e, s);
+    }, F = b().class || "";
+    P(Q, h);
+    const l = m, u = n(null), t = r(() => l.adapter(l.model)), o = n(((p = t == null ? void 0 : t.value) == null ? void 0 : p.framesToShow) ?? X), c = n(o.value), d = r(() => t.value.frames), w = r(() => d.value.length > 0), C = r(() => `${t.value.filmstripId}-${T()}`), S = r(() => t.value.description), z = r(() => {
+      var e;
+      return ((e = t == null ? void 0 : t.value) == null ? void 0 : e.framesGap) || 0;
+    }), A = n(typeof ((f = t == null ? void 0 : t.value) == null ? void 0 : f.useDefaultResizeStrategy) == "boolean" ? t.value.useDefaultResizeStrategy : !1), g = r(() => {
+      var e;
+      return ((e = t == null ? void 0 : t.value) == null ? void 0 : e.focusSelector) || ":first-child";
+    }), k = r(() => {
+      var e;
+      return ((e = t.value) == null ? void 0 : e.dataAttributes) || {};
+    });
+    function R({
+      event: e,
+      direction: s
+    }) {
+      const a = {
+        event: e,
+        direction: s,
+        model: l.model
+      };
+      i("arrowClick", a);
+    }
+    function _() {
+      const e = window.innerWidth;
+      o.value = e >= 1024 ? 5 : e >= 768 ? 4 : 2, c.value = Math.max(o.value - 1, 1);
+    }
+    const D = q(() => {
+      const e = {
+        model: l.model,
+        framesToShow: o,
+        framesToScroll: c
+      };
+      i("resize", e), A.value && _();
+    }, 25);
+    return I(() => u.value, (e) => {
+      e && J(e, D);
+    }, {
+      immediate: !0
+    }), (e, s) => w.value ? (v(), M("div", B({
+      key: 0,
+      ref_key: "CdrFilmstripContainer",
+      ref: u
+    }, k.value), [N(e.$slots, "heading"), O(j, {
+      class: W(x(F)),
+      id: C.value,
+      description: S.value,
+      frames: d.value,
+      "frames-gap": z.value,
+      "frames-to-show": o.value,
+      "frames-to-scroll": c.value,
+      "focus-selector": g.value,
+      onAriaMessage: s[0] || (s[0] = (a) => e.$emit("ariaMessage", a)),
+      onArrowClick: R
+    }, {
+      frame: G(({
+        ...a
+      }) => [(v(), V(H(t.value.component), K(L(a)), null, 16))]),
+      _: 1
+    }, 8, ["class", "id", "description", "frames", "frames-gap", "frames-to-show", "frames-to-scroll", "focus-selector"])], 16)) : $("", !0);
+  }
+});
+export {
+  se as default
+};

package/dist/components/filmstrip/CdrFilmstrip.vue2.mjs

@@ -0,0 +1,4 @@
+import f from "./CdrFilmstrip.vue.mjs";
+export {
+  f as default
+};

package/dist/components/filmstrip/CdrFilmstripEngine.vue.mjs

@@ -0,0 +1,9 @@
+import s from "./CdrFilmstripEngine.vue2.mjs";
+import o from "./styles/CdrFilmstrip.module.scss.mjs";
+import t from "../../_virtual/_plugin-vue_export-helper.mjs";
+const r = {
+  $style: o
+}, c = /* @__PURE__ */ t(s, [["__cssModules", r]]);
+export {
+  c as default
+};

package/dist/components/filmstrip/CdrFilmstripEngine.vue2.mjs

@@ -0,0 +1,196 @@
+import "core-js/modules/esnext.iterator.constructor.js";
+import "core-js/modules/esnext.iterator.filter.js";
+import "core-js/modules/esnext.iterator.for-each.js";
+import "core-js/modules/esnext.iterator.map.js";
+import { defineComponent as D, useCssModule as q, useAttrs as J, ref as u, computed as k, onMounted as K, onUnmounted as Q, createElementBlock as $, openBlock as _, normalizeClass as d, normalizeStyle as X, unref as r, createVNode as g, withCtx as b, createElementVNode as Y, Fragment as x, renderList as B, renderSlot as F, mergeProps as y, createBlock as R, createCommentVNode as Z, withModifiers as ee, resolveDynamicComponent as ae } from "vue";
+import h from "../../utils/mapClasses.mjs";
+import { useElementHover as re, useDebounceFn as I, useEventListener as te, useResizeObserver as oe } from "@vueuse/core";
+import { ScrollAreaRoot as se, ScrollAreaViewport as le, ScrollAreaScrollbar as ne, ScrollAreaThumb as ie } from "radix-vue";
+import fe from "../button/CdrButton.vue.mjs";
+import ce from "../icon/comps/caret-left.vue.mjs";
+import ue from "../icon/comps/caret-right.vue.mjs";
+const me = ["id", "data-ui"], de = ["id", "data-ui"], n = "cdr-filmstrip", Te = /* @__PURE__ */ D({
+  name: "CdrFilmstripEngine",
+  __name: "CdrFilmstripEngine",
+  props: {
+    id: {
+      default: ""
+    },
+    description: {
+      default: ""
+    },
+    dataUi: {
+      default: n
+    },
+    isShowingArrows: {
+      type: Boolean,
+      default: !0
+    },
+    frames: {
+      default: () => []
+    },
+    framesToShow: {
+      default: 5
+    },
+    framesToScroll: {
+      default: 4
+    },
+    framesGap: {
+      default: 0
+    },
+    frameExtra: {
+      default: 0.25
+    },
+    focusSelector: {
+      default: ":first-child"
+    },
+    viewportTabindex: {
+      default: "-1"
+    }
+  },
+  emits: ["arrowClick", "ariaMessage"],
+  setup(L, {
+    emit: z
+  }) {
+    const c = q(), s = L, l = J().class || "", S = z, p = u(""), v = u(null), w = u(null), N = u(null), C = u(0), f = u(0), G = u(0), T = u(!1), P = re(v), M = k(() => {
+      const e = s.framesToShow * s.framesGap;
+      return (C.value - e) / (s.framesToShow + s.frameExtra);
+    }), U = k(() => ({
+      "--frames-gap": s.framesGap,
+      "--frame-width": M.value,
+      "--frame-extra": s.frameExtra
+    })), V = k(() => {
+      const e = f.value === 0, t = f.value >= s.frames.length - s.framesToShow;
+      return ["left", "right"].map((a) => {
+        const o = a === "left" ? !e : !t;
+        return {
+          direction: a,
+          icon: a === "left" ? ce : ue,
+          attributes: {
+            "data-ui": `${n}__arrow--${a}`,
+            class: [h(c, `${n}__arrow`, `${n}__arrow--${a}`, o ? "" : `${n}__arrow--disabled`), l ? `${l}__arrow` : null, l ? `${l}__arrow--${a}` : null, o ? "" : l && `${n}__arrow--disabled`].filter(Boolean).join(" "),
+            "aria-label": `${a === "right" ? "Next" : "Previous"} Frame`,
+            "aria-controls": `${s.id}-frames`,
+            tabindex: 0,
+            size: "large",
+            disabled: !o
+          }
+        };
+      });
+    }), E = (e) => {
+      const t = M.value * e, a = s.framesGap * e;
+      return t + a;
+    }, W = (e) => {
+      var o, i;
+      const t = E(e), a = ((o = w.value) == null ? void 0 : o.viewportElement.scrollLeft) ?? 0;
+      (i = w.value) == null || i.viewportElement.scrollBy({
+        left: t - a,
+        behavior: "smooth"
+      });
+    }, A = (e, t) => {
+      S("arrowClick", {
+        event: e,
+        direction: t
+      });
+      const o = t === "left" ? -s.framesToScroll : s.framesToScroll, i = f.value + o;
+      f.value = Math.max(0, Math.min(i, s.frames.length - 1)), W(f.value);
+    }, O = I(() => {
+      const e = s.frames.length, t = Math.max(1, f.value + 1), a = Math.min(e, t + s.framesToShow - 1);
+      p.value = s.framesToShow === 1 ? `Now showing frame ${t} of ${e}` : `Now showing frames ${t} through ${a} of ${e}`, S("ariaMessage", p.value);
+    }, 300), H = (e) => {
+      const t = e.currentTarget;
+      if (!t || !e.relatedTarget || !t.contains(e.relatedTarget)) {
+        const a = s.frames.length, o = Math.max(1, f.value + 1), i = Math.min(a, o + s.framesToShow - 1);
+        s.framesToShow === 1 ? p.value = `Showing frame ${o} of ${a}. Use left and right arrow keys to navigate.` : p.value = `Showing frames ${o} through ${i} of ${a}. Use left and right arrow keys to navigate.`, S("ariaMessage", p.value);
+      }
+    }, j = I((e) => {
+      const t = e.target.scrollLeft, a = s.frames.map((i, m) => E(m)), o = a.findIndex((i) => Math.abs(i - t) === Math.min(...a.map((m) => Math.abs(m - t))));
+      o !== f.value && (f.value = o, O()), T.value || (T.value = !0);
+    }, 100);
+    return K(() => {
+      var t, a;
+      te((t = w.value) == null ? void 0 : t.viewportElement, "scroll", j);
+      const {
+        stop: e
+      } = oe(v, (o) => {
+        o.forEach((i) => {
+          C.value = i.contentRect.width;
+        });
+      });
+      Q(() => {
+        e();
+      }), C.value = ((a = v.value) == null ? void 0 : a.offsetWidth) ?? 0;
+    }), (e, t) => (_(), $("div", {
+      id: e.id,
+      ref_key: "containerRef",
+      ref: v,
+      "data-ui": e.dataUi,
+      style: X(U.value),
+      class: d(r(c)[n]),
+      onFocusin: H
+    }, [g(r(se), {
+      type: "auto",
+      class: d([r(h)(r(c), `${n}__root`), r(l) ? `${r(l)}__root` : null])
+    }, {
+      default: b(() => [g(r(le), {
+        ref_key: "framesRef",
+        ref: w,
+        class: d([r(h)(r(c), `${n}__viewport`), r(l) ? `${r(l)}__viewport` : null]),
+        "aria-label": e.description || `${e.frames.length} items`,
+        tabindex: e.viewportTabindex
+      }, {
+        default: b(() => [Y("ul", {
+          id: `${e.id}-frames`,
+          class: d([r(h)(r(c), `${n}__frames`), r(l) && `${r(l)}__frames`]),
+          "data-ui": `${n}__frames`
+        }, [(_(!0), $(x, null, B(e.frames, (a, o) => (_(), $("li", {
+          key: a.key,
+          ref_for: !0,
+          ref_key: "framesItemsRef",
+          ref: N,
+          class: d([r(h)(r(c), `${n}__frame`), r(l) ? `${r(l)}__frame` : null])
+        }, [F(e.$slots, "frame", y({
+          index: o,
+          ref_for: !0
+        }, a.props, {
+          tabindex: o === G.value ? "0" : "-1"
+        }))], 2))), 128))], 10, de)]),
+        _: 3
+      }, 8, ["class", "aria-label", "tabindex"]), g(r(ne), {
+        class: d([r(h)(r(c), `${n}__bar`, `${n}__bar--horizontal`), r(l) ? `${r(l)}__bar` : null, r(l) ? `${r(l)}__bar--horizontal` : null]),
+        orientation: "horizontal"
+      }, {
+        default: b(() => [g(r(ie), {
+          class: d([r(h)(r(c), `${n}__thumb`), r(l) ? `${r(l)}__thumb` : null])
+        }, null, 8, ["class"])]),
+        _: 1
+      }, 8, ["class"])]),
+      _: 3
+    }, 8, ["class"]), (_(!0), $(x, null, B(V.value, ({
+      direction: a,
+      attributes: o,
+      icon: i
+    }) => F(e.$slots, "arrow", y({
+      ref_for: !0
+    }, {
+      attributes: o,
+      direction: a,
+      icon: i
+    }, {
+      onClick: (m) => A(m, a)
+    }), () => [r(P) && s.isShowingArrows ? (_(), R(fe, y({
+      key: a,
+      "icon-only": !0,
+      "with-background": !0,
+      ref_for: !0
+    }, o, {
+      onClick: ee((m) => A(m, a), ["prevent"])
+    }), {
+      icon: b(() => [(_(), R(ae(i)))]),
+      _: 2
+    }, 1040, ["onClick"])) : Z("", !0)])), 256))], 46, me));
+  }
+});
+export {
+  Te as default
+};

package/dist/components/filmstrip/styles/CdrFilmstrip.module.scss.mjs

@@ -0,0 +1,17 @@
+const r = {
+  "cdr-filmstrip": "cdr-filmstrip_15-6-1-beta-0",
+  "cdr-filmstrip__viewport": "cdr-filmstrip__viewport_15-6-1-beta-0",
+  "cdr-filmstrip__root": "cdr-filmstrip__root_15-6-1-beta-0",
+  "cdr-filmstrip__frames": "cdr-filmstrip__frames_15-6-1-beta-0",
+  "cdr-filmstrip__frame": "cdr-filmstrip__frame_15-6-1-beta-0",
+  "cdr-filmstrip__bar": "cdr-filmstrip__bar_15-6-1-beta-0",
+  "cdr-filmstrip__bar--horizontal": "cdr-filmstrip__bar--horizontal_15-6-1-beta-0",
+  "cdr-filmstrip__thumb": "cdr-filmstrip__thumb_15-6-1-beta-0",
+  "cdr-filmstrip__arrow": "cdr-filmstrip__arrow_15-6-1-beta-0",
+  "cdr-filmstrip__arrow--left": "cdr-filmstrip__arrow--left_15-6-1-beta-0",
+  "cdr-filmstrip__arrow--right": "cdr-filmstrip__arrow--right_15-6-1-beta-0",
+  "cdr-filmstrip__sr-only": "cdr-filmstrip__sr-only_15-6-1-beta-0"
+};
+export {
+  r as default
+};

package/dist/components/formError/CdrFormError.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as a, useCssModule as l, openBlock as c, createElementBlock as m, normalizeClass as e, unref as o, createElementVNode as s, createVNode as i, renderSlot as d, toDisplayString as p } from "vue";
+import { defineComponent as a, useCssModule as l, createElementBlock as c, openBlock as m, normalizeClass as e, unref as o, createElementVNode as s, renderSlot as i, createVNode as d, toDisplayString as p } from "vue";
 import f from "../icon/comps/error-stroke.vue.mjs";
 const u = "cdr-form-error", _ = "cdr-form-error__icon", S = /* @__PURE__ */ a({
   name: "CdrFormError",
@@ -8,15 +8,15 @@ const u = "cdr-form-error", _ = "cdr-form-error__icon", S = /* @__PURE__ */ a({
   },
   setup(n) {
     const r = l();
-    return (t, C) => (c(), m("div", {
+    return (t, C) => (m(), c("div", {
       class: e(o(r)[u]),
       role: "status"
     }, [s("span", {
       class: e(o(r)[_])
-    }, [i(f, {
+    }, [d(f, {
       size: "small",
       "inherit-color": ""
-    })], 2), d(t.$slots, "error", {}, () => [s("span", null, p(n.error), 1)])], 2));
+    })], 2), i(t.$slots, "error", {}, () => [s("span", null, p(n.error), 1)])], 2));
   }
 });
 export {

package/dist/components/formError/styles/CdrFormError.module.scss.mjs

@@ -1,6 +1,6 @@
 const r = {
-  "cdr-form-error": "cdr-form-error_15-5-0",
-  "cdr-form-error__icon": "cdr-form-error__icon_15-5-0"
+  "cdr-form-error": "cdr-form-error_15-6-1-beta-0",
+  "cdr-form-error__icon": "cdr-form-error__icon_15-6-1-beta-0"
 };
 export {
   r as default

package/dist/components/formGroup/CdrFormGroup.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as g, useCssModule as C, computed as c, openBlock as a, createElementBlock as t, normalizeClass as s, unref as e, createElementVNode as m, renderSlot as n, createTextVNode as y, toDisplayString as v, createCommentVNode as u, createBlock as B, withCtx as k } from "vue";
+import { defineComponent as g, useCssModule as C, computed as c, createElementBlock as t, openBlock as a, unref as e, normalizeClass as s, createElementVNode as m, createBlock as y, createCommentVNode as n, renderSlot as u, createTextVNode as v, toDisplayString as B, withCtx as k } from "vue";
 import f from "../../utils/mapClasses.mjs";
 import $ from "../formError/CdrFormError.vue.mjs";
 import q from "../../utils/uid.mjs";
@@ -48,20 +48,20 @@ const S = ["disabled", "aria-invalid", "aria-errormessage", "aria-describedby"],
       "aria-invalid": !!r.error,
       "aria-errormessage": r.error ? `${e(l)}-error` : void 0,
       "aria-describedby": r.error ? `${e(l)}-error` : void 0
-    }, [m("legend", null, [n(i.$slots, "label", {}, () => [y(v(r.label), 1)]), r.required ? (a(), t("span", h, " *")) : u("", !0), r.optional && !r.required ? (a(), t("span", {
+    }, [m("legend", null, [u(i.$slots, "label", {}, () => [v(B(r.label), 1)]), r.required ? (a(), t("span", h, " *")) : n("", !0), r.optional && !r.required ? (a(), t("span", {
       key: 1,
       class: s(e(d)["cdr-form-group__optional"])
-    }, " (optional)", 2)) : u("", !0)]), m("div", {
+    }, " (optional)", 2)) : n("", !0)]), m("div", {
       class: s(e(f)(e(d), "cdr-form-group__wrapper", b.value))
-    }, [n(i.$slots, "default")], 2), r.error ? (a(), B($, {
+    }, [u(i.$slots, "default")], 2), r.error ? (a(), y($, {
       key: 0,
       error: r.error,
       id: `${e(l)}-error`,
       "aria-live": "polite"
     }, {
-      error: k(() => [n(i.$slots, "error")]),
+      error: k(() => [u(i.$slots, "error")]),
       _: 3
-    }, 8, ["error", "id"])) : u("", !0)], 10, S));
+    }, 8, ["error", "id"])) : n("", !0)], 10, S));
   }
 });
 export {

package/dist/components/formGroup/styles/CdrFormGroup.module.scss.mjs

@@ -1,12 +1,12 @@
 const r = {
-  "cdr-form-error": "cdr-form-error_15-5-0",
-  "cdr-form-error__icon": "cdr-form-error__icon_15-5-0",
-  "cdr-form-group": "cdr-form-group_15-5-0",
-  "cdr-form-group--error": "cdr-form-group--error_15-5-0",
-  "cdr-form-group--disabled": "cdr-form-group--disabled_15-5-0",
-  "cdr-form-group__optional": "cdr-form-group__optional_15-5-0",
-  "cdr-form-group__required": "cdr-form-group__required_15-5-0",
-  "cdr-form-group__wrapper": "cdr-form-group__wrapper_15-5-0"
+  "cdr-form-error": "cdr-form-error_15-6-1-beta-0",
+  "cdr-form-error__icon": "cdr-form-error__icon_15-6-1-beta-0",
+  "cdr-form-group": "cdr-form-group_15-6-1-beta-0",
+  "cdr-form-group--error": "cdr-form-group--error_15-6-1-beta-0",
+  "cdr-form-group--disabled": "cdr-form-group--disabled_15-6-1-beta-0",
+  "cdr-form-group__optional": "cdr-form-group__optional_15-6-1-beta-0",
+  "cdr-form-group__required": "cdr-form-group__required_15-6-1-beta-0",
+  "cdr-form-group__wrapper": "cdr-form-group__wrapper_15-6-1-beta-0"
 };
 export {
   r as default

package/dist/components/fulfillmentTile/CdrFulfillmentTile.vue.mjs

@@ -0,0 +1,9 @@
+import s from "./CdrFulfillmentTile.vue2.mjs";
+import o from "./styles/CdrFulfillmentTitle.module.scss.mjs";
+import t from "../../_virtual/_plugin-vue_export-helper.mjs";
+const e = {
+  $style: o
+}, f = /* @__PURE__ */ t(s, [["__cssModules", e]]);
+export {
+  f as default
+};

package/dist/components/fulfillmentTile/CdrFulfillmentTile.vue2.mjs

@@ -0,0 +1,92 @@
+import { defineComponent as p, useCssModule as h, computed as g, createBlock as c, openBlock as l, mergeProps as y, unref as s, withCtx as n, createElementVNode as k, normalizeClass as a, createElementBlock as d, createCommentVNode as o, renderSlot as i, createVNode as b } from "vue";
+import $ from "../surfaceSelection/CdrSurfaceSelection.vue.mjs";
+import C from "../text/presets/CdrSubheadingSans.vue.mjs";
+import f from "../text/presets/CdrBody.vue.mjs";
+import { getSurfaceProps as _ } from "../../utils/surface.mjs";
+const v = {
+  key: 1
+}, E = /* @__PURE__ */ p({
+  name: "CdrFulfillmentTile",
+  __name: "CdrFulfillmentTile",
+  props: {
+    checked: {
+      type: Boolean
+    },
+    disabled: {
+      type: Boolean
+    },
+    loading: {
+      type: Boolean
+    },
+    role: {
+      default: "checkbox"
+    },
+    layout: {},
+    background: {},
+    borderColor: {},
+    borderStyle: {},
+    borderWidth: {},
+    borderRadius: {
+      default: "soft"
+    },
+    boxShadow: {},
+    tag: {
+      default: "div"
+    },
+    palette: {}
+  },
+  setup(u) {
+    const t = u, r = h(), m = g(() => ({
+      ..._(t),
+      "aria-checked": t.checked,
+      "aria-disabled": t.disabled,
+      "data-loading": t.loading
+    }));
+    return (e, S) => (l(), c($, y(m.value, {
+      class: s(r)["cdr-fulfillment-tile"],
+      tag: t.tag,
+      role: t.role
+    }), {
+      default: n(() => [k("div", {
+        class: a(s(r)["cdr-fulfillment-tile__content"])
+      }, [e.$slots.header ? (l(), d("div", {
+        key: 0,
+        class: a(s(r)["cdr-fulfillment-tile__header"])
+      }, [e.$slots["icon-left"] ? (l(), d("span", {
+        key: 0,
+        class: a(s(r)["cdr-fulfillment-tile-header__icon"])
+      }, [i(e.$slots, "icon-left")], 2)) : o("", !0), e.$slots.header ? (l(), d("div", v, [b(C, {
+        strong: !0,
+        scale: "-1",
+        tag: "span"
+      }, {
+        default: n(() => [i(e.$slots, "header")]),
+        _: 3
+      })])) : o("", !0), e.$slots["icon-right"] ? (l(), d("span", {
+        key: 2,
+        class: a(s(r)["cdr-fulfillment-tile-header__icon"])
+      }, [i(e.$slots, "icon-right")], 2)) : o("", !0)], 2)) : o("", !0), e.$slots.body || e.$slots.footer ? (l(), d("div", {
+        key: 1,
+        class: a(s(r)["cdr-fulfillment-tile__main"])
+      }, [e.$slots.body ? (l(), c(f, {
+        key: 0,
+        tag: "div",
+        scale: "-2"
+      }, {
+        default: n(() => [i(e.$slots, "body")]),
+        _: 3
+      })) : o("", !0), e.$slots.footer ? (l(), c(f, {
+        key: 1,
+        tag: "div",
+        scale: "-1"
+      }, {
+        default: n(() => [i(e.$slots, "footer")]),
+        _: 3
+      })) : o("", !0)], 2)) : o("", !0)], 2)]),
+      _: 3
+    }, 16, ["class", "tag", "role"]));
+  }
+});
+export {
+  E as default
+};

package/dist/components/fulfillmentTile/CdrFulfillmentTileIcon.vue.mjs

@@ -0,0 +1,9 @@
+import o from "./CdrFulfillmentTileIcon.vue2.mjs";
+import s from "./styles/CdrFulfillmentTileIcon.module.scss.mjs";
+import t from "../../_virtual/_plugin-vue_export-helper.mjs";
+const e = {
+  $style: s
+}, c = /* @__PURE__ */ t(o, [["__cssModules", e]]);
+export {
+  c as default
+};

package/dist/components/fulfillmentTile/CdrFulfillmentTileIcon.vue2.mjs

@@ -0,0 +1,19 @@
+import { defineComponent as c, useCssModule as r, computed as u, createElementBlock as p, openBlock as f, normalizeClass as m, unref as l, renderSlot as d } from "vue";
+const t = "cdr-fulfillment-tile-icon", _ = /* @__PURE__ */ c({
+  name: "CdrFulfillmentTileIcon",
+  __name: "CdrFulfillmentTileIcon",
+  props: {
+    type: {
+      default: "default"
+    }
+  },
+  setup(s) {
+    const n = s, e = r(), o = u(() => `${t}--${n.type}`);
+    return (a, i) => (f(), p("span", {
+      class: m([l(e)[t], l(e)[o.value]])
+    }, [d(a.$slots, "default")], 2));
+  }
+});
+export {
+  _ as default
+};

package/dist/components/fulfillmentTile/styles/CdrFulfillmentTileIcon.module.scss.mjs

@@ -0,0 +1,11 @@
+const l = {
+  "cdr-fulfillment-tile-icon": "cdr-fulfillment-tile-icon_15-6-1-beta-0",
+  "cdr-fulfillment-tile-icon--default": "cdr-fulfillment-tile-icon--default_15-6-1-beta-0",
+  "cdr-fulfillment-tile-icon--info": "cdr-fulfillment-tile-icon--info_15-6-1-beta-0",
+  "cdr-fulfillment-tile-icon--warning": "cdr-fulfillment-tile-icon--warning_15-6-1-beta-0",
+  "cdr-fulfillment-tile-icon--success": "cdr-fulfillment-tile-icon--success_15-6-1-beta-0",
+  "cdr-fulfillment-tile-icon--error": "cdr-fulfillment-tile-icon--error_15-6-1-beta-0"
+};
+export {
+  l as default
+};

package/dist/components/fulfillmentTile/styles/CdrFulfillmentTitle.module.scss.mjs

@@ -0,0 +1,11 @@
+const e = {
+  "cdr-fulfillment-tile": "cdr-fulfillment-tile_15-6-1-beta-0",
+  "cdr-fulfillment-tile__header": "cdr-fulfillment-tile__header_15-6-1-beta-0",
+  "cdr-surface-selection__loading": "cdr-surface-selection__loading_15-6-1-beta-0",
+  "cdr-surface-selection__layout": "cdr-surface-selection__layout_15-6-1-beta-0",
+  "cdr-fulfillment-tile__content": "cdr-fulfillment-tile__content_15-6-1-beta-0",
+  "cdr-fulfillment-tile__main": "cdr-fulfillment-tile__main_15-6-1-beta-0"
+};
+export {
+  e as default
+};

package/dist/components/grid/CdrGrid.vue2.mjs

@@ -1,4 +1,4 @@
-import { defineComponent as m, useCssModule as n, computed as d, openBlock as i, createBlock as u, resolveDynamicComponent as p, normalizeClass as c, unref as r, withCtx as g, renderSlot as f } from "vue";
+import { defineComponent as m, useCssModule as n, computed as d, createBlock as i, openBlock as u, resolveDynamicComponent as p, normalizeClass as c, unref as r, withCtx as g, renderSlot as f } from "vue";
 import C from "../../utils/mapClasses.mjs";
 import { responsiveModifyClass as v } from "../../utils/buildClass.mjs";
 import y from "../../utils/propValidator.mjs";
@@ -24,7 +24,7 @@ const s = "cdr-grid", B = /* @__PURE__ */ m({
   },
   setup(e) {
     const t = e, a = n(), o = d(() => t.gutter ? v(s, "gutter-", t.gutter) : "");
-    return (l, _) => (i(), u(p(e.tag), {
+    return (l, _) => (u(), i(p(e.tag), {
       class: c(r(C)(r(a), s, o.value))
     }, {
       default: g(() => [f(l.$slots, "default")]),