bump icons, label cards

src/lib/components/billing/planSelection.svelte

@@ -27,7 +27,7 @@
                 value={BillingPlan.FREE}
                 tooltipShow={anyOrgFree}
                 tooltipText="You are limited to 1 Free organization per account."
-                padding={1.5}>
+                padding="medium">
                 <svelte:fragment slot="custom" let:disabled>
                     <div
                         class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
@@ -55,7 +55,7 @@
                 disabled={!selfService}
                 bind:group={billingPlan}
                 value={BillingPlan.PRO}
-                padding={1.5}>
+                padding="medium">
                 <svelte:fragment slot="custom" let:disabled>
                     <div
                         class="u-flex u-flex-vertical u-gap-4 u-width-full-line"
@@ -82,7 +82,7 @@
                     name="plan"
                     bind:group={billingPlan}
                     value={BillingPlan.SCALE}
-                    padding={1.5}>
+                    padding="medium">
                     <svelte:fragment slot="custom">
                         <div class="u-flex u-flex-vertical u-gap-4 u-width-full-line">
                             <h4 class="body-text-2 u-bold">

src/lib/components/labelCard.svelte

@@ -1,13 +1,15 @@
 <script lang="ts">
     import { tooltip } from '$lib/actions/tooltip';
-    import { app } from '$lib/stores/app';
-    import { base } from '$app/paths';
+    import { Card } from '@appwrite.io/pink-svelte';
+    import { type ComponentProps } from 'svelte';
+    import type Selector from '@appwrite.io/pink-svelte/dist/card/Selector.svelte';
+
+    type Props = ComponentProps<Selector>;
 
     export let name: string;
     export let group: string;
     export let value: string | number | boolean;
     export let disabled = false;
-    export let padding = 1;
     export let icon: string = null;
     export let imageIcon: string = null;
     export let fullHeight = true;
@@ -17,20 +19,31 @@
     export let tooltipText: string = null;
     export let tooltipShow = false;
 
-    enum Radius {
-        xsmall = '--border-radius-xsmall',
-        small = '--border-radius-small',
-        medium = '--border-radius-medium',
-        large = '--border-radius-large'
-    }
+    // Pink v2
+    export let radius: Props['radius'] = 'medium';
+    export let padding: Props['padding'] = 'small';
+    //temporarily unefined
+    export let title: Props['title'] = undefined;
+
+    // TODO: remove after label card migration
+    let slotTitle: HTMLSpanElement;
 </script>
 
-<label
+<div use:tooltip={{ content: tooltipText, disabled: !tooltipText || !tooltipShow }}>
+    <Card.Selector {value} {disabled} title={title ?? slotTitle?.innerText} bind:group>
+        <p>
+            <slot />
+        </p>
+    </Card.Selector>
+</div>
+<span style="display: none" bind:this={slotTitle}>
+    <slot name="title" />
+</span>
+<!-- <label
     class="card u-cursor-pointer"
     class:is-allow-focus={!disabled}
     class:is-disabled={disabled}
     class:u-height-100-percent={fullHeight}
-    style:--card-padding={`${padding}rem`}
     style:--card-border-radius={`var(${Radius[borderRadius]})`}
     style:--p-card-bg-color-default={backgroundColor}
     style:--p-card-bg-color-hover={backgroundColorHover}
@@ -70,4 +83,4 @@
             {/if}
         {/if}
     </div>
-</label>
+</label> -->

src/routes/(console)/project-[project]/databases/database-[database]/backups/table.svelte

@@ -322,7 +322,7 @@
             {#each restoreOptions as restoreOption}
                 <div class="u-width-full-line">
                     <LabelCard
-                        padding={1}
+                        padding="small"
                         name="restore"
                         value={restoreOption.id}
                         bind:group={selectedRestoreOption}>

src/routes/(console)/project-[project]/sites/create-site/configuration/connectBehaviour.svelte

@@ -11,8 +11,8 @@
         name="connect-behaviour"
         value="now"
         bind:group={connectBehaviour}
-        disabled={!isVcsEnabled}>
-        <svelte:fragment slot="title">Connect to Git repository</svelte:fragment>
+        disabled={!isVcsEnabled}
+        title="Connect to Git repository">
         Clone the template to a new repository or connect it to an existing one.
     </LabelCard>
     <LabelCard