feat: replaced pink 1 with pink2 in documents permission component

src/lib/components/fakeModal.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { onMount } from 'svelte';
     import Form from '$lib/elements/forms/form.svelte';
     import { Click, trackEvent } from '$lib/actions/analytics';
@@ -112,14 +112,14 @@
                 <div class="modal-content">
                     <div class="modal-content-spacer u-flex-vertical u-gap-24 u-width-full-line">
                         {#if error}
-                            <Alert
+                            <Alert.Inline
+                                status="warning"
                                 dismissible
-                                type="warning"
                                 on:dismiss={() => {
                                     error = null;
                                 }}>
                                 {error}
-                            </Alert>
+                            </Alert.Inline>
                         {/if}
                         <slot />
                     </div>

src/lib/layout/containerHeader.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
-    import { Alert, DropList } from '$lib/components';
+    import { DropList } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
     import { Link, Pill } from '$lib/elements';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import {
         checkForProjectLimitation,
         checkForUsageFees,
@@ -22,7 +23,7 @@
     export let title: string;
     export let serviceId = title.toLocaleLowerCase() as PlanServices;
     export let total: number = null;
-    export let alertType: 'info' | 'success' | 'warning' | 'error' | 'default' = 'warning';
+    export let alertType: 'info' | 'success' | 'warning' | 'error' = 'warning';
     export let showAlert = true;
 
     export let buttonText: string = null;
@@ -95,24 +96,24 @@
     {#if services.length}
         <slot name="alert" {limit} {tier} {title} {upgradeMethod} {hasUsageFees} {services}>
             {#if $organization?.billingPlan !== BillingPlan.FREE && hasUsageFees}
-                <Alert type="info" isStandalone>
+                <Alert.Inline status="info">
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan.
                         <Link on:mousedown={() => ($showUsageRatesModal = true)}
                             >Excess usage fees will apply</Link
                         >.
                     </span>
-                </Alert>
+                </Alert.Inline>
             {:else}
-                <Alert type={alertType} isStandalone>
+                <Alert.Inline status={alertType}>
                     <span class="text">
                         You've reached the {services} limit for the {tier} plan. <Link
                             href={$upgradeURL}
                             event="organization_upgrade"
                             eventData={{ from: 'event', source: 'inline_alert' }}>Upgrade</Link> your
                         organization for additional resources.
                     </span>
-                </Alert>
+                </Alert.Inline>
             {/if}
         </slot>
     {/if}

src/routes/(console)/organization-[organization]/settings/deleteOrganizationEstimation.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import type { EstimationDeleteOrganization } from '$lib/sdk/billing';
     import InvoicesTable from './invoicesTable.svelte';
     export let estimation: EstimationDeleteOrganization;
 </script>
 
 {#if estimation}
     {#if estimation.unpaidInvoices?.length > 0}
-        <Alert type="warning">
+        <Alert.Inline status="warning">
             This organization has unresolved invoices that must be settled before it can be deleted.
             Please review and resolve these invoices to proceed.
-        </Alert>
+        </Alert.Inline>
 
         <InvoicesTable invoices={estimation.unpaidInvoices} showActions={false} />
     {/if}

src/routes/(console)/project-[region]-[project]/databases/database-[database]/collection-[collection]/document-[document]/settings/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Alert } from '$lib/components';
+    import { CardGrid, BoxAvatar } from '$lib/components';
     import { Container } from '$lib/layout';
     import { Button } from '$lib/elements/forms';
     import { sdk } from '$lib/stores/sdk';
@@ -14,6 +14,7 @@
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
     import { collection } from '../../store';
     import { page } from '$app/stores';
+    import { Alert } from '@appwrite.io/pink-svelte';
 
     let showDelete = false;
     let permissions = $doc?.$permissions;
@@ -85,27 +86,23 @@
         <svelte:fragment slot="aside">
             {#if $collection.documentSecurity}
                 {#if showPermissionAlert}
-                    <Alert type="info" dismissible on:dismiss={() => (showPermissionAlert = false)}>
-                        <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
-                        <p class="text">
-                            Users will be able to access this document if they have been granted <b
-                                >either document or collection permissions.
-                            </b>
-                        </p>
-                    </Alert>
+                    <Alert.Inline
+                        status="info"
+                        title="Document security is enabled"
+                        dismissible
+                        on:dismiss={() => (showPermissionAlert = false)}>
+                        Users will be able to access this document if they have been granted <b
+                            >either document or collection permissions.</b>
+                    </Alert.Inline>
                 {/if}
                 {#if permissions}
                     <Permissions bind:permissions />
                 {/if}
             {:else}
-                <Alert type="info">
-                    <svelte:fragment slot="title">Document security is disabled</svelte:fragment>
-                    <p class="text">
-                        If you want to assign document permissions. Go to Collection settings and
-                        enable document security. Otherwise, only collection permissions will be
-                        used.
-                    </p>
-                </Alert>
+                <Alert.Inline status="info" title="Document security is disabled">
+                    If you want to assign document permissions. Go to Collection settings and enable
+                    document security. Otherwise, only collection permissions will be used.
+                </Alert.Inline>
             {/if}
         </svelte:fragment>
 

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

@@ -3,7 +3,8 @@
     import { base } from '$app/paths';
     import { page } from '$app/state';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, Confirm, Id } from '$lib/components';
+    import { Confirm, Id } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Dependencies } from '$lib/constants';
     import { Button as ConsoleButton, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
@@ -28,7 +29,8 @@
         Badge,
         FloatingActionBar,
         InteractiveText,
-        Typography
+        Typography,
+        Layout
     } from '@appwrite.io/pink-svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import DualTimeView from '$lib/components/dualTimeView.svelte';
@@ -342,15 +344,15 @@
                     </Table.Row.Base>
                 {/each}
             </Table.Root>
-            <div class="u-flex u-flex-vertical u-gap-16">
-                <Alert>To change the selection edit the relationship settings.</Alert>
-
+            <Layout.Stack gap="l" direction="column">
+                <Alert.Inline status="info"
+                    >To change the selection edit the relationship settings.</Alert.Inline>
                 <ul>
                     <InputChoice id="delete" label="Delete" showLabel={false} bind:value={checked}>
                         Delete document from <span data-private>{$collection.name}</span>
                     </InputChoice>
                 </ul>
-            </div>
+            </Layout.Stack>
         {:else}
             <p class="u-bold">This action is irreversible.</p>
         {/if}

src/routes/(console)/project-[region]-[project]/functions/function-[function]/settings/+page.svelte

@@ -13,7 +13,7 @@
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
-    import { Alert } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import { Click, trackEvent } from '$lib/actions/analytics';
     import UpdateRepository from './updateRepository.svelte';
@@ -22,6 +22,7 @@
     import { isCloud } from '$lib/system';
     import UpdateVariables from '$routes/(console)/project-[region]-[project]/updateVariables.svelte';
     import { page } from '$app/state';
+    import { Link } from '$lib/elements';
 
     export let data;
     let showAlert = true;
@@ -55,35 +56,33 @@
 
 <Container>
     {#if data.function.version === 'v2' && showAlert}
-        <Alert
-            type="warning"
-            dismissible
-            class="u-margin-block-start-24"
-            on:dismiss={() => (showAlert = false)}>
-            <svelte:fragment slot="title">Your function is outdated</svelte:fragment>
-            Update your function version to make use of new features including build commands and HTTP
-            data in your executions. To update, follow the steps outlined in our
-            <a
-                href="https://appwrite.io/docs/products/functions/development"
-                target="_blank"
-                rel="noopener noreferrer"
-                class="link">documentation</a
-            >.
-            <svelte:fragment slot="buttons">
-                <Button
-                    on:click={() =>
-                        trackEvent(Click.WebsiteOpenClick, {
-                            from: 'button',
-                            source: 'function_keys_card',
-                            destination: 'docs'
-                        })}
-                    href="https://appwrite.io/docs/products/functions/development"
-                    external
-                    text>
-                    Learn more
-                </Button>
-            </svelte:fragment>
-        </Alert>
+        <div>
+            <Alert.Inline
+                status="warning"
+                dismissible
+                title="Your function is outdated"
+                on:dismiss={() => (showAlert = false)}>
+                Update your function version to make use of new features including build commands
+                and HTTP data in your executions. To update, follow the steps outlined in our
+                <Link href="https://appwrite.io/docs/products/functions/development" external
+                    >documentation</Link
+                >.
+                <svelte:fragment slot="actions">
+                    <Button
+                        on:click={() =>
+                            trackEvent(Click.WebsiteOpenClick, {
+                                from: 'button',
+                                source: 'function_keys_card',
+                                destination: 'docs'
+                            })}
+                        href="https://appwrite.io/docs/products/functions/development"
+                        external
+                        text>
+                        Learn more
+                    </Button>
+                </svelte:fragment>
+            </Alert.Inline>
+        </div>
     {/if}
     <ExecuteFunction />
     <UpdateName />

src/routes/(console)/project-[region]-[project]/sites/create-site/importSiteVariablesModal.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Modal } from '$lib/components';
-    import Alert from '$lib/components/alert.svelte';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { Button } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import { IconInfo } from '@appwrite.io/pink-icons-svelte';
@@ -75,9 +75,9 @@
                 </Layout.Stack>
             </Upload.Dropzone>
             {#if variables?.length > 0}
-                <Alert type="info" dismissible>
+                <Alert.Inline status="info" dismissible>
                     This action can create and update variables but can not delete them.
-                </Alert>
+                </Alert.Inline>
             {/if}
         </Layout.Stack>
         <Selector.Checkbox

src/routes/(console)/project-[region]-[project]/storage/bucket-[bucket]/settings/updateMaxFileSize.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import { Click, Submit, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid } from '$lib/components';
+    import { CardGrid } from '$lib/components';
+    import { Alert } from '@appwrite.io/pink-svelte';
     import { BillingPlan } from '$lib/constants';
     import { Button, Form, InputNumber, InputSelect } from '$lib/elements/forms';
     import { humanFileSize, sizeToBytes } from '$lib/helpers/sizeConvertion';
@@ -45,16 +46,14 @@
         <svelte:fragment slot="aside">
             {#if isCloud}
                 {@const size = humanFileSize(sizeToBytes(service, 'MB', 1000))}
-                <Alert type="info">
-                    <p class="text">
-                        The {currentPlan.name} plan has a maximum upload file size limit of {Math.floor(
-                            parseInt(size.value)
-                        )}{size.unit}.
-                        {#if $organization?.billingPlan === BillingPlan.FREE}
-                            Upgrade to allow files of a larger size.
-                        {/if}
-                    </p>
-                    <svelte:fragment slot="action">
+                <Alert.Inline status="info">
+                    The {currentPlan.name} plan has a maximum upload file size limit of {Math.floor(
+                        parseInt(size.value)
+                    )}{size.unit}.
+                    {#if $organization?.billingPlan === BillingPlan.FREE}
+                        Upgrade to allow files of a larger size.
+                    {/if}
+                    <svelte:fragment slot="actions">
                         {#if $organization?.billingPlan === BillingPlan.FREE}
                             <div class="alert-buttons u-flex">
                                 <Button
@@ -68,7 +67,7 @@
                             </div>
                         {/if}
                     </svelte:fragment>
-                </Alert>
+                </Alert.Inline>
             {/if}
             <InputNumber
                 required