From 45c841faca7be619607197ea3b397504f806978c Mon Sep 17 00:00:00 2001
From: Jordy de Vulder <jordy@justbetter.nl>
Date: Tue, 17 Dec 2024 14:32:07 +0100
Subject: [PATCH 01/11] Implemented primer and various tweaks

---
 resources/views/cart/cart.blade.php           |  4 +--
 resources/views/cart/coupon.blade.php         |  6 ++---
 .../partials/product/remove-button.blade.php  |  4 +--
 .../cart/partials/sidebar/summary.blade.php   |  8 +++---
 .../cart/partials/sidebar/usps.blade.php      |  2 +-
 .../checkout/pages/credentials.blade.php      | 10 +++----
 .../views/checkout/pages/login.blade.php      | 10 +++----
 .../views/checkout/pages/payment.blade.php    | 10 +++----
 .../partials/buttons/address.blade.php        |  8 +++---
 .../partials/buttons/new-address.blade.php    |  2 +-
 .../views/checkout/partials/header.blade.php  | 14 +++++-----
 .../sections/login/logged-out.blade.php       | 26 ++++++++++---------
 .../payment/agreement-checkbox.blade.php      |  2 +-
 .../success/create-account-button.blade.php   |  4 +--
 .../success/create-account-title.blade.php    |  2 +-
 .../sections/success/logged-in.blade.php      |  4 +--
 .../success/order-completed-note.blade.php    |  2 +-
 .../sections/success/order-info.blade.php     |  4 +--
 .../success/product-quantity.blade.php        |  2 +-
 .../sections/success/products.blade.php       |  6 ++---
 .../sections/success/summary.blade.php        | 26 +++++++++----------
 .../shipping-billing-fields.blade.php         |  4 +--
 .../partials/shipping/methods.blade.php       |  4 +--
 .../partials/sidebar/bottom-links.blade.php   |  4 +--
 .../partials/sidebar/products.blade.php       | 14 +++++-----
 .../partials/sidebar/sidebar.blade.php        |  2 +-
 .../checkout/steps/credentials.blade.php      |  2 +-
 .../views/checkout/steps/success.blade.php    |  2 +-
 .../views/components/address-form.blade.php   | 18 +++++++------
 resources/views/components/address.blade.php  |  4 +--
 .../components/button/inactive.blade.php      |  4 +--
 .../views/components/button/primary.blade.php |  4 +--
 .../views/components/card/white.blade.php     |  4 +--
 .../views/components/coupon-field.blade.php   |  4 +--
 .../views/components/input/checkbox.blade.php |  4 +--
 .../views/components/input/index.blade.php    | 17 ------------
 .../views/components/input/input.blade.php    | 16 ++++++++++++
 .../views/components/input/label.blade.php    |  2 +-
 .../input/password/password.blade.php         | 20 ++++++++++++++
 .../views/components/input/radio.blade.php    |  6 ++---
 .../views/components/input/select.blade.php   | 15 -----------
 .../components/input/select/country.blade.php |  9 +++++++
 .../components/input/select/select.blade.php  | 15 +++++++++++
 .../components/layout/checkout.blade.php      | 16 ++++++------
 .../views/components/layout/index.blade.php   |  2 +-
 .../product/partials/name.blade.php           |  2 +-
 .../product/partials/price.blade.php          |  2 +-
 .../components/progress-bar/index.blade.php   |  8 +++---
 .../separated-listing/index.blade.php         |  2 +-
 .../views/components/slide-in/index.blade.php | 12 +++++----
 .../components/slide-in/receipt.blade.php     |  8 +++---
 .../views/components/slideover.blade.php      |  4 +--
 resources/views/components/summary.blade.php  | 16 ++++++------
 53 files changed, 219 insertions(+), 183 deletions(-)
 delete mode 100644 resources/views/components/input/index.blade.php
 create mode 100644 resources/views/components/input/input.blade.php
 create mode 100644 resources/views/components/input/password/password.blade.php
 delete mode 100644 resources/views/components/input/select.blade.php
 create mode 100644 resources/views/components/input/select/country.blade.php
 create mode 100644 resources/views/components/input/select/select.blade.php

diff --git a/resources/views/cart/cart.blade.php b/resources/views/cart/cart.blade.php
index 0682cec..2c27b04 100644
--- a/resources/views/cart/cart.blade.php
+++ b/resources/views/cart/cart.blade.php
@@ -3,7 +3,7 @@
 </x-rapidez-ct::sections>
 
 <x-rapidez-ct::toolbar>
-    <x-rapidez-ct::button.outline href="/" class="max-lg:hidden">
+    <x-rapidez::button.outline href="/" class="max-lg:hidden">
         @lang('Continue shopping')
-    </x-rapidez-ct::button.outline>
+    </x-rapidez::button.outline>
 </x-rapidez-ct::toolbar>
diff --git a/resources/views/cart/coupon.blade.php b/resources/views/cart/coupon.blade.php
index 4adcd6a..88b4ce5 100644
--- a/resources/views/cart/coupon.blade.php
+++ b/resources/views/cart/coupon.blade.php
@@ -10,7 +10,7 @@
                     :error-callback="checkResponseForExpiredCart"
                     v-slot="{ mutate }"
                 >
-                    <form v-on:submit.prevent="mutate" class="text-ct-inactive mt-1 flex items-center gap-x-2">
+                    <form v-on:submit.prevent="mutate" class="text-muted mt-1 flex items-center gap-x-2">
                         <button type="submit">
                             <x-heroicon-s-x-mark class="size-4 text-black-400"/>
                         </button>
@@ -19,8 +19,8 @@
                 </graphql-mutation>
             </template>
         </div>
-        <x-rapidez-ct::button.outline class="w-full" v-show="!isOpen" @click="toggle">
+        <x-rapidez::button.outline class="w-full" v-show="!isOpen" @click="toggle">
             @lang('Coupon code')
-        </x-rapidez-ct::button.outline>
+        </x-rapidez::button.outline>
     </div>
 </toggler>
diff --git a/resources/views/cart/partials/product/remove-button.blade.php b/resources/views/cart/partials/product/remove-button.blade.php
index 10e2028..28810c9 100644
--- a/resources/views/cart/partials/product/remove-button.blade.php
+++ b/resources/views/cart/partials/product/remove-button.blade.php
@@ -6,7 +6,7 @@
     :error-callback="checkResponseForExpiredCart"
     v-slot="{ mutate }"
 >
-    <button v-on:click="mutate" class="text-ct-inactive mt-1 text-xs hover:underline" :dusk="'item-delete-' + index" title="{{ __('Remove') }}">
-        <x-heroicon-o-trash class="text-inactive w-5"/>
+    <button v-on:click="mutate" class="text-muted mt-1 text-xs hover:underline" :dusk="'item-delete-' + index" title="{{ __('Remove') }}">
+        <x-heroicon-o-trash class="text-muted w-5"/>
     </button>
 </graphql-mutation>
diff --git a/resources/views/cart/partials/sidebar/summary.blade.php b/resources/views/cart/partials/sidebar/summary.blade.php
index 363158b..7c22a3d 100644
--- a/resources/views/cart/partials/sidebar/summary.blade.php
+++ b/resources/views/cart/partials/sidebar/summary.blade.php
@@ -4,15 +4,15 @@
 
 <x-rapidez-ct::summary />
 
-<x-rapidez-ct::button.enhanced :href="route('checkout')" class="flex w-full items-center justify-center gap-1 !mt-0" dusk="checkout">
+<x-rapidez::button.conversion :href="route('checkout')" class="flex w-full items-center justify-center gap-1 !mt-0" dusk="checkout">
     @lang('To checkout')
-</x-rapidez-ct::button.enhanced>
+</x-rapidez::button.conversion>
 
 @include('rapidez-ct::cart.coupon')
 
-<x-rapidez-ct::button.outline href="/" class="lg:hidden w-full">
+<x-rapidez::button.outline href="/" class="lg:hidden w-full">
     @lang('Continue shopping')
-</x-rapidez-ct::button.outline>
+</x-rapidez::button.outline>
 
 @include('rapidez-ct::cart.partials.sidebar.payment')
 @include('rapidez-ct::cart.partials.sidebar.usps')
diff --git a/resources/views/cart/partials/sidebar/usps.blade.php b/resources/views/cart/partials/sidebar/usps.blade.php
index df8795e..e3d957c 100644
--- a/resources/views/cart/partials/sidebar/usps.blade.php
+++ b/resources/views/cart/partials/sidebar/usps.blade.php
@@ -1,7 +1,7 @@
 <ul class="mt-4 flex flex-col gap-1 text-sm [&>li]:flex [&>li]:gap-x-2">
     @foreach (['Ordered before 7:00 PM, delivered tomorrow', 'Free shipping from €65', 'Free and easy returns', 'Rated 8.7/10'] as $usp)
         <li>
-            <x-heroicon-o-check stroke-width="3.2" class="mt-0.5 h-4 shrink-0 text-ct-primary" />
+            <x-heroicon-o-check stroke-width="3.2" class="mt-0.5 h-4 shrink-0 text-primary" />
             <span>@lang($usp)</span>
         </li>
     @endforeach
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
index 4a4897a..ead77ba 100644
--- a/resources/views/checkout/pages/credentials.blade.php
+++ b/resources/views/checkout/pages/credentials.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
     <div class="overflow-clip">
-        <div class="container">
+        <div class="lg:container xl:max-w-screen-xl">
             <x-rapidez-ct::layout.checkout>
                 <x-slot:header>
                     @include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
@@ -27,13 +27,13 @@ class="contents"
                 >
                     @include('rapidez-ct::checkout.steps.credentials')
                     <x-rapidez-ct::toolbar>
-                        <x-rapidez-ct::button.outline :href="route('cart')">
+                        <x-rapidez::button.outline :href="route('cart')" class="grid-span-1">
                             @lang('Back to cart')
-                        </x-rapidez-ct::button.outline>
+                        </x-rapidez::button.outline>
 
-                        <x-rapidez-ct::button.enhanced loader>
+                        <x-rapidez::button.conversion loader>
                             @lang('Next')
-                        </x-rapidez-ct::button.enhanced>
+                        </x-rapidez::button.conversion>
                     </x-rapidez-ct::toolbar>
                 </form>
                 <x-slot:sidebar>
diff --git a/resources/views/checkout/pages/login.blade.php b/resources/views/checkout/pages/login.blade.php
index 1c1ed43..2b6f054 100644
--- a/resources/views/checkout/pages/login.blade.php
+++ b/resources/views/checkout/pages/login.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
     <div class="overflow-clip">
-        <div class="container">
+        <div class="lg:container xl:max-w-screen-xl">
             <x-rapidez-ct::layout.checkout>
                 <x-slot:header>
                     @include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
@@ -29,13 +29,13 @@ class="max-w-md mx-auto"
                 >
                     @include('rapidez-ct::checkout.steps.login')
                     <x-rapidez-ct::toolbar>
-                        <x-rapidez-ct::button.outline :href="route('cart')">
+                        <x-rapidez::button.outline :href="route('cart')">
                             @lang('Back to cart')
-                        </x-rapidez-ct::button.outline>
+                        </x-rapidez::button.outline>
 
-                        <x-rapidez-ct::button.enhanced loader type="submit" dusk="continue" >
+                        <x-rapidez::button.conversion loader type="submit" dusk="continue" >
                             @lang('Next')
-                        </x-rapidez-ct::button.enhanced>
+                        </x-rapidez::button.conversion>
                     </x-rapidez-ct::toolbar>
                 </form>
             </x-rapidez-ct::layout.checkout>
diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
index c38caa0..5ea0439 100644
--- a/resources/views/checkout/pages/payment.blade.php
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -6,7 +6,7 @@
 
 @section('content')
     <div class="overflow-clip">
-        <div class="container">
+        <div class="lg:container xl:max-w-screen-xl">
             <x-rapidez-ct::layout.checkout>
                 <x-slot:header>
                     @include('rapidez-ct::checkout.partials.header', ['href' => route('cart')])
@@ -28,9 +28,9 @@ class="contents"
                 >
                     @include('rapidez::checkout.steps.payment_method')
                     <x-rapidez-ct::toolbar>
-                        <x-rapidez-ct::button.outline :href="route('checkout', ['step' => 'credentials'])">
+                        <x-rapidez::button.outline :href="route('checkout', ['step' => 'credentials'])">
                             @lang('Back to credentials')
-                        </x-rapidez-ct::button.outline>
+                        </x-rapidez::button.outline>
                         <graphql-mutation
                             :query="config.queries.placeOrder"
                             :variables="{ cart_id: mask }"
@@ -41,9 +41,9 @@ class="contents"
                             v-slot="{ mutate, variables }"
                         >
                             <fieldset>
-                                <x-rapidez-ct::button.enhanced class="relative" type="submit" dusk="continue" loader>
+                                <x-rapidez::button.conversion class="relative" type="submit" dusk="continue" loader>
                                     @lang('Place order')
-                                </x-rapidez-ct::button.enhanced>
+                                </x-rapidez::button.conversion>
                             </fieldset>
                         </graphql-mutation>
                     </x-rapidez-ct::toolbar>
diff --git a/resources/views/checkout/partials/buttons/address.blade.php b/resources/views/checkout/partials/buttons/address.blade.php
index 1d15b78..68077c4 100644
--- a/resources/views/checkout/partials/buttons/address.blade.php
+++ b/resources/views/checkout/partials/buttons/address.blade.php
@@ -1,8 +1,8 @@
 <div class="flex flex-wrap items-center gap-3 mt-5">
-    <x-rapidez-ct::button.inactive v-on:click.prevent="toggleEdit">
+    <x-rapidez::button v-on:click.prevent="toggleEdit">
         @lang('Use a new address')
-    </x-rapidez-ct::button.inactive>
-    <x-rapidez-ct::button.inactive tag="label" for="popup" class="cursor-pointer" v-if="$root.user.addresses.length">
+    </x-rapidez::button>
+    <x-rapidez::button tag="label" for="popup" class="cursor-pointer" v-if="$root.user.addresses.length">
         @lang('My addresses')
-    </x-rapidez-ct::button.inactive>
+    </x-rapidez::button>
 </div>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/buttons/new-address.blade.php b/resources/views/checkout/partials/buttons/new-address.blade.php
index 7c43426..a73f145 100644
--- a/resources/views/checkout/partials/buttons/new-address.blade.php
+++ b/resources/views/checkout/partials/buttons/new-address.blade.php
@@ -1,4 +1,4 @@
-<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-inactive font-medium bg-ct-inactive-100 rounded-xl max-md:hidden">
+<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-muted font-medium bg-ct-inactive-100 rounded-xl max-md:hidden">
     <span>+</span>
     <span>@lang('Add new address')</span>
 </button>
diff --git a/resources/views/checkout/partials/header.blade.php b/resources/views/checkout/partials/header.blade.php
index acc45f9..06f3d13 100644
--- a/resources/views/checkout/partials/header.blade.php
+++ b/resources/views/checkout/partials/header.blade.php
@@ -1,27 +1,27 @@
 <div class="lg:hidden">
     @include('rapidez-ct::components.slide-in.receipt')
 </div>
-<div class="flex flex-wrap gap-y-3 max-xl:-mt-5 xl:mr-20">
+<div class="flex flex-wrap gap-y-3 xl:mr-20 max-xl:justify-center">
     @isset($href)
-        <x-rapidez-ct::button.outline class="flex items-center justify-center !p-0 size-12 lg:hidden" :$href>
+        <x-rapidez::button.outline class="flex items-center justify-center !p-0 size-12 lg:hidden" :$href>
             <x-heroicon-o-arrow-long-left class="size-6"/>
-        </x-rapidez-ct::button.outline>
+        </x-rapidez::button.outline>
     @endif
 
-    <div class="flex lg:w-24 *:w-auto *:h-auto max-lg:flex-1 max-lg:h-12">
+    <div class="flex lg:w-16 xl:w-24 *:w-auto *:h-auto max-lg:flex-1 max-lg:h-12">
         <a href="{{ url('/') }}" class="sticky top-0 max-lg:mx-5 flex items-center lg:self-start max-lg:flex-1 lg:pt-4 max-w-full">
             <div class="w-inherit flex-1 *:w-auto *:h-auto *:max-w-full max-w-full h-full *:max-h-full">
                 <x-rapidez-ct::logo />
             </div>
         </a>
     </div>
-    <x-rapidez-ct::button.inactive for="slide-in" class="lg:hidden">
+    <x-rapidez::button for="slide-in" class="gap-x-2.5 lg:hidden cursor-pointer">
         <span class="relative">
-            <span class="absolute flex items-center font-semibold justify-center size-4 -right-2 -top-1.5 rounded-full bg-ct-primary text-white text-xs">
+            <span class="absolute flex items-center font-bold justify-center size-4 -right-2 -top-1.5 rounded-full bg-primary text-white text-xs">
                 @{{ Math.round(cart.total_quantity) }}
             </span>
             <x-heroicon-o-shopping-cart class="size-6"/>
         </span>
         @lang('My order')
-    </x-rapidez-ct::button.inactive>
+    </x-rapidez::button>
 </div>
diff --git a/resources/views/checkout/partials/sections/login/logged-out.blade.php b/resources/views/checkout/partials/sections/login/logged-out.blade.php
index 3811495..82efd8c 100644
--- a/resources/views/checkout/partials/sections/login/logged-out.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-out.blade.php
@@ -1,5 +1,5 @@
 <checkout-login v-slot="checkoutLogin">
-    <fieldset partial-submit="go" class="contents">
+    <fieldset partial-submit="go" class="grid gap-4 sm:gap-5 md:items-end md:grid-cols-2">
         <x-rapidez-ct::input
             label="Email"
             name="email"
@@ -11,19 +11,19 @@ class="justify-center"
             :placeholder="__('Enter your e-mail address')"
         />
 
-        <p v-if="checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
-            @lang('We will send your order confirmation to this e-mail address. We will also check if you already have an account so you can checkout more efficiently.')
+        <p v-if="checkoutLogin.isEmailAvailable" class="self-end text-muted md:min-h-14 flex items-center">
+            @lang('We\'ll email your order confirmation and check if you have an account for faster checkout.')
         </p>
 
         <template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
             <x-rapidez-ct::input.password
-                label="Password"
+                placeholder="password"
                 name="password"
                 v-model="checkoutLogin.password"
                 required
             />
         </template>
-        <p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-ct-inactive">
+        <p v-if="!loggedIn && !checkoutLogin.isEmailAvailable" class="self-end text-muted">
             @lang('You already have an account with this e-mail address. Please log in to continue.')
             <a href="{{ route('account.forgotpassword') }}" class="underline hover:no-underline">@lang('Forgot your password?')</a>
         </p>
@@ -34,12 +34,13 @@ class="justify-center"
         @endif
         <template v-if="!loggedIn && checkoutLogin.createAccount">
             <x-rapidez-ct::input.password
-                label="Repeat password"
+                placeholder="password repeat"
                 name="password_repeat"
                 v-model="checkoutLogin.password_repeat"
                 required
             />
             <x-rapidez-ct::input
+                placeholder="Firstname"
                 label="Firstname"
                 name="firstname"
                 type="text"
@@ -47,6 +48,7 @@ class="justify-center"
                 required
             />
             <x-rapidez-ct::input
+                placeholder="lastname"
                 label="Lastname"
                 name="lastname"
                 type="text"
@@ -57,17 +59,17 @@ class="justify-center"
 
         <template v-if="!loggedIn && checkoutLogin.isEmailAvailable">
             <div class="col-span-full">
-                <x-rapidez-ct::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account">
+                <x-rapidez::input.checkbox v-model="checkoutLogin.createAccount" dusk="create_account">
                     @lang('Create an account')
-                </x-rapidez-ct::input.checkbox>
+                </x-rapidez::input.checkbox>
             </div>
         </template>
 
-        <x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="checkoutLogin.isEmailAvailable && checkoutLogin.createAccount" dusk="register">
+        <x-rapidez::button.primary type="button" v-on:click="checkoutLogin.go" v-if="checkoutLogin.isEmailAvailable && checkoutLogin.createAccount" dusk="register">
             @lang('Register')
-        </x-rapidez-ct::button.accent>
-        <x-rapidez-ct::button.accent type="button" v-on:click="checkoutLogin.go" v-if="!checkoutLogin.isEmailAvailable" dusk="register">
+        </x-rapidez::button.primary>
+        <x-rapidez::button.primary type="button" v-on:click="checkoutLogin.go" v-if="!checkoutLogin.isEmailAvailable" dusk="register">
             @lang('Login')
-        </x-rapidez-ct::button.accent>
+        </x-rapidez::button.primary>
     </fieldset>
 </checkout-login>
diff --git a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
index 33997d9..ab60c97 100644
--- a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
+++ b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
@@ -4,7 +4,7 @@
     dusk="agreements"
     required
 >
-    <label class="text-ct-neutral cursor-pointer text-sm underline" v-bind:for="agreement.checkbox_text">
+    <label class="cursor-pointer text-sm underline" v-bind:for="agreement.checkbox_text">
         @{{ agreement.checkbox_text }}
     </label>
 </x-rapidez-ct::input.checkbox>
diff --git a/resources/views/checkout/partials/sections/success/create-account-button.blade.php b/resources/views/checkout/partials/sections/success/create-account-button.blade.php
index 09dcdbc..3afdcf5 100644
--- a/resources/views/checkout/partials/sections/success/create-account-button.blade.php
+++ b/resources/views/checkout/partials/sections/success/create-account-button.blade.php
@@ -1,3 +1,3 @@
-<x-rapidez-ct::button.primary class="self-end justify-self-start" loader>
+<x-rapidez::button.primary class="self-end justify-self-start" loader>
     @lang('Create account')
-</x-rapidez-ct::button.primary>
\ No newline at end of file
+</x-rapidez::button.primary>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/success/create-account-title.blade.php b/resources/views/checkout/partials/sections/success/create-account-title.blade.php
index 04b997c..7d4f7f2 100644
--- a/resources/views/checkout/partials/sections/success/create-account-title.blade.php
+++ b/resources/views/checkout/partials/sections/success/create-account-title.blade.php
@@ -1,3 +1,3 @@
-<p class="text-base text-ct-inactive font-medium">
+<p class="text-base text-muted font-medium">
     @lang('Register account')
 </p>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/success/logged-in.blade.php b/resources/views/checkout/partials/sections/success/logged-in.blade.php
index bc6656b..7c311e7 100644
--- a/resources/views/checkout/partials/sections/success/logged-in.blade.php
+++ b/resources/views/checkout/partials/sections/success/logged-in.blade.php
@@ -1,6 +1,6 @@
 <x-rapidez-ct::title.lg>
     @lang('Already logged in')
 </x-rapidez-ct::title.lg>
-<x-rapidez-ct::button.primary class="mt-5" href="{{ route('account.overview') }}">
+<x-rapidez::button.primary class="mt-5" href="{{ route('account.overview') }}">
     @lang('Go to your account')
-</x-rapidez-ct::button.primary>
\ No newline at end of file
+</x-rapidez::button.primary>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/sections/success/order-completed-note.blade.php b/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
index 941159f..f9c4087 100644
--- a/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-completed-note.blade.php
@@ -1,4 +1,4 @@
-<p class="text-base text-ct-neutral font-medium">
+<p class="text-base font-medium">
     @lang('We will get to work for you right away')
 </p>
 <p class="mt-2 text-sm">
diff --git a/resources/views/checkout/partials/sections/success/order-info.blade.php b/resources/views/checkout/partials/sections/success/order-info.blade.php
index 656c99d..d04947b 100644
--- a/resources/views/checkout/partials/sections/success/order-info.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-info.blade.php
@@ -11,7 +11,7 @@
     </checkout-success-addresses>
     <div class="flex flex-1 border-t border-dashed justify-between pt-5 mt-6">
         <div class="flex-1">
-            <p class="text-ct-neutral text-base font-medium mb-2.5 pr-8">
+            <p class="text-base font-medium mb-2.5 pr-8">
                 @lang('Payment method')
             </p>
             <div class="flex flex-1 flex-wrap justify-between">
@@ -28,7 +28,7 @@
             </div>
         </div>
         <div class="flex-1">
-            <p class="text-ct-neutral text-base font-medium mb-2.5 pr-8">
+            <p class="text-base font-medium mb-2.5 pr-8">
                 @lang('Delivery method')
             </p>
             <div class="flex flex-1 flex-wrap justify-between">
diff --git a/resources/views/checkout/partials/sections/success/product-quantity.blade.php b/resources/views/checkout/partials/sections/success/product-quantity.blade.php
index be8df23..52fde0a 100644
--- a/resources/views/checkout/partials/sections/success/product-quantity.blade.php
+++ b/resources/views/checkout/partials/sections/success/product-quantity.blade.php
@@ -1,5 +1,5 @@
 <div class="flex items-center justify-between gap-10 font-medium max-md:flex-1 md:ml-auto">
-    <div class="h-12 w-16 border flex items-center rounded-md justify-center text-ct-neutral ring ring-ct-inactive-100 text-base">
+    <div class="h-12 w-16 border flex items-center rounded-md justify-center ring ring-ct-inactive-100 text-base">
         @{{ Math.round(item.quantity_ordered) }}
     </div>
 </div>
diff --git a/resources/views/checkout/partials/sections/success/products.blade.php b/resources/views/checkout/partials/sections/success/products.blade.php
index 4170c20..15ed1f6 100644
--- a/resources/views/checkout/partials/sections/success/products.blade.php
+++ b/resources/views/checkout/partials/sections/success/products.blade.php
@@ -1,5 +1,5 @@
 <div class="!pt-0">
-    <p class="text-base font-medium text-inactive mb-4">@lang('You ordered this'):</p>
+    <p class="text-base font-medium text-muted mb-4">@lang('You ordered this'):</p>
     <ul class="flex flex-col divide-y divide-dashed first:*:pt-0 last:*:pb-0">
         <li v-for="(item, productId, index) in order.items" class="flex py-5">
             <div class="flex w-full flex-wrap gap-y-3 gap-x-3 text-sm md:gap-x-6 lg:items-start">
@@ -16,10 +16,10 @@ class="max-h-24"
                 <div class="flex flex-1 flex-wrap justify-between gap-x-6 items-start">
                     <div class="flex-1">
                         <a class="font-medium" :href="item.url" dusk="cart-item-name">@{{ item.product_name }}</a>
-                        <div v-for="option in item.selected_options" class="text-inactive">
+                        <div v-for="option in item.selected_options" class="text-muted">
                             @{{ option.label }}: @{{ option.value }}
                         </div>
-                        <div v-for="option in item.entered_options" class="text-inactive">
+                        <div v-for="option in item.entered_options" class="text-muted">
                             @{{ option.label }}: @{{ option.value }}
                         </div>
                     </div>
diff --git a/resources/views/checkout/partials/sections/success/summary.blade.php b/resources/views/checkout/partials/sections/success/summary.blade.php
index 9a5f276..94240a9 100644
--- a/resources/views/checkout/partials/sections/success/summary.blade.php
+++ b/resources/views/checkout/partials/sections/success/summary.blade.php
@@ -1,34 +1,34 @@
 <div class="flex flex-col">
-    <span class="text-ct-inactive">@lang('Total products')</span>
+    <span class="text-muted">@lang('Total products')</span>
     <div v-for="(item, productId, index) in order.sales_order_items">
         <div class="flex w-full justify-between">
-            <dt class="flex gap-x-1 text-inactive">
-                <div class="text-ct-inactive">
-                    <span class="text-ct-neutral">@{{ Math.round(item.qty_ordered) }}x</span>
-                    @{{ item.name }}
+            <dt class="flex gap-x-1 text-muted">
+                <div>
+                    <span>@{{ Math.round(item.qty_ordered) }}x</span>
+                    <span class="text-muted">@{{ item.name }}</span>
                 </div>
             </dt>
-            <dd class="text-ct-neutral">@{{ item.base_price_incl_tax | price }}</dd>
+            <dd>@{{ item.base_price_incl_tax | price }}</dd>
         </div>
     </div>
 </div>
 
 <div class="flex flex-col !mt-0">
     <div v-if="order.tax_amount" class="flex justify-between order-first mt-2">
-        <dt class="text-inactive">@lang('Tax')</dt>
-        <dd class="font-medium text-ct-neutral">@{{ order.tax_amount | price }}</dd>
+        <dt class="text-muted">@lang('Tax')</dt>
+        <dd class="font-mediuml">@{{ order.tax_amount | price }}</dd>
     </div>
     <div v-if="order.shipping_amount" class="flex justify-between mt-2">
-        <dt class="text-inactive">@lang('Shipping')</dt>
-        <dd v-if="order.shipping_amount > 0" class="font-medium text-ct-neutral">
+        <dt class="text-muted">@lang('Shipping')</dt>
+        <dd v-if="order.shipping_amount > 0" class="font-medium">
             @{{ order.shipping_amount | price }}
         </dd>
-        <dd v-else class="font-medium text-ct-neutral">
+        <dd v-else class="font-medium">
             @lang('Free')
         </dd>
     </div>
     <div v-if="order.grand_total" class="flex items-center order-last justify-between border-t border-dashed pt-3 mt-4">
-        <dt class="text-base text-ct-neutral font-medium">@lang('Total price')</dt>
-        <dd class="font-bold text-xl text-ct-neutral">@{{ order.grand_total | price }}</dd>
+        <dt class="text-base font-medium">@lang('Total price')</dt>
+        <dd class="font-bold text-xl">@{{ order.grand_total | price }}</dd>
     </div>
 </div>
diff --git a/resources/views/checkout/partials/shipping-billing-fields.blade.php b/resources/views/checkout/partials/shipping-billing-fields.blade.php
index c313ab7..d514641 100644
--- a/resources/views/checkout/partials/shipping-billing-fields.blade.php
+++ b/resources/views/checkout/partials/shipping-billing-fields.blade.php
@@ -14,8 +14,8 @@
 
 @if ($type == 'billing')
     <div class="mt-5" v-if="!cart.is_virtual">
-        <x-rapidez-ct::input.checkbox v-model="variables.same_as_shipping">
+        <x-rapidez::input.checkbox v-model="variables.same_as_shipping">
             @lang('My billing and shipping address are the same')
-        </x-rapidez-ct::input.checkbox>
+        </x-rapidez::input.checkbox>
     </div>
 @endif
diff --git a/resources/views/checkout/partials/shipping/methods.blade.php b/resources/views/checkout/partials/shipping/methods.blade.php
index 586d053..4eb4ffc 100644
--- a/resources/views/checkout/partials/shipping/methods.blade.php
+++ b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -30,8 +30,8 @@ class="!py-4"
                 required
             >
                 <div class="flex flex-col md:w-3/5">
-                    <span class="text-ct-neutral font-medium text-base">@{{ method.carrier_title }}</span>
-                    <span class="text-ct-inactive text-sm">@{{ method.method_title }}</span>
+                    <span class="font-medium text-base">@{{ method.carrier_title }}</span>
+                    <span class="text-muted text-sm">@{{ method.method_title }}</span>
                 </div>
                 <div class="text-right text-sm font-medium shrink-0">
                     <img
diff --git a/resources/views/checkout/partials/sidebar/bottom-links.blade.php b/resources/views/checkout/partials/sidebar/bottom-links.blade.php
index ad0f481..8b9da42 100644
--- a/resources/views/checkout/partials/sidebar/bottom-links.blade.php
+++ b/resources/views/checkout/partials/sidebar/bottom-links.blade.php
@@ -1,5 +1,5 @@
-<div class="flex mt-auto pt-6 text-ct-inactive max-lg:bg-ct-primary-100 max-lg:-mx-5 max-lg:pb-6 max-lg:justify-center">
-    <ul class="text-xs flex flex-wrap gap-5 max-lg:justify-center">
+<div class="flex mt-auto pt-6 text-muted max-lg:bg-primary/10 pb-6 max-lg:justify-center">
+    <ul class="text-xs flex flex-wrap gap-x-5 gap-y-2 max-lg:justify-center hover:prose-a:underline max-lg:container">
         <li><a href="/" target="_blank">@lang('Terms and Conditions')</a></li>
         <li><a href="/" target="_blank">@lang('Privacy & security')</a></li>
         <li><a href="/" target="_blank">@lang('Disclaimer')</a></li>
diff --git a/resources/views/checkout/partials/sidebar/products.blade.php b/resources/views/checkout/partials/sidebar/products.blade.php
index dcd396b..1124a47 100644
--- a/resources/views/checkout/partials/sidebar/products.blade.php
+++ b/resources/views/checkout/partials/sidebar/products.blade.php
@@ -1,13 +1,15 @@
 <toggler>
-    <div slot-scope="{ toggle, isOpen }" class="*:pt-2.5 first:*:pt-0 mb-2.5 flex w-full flex-col gap-2.5 divide-y divide-dashed border-b border-dashed pb-2.5 bg-ct-primary-100">
+    <div slot-scope="{ toggle, isOpen }" class="*:pt-2.5 first:*:pt-0 mb-2.5 flex w-full flex-col gap-2.5 divide-y divide-dashed border-b border-dashed pb-2.5">
         <div v-for="(item, index) in cart.items" v-show="isOpen || index < 2" class="flex gap-3">
-            <img v-if="item.product.image" class="max-h-20 w-20 shrink-0 object-contain mix-blend-darken" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
+            <div class="bg-primary/10">
+                <img v-if="item.product.image" class="max-h-20 w-20 shrink-0 object-contain mix-blend-darken bg-white" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
+            </div>
             <div class="flex flex-col">
-                <span class="line-clamp-1 text-sm font-semibold text-ct-neutral">
+                <span class="line-clamp-1 text-sm font-semibold">
                     @{{ item.product.name }}
                 </span>
-                <div class="*:border-r last:*:border-r-0 last:*:pr-0 *:pr-2 flex flex-wrap gap-x-2 text-xs text-ct-inactive">
-                    <div class="*:border-r *:px-2 *:mb-2 *:leading-3 -mx-2 mt-2 flex flex-wrap text-xs text-inactive subpixel-antialiased">
+                <div class="*:border-r last:*:border-r-0 last:*:pr-0 *:pr-2 flex flex-wrap gap-x-2 text-xs text-muted">
+                    <div class="*:border-r *:px-2 *:mb-2 *:leading-3 -mx-2 mt-2 flex flex-wrap text-xs text-muted subpixel-antialiased">
                         <div v-for="option in item.configurable_options">
                             @{{ option.value_label }}
                         </div>
@@ -21,7 +23,7 @@
                 </div>
             </div>
         </div>
-        <button v-if="cart.items.length > 2" class="mt-2 flex items-center pb-1 gap-1 text-ct-inactive font-medium" @click="toggle">
+        <button v-if="cart.items.length > 2" class="flex items-center pb-1 gap-1 !border-t-0 !pt-0 hover:underline" @click="toggle">
             <template v-if="isOpen">
                 @lang('Show less products')
             </template>
diff --git a/resources/views/checkout/partials/sidebar/sidebar.blade.php b/resources/views/checkout/partials/sidebar/sidebar.blade.php
index 6d39bca..93021b5 100644
--- a/resources/views/checkout/partials/sidebar/sidebar.blade.php
+++ b/resources/views/checkout/partials/sidebar/sidebar.blade.php
@@ -8,7 +8,7 @@
 
 @include('rapidez-ct::cart.partials.sidebar.payment')
 @include('rapidez-ct::cart.partials.sidebar.usps')
-<div class="mt-5 flex flex-wrap justify-between border-y border-dashed py-5 empty:hidden">
+<div class="mt-5 flex flex-wrap justify-between border-y border-dashed py-5 empty:hidden *:w-full">
     @include('rapidez-ct::checkout.partials.sidebar.user-info')
 </div>
 @include('rapidez-ct::checkout.partials.sidebar.bottom-links')
diff --git a/resources/views/checkout/steps/credentials.blade.php b/resources/views/checkout/steps/credentials.blade.php
index afd3c1d..e119fd6 100644
--- a/resources/views/checkout/steps/credentials.blade.php
+++ b/resources/views/checkout/steps/credentials.blade.php
@@ -7,7 +7,7 @@
     <x-rapidez-ct::card.inactive>
         @include('rapidez-ct::checkout.partials.sections.address')
     </x-rapidez-ct::card.inactive>
-    <x-rapidez-ct::card.inactive class="[&_label]:ring-ct-inactive-100 [&_label]:ring">
+    <x-rapidez-ct::card.inactive class="[&_label]:ring-background [&_label]:ring">
         @include('rapidez-ct::checkout.partials.sections.newsletter')
     </x-rapidez-ct::card.inactive>
     <x-rapidez-ct::card.inactive>
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index 919b2da..7741395 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -7,7 +7,7 @@
             </x-rapidez-ct::title>
 
             <x-rapidez-ct::sections>
-                <x-rapidez-ct::card.inactive class="!bg-ct-primary-100 py-8 px-6 rounded-xl border-b border-black/5">
+                <x-rapidez-ct::card.inactive class="!bg-primary/10 py-8 px-6 rounded-xl border-b border-black/5">
                     @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
                 </x-rapidez-ct::card.inactive>
             </x-rapidez-ct::sections>
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index 5eb4047..dfe45eb 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -40,14 +40,16 @@ class="col-span-full sm:col-span-3"
             :placeholder="__('Telephone')"
         />
     @endif
-    <x-rapidez-ct::input.country-select
-        class="col-span-full sm:col-span-3"
-        name="{{ $type }}_country"
-        label="{{ __('Country') }}"
-        v-model="{{ $address }}.{{ $countryKey }}"
-        required
-        :placeholder="__('Country')"
-    />
+
+    <label class="col-span-full sm:col-span-3">
+        <x-rapidez-ct::input.select.country
+            :label="__('Country')"
+            v-model="{{ $address }}.{{ $countryKey }}"
+            required
+            :placeholder="__('Country')"
+            name="{{ $type }}_country"
+        />
+    </label>
     <x-rapidez-ct::input
         class="col-span-full sm:col-span-2"
         name="{{ $type }}_postcode"
diff --git a/resources/views/components/address.blade.php b/resources/views/components/address.blade.php
index 9f61ff8..854fa95 100644
--- a/resources/views/components/address.blade.php
+++ b/resources/views/components/address.blade.php
@@ -10,8 +10,8 @@
         <template v-if="!isEmpty">
             @if ($check)
                 <template v-if="{{ $check }}">
-                    <div class="bg-ct-primary absolute inset-y-0 left-0 w-1 rounded-l-xl"></div>
-                    <x-heroicon-s-check class="text-ct-primary absolute right-5 top-7 w-5" />
+                    <div class="bg-primary absolute inset-y-0 left-0 w-1 rounded-l-xl"></div>
+                    <x-heroicon-s-check class="text-primary absolute right-5 top-7 w-5" />
                 </template>
             @endif
             <p class="text-base font-medium mb-2.5 pr-8">
diff --git a/resources/views/components/button/inactive.blade.php b/resources/views/components/button/inactive.blade.php
index 6f657f3..c08a115 100644
--- a/resources/views/components/button/inactive.blade.php
+++ b/resources/views/components/button/inactive.blade.php
@@ -1,3 +1,3 @@
-<x-rapidez-ct::button {{ $attributes->merge(['class' => 'flex items-center gap-x-4 bg-ct-inactive-100 text-sm font-medium text-ct-inactive border-b rounded-md']) }}>
+<x-rapidez::button {{ $attributes->merge(['class' => 'flex items-center gap-x-4 bg-ct-inactive-100 text-sm font-medium text-muted border-b rounded-md']) }}>
     {{ $slot }}
-</x-rapidez-ct::button>
+</x-rapidez::button>
diff --git a/resources/views/components/button/primary.blade.php b/resources/views/components/button/primary.blade.php
index 590b713..db65539 100644
--- a/resources/views/components/button/primary.blade.php
+++ b/resources/views/components/button/primary.blade.php
@@ -1,3 +1,3 @@
-<x-rapidez-ct::button {{ $attributes->merge(['class' => 'rounded-full border-b border-b-primary/20 bg-ct-primary font-medium text-white']) }}>
+<x-rapidez::button {{ $attributes->merge(['class' => 'rounded-full border-b border-b-primary/20 bg-primary font-medium text-white']) }}>
     {{ $slot }}
-</x-rapidez-ct::button>
+</x-rapidez::button>
diff --git a/resources/views/components/card/white.blade.php b/resources/views/components/card/white.blade.php
index ace29d0..d9df83d 100644
--- a/resources/views/components/card/white.blade.php
+++ b/resources/views/components/card/white.blade.php
@@ -2,8 +2,8 @@
 <div {{ $attributes->class('relative flex-1 rounded-md border bg-white px-5 py-6 overflow-hidden ring ring-ct-inactive-100') }}>
     @if ($check)
         <template v-if="{{ $check }}">
-            <x-heroicon-o-check class="absolute right-7 top-7 w-5 text-ct-accent" stroke-width="2.5" />
-            <div class="w-1 bg-ct-accent absolute left-0 inset-y-0"></div>
+            <x-heroicon-o-check class="absolute right-7 top-7 w-5 text-primary" stroke-width="2.5" />
+            <div class="w-1 bg-primary absolute left-0 inset-y-0"></div>
         </template>
     @endif
     {{ $slot }}
diff --git a/resources/views/components/coupon-field.blade.php b/resources/views/components/coupon-field.blade.php
index c597ae9..ba04182 100644
--- a/resources/views/components/coupon-field.blade.php
+++ b/resources/views/components/coupon-field.blade.php
@@ -18,8 +18,8 @@ class="flex-1 max-md:w-full"
             v-bind:disabled="$root.loading"
             required
         />
-        <x-rapidez-ct::button.outline type="submit" class="w-full self-center">
+        <x-rapidez::button.outline type="submit" class="w-full self-center">
             @lang('Apply')
-        </x-rapidez-ct::button.outline>
+        </x-rapidez::button.outline>
     </form>
 </graphql-mutation>
diff --git a/resources/views/components/input/checkbox.blade.php b/resources/views/components/input/checkbox.blade.php
index 2fa7c60..c5e6eda 100644
--- a/resources/views/components/input/checkbox.blade.php
+++ b/resources/views/components/input/checkbox.blade.php
@@ -1,7 +1,7 @@
 @props(['name' => '', 'id' => uniqid('checkbox-')])
-<label for="{{ $id }}" {{ $attributes->only('class')->class('text-ct-inactive relative flex items-center cursor-pointer select-none flex-wrap gap-x-3 text-sm [&>span]:flex-1') }}>
+<label for="{{ $id }}" {{ $attributes->only('class')->class('text-muted relative flex items-center cursor-pointer select-none flex-wrap gap-x-3 text-sm [&>span]:flex-1') }}>
     <input
-        class="text-ct-neutral peer h-6 w-6 cursor-pointer rounded-md border-ct-border transition focus:outline-none focus:ring-0 focus:ring-offset-0"
+        class="peer h-6 w-6 cursor-pointer rounded-md border-ct-border transition focus:outline-none focus:ring-0 focus:ring-offset-0 text"
         id="{{ $id }}"
         name="{{ $name }}"
         type="checkbox"
diff --git a/resources/views/components/input/index.blade.php b/resources/views/components/input/index.blade.php
deleted file mode 100644
index beeeb2b..0000000
--- a/resources/views/components/input/index.blade.php
+++ /dev/null
@@ -1,17 +0,0 @@
-@props(['label' => false])
-<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'v-cloak', 'class'])->merge(['class' => 'relative flex flex-col gap-y-1.5 sm:gap-y-2 text-sm']) }}>
-    <input {{ $attributes->merge([
-        'id' => $attributes->get('name'),
-        'placeholder' => $attributes->get('placeholder'),
-        'type' => 'text',
-        'dusk' => $attributes->get('v-bind:dusk') ? null : $attributes->get('name'),
-        'class' => 'rounded-md peer border border-ct-border !bg-white pt-7 pb-2.5 px-5 text-sm outline-none !ring !ring-ct-inactive-100 transition-all placeholder-transparent focus:border-ct-border disabled:bg-ct-disabled disabled:text-ct-inactive [&:input:-internal-autofill-selected]:bg-white font-medium disabled:pr-12 [&:user-invalid]:bg-ct-error-100 [&:user-invalid]:border-ct-error-110 appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-    ]) }}>
-    @if ($label)
-        <x-rapidez-ct::input.label :required="$attributes->get('required')" class="pointer-events-none transition-all absolute left-5 top-1/2 text-xs -translate-y-5 peer-focus:text-xs peer-focus:-translate-y-5 peer-placeholder-shown:text-sm peer-placeholder-shown:-translate-y-1/2 peer-[&:user-invalid]:text-ct-error">
-            @lang($label)
-        </x-rapidez-ct::input.label>
-    @endif
-    {{ $slot }}
-    <x-heroicon-o-lock-closed class="absolute text-ct-inactive right-5 top-1/2 -translate-y-1/2 hidden h-4 peer-disabled:block" />
-</label>
diff --git a/resources/views/components/input/input.blade.php b/resources/views/components/input/input.blade.php
new file mode 100644
index 0000000..9d4e3b1
--- /dev/null
+++ b/resources/views/components/input/input.blade.php
@@ -0,0 +1,16 @@
+@props(['label' => false])
+<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'v-cloak', 'class'])->merge(['class' => 'block relative group']) }}>
+    <input {{ $attributes->merge([
+        'id' => $attributes->get('name'),
+        'placeholder' => $attributes->get('placeholder'),
+        'type' => 'text',
+        'dusk' => $attributes->get('v-bind:dusk') ? null : $attributes->get('name'),
+        'class' => 'w-full rounded-md peer border border-default !bg-white pt-7 pb-2.5 px-5 text-sm outline-none !ring !ring-background transition-all placeholder-transparent focus:border-emphasis focus:!ring-background-emphasis disabled:bg-emphasis disabled:text-muted [&:input:-internal-autofill-selected]:bg-white font-medium disabled:pr-12 [&:user-invalid]:border-red-300 appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+    ]) }}>
+    @if ($label)
+        <x-rapidez::label :required="$attributes->get('required')" class="pointer-events-none mt-0.5 transition-all absolute left-5 top-7 text-xs -translate-y-5 peer-focus:text-xs peer-focus:-translate-y-5 peer-placeholder-shown:text-sm peer-placeholder-shown:-translate-y-1/2 peer-[&:user-invalid]:text-red-500 group-has-[:required]:after:content-['*']">
+            @lang($label)
+        </x-rapidez::label>
+    @endif
+    {{ $slot }}
+</label>
diff --git a/resources/views/components/input/label.blade.php b/resources/views/components/input/label.blade.php
index 929f147..7806732 100644
--- a/resources/views/components/input/label.blade.php
+++ b/resources/views/components/input/label.blade.php
@@ -1,5 +1,5 @@
 @props(['required' => false])
-<span {{ $attributes->class('text-ct-inactive text-sm') }}>
+<span {{ $attributes->class('text-muted text-sm') }}>
     {{ $slot }}
     @if ($required)
         <span>*</span>
diff --git a/resources/views/components/input/password/password.blade.php b/resources/views/components/input/password/password.blade.php
new file mode 100644
index 0000000..cd53ca6
--- /dev/null
+++ b/resources/views/components/input/password/password.blade.php
@@ -0,0 +1,20 @@
+<div>
+    <toggler>
+        <div class="relative" slot-scope="{ isOpen, toggle }">
+            <x-rapidez-ct::input
+                :label="__('Password')"
+                type="password"
+                v-bind:type="isOpen ? 'text' : 'password'"
+                {{ $attributes }}
+            />
+
+            
+            @if (!$attributes['disabled'] ?? false)
+                <div v-on:click="toggle" class="absolute right-5 top-1/2 -translate-y-1/2 cursor-pointer">
+                    <x-heroicon-o-eye-slash v-if="isOpen" class="h-5"/>
+                    <x-heroicon-o-eye v-else class="h-5" v-cloak/>
+                </div>
+            @endif
+        </div>
+    </toggler>
+</div>
\ No newline at end of file
diff --git a/resources/views/components/input/radio.blade.php b/resources/views/components/input/radio.blade.php
index e2e5e2a..da961b5 100644
--- a/resources/views/components/input/radio.blade.php
+++ b/resources/views/components/input/radio.blade.php
@@ -1,7 +1,7 @@
-<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded-md px-5 md:px-7 py-4 text-ct-neutral ring !ring-ct-inactive-100') }}>
+<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded-md px-5 md:px-7 py-4 ring !ring-background') }}>
     <span class="flex aspect-square h-6 w-6 items-center justify-center rounded-full border bg-white">
-        <input type="radio" {{ $attributes->except('class') }} class="peer h-3 w-3 border-none text-ct-primary transition checked:bg-none focus:ring-0 focus:ring-offset-0" />
-        <span class="overflow-hidden rounded-md -z-10 absolute inset-0 bg-ct-inactive-100 peer-checked:border-y peer-checked:border-r peer-checked:bg-white before:absolute before:-inset-y-px before:w-1 before:rounded-l before:bg-ct-primary before:opacity-0 before:transition-all before:peer-checked:opacity-100"></span>
+        <input type="radio" {{ $attributes->except('class') }} class="peer h-3 w-3 border-none text-primary transition checked:bg-none focus:ring-0 focus:ring-offset-0" />
+        <span class="overflow-hidden rounded-md -z-10 absolute inset-0 bg-ct-inactive-100 peer-checked:border-y peer-checked:border-r peer-checked:bg-white before:absolute before:-inset-y-px before:w-1 before:rounded-l before:bg-primary before:opacity-0 before:transition-all before:peer-checked:opacity-100"></span>
     </span>
     @isset($slot)
         <span class="flex w-full items-center justify-between gap-x-3">
diff --git a/resources/views/components/input/select.blade.php b/resources/views/components/input/select.blade.php
deleted file mode 100644
index 2c3b10b..0000000
--- a/resources/views/components/input/select.blade.php
+++ /dev/null
@@ -1,15 +0,0 @@
-@props(['label' => false])
-<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'class'])->class('relative flex flex-col gap-y-1.5 md:gap-y-2 text-sm line-clamp-1 rounded-md ring !ring-ct-inactive-100') }}>
-    <select {{ $attributes
-        ->except(['v-if', 'v-else', 'v-else-if', 'class'])
-        ->class('cursor-pointer border-ct-border bg-white pt-7 pb-2.5 px-5 text-sm font-medium focus:border-ct-border rounded-md border bg-white outline-none transition-all disabled:bg-ct-inactive-100') }}>
-        @isset($slot)
-            {{ $slot }}
-        @endisset
-    </select>
-    @if ($label)
-        <x-rapidez-ct::input.label :required="$attributes->get('required')" class="pointer-events-none transition-all absolute left-5 top-1/2 text-xs -translate-y-5">
-            @lang($label)
-        </x-rapidez-ct::input.label>
-    @endif
-</label>
diff --git a/resources/views/components/input/select/country.blade.php b/resources/views/components/input/select/country.blade.php
new file mode 100644
index 0000000..f6f5562
--- /dev/null
+++ b/resources/views/components/input/select/country.blade.php
@@ -0,0 +1,9 @@
+<graphql query="{ countries { two_letter_abbreviation full_name_locale } }" cache="countries">
+    <div v-if="data" slot-scope="{ data }">
+        <x-rapidez-ct::input.select :label="__('Country')">
+            <option v-for="country in data.countries" :value="country.two_letter_abbreviation.toUpperCase()">
+                @{{ country.full_name_locale }}
+            </option>
+        </x-rapidez-ct::input.select>
+    </div>
+</graphql>
\ No newline at end of file
diff --git a/resources/views/components/input/select/select.blade.php b/resources/views/components/input/select/select.blade.php
new file mode 100644
index 0000000..2ace521
--- /dev/null
+++ b/resources/views/components/input/select/select.blade.php
@@ -0,0 +1,15 @@
+@props(['label' => false])
+<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'class'])->class('relative block') }}>
+    <select {{ $attributes
+        ->except(['v-if', 'v-else', 'v-else-if', 'class'])
+        ->class('w-full cursor-pointer border border-default focus:border-emphasis bg-white pt-7 pb-2.5 px-5 text-sm font-medium rounded-m bg-white outline-none transition-all disabled:bg-emphasis !ring !ring-background focus:!ring-background-emphasis rounded-md') }}>
+        @isset($slot)
+            {{ $slot }}
+        @endisset
+    </select>
+    @if ($label)
+        <x-rapidez::label :required="$attributes->get('required')" class="pointer-events-none transition-all absolute left-5 top-1/2 text-xs -translate-y-5">
+            @lang($label)
+        </x-rapidez::label>
+    @endif
+</label>
\ No newline at end of file
diff --git a/resources/views/components/layout/checkout.blade.php b/resources/views/components/layout/checkout.blade.php
index 170ba4a..f3c3004 100644
--- a/resources/views/components/layout/checkout.blade.php
+++ b/resources/views/components/layout/checkout.blade.php
@@ -1,16 +1,16 @@
 @slots(['header', 'sidebar'])
-<div class="fixed -top-px h-1.5 inset-x-0 w-full bg-ct-primary z-20"></div>
-<div {{ $attributes->class('text-ct-neutral flex flex-wrap gap-x-20 text-sm max-lg:flex-col') }}>
-    <div class="flex flex-wrap max-xl:flex-col flex-1 max-lg:mb-10 max-lg:pt-6">
+<div class="fixed -top-px h-1.5 inset-x-0 w-full bg-primary z-20"></div>
+<div {{ $attributes->class('flex flex-wrap gap-x-20 text-sm max-lg:flex-col') }}>
+    <div class="flex flex-wrap max-xl:flex-col flex-1 max-lg:mb-10 max-lg:pt-6 max-lg:container">
         {{ $header }}
-        <div class="flex-1 pt-6 lg:pt-12 lg:pb-28">
+        <div class="flex-1 pt-6 lg:pt-3 xl:pt-12 lg:pb-28">
             {{ $slot }}
         </div>
     </div>
-    <x-rapidez-ct::layout.sidebar class="sticky top-0 flex flex-col justify-start pt-10 max-lg:hidden lg:ml-20 lg:h-screen xl:pt-12">
-        <div class="absolute -left-20 inset-y-0 bg-ct-primary-100 w-screen"></div>
-        <div class="overflow-y-auto overflow-x-hidden flex flex-1 scrollbar-hide">
-            <div class="flex flex-1 lg:pb-6">
+    <x-rapidez-ct::layout.sidebar class="sticky top-0 flex flex-col justify-start max-lg:hidden lg:ml-20 lg:h-screen !space-y-0">
+        <div class="absolute -left-20 inset-y-0 bg-primary/10 w-screen"></div>
+        <div class="overflow-y-auto overflow-x-hidden flex flex-1 scrollbar-hide lg:pt-20 xl:pt-10">
+            <div class="flex flex-1">
                 <div class="sticky flex flex-col flex-1 top-12">
                     {{ $sidebar }}
                 </div>
diff --git a/resources/views/components/layout/index.blade.php b/resources/views/components/layout/index.blade.php
index d77fbe6..9980507 100644
--- a/resources/views/components/layout/index.blade.php
+++ b/resources/views/components/layout/index.blade.php
@@ -1,6 +1,6 @@
 @slots(['header', 'sidebar'])
 
-<div {{ $attributes->class('text-ct-neutral flex flex-wrap gap-x-20 text-sm max-lg:flex-col xl:gap-x-28') }}>
+<div {{ $attributes->class('flex flex-wrap gap-x-20 text-sm max-lg:flex-col xl:gap-x-28') }}>
     <div class="flex flex-wrap max-xl:flex-col flex-1">
         {{ $header }}
         <div class="flex-1">
diff --git a/resources/views/components/product/partials/name.blade.php b/resources/views/components/product/partials/name.blade.php
index be63c4b..6434b00 100644
--- a/resources/views/components/product/partials/name.blade.php
+++ b/resources/views/components/product/partials/name.blade.php
@@ -2,7 +2,7 @@
     <a class="hover:underline" :href="item.product.url_key + item.product.url_suffix | url">
         <div class="font-semibold text-sm" dusk="cart-item-name">@{{ item.product.name }}</div>
     </a>
-    <div class="flex flex-wrap *:border-r -mx-2 *:px-2 text-inactive text-xs subpixel-antialiased mt-2 *:mb-2 *:leading-3">
+    <div class="flex flex-wrap *:border-r -mx-2 *:px-2 text-muted text-xs subpixel-antialiased mt-2 *:mb-2 *:leading-3">
         <div v-for="option in item.configurable_options">
                 @{{ option.value_label }}
             </div>
diff --git a/resources/views/components/product/partials/price.blade.php b/resources/views/components/product/partials/price.blade.php
index 8f0842f..2a15681 100644
--- a/resources/views/components/product/partials/price.blade.php
+++ b/resources/views/components/product/partials/price.blade.php
@@ -1,3 +1,3 @@
-<div class="text-right text-base text-ct-neutral font-bold">
+<div class="text-right text-base font-bold">
     @{{ item.prices.row_total_including_tax.value | price }}
 </div>
diff --git a/resources/views/components/progress-bar/index.blade.php b/resources/views/components/progress-bar/index.blade.php
index f2c3ac1..fbf3c1c 100644
--- a/resources/views/components/progress-bar/index.blade.php
+++ b/resources/views/components/progress-bar/index.blade.php
@@ -1,6 +1,6 @@
 @aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
 <div class="flex items-center space-x-3.5 md:space-x-4 text-xs" v-cloak>
-    <span class="whitespace-nowrap font-medium text-ct-inactive">
+    <span class="whitespace-nowrap font-medium text-muted">
         @lang('Step :step / :total', [
             'step' => $currentStepKey + 1,
             'total' => count($checkoutSteps),
@@ -10,9 +10,9 @@
         <a
             href="{{ route('checkout', $checkoutStep) }}"
             @class([
-                'bg-ct-accent aspect-square w-3 rounded',
-                '!bg-ct-disabled pointer-events-none' => $currentStepKey < $checkoutStepKey,
-                'outline-4 outline outline-ct-accent/20' => $checkoutStepKey === $currentStepKey
+                'bg-primary aspect-square w-3 rounded',
+                '!bg-emphasis pointer-events-none' => $currentStepKey < $checkoutStepKey,
+                'outline-4 outline outline-primary/20' => $checkoutStepKey === $currentStepKey
             ])
         ></a>
     @endforeach
diff --git a/resources/views/components/separated-listing/index.blade.php b/resources/views/components/separated-listing/index.blade.php
index f37b781..e407694 100644
--- a/resources/views/components/separated-listing/index.blade.php
+++ b/resources/views/components/separated-listing/index.blade.php
@@ -1,4 +1,4 @@
 @props(['tag' => 'ul'])
-<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm text-ct-inactive *:py-1 first-child:*:pt-0 last-child:*:py-3 *:flex *:flex-wrap *:justify-between') }}>
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm *:py-1 first-child:*:pt-0 last:*:py-3 *:flex *:flex-wrap *:justify-between') }}>
     {{ $slot }}
 </x-rapidez::tag>
diff --git a/resources/views/components/slide-in/index.blade.php b/resources/views/components/slide-in/index.blade.php
index c6826dd..b83971f 100644
--- a/resources/views/components/slide-in/index.blade.php
+++ b/resources/views/components/slide-in/index.blade.php
@@ -4,15 +4,17 @@
             <input v-if="_self" v-model="_self.isOpen" id="slide-in" type="checkbox" class="hidden peer" />
             <div
                 ref="target"
-                class="!touch-none absolute top-1.5 inset-x-0 bg-ct-primary-100 z-30 rounded-b-xl px-5 pt-6 pb-12 overflow-y-auto scrollbar-hide opacity-0 -translate-y-full peer-checked:opacity-100 peer-checked:translate-y-0"
+                class="!touch-none absolute top-1.5 inset-x-0 bg-white z-30 rounded-b-xl opacity-0 -translate-y-full peer-checked:opacity-100 peer-checked:translate-y-0"
                 :class="{ 'transition-all duration-500': !isSwiping }"
                 :style="{ top }"
             >
-                @isset($slot)
-                    {{ $slot }}
-                @endisset
+                <div class="px-5 pt-6 pb-12 overflow-y-auto scrollbar-hide bg-primary/10">
+                    @isset($slot)
+                        {{ $slot }}
+                    @endisset
+                </div>
             </div>
-            <label for="slide-in" class="absolute z-20 inset-x-0 bottom-0 top-1.5 bg-ct-neutral/30 transition-all duration-500 opacity-0 pointer-events-none peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
+            <label for="slide-in" class="absolute z-20 inset-x-0 bottom-0 top-1.5 bg-overlay/60 transition-all duration-500 opacity-0 pointer-events-none peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
         </div>
     </template>
 </slide-in>
diff --git a/resources/views/components/slide-in/receipt.blade.php b/resources/views/components/slide-in/receipt.blade.php
index 37e053f..b5c0f22 100644
--- a/resources/views/components/slide-in/receipt.blade.php
+++ b/resources/views/components/slide-in/receipt.blade.php
@@ -1,15 +1,15 @@
 <x-rapidez-ct::slide-in>
     <label
         for="slide-in"
-        class="absolute z-10 w-7 h-7 right-3 top-5 peer-checked:text-ct-primary"
+        class="absolute z-10 w-7 h-7 right-3 top-5 peer-checked:text-primary"
     >
-        <x-heroicon-o-x-mark class="text-ct-inactive w-7 h-7" />
+        <x-heroicon-o-x-mark class="text-muted w-7 h-7" />
     </label>
-    <x-rapidez-ct::title class="uppercase mb-4">
+    <x-rapidez-ct::title class="mb-4">
         @lang('Overview')
     </x-rapidez-ct::title>
     <x-rapidez-ct::summary />
     @include('rapidez-ct::cart.partials.sidebar.payment')
     @include('rapidez-ct::cart.partials.sidebar.usps')
-    <x-rapidez-ct::slide-in.partials.drawer-border class="bg-ct-primary/10 bottom-2 inset-x-0"/>
+    <x-rapidez-ct::slide-in.partials.drawer-border class="bg-primary/20 bottom-2 inset-x-0"/>
 </x-rapidez-ct::slide-in>
\ No newline at end of file
diff --git a/resources/views/components/slideover.blade.php b/resources/views/components/slideover.blade.php
index 06f07c8..cbefb35 100644
--- a/resources/views/components/slideover.blade.php
+++ b/resources/views/components/slideover.blade.php
@@ -1,8 +1,8 @@
 @props(['id', 'title' => ''])
 <input type="checkbox" v-bind:id="{{ $id }}" class="peer hidden"/>
-<label v-bind:for="{{ $id }}" class="pointer-events-none fixed inset-0 z-50 cursor-pointer bg-ct-neutral/30 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
+<label v-bind:for="{{ $id }}" class="pointer-events-none fixed inset-0 z-50 cursor-pointer bg-overlay/30 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
 <div class="pointer-events-none fixed inset-y-0 -right-full z-50 flex w-full max-w-md flex-col bg-white transition-[right] duration-300 peer-checked:pointer-events-auto peer-checked:right-0">
-    <div class="flex w-full items-center justify-center bg-ct-primary py-4 px-5 text-lg font-bold text-white">
+    <div class="flex w-full items-center justify-center bg-primary py-4 px-5 text-lg font-bold text-white">
         <div>{{ $title }}</div>
         <label v-bind:for="{{ $id }}" class="absolute right-5 cursor-pointer">
             <x-heroicon-o-x-mark class="h-6" />
diff --git a/resources/views/components/summary.blade.php b/resources/views/components/summary.blade.php
index aa45118..0ac82a6 100644
--- a/resources/views/components/summary.blade.php
+++ b/resources/views/components/summary.blade.php
@@ -6,28 +6,28 @@
                 @lang('Total products')
                 (<span v-text="Math.round({{ $type }}.items.length)"></span>)
             </span>
-            <div class="font-medium text-ct-neutral text-base" v-text="$options.filters.price({{ $type }}.prices?.subtotal_including_tax?.value ?? {{ $type }}.total?.subtotal?.value)"></div>
+            <div class="font-medium text-base" v-text="$options.filters.price({{ $type }}.prices?.subtotal_including_tax?.value ?? {{ $type }}.total?.subtotal?.value)"></div>
         </div>
     </li>
     <li v-if="{{ $type }}.tax > 0">
         <div>@lang('Tax')</div>
-        <div class="font-medium text-ct-neutral" v-text="$options.filters.price({{ $type }}.prices.applied_taxes[0].amount.value)"></div>
+        <div class="font-medium" v-text="$options.filters.price({{ $type }}.prices.applied_taxes[0].amount.value)"></div>
     </li>
     <li v-for="discount in {{ $type }}?.prices?.discounts">
         <div>@{{ discount.label }}</div>
-        <div class="text-ct-primary font-medium">@{{ discount.amount.value | price }}</div>
+        <div class="text-green-700 font-semibold">@{{ discount.amount.value | price }}</div>
     </li>
     <li v-if="{{ $type }}?.shipping_method">
         <div>@lang('Shipping')</div>
-        <div v-if="{{ $type }}?.total?.total_shipping.value > 0 || {{ $type }}?.shipping_addresses[0]?.selected_shipping_method?.amount?.value > 0" class="font-medium text-ct-neutral">
+        <div v-if="{{ $type }}?.total?.total_shipping.value > 0 || {{ $type }}?.shipping_addresses[0]?.selected_shipping_method?.amount?.value > 0" class="font-medium">
             <span v-text="$options.filters.price({{ $type }}?.total?.total_shipping?.value ?? {{ $type }}?.shipping_addresses[0]?.selected_shipping_method?.amount?.value)"></span>
         </div>
-        <div v-else class="font-medium text-ct-neutral">
+        <div v-else class="font-medium">
             @lang('Free')
         </div>
     </li>
-    <li class="border-t border-dashed mt-2.5">
-        <div class="text-base text-ct-neutral">@lang('Total price')</div>
-        <div class="font-semibold text-lg text-ct-neutral" v-text="$options.filters.price({{ $type }}?.prices?.grand_total?.value || {{ $type }}?.total?.grand_total?.value)"></div>
+    <li class="border-t border-dashed mt-2.5 flex items-center">
+        <div class="font-semibold text-base">@lang('Total price')</div>
+        <div class="font-semibold text-lg" v-text="$options.filters.price({{ $type }}?.prices?.grand_total?.value || {{ $type }}?.total?.grand_total?.value)"></div>
     </li>
 </x-rapidez-ct::separated-listing>

From 77391bd329e960d0e93c76bfb6c07f59d99d2494 Mon Sep 17 00:00:00 2001
From: Jordy de Vulder <jordy@justbetter.nl>
Date: Tue, 17 Dec 2024 17:12:21 +0100
Subject: [PATCH 02/11] V3 colors implementation and various tweaks

---
 resources/views/cart/cart.blade.php           |  2 +-
 .../checkout/pages/credentials.blade.php      |  2 +-
 .../views/checkout/pages/payment.blade.php    |  8 ++---
 .../partials/address-cards-popup.blade.php    |  2 +-
 .../partials/buttons/new-address.blade.php    |  2 +-
 .../success/product-quantity.blade.php        |  2 +-
 .../partials/shipping/methods.blade.php       | 36 +++++++++----------
 .../checkout/steps/credentials.blade.php      |  2 +-
 .../views/checkout/steps/success.blade.php    |  2 +-
 .../views/components/address-form.blade.php   |  6 +++-
 .../components/button/inactive.blade.php      |  2 +-
 .../views/components/card/white.blade.php     |  2 +-
 .../views/components/coupon-field.blade.php   |  2 +-
 .../input/{ => checkbox}/checkbox.blade.php   |  2 +-
 .../components/input/checkbox/tile.blade.php  | 13 +++++++
 .../views/components/input/radio.blade.php    | 11 ------
 .../components/input/radio/radio.blade.php    |  9 +++++
 .../components/input/radio/tile.blade.php     | 13 +++++++
 .../components/layout/checkout.blade.php      |  2 +-
 .../newsletter/partials/input.blade.php       | 29 +++++++++++++++
 .../separated-listing/index.blade.php         |  2 +-
 .../views/components/slide-in/index.blade.php |  2 +-
 .../views/components/slideover.blade.php      |  2 +-
 .../components/title-progress-bar.blade.php   |  2 +-
 resources/views/components/toolbar.blade.php  |  3 ++
 25 files changed, 109 insertions(+), 51 deletions(-)
 rename resources/views/components/input/{ => checkbox}/checkbox.blade.php (76%)
 create mode 100644 resources/views/components/input/checkbox/tile.blade.php
 delete mode 100644 resources/views/components/input/radio.blade.php
 create mode 100644 resources/views/components/input/radio/radio.blade.php
 create mode 100644 resources/views/components/input/radio/tile.blade.php
 create mode 100644 resources/views/components/newsletter/partials/input.blade.php
 create mode 100644 resources/views/components/toolbar.blade.php

diff --git a/resources/views/cart/cart.blade.php b/resources/views/cart/cart.blade.php
index 2c27b04..e14eec8 100644
--- a/resources/views/cart/cart.blade.php
+++ b/resources/views/cart/cart.blade.php
@@ -3,7 +3,7 @@
 </x-rapidez-ct::sections>
 
 <x-rapidez-ct::toolbar>
-    <x-rapidez::button.outline href="/" class="max-lg:hidden">
+    <x-rapidez::button.outline href="/" class="max-lg:hidden !flex-none">
         @lang('Continue shopping')
     </x-rapidez::button.outline>
 </x-rapidez-ct::toolbar>
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
index ead77ba..af5a1c5 100644
--- a/resources/views/checkout/pages/credentials.blade.php
+++ b/resources/views/checkout/pages/credentials.blade.php
@@ -27,7 +27,7 @@ class="contents"
                 >
                     @include('rapidez-ct::checkout.steps.credentials')
                     <x-rapidez-ct::toolbar>
-                        <x-rapidez::button.outline :href="route('cart')" class="grid-span-1">
+                        <x-rapidez::button.outline :href="route('cart')">
                             @lang('Back to cart')
                         </x-rapidez::button.outline>
 
diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
index 5ea0439..6a80896 100644
--- a/resources/views/checkout/pages/payment.blade.php
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -40,11 +40,9 @@ class="contents"
                             redirect="{{ route('checkout.success') }}"
                             v-slot="{ mutate, variables }"
                         >
-                            <fieldset>
-                                <x-rapidez::button.conversion class="relative" type="submit" dusk="continue" loader>
-                                    @lang('Place order')
-                                </x-rapidez::button.conversion>
-                            </fieldset>
+                            <x-rapidez::button.conversion class="relative" type="submit" dusk="continue" loader>
+                                @lang('Place order')
+                            </x-rapidez::button.conversion>
                         </graphql-mutation>
                     </x-rapidez-ct::toolbar>
                 </form>
diff --git a/resources/views/checkout/partials/address-cards-popup.blade.php b/resources/views/checkout/partials/address-cards-popup.blade.php
index 5d5ce39..75e1c58 100644
--- a/resources/views/checkout/partials/address-cards-popup.blade.php
+++ b/resources/views/checkout/partials/address-cards-popup.blade.php
@@ -9,5 +9,5 @@
             @include('rapidez-ct::checkout.partials.address-card')
         </x-rapidez-ct::card.inactive>
     </x-rapidez-ct::sections>
-    <label class="absolute cursor-pointer inset-0 bg-ct-neutral/60" for="popup"></label>
+    <label class="absolute cursor-pointer inset-0 bg-black/60" for="popup"></label>
 </div>
diff --git a/resources/views/checkout/partials/buttons/new-address.blade.php b/resources/views/checkout/partials/buttons/new-address.blade.php
index a73f145..6b17a3b 100644
--- a/resources/views/checkout/partials/buttons/new-address.blade.php
+++ b/resources/views/checkout/partials/buttons/new-address.blade.php
@@ -1,4 +1,4 @@
-<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-muted font-medium bg-ct-inactive-100 rounded-xl max-md:hidden">
+<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-muted font-medium bg rounded-xl max-md:hidden">
     <span>+</span>
     <span>@lang('Add new address')</span>
 </button>
diff --git a/resources/views/checkout/partials/sections/success/product-quantity.blade.php b/resources/views/checkout/partials/sections/success/product-quantity.blade.php
index 52fde0a..4ccd627 100644
--- a/resources/views/checkout/partials/sections/success/product-quantity.blade.php
+++ b/resources/views/checkout/partials/sections/success/product-quantity.blade.php
@@ -1,5 +1,5 @@
 <div class="flex items-center justify-between gap-10 font-medium max-md:flex-1 md:ml-auto">
-    <div class="h-12 w-16 border flex items-center rounded-md justify-center ring ring-ct-inactive-100 text-base">
+    <div class="h-12 w-16 border flex items-center rounded-md justify-center ring ring-background text-base">
         @{{ Math.round(item.quantity_ordered) }}
     </div>
 </div>
diff --git a/resources/views/checkout/partials/shipping/methods.blade.php b/resources/views/checkout/partials/shipping/methods.blade.php
index 4eb4ffc..2f26124 100644
--- a/resources/views/checkout/partials/shipping/methods.blade.php
+++ b/resources/views/checkout/partials/shipping/methods.blade.php
@@ -17,9 +17,9 @@
     v-slot="{ mutate, variables }"
     v-if="!cart.is_virtual"
 >
-    <fieldset class="flex flex-col gap-2" partial-submit="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
-        <div v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods" class="flex flex-col gap-2">
-            <x-rapidez-ct::input.radio
+    <fieldset class="flex flex-col gap-3" partial-submit="mutate" v-on:change="window.app.$emit('setShippingAddressesOnCart')">
+        <div v-for="(method, index) in cart.shipping_addresses[0]?.available_shipping_methods">
+            <x-rapidez-ct::input.radio.tile
                 name="shipping_method"
                 v-model="variables.method"
                 v-bind:value="method.carrier_code+'/'+method.method_code"
@@ -29,21 +29,21 @@
                 class="!py-4"
                 required
             >
-                <div class="flex flex-col md:w-3/5">
-                    <span class="font-medium text-base">@{{ method.carrier_title }}</span>
-                    <span class="text-muted text-sm">@{{ method.method_title }}</span>
-                </div>
-                <div class="text-right text-sm font-medium shrink-0">
-                    <img
-                        width="32"
-                        height="32"
-                        class="max-h-8"
-                        v-bind:alt="method.carrier_title"
-                        v-bind:src="`/vendor/shipping-icons/${method.carrier_title}.svg`"
-                        onerror="this.onerror=null; this.src='/vendor/shipping-icons/default.svg'"
-                    />
-                </div>
-            </x-rapidez-ct::input.radio>
+            <div class="flex flex-col md:w-3/5">
+                <span class="font-medium text-sm">@{{ method.carrier_title }}</span>
+                <span class="text-muted text-xs">@{{ method.method_title }}</span>
+            </div>
+            <div class="text-right text-sm font-medium shrink-0">
+                <img
+                    width="32"
+                    height="32"
+                    class="max-h-10 w-full h-auto object-contain"
+                    v-bind:alt="method.carrier_title"
+                    v-bind:src="`/vendor/shipping-icons/${method.carrier_title}.svg`"
+                    onerror="this.onerror=null; this.src='/vendor/shipping-icons/default.svg'"
+                />
+            </div>
+            </x-rapidez-ct::input.radio.tile>
         </div>
     </fieldset>
 </graphql-mutation>
diff --git a/resources/views/checkout/steps/credentials.blade.php b/resources/views/checkout/steps/credentials.blade.php
index e119fd6..82defdc 100644
--- a/resources/views/checkout/steps/credentials.blade.php
+++ b/resources/views/checkout/steps/credentials.blade.php
@@ -7,7 +7,7 @@
     <x-rapidez-ct::card.inactive>
         @include('rapidez-ct::checkout.partials.sections.address')
     </x-rapidez-ct::card.inactive>
-    <x-rapidez-ct::card.inactive class="[&_label]:ring-background [&_label]:ring">
+    <x-rapidez-ct::card.inactive>
         @include('rapidez-ct::checkout.partials.sections.newsletter')
     </x-rapidez-ct::card.inactive>
     <x-rapidez-ct::card.inactive>
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index 7741395..9be5654 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -7,7 +7,7 @@
             </x-rapidez-ct::title>
 
             <x-rapidez-ct::sections>
-                <x-rapidez-ct::card.inactive class="!bg-primary/10 py-8 px-6 rounded-xl border-b border-black/5">
+                <x-rapidez-ct::card.inactive class="!bg-primary/10 pb-8 px-7 !py-5 rounded-xl border-b border-black/5">
                     @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
                 </x-rapidez-ct::card.inactive>
             </x-rapidez-ct::sections>
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index dfe45eb..c72f084 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -7,7 +7,7 @@
         v-model="{{ $address }}.firstname"
         @class([
             'max-sm:col-span-3 col-span-2',
-            'sm:!col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
+            '!col-span-full sm:!col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
         ])
         required
         :placeholder="__('Firstname')"
@@ -29,6 +29,10 @@ class="col-span-full sm:col-span-2"
         v-model="{{ $address }}.lastname"
         required
         :placeholder="__('Lastname')"
+        @class([
+            'col-span-full sm:col-span-2',
+            'sm:!col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
+        ])
     />
     @if (Rapidez::config('customer/address/telephone_show', 'req'))
         <x-rapidez-ct::input
diff --git a/resources/views/components/button/inactive.blade.php b/resources/views/components/button/inactive.blade.php
index c08a115..0cfdb35 100644
--- a/resources/views/components/button/inactive.blade.php
+++ b/resources/views/components/button/inactive.blade.php
@@ -1,3 +1,3 @@
-<x-rapidez::button {{ $attributes->merge(['class' => 'flex items-center gap-x-4 bg-ct-inactive-100 text-sm font-medium text-muted border-b rounded-md']) }}>
+<x-rapidez::button {{ $attributes->merge(['class' => 'flex items-center gap-x-4 bg text-sm font-medium text-muted border-b rounded-md']) }}>
     {{ $slot }}
 </x-rapidez::button>
diff --git a/resources/views/components/card/white.blade.php b/resources/views/components/card/white.blade.php
index d9df83d..ef345a2 100644
--- a/resources/views/components/card/white.blade.php
+++ b/resources/views/components/card/white.blade.php
@@ -1,5 +1,5 @@
 @props(['check' => false])
-<div {{ $attributes->class('relative flex-1 rounded-md border bg-white px-5 py-6 overflow-hidden ring ring-ct-inactive-100') }}>
+<div {{ $attributes->class('relative flex-1 rounded-md border bg-white px-5 py-6 overflow-hidden') }}>
     @if ($check)
         <template v-if="{{ $check }}">
             <x-heroicon-o-check class="absolute right-7 top-7 w-5 text-primary" stroke-width="2.5" />
diff --git a/resources/views/components/coupon-field.blade.php b/resources/views/components/coupon-field.blade.php
index ba04182..05ce2df 100644
--- a/resources/views/components/coupon-field.blade.php
+++ b/resources/views/components/coupon-field.blade.php
@@ -8,7 +8,7 @@
     :error-callback="checkResponseForExpiredCart"
     v-slot="{ mutate, variables }"
 >
-    <form v-on:submit.prevent="mutate" class="flex w-full gap-x-3 gap-y-5 max-md:flex-col items-center">
+    <form v-on:submit.prevent="mutate" class="flex w-full gap-y-3 flex-col">
         <x-rapidez-ct::input
             :label="__('Enter code')"
             class="flex-1 max-md:w-full"
diff --git a/resources/views/components/input/checkbox.blade.php b/resources/views/components/input/checkbox/checkbox.blade.php
similarity index 76%
rename from resources/views/components/input/checkbox.blade.php
rename to resources/views/components/input/checkbox/checkbox.blade.php
index c5e6eda..82d6ecb 100644
--- a/resources/views/components/input/checkbox.blade.php
+++ b/resources/views/components/input/checkbox/checkbox.blade.php
@@ -1,7 +1,7 @@
 @props(['name' => '', 'id' => uniqid('checkbox-')])
 <label for="{{ $id }}" {{ $attributes->only('class')->class('text-muted relative flex items-center cursor-pointer select-none flex-wrap gap-x-3 text-sm [&>span]:flex-1') }}>
     <input
-        class="peer h-6 w-6 cursor-pointer rounded-md border-ct-border transition focus:outline-none focus:ring-0 focus:ring-offset-0 text"
+        class="peer h-6 w-6 cursor-pointer rounded-md border-default transition focus:outline-none focus:ring-0 focus:ring-offset-0 text"
         id="{{ $id }}"
         name="{{ $name }}"
         type="checkbox"
diff --git a/resources/views/components/input/checkbox/tile.blade.php b/resources/views/components/input/checkbox/tile.blade.php
new file mode 100644
index 0000000..e1d678b
--- /dev/null
+++ b/resources/views/components/input/checkbox/tile.blade.php
@@ -0,0 +1,13 @@
+@props(['name' => '', 'id' => uniqid('checkbox-')])
+<label for="{{ $id }}" {{ $attributes->only('class')->class('relative flex cursor-pointer select-none gap-x-3 text-sm ring ring-background') }}>
+    <x-rapidez::input.checkbox.base
+        class="size-6 text-primary peer"
+        id="{{ $id }}"
+        name="{{ $name }}"
+        {{ $attributes->except('class') }}
+    />
+    @isset($slot)
+        <span {{ $slot->attributes->class('mt-0.5') ?? '' }}>{{ $slot }}</span>
+    @endisset
+    <div class="absolute -inset-y-px -left-px w-1 rounded-l bg-primary opacity-0 transition-all peer-checked:opacity-100"></div>
+</label>
diff --git a/resources/views/components/input/radio.blade.php b/resources/views/components/input/radio.blade.php
deleted file mode 100644
index da961b5..0000000
--- a/resources/views/components/input/radio.blade.php
+++ /dev/null
@@ -1,11 +0,0 @@
-<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded-md px-5 md:px-7 py-4 ring !ring-background') }}>
-    <span class="flex aspect-square h-6 w-6 items-center justify-center rounded-full border bg-white">
-        <input type="radio" {{ $attributes->except('class') }} class="peer h-3 w-3 border-none text-primary transition checked:bg-none focus:ring-0 focus:ring-offset-0" />
-        <span class="overflow-hidden rounded-md -z-10 absolute inset-0 bg-ct-inactive-100 peer-checked:border-y peer-checked:border-r peer-checked:bg-white before:absolute before:-inset-y-px before:w-1 before:rounded-l before:bg-primary before:opacity-0 before:transition-all before:peer-checked:opacity-100"></span>
-    </span>
-    @isset($slot)
-        <span class="flex w-full items-center justify-between gap-x-3">
-            {{ $slot }}
-        </span>
-    @endisset
-</label>
diff --git a/resources/views/components/input/radio/radio.blade.php b/resources/views/components/input/radio/radio.blade.php
new file mode 100644
index 0000000..5957d59
--- /dev/null
+++ b/resources/views/components/input/radio/radio.blade.php
@@ -0,0 +1,9 @@
+<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded-md px-5 md:px-7 py-4 ring border') }}>
+    <x-rapidez::input.radio.base class="size-6 text-primary peer" {{ $attributes->except('class') }} />
+    <div class="absolute -inset-y-px -left-px w-1 rounded-l bg-primary opacity-0 transition-all peer-checked:opacity-100"></div>
+    @isset($slot)
+        <span class="flex w-full items-center justify-between gap-x-3">
+            {{ $slot }}
+        </span>
+    @endisset
+</label>
diff --git a/resources/views/components/input/radio/tile.blade.php b/resources/views/components/input/radio/tile.blade.php
new file mode 100644
index 0000000..e2e9786
--- /dev/null
+++ b/resources/views/components/input/radio/tile.blade.php
@@ -0,0 +1,13 @@
+<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded-md border bg-white px-5 sm:px-7 py-4 ring ring-background') }}>
+    <x-rapidez::input.radio.base
+        class="size-6 text-primary peer"
+        name="{{ $name }}"
+        {{ $attributes->except('class') }}
+    />
+    @isset($slot)
+        <span class="flex w-full flex-wrap items-center justify-between gap-x-3">
+            {{ $slot }}
+        </span>
+    @endisset
+    <div class="absolute -inset-y-px -left-px w-1 rounded-l bg-primary opacity-0 transition-all peer-checked:opacity-100"></div>
+</label>
diff --git a/resources/views/components/layout/checkout.blade.php b/resources/views/components/layout/checkout.blade.php
index f3c3004..5c2f29f 100644
--- a/resources/views/components/layout/checkout.blade.php
+++ b/resources/views/components/layout/checkout.blade.php
@@ -1,6 +1,6 @@
 @slots(['header', 'sidebar'])
 <div class="fixed -top-px h-1.5 inset-x-0 w-full bg-primary z-20"></div>
-<div {{ $attributes->class('flex flex-wrap gap-x-20 text-sm max-lg:flex-col') }}>
+<div {{ $attributes->class('flex flex-wrap gap-x-20 text-sm max-lg:flex-col min-h-dvh') }}>
     <div class="flex flex-wrap max-xl:flex-col flex-1 max-lg:mb-10 max-lg:pt-6 max-lg:container">
         {{ $header }}
         <div class="flex-1 pt-6 lg:pt-3 xl:pt-12 lg:pb-28">
diff --git a/resources/views/components/newsletter/partials/input.blade.php b/resources/views/components/newsletter/partials/input.blade.php
new file mode 100644
index 0000000..83414b7
--- /dev/null
+++ b/resources/views/components/newsletter/partials/input.blade.php
@@ -0,0 +1,29 @@
+<form
+    class="relative flex gap-3 flex-wrap max-md:flex-col w-full z-10"
+    v-on:submit.prevent="mutate"
+>
+    <div class="flex-1">
+            
+        <x-rapidez-ct::input
+            :label="__('Email')"
+            name="email-newsletter"
+            type="email"
+            required
+            v-model="variables.email"
+            :placeholder="__('Enter your email address')"
+        />
+    </div>
+    <x-rapidez::button.secondary
+        class="relative whitespace-nowrap self-end"
+        type="submit"
+        v-bind:disabled="mutating && !error"
+    >
+        <div :class="{ 'opacity-0': (mutated || mutating) && !error }">
+            @lang('Subscribe to newsletter')
+        </div>
+        <div class="absolute inset-0 p-3.5" v-if="(mutated || mutating) && !error">
+            <x-heroicon-o-arrow-path class="mx-auto h-full animate-spin" v-if="mutating" />
+            <x-heroicon-o-check class="mx-auto h-full" v-else stroke-width="2.5" />
+        </div>
+    </x-rapidez::button.secondary>
+</form>
diff --git a/resources/views/components/separated-listing/index.blade.php b/resources/views/components/separated-listing/index.blade.php
index e407694..39e8577 100644
--- a/resources/views/components/separated-listing/index.blade.php
+++ b/resources/views/components/separated-listing/index.blade.php
@@ -1,4 +1,4 @@
 @props(['tag' => 'ul'])
-<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm *:py-1 first-child:*:pt-0 last:*:py-3 *:flex *:flex-wrap *:justify-between') }}>
+<x-rapidez::tag is="{{ $tag }}" {{ $attributes->class('flex flex-col text-sm *:py-1 first:*:pt-0 last:*:py-3 *:flex *:flex-wrap *:justify-between') }}>
     {{ $slot }}
 </x-rapidez::tag>
diff --git a/resources/views/components/slide-in/index.blade.php b/resources/views/components/slide-in/index.blade.php
index b83971f..ef9521b 100644
--- a/resources/views/components/slide-in/index.blade.php
+++ b/resources/views/components/slide-in/index.blade.php
@@ -14,7 +14,7 @@ class="!touch-none absolute top-1.5 inset-x-0 bg-white z-30 rounded-b-xl opacity
                     @endisset
                 </div>
             </div>
-            <label for="slide-in" class="absolute z-20 inset-x-0 bottom-0 top-1.5 bg-overlay/60 transition-all duration-500 opacity-0 pointer-events-none peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
+            <label for="slide-in" class="absolute z-20 inset-x-0 bottom-0 top-1.5 bg-black/60 transition-all duration-500 opacity-0 pointer-events-none peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
         </div>
     </template>
 </slide-in>
diff --git a/resources/views/components/slideover.blade.php b/resources/views/components/slideover.blade.php
index cbefb35..d5bdfa2 100644
--- a/resources/views/components/slideover.blade.php
+++ b/resources/views/components/slideover.blade.php
@@ -1,6 +1,6 @@
 @props(['id', 'title' => ''])
 <input type="checkbox" v-bind:id="{{ $id }}" class="peer hidden"/>
-<label v-bind:for="{{ $id }}" class="pointer-events-none fixed inset-0 z-50 cursor-pointer bg-overlay/30 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
+<label v-bind:for="{{ $id }}" class="pointer-events-none fixed inset-0 z-50 cursor-pointer bg-black/60 opacity-0 transition peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
 <div class="pointer-events-none fixed inset-y-0 -right-full z-50 flex w-full max-w-md flex-col bg-white transition-[right] duration-300 peer-checked:pointer-events-auto peer-checked:right-0">
     <div class="flex w-full items-center justify-center bg-primary py-4 px-5 text-lg font-bold text-white">
         <div>{{ $title }}</div>
diff --git a/resources/views/components/title-progress-bar.blade.php b/resources/views/components/title-progress-bar.blade.php
index 9a6e855..fceb8a4 100644
--- a/resources/views/components/title-progress-bar.blade.php
+++ b/resources/views/components/title-progress-bar.blade.php
@@ -1,6 +1,6 @@
 @aware(['checkoutSteps', 'currentStep', 'currentStepKey'])
 
-<div class="flex flex-wrap items-end justify-between gap-1">
+<div class="flex flex-wrap items-baseline justify-between gap-1">
     <x-rapidez-ct::title {{ $attributes->except(['checkoutSteps', 'currentStep', 'currentStepKey']) }}>
         {{ $slot }}
     </x-rapidez-ct::title>
diff --git a/resources/views/components/toolbar.blade.php b/resources/views/components/toolbar.blade.php
new file mode 100644
index 0000000..c8847ef
--- /dev/null
+++ b/resources/views/components/toolbar.blade.php
@@ -0,0 +1,3 @@
+<div {{ $attributes->class('flex max-sm:flex-col-reverse gap-x-5 gap-y-4 *:flex-1') }}>
+    {{ $slot }}
+</div>

From 84064af46b182e4c245ae17f8409222c46376d4e Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Fri, 3 Jan 2025 11:51:44 +0100
Subject: [PATCH 03/11] Fix item removal

---
 resources/views/cart/partials/product/remove-button.blade.php | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/views/cart/partials/product/remove-button.blade.php b/resources/views/cart/partials/product/remove-button.blade.php
index 28810c9..47a356e 100644
--- a/resources/views/cart/partials/product/remove-button.blade.php
+++ b/resources/views/cart/partials/product/remove-button.blade.php
@@ -1,5 +1,5 @@
 <graphql-mutation
-    :query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id })  { ...cart } } ' + config.fragments.cart"
+    :query="'mutation ($cart_id: String!, $cart_item_id: Int) { removeItemFromCart(input: { cart_id: $cart_id, cart_item_id: $cart_item_id }) { cart { ...cart } } } ' + config.fragments.cart"
     :variables="{ cart_id: mask, cart_item_id: item.id }"
     :notify="{ message: item.product.name+' '+config.translations.cart.remove }"
     :callback="updateCart"

From 29ae511bba9654660f5d5b87c8d665cf3971f492 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Mon, 6 Jan 2025 10:01:30 +0100
Subject: [PATCH 04/11] Carry attributes over to select input

---
 resources/views/components/input/select/country.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/input/select/country.blade.php b/resources/views/components/input/select/country.blade.php
index f6f5562..d10f0d5 100644
--- a/resources/views/components/input/select/country.blade.php
+++ b/resources/views/components/input/select/country.blade.php
@@ -1,9 +1,9 @@
 <graphql query="{ countries { two_letter_abbreviation full_name_locale } }" cache="countries">
     <div v-if="data" slot-scope="{ data }">
-        <x-rapidez-ct::input.select :label="__('Country')">
+        <x-rapidez-ct::input.select :$attributes :label="__('Country')">
             <option v-for="country in data.countries" :value="country.two_letter_abbreviation.toUpperCase()">
                 @{{ country.full_name_locale }}
             </option>
         </x-rapidez-ct::input.select>
     </div>
-</graphql>
\ No newline at end of file
+</graphql>

From bb96447cd474a161678aa3223fcb655fbd2d8b95 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Mon, 6 Jan 2025 11:22:51 +0100
Subject: [PATCH 05/11] Only show slide-in when cart exists to avoid errors

---
 resources/views/components/slide-in/receipt.blade.php | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/resources/views/components/slide-in/receipt.blade.php b/resources/views/components/slide-in/receipt.blade.php
index b5c0f22..a6d9ff4 100644
--- a/resources/views/components/slide-in/receipt.blade.php
+++ b/resources/views/components/slide-in/receipt.blade.php
@@ -1,4 +1,4 @@
-<x-rapidez-ct::slide-in>
+<x-rapidez-ct::slide-in v-if="cart">
     <label
         for="slide-in"
         class="absolute z-10 w-7 h-7 right-3 top-5 peer-checked:text-primary"
@@ -12,4 +12,4 @@ class="absolute z-10 w-7 h-7 right-3 top-5 peer-checked:text-primary"
     @include('rapidez-ct::cart.partials.sidebar.payment')
     @include('rapidez-ct::cart.partials.sidebar.usps')
     <x-rapidez-ct::slide-in.partials.drawer-border class="bg-primary/20 bottom-2 inset-x-0"/>
-</x-rapidez-ct::slide-in>
\ No newline at end of file
+</x-rapidez-ct::slide-in>

From 0498648367107cc25cdc6b284d014a8ae87d87b4 Mon Sep 17 00:00:00 2001
From: Jade Geels <jade@justbetter.nl>
Date: Mon, 6 Jan 2025 11:31:55 +0100
Subject: [PATCH 06/11] Remove pickup address

---
 .../checkout/partials/sections/success/order-info.blade.php    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/resources/views/checkout/partials/sections/success/order-info.blade.php b/resources/views/checkout/partials/sections/success/order-info.blade.php
index d04947b..93d5e43 100644
--- a/resources/views/checkout/partials/sections/success/order-info.blade.php
+++ b/resources/views/checkout/partials/sections/success/order-info.blade.php
@@ -1,10 +1,9 @@
 <div class="flex flex-col *:gap-x-4">
     <checkout-success-addresses :order="order">
-        <div slot-scope="{ hideBilling, shipping, billing, pickup }" class="flex flex-1 border-t border-dashed justify-between pt-5">
+        <div slot-scope="{ hideBilling, shipping, billing }" class="flex flex-1 border-t border-dashed justify-between pt-5">
             <template v-if="hideBilling">
                 <x-rapidez-ct::card.address-alt v-bind:address="shipping" shipping billing />
             </template>
-            <x-rapidez-ct::card.address-alt v-if="pickup" v-bind:address="pickup" custom-title="Pickup address"/>
             <x-rapidez-ct::card.address-alt v-if="!hideBilling && shipping" v-bind:address="shipping" shipping/>
             <x-rapidez-ct::card.address-alt v-if="!hideBilling && billing" v-bind:address="billing" billing/>
         </div>

From c1a63cd0e6bc0e8109cda68b0697e1c85a6382c3 Mon Sep 17 00:00:00 2001
From: Jade Geels <a@jgw.tf>
Date: Tue, 7 Jan 2025 09:49:16 +0000
Subject: [PATCH 07/11] Show configured variant image in the cart (#33)

---
 .../checkout/partials/sidebar/products.blade.php    | 13 ++++++++++++-
 .../components/product/partials/image.blade.php     |  8 +++++++-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/resources/views/checkout/partials/sidebar/products.blade.php b/resources/views/checkout/partials/sidebar/products.blade.php
index 1124a47..67cad9c 100644
--- a/resources/views/checkout/partials/sidebar/products.blade.php
+++ b/resources/views/checkout/partials/sidebar/products.blade.php
@@ -2,7 +2,18 @@
     <div slot-scope="{ toggle, isOpen }" class="*:pt-2.5 first:*:pt-0 mb-2.5 flex w-full flex-col gap-2.5 divide-y divide-dashed border-b border-dashed pb-2.5">
         <div v-for="(item, index) in cart.items" v-show="isOpen || index < 2" class="flex gap-3">
             <div class="bg-primary/10">
-                <img v-if="item.product.image" class="max-h-20 w-20 shrink-0 object-contain mix-blend-darken bg-white" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
+                <img
+                    v-if="item.configured_variant?.image"
+                    class="max-h-20 w-20 shrink-0 object-contain mix-blend-darken bg-white"
+                    :alt="item.product.name"
+                    :src="resizedPath(item.configured_variant?.image.url + '.webp', '200')"
+                />
+                <img
+                    v-else-if="item.product.image"
+                    class="max-h-20 w-20 shrink-0 object-contain mix-blend-darken bg-white"
+                    :alt="item.product.name"
+                    :src="resizedPath(item.product.image.url + '.webp', '200')"
+                />
             </div>
             <div class="flex flex-col">
                 <span class="line-clamp-1 text-sm font-semibold">
diff --git a/resources/views/components/product/partials/image.blade.php b/resources/views/components/product/partials/image.blade.php
index a08f7ef..ab35d13 100644
--- a/resources/views/components/product/partials/image.blade.php
+++ b/resources/views/components/product/partials/image.blade.php
@@ -1,6 +1,12 @@
 <div class="flex shrink-0 h-28 w-28 !p-0">
     <img
-        v-if="item.product.image"
+        v-if="item.configured_variant?.image"
+        class="object-contain"
+        :alt="item.product.name"
+        :src="resizedPath(item.configured_variant?.image.url + '.webp', '200')"
+    />
+    <img
+        v-else-if="item.product.image"
         class="object-contain"
         :alt="item.product.name"
         :src="resizedPath(item.product.image.url + '.webp', '200')"

From ccfd41f8a04ab785f4f6ebc727bf6a4fef3e9b2f Mon Sep 17 00:00:00 2001
From: Jordy de Vulder <jordy@justbetter.nl>
Date: Thu, 9 Jan 2025 11:49:57 +0100
Subject: [PATCH 08/11] Resolved feedback

---
 README.md                                     | 26 -------------------
 lang/nl.json                                  |  3 ++-
 resources/views/cart/cart.blade.php           |  2 +-
 .../checkout/pages/credentials.blade.php      |  2 +-
 .../views/checkout/pages/login.blade.php      |  2 +-
 .../views/checkout/pages/payment.blade.php    |  2 +-
 .../partials/buttons/address.blade.php        |  2 +-
 .../partials/buttons/new-address.blade.php    |  2 +-
 .../payment/agreement-checkbox.blade.php      | 10 -------
 .../sections/success/summary.blade.php        | 14 +++++-----
 .../partials/sidebar/products.blade.php       |  2 +-
 .../checkout/steps/credentials.blade.php      |  8 +++---
 .../views/checkout/steps/success.blade.php    | 14 +++++-----
 .../views/components/address-form.blade.php   |  9 ++++---
 .../components/card/address-alt.blade.php     |  2 +-
 .../views/components/card/white.blade.php     |  4 +--
 .../input/checkbox/checkbox.blade.php         | 13 ----------
 .../components/input/radio/radio.blade.php    |  9 -------
 .../views/components/slide-in/index.blade.php |  4 +--
 .../components/slide-in/receipt.blade.php     |  2 +-
 resources/views/components/toolbar.blade.php  |  2 +-
 21 files changed, 41 insertions(+), 93 deletions(-)
 delete mode 100644 resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
 delete mode 100644 resources/views/components/input/checkbox/checkbox.blade.php
 delete mode 100644 resources/views/components/input/radio/radio.blade.php

diff --git a/README.md b/README.md
index f7e86d7..bc37397 100644
--- a/README.md
+++ b/README.md
@@ -16,32 +16,6 @@ Before installing this package, make sure you have:
 composer require rapidez/confira
 ```
 
-Confira adds the `ct-primary-100` color, which should be added to your tailwind config alongside the other checkout-theme colors like so:
-
-```diff
-colors: {
-    ct: {
-        enhanced: {
-            DEFAULT: '#40C42A',
-        },
-        inactive: {
-            DEFAULT: '#8A8275',
-            100: '#F6F4EE',
-        },
-        disabled: '#EBE8DE',
-        primary: {
-            DEFAULT: '#FEAB05',
-+           100: '#FEE8C3'
-        },
-        neutral: {
-            DEFAULT: '#625B50',
-        },
-        border: '#EAE7DC',
-        error: '#DF241D',
-    },
-},
-```
-
 ## Layout Configuration
 
 For the best experience with this theme, it's recommended to have a clean checkout page layout without header and footer. To achieve this, modify your project's `app.blade.php`:
diff --git a/lang/nl.json b/lang/nl.json
index 9810fd2..3417372 100644
--- a/lang/nl.json
+++ b/lang/nl.json
@@ -10,5 +10,6 @@
     "The Netherlands": "Nederland",
     "Total products": "Totaal aantal producten",
     "We will send a confirmation of your order :orderid to <strong>:email</strong>": "We sturen een bevestiging van uw bestelling :orderid naar <strong>:email</strong>",
-    "You ordered this": "U heeft dit besteld"
+    "You ordered this": "U heeft dit besteld",
+    "We'll email your order confirmation and check if you have an account for faster checkout.": "Op dit e-mailadres ontvang je de orderbevestiging. Ook checken we of je al een account hebt."
 }
diff --git a/resources/views/cart/cart.blade.php b/resources/views/cart/cart.blade.php
index e14eec8..2c27b04 100644
--- a/resources/views/cart/cart.blade.php
+++ b/resources/views/cart/cart.blade.php
@@ -3,7 +3,7 @@
 </x-rapidez-ct::sections>
 
 <x-rapidez-ct::toolbar>
-    <x-rapidez::button.outline href="/" class="max-lg:hidden !flex-none">
+    <x-rapidez::button.outline href="/" class="max-lg:hidden">
         @lang('Continue shopping')
     </x-rapidez::button.outline>
 </x-rapidez-ct::toolbar>
diff --git a/resources/views/checkout/pages/credentials.blade.php b/resources/views/checkout/pages/credentials.blade.php
index af5a1c5..ca8b8b8 100644
--- a/resources/views/checkout/pages/credentials.blade.php
+++ b/resources/views/checkout/pages/credentials.blade.php
@@ -26,7 +26,7 @@ class="contents"
                     }"
                 >
                     @include('rapidez-ct::checkout.steps.credentials')
-                    <x-rapidez-ct::toolbar>
+                    <x-rapidez-ct::toolbar class="*:flex-1 max-sm:flex-col-reverse">
                         <x-rapidez::button.outline :href="route('cart')">
                             @lang('Back to cart')
                         </x-rapidez::button.outline>
diff --git a/resources/views/checkout/pages/login.blade.php b/resources/views/checkout/pages/login.blade.php
index 2b6f054..1e0e4a8 100644
--- a/resources/views/checkout/pages/login.blade.php
+++ b/resources/views/checkout/pages/login.blade.php
@@ -28,7 +28,7 @@ class="max-w-md mx-auto"
                     v-cloak
                 >
                     @include('rapidez-ct::checkout.steps.login')
-                    <x-rapidez-ct::toolbar>
+                    <x-rapidez-ct::toolbar class="*:flex-1 max-sm:flex-col-reverse">
                         <x-rapidez::button.outline :href="route('cart')">
                             @lang('Back to cart')
                         </x-rapidez::button.outline>
diff --git a/resources/views/checkout/pages/payment.blade.php b/resources/views/checkout/pages/payment.blade.php
index 6a80896..7cd69c2 100644
--- a/resources/views/checkout/pages/payment.blade.php
+++ b/resources/views/checkout/pages/payment.blade.php
@@ -27,7 +27,7 @@ class="contents"
                     }"
                 >
                     @include('rapidez::checkout.steps.payment_method')
-                    <x-rapidez-ct::toolbar>
+                    <x-rapidez-ct::toolbar class="*:flex-1 max-sm:flex-col-reverse">
                         <x-rapidez::button.outline :href="route('checkout', ['step' => 'credentials'])">
                             @lang('Back to credentials')
                         </x-rapidez::button.outline>
diff --git a/resources/views/checkout/partials/buttons/address.blade.php b/resources/views/checkout/partials/buttons/address.blade.php
index 68077c4..4dbc7c9 100644
--- a/resources/views/checkout/partials/buttons/address.blade.php
+++ b/resources/views/checkout/partials/buttons/address.blade.php
@@ -2,7 +2,7 @@
     <x-rapidez::button v-on:click.prevent="toggleEdit">
         @lang('Use a new address')
     </x-rapidez::button>
-    <x-rapidez::button tag="label" for="popup" class="cursor-pointer" v-if="$root.user.addresses.length">
+    <x-rapidez::button tag="label" for="popup" class="cursor-pointer" v-if="data?.customer?.addresses?.length">
         @lang('My addresses')
     </x-rapidez::button>
 </div>
\ No newline at end of file
diff --git a/resources/views/checkout/partials/buttons/new-address.blade.php b/resources/views/checkout/partials/buttons/new-address.blade.php
index 6b17a3b..3fd1d7c 100644
--- a/resources/views/checkout/partials/buttons/new-address.blade.php
+++ b/resources/views/checkout/partials/buttons/new-address.blade.php
@@ -1,4 +1,4 @@
-<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-muted font-medium bg rounded-xl max-md:hidden">
+<button v-on:click.prevent="toggleEdit" class="flex flex-col items-center justify-center gap-y-2 text-muted font-medium bg rounded-md max-md:hidden">
     <span>+</span>
     <span>@lang('Add new address')</span>
 </button>
diff --git a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php b/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
deleted file mode 100644
index ab60c97..0000000
--- a/resources/views/checkout/partials/sections/payment/agreement-checkbox.blade.php
+++ /dev/null
@@ -1,10 +0,0 @@
-<x-rapidez-ct::input.checkbox
-    name="agreement_ids[]"
-    v-bind:value="agreement.agreement_id"
-    dusk="agreements"
-    required
->
-    <label class="cursor-pointer text-sm underline" v-bind:for="agreement.checkbox_text">
-        @{{ agreement.checkbox_text }}
-    </label>
-</x-rapidez-ct::input.checkbox>
diff --git a/resources/views/checkout/partials/sections/success/summary.blade.php b/resources/views/checkout/partials/sections/success/summary.blade.php
index 94240a9..60ae47b 100644
--- a/resources/views/checkout/partials/sections/success/summary.blade.php
+++ b/resources/views/checkout/partials/sections/success/summary.blade.php
@@ -14,11 +14,11 @@
 </div>
 
 <div class="flex flex-col !mt-0">
-    <div v-if="order.tax_amount" class="flex justify-between order-first mt-2">
+    <dl v-if="order.tax_amount" class="flex justify-between order-first mt-2">
         <dt class="text-muted">@lang('Tax')</dt>
-        <dd class="font-mediuml">@{{ order.tax_amount | price }}</dd>
-    </div>
-    <div v-if="order.shipping_amount" class="flex justify-between mt-2">
+        <dd class="font-medium">@{{ order.tax_amount | price }}</dd>
+    </dl>
+    <dl v-if="order.shipping_amount" class="flex justify-between mt-2">
         <dt class="text-muted">@lang('Shipping')</dt>
         <dd v-if="order.shipping_amount > 0" class="font-medium">
             @{{ order.shipping_amount | price }}
@@ -26,9 +26,9 @@
         <dd v-else class="font-medium">
             @lang('Free')
         </dd>
-    </div>
-    <div v-if="order.grand_total" class="flex items-center order-last justify-between border-t border-dashed pt-3 mt-4">
+    </dl>
+    <dl v-if="order.grand_total" class="flex items-center order-last justify-between border-t border-dashed pt-3 mt-4">
         <dt class="text-base font-medium">@lang('Total price')</dt>
         <dd class="font-bold text-xl">@{{ order.grand_total | price }}</dd>
-    </div>
+    </dl>
 </div>
diff --git a/resources/views/checkout/partials/sidebar/products.blade.php b/resources/views/checkout/partials/sidebar/products.blade.php
index 1124a47..34d5e96 100644
--- a/resources/views/checkout/partials/sidebar/products.blade.php
+++ b/resources/views/checkout/partials/sidebar/products.blade.php
@@ -2,7 +2,7 @@
     <div slot-scope="{ toggle, isOpen }" class="*:pt-2.5 first:*:pt-0 mb-2.5 flex w-full flex-col gap-2.5 divide-y divide-dashed border-b border-dashed pb-2.5">
         <div v-for="(item, index) in cart.items" v-show="isOpen || index < 2" class="flex gap-3">
             <div class="bg-primary/10">
-                <img v-if="item.product.image" class="max-h-20 w-20 shrink-0 object-contain mix-blend-darken bg-white" :alt="item.product.name" :src="'/storage/{{ config('rapidez.store') }}/resizes/200/magento' + item.product.image.url.replace(config.media_url, '') + '.webp'">
+                <img v-if="item.product.image" class="max-h-20 w-20 shrink-0 object-contain mix-blend-darken bg-white" :alt="item.product.name" :src="resizedPath(item.product.image.url + '.webp', '200')">
             </div>
             <div class="flex flex-col">
                 <span class="line-clamp-1 text-sm font-semibold">
diff --git a/resources/views/checkout/steps/credentials.blade.php b/resources/views/checkout/steps/credentials.blade.php
index 82defdc..f62172a 100644
--- a/resources/views/checkout/steps/credentials.blade.php
+++ b/resources/views/checkout/steps/credentials.blade.php
@@ -7,9 +7,11 @@
     <x-rapidez-ct::card.inactive>
         @include('rapidez-ct::checkout.partials.sections.address')
     </x-rapidez-ct::card.inactive>
-    <x-rapidez-ct::card.inactive>
-        @include('rapidez-ct::checkout.partials.sections.newsletter')
-    </x-rapidez-ct::card.inactive>
+    @if (Rapidez::config('newsletter/general/active', 1))
+        <x-rapidez-ct::card.inactive>
+            @include('rapidez-ct::checkout.partials.sections.newsletter')
+        </x-rapidez-ct::card.inactive>
+    @endif
     <x-rapidez-ct::card.inactive>
         @include('rapidez-ct::checkout.partials.sections.shipping')
     </x-rapidez-ct::card.inactive>
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index 9be5654..deae866 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -7,7 +7,7 @@
             </x-rapidez-ct::title>
 
             <x-rapidez-ct::sections>
-                <x-rapidez-ct::card.inactive class="!bg-primary/10 pb-8 px-7 !py-5 rounded-xl border-b border-black/5">
+                <x-rapidez-ct::card.inactive class="!bg-green-400/15 pb-8 px-7 !py-5 rounded-xl border-b border-black/5">
                     @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
                 </x-rapidez-ct::card.inactive>
             </x-rapidez-ct::sections>
@@ -15,16 +15,18 @@
             <x-rapidez-ct::sections>
                 @include('rapidez-ct::checkout.partials.sections.success.products')
 
-                <x-rapidez-ct::card.inactive>
-                    @include('rapidez-ct::checkout.partials.sections.success.newsletter')
-                </x-rapidez-ct::card.inactive>
-                
+                @if (Rapidez::config('newsletter/general/active', 1))
+                    <x-rapidez-ct::card.inactive>
+                        @include('rapidez-ct::checkout.partials.sections.success.newsletter')
+                    </x-rapidez-ct::card.inactive>
+                @endif
+
                 @if (config('rapidez.checkout-theme.checkout.success.register'))
                     <x-rapidez-ct::card.inactive>
                         @include('rapidez-ct::checkout.partials.sections.success.create-account')
                     </x-rapidez-ct::card.inactive>
                 @endif
-                
+
             </x-rapidez-ct::sections>
             <x-slot:sidebar class="max-lg:border-t max-lg:border-dashed max-lg:mt-1 max-lg:pt-6">
                 @include('rapidez-ct::checkout.partials.sidebar.success-sidebar')
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index c72f084..04d5257 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -6,8 +6,8 @@
         label="Firstname"
         v-model="{{ $address }}.firstname"
         @class([
-            'max-sm:col-span-3 col-span-2',
-            '!col-span-full sm:!col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
+            'sm:col-span-2 col-span-3' => Rapidez::config('customer/address/middlename_show', 0),
+            'col-span-full sm:col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
         ])
         required
         :placeholder="__('Firstname')"
@@ -30,8 +30,9 @@ class="col-span-full sm:col-span-2"
         required
         :placeholder="__('Lastname')"
         @class([
-            'col-span-full sm:col-span-2',
-            'sm:!col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
+            'col-span-full',
+            'sm:col-span-2' => Rapidez::config('customer/address/middlename_show', 0),
+            'sm:col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
         ])
     />
     @if (Rapidez::config('customer/address/telephone_show', 'req'))
diff --git a/resources/views/components/card/address-alt.blade.php b/resources/views/components/card/address-alt.blade.php
index 8b23b10..f837d0f 100644
--- a/resources/views/components/card/address-alt.blade.php
+++ b/resources/views/components/card/address-alt.blade.php
@@ -1,6 +1,6 @@
 @props(['customTitle' => null])
 
-<x-rapidez-ct::card.white class="!border-0 !shadow-none !p-0" {{ $attributes->only('v-if') }}>
+<x-rapidez-ct::card.white class="!border-0 !shadow-none !p-0 !ring-0" {{ $attributes->only('v-if') }}>
     <x-rapidez-ct::address {{ $attributes }} :$customTitle>
         {{ $slot }}
         <x-slot:empty>
diff --git a/resources/views/components/card/white.blade.php b/resources/views/components/card/white.blade.php
index ef345a2..4e7aea7 100644
--- a/resources/views/components/card/white.blade.php
+++ b/resources/views/components/card/white.blade.php
@@ -1,8 +1,8 @@
 @props(['check' => false])
-<div {{ $attributes->class('relative flex-1 rounded-md border bg-white px-5 py-6 overflow-hidden') }}>
+<div {{ $attributes->class('relative flex-1 rounded-md border bg-white px-6 py-5 overflow-hidden ring ring-background') }}>
     @if ($check)
         <template v-if="{{ $check }}">
-            <x-heroicon-o-check class="absolute right-7 top-7 w-5 text-primary" stroke-width="2.5" />
+            <x-heroicon-o-check class="absolute right-5 top-6 w-5 text-primary" stroke-width="2.5" />
             <div class="w-1 bg-primary absolute left-0 inset-y-0"></div>
         </template>
     @endif
diff --git a/resources/views/components/input/checkbox/checkbox.blade.php b/resources/views/components/input/checkbox/checkbox.blade.php
deleted file mode 100644
index 82d6ecb..0000000
--- a/resources/views/components/input/checkbox/checkbox.blade.php
+++ /dev/null
@@ -1,13 +0,0 @@
-@props(['name' => '', 'id' => uniqid('checkbox-')])
-<label for="{{ $id }}" {{ $attributes->only('class')->class('text-muted relative flex items-center cursor-pointer select-none flex-wrap gap-x-3 text-sm [&>span]:flex-1') }}>
-    <input
-        class="peer h-6 w-6 cursor-pointer rounded-md border-default transition focus:outline-none focus:ring-0 focus:ring-offset-0 text"
-        id="{{ $id }}"
-        name="{{ $name }}"
-        type="checkbox"
-        {{ $attributes->except('class') }}
-    />
-    @isset($slot)
-        <span {{ $slot->attributes ?? '' }}>{{ $slot }}</span>
-    @endisset
-</label>
diff --git a/resources/views/components/input/radio/radio.blade.php b/resources/views/components/input/radio/radio.blade.php
deleted file mode 100644
index 5957d59..0000000
--- a/resources/views/components/input/radio/radio.blade.php
+++ /dev/null
@@ -1,9 +0,0 @@
-<label {{ $attributes->only('class')->class('relative flex w-full cursor-pointer items-center justify-start gap-x-3 rounded-md px-5 md:px-7 py-4 ring border') }}>
-    <x-rapidez::input.radio.base class="size-6 text-primary peer" {{ $attributes->except('class') }} />
-    <div class="absolute -inset-y-px -left-px w-1 rounded-l bg-primary opacity-0 transition-all peer-checked:opacity-100"></div>
-    @isset($slot)
-        <span class="flex w-full items-center justify-between gap-x-3">
-            {{ $slot }}
-        </span>
-    @endisset
-</label>
diff --git a/resources/views/components/slide-in/index.blade.php b/resources/views/components/slide-in/index.blade.php
index ef9521b..e31b479 100644
--- a/resources/views/components/slide-in/index.blade.php
+++ b/resources/views/components/slide-in/index.blade.php
@@ -1,7 +1,7 @@
 <slide-in>
     <template slot-scope="{ isSwiping, top, _self }">
         <div ref="container">
-            <input v-if="_self" v-model="_self.isOpen" id="slide-in" type="checkbox" class="hidden peer" />
+            <input v-if="_self" v-model="_self.isOpen" id="slide-in" type="checkbox" class="hidden peer prevent-scroll" />
             <div
                 ref="target"
                 class="!touch-none absolute top-1.5 inset-x-0 bg-white z-30 rounded-b-xl opacity-0 -translate-y-full peer-checked:opacity-100 peer-checked:translate-y-0"
@@ -14,7 +14,7 @@ class="!touch-none absolute top-1.5 inset-x-0 bg-white z-30 rounded-b-xl opacity
                     @endisset
                 </div>
             </div>
-            <label for="slide-in" class="absolute z-20 inset-x-0 bottom-0 top-1.5 bg-black/60 transition-all duration-500 opacity-0 pointer-events-none peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
+            <label for="slide-in" class="fixed z-20 inset-x-0 bottom-0 top-1.5 bg-black/60 transition-all duration-500 opacity-0 pointer-events-none peer-checked:pointer-events-auto peer-checked:opacity-100"></label>
         </div>
     </template>
 </slide-in>
diff --git a/resources/views/components/slide-in/receipt.blade.php b/resources/views/components/slide-in/receipt.blade.php
index b5c0f22..1ce9e47 100644
--- a/resources/views/components/slide-in/receipt.blade.php
+++ b/resources/views/components/slide-in/receipt.blade.php
@@ -3,7 +3,7 @@
         for="slide-in"
         class="absolute z-10 w-7 h-7 right-3 top-5 peer-checked:text-primary"
     >
-        <x-heroicon-o-x-mark class="text-muted w-7 h-7" />
+        <x-heroicon-o-x-mark class="text-muted size-7" />
     </label>
     <x-rapidez-ct::title class="mb-4">
         @lang('Overview')
diff --git a/resources/views/components/toolbar.blade.php b/resources/views/components/toolbar.blade.php
index c8847ef..8756d1e 100644
--- a/resources/views/components/toolbar.blade.php
+++ b/resources/views/components/toolbar.blade.php
@@ -1,3 +1,3 @@
-<div {{ $attributes->class('flex max-sm:flex-col-reverse gap-x-5 gap-y-4 *:flex-1') }}>
+<div {{ $attributes->class('flex gap-x-5 gap-y-4') }}>
     {{ $slot }}
 </div>

From 245635f93e0e6ac53a680002d7f56a7e146664b0 Mon Sep 17 00:00:00 2001
From: Jordy de Vulder <jordy@justbetter.nl>
Date: Fri, 10 Jan 2025 10:48:33 +0100
Subject: [PATCH 09/11] Restructured inputs

---
 .../sections/login/logged-out.blade.php       |  68 +++---
 .../sections/success/summary.blade.php        |   2 +-
 .../views/checkout/steps/success.blade.php    |   2 +-
 .../views/components/address-form.blade.php   | 227 +++++++++++-------
 .../views/components/coupon-field.blade.php   |  22 +-
 .../views/components/input/animated.blade.php |  22 ++
 .../views/components/input/input.blade.php    |  16 --
 .../views/components/input/label.blade.php    |   7 -
 .../input/password/password.blade.php         |  18 +-
 .../components/input/select/select.blade.php  |  22 +-
 .../views/components/label/animated.blade.php |   8 +
 .../newsletter/partials/input.blade.php       |  21 +-
 12 files changed, 253 insertions(+), 182 deletions(-)
 create mode 100644 resources/views/components/input/animated.blade.php
 delete mode 100644 resources/views/components/input/label.blade.php
 create mode 100644 resources/views/components/label/animated.blade.php

diff --git a/resources/views/checkout/partials/sections/login/logged-out.blade.php b/resources/views/checkout/partials/sections/login/logged-out.blade.php
index 82efd8c..dbe66cd 100644
--- a/resources/views/checkout/partials/sections/login/logged-out.blade.php
+++ b/resources/views/checkout/partials/sections/login/logged-out.blade.php
@@ -1,15 +1,19 @@
 <checkout-login v-slot="checkoutLogin">
     <fieldset partial-submit="go" class="grid gap-4 sm:gap-5 md:items-end md:grid-cols-2">
-        <x-rapidez-ct::input
-            label="Email"
-            name="email"
-            type="email"
-            v-model="checkoutLogin.email"
-            v-bind:disabled="loggedIn"
-            class="justify-center"
-            required
-            :placeholder="__('Enter your e-mail address')"
-        />
+        <x-rapidez-ct::label.animated>
+            <x-slot:label>
+                @lang('Email')
+            </x-slot:label>
+            <x-rapidez-ct::input.animated
+                name="email"
+                type="email"
+                v-model="checkoutLogin.email"
+                v-bind:disabled="loggedIn"
+                class="justify-center"
+                required
+                placeholder
+            />
+        </x-rapidez-ct::label.animated>
 
         <p v-if="checkoutLogin.isEmailAvailable" class="self-end text-muted md:min-h-14 flex items-center">
             @lang('We\'ll email your order confirmation and check if you have an account for faster checkout.')
@@ -17,7 +21,6 @@ class="justify-center"
 
         <template v-if="!loggedIn && (!checkoutLogin.isEmailAvailable || checkoutLogin.createAccount)">
             <x-rapidez-ct::input.password
-                placeholder="password"
                 name="password"
                 v-model="checkoutLogin.password"
                 required
@@ -34,27 +37,36 @@ class="justify-center"
         @endif
         <template v-if="!loggedIn && checkoutLogin.createAccount">
             <x-rapidez-ct::input.password
-                placeholder="password repeat"
                 name="password_repeat"
                 v-model="checkoutLogin.password_repeat"
                 required
             />
-            <x-rapidez-ct::input
-                placeholder="Firstname"
-                label="Firstname"
-                name="firstname"
-                type="text"
-                v-model="checkoutLogin.firstname"
-                required
-            />
-            <x-rapidez-ct::input
-                placeholder="lastname"
-                label="Lastname"
-                name="lastname"
-                type="text"
-                v-model="checkoutLogin.lastname"
-                required
-            />
+
+            <x-rapidez-ct::label.animated>
+                <x-slot:label>
+                    @lang('Firstname')
+                </x-slot:label>
+                <x-rapidez-ct::input.animated
+                    name="firstname"
+                    type="text"
+                    v-model="checkoutLogin.firstname"
+                    required
+                    placeholder
+                />
+            </x-rapidez-ct::label.animated>
+
+            <x-rapidez-ct::label.animated>
+                <x-slot:label>
+                    @lang('Lastname')
+                </x-slot:label>
+                <x-rapidez-ct::input.animated
+                    name="lastname"
+                    type="text"
+                    v-model="checkoutLogin.lastname"
+                    required
+                    placeholder
+                />
+            </x-rapidez-ct::label.animated>
         </template>
 
         <template v-if="!loggedIn && checkoutLogin.isEmailAvailable">
diff --git a/resources/views/checkout/partials/sections/success/summary.blade.php b/resources/views/checkout/partials/sections/success/summary.blade.php
index 60ae47b..54c5eb4 100644
--- a/resources/views/checkout/partials/sections/success/summary.blade.php
+++ b/resources/views/checkout/partials/sections/success/summary.blade.php
@@ -5,7 +5,7 @@
             <dt class="flex gap-x-1 text-muted">
                 <div>
                     <span>@{{ Math.round(item.qty_ordered) }}x</span>
-                    <span class="text-muted">@{{ item.name }}</span>
+                    <span>@{{ item.name }}</span>
                 </div>
             </dt>
             <dd>@{{ item.base_price_incl_tax | price }}</dd>
diff --git a/resources/views/checkout/steps/success.blade.php b/resources/views/checkout/steps/success.blade.php
index deae866..e62076c 100644
--- a/resources/views/checkout/steps/success.blade.php
+++ b/resources/views/checkout/steps/success.blade.php
@@ -7,7 +7,7 @@
             </x-rapidez-ct::title>
 
             <x-rapidez-ct::sections>
-                <x-rapidez-ct::card.inactive class="!bg-green-400/15 pb-8 px-7 !py-5 rounded-xl border-b border-black/5">
+                <x-rapidez-ct::card.inactive class="!bg-green-400/15 px-7 !py-5 rounded-xl border-b border-black/5">
                     @include('rapidez-ct::checkout.partials.sections.success.order-completed-note')
                 </x-rapidez-ct::card.inactive>
             </x-rapidez-ct::sections>
diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index 04d5257..fbafad4 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -1,127 +1,176 @@
 @props(['type' => 'shipping', 'address' => 'variables', 'countryKey' => 'country_code'])
 
 <div class="grid gap-4 sm:gap-5 grid-cols-6">
-    <x-rapidez-ct::input
-        name="{{ $type }}_firstname"
-        label="Firstname"
-        v-model="{{ $address }}.firstname"
+
+
+    <x-rapidez-ct::label.animated
         @class([
             'sm:col-span-2 col-span-3' => Rapidez::config('customer/address/middlename_show', 0),
             'col-span-full sm:col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
         ])
-        required
-        :placeholder="__('Firstname')"
-    />
+    >
+        <x-slot:label>
+            @lang('Firstname')
+        </x-slot:label>
+        <x-rapidez-ct::input.animated
+            name="{{ $type }}_firstname"
+            v-model="{{ $address }}.firstname"
+            required
+            placeholder
+        />
+    </x-rapidez-ct::label.animated>
+
 
     @if (Rapidez::config('customer/address/middlename_show', 0))
-        <x-rapidez-ct::input
-            class="col-span-3 sm:col-span-2"
-            name="{{ $type }}_middlename"
-            label="Middlename"
-            v-model="{{ $address }}.middlename"
-            :placeholder="__('Middlename')"
-        />
+        <x-rapidez-ct::label.animated class="col-span-3 sm:col-span-2">
+            <x-slot:label>
+                @lang('Middlename')
+            </x-slot:label>
+            <x-rapidez-ct::input.animated
+                name="{{ $type }}_middlename"
+                v-model="{{ $address }}.middlename"
+                placeholder
+            />
+        </x-rapidez-ct::label.animated>
     @endif
-    <x-rapidez-ct::input
-        class="col-span-full sm:col-span-2"
-        name="{{ $type }}_lastname"
-        label="Lastname"
-        v-model="{{ $address }}.lastname"
-        required
-        :placeholder="__('Lastname')"
+
+    <x-rapidez-ct::label.animated 
         @class([
             'col-span-full',
             'sm:col-span-2' => Rapidez::config('customer/address/middlename_show', 0),
             'sm:col-span-3' => !Rapidez::config('customer/address/middlename_show', 0),
         ])
-    />
-    @if (Rapidez::config('customer/address/telephone_show', 'req'))
-        <x-rapidez-ct::input
-            class="col-span-full sm:col-span-3"
-            name="{{ $type }}_telephone"
-            label="Telephone"
-            v-model="{{ $address }}.telephone"
-            :required="Rapidez::config('customer/address/telephone_show', 'req') == 'req'"
-            :placeholder="__('Telephone')"
+    >
+        <x-slot:label>
+            @lang('Lastname')
+        </x-slot:label>
+        <x-rapidez-ct::input.animated
+            name="{{ $type }}_lastname"
+            v-model="{{ $address }}.lastname"
+            required
+            placeholder
         />
+    </x-rapidez-ct::label.animated>
+
+    @if (Rapidez::config('customer/address/telephone_show', 'req'))
+        <x-rapidez-ct::label.animated class="col-span-full sm:col-span-3">
+            <x-slot:label>
+                @lang('Telephone')
+            </x-slot:label>
+            <x-rapidez-ct::input.animated
+                name="{{ $type }}_telephone"
+                v-model="{{ $address }}.telephone"
+                placeholder
+                :required="Rapidez::config('customer/address/telephone_show', 'req') == 'req'"
+            />
+        </x-rapidez-ct::label.animated>
     @endif
 
-    <label class="col-span-full sm:col-span-3">
+    <x-rapidez-ct::label.animated class="col-span-full sm:col-span-3">
+        <x-slot:label>
+            @lang('Country')
+        </x-slot:label>
         <x-rapidez-ct::input.select.country
-            :label="__('Country')"
             v-model="{{ $address }}.{{ $countryKey }}"
             required
-            :placeholder="__('Country')"
+            placeholder
             name="{{ $type }}_country"
         />
-    </label>
-    <x-rapidez-ct::input
-        class="col-span-full sm:col-span-2"
-        name="{{ $type }}_postcode"
-        label="Postcode"
-        v-model="{{ $address }}.postcode"
-        v-on:change="window.app.$emit('postcode-change', {{ $address }})"
-        required
-        :placeholder="__('Postcode')"
-    />
-    @if (Rapidez::config('customer/address/street_lines', 3) >= 2)
-        <x-rapidez-ct::input
-            class="col-span-3 sm:col-span-2"
-            name="{{ $type }}_housenumber"
-            label="Housenumber"
-            v-model="{{ $address }}.street[1]"
+    </x-rapidez-ct::label.animated>
+    
+    <x-rapidez-ct::label.animated class="col-span-full sm:col-span-2">
+        <x-slot:label>
+            @lang('Postcode')
+        </x-slot:label>
+        <x-rapidez-ct::input.animated
+            name="{{ $type }}_postcode"
+            v-model="{{ $address }}.postcode"
             v-on:change="window.app.$emit('postcode-change', {{ $address }})"
-            type="{{ Rapidez::config('customer/address/street_lines', 3) == 3 ? 'number' : 'text' }}"
             required
-            :placeholder="__('Housenumber')"
+            placeholder
         />
+    </x-rapidez-ct::label.animated>
+
+
+    @if (Rapidez::config('customer/address/street_lines', 3) >= 2)
+        <x-rapidez-ct::label.animated class="col-span-3 sm:col-span-2">
+            <x-slot:label>
+                @lang('Housenumber')
+            </x-slot:label>
+            <x-rapidez-ct::input.animated
+                name="{{ $type }}_housenumber"
+                v-model="{{ $address }}.street[1]"
+                v-on:change="window.app.$emit('postcode-change', {{ $address }})"
+                type="{{ Rapidez::config('customer/address/street_lines', 3) == 3 ? 'number' : 'text' }}"
+                required
+                placeholder
+            />
+        </x-rapidez-ct::label.animated>
     @endif
+
     @if (Rapidez::config('customer/address/street_lines', 3) >= 3)
-        <x-rapidez-ct::input
-            class="col-span-3 sm:col-span-2"
-            name="{{ $type }}_addition"
-            label="Addition"
-            v-model="{{ $address }}.street[2]"
-            :placeholder="__('Addition')"
-        />
+        <x-rapidez-ct::label.animated class="col-span-3 sm:col-span-2">
+            <x-slot:label>
+                @lang('Addition')
+            </x-slot:label>
+            <x-rapidez-ct::input.animated
+                name="{{ $type }}_addition"
+                v-model="{{ $address }}.street[2]"
+                :placeholder="__('Addition')"
+            />
+        </x-rapidez-ct::label.animated>
     @endif
-    <x-rapidez-ct::input
-        class="col-span-full sm:col-span-3"
-        name="{{ $type }}_street"
-        label="Street"
-        v-model="{{ $address }}.street[0]"
-        required
-        :placeholder="__('Street')"
-    />
-    <x-rapidez-ct::input
-        class="col-span-full sm:col-span-3"
-        name="{{ $type }}_city"
-        label="City"
-        v-model="{{ $address }}.city"
-        required
-        :placeholder="__('City')"
-    />
+
+    <x-rapidez-ct::label.animated class="col-span-full sm:col-span-3">
+        <x-slot:label>
+            @lang('Street')
+        </x-slot:label>
+        <x-rapidez-ct::input.animated
+            name="{{ $type }}_street"
+            v-model="{{ $address }}.street[0]"
+            required
+            placeholder
+        />
+    </x-rapidez-ct::label.animated>
+
+    <x-rapidez-ct::label.animated class="col-span-full sm:col-span-3">
+        <x-slot:label>
+            @lang('City')
+        </x-slot:label>
+        <x-rapidez-ct::input.animated
+            name="{{ $type }}_city"
+            v-model="{{ $address }}.city"
+            required
+            placeholder
+        />
+    </x-rapidez-ct::label.animated>
 
     @if (Rapidez::config('customer/address/company_show', 0) || Rapidez::config('customer/address/taxvat_show', 0))
         @if (Rapidez::config('customer/address/company_show', 0))
-            <x-rapidez-ct::input
-                class="col-span-3"
-                name="{{ $type }}_company"
-                label="Company"
-                v-model="{{ $address }}.company"
-                :placeholder="__('Company')"
-            />
+            <x-rapidez-ct::label.animated class="col-span-3">
+                <x-slot:label>
+                    @lang('Company')
+                </x-slot:label>
+                <x-rapidez-ct::input.animated
+                    name="{{ $type }}_company"
+                    v-model="{{ $address }}.company"
+                    placeholder
+                />
+            </x-rapidez-ct::label.animated>
         @endif
 
         @if(Rapidez::config('customer/address/taxvat_show', 0))
-            <x-rapidez-ct::input
-                class="col-span-3"
-                name="{{ $type }}_vat_id"
-                label="Tax ID"
-                v-model="{{ $address }}.vat_id"
-                :required="Rapidez::config('customer/address/taxvat_show', 0) == 'req'"
-                :placeholder="__('Tax ID')"
-            />
+            <x-rapidez-ct::label.animated class="col-span-3">
+                <x-slot:label>
+                    @lang('Tax ID')
+                </x-slot:label>
+                <x-rapidez-ct::input.animated
+                    name="{{ $type }}_vat_id"
+                    v-model="{{ $address }}.vat_id"
+                    :required="Rapidez::config('customer/address/taxvat_show', 0) == 'req'"
+                    placeholder
+                />
+            </x-rapidez-ct::label.animated>
         @endif
     @endif
 </div>
diff --git a/resources/views/components/coupon-field.blade.php b/resources/views/components/coupon-field.blade.php
index 05ce2df..0e3c857 100644
--- a/resources/views/components/coupon-field.blade.php
+++ b/resources/views/components/coupon-field.blade.php
@@ -9,15 +9,19 @@
     v-slot="{ mutate, variables }"
 >
     <form v-on:submit.prevent="mutate" class="flex w-full gap-y-3 flex-col">
-        <x-rapidez-ct::input
-            :label="__('Enter code')"
-            class="flex-1 max-md:w-full"
-            name="couponCode"
-            :placeholder="__('Enter code') . '...'"
-            v-model="variables.coupon_code"
-            v-bind:disabled="$root.loading"
-            required
-        />
+        <x-rapidez-ct::label.animated class="flex-1 max-md:w-full">
+            <x-slot:label>
+                @lang('Enter code')
+            </x-slot:label>
+            <x-rapidez-ct::input.animated
+                name="couponCode"
+                placeholder
+                v-model="variables.coupon_code"
+                v-bind:disabled="$root.loading"
+                required
+            />
+        </x-rapidez-ct::label.animated>
+
         <x-rapidez::button.outline type="submit" class="w-full self-center">
             @lang('Apply')
         </x-rapidez::button.outline>
diff --git a/resources/views/components/input/animated.blade.php b/resources/views/components/input/animated.blade.php
new file mode 100644
index 0000000..c174151
--- /dev/null
+++ b/resources/views/components/input/animated.blade.php
@@ -0,0 +1,22 @@
+{{-- @props(['label' => false])
+<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'v-cloak', 'class'])->merge(['class' => 'block relative group']) }}>
+    <input {{ $attributes->merge([
+        'id' => $attributes->get('name'),
+        'placeholder' => $attributes->get('placeholder'),
+        'type' => 'text',
+        'dusk' => $attributes->get('v-bind:dusk') ? null : $attributes->get('name'),
+        'class' => 'w-full rounded-md peer border border-default !bg-white pt-7 pb-2.5 px-5 text-sm outline-none !ring !ring-background transition-all placeholder-transparent focus:border-emphasis focus:!ring-background-emphasis disabled:bg-emphasis disabled:text-muted [&:input:-internal-autofill-selected]:bg-white font-medium disabled:pr-12 [&:user-invalid]:border-red-300 appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
+    ]) }}>
+    @if ($label)
+        <x-rapidez::label :required="$attributes->get('required')" class="pointer-events-none mt-0.5 transition-all absolute left-5 top-7 text-xs -translate-y-5 peer-focus:text-xs peer-focus:-translate-y-5 peer-placeholder-shown:text-sm peer-placeholder-shown:-translate-y-1/2 peer-[&:user-invalid]:text-red-500 group-has-[:required]:after:content-['*']">
+            @lang($label)
+        </x-rapidez::label>
+    @endif
+    {{ $slot }}
+</label>
+
+
+ --}}
+
+
+<input {{ $attributes->twMerge('w-full rounded-md peer border border-default !bg-white pt-7 pb-2.5 px-5 text-sm outline-none !ring !ring-background transition-all placeholder-transparent focus:border-emphasis focus:!ring-background-emphasis disabled:bg-emphasis disabled:text-muted [&:input:-internal-autofill-selected]:bg-white font-medium disabled:pr-12 [&:user-invalid]:border-red-300 appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none') }} />
\ No newline at end of file
diff --git a/resources/views/components/input/input.blade.php b/resources/views/components/input/input.blade.php
index 9d4e3b1..e69de29 100644
--- a/resources/views/components/input/input.blade.php
+++ b/resources/views/components/input/input.blade.php
@@ -1,16 +0,0 @@
-@props(['label' => false])
-<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'v-cloak', 'class'])->merge(['class' => 'block relative group']) }}>
-    <input {{ $attributes->merge([
-        'id' => $attributes->get('name'),
-        'placeholder' => $attributes->get('placeholder'),
-        'type' => 'text',
-        'dusk' => $attributes->get('v-bind:dusk') ? null : $attributes->get('name'),
-        'class' => 'w-full rounded-md peer border border-default !bg-white pt-7 pb-2.5 px-5 text-sm outline-none !ring !ring-background transition-all placeholder-transparent focus:border-emphasis focus:!ring-background-emphasis disabled:bg-emphasis disabled:text-muted [&:input:-internal-autofill-selected]:bg-white font-medium disabled:pr-12 [&:user-invalid]:border-red-300 appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-    ]) }}>
-    @if ($label)
-        <x-rapidez::label :required="$attributes->get('required')" class="pointer-events-none mt-0.5 transition-all absolute left-5 top-7 text-xs -translate-y-5 peer-focus:text-xs peer-focus:-translate-y-5 peer-placeholder-shown:text-sm peer-placeholder-shown:-translate-y-1/2 peer-[&:user-invalid]:text-red-500 group-has-[:required]:after:content-['*']">
-            @lang($label)
-        </x-rapidez::label>
-    @endif
-    {{ $slot }}
-</label>
diff --git a/resources/views/components/input/label.blade.php b/resources/views/components/input/label.blade.php
deleted file mode 100644
index 7806732..0000000
--- a/resources/views/components/input/label.blade.php
+++ /dev/null
@@ -1,7 +0,0 @@
-@props(['required' => false])
-<span {{ $attributes->class('text-muted text-sm') }}>
-    {{ $slot }}
-    @if ($required)
-        <span>*</span>
-    @endif
-</span>
diff --git a/resources/views/components/input/password/password.blade.php b/resources/views/components/input/password/password.blade.php
index cd53ca6..0a34d71 100644
--- a/resources/views/components/input/password/password.blade.php
+++ b/resources/views/components/input/password/password.blade.php
@@ -1,13 +1,17 @@
 <div>
     <toggler>
         <div class="relative" slot-scope="{ isOpen, toggle }">
-            <x-rapidez-ct::input
-                :label="__('Password')"
-                type="password"
-                v-bind:type="isOpen ? 'text' : 'password'"
-                {{ $attributes }}
-            />
-
+            <x-rapidez-ct::label.animated>
+                <x-slot:label>
+                    @lang('Password')
+                </x-slot:label>
+                <x-rapidez-ct::input.animated
+                    type="password"
+                    v-bind:type="isOpen ? 'text' : 'password'"
+                    placeholder
+                    {{ $attributes }}
+                />
+            </x-rapidez-ct::label.animated>
             
             @if (!$attributes['disabled'] ?? false)
                 <div v-on:click="toggle" class="absolute right-5 top-1/2 -translate-y-1/2 cursor-pointer">
diff --git a/resources/views/components/input/select/select.blade.php b/resources/views/components/input/select/select.blade.php
index 2ace521..816a63c 100644
--- a/resources/views/components/input/select/select.blade.php
+++ b/resources/views/components/input/select/select.blade.php
@@ -1,15 +1,7 @@
-@props(['label' => false])
-<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'class'])->class('relative block') }}>
-    <select {{ $attributes
-        ->except(['v-if', 'v-else', 'v-else-if', 'class'])
-        ->class('w-full cursor-pointer border border-default focus:border-emphasis bg-white pt-7 pb-2.5 px-5 text-sm font-medium rounded-m bg-white outline-none transition-all disabled:bg-emphasis !ring !ring-background focus:!ring-background-emphasis rounded-md') }}>
-        @isset($slot)
-            {{ $slot }}
-        @endisset
-    </select>
-    @if ($label)
-        <x-rapidez::label :required="$attributes->get('required')" class="pointer-events-none transition-all absolute left-5 top-1/2 text-xs -translate-y-5">
-            @lang($label)
-        </x-rapidez::label>
-    @endif
-</label>
\ No newline at end of file
+<select {{ $attributes
+    ->except(['v-if', 'v-else', 'v-else-if', 'class'])
+    ->class('w-full cursor-pointer border border-default focus:border-emphasis bg-white pt-7 pb-2.5 px-5 text-sm font-medium rounded-m bg-white outline-none transition-all disabled:bg-emphasis !ring !ring-background focus:!ring-background-emphasis rounded-md') }}>
+    @isset($slot)
+        {{ $slot }}
+    @endisset
+</select>
\ No newline at end of file
diff --git a/resources/views/components/label/animated.blade.php b/resources/views/components/label/animated.blade.php
new file mode 100644
index 0000000..a442739
--- /dev/null
+++ b/resources/views/components/label/animated.blade.php
@@ -0,0 +1,8 @@
+@slots(['label'])
+
+<label {{ $attributes->twMerge('relative block') }}>
+    {{ $slot }}
+    <span {{ $label->attributes->twMerge("pointer-events-none mt-0.5 transition-all absolute left-5 top-7 text-xs -translate-y-5 peer-focus:text-xs peer-focus:-translate-y-5 peer-placeholder-shown:text-sm peer-placeholder-shown:-translate-y-1/2 peer-[&:user-invalid]:text-red-500 group-has-[:required]:after:content-['*']") }}>
+        {{ $label }}
+    </span>
+</label>
\ No newline at end of file
diff --git a/resources/views/components/newsletter/partials/input.blade.php b/resources/views/components/newsletter/partials/input.blade.php
index 83414b7..383b300 100644
--- a/resources/views/components/newsletter/partials/input.blade.php
+++ b/resources/views/components/newsletter/partials/input.blade.php
@@ -3,15 +3,18 @@ class="relative flex gap-3 flex-wrap max-md:flex-col w-full z-10"
     v-on:submit.prevent="mutate"
 >
     <div class="flex-1">
-            
-        <x-rapidez-ct::input
-            :label="__('Email')"
-            name="email-newsletter"
-            type="email"
-            required
-            v-model="variables.email"
-            :placeholder="__('Enter your email address')"
-        />
+        <x-rapidez-ct::label.animated>
+            <x-slot:label>
+                @lang('Email')
+            </x-slot:label>
+            <x-rapidez-ct::input.animated
+                name="email-newsletter"
+                type="email"
+                required
+                v-model="variables.email"
+                placeholder
+            />
+        </x-rapidez-ct::label.animated>
     </div>
     <x-rapidez::button.secondary
         class="relative whitespace-nowrap self-end"

From a46a173b4bb568f469caa39aab88ad6a9de28e85 Mon Sep 17 00:00:00 2001
From: Jordy de Vulder <jordy@justbetter.nl>
Date: Fri, 10 Jan 2025 10:56:22 +0100
Subject: [PATCH 10/11] removed commented code

---
 .../views/components/address-form.blade.php   |  2 +-
 .../views/components/input/animated.blade.php | 21 -------------------
 .../views/components/input/input.blade.php    |  0
 3 files changed, 1 insertion(+), 22 deletions(-)
 delete mode 100644 resources/views/components/input/input.blade.php

diff --git a/resources/views/components/address-form.blade.php b/resources/views/components/address-form.blade.php
index fbafad4..81d40f9 100644
--- a/resources/views/components/address-form.blade.php
+++ b/resources/views/components/address-form.blade.php
@@ -116,7 +116,7 @@
             <x-rapidez-ct::input.animated
                 name="{{ $type }}_addition"
                 v-model="{{ $address }}.street[2]"
-                :placeholder="__('Addition')"
+                placeholder
             />
         </x-rapidez-ct::label.animated>
     @endif
diff --git a/resources/views/components/input/animated.blade.php b/resources/views/components/input/animated.blade.php
index c174151..785afea 100644
--- a/resources/views/components/input/animated.blade.php
+++ b/resources/views/components/input/animated.blade.php
@@ -1,22 +1 @@
-{{-- @props(['label' => false])
-<label {{ $attributes->only(['v-if', 'v-else', 'v-else-if', 'v-cloak', 'class'])->merge(['class' => 'block relative group']) }}>
-    <input {{ $attributes->merge([
-        'id' => $attributes->get('name'),
-        'placeholder' => $attributes->get('placeholder'),
-        'type' => 'text',
-        'dusk' => $attributes->get('v-bind:dusk') ? null : $attributes->get('name'),
-        'class' => 'w-full rounded-md peer border border-default !bg-white pt-7 pb-2.5 px-5 text-sm outline-none !ring !ring-background transition-all placeholder-transparent focus:border-emphasis focus:!ring-background-emphasis disabled:bg-emphasis disabled:text-muted [&:input:-internal-autofill-selected]:bg-white font-medium disabled:pr-12 [&:user-invalid]:border-red-300 appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none',
-    ]) }}>
-    @if ($label)
-        <x-rapidez::label :required="$attributes->get('required')" class="pointer-events-none mt-0.5 transition-all absolute left-5 top-7 text-xs -translate-y-5 peer-focus:text-xs peer-focus:-translate-y-5 peer-placeholder-shown:text-sm peer-placeholder-shown:-translate-y-1/2 peer-[&:user-invalid]:text-red-500 group-has-[:required]:after:content-['*']">
-            @lang($label)
-        </x-rapidez::label>
-    @endif
-    {{ $slot }}
-</label>
-
-
- --}}
-
-
 <input {{ $attributes->twMerge('w-full rounded-md peer border border-default !bg-white pt-7 pb-2.5 px-5 text-sm outline-none !ring !ring-background transition-all placeholder-transparent focus:border-emphasis focus:!ring-background-emphasis disabled:bg-emphasis disabled:text-muted [&:input:-internal-autofill-selected]:bg-white font-medium disabled:pr-12 [&:user-invalid]:border-red-300 appearance-none [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none') }} />
\ No newline at end of file
diff --git a/resources/views/components/input/input.blade.php b/resources/views/components/input/input.blade.php
deleted file mode 100644
index e69de29..0000000

From 0b02065a5b2e882416167e9467c60b938e835236 Mon Sep 17 00:00:00 2001
From: Jordy de Vulder <jordy@justbetter.nl>
Date: Wed, 29 Jan 2025 16:41:01 +0100
Subject: [PATCH 11/11] Tweaked classes

---
 resources/views/cart/partials/product/remove-button.blade.php | 4 ++--
 resources/views/cart/partials/sidebar/usps.blade.php          | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/resources/views/cart/partials/product/remove-button.blade.php b/resources/views/cart/partials/product/remove-button.blade.php
index 47a356e..050c75e 100644
--- a/resources/views/cart/partials/product/remove-button.blade.php
+++ b/resources/views/cart/partials/product/remove-button.blade.php
@@ -6,7 +6,7 @@
     :error-callback="checkResponseForExpiredCart"
     v-slot="{ mutate }"
 >
-    <button v-on:click="mutate" class="text-muted mt-1 text-xs hover:underline" :dusk="'item-delete-' + index" title="{{ __('Remove') }}">
+    <button v-on:click="mutate" class="mt-1 text-xs" :dusk="'item-delete-' + index" title="{{ __('Remove') }}">
         <x-heroicon-o-trash class="text-muted w-5"/>
-    </button>
+    </button>   
 </graphql-mutation>
diff --git a/resources/views/cart/partials/sidebar/usps.blade.php b/resources/views/cart/partials/sidebar/usps.blade.php
index e3d957c..f70a390 100644
--- a/resources/views/cart/partials/sidebar/usps.blade.php
+++ b/resources/views/cart/partials/sidebar/usps.blade.php
@@ -1,4 +1,4 @@
-<ul class="mt-4 flex flex-col gap-1 text-sm [&>li]:flex [&>li]:gap-x-2">
+<ul class="mt-4 flex flex-col gap-1 text-sm *:flex *:gap-x-2">
     @foreach (['Ordered before 7:00 PM, delivered tomorrow', 'Free shipping from €65', 'Free and easy returns', 'Rated 8.7/10'] as $usp)
         <li>
             <x-heroicon-o-check stroke-width="3.2" class="mt-0.5 h-4 shrink-0 text-primary" />