+
+Upgrade your plan to add more {service}
+ +
+
diff --git a/src/lib/components/cardPlanLimit.svelte b/src/lib/components/cardPlanLimit.svelte
new file mode 100644
index 0000000000..966337d2fa
--- /dev/null
+++ b/src/lib/components/cardPlanLimit.svelte
@@ -0,0 +1,16 @@
+
+
+
+
+ This payment method has expired
+
+ {/if}
+
diff --git a/src/lib/components/drop.svelte b/src/lib/components/drop.svelte
index 31077c10d3..d6c899df21 100644
--- a/src/lib/components/drop.svelte
+++ b/src/lib/components/drop.svelte
@@ -143,7 +143,7 @@
.drop-arrow::before {
content: '';
transform: rotate(45deg);
- background: hsl(var(--color-neutral-200));
+ background: hsl(var(--color-neutral-85));
body.theme-light & {
background: hsl(var(--color-neutral-10));
diff --git a/src/lib/components/dropListItem.svelte b/src/lib/components/dropListItem.svelte
index 98d7c2676c..acf02686b0 100644
--- a/src/lib/components/dropListItem.svelte
+++ b/src/lib/components/dropListItem.svelte
@@ -4,6 +4,7 @@
export let disabled = false;
export let icon: string = null;
export let event: string = null;
+ export let loading = false;
function track() {
if (!event) {
@@ -17,10 +18,17 @@
+
+ {#if paymentMethod?.expired}
+
+
+
+
+ + {paymentMethod?.brand} ending in {paymentMethod?.last4} +
++ Expires {paymentMethod?.expiryMonth}/{paymentMethod?.expiryYear} +
+ {#if paymentMethod?.name} ++ {paymentMethod.name} +
+ {/if} +
diff --git a/src/lib/components/fakeModal.svelte b/src/lib/components/fakeModal.svelte
new file mode 100644
index 0000000000..34dc2ea6bb
--- /dev/null
+++ b/src/lib/components/fakeModal.svelte
@@ -0,0 +1,164 @@
+
+
+
+
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
index 4b12577c84..781ce567c5 100644
--- a/src/lib/components/index.ts
+++ b/src/lib/components/index.ts
@@ -46,13 +46,20 @@ export { default as EventModal } from './eventModal.svelte';
export { default as Status } from './status.svelte';
export { default as Heading } from './heading.svelte';
export { default as Output } from './output.svelte';
+export { default as Support } from './support.svelte';
export { default as ViewSelector } from './viewSelector.svelte';
export { default as LabelCard } from './labelCard.svelte';
+export { default as RegionCard } from './regionCard.svelte';
export { default as Limit } from './limit.svelte';
export { default as PaginationWithLimit } from './paginationWithLimit.svelte';
export { default as ClickableList } from './clickableList.svelte';
export { default as ClickableListItem } from './clickableListItem.svelte';
export { default as Id } from './id.svelte';
+export { default as ProgressBar } from './progressBar.svelte';
+export { default as ProgressBarBig } from './progressBarBig.svelte';
+export { default as CreditCardInfo } from './creditCardInfo.svelte';
+export { default as CreditCardBrandImage } from './creditCardBrandImage.svelte';
+export { default as CardPlanLimit } from './cardPlanLimit.svelte';
export { default as NumericList } from './numericList.svelte';
export { default as NumericListItem } from './numericListItem.svelte';
export { default as EyebrowHeading } from './eyebrowHeading.svelte';
@@ -60,3 +67,7 @@ export { default as SvgIcon } from './svgIcon.svelte';
export { default as MigrationBox } from './migrationBox.svelte';
export { default as FloatingActionBar } from './floatingActionBar.svelte';
export { default as LoadingDots } from './loadingDots.svelte';
+export { default as FakeModal } from './fakeModal.svelte';
+export { default as RadioBoxes } from './radioBoxes.svelte';
+export { default as ModalWrapper } from './modalWrapper.svelte';
+export { default as ModalSideCol } from './modalSideCol.svelte';
diff --git a/src/lib/components/labelCard.svelte b/src/lib/components/labelCard.svelte
index 5565b392e4..9d30f9b0c1 100644
--- a/src/lib/components/labelCard.svelte
+++ b/src/lib/components/labelCard.svelte
@@ -1,4 +1,6 @@
diff --git a/src/lib/components/list.svelte b/src/lib/components/list.svelte
index 2b3b007b58..518497ae71 100644
--- a/src/lib/components/list.svelte
+++ b/src/lib/components/list.svelte
@@ -1,3 +1,4 @@
-
+
+{/if}
+
+
diff --git a/src/lib/components/gridItem1.svelte b/src/lib/components/gridItem1.svelte
index e5041f9da5..ac1bb8ea0b 100644
--- a/src/lib/components/gridItem1.svelte
+++ b/src/lib/components/gridItem1.svelte
@@ -7,7 +7,7 @@
+
+
+ -
+
+
-
-
- +-
- -- -
-- - -
+
+