@piveau/dpi 0.2.0-alpha.4 → 0.2.0-alpha.41

package/dist/{data-provider-interface → packages/dpi/src/data-provider-interface}/HappyFlowComponents/ui/ButtonV3.vue.js

@@ -1,24 +1,26 @@
-import { defineComponent as c, resolveComponent as o, createElementBlock as l, openBlock as s, mergeProps as C, createCommentVNode as a, withKeys as n, normalizeStyle as d, normalizeClass as p, withModifiers as v, createElementVNode as k, createBlock as t, toDisplayString as b } from "vue";
+import { PhCircleNotch as C, PhPlus as b, PhArrowSquareOut as k, PhCopySimple as B, PhPencilSimple as V, PhArrowCounterClockwise as D, PhPlusSquare as K, PhTrash as w, PhPlusCircle as $, PhCaretLeft as T, PhCaretRight as M, PhMagnifyingGlass as U, PhCheck as q, PhX as E } from "@phosphor-icons/vue";
+import { defineComponent as G, resolveComponent as n, createElementBlock as t, openBlock as a, mergeProps as N, createCommentVNode as s, withKeys as l, normalizeStyle as m, normalizeClass as d, withModifiers as F, createElementVNode as L, createBlock as o, toDisplayString as O, createVNode as h } from "vue";
 /* empty css                                */
 /* empty css                                 */
-import { PhArrowSquareOut as g, PhCopySimple as K, PhPencilSimple as B, PhArrowCounterClockwise as w, PhPlusSquare as D, PhTrash as V, PhPlusCircle as T, PhCaretLeft as $, PhCaretRight as M, PhMagnifyingGlass as U, PhCheck as q, PhX as E } from "@phosphor-icons/vue";
 /* empty css              */
-import G from "../../../_virtual/_plugin-vue_export-helper.js";
-const L = c({
+import R from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const I = G({
   name: "ButtonV3",
   components: {
     PhX: E,
     PhCheck: q,
     PhMagnifyingGlass: U,
     PhCaretRight: M,
-    PhCaretLeft: $,
-    PhPlusCircle: T,
-    PhTrash: V,
-    PhPlusSquare: D,
-    PhArrowCounterClockwise: w,
-    PhPencilSimple: B,
-    PhCopySimple: K,
-    PhArrowSquareOut: g
+    PhCaretLeft: T,
+    PhPlusCircle: $,
+    PhTrash: w,
+    PhPlusSquare: K,
+    PhArrowCounterClockwise: D,
+    PhPencilSimple: V,
+    PhCopySimple: B,
+    PhArrowSquareOut: k,
+    PhPlus: b,
+    PhCircleNotch: C
   },
   props: {
     buttonText: {
@@ -43,6 +45,10 @@ const L = c({
       type: Boolean,
       default: !1
     },
+    loading: {
+      type: Boolean,
+      default: !1
+    },
     variant: {
       type: String,
       default: "primary"
@@ -76,9 +82,12 @@ const L = c({
       return [
         `dpiV3_button-base-${this.variant}`,
         `dpiV3_button-${this.size}`,
-        { "dpiV3_button-disabled": this.disabled }
+        { "dpiV3_button-disabled": this.disabled || this.loading }
       ];
     },
+    isButtonDisabled() {
+      return this.disabled || this.loading;
+    },
     iconSizeClass() {
       return [
         `dpiV3_icon-${this.size}`,
@@ -103,154 +112,182 @@ const L = c({
       this.disabled || (this.variant === "primary" ? this.isPrimaryActive = !0 : this.variant === "secondary" ? this.isSecondaryActive = !0 : this.variant === "tertiary" && (this.isTertiaryActive = !0));
     }
   }
-}), O = ["disabled"], R = ["disabled"], N = {
-  key: 0,
+}), X = ["disabled"], j = ["disabled"], H = {
+  key: 1,
   class: "dpiV3_icon"
 };
-function I(e, i, X, j, H, J) {
-  const m = o("PhArrowCounterClockwise"), F = o("PhPlusCircle"), A = o("PhTrash"), y = o("PhMagnifyingGlass"), u = o("PhCheck"), S = o("PhCaretLeft"), h = o("PhPlusSquare"), P = o("PhCaretRight"), f = o("PhArrowSquareOut"), z = o("PhPencilSimple");
-  return s(), l("div", C({
+function J(e, i, Q, W, Y, Z) {
+  const A = n("PhArrowCounterClockwise"), S = n("PhPlusCircle"), u = n("PhTrash"), p = n("PhMagnifyingGlass"), y = n("PhCheck"), P = n("PhCaretLeft"), z = n("PhPlusSquare"), v = n("PhCircleNotch"), f = n("PhCaretRight"), c = n("PhArrowSquareOut"), g = n("PhPencilSimple");
+  return a(), t("div", N({
     class: ["dpiV3_V3-typography", e.externalClass]
   }, e.$attrs), [
-    e.buttonText ? (s(), l("button", {
+    e.buttonText ? (a(), t("button", {
       key: 0,
       tabindex: "0",
       type: "button",
-      class: p([
+      class: d([
         e.dpiV3_buttonClass,
         { activeStatePrimary: e.isPrimaryActive && e.variant === "primary" },
         { activeStateSecondary: e.isSecondaryActive && e.variant === "secondary" },
-        { activeStateTertiary: e.isTertiaryActive && e.variant === "tertiary" }
+        { activeStateTertiary: e.isTertiaryActive && e.variant === "tertiary" },
+        { "dpiV3_button-loading": e.loading }
       ]),
-      disabled: e.disabled,
+      disabled: e.isButtonDisabled,
+      style: m(e.focusStyle),
       onMousedown: i[0] || (i[0] = (...r) => e.removeFocus && e.removeFocus(...r)),
       onMouseup: i[1] || (i[1] = (...r) => e.removeActiveState && e.removeActiveState(...r)),
-      style: d(e.focusStyle),
       onFocus: i[2] || (i[2] = (r) => e.isFocused = !0),
       onBlur: i[3] || (i[3] = (r) => e.isFocused = !1),
       onKeydown: [
-        i[4] || (i[4] = n((...r) => e.handleKeyPress && e.handleKeyPress(...r), ["enter"])),
-        i[5] || (i[5] = n(v((...r) => e.handleKeyPress && e.handleKeyPress(...r), ["prevent"]), ["space"]))
+        i[4] || (i[4] = l((...r) => e.handleKeyPress && e.handleKeyPress(...r), ["enter"])),
+        i[5] || (i[5] = l(F((...r) => e.handleKeyPress && e.handleKeyPress(...r), ["prevent"]), ["space"]))
       ],
       onKeyup: [
-        i[6] || (i[6] = n((...r) => e.removeActiveStateKeyUp && e.removeActiveStateKeyUp(...r), ["enter"])),
-        i[7] || (i[7] = n((...r) => e.removeActiveStateKeyUp && e.removeActiveStateKeyUp(...r), ["space"]))
+        i[6] || (i[6] = l((...r) => e.removeActiveStateKeyUp && e.removeActiveStateKeyUp(...r), ["enter"])),
+        i[7] || (i[7] = l((...r) => e.removeActiveStateKeyUp && e.removeActiveStateKeyUp(...r), ["space"]))
       ]
     }, [
-      e.iconStart ? (s(), l("span", {
+      e.iconStart ? (a(), t("span", {
         key: 0,
-        class: p(["dpiV3_icon", e.iconSizeClass])
+        class: d(["dpiV3_icon", e.iconSizeClass])
       }, [
-        e.iconStart === "reset" ? (s(), t(m, {
+        e.iconStart === "reset" ? (a(), o(A, {
           key: 0,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconStart === "plus" ? (s(), t(F, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "plus" ? (a(), o(S, {
           key: 1,
           size: e.size === "small" ? "16px" : "24px",
-          color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconStart === "trash" ? (s(), t(A, {
+          color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : e.disabled ? "#aedff8" : "#0172AD"
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "trash" ? (a(), o(u, {
           key: 2,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconStart === "MagnifyingGlass" ? (s(), t(y, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "MagnifyingGlass" ? (a(), o(p, {
           key: 3,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconStart === "Check" ? (s(), t(u, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "Check" ? (a(), o(y, {
           key: 4,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconStart === "CaretLeft" ? (s(), t(S, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "CaretLeft" ? (a(), o(P, {
           key: 5,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconStart === "PlusSquare" ? (s(), t(h, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "PlusSquare" ? (a(), o(z, {
           key: 6,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0)
-      ], 2)) : a("", !0),
-      k("span", null, b(e.buttonText), 1),
-      e.iconEnd ? (s(), l("span", {
+        }, null, 8, ["size", "color"])) : s("", !0)
+      ], 2)) : s("", !0),
+      L("span", null, O(e.buttonText), 1),
+      e.loading ? (a(), t("span", {
         key: 1,
-        class: p(["dpiV3_icon", e.iconSizeClass])
+        class: d(["dpiV3_loading-overlay", `dpiV3_loading-overlay-${e.variant}`])
+      }, [
+        h(v, {
+          size: e.size === "small" ? "16px" : "24px",
+          color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD",
+          weight: "bold",
+          class: "dpiV3_loading-spinner"
+        }, null, 8, ["size", "color"])
+      ], 2)) : s("", !0),
+      e.iconEnd ? (a(), t("span", {
+        key: 2,
+        class: d(["dpiV3_icon", e.iconSizeClass])
       }, [
-        e.iconEnd === "MagnifyingGlass" ? (s(), t(y, {
+        e.iconEnd === "MagnifyingGlass" ? (a(), o(p, {
           key: 0,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconEnd === "Check" ? (s(), t(u, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconEnd === "Check" ? (a(), o(y, {
           key: 1,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconEnd === "CaretRight" ? (s(), t(P, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconEnd === "CaretRight" ? (a(), o(f, {
           key: 2,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconEnd === "Out" ? (s(), t(f, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconEnd === "Out" ? (a(), o(c, {
           key: 3,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#0172AD" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0)
-      ], 2)) : a("", !0)
-    ], 46, O)) : a("", !0),
-    e.buttonText ? a("", !0) : (s(), l("div", {
+        }, null, 8, ["size", "color"])) : s("", !0)
+      ], 2)) : s("", !0)
+    ], 46, X)) : s("", !0),
+    e.buttonText ? s("", !0) : (a(), t("div", {
       key: 1,
       tabindex: "0",
-      class: p([
-        "dpiV3_button-icon-only",
+      class: d(["dpiV3_button-icon-only", [
         e.iconSizeClass,
         { "dpiV3_button-icon-only-large": e.size === "large" },
         { activeStatePrimary: e.isPrimaryActive && e.variant === "primary" },
         { activeStateSecondary: e.isSecondaryActive && e.variant === "secondary" },
-        { activeStateTertiary: e.isTertiaryActive && e.variant === "tertiary" }
-      ]),
-      disabled: e.disabled,
+        { activeStateTertiary: e.isTertiaryActive && e.variant === "tertiary" },
+        { "dpiV3_button-loading": e.loading }
+      ]]),
+      disabled: e.isButtonDisabled,
+      style: m(e.focusStyle),
       onMousedown: i[8] || (i[8] = (...r) => e.removeFocus && e.removeFocus(...r)),
       onMouseup: i[9] || (i[9] = (...r) => e.removeActiveState && e.removeActiveState(...r)),
-      style: d(e.focusStyle),
       onFocus: i[10] || (i[10] = (r) => e.isFocused = !0),
       onBlur: i[11] || (i[11] = (r) => e.isFocused = !1),
       onKeydown: [
-        i[12] || (i[12] = n((...r) => e.handleKeyPress && e.handleKeyPress(...r), ["enter"])),
-        i[13] || (i[13] = n(v((...r) => e.handleKeyPress && e.handleKeyPress(...r), ["prevent"]), ["space"]))
+        i[12] || (i[12] = l((...r) => e.handleKeyPress && e.handleKeyPress(...r), ["enter"])),
+        i[13] || (i[13] = l(F((...r) => e.handleKeyPress && e.handleKeyPress(...r), ["prevent"]), ["space"]))
       ],
       onKeyup: [
-        i[14] || (i[14] = n((...r) => e.removeActiveStateKeyUp && e.removeActiveStateKeyUp(...r), ["enter"])),
-        i[15] || (i[15] = n((...r) => e.removeActiveStateKeyUp && e.removeActiveStateKeyUp(...r), ["space"]))
+        i[14] || (i[14] = l((...r) => e.removeActiveStateKeyUp && e.removeActiveStateKeyUp(...r), ["enter"])),
+        i[15] || (i[15] = l((...r) => e.removeActiveStateKeyUp && e.removeActiveStateKeyUp(...r), ["space"]))
       ]
     }, [
-      e.buttonText ? a("", !0) : (s(), l("span", N, [
-        e.iconStart === "MagnifyingGlass" ? (s(), t(y, {
+      e.loading ? (a(), t("span", {
+        key: 0,
+        class: d(["dpiV3_loading-overlay", `dpiV3_loading-overlay-${e.variant}`])
+      }, [
+        h(v, {
+          size: e.size === "small" ? "16px" : "24px",
+          color: e.variant === "primary" ? "#FFFFFF" : (e.variant === "secondary", "#0172AD"),
+          weight: "bold",
+          class: "dpiV3_loading-spinner"
+        }, null, 8, ["size", "color"])
+      ], 2)) : s("", !0),
+      e.buttonText ? s("", !0) : (a(), t("span", H, [
+        e.iconStart === "MagnifyingGlass" ? (a(), o(p, {
           key: 0,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconStart === "Check" ? (s(), t(u, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "Check" ? (a(), o(y, {
           key: 1,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "primary" ? "#FFFFFF" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0),
-        e.iconStart === "pen" ? (s(), t(z, {
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "pen" ? (a(), o(g, {
           key: 2,
           size: e.size === "small" ? "16px" : "24px",
           color: e.variant === "secondary" ? "#0172AD" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
-        }, null, 8, ["size", "color"])) : a("", !0)
+        }, null, 8, ["size", "color"])) : s("", !0),
+        e.iconStart === "Trash" ? (a(), o(u, {
+          key: 3,
+          size: e.size === "small" ? "16px" : "24px",
+          color: e.variant === "secondary" ? "#0172AD" : e.variant === "secondary" ? "#0B1A25" : "#0172AD"
+        }, null, 8, ["size", "color"])) : s("", !0)
       ]))
-    ], 46, R))
+    ], 46, j))
   ], 16);
 }
-const ee = /* @__PURE__ */ G(L, [["render", I], ["__scopeId", "data-v-0deb2715"]]);
+const se = /* @__PURE__ */ R(I, [["render", J], ["__scopeId", "data-v-720acf5f"]]);
 export {
-  ee as default
+  se as default
 };

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Card.vue.js

@@ -0,0 +1,7 @@
+import o from "./Card.vue2.js";
+/* empty css          */
+import r from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const m = /* @__PURE__ */ r(o, [["__scopeId", "data-v-bd2840af"]]);
+export {
+  m as default
+};

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Card.vue2.js

@@ -0,0 +1,55 @@
+import { defineComponent as p, computed as c, createElementBlock as o, openBlock as t, normalizeClass as d, createCommentVNode as l, createElementVNode as a, renderSlot as i } from "vue";
+const _ = { class: "icon" }, u = {
+  key: 0,
+  class: "dpiV3_Card_Info_Text copy-large-semi-bold"
+}, C = { class: "dpiV3_Card_Body" }, v = {
+  key: 0,
+  class: "dpiV3_Card_Icon"
+}, m = { key: 1 }, $ = /* @__PURE__ */ p({
+  __name: "Card",
+  props: {
+    variant: { default: "default" },
+    small: { type: Boolean, default: !1 },
+    iconTop: { type: Boolean, default: !1 }
+  },
+  setup(n) {
+    const s = n, r = c(() => ({
+      "V3-typography": !0,
+      dpiV3_Card: !0,
+      "dpiV3_Card--small": s.small,
+      "dpiV3_Card--default": s.variant === "default",
+      "dpiV3_Card--error": s.variant === "error"
+    }));
+    return (e, V) => (t(), o("div", {
+      class: d(r.value)
+    }, [
+      e.$slots.title ? (t(), o("div", {
+        key: 0,
+        class: d(["dpiV3_Card_Icon_Title", { "dpiV3_Card_Icon_Title--icon-top": s.iconTop }])
+      }, [
+        a("div", _, [
+          e.$slots.icon ? i(e.$slots, "icon", { key: 0 }, void 0, !0) : l("", !0)
+        ]),
+        e.$slots.title ? (t(), o("div", u, [
+          i(e.$slots, "title", {}, void 0, !0)
+        ])) : l("", !0)
+      ], 2)) : l("", !0),
+      a("div", C, [
+        e.$slots.icon && !e.$slots.title ? (t(), o("div", v, [
+          i(e.$slots, "icon", {}, void 0, !0)
+        ])) : (t(), o("div", m)),
+        a("div", {
+          class: d(["dpiV3_Card_Content", {
+            "dpiV3_Card_Content--with-icon": e.$slots.icon && e.$slots.title,
+            "dpiV3_Card_Content--with-icon-no-title": e.$slots.icon && !e.$slots.title
+          }])
+        }, [
+          i(e.$slots, "default", {}, void 0, !0)
+        ], 2)
+      ])
+    ], 2));
+  }
+});
+export {
+  $ as default
+};

package/dist/{data-provider-interface → packages/dpi/src/data-provider-interface}/HappyFlowComponents/ui/CheckboxV3.vue.js

@@ -1,7 +1,7 @@
 import { ref as r, computed as K, createElementBlock as y, openBlock as c, normalizeClass as v, withDirectives as I, createElementVNode as s, createCommentVNode as l, vModelDynamic as q, withKeys as d, withModifiers as f, createBlock as u, unref as p, toDisplayString as b } from "vue";
 import { PhCheckFat as P, PhMinus as S, PhCircle as B } from "@phosphor-icons/vue";
 /* empty css                */
-import D from "../../../_virtual/_plugin-vue_export-helper.js";
+import D from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const M = ["type", "disabled", "checked"], E = ["tabindex", "onKeydown"], N = {
   key: 0,
   class: "dpiV3_labelWrap"

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/Chip.vue.js

@@ -0,0 +1,115 @@
+import { useAttrs as C, ref as p, computed as S, createElementBlock as F, createCommentVNode as c, openBlock as n, normalizeClass as M, createBlock as d, resolveDynamicComponent as P, mergeProps as D, withModifiers as T, unref as r, withCtx as W, createElementVNode as w, toDisplayString as N } from "vue";
+import { PhMagnifyingGlass as m, PhX as b } from "@phosphor-icons/vue";
+import { useVModel as j } from "@vueuse/core";
+/* empty css          */
+import q from "../../../../../../_virtual/_plugin-vue_export-helper.js";
+const A = ["title"], E = { class: "dpiV3_chipBody-text" }, G = {
+  __name: "Chip",
+  props: {
+    text: {
+      type: String,
+      default: ""
+    },
+    setup: {
+      type: Object,
+      required: !0
+    },
+    data: {
+      type: Object,
+      required: !0
+    },
+    as: {
+      type: String,
+      default: "button"
+    },
+    selectValue: {
+      type: Boolean,
+      default: !1
+    },
+    noBorder: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: ["click", "selection-change", "update:selectValue"],
+  setup(e, { emit: V }) {
+    const t = e, h = V, y = C(), u = p(), i = j(t, "selectValue", h, {
+      defaultValue: t.setup["@selected"],
+      passive: !0
+    }), v = p(), o = p("16px");
+    function k(s) {
+    }
+    function x(s, l) {
+      if (s != "disabled" && s != "default" && s != "static" && (u.value.children[0].classList.toggle("dpiV3_chipSelected"), i.value = !i.value, h("click", t.data), h("selection-change", {
+        selected: i.value,
+        data: t.data
+      }), i.value))
+        for (let a = 0; a < u.value.children[0].children.length; a++)
+          u.value.children[0].children[a].tagName === "IMG" && !v.value && (i.value ? u.value.children[0].children[a].src = X : u.value.children[0].children[a].src = XB);
+    }
+    t.setup["@type"] === "selected" && (i.value = !0), t.setup["@search"] && (v.value = !0);
+    const f = p(!1);
+    function B(s) {
+      f.value = !0;
+    }
+    function g() {
+      f.value = !1;
+    }
+    const z = S(() => t.as === "button" ? {
+      type: "button",
+      ...y
+    } : y);
+    return (s, l) => typeof e.text < "u" ? (n(), F("div", {
+      key: 0,
+      ref_key: "chipWrap",
+      ref: u,
+      class: M({ dpiV3_chipBorder: !e.noBorder, dpiV3_focusBorder: f.value, dpiV3_inTableWrap: e.setup["@inTable"], dpiV3_inRaPFindability_outer: e.setup["@rapfindability"] }),
+      title: e.text,
+      onClick: k
+    }, [
+      (n(), d(P(e.as), D(z.value, {
+        class: ["dpiV3_chipBody", {
+          dpiV3_chipUnselected: e.setup["@type"] === "select",
+          dpiV3_chipSelected: r(i),
+          dpiV3_chipDefault: e.setup["@type"] === "default",
+          dpiV3_chipDisabled: e.setup["@type"] === "disabled",
+          dpiV3_specialFocus: f.value,
+          dpiV3_inTable: e.setup["@inTable"],
+          dpiV3_chipStatic: e.setup["@type"] === "static",
+          dpiV3_inFindability: e.setup["@findability"],
+          dpiV3_inRaPFindability: e.setup["@rapfindability"]
+        }],
+        disabled: e.setup["@type"] === "disabled" || e.setup["@type"] === "static",
+        onClick: l[0] || (l[0] = (a) => x(e.setup["@type"])),
+        onMousedown: l[1] || (l[1] = T(() => {
+        }, ["prevent"])),
+        onFocus: l[2] || (l[2] = (a) => B()),
+        onBlur: g
+      }), {
+        default: W(() => [
+          e.setup["@search"] && e.setup["@icon"] === "prefix" ? (n(), d(r(m), {
+            key: 0,
+            size: o.value
+          }, null, 8, ["size"])) : c("", !0),
+          !e.setup["@search"] && e.setup["@icon"] === "prefix" ? (n(), d(r(b), {
+            key: 1,
+            size: o.value
+          }, null, 8, ["size"])) : c("", !0),
+          w("span", E, N(e.text), 1),
+          !e.setup["@search"] && e.setup["@icon"] === "suffix" ? (n(), d(r(b), {
+            key: 2,
+            size: o.value
+          }, null, 8, ["size"])) : c("", !0),
+          e.setup["@search"] && e.setup["@icon"] === "suffix" ? (n(), d(r(m), {
+            key: 3,
+            size: o.value
+          }, null, 8, ["size"])) : c("", !0)
+        ]),
+        _: 1
+      }, 16, ["class", "disabled"]))
+    ], 10, A)) : c("", !0);
+  }
+}, U = /* @__PURE__ */ q(G, [["__scopeId", "data-v-82bf1b8c"]]);
+export {
+  U as default
+};

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/ChipToggleList/ChipToggleList.vue.js

@@ -0,0 +1,7 @@
+import o from "./ChipToggleList.vue2.js";
+/* empty css                    */
+import t from "../../../../../../../_virtual/_plugin-vue_export-helper.js";
+const c = /* @__PURE__ */ t(o, [["__scopeId", "data-v-bc5c88ab"]]);
+export {
+  c as default
+};

package/dist/packages/dpi/src/data-provider-interface/HappyFlowComponents/ui/ChipToggleList/ChipToggleList.vue2.js

@@ -0,0 +1,68 @@
+import { defineComponent as v, mergeModels as f, useModel as h, computed as x, createElementBlock as s, openBlock as c, Fragment as k, renderList as C, withDirectives as V, createElementVNode as u, vModelCheckbox as _, createVNode as b } from "vue";
+import { looseIndexOf as n } from "@vue/shared";
+import g from "../Chip.vue.js";
+const y = { class: "chip-toggle-list" }, I = ["id", "value"], M = ["for", "onClick"], B = /* @__PURE__ */ v({
+  __name: "ChipToggleList",
+  props: /* @__PURE__ */ f({
+    options: {}
+  }, {
+    modelValue: {
+      default: () => []
+    },
+    modelModifiers: {}
+  }),
+  emits: ["update:modelValue"],
+  setup(i) {
+    const r = i, t = h(i, "modelValue");
+    function o(l) {
+      return n(t.value, l) !== -1;
+    }
+    function m(l) {
+      n(t.value, l.id) !== -1 ? t.value = t.value.filter((e) => e !== l.id) : t.value = [...t.value, l.id];
+    }
+    const p = x(() => r.options.map((l) => ({
+      ...l,
+      selected: o(l.id)
+    })));
+    return (l, a) => (c(), s("div", y, [
+      (c(!0), s(k, null, C(p.value, (e) => (c(), s("div", {
+        key: e.id,
+        class: "chip-item"
+      }, [
+        V(u("input", {
+          id: `chip-${e.id}`,
+          "onUpdate:modelValue": a[0] || (a[0] = (d) => t.value = d),
+          class: "chip-checkbox",
+          type: "checkbox",
+          value: e.id
+        }, null, 8, I), [
+          [_, t.value]
+        ]),
+        u("label", {
+          class: "chip-label",
+          for: `chip-${e.id}`,
+          onClick: (d) => m(e)
+        }, [
+          b(g, {
+            "select-value": e.selected,
+            "onUpdate:selectValue": (d) => e.selected = d,
+            text: e.name,
+            data: {
+              "@value": e.id,
+              URI: "https://example.com/default"
+            },
+            setup: {
+              "@type": "select",
+              "@inTable": !1,
+              "@findability": !0,
+              "@selected": e.selected
+            }
+          }, null, 8, ["select-value", "onUpdate:selectValue", "text", "data", "setup"])
+        ], 8, M)
+      ]))), 128))
+    ]));
+  }
+});
+export {
+  B as default
+};

package/dist/{data-provider-interface → packages/dpi/src/data-provider-interface}/HappyFlowComponents/ui/CloseOpenButtonV3.vue.js

@@ -1,13 +1,13 @@
 /* empty css                                */
-import { PhCaretUp as c, PhCaretDown as a } from "@phosphor-icons/vue";
-import { resolveComponent as u, createElementBlock as f, openBlock as s, withKeys as r, normalizeClass as C, withModifiers as k, createBlock as p, createCommentVNode as m } from "vue";
+import { PhCaretUp as c, PhCaretDown as f } from "@phosphor-icons/vue";
+import { resolveComponent as u, createElementBlock as a, openBlock as s, withKeys as r, normalizeClass as C, withModifiers as k, createBlock as p, createCommentVNode as m } from "vue";
 /* empty css                       */
-import w from "../../../_virtual/_plugin-vue_export-helper.js";
+import w from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const x = {
   name: "CloseOpenButtonV3",
   emits: ["click"],
   components: {
-    PhCaretDown: a,
+    PhCaretDown: f,
     PhCaretUp: c
   },
   data() {
@@ -31,9 +31,10 @@ const x = {
     }
   }
 };
-function B(i, e, l, F, o, n) {
-  const d = u("PhCaretDown"), v = u("PhCaretUp");
-  return s(), f("button", {
+function y(i, e, l, B, o, n) {
+  const v = u("PhCaretDown"), d = u("PhCaretUp");
+  return s(), a("button", {
+    type: "button",
     tabindex: "0",
     onMousedown: e[0] || (e[0] = (...t) => n.removeFocus && n.removeFocus(...t)),
     class: C(["dpiV3_open-close-button", [{ dpiV3_activeState: o.isActive }]]),
@@ -49,19 +50,19 @@ function B(i, e, l, F, o, n) {
       e[7] || (e[7] = r((t) => o.isActive = !1, ["space"]))
     ]
   }, [
-    l.expanded ? m("", !0) : (s(), p(d, {
+    l.expanded ? m("", !0) : (s(), p(v, {
       key: 0,
       color: "var(--neutral-60, #3D4952)",
       size: 32
     })),
-    l.expanded ? (s(), p(v, {
+    l.expanded ? (s(), p(d, {
       key: 1,
       color: "var(--neutral-60, #3D4952)",
       size: 32
     })) : m("", !0)
   ], 34);
 }
-const b = /* @__PURE__ */ w(x, [["render", B], ["__scopeId", "data-v-d10a315d"]]);
+const V = /* @__PURE__ */ w(x, [["render", y], ["__scopeId", "data-v-fb00123e"]]);
 export {
-  b as default
+  V as default
 };

package/dist/{data-provider-interface → packages/dpi/src/data-provider-interface}/HappyFlowComponents/ui/CrossOutButton.vue.js

@@ -2,7 +2,7 @@
 import { PhX as l } from "@phosphor-icons/vue";
 import { resolveComponent as p, createElementBlock as m, openBlock as v, withKeys as n, normalizeClass as d, withModifiers as f, createVNode as c } from "vue";
 /* empty css                    */
-import k from "../../../_virtual/_plugin-vue_export-helper.js";
+import k from "../../../../../../_virtual/_plugin-vue_export-helper.js";
 const C = {
   name: "CrossOutButton",
   components: {