@solvimon/solvimon-web 0.1.0-alpha.1 → 0.1.0-alpha.11

package/dist/PricingGroupContent.vue_vue_type_script_setup_true_lang-BChVMzCj.mjs

@@ -0,0 +1,50 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, createVNode, unref, withCtx, createTextVNode, toDisplayString, renderSlot } from "vue";
+import { _ as _sfc_main$1 } from "./vendor-ui-C0K3osvz.mjs";
+const _hoisted_1 = { class: "flex items-start" };
+const _hoisted_2 = { class: "flex flex-col grow" };
+const _hoisted_3 = { class: "flex items-center gap-1" };
+const _hoisted_4 = { class: "flex items-center ml-4 self-center" };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "PricingGroupContent",
+  props: {
+    name: { type: String },
+    description: { type: String }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        createElementVNode("div", _hoisted_2, [
+          createElementVNode("div", _hoisted_3, [
+            createVNode(unref(_sfc_main$1), {
+              tag: "span",
+              variant: "body-sm",
+              weight: "semibold"
+            }, {
+              default: withCtx(() => [
+                createTextVNode(toDisplayString(__props.name), 1)
+              ]),
+              _: 1
+            }),
+            renderSlot(_ctx.$slots, "badge")
+          ]),
+          createVNode(unref(_sfc_main$1), {
+            tag: "span",
+            variant: "body-xs",
+            shade: "lighter"
+          }, {
+            default: withCtx(() => [
+              createTextVNode(toDisplayString(__props.description), 1)
+            ]),
+            _: 1
+          })
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          renderSlot(_ctx.$slots, "default")
+        ])
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/PricingGroupContent.vue_vue_type_script_setup_true_lang-Br3bEUlP.js

@@ -0,0 +1 @@
+const e=require("vue"),t=require("./vendor-ui-5pJF5KBP.js"),r={class:"flex items-start"},n={class:"flex flex-col grow"},a={class:"flex items-center gap-1"},s={class:"flex items-center ml-4 self-center"},i=e.defineComponent({__name:"PricingGroupContent",props:{name:{type:String},description:{type:String}},setup:i=>(o,l)=>(e.openBlock(),e.createElementBlock("div",r,[e.createElementVNode("div",n,[e.createElementVNode("div",a,[e.createVNode(e.unref(t._sfc_main),{tag:"span",variant:"body-sm",weight:"semibold"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.name),1)]),_:1}),e.renderSlot(o.$slots,"badge")]),e.createVNode(e.unref(t._sfc_main),{tag:"span",variant:"body-xs",shade:"lighter"},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(i.description),1)]),_:1})]),e.createElementVNode("div",s,[e.renderSlot(o.$slots,"default")])]))});exports._sfc_main=i;

package/dist/{Skeleton.vue_vue_type_script_setup_true_lang-BFFJw-5h.mjs → Skeleton.vue_vue_type_script_setup_true_lang-DGMxHc20.mjs}

@@ -1,9 +1,14 @@
-import { defineComponent, useSlots, computed, renderSlot, openBlock, createElementBlock, Fragment, mergeProps, normalizeProps, createElementVNode, normalizeClass, Comment, Text } from "vue";
+import { defineComponent, useSlots, computed, renderSlot, openBlock, createElementBlock, Fragment, mergeProps, createElementVNode, normalizeClass, isVNode, Comment, Text } from "vue";
+const _hoisted_1 = ["data-testid"];
+const _hoisted_2 = ["data-testid"];
+const _hoisted_3 = ["data-testid"];
+const _hoisted_4 = ["data-testid"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "Skeleton",
   props: {
     variant: { type: String },
-    class: { type: String }
+    class: { type: String },
+    dataTestid: { type: String }
   },
   setup(__props) {
     const slots = useSlots();
@@ -15,6 +20,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (Array.isArray(node)) {
         return node.every(isVnodeEmpty);
       }
+      if (!isVNode(node)) return false;
       const vnode = node;
       if (vnode.type === Comment) {
         return true;
@@ -42,17 +48,27 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     return (_ctx, _cache) => {
       return hasSlotContent.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
-        __props.variant === "title" ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, { class: "rounded border border-gray-50 bg-gray-50/50 h-6 w-40" }), null, 16)) : __props.variant === "divider-text" ? (openBlock(), createElementBlock("div", mergeProps({ key: 1 }, _ctx.$attrs, { class: "rounded border border-gray-50 bg-gray-50/50 h-4 w-12 mx-auto" }), null, 16)) : __props.variant === "section" ? (openBlock(), createElementBlock("div", normalizeProps(mergeProps({ key: 2 }, _ctx.$attrs)), [
-          _cache[0] || (_cache[0] = createElementVNode("div", { class: "rounded border border-gray-50 bg-gray-50/50 h-6 w-40" }, null, -1)),
+        __props.variant === "title" ? (openBlock(), createElementBlock("div", mergeProps({ key: 0 }, _ctx.$attrs, {
+          "data-testid": __props.dataTestid,
+          class: "sv-skeleton sv-skeleton--title h-6 w-40 rounded border border-gray-50 bg-gray-50/50"
+        }), null, 16, _hoisted_1)) : __props.variant === "divider-text" ? (openBlock(), createElementBlock("div", mergeProps({ key: 1 }, _ctx.$attrs, {
+          "data-testid": __props.dataTestid,
+          class: "sv-skeleton sv-skeleton--divider-text mx-auto h-4 w-12 rounded border border-gray-50 bg-gray-50/50"
+        }), null, 16, _hoisted_2)) : __props.variant === "section" ? (openBlock(), createElementBlock("div", mergeProps({ key: 2 }, _ctx.$attrs, {
+          "data-testid": __props.dataTestid,
+          class: "sv-skeleton sv-skeleton--section"
+        }), [
+          _cache[0] || (_cache[0] = createElementVNode("div", { class: "sv-skeleton__title h-6 w-40 rounded border border-gray-50 bg-gray-50/50" }, null, -1)),
           createElementVNode("div", {
             class: normalizeClass([
-              "rounded border border-gray-50 bg-gray-50/50 mt-1 md:mt-2",
+              "sv-skeleton__body mt-1 rounded border border-gray-50 bg-gray-50/50 md:mt-2",
               _ctx.$props.class
             ])
           }, null, 2)
-        ], 16)) : (openBlock(), createElementBlock("div", mergeProps({ key: 3 }, _ctx.$attrs, {
-          class: ["rounded border border-gray-50 bg-gray-50/50", _ctx.$props.class]
-        }), null, 16))
+        ], 16, _hoisted_3)) : (openBlock(), createElementBlock("div", mergeProps({ key: 3 }, _ctx.$attrs, {
+          "data-testid": __props.dataTestid,
+          class: ["sv-skeleton rounded border border-gray-50 bg-gray-50/50", _ctx.$props.class]
+        }), null, 16, _hoisted_4))
       ], 64));
     };
   }

package/dist/Skeleton.vue_vue_type_script_setup_true_lang-DfMgIsGm.js

@@ -0,0 +1 @@
+const e=require("vue"),t=["data-testid"],r=["data-testid"],s=["data-testid"],a=["data-testid"],n=e.defineComponent({__name:"Skeleton",props:{variant:{type:String},class:{type:String},dataTestid:{type:String}},setup(n){const d=e.useSlots(),o=t=>{if(null==t||!1===t)return!0;if("string"==typeof t||"number"==typeof t)return 0===String(t).trim().length;if(Array.isArray(t))return t.every(o);if(!e.isVNode(t))return!1;const r=t;return r.type===e.Comment||(r.type===e.Text?"string"!=typeof r.children||!r.children.trim():r.type===e.Fragment&&(null==r.children||!!Array.isArray(r.children)&&r.children.every(o)))},l=e.computed(()=>{if(!d.default)return!1;const e=d.default({});return!(!e||0===e.length)&&!e.every(o)});return(d,o)=>l.value?e.renderSlot(d.$slots,"default",{key:0}):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},["title"===n.variant?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:0},d.$attrs,{"data-testid":n.dataTestid,class:"sv-skeleton sv-skeleton--title h-6 w-40 rounded border border-gray-50 bg-gray-50/50"}),null,16,t)):"divider-text"===n.variant?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:1},d.$attrs,{"data-testid":n.dataTestid,class:"sv-skeleton sv-skeleton--divider-text mx-auto h-4 w-12 rounded border border-gray-50 bg-gray-50/50"}),null,16,r)):"section"===n.variant?(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:2},d.$attrs,{"data-testid":n.dataTestid,class:"sv-skeleton sv-skeleton--section"}),[o[0]||(o[0]=e.createElementVNode("div",{class:"sv-skeleton__title h-6 w-40 rounded border border-gray-50 bg-gray-50/50"},null,-1)),e.createElementVNode("div",{class:e.normalizeClass(["sv-skeleton__body mt-1 rounded border border-gray-50 bg-gray-50/50 md:mt-2",d.$props.class])},null,2)],16,s)):(e.openBlock(),e.createElementBlock("div",e.mergeProps({key:3},d.$attrs,{"data-testid":n.dataTestid,class:["sv-skeleton rounded border border-gray-50 bg-gray-50/50",d.$props.class]}),null,16,a))],64))}});exports._sfc_main=n;

package/dist/SubscriptionsList.vue_vue_type_script_setup_true_lang-AHw3iTfi.js

@@ -0,0 +1 @@
+const e=require("./useIncrementalLoading-DoTTXM2Y.js"),t=require("./subscriptions-jelITJcX.js"),i=require("vue"),s=require("./vendor-ui-5pJF5KBP.js"),o=require("./Skeleton.vue_vue_type_script_setup_true_lang-DfMgIsGm.js"),n=require("./useActionDispatchProvider-rw9kWeE0.js");const c={class:"sv-subscriptions-list__item-body flex flex-col gap-4 md:flex-row"},r={class:"sv-subscriptions-list__item-content grow"},a={class:"sv-subscriptions-list__item-meta mt-4 flex items-center gap-6"},u={key:1,class:"sv-subscriptions-list__item-next-invoice flex gap-1"},l={class:"sv-subscriptions-list__item-actions flex flex-col items-center gap-2 md:flex-row"},p=i.defineComponent({__name:"SubscriptionsListItem",props:{subscription:{type:Object},paymentMethod:{type:Object},customer:{type:Object},showViewSubscriptionDetailsButton:{type:Boolean,default:!0},showCancelSubscriptionButton:{type:Boolean,default:!0},showRenewSubscriptionButton:{type:Boolean,default:!0}},emits:["view-subscription-details","cancel-subscription","renew-subscription"],setup(e){const t=e,{$t:o}=s.useIntl(),{formatDate:n}=s.useIntl(),p=i.computed(()=>{var e;const i=t.subscription.pricing_plan_schedule_infos;if(0===i.length)return;const s=i[i.length-1];return null==(e=null==s?void 0:s.pricing_plan_version)?void 0:e.pricing_plan}),d=i.computed(()=>{var e;return t.subscription.name||(null==(e=p.value)?void 0:e.name)||o({defaultMessage:"Subscription",description:"The fallback name for when no subscription name can be determined",id:"customer_overview.subscriptions_block.fallback_subscription_name"})}),b=i.computed(()=>{var e;return null==(e=p.value)?void 0:e.description}),m=i.computed(()=>{const e=t.subscription.inactive_periods;return!e||0===e.length}),_=i.computed(()=>{const e=t.subscription.inactive_periods;return Array.isArray(e)&&e.length>0}),v=i.computed(()=>m.value&&t.showCancelSubscriptionButton),f=i.computed(()=>_.value&&t.showRenewSubscriptionButton),h=i.computed(()=>t.showViewSubscriptionDetailsButton);return(t,p)=>(i.openBlock(),i.createBlock(i.unref(s._sfc_main$1),{class:"sv-subscriptions-list__item"},{default:i.withCtx(()=>[i.createElementVNode("div",c,[i.createElementVNode("div",r,[i.createVNode(i.unref(s._sfc_main),{tag:"h3",variant:"heading-2",class:"sv-subscriptions-list__item-title"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(d.value),1)]),_:1}),b.value?(i.openBlock(),i.createBlock(i.unref(s._sfc_main),{key:0,variant:"body-sm",tag:"span",shade:"lighter",class:"sv-subscriptions-list__item-description"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(b.value),1)]),_:1})):i.createCommentVNode("",!0),i.createElementVNode("div",a,[e.paymentMethod?(i.openBlock(),i.createBlock(i.unref(s._sfc_main$5),{key:0,variant:"condensed",class:"sv-payment-methods__item","payment-method":e.paymentMethod},null,8,["payment-method"])):i.createCommentVNode("",!0),e.subscription.next_invoice?(i.openBlock(),i.createElementBlock("div",u,[i.createVNode(i.unref(s._sfc_main),{tag:"span",variant:"body-xs",shade:"light",weight:"semibold"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(i.unref(o)({defaultMessage:"Next billing date",description:"The label for the next billing date",id:"customer.subscriptions_block.next_billing_date"})),1)]),_:1}),i.createVNode(i.unref(s._sfc_main),{tag:"span",variant:"body-xs",shade:"light"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(i.unref(n)({date:e.subscription.next_invoice.invoice_date,format:"date",offsetType:"offsetted",timezone:e.customer.timezone})),1)]),_:1})])):i.createCommentVNode("",!0)])]),i.createElementVNode("div",l,[h.value?(i.openBlock(),i.createBlock(i.unref(s._sfc_main$3),{key:0,color:"primary",class:"sv-action sv-action--primary sv-subscriptions-list__item-details w-full md:w-auto",type:"button",onClick:p[0]||(p[0]=i=>t.$emit("view-subscription-details",{subscriptionId:e.subscription.id}))},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(i.unref(o)({defaultMessage:"Subscription details",description:"The label for the subscription details button in the subscriptions block",id:"customer.subscriptions_block.show_details_button_label"})),1)]),_:1})):i.createCommentVNode("",!0),v.value?(i.openBlock(),i.createBlock(i.unref(s._sfc_main$3),{key:1,variant:"outline",color:"gray",class:"sv-action sv-action--secondary sv-subscriptions-list__item-cancel w-full md:w-auto",type:"button",onClick:p[1]||(p[1]=i=>t.$emit("cancel-subscription",{subscriptionId:e.subscription.id}))},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(i.unref(o)({defaultMessage:"Cancel subscription",description:"The label for the cancel subscription button in the subscriptions block",id:"customer.subscriptions_block.cancel_button_label"})),1)]),_:1})):f.value?(i.openBlock(),i.createBlock(i.unref(s._sfc_main$3),{key:2,variant:"outline",color:"gray",class:"sv-action sv-action--secondary sv-subscriptions-list__item-renew w-full md:w-auto",type:"button",onClick:p[2]||(p[2]=i=>t.$emit("renew-subscription",{subscriptionId:e.subscription.id}))},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(i.unref(o)({defaultMessage:"Renew subscription",description:"The label for the renew subscription button in the subscriptions block",id:"customer.subscriptions_block.renew_button_label"})),1)]),_:1})):i.createCommentVNode("",!0)])])]),_:1}))}}),d={key:1,class:"sv-subscriptions-list__items grid grid-cols-1 gap-4"},b=i.defineComponent({__name:"SubscriptionsList",props:{customer:{type:Object},subscriptions:{type:Array},paymentMethods:{default:()=>[],type:Array},isLoading:{type:Boolean},showViewAllButton:{type:Boolean,default:!0},showViewDetailsButton:{type:Boolean,default:!0},showCancelButton:{type:Boolean,default:!0},showRenewButton:{type:Boolean,default:!0}},emits:["view-subscription-details","view-all-subscriptions","cancel-subscription","renew-subscription","load-more"],setup(e){const t=e,{$t:o}=s.useIntl(),n=i.computed(()=>t.subscriptions.length>0),c=e=>{if(e)return t.paymentMethods.find(({id:t})=>t===e)},r=i.computed(()=>t.showViewAllButton);return(t,a)=>(i.openBlock(),i.createBlock(i.unref(s._sfc_main$1),{class:"sv-subscriptions-list","no-spacing":"","no-border":"",title:i.unref(o)({defaultMessage:"{count, plural, one {My subscription} other {My subscriptions}}",description:"Title for the subscriptions block on the customer overview page",id:"customer_overview.subscriptions_block.title"},{count:String(e.subscriptions.length)})},i.createSlots({default:i.withCtx(()=>[n.value?(i.openBlock(),i.createElementBlock("div",d,[(i.openBlock(!0),i.createElementBlock(i.Fragment,null,i.renderList(e.subscriptions,s=>(i.openBlock(),i.createBlock(p,{key:s.id,subscription:s,"payment-method":c(s.payment_method_id),customer:e.customer,"show-view-subscription-details-button":e.showViewDetailsButton,"show-cancel-subscription-button":e.showCancelButton,"show-renew-subscription-button":e.showRenewButton,onViewSubscriptionDetails:a[1]||(a[1]=e=>t.$emit("view-subscription-details",e)),onCancelSubscription:a[2]||(a[2]=e=>t.$emit("cancel-subscription",e)),onRenewSubscription:a[3]||(a[3]=e=>t.$emit("renew-subscription",e))},null,8,["subscription","payment-method","customer","show-view-subscription-details-button","show-cancel-subscription-button","show-renew-subscription-button"]))),128))])):(i.openBlock(),i.createBlock(i.unref(s._sfc_main$1),{key:0,class:"sv-empty-state sv-subscriptions-list__empty"},{default:i.withCtx(()=>[i.createVNode(i.unref(s._sfc_main),{tag:"h3",variant:"heading-3"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(i.unref(o)({defaultMessage:"No subscriptions",description:"Title for the my subscriptions block on the customer overview page",id:"customer_overview.subscriptions_block.no_active_subscription_title"})),1)]),_:1}),i.createVNode(i.unref(s._sfc_main),{variant:"body-xs",shade:"lighter"},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(i.unref(o)({defaultMessage:"There’s no active subscription to display.",description:"Text that is being displayed when there is no active subscription in the subscriptions block",id:"customer_overview.subscriptions_block.no_active_subscription_content"})),1)]),_:1})]),_:1}))]),_:2},[r.value?{name:"right",fn:i.withCtx(()=>[i.createVNode(i.unref(s._sfc_main$3),{size:"sm",variant:"ghost",color:"gray","icon-suffix":"arrow_right_alt",class:"sv-action sv-action--ghost sv-subscriptions-list__view-all",type:"button",onClick:a[0]||(a[0]=e=>t.$emit("view-all-subscriptions"))},{default:i.withCtx(()=>[i.createTextVNode(i.toDisplayString(i.unref(o)({defaultMessage:"View all",description:"The text for the view all subscriptions button",id:"customer_overview.subscriptions_block.view_all_button_label"})),1)]),_:1})]),key:"0"}:void 0]),1032,["title"]))}}),m=i.defineComponent({__name:"SubscriptionsList",props:{customer:{type:null},subscriptions:{type:Array},paymentMethods:{type:Array},isLoading:{type:Boolean},configuration:{type:Object}},emits:["load-more"],setup(e){const{dispatchAction:t}=n.useActionDispatchProvider();return(s,n)=>{var c,r,a,u;return e.isLoading?(i.openBlock(),i.createBlock(o._sfc_main,{key:0,variant:"section",class:"sv-subscriptions-list sv-root sv-component sv-loading min-h-[100px]","data-testid":"subscriptions-list-skeleton"})):e.customer?(i.openBlock(),i.createBlock(b,{key:1,class:"sv-subscriptions-list sv-root sv-component",customer:e.customer,subscriptions:e.subscriptions,"payment-methods":e.paymentMethods,"is-loading":e.isLoading,"show-view-all-button":null==(c=e.configuration)?void 0:c.showViewAllButton,"show-view-details-button":null==(r=e.configuration)?void 0:r.showViewDetailsButton,"show-cancel-button":null==(a=e.configuration)?void 0:a.showCancelButton,"show-renew-button":null==(u=e.configuration)?void 0:u.showRenewButton,onViewSubscriptionDetails:n[0]||(n[0]=e=>i.unref(t)({action:"view-subscription-details",data:{subscriptionId:e.subscriptionId}})),onViewAllSubscriptions:n[1]||(n[1]=e=>i.unref(t)({action:"view-all-subscriptions"})),onCancelSubscription:n[2]||(n[2]=e=>i.unref(t)({action:"cancel-subscription",data:{subscriptionId:e.subscriptionId}})),onRenewSubscription:n[3]||(n[3]=e=>i.unref(t)({action:"renew-subscription",data:{subscriptionId:e.subscriptionId}})),onLoadMore:n[4]||(n[4]=e=>s.$emit("load-more"))},null,8,["customer","subscriptions","payment-methods","is-loading","show-view-all-button","show-view-details-button","show-cancel-button","show-renew-button"])):i.createCommentVNode("",!0)}}});exports._sfc_main=m,exports.useSubscriptionsList=function({customerId:i,batchSize:s=15}){const o=t.createSubscriptionsService();return e.useIncrementalLoading({service:async e=>o.getActiveSubscriptions({customerId:i,pagination:{page:e,pageSize:s}})})};

package/dist/{SubscriptionsList.vue_vue_type_script_setup_true_lang-DfB5BqiH.mjs → SubscriptionsList.vue_vue_type_script_setup_true_lang-BkzLj8n2.mjs}

@@ -1,9 +1,9 @@
-import { u as useIncrementalLoading } from "./useIncrementalLoading-fHCizCSo.mjs";
-import { c as createSubscriptionsService } from "./subscriptions-3R7aMoky.mjs";
+import { u as useIncrementalLoading } from "./useIncrementalLoading-Cnzh2mAz.mjs";
+import { c as createSubscriptionsService } from "./subscriptions-ClGIr_aS.mjs";
 import { defineComponent, computed, openBlock, createBlock, unref, withCtx, createElementVNode, createVNode, createTextVNode, toDisplayString, createCommentVNode, createElementBlock, createSlots, Fragment, renderList } from "vue";
-import { b as useIntl, d as _sfc_main$1g, _ as _sfc_main$2$1, g as _sfc_main$3, m as _sfc_main$2H } from "./component-BkmcE85U.mjs";
-import { _ as _sfc_main$4 } from "./Skeleton.vue_vue_type_script_setup_true_lang-BFFJw-5h.mjs";
-import { u as useActionDispatchProvider } from "./useActionDispatchProvider-CBo_Hwu5.mjs";
+import { u as useIntl, b as _sfc_main$3, _ as _sfc_main$4, j as _sfc_main$5, e as _sfc_main$6 } from "./vendor-ui-C0K3osvz.mjs";
+import { _ as _sfc_main$7 } from "./Skeleton.vue_vue_type_script_setup_true_lang-DGMxHc20.mjs";
+import { u as useActionDispatchProvider } from "./useActionDispatchProvider-BC57-Ufn.mjs";
 function useSubscriptionsList({
   customerId,
   batchSize: pageSize = 15
@@ -15,14 +15,14 @@ function useSubscriptionsList({
   });
   return useIncrementalLoading({ service });
 }
-const _hoisted_1$1 = { class: "flex flex-col gap-4 md:flex-row" };
-const _hoisted_2 = { class: "grow" };
-const _hoisted_3 = { class: "mt-4 flex items-center gap-6" };
+const _hoisted_1$1 = { class: "sv-subscriptions-list__item-body flex flex-col gap-4 md:flex-row" };
+const _hoisted_2 = { class: "sv-subscriptions-list__item-content grow" };
+const _hoisted_3 = { class: "sv-subscriptions-list__item-meta mt-4 flex items-center gap-6" };
 const _hoisted_4 = {
   key: 1,
-  class: "flex gap-1"
+  class: "sv-subscriptions-list__item-next-invoice flex gap-1"
 };
-const _hoisted_5 = { class: "flex flex-col items-center gap-2 md:flex-row" };
+const _hoisted_5 = { class: "sv-subscriptions-list__item-actions flex flex-col items-center gap-2 md:flex-row" };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "SubscriptionsListItem",
   props: {
@@ -79,24 +79,26 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
     );
     const isDetailButtonVisible = computed(() => props.showViewSubscriptionDetailsButton);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), null, {
+      return openBlock(), createBlock(unref(_sfc_main$3), { class: "sv-subscriptions-list__item" }, {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1$1, [
             createElementVNode("div", _hoisted_2, [
-              createVNode(unref(_sfc_main$2$1), {
+              createVNode(unref(_sfc_main$4), {
                 tag: "h3",
-                variant: "heading-2"
+                variant: "heading-2",
+                class: "sv-subscriptions-list__item-title"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(subscriptionName.value), 1)
                 ]),
                 _: 1
               }),
-              subscriptionDescription.value ? (openBlock(), createBlock(unref(_sfc_main$2$1), {
+              subscriptionDescription.value ? (openBlock(), createBlock(unref(_sfc_main$4), {
                 key: 0,
                 variant: "body-sm",
                 tag: "span",
-                shade: "lighter"
+                shade: "lighter",
+                class: "sv-subscriptions-list__item-description"
               }, {
                 default: withCtx(() => [
                   createTextVNode(toDisplayString(subscriptionDescription.value), 1)
@@ -104,13 +106,14 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 _: 1
               })) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_3, [
-                __props.paymentMethod ? (openBlock(), createBlock(unref(_sfc_main$3), {
+                __props.paymentMethod ? (openBlock(), createBlock(unref(_sfc_main$5), {
                   key: 0,
                   variant: "condensed",
+                  class: "sv-payment-methods__item",
                   "payment-method": __props.paymentMethod
                 }, null, 8, ["payment-method"])) : createCommentVNode("", true),
                 __props.subscription.next_invoice ? (openBlock(), createElementBlock("div", _hoisted_4, [
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$4), {
                     tag: "span",
                     variant: "body-xs",
                     shade: "light",
@@ -125,7 +128,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                     ]),
                     _: 1
                   }),
-                  createVNode(unref(_sfc_main$2$1), {
+                  createVNode(unref(_sfc_main$4), {
                     tag: "span",
                     variant: "body-xs",
                     shade: "light"
@@ -144,10 +147,10 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
               ])
             ]),
             createElementVNode("div", _hoisted_5, [
-              isDetailButtonVisible.value ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+              isDetailButtonVisible.value ? (openBlock(), createBlock(unref(_sfc_main$6), {
                 key: 0,
                 color: "primary",
-                class: "w-full md:w-auto",
+                class: "sv-action sv-action--primary sv-subscriptions-list__item-details w-full md:w-auto",
                 type: "button",
                 onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("view-subscription-details", { subscriptionId: __props.subscription.id }))
               }, {
@@ -160,11 +163,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               })) : createCommentVNode("", true),
-              isCancelButtonVisible.value ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+              isCancelButtonVisible.value ? (openBlock(), createBlock(unref(_sfc_main$6), {
                 key: 1,
                 variant: "outline",
                 color: "gray",
-                class: "w-full md:w-auto",
+                class: "sv-action sv-action--secondary sv-subscriptions-list__item-cancel w-full md:w-auto",
                 type: "button",
                 onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("cancel-subscription", { subscriptionId: __props.subscription.id }))
               }, {
@@ -176,11 +179,11 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
                   })), 1)
                 ]),
                 _: 1
-              })) : isRenewButtonVisible.value ? (openBlock(), createBlock(unref(_sfc_main$2H), {
+              })) : isRenewButtonVisible.value ? (openBlock(), createBlock(unref(_sfc_main$6), {
                 key: 2,
                 variant: "outline",
                 color: "gray",
-                class: "w-full md:w-auto",
+                class: "sv-action sv-action--secondary sv-subscriptions-list__item-renew w-full md:w-auto",
                 type: "button",
                 onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("renew-subscription", { subscriptionId: __props.subscription.id }))
               }, {
@@ -203,7 +206,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
 });
 const _hoisted_1 = {
   key: 1,
-  class: "grid grid-cols-1 gap-4"
+  class: "sv-subscriptions-list__items grid grid-cols-1 gap-4"
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "SubscriptionsList",
@@ -228,7 +231,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
     const isViewAllButtonVisible = computed(() => props.showViewAllButton);
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(unref(_sfc_main$1g), {
+      return openBlock(), createBlock(unref(_sfc_main$3), {
+        class: "sv-subscriptions-list",
         "no-spacing": "",
         "no-border": "",
         title: unref($t)(
@@ -241,9 +245,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         )
       }, createSlots({
         default: withCtx(() => [
-          !hasSubscriptions.value ? (openBlock(), createBlock(unref(_sfc_main$1g), { key: 0 }, {
+          !hasSubscriptions.value ? (openBlock(), createBlock(unref(_sfc_main$3), {
+            key: 0,
+            class: "sv-empty-state sv-subscriptions-list__empty"
+          }, {
             default: withCtx(() => [
-              createVNode(unref(_sfc_main$2$1), {
+              createVNode(unref(_sfc_main$4), {
                 tag: "h3",
                 variant: "heading-3"
               }, {
@@ -256,7 +263,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 ]),
                 _: 1
               }),
-              createVNode(unref(_sfc_main$2$1), {
+              createVNode(unref(_sfc_main$4), {
                 variant: "body-xs",
                 shade: "lighter"
               }, {
@@ -281,13 +288,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
                 "show-view-subscription-details-button": __props.showViewDetailsButton,
                 "show-cancel-subscription-button": __props.showCancelButton,
                 "show-renew-subscription-button": __props.showRenewButton,
-                "show-view-all-button": __props.showViewAllButton,
-                "show-cancel-button": __props.showCancelButton,
-                "show-renew-button": __props.showRenewButton,
                 onViewSubscriptionDetails: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("view-subscription-details", $event)),
                 onCancelSubscription: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("cancel-subscription", $event)),
                 onRenewSubscription: _cache[3] || (_cache[3] = ($event) => _ctx.$emit("renew-subscription", $event))
-              }, null, 8, ["subscription", "payment-method", "customer", "show-view-subscription-details-button", "show-cancel-subscription-button", "show-renew-subscription-button", "show-view-all-button", "show-cancel-button", "show-renew-button"]);
+              }, null, 8, ["subscription", "payment-method", "customer", "show-view-subscription-details-button", "show-cancel-subscription-button", "show-renew-subscription-button"]);
             }), 128))
           ]))
         ]),
@@ -296,11 +300,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         isViewAllButtonVisible.value ? {
           name: "right",
           fn: withCtx(() => [
-            createVNode(unref(_sfc_main$2H), {
+            createVNode(unref(_sfc_main$6), {
               size: "sm",
               variant: "ghost",
               color: "gray",
               "icon-suffix": "arrow_right_alt",
+              class: "sv-action sv-action--ghost sv-subscriptions-list__view-all",
               type: "button",
               onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("view-all-subscriptions"))
             }, {
@@ -334,13 +339,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { dispatchAction } = useActionDispatchProvider();
     return (_ctx, _cache) => {
       var _a, _b, _c, _d;
-      return __props.isLoading ? (openBlock(), createBlock(_sfc_main$4, {
+      return __props.isLoading ? (openBlock(), createBlock(_sfc_main$7, {
         key: 0,
         variant: "section",
-        class: "min-h-[100px]",
+        class: "sv-subscriptions-list sv-root sv-component sv-loading min-h-[100px]",
         "data-testid": "subscriptions-list-skeleton"
       })) : __props.customer ? (openBlock(), createBlock(_sfc_main$1, {
         key: 1,
+        class: "sv-subscriptions-list sv-root sv-component",
         customer: __props.customer,
         subscriptions: __props.subscriptions,
         "payment-methods": __props.paymentMethods,