Merge branch 'feat-pink-v2' into fix-feedback-changes

# Conflicts:
#	package.json
#	pnpm-lock.yaml

src/lib/components/filePicker.svelte

@@ -20,11 +20,11 @@
     import FormList from '$lib/elements/forms/formList.svelte';
     import { writable } from 'svelte/store';
     import { onMount } from 'svelte';
-    import Heading from './heading.svelte';
     import { clickOnEnter } from '$lib/helpers/a11y';
     import Empty from './empty.svelte';
     import { base } from '$app/paths';
     import { page } from '$app/stores';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let show: boolean;
     export let mimeTypeQuery: string = 'image/';
@@ -479,12 +479,9 @@
                                                     --color-border="var(--color-neutral-15)">
                                                     <div class="common-section">
                                                         <div class="u-text-center common-section">
-                                                            <Heading
-                                                                size="7"
-                                                                tag="h2"
-                                                                trimmed={false}>
+                                                            <Typography.Title size="s">
                                                                 No files found within this bucket.
-                                                            </Heading>
+                                                            </Typography.Title>
                                                             <p class="text u-line-height-1-5">
                                                                 Need a hand? Learn more in our <a
                                                                     class="link"
@@ -510,9 +507,7 @@
                                 --shadow-small="none"
                                 --color-border="var(--color-neutral-15)">
                                 <div class="u-text-center u-flex-vertical u-cross-center u-gap-24">
-                                    <Heading size="7" tag="h2" trimmed={false}>
-                                        No buckets found
-                                    </Heading>
+                                    <Typography.Title size="s">No buckets found</Typography.Title>
                                     <Button
                                         secondary
                                         external

src/lib/components/heading.svelte

@@ -1,23 +0,0 @@
-<script lang="ts">
-    type NumSize = 1 | 2 | 3 | 4 | 5 | 6 | 7;
-    type Size = NumSize | `${NumSize}`;
-
-    export let tag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    export let size: Size;
-    export let trimmed = true;
-    export let trimmedSecondLine = false;
-    export let id: string = null;
-    let classes = '';
-    export { classes as class };
-    export let style = '';
-</script>
-
-<svelte:element
-    this={tag}
-    class={`heading-level-${size} u-min-width-0 ${classes}`}
-    class:u-trim-1={trimmed}
-    class:u-trim-2={trimmedSecondLine}
-    {style}
-    {id}>
-    <slot />
-</svelte:element>

src/lib/components/index.ts

@@ -46,7 +46,6 @@ export { default as Tabs } from './tabs.svelte';
 export { default as Tab } from './tab.svelte';
 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';

src/lib/components/searchQuery.svelte

@@ -63,7 +63,6 @@
         {placeholder}
         {disabled}
         {required}
-        type="search"
         bind:value={search}
         --color-bgcolor-neutral-default="var(--color-bgcolor-neutral-primary)">
         <svelte:fragment slot="start">

src/lib/elements/forms/inputSearch.svelte

@@ -48,7 +48,6 @@
     {required}
     {autofocus}
     {label}
-    type="search"
     bind:value
     on:input={valueChange}>
     <svelte:fragment slot="start">

src/lib/layout/containerHeader.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, DropList, Heading } from '$lib/components';
+    import { Alert, DropList } from '$lib/components';
     import { BillingPlan } from '$lib/constants';
     import { Link, Pill } from '$lib/elements';
     import {
@@ -17,11 +17,9 @@
     import { createEventDispatcher, onMount } from 'svelte';
     import { ContainerButton } from '.';
     import { goto } from '$app/navigation';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let title: string;
-    export let titleTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' = 'h2';
-    export let titleSize: '1' | '2' | '3' | '4' | '5' | '6' | '7' = '5';
     export let serviceId = title.toLocaleLowerCase() as PlanServices;
     export let total: number = null;
     export let alertType: 'info' | 'success' | 'warning' | 'error' | 'default' = 'warning';
@@ -117,7 +115,7 @@
 
 <Layout.Stack direction="row" alignContent="center">
     <Layout.Stack direction="row">
-        <Heading tag={titleTag} size={titleSize}>{title}</Heading>
+        <Typography.Title size="m">{title}</Typography.Title>
         {#if isCloud && isLimited}
             <DropList bind:show={showDropdown} width="16">
                 {#if hasProjectLimitation}

src/lib/layout/gridHeader.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import { Heading, ViewSelector } from '$lib/components';
+    import { ViewSelector } from '$lib/components';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import type { View } from '$lib/helpers/load';
     import type { Column } from '$lib/helpers/types';
     import type { Writable } from 'svelte/store';
@@ -14,7 +15,7 @@
 </script>
 
 <header class="grid-header">
-    <Heading tag="h2" size="5">{title}</Heading>
+    <Typography.Title size="m">{title}</Typography.Title>
     <div class="u-flex u-gap-16 u-contents-mobile">
         <ViewSelector
             {view}

src/lib/layout/logs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { hoursToDays, timeFromNow, toLocaleDateTime } from '$lib/helpers/date';
     import { log } from '$lib/stores/logs';
-    import { Alert, Card, Code, Copy, Heading, Id, SvgIcon, Tab, Tabs } from '../components';
+    import { Alert, Card, Code, Copy, Id, SvgIcon, Tab, Tabs } from '../components';
     import { calculateTime } from '$lib/helpers/timeConversion';
     import {
         TableBody,
@@ -18,7 +18,7 @@
     import { organization } from '$lib/stores/organization';
     import { Button } from '$lib/elements/forms';
     import { BillingPlan } from '$lib/constants';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
 
     let selectedRequest = 'parameters';
     let selectedResponse = 'logs';
@@ -201,7 +201,7 @@
                     <div class="code-panel-content grid-1-2">
                         <div
                             class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16 mobile-only-inline-20-padding">
-                            <Heading tag="h3" size="6">Request</Heading>
+                            <Typography.Title size="s">Request</Typography.Title>
                             <div class="u-sep-block-end">
                                 <Tabs>
                                     <Tab
@@ -314,7 +314,7 @@
                         <div class="u-sep-block-end is-only-mobile u-padding-block-start-16" />
                         <div
                             class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-16 u-min-width-0 mobile-only-inline-20-padding mobile-only-block-start-20-padding">
-                            <Heading tag="h3" size="6">Response</Heading>
+                            <Typography.Title size="s">Request</Typography.Title>
                             <div class="u-sep-block-end">
                                 <Tabs>
                                     <Tab

src/lib/layout/unauthenticated.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Avatar, AvatarInitials, Card, Heading } from '$lib/components';
+    import { Avatar, AvatarInitials, Card } from '$lib/components';
     import AppwriteLogoDark from '$lib/images/appwrite-logo-dark.svg';
     import AppwriteLogoLight from '$lib/images/appwrite-logo-light.svg';
     import LoginDark from '$lib/images/login/login-dark-mode.png';
@@ -93,26 +93,7 @@
                     alt="promo" />
 
                 <div class="u-text-center auth-container">
-                    <div class="is-only-mobile u-width-full-line">
-                        <Heading
-                            size="5"
-                            tag="h3"
-                            class="u-margin-block-start-16"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
-                    <div class="is-not-mobile u-width-full-line">
-                        <Heading
-                            size="4"
-                            tag="h3"
-                            class="u-margin-block-start-32"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
+                    <Typography.Title size="m">{generateTitle()}</Typography.Title>
                     <p class="u-margin-block-start-16">
                         {generateDesc()}
                     </p>
@@ -122,26 +103,7 @@
             <section
                 class="u-flex u-flex-vertical u-main-center u-cross-center u-height-100-percent u-width-full-line review-container">
                 <div class="u-text-center">
-                    <div class="is-only-mobile u-width-full-line">
-                        <Heading
-                            size="5"
-                            tag="h3"
-                            class="u-margin-block-start-48"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
-                    <div class="is-not-mobile u-width-full-line">
-                        <Heading
-                            size="3"
-                            tag="h3"
-                            class="u-margin-block-start-32"
-                            trimmed={false}
-                            style="font-weight:normal">
-                            {generateTitle()}
-                        </Heading>
-                    </div>
+                    <Typography.Title size="m">{generateTitle()}</Typography.Title>
                 </div>
 
                 <p class="body-text-1 u-margin-block-start-16 u-text-center">{generateDesc()}</p>

src/lib/layout/usageMultiple.svelte

@@ -2,7 +2,7 @@
     import { Container } from '$lib/layout';
     import { BarChart, Legend, type LegendData } from '$lib/charts';
     import { accumulateFromEndingTotal } from '$lib/layout/usage.svelte';
-    import { Card, Heading, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
+    import { Card, SecondaryTabs, SecondaryTabsItem } from '$lib/components';
     import { page } from '$app/stores';
     import { type Models } from '@appwrite.io/console';
     import { formatNumberWithCommas } from '$lib/helpers/numbers';
@@ -20,7 +20,7 @@
 <Container overlapCover={overlapContainerCover}>
     {#if showHeader}
         <div class="u-flex u-main-space-between common-section">
-            <Heading tag="h2" size="5">{title}</Heading>
+            <Typography.Title>{title}</Typography.Title>
 
             {#if path}
                 <SecondaryTabs>

src/lib/layout/wizardSecondaryContainer.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
-    import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import WizardExitModal from './wizardExitModal.svelte';
     import { goto } from '$app/navigation';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     type $$Props =
         | {
@@ -42,7 +42,8 @@
     <div class="wizard-secondary-container">
         <header class="wizard-secondary-header">
             <div class="u-flex u-main-space-between u-gap-32 u-cross-center">
-                <Heading size={5} tag="h1"><slot name="title" /></Heading>
+                <Typography.Title><slot name="title" /></Typography.Title>
+
                 <Button
                     text
                     icon

src/lib/layout/wizardStep.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
     import { wizard } from '$lib/stores/wizard';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
     import { onDestroy } from 'svelte';
 
     /**
@@ -23,9 +22,7 @@
 
 <Layout.Stack>
     <header class="form-header" class:hide-divider={!$$slots.subtitle}>
-        <Heading tag="h1" size="6">
-            <slot name="title" />
-        </Heading>
+        <Typography.Title><slot name="title" /></Typography.Title>
         {#if $$slots.subtitle}
             <p>
                 <slot name="subtitle" />

src/lib/wizards/functions/cover.svelte

@@ -28,7 +28,7 @@
 
 <script lang="ts">
     import { base } from '$app/paths';
-    import { AvatarGroup, Box, Heading } from '$lib/components';
+    import { AvatarGroup, Box } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
     import { repository, templateConfig, template as templateStore } from './store';
@@ -44,7 +44,7 @@
     import { isSelfHosted } from '$lib/system';
     import { consoleVariables } from '$routes/(console)/store';
     import { featuredTemplatesList, starterTemplate } from '$lib/stores/templates';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconDeno, IconDotnet } from '@appwrite.io/pink-icons-svelte';
 
     const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
@@ -66,7 +66,7 @@
         <div class="git-container u-position-relative">
             <div class="grid-1-1 u-gap-24">
                 <div class="card u-cross-child-start u-height-100-percent">
-                    <Heading size="6" tag="h6">Connect Git repository</Heading>
+                    <Typography.Title>Connect Git repository</Typography.Title>
                     <p class="u-margin-block-start-8">
                         Create and deploy a function with a connected git repository.
                     </p>
@@ -87,9 +87,9 @@
                             style="border-radius: var(--border-radius-medium)">
                             <div
                                 class="u-flex-vertical u-height-100-percent u-main-center u-cross-center u-gap-16 u-padding-inline-24">
-                                <Heading size="7" tag="h6" trimmed={false}>
+                                <Typography.Title size="s">
                                     Connect your self-hosted instance to Git
-                                </Heading>
+                                </Typography.Title>
                                 <p>
                                     Configure your self-hosted instance to connect your function to
                                     a Git repository.
@@ -107,7 +107,7 @@
 
                 <div class="card u-height-100-percent">
                     <section class="common-section">
-                        <Heading size="6" tag="h6">Quick start</Heading>
+                        <Typography.Title size="s">Quick start</Typography.Title>
                         <p class="u-margin-block-start-8">Use a starter template.</p>
                         <ul
                             class="grid-box u-margin-block-start-16"
@@ -197,7 +197,7 @@
                     </Button>
                     <div class="u-sep-block-start common-section" />
                     <section class="common-section">
-                        <Heading size="6" tag="h6">Templates</Heading>
+                        <Typography.Title size="s">Templates</Typography.Title>
                         <p class="text u-margin-block-start-8">
                             Find the right template for your use case.
                         </p>

src/routes/(console)/+error.svelte

@@ -1,15 +1,17 @@
 <script>
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Container>
-    <div class="u-flex-vertical u-gap-16">
-        <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
-        <Heading size="4" tag="h4" trimmed={false}>{$page.error.message}</Heading>
+    <div>
+        <Typography.Title size="xl">{$page.error.status || 'Invalid Argument'}</Typography.Title>
+        <Typography.Title>{$page.error.message}</Typography.Title>
+    </div>
+    <div>
         <Button href={base}>Back to the console</Button>
     </div>
 </Container>

src/routes/(console)/account/organizations/+page.svelte

@@ -5,7 +5,6 @@
         Empty,
         AvatarGroup,
         CardContainer,
-        Heading,
         PaginationWithLimit
     } from '$lib/components';
     import { Button } from '$lib/elements/forms';
@@ -21,7 +20,7 @@
     import { toLocaleDate } from '$lib/helpers/date';
     import { BillingPlan } from '$lib/constants';
     import { goto } from '$app/navigation';
-    import { Icon, Tooltip } from '@appwrite.io/pink-svelte';
+    import { Icon, Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let data: PageData;
@@ -47,7 +46,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Organizations</Heading>
+        <Typography.Title>Organizations</Typography.Title>
 
         <Button on:click={createOrg} event="create_organization">
             <Icon icon={IconPlus} slot="start" size="s" />

src/routes/(console)/account/payments/+page.svelte

@@ -1,11 +1,11 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
     import { Container } from '$lib/layout';
     import PaymentMethods from './paymentMethods.svelte';
     import BillingAddress from './billingAddress.svelte';
     import { onMount } from 'svelte';
     import { page } from '$app/stores';
     import { confirmPayment } from '$lib/stores/stripe';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     let showPayment = false;
 
@@ -20,7 +20,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Payment details</Heading>
+        <Typography.Title size="s">Payment details</Typography.Title>
     </div>
     <PaymentMethods bind:showPayment />
     <BillingAddress />

src/routes/(console)/account/updateMfa.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, EyebrowHeading, Heading } from '$lib/components';
+    import { CardGrid, EyebrowHeading } from '$lib/components';
     import { Dependencies } from '$lib/constants';
-    import { Button, FormList, InputChoice } from '$lib/elements/forms';
+    import { Button, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';
     import { user } from '$lib/stores/user';

src/routes/(console)/account/updateName.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/account/updatePassword.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, FormList, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';

src/routes/(console)/create-organization/+page.svelte

@@ -190,18 +190,16 @@
             </p>
             <PlanSelection bind:billingPlan {anyOrgFree} isNewOrg />
             {#if billingPlan !== BillingPlan.FREE}
-                <FormList class="u-margin-block-start-24">
-                    <InputTags
-                        bind:tags={collaborators}
-                        label="Invite members by email"
-                        popover={Default}
-                        placeholder="Enter email address(es)"
-                        validityRegex={emailRegex}
-                        validityMessage="Invalid email address"
-                        id="members" />
-                    <SelectPaymentMethod bind:methods bind:value={paymentMethodId} bind:taxId
-                    ></SelectPaymentMethod>
-                </FormList>
+                <InputTags
+                    bind:tags={collaborators}
+                    label="Invite members by email"
+                    popover={Default}
+                    placeholder="Enter email address(es)"
+                    validityRegex={emailRegex}
+                    validityMessage="Invalid email address"
+                    id="members" />
+                <SelectPaymentMethod bind:methods bind:value={paymentMethodId} bind:taxId
+                ></SelectPaymentMethod>
                 {#if !couponData?.code}
                     <Button text on:click={() => (showCreditModal = true)}>
                         <Icon icon={IconPlus} slot="start" size="s" />

src/routes/(console)/organization-[organization]/+page.svelte

@@ -15,7 +15,6 @@
         DropListItem,
         Empty,
         GridItem1,
-        Heading,
         PaginationWithLimit
     } from '$lib/components';
     import { goto } from '$app/navigation';
@@ -31,7 +30,7 @@
     import { onMount, type ComponentType } from 'svelte';
     import { canWriteProjects } from '$lib/stores/roles';
     import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect';
-    import { Badge, Icon } from '@appwrite.io/pink-svelte';
+    import { Badge, Icon, Typography } from '@appwrite.io/pink-svelte';
     import {
         IconAndroid,
         IconApple,
@@ -146,7 +145,7 @@
 
 <Container>
     <div class="u-flex u-gap-12 common-section u-main-space-between">
-        <Heading tag="h2" size="5">Projects</Heading>
+        <Typography.Title>Projects</Typography.Title>
 
         <DropList bind:show={showDropdown} placement="bottom-end">
             {#if $canWriteProjects}

src/routes/(console)/organization-[organization]/billing/+page.svelte

@@ -9,7 +9,7 @@
     import AvailableCredit from './availableCredit.svelte';
     import PaymentHistory from './paymentHistory.svelte';
     import TaxId from './taxId.svelte';
-    import { Alert, Heading } from '$lib/components';
+    import { Alert } from '$lib/components';
     import { failedInvoice, paymentMethods, tierToPlan, upgradeURL } from '$lib/stores/billing';
     import type { PaymentMethodData } from '$lib/sdk/billing';
     import { onMount } from 'svelte';
@@ -21,6 +21,7 @@
     import { selectedInvoice, showRetryModal } from './store';
     import { Button } from '$lib/elements/forms';
     import { goto } from '$app/navigation';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -117,7 +118,7 @@
         </Alert>
     {/if}
     <div class="common-section">
-        <Heading tag="h2" size="5">Billing</Heading>
+        <Typography.Title>Billing</Typography.Title>
     </div>
     <PlanSummary
         creditList={data?.creditList}

src/routes/(console)/organization-[organization]/billing/availableCredit.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Alert, CardGrid, Empty, Heading, PaginationInline } from '$lib/components';
+    import { Alert, CardGrid, Empty, PaginationInline } from '$lib/components';
     import {
         TableBody,
         TableCellHead,

src/routes/(console)/organization-[organization]/billing/billingAddress.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, DropList, Heading } from '$lib/components';
+    import { CardGrid, DropList } from '$lib/components';
     import DropListItem from '$lib/components/dropListItem.svelte';
     import { Dependencies } from '$lib/constants';
     import { Button } from '$lib/elements/forms';

src/routes/(console)/organization-[organization]/billing/budgetAlert.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Alert, CardGrid } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { tierToPlan, upgradeURL } from '$lib/stores/billing';
     import { Button, Form, FormList, InputSelectSearch } from '$lib/elements/forms';

src/routes/(console)/organization-[organization]/billing/budgetCap.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Alert, CardGrid, Heading } from '$lib/components';
+    import { Alert, CardGrid } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputNumber, InputSwitch } from '$lib/elements/forms';
     import { showUsageRatesModal, upgradeURL } from '$lib/stores/billing';

src/routes/(console)/organization-[organization]/billing/paymentHistory.svelte

@@ -6,7 +6,6 @@
         DropListItem,
         DropListLink,
         EmptySearch,
-        Heading,
         PaginationInline
     } from '$lib/components';
     import { Pill } from '$lib/elements';

src/routes/(console)/organization-[organization]/billing/paymentMethods.svelte

@@ -7,8 +7,7 @@
         CreditCardBrandImage,
         CreditCardInfo,
         DropList,
-        DropListItem,
-        Heading
+        DropListItem
     } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/organization-[organization]/billing/planSummary.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { Card, CardGrid, Collapsible, CollapsibleItem, Heading } from '$lib/components';
+    import { Card, CardGrid, Collapsible, CollapsibleItem } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDate } from '$lib/helpers/date';
     import { plansInfo, tierToPlan, upgradeURL } from '$lib/stores/billing';

src/routes/(console)/organization-[organization]/billing/taxId.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/organization-[organization]/domains/domain-[domain]/settings/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import { Heading } from '$lib/components';
     import { Container } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import ChangeOrganization from './changeOrganization.svelte';
     import DeleteDomain from './deleteDomain.svelte';
 
@@ -8,7 +8,7 @@
 </script>
 
 <Container>
-    <Heading tag="h2" size="5">Settings</Heading>
+    <Typography.Title>Settings</Typography.Title>
     <ChangeOrganization domain={data.domain} organizations={data.organizations} />
     <DeleteDomain domain={data.domain} />
 </Container>

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, AvatarGroup, Heading } from '$lib/components';
+    import { CardGrid, BoxAvatar, AvatarGroup } from '$lib/components';
     import { InputText, Form, Button } from '$lib/elements/forms';
     import { Container } from '$lib/layout';
     import { addNotification } from '$lib/stores/notifications';

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Box, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import BaaModal from './BAAModal.svelte';
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Box, CardGrid, Heading } from '$lib/components';
+    import { Box, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { base } from '$app/paths';
     import { sdk } from '$lib/stores/sdk';

src/routes/(console)/organization-[organization]/usage/[[invoice]]/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { Card, CardGrid, Heading, ProgressBarBig } from '$lib/components';
+    import { Card, CardGrid, ProgressBarBig } from '$lib/components';
     import {
         getServiceLimit,
         showUsageRatesModal,
@@ -20,6 +20,7 @@
     import TotalMembers from './totalMembers.svelte';
     import { tooltip } from '$lib/actions/tooltip';
     import { formatCurrency, formatNumberWithCommas } from '$lib/helpers/numbers';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -38,7 +39,7 @@
 
 <Container>
     <div class="u-flex u-cross-center u-main-space-between">
-        <Heading tag="h2" size="5">Usage</Heading>
+        <Typography.Title>Usage</Typography.Title>
 
         {#if $organization?.billingPlan === BillingPlan.FREE}
             <Button

src/routes/(console)/organization-[organization]/usage/[[invoice]]/totalMembers.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { AvatarInitials, CardGrid, Heading, Paginator } from '$lib/components';
+    import { AvatarInitials, CardGrid, Paginator } from '$lib/components';
     import { EmptyCardCloud } from '$lib/components/billing';
     import { BillingPlan } from '$lib/constants';
     import { Button } from '$lib/elements/forms';

src/routes/(console)/project-[project]/+error.svelte

@@ -1,10 +1,10 @@
 <script>
     import { page } from '$app/stores';
-    import { Heading } from '$lib/components';
     import { Container } from '$lib/layout';
+    import { Typography } from '@appwrite.io/pink-svelte';
 </script>
 
 <Container>
-    <Heading size="1" tag="h3">{$page.error.status || 'Invalid Argument'}</Heading>
+    <Typography.Title size="xl">{$page.error.status || 'Invalid Argument'}</Typography.Title>
     <p class="body-text-2 u-bold u-margin-block-start-4">{$page.error.message}</p>
 </Container>

src/routes/(console)/project-[project]/auth/security/updateMembershipPrivacy.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputChoice } from '$lib/elements/forms';
     import { FormList } from '$lib/elements/forms';

src/routes/(console)/project-[project]/auth/security/updatePasswordDictionary.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/security/updatePasswordHistory.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputNumber, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/security/updatePersonalDataCheck.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/security/updateSessionAlerts.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/security/updateSessionLength.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, InputNumber, InputSelect } from '$lib/elements/forms';
     import { createTimeUnitPair } from '$lib/helpers/unit';

src/routes/(console)/project-[project]/auth/security/updateSessionsLimit.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputNumber } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/security/updateUsersLimit.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';

src/routes/(console)/project-[project]/auth/settings/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { InputSwitch } from '$lib/elements/forms';
     import { Container } from '$lib/layout';

src/routes/(console)/project-[project]/auth/teams/team-[team]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading, AvatarInitials } from '$lib/components';
+    import { CardGrid, AvatarInitials } from '$lib/components';
     import { Container } from '$lib/layout';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { team } from './store';

src/routes/(console)/project-[project]/auth/teams/team-[team]/updateName.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/templates/emailSignature.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, EmptyCardImageCloud, Heading } from '$lib/components';
+    import { CardGrid, EmptyCardImageCloud } from '$lib/components';
     import Button from '$lib/elements/forms/button.svelte';
     import { app } from '$lib/stores/app';
     import { upgradeURL } from '$lib/stores/billing';

src/routes/(console)/project-[project]/auth/user-[user]/dangerZone.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading, AvatarInitials } from '$lib/components';
+    import { CardGrid, BoxAvatar, AvatarInitials } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { writable } from 'svelte/store';
     import DeleteUser from './deleteUser.svelte';

src/routes/(console)/project-[project]/auth/user-[user]/targets/+page.svelte

@@ -2,7 +2,6 @@
     import { Button } from '$lib/elements/forms';
     import {
         PaginationWithLimit,
-        Heading,
         ViewSelector,
         EmptyFilter,
         EmptySearch,

src/routes/(console)/project-[project]/auth/user-[user]/updateEmail.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputEmail } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/user-[user]/updateName.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/user-[user]/updatePassword.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, InputPassword } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdk } from '$lib/stores/sdk';

src/routes/(console)/project-[project]/auth/user-[user]/updatePhone.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputPhone } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/user-[user]/updatePrefs.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/auth/user-[user]/updateStatus.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { AvatarInitials, CardGrid, DropList, DropListItem, Heading } from '$lib/components';
+    import { AvatarInitials, CardGrid, DropList, DropListItem } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/+layout.svelte

@@ -29,10 +29,9 @@
     import { project } from '$routes/(console)/project-[project]/store';
     import { page } from '$app/stores';
     import CreateIndex from './indexes/createIndex.svelte';
-    import { wizard } from '$lib/stores/wizard';
-    import CreateDocument from './createDocument.svelte';
     import { base } from '$app/paths';
     import { canWriteCollections } from '$lib/stores/roles';
+    import { IconLockClosed, IconPlus, IconPuzzle } from '@appwrite.io/pink-icons-svelte';
 
     let unsubscribe: { (): void };
 
@@ -58,9 +57,11 @@
             label: 'Create document',
             keys: $page.url.pathname.endsWith($collection.$id) ? ['c'] : ['c', 'd'],
             callback() {
-                wizard.start(CreateDocument);
+                goto(
+                    `${base}/project-${$project?.$id}/databases/database-${$database?.$id}/collection-${$collection?.$id}/create`
+                );
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'documents'
         },
         {
@@ -69,7 +70,7 @@
             callback() {
                 addSubPanel(CreateAttributePanel);
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'attributes',
             disabled: !$canWriteCollections
         },
@@ -165,7 +166,7 @@
                 $page.url.pathname.endsWith('permissions') ||
                 $page.url.pathname.endsWith('settings') ||
                 !$canWriteCollections,
-            icon: 'puzzle'
+            icon: IconPuzzle
         },
         {
             label: 'Document security',
@@ -179,7 +180,7 @@
                 $page.url.pathname.endsWith('document-security') ||
                 $page.url.pathname.endsWith('settings') ||
                 !$canWriteCollections,
-            icon: 'lock-closed'
+            icon: IconLockClosed
         },
         {
             label: 'Create index',
@@ -187,7 +188,7 @@
             callback() {
                 initCreateIndex();
             },
-            icon: 'plus',
+            icon: IconPlus,
             group: 'indexes',
             disabled: !$canWriteCollections
         }

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { page } from '$app/stores';
-    import { Empty, EmptySearch, Heading, PaginationWithLimit } from '$lib/components';
+    import { Empty, EmptySearch, PaginationWithLimit } from '$lib/components';
     import { Filters, hasPageQueries, queries } from '$lib/components/filters';
     import ViewSelector from '$lib/components/viewSelector.svelte';
     import { Button } from '$lib/elements/forms';
@@ -8,16 +8,15 @@
     import { Container } from '$lib/layout';
     import { preferences } from '$lib/stores/preferences';
     import { canWriteCollections, canWriteDocuments } from '$lib/stores/roles';
-    import { wizard } from '$lib/stores/wizard';
     import { Card, Icon, Layout, Empty as PinkEmpty } from '@appwrite.io/pink-svelte';
     import type { PageData } from './$types';
     import CreateAttributeDropdown from './attributes/createAttributeDropdown.svelte';
     import type { Option } from './attributes/store';
     import CreateAttribute from './createAttribute.svelte';
-    import Create from './createDocument.svelte';
     import { collection, columns } from './store';
     import Table from './table.svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import { base } from '$app/paths';
 
     export let data: PageData;
 
@@ -36,14 +35,7 @@
             elements: 'elements' in attribute ? attribute.elements : null
         }))
     );
-
-    function openWizard() {
-        if (!$canWriteDocuments) return;
-        wizard.start(Create);
-    }
-
     $: hasAttributes = !!$collection.attributes.length;
-
     $: hasValidAttributes = $collection?.attributes?.some((attr) => attr.status === 'available');
 </script>
 
@@ -58,7 +50,7 @@
                 <ViewSelector view={data.view} {columns} hideView allowNoColumns />
                 <Button
                     disabled={!(hasAttributes && hasValidAttributes)}
-                    on:click={openWizard}
+                    href={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/create`}
                     event="create_document">
                     <Icon icon={IconPlus} slot="start" size="s" />
                     Create document
@@ -99,8 +91,24 @@
                     allowCreate={$canWriteDocuments}
                     single
                     href="https://appwrite.io/docs/products/databases/documents"
-                    target="document"
-                    on:click={openWizard} />
+                    target="document">
+                    <svelte:fragment slot="actions">
+                        <Button
+                            external
+                            href="https://appwrite.io/docs/products/databases/documents"
+                            text
+                            event="empty_documentation"
+                            size="s"
+                            ariaLabel="create document">Documentation</Button>
+                        <Button
+                            href={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/create`}
+                            secondary
+                            disabled={!$canWriteDocuments}
+                            size="s">
+                            Create document
+                        </Button>
+                    </svelte:fragment>
+                </Empty>
             {/if}
         {:else}
             <Card.Base padding="none">

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

@@ -0,0 +1,136 @@
+<script lang="ts">
+    import { base } from '$app/paths';
+    import { page } from '$app/stores';
+    import { Wizard } from '$lib/layout';
+    import { Alert, Fieldset, Layout, Typography } from '@appwrite.io/pink-svelte';
+    import Button from '$lib/elements/forms/button.svelte';
+    import Form from '$lib/elements/forms/form.svelte';
+    import { sdk } from '$lib/stores/sdk';
+    import { goto } from '$app/navigation';
+    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
+    import { addNotification } from '$lib/stores/notifications';
+    import { writable } from 'svelte/store';
+    import AttributeForm from '../document-[document]/attributeForm.svelte';
+    import { Permissions } from '$lib/components/permissions';
+    import type { PageData } from './$types';
+    import type { Attributes } from '../store';
+    import { ID } from '@appwrite.io/console';
+
+    export let data: PageData;
+
+    let showExitModal = false;
+    let formComponent: Form;
+    let isSubmitting = writable(false);
+
+    type CreateDocument = {
+        id?: string;
+        document: object;
+        permissions: string[];
+        attributes: Attributes[];
+    };
+
+    function createDocumentWritable() {
+        const availableAttributes = (data.collection.attributes as unknown as Attributes[]).filter(
+            (a) => a.status === 'available'
+        );
+        const initial = {
+            id: null,
+            document: availableAttributes.reduce((acc, attr) => {
+                acc[attr.key] = attr.array ? [] : null;
+
+                return acc;
+            }, {}),
+            permissions: [],
+            attributes: availableAttributes
+        };
+
+        const store = writable<CreateDocument>({ ...initial });
+
+        return store;
+    }
+
+    const createDocument = createDocumentWritable();
+
+    async function create() {
+        try {
+            const { $id } = await sdk.forProject.databases.createDocument(
+                $page.params.database,
+                $page.params.collection,
+                $createDocument.id ?? ID.unique(),
+                $createDocument.document,
+                $createDocument.permissions
+            );
+
+            addNotification({
+                message: 'Document has been created',
+                type: 'success'
+            });
+            trackEvent(Submit.DocumentCreate, {
+                customId: !!$createDocument.id
+            });
+            goto(
+                `${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/document-${$id}`
+            );
+        } catch (error) {
+            addNotification({
+                message: error.message,
+                type: 'error'
+            });
+            trackError(error, Submit.DocumentCreate);
+        }
+    }
+</script>
+
+<Wizard
+    title="Create document"
+    href={`${base}/project-${$page.params.project}/databases/database-${$page.params.database}/collection-${$page.params.collection}/`}
+    bind:showExitModal
+    column
+    confirmExit>
+    <Form bind:this={formComponent} onSubmit={create} bind:isSubmitting>
+        <Layout.Stack gap="xxl">
+            <Fieldset legend="Data">
+                <AttributeForm
+                    bind:formValues={$createDocument.document}
+                    attributes={$createDocument.attributes}
+                    bind:customId={$createDocument.id} />
+            </Fieldset>
+
+            <Fieldset legend="Permissions">
+                <Layout.Stack gap="xl">
+                    <Typography.Text>
+                        Choose which permission scopes to grant your application. It is best
+                        practice to allow only the permissions you need to meet your project goals.
+                    </Typography.Text>
+                    {#if data.collection.documentSecurity}
+                        <Alert.Inline status="info">
+                            <svelte:fragment slot="title"
+                                >Document security is enabled</svelte:fragment>
+                            Users will be able to access this document if they have been granted
+                            <b>either document or collection permissions</b>.
+                        </Alert.Inline>
+                        <Permissions bind:permissions={$createDocument.permissions} />
+                    {:else}
+                        <Alert.Inline status="info">
+                            <svelte:fragment slot="title"
+                                >Document security is disabled</svelte:fragment>
+                            If you want to assign document permissions, navigate to Collection settings
+                            and enable document security. Otherwise, only collection permissions will
+                            be used.
+                        </Alert.Inline>
+                    {/if}
+                </Layout.Stack>
+            </Fieldset>
+        </Layout.Stack>
+    </Form>
+
+    <svelte:fragment slot="footer">
+        <Button fullWidthMobile secondary on:click={() => (showExitModal = true)}>Cancel</Button>
+        <Button
+            fullWidthMobile
+            on:click={() => formComponent.triggerSubmit()}
+            disabled={$isSubmitting}>
+            Create
+        </Button>
+    </svelte:fragment>
+</Wizard>

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

@@ -1,83 +0,0 @@
-<script lang="ts">
-    import { invalidate } from '$app/navigation';
-    import { page } from '$app/stores';
-    import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { Dependencies } from '$lib/constants';
-    import { WizardWithSteps } from '$lib/layout';
-    import type { WizardStepsType } from '$lib/layout/wizardWithSteps.svelte';
-    import { addNotification } from '$lib/stores/notifications';
-    import { sdk } from '$lib/stores/sdk';
-    import { wizard } from '$lib/stores/wizard';
-    import { ID } from '@appwrite.io/console';
-    import { onDestroy, onMount } from 'svelte';
-    import { attributes } from './store';
-    import Step1 from './wizard/step1.svelte';
-    import Step2 from './wizard/step2.svelte';
-    import { createDocument } from './wizard/store';
-
-    const databaseId = $page.params.database;
-    const collectionId = $page.params.collection;
-
-    onMount(initializeDocument);
-
-    function initializeDocument() {
-        $createDocument.attributes = $attributes.filter((a) => a.status === 'available');
-        $attributes.forEach((attr) => {
-            if (attr.array) {
-                $createDocument.document[attr.key] = [];
-            } else {
-                $createDocument.document[attr.key] = null;
-            }
-        });
-    }
-
-    async function create() {
-        try {
-            await sdk.forProject.databases.createDocument(
-                databaseId,
-                collectionId,
-                $createDocument.id ?? ID.unique(),
-                $createDocument.document,
-                $createDocument.permissions
-            );
-            await invalidate(Dependencies.DOCUMENTS);
-
-            addNotification({
-                message: 'Document has been created',
-                type: 'success'
-            });
-            trackEvent(Submit.DocumentCreate, {
-                customId: !!$createDocument.id
-            });
-
-            createDocument.reset();
-            wizard.hide();
-        } catch (error) {
-            addNotification({
-                message: error.message,
-                type: 'error'
-            });
-            trackError(error, Submit.DocumentCreate);
-        }
-    }
-
-    onDestroy(() => {
-        $createDocument.id = null;
-        $createDocument.document = {};
-        $createDocument.attributes = [];
-        $createDocument.permissions = [];
-    });
-
-    const stepsComponents: WizardStepsType = new Map();
-    stepsComponents.set(1, {
-        label: 'Data',
-        component: Step1
-    });
-    stepsComponents.set(2, {
-        label: 'Permissions',
-        component: Step2,
-        optional: true
-    });
-</script>
-
-<WizardWithSteps title="Create document" steps={stepsComponents} on:finish={create} />

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, BoxAvatar, Heading } 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';

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributeItem.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import { Button, FormList } from '$lib/elements/forms';
+    import { Button } from '$lib/elements/forms';
     import { capitalize } from '$lib/helpers/string';
-    import { Icon } from '@appwrite.io/pink-svelte';
-    import type { Attributes } from '../store';
-    import Attribute from './attribute.svelte';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
+    import Attribute from './attribute.svelte';
+    import type { Attributes } from '../store';
 
     export let attribute: Attributes;
     export let formValues: object = {};
@@ -47,55 +47,47 @@
 
 {#if attribute.array}
     {#if formValues[attribute.key]?.length === 0}
-        <div class="u-flex u-cross-center u-main-space-between">
-            <span class="label u-margin-0">
-                {label}
-                <span class="optional u-margin-inline-start-8">
+        <Layout.Stack direction="row" alignContent="space-between">
+            <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                <Typography.Text variant="m-500">{label}</Typography.Text>
+                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
                     {getAttributeType(attribute)}
-                </span>
-            </span>
-            <Button text on:click={() => addArrayItem(attribute.key)}>
+                </Typography.Text>
+            </Layout.Stack>
+            <Button secondary on:click={() => addArrayItem(attribute.key)}>
                 <Icon icon={IconPlus} slot="start" size="s" />
                 Add item
             </Button>
-        </div>
+        </Layout.Stack>
     {:else}
-        <ul class="u-grid u-gap-4">
+        <Layout.Stack>
             {#each [...formValues[attribute.key].keys()] as index}
-                <li class="form-item is-multiple u-gap-8">
-                    <div class="form-item-part u-stretch">
-                        <Attribute
-                            {attribute}
-                            id={`${attribute.key}-${index}`}
-                            optionalText={index === 0 ? getAttributeType(attribute) : undefined}
-                            label={index === 0 ? label : ''}
-                            bind:value={formValues[attribute.key][index]} />
-                    </div>
-                    <div class="form-item-part u-cross-child-end">
-                        <Button
-                            noMargin
-                            text
-                            icon
-                            on:click={() => removeArrayItem(attribute.key, index)}>
-                            <span class="icon-x" aria-hidden="true" />
-                        </Button>
-                    </div>
-                </li>
+                <Layout.Stack direction="row" alignItems="flex-end" gap="xs">
+                    <Attribute
+                        {attribute}
+                        id={`${attribute.key}-${index}`}
+                        optionalText={index === 0 ? getAttributeType(attribute) : undefined}
+                        label={index === 0 ? label : ''}
+                        bind:value={formValues[attribute.key][index]} />
+                    <Button text icon on:click={() => removeArrayItem(attribute.key, index)}>
+                        <span class="icon-x" aria-hidden="true" />
+                    </Button>
+                </Layout.Stack>
             {/each}
-            <Button text on:click={() => addArrayItem(attribute.key)}>
-                <Icon icon={IconPlus} slot="start" size="s" />
-                Add item
-            </Button>
-        </ul>
+            <div>
+                <Button secondary on:click={() => addArrayItem(attribute.key)}>
+                    <Icon icon={IconPlus} slot="start" size="s" />
+                    Add item
+                </Button>
+            </div>
+        </Layout.Stack>
     {/if}
 {:else}
-    <FormList>
-        <Attribute
-            {editing}
-            {attribute}
-            {label}
-            optionalText={getAttributeType(attribute)}
-            id={attribute.key}
-            bind:value={formValues[attribute.key]} />
-    </FormList>
+    <Attribute
+        {editing}
+        {attribute}
+        {label}
+        optionalText={getAttributeType(attribute)}
+        id={attribute.key}
+        bind:value={formValues[attribute.key]} />
 {/if}

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/relationship.svelte

@@ -9,7 +9,7 @@
     import { onMount } from 'svelte';
     import { doc } from '../store';
     import { isRelationshipToMany } from './store';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Layout, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     export let id: string;
@@ -98,16 +98,16 @@
 
 {#if isRelationshipToMany(attribute)}
     <div class="u-width-full-line">
-        <div class="u-flex u-cross-center u-main-space-between">
-            <div>
-                <Label required={attribute.required} {optionalText} for={id}>
-                    {label}
-                </Label>
-            </div>
+        <Layout.Stack direction="row" alignContent="space-between">
+            <Layout.Stack gap="xxs" direction="row" alignItems="center">
+                <Typography.Text variant="m-500">{label}</Typography.Text>
+                <Typography.Text variant="m-400" color="--color-fgcolor-neutral-tertiary">
+                    {optionalText}
+                </Typography.Text>
+            </Layout.Stack>
             {#if editing || total === 0}
                 <Button
-                    text
-                    noMargin
+                    secondary
                     on:click={() => {
                         showInput = true;
                     }}>
@@ -115,8 +115,7 @@
                     Add item
                 </Button>
             {/if}
-        </div>
-
+        </Layout.Stack>
         <ul class="u-flex-vertical u-gap-4 u-margin-block-start-4">
             {#if !editing && relatedList?.length}
                 {#each relatedList as item, i}
@@ -236,6 +235,7 @@
                 <PaginationInline {limit} bind:offset sum={total} hidePages />
             </div>
         {/if}
+
         {#if total > 0 && !editing}
             <Button
                 text

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { page } from '$app/stores';
     import { sdk } from '$lib/stores/sdk';
     import { addNotification } from '$lib/stores/notifications';

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { Button } from '$lib/elements/forms';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { collection } from '../store';
     import { doc } from './store';
     import { onMount } from 'svelte';
@@ -82,7 +82,7 @@
     <svelte:fragment slot="title">Data</svelte:fragment>
     Update document data based on the attributes created earlier.
     <svelte:fragment slot="aside">
-        <AttributeForm attributes={$collection.attributes} bind:formValues={$work} gap="16" />
+        <AttributeForm attributes={$collection.attributes} bind:formValues={$work} />
     </svelte:fragment>
 
     <svelte:fragment slot="actions">

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Empty, DropList, DropListItem, Heading } from '$lib/components';
+    import { Empty, DropList, DropListItem } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Container } from '$lib/layout';
     import { collection, indexes } from '../store';
@@ -150,7 +150,7 @@
             allowCreate={$canWriteCollections}
             on:click={() => (showCreateDropdown = true)}>
             <div class="u-text-center">
-                <Heading size="7" tag="h2">Create an attribute to get started.</Heading>
+                <Typography.Title size="s">Create an attribute to get started.</Typography.Title>
                 <p class="body-text-2 u-bold u-margin-block-start-4">
                     Need a hand? Learn more in our documentation.
                 </p>

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/dangerZone.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { collection } from '../store';

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/displayName.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputSelect, InputSelectSearch, InputText } from '$lib/elements/forms';
     import { last, symmetricDifference } from '$lib/helpers/array';

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateSecurity.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, FormList, InputSwitch } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/settings/updateStatus.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackEvent, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, InputSwitch } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step1.svelte

@@ -1,17 +0,0 @@
-<script lang="ts">
-    import { WizardStep } from '$lib/layout';
-    import AttributeForm from '../document-[document]/attributeForm.svelte';
-    import { createDocument } from './store';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Data</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Provide document data based on attributes you created earlier.
-    </svelte:fragment>
-
-    <AttributeForm
-        bind:formValues={$createDocument.document}
-        attributes={$createDocument.attributes}
-        bind:customId={$createDocument.id} />
-</WizardStep>

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/step2.svelte

@@ -1,34 +0,0 @@
-<script lang="ts">
-    import { Permissions } from '$lib/components/permissions';
-    import { WizardStep } from '$lib/layout';
-    import { createDocument } from './store';
-    import { collection } from '../store';
-    import { Alert } from '@appwrite.io/pink-svelte';
-</script>
-
-<WizardStep>
-    <svelte:fragment slot="title">Permissions</svelte:fragment>
-    <svelte:fragment slot="subtitle">
-        Choose who can access your collection and documents. For more information, visit our <a
-            href="https://appwrite.io/docs/products/databases/permissions"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="link">
-            Permissions guide
-        </a>.
-    </svelte:fragment>
-    {#if $collection.documentSecurity}
-        <Alert.Inline status="info">
-            <svelte:fragment slot="title">Document security is enabled</svelte:fragment>
-            Users will be able to access this document if they have been granted
-            <b>either document or collection permissions</b>.
-        </Alert.Inline>
-        <Permissions bind:permissions={$createDocument.permissions} />
-    {:else}
-        <Alert.Inline status="info">
-            <svelte:fragment slot="title">Document security is disabled</svelte:fragment>
-            If you want to assign document permissions, navigate to Collection settings and enable document
-            security. Otherwise, only collection permissions will be used.
-        </Alert.Inline>
-    {/if}
-</WizardStep>

src/routes/(console)/project-[project]/databases/database-[database]/collection-[collection]/wizard/store.ts

@@ -1,31 +0,0 @@
-import { writable } from 'svelte/store';
-import type { Attributes } from '../store';
-
-type CreateDocument = {
-    id?: string;
-    document: object;
-    permissions: string[];
-    attributes: Attributes[];
-};
-
-const initialCreateDocument: CreateDocument = {
-    id: null,
-    document: {},
-    permissions: [],
-    attributes: []
-};
-
-function createDocumentWritable() {
-    const store = writable<CreateDocument>({ ...initialCreateDocument });
-
-    const reset = () => {
-        store.set({ ...initialCreateDocument });
-    };
-
-    return {
-        ...store,
-        reset
-    };
-}
-
-export const createDocument = createDocumentWritable();

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

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { BoxAvatar, Card, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, Card, CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, Helper, InputText } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';

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

@@ -27,7 +27,7 @@
 
 <script lang="ts">
     import { base } from '$app/paths';
-    import { AvatarGroup, Box, Heading } from '$lib/components';
+    import { AvatarGroup, Box } from '$lib/components';
     import { app } from '$lib/stores/app';
     import { wizard } from '$lib/stores/wizard';
     import { templateConfig, template as templateStore } from './store';
@@ -45,7 +45,7 @@
     import CreateManual from './wizard/createManual.svelte';
     import { repository } from '$lib/stores/vcs';
     import { Repositories } from '$lib/components/git';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { IconDeno, IconDotnet } from '@appwrite.io/pink-icons-svelte';
 
     const isVcsEnabled = $consoleVariables?._APP_VCS_ENABLED === true;
@@ -72,7 +72,7 @@
         <div class="git-container u-position-relative">
             <div class="grid-1-1 u-gap-24">
                 <div class="card u-cross-child-start u-height-100-percent">
-                    <Heading size="6" tag="h6">Connect Git repository</Heading>
+                    <Typography.Title size="s">Connect Git repository</Typography.Title>
                     <p class="u-margin-block-start-8">
                         Create and deploy a function with a connected git repository.
                     </p>
@@ -93,9 +93,9 @@
                             style="border-radius: var(--border-radius-medium)">
                             <div
                                 class="u-flex-vertical u-height-100-percent u-main-center u-cross-center u-gap-16 u-padding-inline-24">
-                                <Heading size="7" tag="h6" trimmed={false}>
+                                <Typography.Title size="s">
                                     Connect your self-hosted instance to Git
-                                </Heading>
+                                </Typography.Title>
                                 <p>
                                     Configure your self-hosted instance to connect your function to
                                     a Git repository.
@@ -113,7 +113,7 @@
 
                 <div class="card u-height-100-percent">
                     <section class="common-section">
-                        <Heading size="6" tag="h6">Quick start</Heading>
+                        <Typography.Title size="s">Quick start</Typography.Title>
                         <p class="u-margin-block-start-8">Use a starter template.</p>
                         <ul
                             class="grid-box u-margin-block-start-16"
@@ -203,7 +203,7 @@
                     </Button>
                     <div class="u-sep-block-start common-section" />
                     <section class="common-section">
-                        <Heading size="6" tag="h6">Templates</Heading>
+                        <Typography.Title size="s">Templates</Typography.Title>
                         <p class="text u-margin-block-start-8">
                             Find the right template for your use case.
                         </p>

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

@@ -1,14 +1,7 @@
 <script lang="ts">
     import { base } from '$app/paths';
     import { page } from '$app/stores';
-    import {
-        Empty,
-        Heading,
-        PaginationWithLimit,
-        Alert,
-        ViewSelector,
-        EmptySearch
-    } from '$lib/components';
+    import { Empty, PaginationWithLimit, Alert, ViewSelector, EmptySearch } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { deploymentList, func } from './store';
     import { Container, ContainerHeader } from '$lib/layout';
@@ -28,6 +21,7 @@
     import { Pill } from '$lib/elements';
     import { onMount } from 'svelte';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
 
@@ -143,7 +137,8 @@
     {#if !data?.deploymentList?.total && !data?.query}
         <Empty single target="deployment">
             <div class="u-text-center">
-                <Heading size="7" tag="h2">Create your first deployment to get started.</Heading>
+                <Typography.Title size="s"
+                    >Create your first deployment to get started.</Typography.Title>
                 <p class="body-text-2 u-bold u-margin-block-start-4">
                     Learn more about deployments in our Documentation.
                 </p>
@@ -162,7 +157,7 @@
         {@const activeDeployment = data.activeDeployment}
 
         <div class="common-section">
-            <Heading tag="h3" size="7">Active</Heading>
+            <Typography.Title size="s">Active</Typography.Title>
         </div>
         {#if data?.activeDeployment && !$func.live && showAlert}
             <Alert
@@ -207,8 +202,8 @@
         {:else if !$deploymentList.total && !data?.query}
             <Empty single target="deployment">
                 <div class="u-text-center">
-                    <Heading size="7" tag="h2"
-                        >Create your first deployment to get started.</Heading>
+                    <Typography.Title size="s"
+                        >Create your first deployment to get started.</Typography.Title>
                     <p class="body-text-2 u-bold u-margin-block-start-4">
                         Learn more about deployments in our Documentation.
                     </p>
@@ -244,7 +239,7 @@
             </Empty>
         {/if}
         <div class="u-margin-block-start-48">
-            <Heading tag="h3" size="7">All deployments</Heading>
+            <Typography.Title size="s">All deployments</Typography.Title>
             <div class="u-flex u-main-space-between is-not-mobile u-margin-block-start-16">
                 <div class="u-flex u-gap-8 u-cross-center u-flex-wrap">
                     <QuickFilters {columns} />

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

@@ -10,7 +10,6 @@
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
     import { deployment } from './store';
-    import Heading from '$lib/components/heading.svelte';
     import BoxAvatar from '$lib/components/boxAvatar.svelte';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import Delete from '../delete.svelte';

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

@@ -18,9 +18,10 @@
     import { sdk } from '$lib/stores/sdk';
     import { Dependencies } from '$lib/constants';
     import { invalidate } from '$app/navigation';
-    import { Alert, Heading } from '$lib/components';
+    import { Alert } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { trackEvent } from '$lib/actions/analytics';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data;
     let showAlert = true;
@@ -42,7 +43,7 @@
 </script>
 
 <Container>
-    <Heading tag="h2" size="5">Settings</Heading>
+    <Typography.Title>Settings</Typography.Title>
     {#if $func.version === 'v2' && showAlert}
         <Alert
             type="warning"

src/routes/(console)/project-[project]/functions/function-[function]/settings/executeFunction.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import { base } from '$app/paths';
-    import { CardGrid, Heading, SvgIcon } from '$lib/components';
+    import { CardGrid, SvgIcon } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import { project } from '$routes/(console)/project-[project]/store';
+    import { Typography } from '@appwrite.io/pink-svelte';
     import { func } from '../store';
 </script>
 
@@ -13,7 +14,7 @@
             <SvgIcon size={64} iconSize="large" name={$func.runtime.split('-')[0]}></SvgIcon>
         </div>
         <div class="u-flex-vertical u-gap-4">
-            <Heading tag="h6" size="7">{$func.name}</Heading>
+            <Typography.Title size="s">{$func.name}</Typography.Title>
 
             <p class="text u-capitalize">{$func.runtime}</p>
         </div>

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateConfiguration.svelte

@@ -10,7 +10,6 @@
         Collapsible,
         CollapsibleItem,
         EyebrowHeading,
-        Heading,
         SvgIcon
     } from '$lib/components';
     import { Dependencies } from '$lib/constants';

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateEvents.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
     import CardGrid from '$lib/components/cardGrid.svelte';
     import Empty from '$lib/components/empty.svelte';
-    import Heading from '$lib/components/heading.svelte';
 
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateLogging.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList } from '$lib/elements/forms';
     import InputSwitch from '$lib/elements/forms/inputSwitch.svelte';

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateName.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, InputText } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/functions/function-[function]/settings/updatePermissions.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateRuntime.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { BillingPlan, Dependencies } from '$lib/constants';
     import { Button, Form, FormList } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateSchedule.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputCron } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateScopes.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

src/routes/(console)/project-[project]/functions/function-[function]/settings/updateTimeout.svelte

@@ -2,7 +2,7 @@
     import { invalidate } from '$app/navigation';
     import { page } from '$app/stores';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import { Button, Form, FormList, InputNumber } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';

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

@@ -1,11 +1,12 @@
 <script lang="ts">
     import { Container } from '$lib/layout';
-    import { Card, SecondaryTabsItem, SecondaryTabs, Heading } from '$lib/components';
+    import { Card, SecondaryTabsItem, SecondaryTabs } from '$lib/components';
     import { BarChart } from '$lib/charts';
     import { page } from '$app/stores';
     import type { PageData } from './$types';
     import { formatNumberWithCommas } from '$lib/helpers/numbers';
     import { base } from '$app/paths';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
     $: total = data.executionsTotal;
@@ -16,7 +17,7 @@
 
 <Container>
     <div class="u-flex u-main-space-between common-section">
-        <Heading tag="h2" size="5">Functions</Heading>
+        <Typography.Title>Functions</Typography.Title>
         <SecondaryTabs>
             <SecondaryTabsItem
                 href={`${base}/project-${data.project.$id}/functions/function-${data.function.$id}/usage/24h`}
@@ -37,7 +38,7 @@
     </div>
     {#if count}
         <Card>
-            <Heading tag="h6" size="6">{formatNumberWithCommas(total)}</Heading>
+            <Typography.Title>{formatNumberWithCommas(total)}</Typography.Title>
             <p>Executions</p>
             <div class="u-margin-block-start-16" />
             <BarChart
@@ -52,7 +53,7 @@
 
     {#if mbSecondsCount}
         <Card>
-            <Heading tag="h6" size="6">{formatNumberWithCommas(gbHoursTotal)}</Heading>
+            <Typography.Title>{formatNumberWithCommas(gbHoursTotal)}</Typography.Title>
             <p>GB Hours</p>
             <div class="u-margin-block-start-16" />
             <BarChart

src/routes/(console)/project-[project]/functions/templates/+page.svelte

@@ -6,7 +6,6 @@
         Collapsible,
         CollapsibleItem,
         EmptySearch,
-        Heading,
         Pagination,
         SvgIcon
     } from '$lib/components';
@@ -20,7 +19,7 @@
     import type { Models } from '@appwrite.io/console';
     import { functionsList } from '../store';
     import { debounce } from '$lib/helpers/debounce';
-    import { Tooltip } from '@appwrite.io/pink-svelte';
+    import { Tooltip, Typography } from '@appwrite.io/pink-svelte';
     import { capitalize } from '$lib/helpers/string';
 
     export let data;
@@ -124,7 +123,7 @@
 
 <Container>
     <div class="u-flex u-gap-8 u-cross-center">
-        <Heading tag="h2" size="5">Templates</Heading>
+        <Typography.Title>Templates</Typography.Title>
         <div class="tag eyebrow-heading-3">
             <span class="text u-x-small">Experimental</span>
         </div>

src/routes/(console)/project-[project]/functions/templates/template-[template]/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { Card, Collapsible, Heading } from '$lib/components';
+    import { Card, Collapsible } from '$lib/components';
     import { Pill } from '$lib/elements';
     import { Button } from '$lib/elements/forms';
     import { Container, ContainerButton } from '$lib/layout';
@@ -13,6 +13,7 @@
     import { organization } from '$lib/stores/organization';
     import { functionsList } from '../../store';
     import { canWriteFunctions } from '$lib/stores/roles';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     $: buttonDisabled =
         isCloud && isServiceLimited('functions', $organization?.billingPlan, $functionsList?.total);
@@ -59,7 +60,7 @@
         </section>
         <section>
             <Card>
-                <Heading size="7" tag="h3">
+                <Typography.Title size="s">
                     <span class="u-flex u-cross-center u-gap-16 functions-avatar-holder">
                         <div class="avatar is-size-small">
                             <span
@@ -69,7 +70,7 @@
                         </div>
                         {$template.name}
                     </span>
-                </Heading>
+                </Typography.Title>
                 <p class="u-margin-block-start-24">{$template.tagline}</p>
 
                 <div class="u-flex u-gap-16 u-main-end u-margin-block-start-24 u-flex-wrap">

src/routes/(console)/project-[project]/messaging/+page.svelte

@@ -6,7 +6,6 @@
         EmptyFilter,
         EmptySearch,
         FloatingActionBar,
-        Heading,
         Id,
         Modal,
         PaginationWithLimit,
@@ -43,7 +42,7 @@
     import type { Column } from '$lib/helpers/types';
     import { writable } from 'svelte/store';
     import { canWriteMessages } from '$lib/stores/roles';
-    import { Layout } from '@appwrite.io/pink-svelte';
+    import { Layout, Typography } from '@appwrite.io/pink-svelte';
 
     export let data: PageData;
     let selected: string[] = [];
@@ -237,9 +236,9 @@
     {:else}
         <Empty single target="message" on:click={() => ($showCreate = true)}>
             <div class="u-text-center">
-                <Heading size="7" tag="h2" trimmed={false}>
+                <Typography.Title size="s">
                     Create your first message to get started.
-                </Heading>
+                </Typography.Title>
                 <p class="body-text-2 u-bold u-margin-block-start-4">
                     Need a hand? Learn more in our documentation.
                 </p>

src/routes/(console)/project-[project]/messaging/message-[message]/delete.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { BoxAvatar, CardGrid, Heading } from '$lib/components';
+    import { BoxAvatar, CardGrid } from '$lib/components';
     import { Button } from '$lib/elements/forms';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import type { Models } from '@appwrite.io/console';

src/routes/(console)/project-[project]/messaging/message-[message]/emailMessage.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
     import { invalidate } from '$app/navigation';
     import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Dependencies } from '$lib/constants';
     import {
         Button,

src/routes/(console)/project-[project]/messaging/message-[message]/overview.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { toLocaleDateTime } from '$lib/helpers/date';
     import ProviderType from '../providerType.svelte';
     import MessageStatusPill from '../messageStatusPill.svelte';
@@ -9,6 +9,7 @@
     import SendModal from './sendModal.svelte';
     import ScheduleModal from './scheduleModal.svelte';
     import CancelModal from './cancelModal.svelte';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message & { data: Record<string, string> };
     export let topics: Models.Topic[];
@@ -23,9 +24,9 @@
 <CardGrid hideFooter={['processing', 'sent'].includes(message.status)}>
     <div class="grid-1-2-col-1 u-flex u-cross-center u-gap-16" data-private>
         <ProviderType type={message.providerType} size="l">
-            <Heading tag="h6" size="7">
+            <Typography.Title size="s">
                 <ProviderType type={message.providerType} noIcon />
-            </Heading>
+            </Typography.Title>
         </ProviderType>
     </div>
     <svelte:fragment slot="aside">

src/routes/(console)/project-[project]/messaging/message-[message]/pushMessage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import {
         Button,
         Form,
@@ -19,7 +19,7 @@
     import { addNotification } from '$lib/stores/notifications';
     import { Submit, trackError, trackEvent } from '$lib/actions/analytics';
     import { validateData } from '../wizard/pushFormList.svelte';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
 
     /* eslint  @typescript-eslint/no-explicit-any: 'off' */
@@ -103,7 +103,7 @@
 <Form onSubmit={update}>
     <CardGrid hideFooter={message.status != 'draft'}>
         <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
-            <Heading tag="h6" size="7">Message</Heading>
+            <Typography.Title size="s">Message</Typography.Title>
             <div class="u-flex u-margin-block-start-24 u-width-full-line">
                 <PushPhone {title} {body} />
             </div>

src/routes/(console)/project-[project]/messaging/message-[message]/smsMessage.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { CardGrid, Heading } from '$lib/components';
+    import { CardGrid } from '$lib/components';
     import { Button, Form, FormList, InputTextarea } from '$lib/elements/forms';
     import type { Models } from '@appwrite.io/console';
     import SMSPhone from '../smsPhone.svelte';
@@ -9,6 +9,7 @@
     import { trackEvent, Submit, trackError } from '$lib/actions/analytics';
     import { Dependencies } from '$lib/constants';
     import { addNotification } from '$lib/stores/notifications';
+    import { Typography } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message & { data: Record<string, string> };
 
@@ -49,7 +50,7 @@
 <Form onSubmit={update}>
     <CardGrid hideFooter={message.status != 'draft'}>
         <div class="grid-1-2-col-1 u-flex-vertical u-cross-start u-gap-16">
-            <Heading tag="h6" size="7">Message</Heading>
+            <Typography.Title size="s">Message</Typography.Title>
             <SMSPhone {content} />
         </div>
         <svelte:fragment slot="aside">

src/routes/(console)/project-[project]/messaging/message-[message]/updateTargets.svelte

@@ -8,14 +8,7 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import {
-        CardGrid,
-        Heading,
-        Empty,
-        PaginationInline,
-        EmptySearch,
-        Alert
-    } from '$lib/components';
+    import { CardGrid, Empty, PaginationInline, EmptySearch, Alert } from '$lib/components';
     import { onMount } from 'svelte';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -27,7 +20,7 @@
     import UserTargetsModal from '../userTargetsModal.svelte';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message & { data: Record<string, unknown> };
     export let selectedTargetsById: Record<string, Models.Target>;
@@ -134,7 +127,7 @@
 
 <Form onSubmit={update}>
     <CardGrid hideFooter={!isDraft}>
-        <Heading tag="h6" size="7" id="variables">Targets</Heading>
+        <Typography.Title size="s">Targets</Typography.Title>
         <svelte:fragment slot="aside">
             {@const sum = targetIds.length || Object.values(recipients).length}
             {@const dataSource =

src/routes/(console)/project-[project]/messaging/message-[message]/updateTopics.svelte

@@ -8,7 +8,7 @@
         TableHeader,
         TableRow
     } from '$lib/elements/table';
-    import { CardGrid, Heading, Empty, PaginationInline, EmptySearch } from '$lib/components';
+    import { CardGrid, Empty, PaginationInline, EmptySearch } from '$lib/components';
     import TopicsModal from '../topicsModal.svelte';
     import { sdk } from '$lib/stores/sdk';
     import { invalidate } from '$app/navigation';
@@ -21,7 +21,7 @@
     import { getTotal } from '../wizard/store';
     import { isValueOfStringEnum } from '$lib/helpers/types';
     import { IconPlus } from '@appwrite.io/pink-icons-svelte';
-    import { Icon } from '@appwrite.io/pink-svelte';
+    import { Icon, Typography } from '@appwrite.io/pink-svelte';
 
     export let message: Models.Message;
     export let selectedTopicsById: Record<string, Models.Topic>;
@@ -86,7 +86,7 @@
 
 <Form onSubmit={update}>
     <CardGrid hideFooter={message.status != 'draft'}>
-        <Heading tag="h6" size="7" id="variables">Topics</Heading>
+        <Typography.Title size="s">Topics</Typography.Title>
         <svelte:fragment slot="aside">
             {@const sum = topicIds.length}
             {#if sum}