From dd1cd7da34b1f3746048e903ce4fe15c70a40335 Mon Sep 17 00:00:00 2001
From: Jakub Freisler <jakub@frsource.org>
Date: Fri, 22 Sep 2023 10:34:16 +0200
Subject: [PATCH 1/5] feat: alert block component [SV-155]

Signed-off-by: Jakub Freisler <jakub@frsource.org>
---
 .../.vuepress/components/Showcase.vue         | 15 +++-
 apps/docs/components/blocks/Alert.md          | 71 ++++++++++++++-----
 .../nuxt/pages/showcases/Alert/Alert.vue      | 48 +++++++++++++
 .../nuxt/pages/showcases/Alert/AlertError.vue | 54 +++++++++-----
 .../pages/showcases/Alert/AlertNeutral.vue    | 17 +++--
 .../pages/showcases/Alert/AlertPositive.vue   | 39 ++++++----
 .../pages/showcases/Alert/AlertSecondary.vue  | 17 +++--
 .../pages/showcases/Alert/AlertWarning.vue    | 44 ++++++++----
 8 files changed, 228 insertions(+), 77 deletions(-)
 create mode 100644 apps/preview/nuxt/pages/showcases/Alert/Alert.vue

diff --git a/apps/docs/components/.vuepress/components/Showcase.vue b/apps/docs/components/.vuepress/components/Showcase.vue
index cc27ddbe66..82091e88e9 100644
--- a/apps/docs/components/.vuepress/components/Showcase.vue
+++ b/apps/docs/components/.vuepress/components/Showcase.vue
@@ -9,9 +9,17 @@
         Preview
       </button>
       <button
+        v-if="$slots.usage"
         @click="tab = 2"
         class="px-3 py-2 border-b-2 dark:border-zinc-700"
         :class="[tab === 2 ? 'text-black dark:text-white border-green dark:border-green' : '']"
+      >
+        Usage
+      </button>
+      <button
+        @click="tab = $slots.usage ? 3 : 2"
+        class="px-3 py-2 border-b-2 dark:border-zinc-700"
+        :class="[(tab === ($slots.usage ? 3 : 2)) ? 'text-black dark:text-white border-green dark:border-green' : '']"
       >
         Code
       </button>
@@ -30,7 +38,12 @@
           <iconify-icon icon="akar-icons:drag-vertical" class="pointer-events-none" />
         </div>
       </div>
-      <div v-show="tab === 2 && showSource" class="relative">
+      <div v-show="tab === 2" class="relative">
+        <SourceCode>
+          <slot name="usage" />
+        </SourceCode>
+      </div>
+      <div v-show="showSource && tab === ($slots.usage ? 3 : 2)" class="relative">
         <SourceCode>
           <slot />
         </SourceCode>
diff --git a/apps/docs/components/blocks/Alert.md b/apps/docs/components/blocks/Alert.md
index aace17a73b..e7fd17ca77 100644
--- a/apps/docs/components/blocks/Alert.md
+++ b/apps/docs/components/blocks/Alert.md
@@ -12,69 +12,106 @@ hideToc: true
 
 Simple version of alert that has neutral grey color.
 
-<Showcase showcase-name="Alert/AlertNeutral" >
+<Showcase showcase-name="Alert/AlertNeutral" style="min-height:210px">
 
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertNeutral.tsx#source
 <!-- end react -->
+:::
 
-</Showcase>
-
-## Alert positive
-
-Green color indicates that an action went successful.
-
-<Showcase showcase-name="Alert/AlertPositive" >
 <!-- vue -->
-<<<../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
 <!-- end vue -->
 <!-- react -->
-<<<../../preview/next/pages/showcases/Alert/AlertPositive.tsx#source
+<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
 <!-- end react -->
+
 </Showcase>
 
 ## Alert secondary
 
 This type is informative just like neutral except that its palette is more noticeable.
 
-<Showcase showcase-name="Alert/AlertSecondary" >
+<Showcase showcase-name="Alert/AlertSecondary" style="min-height:210px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertSecondary.tsx#source
 <!-- end react -->
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<!-- end react -->
+</Showcase>
+
+## Alert positive
+
+Green color indicates that an action went successful.
+
+<Showcase showcase-name="Alert/AlertPositive" style="min-height:230px">
+::: slot usage
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/Alert/AlertPositive.tsx#source
+<!-- end react -->
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<!-- end react -->
 </Showcase>
 
 ## Alert warning
 
 Alert can be more descriptive and its content can be splitted into title and description.
 
-<Showcase showcase-name="Alert/AlertWarning" >
-
+<Showcase showcase-name="Alert/AlertWarning" style="min-height:280px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertWarning.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertWarning.tsx#source
 <!-- end react -->
-
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<!-- end react -->
 </Showcase>
 
 ## Alert error
 
 This type is usually used for information displayed when an important problem occurs.
 
-<Showcase showcase-name="Alert/AlertError" >
-
+<Showcase showcase-name="Alert/AlertError" style="min-height:230px">
+::: slot usage
 <!-- vue -->
 <<<../../preview/nuxt/pages/showcases/Alert/AlertError.vue
 <!-- end vue -->
 <!-- react -->
 <<<../../preview/next/pages/showcases/Alert/AlertError.tsx#source
 <!-- end react -->
-
+:::
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
+<!-- end vue -->
+<!-- react -->
+<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<!-- end react -->
 </Showcase>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/Alert.vue b/apps/preview/nuxt/pages/showcases/Alert/Alert.vue
new file mode 100644
index 0000000000..719cccf380
--- /dev/null
+++ b/apps/preview/nuxt/pages/showcases/Alert/Alert.vue
@@ -0,0 +1,48 @@
+<template>
+  <div :class="['inline-flex items-start border py-1 ps-4 pe-2', sizeClasses[size], classes]" role="alert">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+const sizeClasses = {
+  sm: 'typography-text-sm',
+  base: 'typography-text-base',
+};
+</script>
+
+<script setup lang="ts">
+import { type PropType, computed } from 'vue';
+
+const props = defineProps({
+  size: {
+    type: String as PropType<'sm' | 'base'>,
+    default: 'base',
+  },
+  strong: {
+    type: Boolean,
+    default: false,
+  },
+  variant: {
+    type: String as PropType<'primary' | 'secondary' | 'positive' | 'warning' | 'negative' | 'neutral'>,
+    default: 'primary',
+  },
+});
+
+const classes = computed(() => {
+  switch (props.variant) {
+    case 'primary':
+      return `border-primary-200 ${props.strong ? 'bg-primary-600' : 'bg-primary-100'}`;
+    case 'secondary':
+      return `border-secondary-200 ${props.strong ? 'bg-secondary-800' : 'bg-secondary-100'}`;
+    case 'positive':
+      return `border-positive-200 ${props.strong ? 'bg-positive-600' : 'bg-positive-100'}`;
+    case 'warning':
+      return `border-warning-200 ${props.strong ? 'bg-warning-600' : 'bg-warning-100'}`;
+    case 'negative':
+      return `border-negative-200 ${props.strong ? 'bg-negative-600' : 'bg-negative-100'}`;
+    default:
+      return `border-neutral-200 ${props.strong ? 'bg-neutral-600' : 'bg-neutral-100'}`;
+  }
+});
+</script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
index 634452941e..f575c5946b 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
@@ -1,25 +1,41 @@
 <template>
-  <div
-    role="alert"
-    class="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <p class="py-2 mr-2">The password change was failed.</p>
-    <button
-      type="button"
-      class="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-    >
-      Retry
-    </button>
-    <button
-      type="button"
-      class="p-1.5 md:p-2 ml-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
-      aria-label="Close error alert"
-    >
-      <SfIconClose class="hidden md:block" />
-      <SfIconClose size="sm" class="block md:hidden" />
-    </button>
+  <div class="flex flex-col gap-4">
+    <Alert variant="negative" class="w-full max-w-[640px] shadow-md">
+      <p class="py-2 me-2">The password change was failed.</p>
+      <button
+        type="button"
+        class="py-2 px-4 ms-auto me-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Retry
+      </button>
+      <button
+        type="button"
+        class="p-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close error alert"
+      >
+        <SfIconClose />
+      </button>
+    </Alert>
+
+    <Alert variant="negative" class="w-full max-w-[320px] shadow-md" size="sm">
+      <p class="py-1.5 me-2">The password change was failed.</p>
+      <button
+        type="button"
+        class="py-1.5 px-3 ms-auto me-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Retry
+      </button>
+      <button
+        type="button"
+        class="p-1.5 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close error alert"
+      >
+        <SfIconClose size="sm" />
+      </button>
+    </Alert>
   </div>
 </template>
 <script lang="ts" setup>
 import { SfIconClose } from '@storefront-ui/vue';
+import Alert from './Alert.vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
index a5f34d30cd..043bb6876b 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
@@ -1,8 +1,15 @@
 <template>
-  <div
-    role="alert"
-    class="bg-neutral-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-neutral-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <p class="py-2">Happy shopping!</p>
+  <div class="flex flex-col gap-4">
+    <Alert variant="neutral" class="w-full max-w-[640px] shadow-md">
+      <p class="py-2">Happy shopping!</p>
+    </Alert>
+
+    <Alert variant="neutral" class="w-full max-w-[320px] shadow-md" size="sm">
+      <p class="py-2">Happy shopping!</p>
+    </Alert>
   </div>
 </template>
+
+<script lang="ts" setup>
+import Alert from './Alert.vue';
+</script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
index 960ea5e6f7..80472f11ec 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
@@ -1,21 +1,32 @@
 <template>
-  <div
-    role="alert"
-    class="flex items-start md:items-center max-w-[600px] shadow-md bg-positive-100 pr-2 pl-4 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <SfIconCheckCircle class="my-2 mr-2 text-positive-700 shrink-0" />
-    <p class="py-2 mr-2">The product has been added to the cart.</p>
-    <button
-      type="button"
-      class="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
-      aria-label="Close positive alert"
-    >
-      <SfIconClose class="hidden md:block" />
-      <SfIconClose size="sm" class="block md:hidden" />
-    </button>
+  <div class="flex flex-col gap-4">
+    <Alert variant="positive" class="w-full max-w-[640px] shadow-md">
+      <SfIconCheckCircle class="mt-2 me-2 text-positive-700 shrink-0" />
+      <p class="py-2 me-2">The product has been added to the cart.</p>
+      <button
+        type="button"
+        class="p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close positive alert"
+      >
+        <SfIconClose />
+      </button>
+    </Alert>
+
+    <Alert variant="positive" class="w-full max-w-[320px] shadow-md" size="sm">
+      <SfIconCheckCircle size="sm" class="mt-1.5 me-2 text-positive-700 shrink-0" />
+      <p class="py-1.5 me-2">The product has been added to the cart.</p>
+      <button
+        type="button"
+        class="p-1.5 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+        aria-label="Close positive alert"
+      >
+        <SfIconClose size="sm" />
+      </button>
+    </Alert>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { SfIconCheckCircle, SfIconClose } from '@storefront-ui/vue';
+import Alert from './Alert.vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
index 4543048f86..69f99ca960 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
@@ -1,13 +1,18 @@
 <template>
-  <div
-    role="alert"
-    class="flex items-center max-w-[600px] shadow-md bg-secondary-100 pr-2 pl-4 ring-1 ring-secondary-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <SfIconInfo class="mr-2 text-secondary-700 shrink-0" />
-    <p class="py-2">Your cart will soon be full.</p>
+  <div class="flex flex-col gap-4">
+    <Alert variant="secondary" class="w-full max-w-[640px] shadow-md">
+      <SfIconInfo class="mt-2 me-2 text-secondary-700 shrink-0" />
+      <p class="py-2">Your cart will soon be full.</p>
+    </Alert>
+
+    <Alert variant="secondary" class="w-full max-w-[320px] shadow-md" size="sm">
+      <SfIconInfo size="sm" class="mt-1.5 me-2 text-secondary-700 shrink-0" />
+      <p class="py-1.5">Your cart will soon be full.</p>
+    </Alert>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { SfIconInfo } from '@storefront-ui/vue';
+import Alert from './Alert.vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
index 0bf79ff313..1fa9407e5c 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
@@ -1,22 +1,36 @@
 <template>
-  <div
-    role="alert"
-    class="flex items-start bg-warning-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-warning-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-  >
-    <SfIconWarning class="mt-2 mr-2 text-warning-700 shrink-0" />
-    <div class="py-2 mr-2">
-      <p class="font-medium typography-text-base md:typography-text-lg">Your account</p>
-      <p>Your shipping details need to be updated.</p>
-    </div>
-    <button
-      type="button"
-      class="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-    >
-      Update
-    </button>
+  <div class="flex flex-col gap-4">
+    <Alert variant="warning" class="w-full max-w-[640px] shadow-md">
+      <SfIconWarning class="mt-2 me-2 text-warning-700 shrink-0" />
+      <div class="py-2 me-2">
+        <p class="font-medium">Your account</p>
+        <p>Your shipping details need to be updated.</p>
+      </div>
+      <button
+        type="button"
+        class="py-2 px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Update
+      </button>
+    </Alert>
+
+    <Alert variant="warning" class="w-full max-w-[320px] shadow-md" size="sm">
+      <SfIconWarning size="sm" class="mt-1.5 me-2 text-warning-700 shrink-0" />
+      <div class="py-1.5 me-2">
+        <p class="font-medium">Your account</p>
+        <p>Your shipping details need to be updated.</p>
+      </div>
+      <button
+        type="button"
+        class="py-1.5 px-3 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+      >
+        Update
+      </button>
+    </Alert>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { SfIconWarning } from '@storefront-ui/vue';
+import Alert from './Alert.vue';
 </script>

From f6cc051478247bde004cb52ff82d41f80d5be2b3 Mon Sep 17 00:00:00 2001
From: Jakub Freisler <jakub@frsource.org>
Date: Mon, 25 Sep 2023 10:37:10 +0200
Subject: [PATCH 2/5] chore: alert rewrite block component

Signed-off-by: Jakub Freisler <jakub@frsource.org>
---
 .../.vuepress/components/Showcase.vue         | 23 +++++---
 apps/docs/components/blocks/Alert.md          | 18 +++---
 apps/docs/components/react/blocks.md          |  4 ++
 apps/docs/components/vue/blocks.md            |  4 ++
 .../next/pages/showcases/Alert/Alert.tsx      | 56 ++++++++++++++++++
 .../next/pages/showcases/Alert/AlertError.tsx | 58 ++++++++++++-------
 .../pages/showcases/Alert/AlertNeutral.tsx    | 14 +++--
 .../pages/showcases/Alert/AlertPositive.tsx   | 39 ++++++++-----
 .../pages/showcases/Alert/AlertSecondary.tsx  | 17 ++++--
 .../pages/showcases/Alert/AlertWarning.tsx    | 44 +++++++++-----
 .../nuxt/pages/showcases/Alert/Alert.vue      | 44 ++++++--------
 .../nuxt/pages/showcases/Alert/AlertError.vue | 17 +++---
 .../pages/showcases/Alert/AlertNeutral.vue    |  6 +-
 .../pages/showcases/Alert/AlertPositive.vue   | 16 ++---
 .../pages/showcases/Alert/AlertSecondary.vue  |  8 +--
 .../pages/showcases/Alert/AlertWarning.vue    | 16 ++---
 .../vue/components/SfInput/SfInput.vue        |  4 +-
 17 files changed, 254 insertions(+), 134 deletions(-)
 create mode 100644 apps/preview/next/pages/showcases/Alert/Alert.tsx

diff --git a/apps/docs/components/.vuepress/components/Showcase.vue b/apps/docs/components/.vuepress/components/Showcase.vue
index 82091e88e9..6b38459d08 100644
--- a/apps/docs/components/.vuepress/components/Showcase.vue
+++ b/apps/docs/components/.vuepress/components/Showcase.vue
@@ -14,14 +14,14 @@
         class="px-3 py-2 border-b-2 dark:border-zinc-700"
         :class="[tab === 2 ? 'text-black dark:text-white border-green dark:border-green' : '']"
       >
-        Usage
+        Source
       </button>
       <button
         @click="tab = $slots.usage ? 3 : 2"
-        class="px-3 py-2 border-b-2 dark:border-zinc-700"
-        :class="[(tab === ($slots.usage ? 3 : 2)) ? 'text-black dark:text-white border-green dark:border-green' : '']"
+        class="px-3 py-2 border-b-2 dark:border-zinc-700 bg-green text-white"
+        :class="[tab === ($slots.usage ? 3 : 2) ? 'border-green dark:border-green' : 'opacity-80']"
       >
-        Code
+        Block Code
       </button>
     </div>
     <div ref="wrapperRef" class="relative flex-1 flex flex-col">
@@ -33,7 +33,14 @@
         @touchstart="eventDownListener"
       >
         <div class="absolute inset-0" v-show="isHandlerDragging"></div>
-        <Generate :showcase-path="showcaseName" :allow="allow" class="flex-grow rounded" style="margin-top: 0" :no-paddings="noPaddings" :no-scale="noScale"/>
+        <Generate
+          :showcase-path="showcaseName"
+          :allow="allow"
+          class="flex-grow rounded"
+          style="margin-top: 0"
+          :no-paddings="noPaddings"
+          :no-scale="noScale"
+        />
         <div ref="handlerRef" class="select-none rounded-tr items-center hidden sm:flex" style="cursor: ew-resize">
           <iconify-icon icon="akar-icons:drag-vertical" class="pointer-events-none" />
         </div>
@@ -61,11 +68,11 @@ export default {
     },
     noPaddings: {
       type: Boolean,
-      default: false
+      default: false,
     },
     noScale: {
       type: Boolean,
-      default: false
+      default: false,
     },
     allow: {
       type: String,
@@ -87,7 +94,7 @@ export default {
     document.addEventListener('mousemove', this.eventMoveListener);
     document.addEventListener('touchmove', this.eventMoveListener);
     document.addEventListener('mouseup', this.eventUpListener);
-    document.addEventListener('touchup', this.eventUpListener)
+    document.addEventListener('touchup', this.eventUpListener);
   },
   unmounted() {
     document.removeEventListener('mousemove', this.eventMoveListener);
diff --git a/apps/docs/components/blocks/Alert.md b/apps/docs/components/blocks/Alert.md
index e7fd17ca77..8aa6172a99 100644
--- a/apps/docs/components/blocks/Alert.md
+++ b/apps/docs/components/blocks/Alert.md
@@ -1,7 +1,7 @@
 ---
 layout: DefaultLayout
 hideBreadcrumbs: true
-description: Alert is a notification that keeps people informed of the status of the system and which may or not require the user respond.
+description: Alert is a notification that keeps people informed of the status of the system and which may or not require the user response.
 hideToc: true
 ---
 # Alert
@@ -10,7 +10,7 @@ hideToc: true
 
 ## Alert neutral
 
-Simple version of alert that has neutral grey color.
+A simple version of the alert that has a neutral grey color.
 
 <Showcase showcase-name="Alert/AlertNeutral" style="min-height:210px">
 
@@ -27,7 +27,7 @@ Simple version of alert that has neutral grey color.
 <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
 <!-- end vue -->
 <!-- react -->
-<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
 <!-- end react -->
 
 </Showcase>
@@ -49,13 +49,13 @@ This type is informative just like neutral except that its palette is more notic
 <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
 <!-- end vue -->
 <!-- react -->
-<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
 <!-- end react -->
 </Showcase>
 
 ## Alert positive
 
-Green color indicates that an action went successful.
+A green color indicates that an action was successful.
 
 <Showcase showcase-name="Alert/AlertPositive" style="min-height:230px">
 ::: slot usage
@@ -70,13 +70,13 @@ Green color indicates that an action went successful.
 <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
 <!-- end vue -->
 <!-- react -->
-<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
 <!-- end react -->
 </Showcase>
 
 ## Alert warning
 
-Alert can be more descriptive and its content can be splitted into title and description.
+Alert can be more descriptive and its content can be split into title and description.
 
 <Showcase showcase-name="Alert/AlertWarning" style="min-height:280px">
 ::: slot usage
@@ -91,7 +91,7 @@ Alert can be more descriptive and its content can be splitted into title and des
 <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
 <!-- end vue -->
 <!-- react -->
-<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
 <!-- end react -->
 </Showcase>
 
@@ -112,6 +112,6 @@ This type is usually used for information displayed when an important problem oc
 <<<../../preview/nuxt/pages/showcases/Alert/Alert.vue
 <!-- end vue -->
 <!-- react -->
-<!-- <<<../../preview/next/pages/showcases/Alert/Alert.tsx#source -->
+<<<../../preview/next/pages/showcases/Alert/Alert.tsx#source
 <!-- end react -->
 </Showcase>
diff --git a/apps/docs/components/react/blocks.md b/apps/docs/components/react/blocks.md
index a66e5b57a1..8e5f9f4d05 100644
--- a/apps/docs/components/react/blocks.md
+++ b/apps/docs/components/react/blocks.md
@@ -13,4 +13,8 @@ hideToc: true
 Fully accessible UI blocks, designed to integrate beautifully with Tailwind CSS and Vue.
 :::
 
+::: tip
+Some blocks contain "Block Code" tab with our proposition of a reusable component code. Copy it over into your project to use the rest of the examples for such a block.
+:::
+
 <ComponentList framework="react" type="blocks" hide-description/>
diff --git a/apps/docs/components/vue/blocks.md b/apps/docs/components/vue/blocks.md
index 457213e37f..5d28537fcc 100644
--- a/apps/docs/components/vue/blocks.md
+++ b/apps/docs/components/vue/blocks.md
@@ -13,4 +13,8 @@ hideToc: true
 Fully accessible UI blocks, designed to integrate beautifully with Tailwind CSS and Vue.
 :::
 
+::: tip
+Some blocks contain "Block Code" tab with our proposition of a reusable component code. Copy it over into your project to use the rest of the examples for such a block.
+:::
+
 <ComponentList framework="vue"  type="blocks" hide-description/>
diff --git a/apps/preview/next/pages/showcases/Alert/Alert.tsx b/apps/preview/next/pages/showcases/Alert/Alert.tsx
new file mode 100644
index 0000000000..63f497d929
--- /dev/null
+++ b/apps/preview/next/pages/showcases/Alert/Alert.tsx
@@ -0,0 +1,56 @@
+import { ShowcasePageLayout } from '../../showcases';
+// #region source
+import type { PropsWithStyle } from '@storefront-ui/react';
+import { type PropsWithChildren, forwardRef } from 'react';
+import classNames from 'classnames';
+
+const sizeClasses = {
+  sm: 'typography-text-sm',
+  base: 'typography-text-base',
+};
+const variantClasses = {
+  primary: 'border-primary-200 bg-primary-100',
+  secondary: 'border-secondary-200 bg-secondary-100',
+  positive: 'border-positive-200 bg-positive-100',
+  warning: 'border-warning-200 bg-warning-100',
+  negative: 'border-negative-200 bg-negative-100',
+  neutral: 'border-neutral-200 bg-neutral-100',
+};
+
+export interface AlertProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    PropsWithStyle,
+    PropsWithChildren {
+  size?: keyof typeof sizeClasses,
+  variant?: keyof typeof variantClasses
+}
+
+const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
+  const {
+    className,
+    size = 'base',
+    variant = 'neutral',
+    children,
+    ...attributes
+  } = props;
+
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      className={classNames([
+        'border inline-flex items-start py-1 ps-4 pe-2 gap-2 rounded-md shadow-md',
+        sizeClasses[size],
+        variantClasses[variant],
+        className,
+      ])}
+      {...attributes}
+    >
+      {children}
+    </div>
+  );
+});
+
+export default Alert;
+// #endregion source
+Alert.getLayout = ShowcasePageLayout;
diff --git a/apps/preview/next/pages/showcases/Alert/AlertError.tsx b/apps/preview/next/pages/showcases/Alert/AlertError.tsx
index 1dae9ba836..0743af12ec 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertError.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertError.tsx
@@ -1,28 +1,46 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
-import { SfIconClose } from '@storefront-ui/react';
+import { SfIconError, SfIconClose } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertError() {
   return (
-    <div
-      role="alert"
-      className="flex items-start md:items-center max-w-[600px] shadow-md bg-negative-100 pr-2 pl-4 ring-1 ring-negative-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <p className="py-2 mr-2">The password change was failed.</p>
-      <button
-        type="button"
-        className="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-      >
-        Retry
-      </button>
-      <button
-        type="button"
-        className="p-1.5 md:p-2 ml-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
-        aria-label="Close error alert"
-      >
-        <SfIconClose className="hidden md:block" />
-        <SfIconClose size="sm" className="block md:hidden" />
-      </button>
+    <div className="flex flex-col gap-4">
+      <Alert variant="negative" className="w-full max-w-[640px]">
+        <SfIconError className="my-2 text-negative-700 shrink-0" />
+        <p className="py-2">The password change was failed.</p>
+        <button
+          type="button"
+          className="ms-auto py-2 px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Retry
+        </button>
+        <button
+          type="button"
+          className="p-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close error alert"
+        >
+          <SfIconClose />
+        </button>
+      </Alert>
+  
+      <Alert variant="negative" size="sm" className="w-full max-w-[320px]">
+        <SfIconError className="my-1.5 text-negative-700 shrink-0" size="sm" />
+        <p className="py-2">The password change was failed.</p>
+        <button
+          type="button"
+          className="ms-auto py-1.5 px-3 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Retry
+        </button>
+        <button
+          type="button"
+          className="p-1.5 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close error alert"
+        >
+          <SfIconClose size="sm" />
+        </button>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx b/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
index f268a2e497..6eb0b31224 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
@@ -1,13 +1,17 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
+import Alert from './Alert';
 
 export default function AlertNeutral() {
   return (
-    <div
-      role="alert"
-      className="bg-neutral-100 max-w-[600px] shadow-md pr-2 pl-4 ring-1 ring-neutral-300 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <p className="py-2">Happy shopping!</p>
+    <div className="flex flex-col gap-4">
+      <Alert variant="neutral" className="w-full max-w-[640px]">
+        <p className="py-2">Happy shopping!</p>
+      </Alert>
+  
+      <Alert variant="neutral" size="sm" className="w-full max-w-[320px]">
+        <p className="py-1.5">Happy shopping!</p>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx b/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
index 252e42b3c8..a7632efa80 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
@@ -1,23 +1,34 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
 import { SfIconCheckCircle, SfIconClose } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertPositive() {
   return (
-    <div
-      role="alert"
-      className="flex items-start md:items-center max-w-[600px] shadow-md bg-positive-100 pr-2 pl-4 ring-1 ring-positive-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <SfIconCheckCircle className="my-2 mr-2 text-positive-700 shrink-0" />
-      <p className="py-2 mr-2">The product has been added to the cart.</p>
-      <button
-        type="button"
-        className="p-1.5 md:p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
-        aria-label="Close positive alert"
-      >
-        <SfIconClose className="hidden md:block" />
-        <SfIconClose size="sm" className="block md:hidden" />
-      </button>
+    <div className="flex flex-col gap-4">
+      <Alert variant="positive" className="w-full max-w-[640px]">
+        <SfIconCheckCircle className="my-2 text-positive-700 shrink-0" />
+        <p className="py-2">The product has been added to the cart.</p>
+        <button
+          type="button"
+          className="ms-auto p-2 rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close positive alert"
+        >
+          <SfIconClose />
+        </button>
+      </Alert>
+  
+      <Alert variant="positive" className="w-full max-w-[320px]" size="sm">
+        <SfIconCheckCircle size="sm" className="my-1.5 text-positive-700 shrink-0" />
+        <p className="py-1.5">The product has been added to the cart.</p>
+        <button
+          type="button"
+          className="ms-auto p-1.5 rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+          aria-label="Close positive alert"
+        >
+          <SfIconClose size="sm" />
+        </button>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx b/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
index 2e34f6e421..a0901bb303 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
@@ -1,15 +1,20 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
 import { SfIconInfo } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertSecondary() {
   return (
-    <div
-      role="alert"
-      className="flex items-center max-w-[600px] shadow-md bg-secondary-100 pr-2 pl-4 ring-1 ring-secondary-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <SfIconInfo className="mr-2 text-secondary-700 shrink-0" />
-      <p className="py-2">Your cart will soon be full.</p>
+    <div className="flex flex-col gap-4">
+      <Alert variant="secondary" className="w-full max-w-[640px]">
+        <SfIconInfo className="my-2 text-secondary-700 shrink-0" />
+        <p className="py-2">Your cart will soon be full.</p>
+      </Alert>
+  
+      <Alert variant="secondary" size="sm" className="w-full max-w-[320px]">
+        <SfIconInfo size="sm" className="my-1.5 text-secondary-700 shrink-0" />
+        <p className="py-1.5">Your cart will soon be full.</p>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx b/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
index 85074fe029..a81d033e52 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
@@ -1,24 +1,38 @@
 import { ShowcasePageLayout } from '../../showcases';
 // #region source
 import { SfIconWarning } from '@storefront-ui/react';
+import Alert from './Alert';
 
 export default function AlertWarning() {
   return (
-    <div
-      role="alert"
-      className="flex items-start max-w-[600px] shadow-md bg-warning-100 pr-2 pl-4 ring-1 ring-warning-200 typography-text-sm md:typography-text-base py-1 rounded-md"
-    >
-      <SfIconWarning className="mt-2 mr-2 text-warning-700 shrink-0" />
-      <div className="py-2 mr-2">
-        <p className="font-medium typography-text-base md:typography-text-lg">Your account</p>
-        <p>Your shipping details need to be updated.</p>
-      </div>
-      <button
-        type="button"
-        className="py-1.5 px-3 md:py-2 md:px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
-      >
-        Update
-      </button>
+    <div className="flex flex-col gap-4">
+      <Alert variant="warning" className="w-full max-w-[640px]">
+        <SfIconWarning className="my-2 text-warning-700 shrink-0" />
+        <div className="py-2">
+          <p className="font-medium">Your account</p>
+          <p>Your shipping details need to be updated.</p>
+        </div>
+        <button
+          type="button"
+          className="ms-auto py-2 px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Update
+        </button>
+      </Alert>
+  
+      <Alert variant="warning" size="sm" className="w-full max-w-[320px]">
+        <SfIconWarning size="sm" className="my-1.5 text-warning-700 shrink-0" />
+        <div className="py-1.5">
+          <p className="font-medium">Your account</p>
+          <p>Your shipping details need to be updated.</p>
+        </div>
+        <button
+          type="button"
+          className="ms-auto py-1.5 px-3 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+        >
+          Update
+        </button>
+      </Alert>
     </div>
   );
 }
diff --git a/apps/preview/nuxt/pages/showcases/Alert/Alert.vue b/apps/preview/nuxt/pages/showcases/Alert/Alert.vue
index 719cccf380..401d8ab4db 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/Alert.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/Alert.vue
@@ -1,5 +1,12 @@
 <template>
-  <div :class="['inline-flex items-start border py-1 ps-4 pe-2', sizeClasses[size], classes]" role="alert">
+  <div
+    :class="[
+      'border inline-flex items-start py-1 ps-4 pe-2 gap-2 rounded-md shadow-md',
+      sizeClasses[size],
+      variantClasses[variant],
+    ]"
+    role="alert"
+  >
     <slot />
   </div>
 </template>
@@ -9,40 +16,27 @@ const sizeClasses = {
   sm: 'typography-text-sm',
   base: 'typography-text-base',
 };
+const variantClasses = {
+  primary: 'border-primary-200 bg-primary-100',
+  secondary: 'border-secondary-200 bg-secondary-100',
+  positive: 'border-positive-200 bg-positive-100',
+  warning: 'border-warning-200 bg-warning-100',
+  negative: 'border-negative-200 bg-negative-100',
+  neutral: 'border-neutral-200 bg-neutral-100',
+};
 </script>
 
 <script setup lang="ts">
-import { type PropType, computed } from 'vue';
+import { type PropType } from 'vue';
 
-const props = defineProps({
+defineProps({
   size: {
     type: String as PropType<'sm' | 'base'>,
     default: 'base',
   },
-  strong: {
-    type: Boolean,
-    default: false,
-  },
   variant: {
     type: String as PropType<'primary' | 'secondary' | 'positive' | 'warning' | 'negative' | 'neutral'>,
-    default: 'primary',
+    default: 'neutral',
   },
 });
-
-const classes = computed(() => {
-  switch (props.variant) {
-    case 'primary':
-      return `border-primary-200 ${props.strong ? 'bg-primary-600' : 'bg-primary-100'}`;
-    case 'secondary':
-      return `border-secondary-200 ${props.strong ? 'bg-secondary-800' : 'bg-secondary-100'}`;
-    case 'positive':
-      return `border-positive-200 ${props.strong ? 'bg-positive-600' : 'bg-positive-100'}`;
-    case 'warning':
-      return `border-warning-200 ${props.strong ? 'bg-warning-600' : 'bg-warning-100'}`;
-    case 'negative':
-      return `border-negative-200 ${props.strong ? 'bg-negative-600' : 'bg-negative-100'}`;
-    default:
-      return `border-neutral-200 ${props.strong ? 'bg-neutral-600' : 'bg-neutral-100'}`;
-  }
-});
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
index f575c5946b..0accb8427f 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertError.vue
@@ -1,10 +1,11 @@
 <template>
   <div class="flex flex-col gap-4">
-    <Alert variant="negative" class="w-full max-w-[640px] shadow-md">
-      <p class="py-2 me-2">The password change was failed.</p>
+    <Alert variant="negative" class="w-full max-w-[640px]">
+      <SfIconError class="my-2 text-negative-700 shrink-0" />
+      <p class="py-2">The password change was failed.</p>
       <button
         type="button"
-        class="py-2 px-4 ms-auto me-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+        class="ms-auto py-2 px-4 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
       >
         Retry
       </button>
@@ -17,11 +18,12 @@
       </button>
     </Alert>
 
-    <Alert variant="negative" class="w-full max-w-[320px] shadow-md" size="sm">
-      <p class="py-1.5 me-2">The password change was failed.</p>
+    <Alert variant="negative" size="sm" class="w-full max-w-[320px]">
+      <SfIconError class="my-1.5 text-negative-700 shrink-0" size="sm" />
+      <p class="py-2">The password change was failed.</p>
       <button
         type="button"
-        class="py-1.5 px-3 ms-auto me-2 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
+        class="ms-auto py-1.5 px-3 rounded-md text-negative-700 hover:bg-negative-200 active:bg-negative-300 hover:text-negative-800 active:text-negative-900 font-medium focus-visible:outline focus-visible:outline-offset"
       >
         Retry
       </button>
@@ -35,7 +37,8 @@
     </Alert>
   </div>
 </template>
+
 <script lang="ts" setup>
-import { SfIconClose } from '@storefront-ui/vue';
+import { SfIconClose, SfIconError } from '@storefront-ui/vue';
 import Alert from './Alert.vue';
 </script>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
index 043bb6876b..979cc07a51 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertNeutral.vue
@@ -1,11 +1,11 @@
 <template>
   <div class="flex flex-col gap-4">
-    <Alert variant="neutral" class="w-full max-w-[640px] shadow-md">
+    <Alert variant="neutral" class="w-full max-w-[640px]">
       <p class="py-2">Happy shopping!</p>
     </Alert>
 
-    <Alert variant="neutral" class="w-full max-w-[320px] shadow-md" size="sm">
-      <p class="py-2">Happy shopping!</p>
+    <Alert variant="neutral" size="sm" class="w-full max-w-[320px]">
+      <p class="py-1.5">Happy shopping!</p>
     </Alert>
   </div>
 </template>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
index 80472f11ec..3e5c01b81f 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertPositive.vue
@@ -1,23 +1,23 @@
 <template>
   <div class="flex flex-col gap-4">
-    <Alert variant="positive" class="w-full max-w-[640px] shadow-md">
-      <SfIconCheckCircle class="mt-2 me-2 text-positive-700 shrink-0" />
-      <p class="py-2 me-2">The product has been added to the cart.</p>
+    <Alert variant="positive" class="w-full max-w-[640px]">
+      <SfIconCheckCircle class="my-2 text-positive-700 shrink-0" />
+      <p class="py-2">The product has been added to the cart.</p>
       <button
         type="button"
-        class="p-2 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+        class="ms-auto p-2 rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
         aria-label="Close positive alert"
       >
         <SfIconClose />
       </button>
     </Alert>
 
-    <Alert variant="positive" class="w-full max-w-[320px] shadow-md" size="sm">
-      <SfIconCheckCircle size="sm" class="mt-1.5 me-2 text-positive-700 shrink-0" />
-      <p class="py-1.5 me-2">The product has been added to the cart.</p>
+    <Alert variant="positive" class="w-full max-w-[320px]" size="sm">
+      <SfIconCheckCircle size="sm" class="my-1.5 text-positive-700 shrink-0" />
+      <p class="py-1.5">The product has been added to the cart.</p>
       <button
         type="button"
-        class="p-1.5 ml-auto rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
+        class="ms-auto p-1.5 rounded-md text-positive-700 hover:bg-positive-200 active:bg-positive-300 hover:text-positive-800 active:text-positive-900 focus-visible:outline focus-visible:outline-offset"
         aria-label="Close positive alert"
       >
         <SfIconClose size="sm" />
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
index 69f99ca960..4fe4a1a10b 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertSecondary.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="flex flex-col gap-4">
-    <Alert variant="secondary" class="w-full max-w-[640px] shadow-md">
-      <SfIconInfo class="mt-2 me-2 text-secondary-700 shrink-0" />
+    <Alert variant="secondary" class="w-full max-w-[640px]">
+      <SfIconInfo class="my-2 text-secondary-700 shrink-0" />
       <p class="py-2">Your cart will soon be full.</p>
     </Alert>
 
-    <Alert variant="secondary" class="w-full max-w-[320px] shadow-md" size="sm">
-      <SfIconInfo size="sm" class="mt-1.5 me-2 text-secondary-700 shrink-0" />
+    <Alert variant="secondary" size="sm" class="w-full max-w-[320px]">
+      <SfIconInfo size="sm" class="my-1.5 text-secondary-700 shrink-0" />
       <p class="py-1.5">Your cart will soon be full.</p>
     </Alert>
   </div>
diff --git a/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue b/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
index 1fa9407e5c..45899b4f15 100644
--- a/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
+++ b/apps/preview/nuxt/pages/showcases/Alert/AlertWarning.vue
@@ -1,28 +1,28 @@
 <template>
   <div class="flex flex-col gap-4">
-    <Alert variant="warning" class="w-full max-w-[640px] shadow-md">
-      <SfIconWarning class="mt-2 me-2 text-warning-700 shrink-0" />
-      <div class="py-2 me-2">
+    <Alert variant="warning" class="w-full max-w-[640px]">
+      <SfIconWarning class="my-2 text-warning-700 shrink-0" />
+      <div class="py-2">
         <p class="font-medium">Your account</p>
         <p>Your shipping details need to be updated.</p>
       </div>
       <button
         type="button"
-        class="py-2 px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+        class="ms-auto py-2 px-4 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
       >
         Update
       </button>
     </Alert>
 
-    <Alert variant="warning" class="w-full max-w-[320px] shadow-md" size="sm">
-      <SfIconWarning size="sm" class="mt-1.5 me-2 text-warning-700 shrink-0" />
-      <div class="py-1.5 me-2">
+    <Alert variant="warning" size="sm" class="w-full max-w-[320px]">
+      <SfIconWarning size="sm" class="my-1.5 text-warning-700 shrink-0" />
+      <div class="py-1.5">
         <p class="font-medium">Your account</p>
         <p>Your shipping details need to be updated.</p>
       </div>
       <button
         type="button"
-        class="py-1.5 px-3 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
+        class="ms-auto py-1.5 px-3 rounded-md text-warning-700 hover:bg-warning-200 active:bg-warning-300 hover:text-warning-800 active:text-warning-900 ml-auto font-medium focus-visible:outline focus-visible:outline-offset"
       >
         Update
       </button>
diff --git a/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue b/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
index 09adfb8728..132b2cec62 100644
--- a/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
+++ b/packages/sfui/frameworks/vue/components/SfInput/SfInput.vue
@@ -2,7 +2,7 @@
 export default {
   inheritAttrs: false,
 };
-const getSizeClasses = {
+const sizeClasses = {
   [SfInputSize.sm]: ' h-[32px]',
   [SfInputSize.base]: 'h-[40px]',
   [SfInputSize.lg]: 'h-[48px]',
@@ -67,7 +67,7 @@ const inputValue = computed({
         'ring-1 ring-neutral-200': !invalid,
         'focus-within:outline focus-within:outline-offset': isFocusVisible,
       },
-      getSizeClasses[size],
+      sizeClasses[size],
       wrapperClass,
     ]"
     data-testid="input"

From 6db4637f7202d4756ef1e1a354c20f9f3566e132 Mon Sep 17 00:00:00 2001
From: Jakub Freisler <jakub@frsource.org>
Date: Mon, 25 Sep 2023 10:51:48 +0200
Subject: [PATCH 3/5] chore: lint fix

Signed-off-by: Jakub Freisler <jakub@frsource.org>
---
 .../next/pages/showcases/Alert/Alert.tsx        | 17 ++++-------------
 .../next/pages/showcases/Alert/AlertError.tsx   |  2 +-
 .../next/pages/showcases/Alert/AlertNeutral.tsx |  2 +-
 .../pages/showcases/Alert/AlertPositive.tsx     |  2 +-
 .../pages/showcases/Alert/AlertSecondary.tsx    |  2 +-
 .../next/pages/showcases/Alert/AlertWarning.tsx |  2 +-
 packages/tests/package.json                     |  2 +-
 yarn.lock                                       |  4 ++--
 8 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/apps/preview/next/pages/showcases/Alert/Alert.tsx b/apps/preview/next/pages/showcases/Alert/Alert.tsx
index 63f497d929..01294cc414 100644
--- a/apps/preview/next/pages/showcases/Alert/Alert.tsx
+++ b/apps/preview/next/pages/showcases/Alert/Alert.tsx
@@ -17,22 +17,13 @@ const variantClasses = {
   neutral: 'border-neutral-200 bg-neutral-100',
 };
 
-export interface AlertProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    PropsWithStyle,
-    PropsWithChildren {
-  size?: keyof typeof sizeClasses,
-  variant?: keyof typeof variantClasses
+export interface AlertProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, PropsWithStyle, PropsWithChildren {
+  size?: keyof typeof sizeClasses;
+  variant?: keyof typeof variantClasses;
 }
 
 const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
-  const {
-    className,
-    size = 'base',
-    variant = 'neutral',
-    children,
-    ...attributes
-  } = props;
+  const { className, size = 'base', variant = 'neutral', children, ...attributes } = props;
 
   return (
     <div
diff --git a/apps/preview/next/pages/showcases/Alert/AlertError.tsx b/apps/preview/next/pages/showcases/Alert/AlertError.tsx
index 0743af12ec..be0d781c2b 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertError.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertError.tsx
@@ -23,7 +23,7 @@ export default function AlertError() {
           <SfIconClose />
         </button>
       </Alert>
-  
+
       <Alert variant="negative" size="sm" className="w-full max-w-[320px]">
         <SfIconError className="my-1.5 text-negative-700 shrink-0" size="sm" />
         <p className="py-2">The password change was failed.</p>
diff --git a/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx b/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
index 6eb0b31224..ab493de11f 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertNeutral.tsx
@@ -8,7 +8,7 @@ export default function AlertNeutral() {
       <Alert variant="neutral" className="w-full max-w-[640px]">
         <p className="py-2">Happy shopping!</p>
       </Alert>
-  
+
       <Alert variant="neutral" size="sm" className="w-full max-w-[320px]">
         <p className="py-1.5">Happy shopping!</p>
       </Alert>
diff --git a/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx b/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
index a7632efa80..bc2c02f50e 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertPositive.tsx
@@ -17,7 +17,7 @@ export default function AlertPositive() {
           <SfIconClose />
         </button>
       </Alert>
-  
+
       <Alert variant="positive" className="w-full max-w-[320px]" size="sm">
         <SfIconCheckCircle size="sm" className="my-1.5 text-positive-700 shrink-0" />
         <p className="py-1.5">The product has been added to the cart.</p>
diff --git a/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx b/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
index a0901bb303..11e91f1ebb 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertSecondary.tsx
@@ -10,7 +10,7 @@ export default function AlertSecondary() {
         <SfIconInfo className="my-2 text-secondary-700 shrink-0" />
         <p className="py-2">Your cart will soon be full.</p>
       </Alert>
-  
+
       <Alert variant="secondary" size="sm" className="w-full max-w-[320px]">
         <SfIconInfo size="sm" className="my-1.5 text-secondary-700 shrink-0" />
         <p className="py-1.5">Your cart will soon be full.</p>
diff --git a/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx b/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
index a81d033e52..b10a376603 100644
--- a/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
+++ b/apps/preview/next/pages/showcases/Alert/AlertWarning.tsx
@@ -19,7 +19,7 @@ export default function AlertWarning() {
           Update
         </button>
       </Alert>
-  
+
       <Alert variant="warning" size="sm" className="w-full max-w-[320px]">
         <SfIconWarning size="sm" className="my-1.5 text-warning-700 shrink-0" />
         <div className="py-1.5">
diff --git a/packages/tests/package.json b/packages/tests/package.json
index efa3e949c8..dc38a324fc 100644
--- a/packages/tests/package.json
+++ b/packages/tests/package.json
@@ -12,6 +12,6 @@
   "devDependencies": {
     "@storefront-ui/eslint-config": "workspace:*",
     "eslint": "^8.34.0",
-    "prettier": "^2.8.8"
+    "prettier": "^3.0.0"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 6c85d2da3b..3f21c4990e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4562,7 +4562,7 @@ __metadata:
   dependencies:
     "@storefront-ui/eslint-config": "workspace:*"
     eslint: ^8.34.0
-    prettier: ^2.8.8
+    prettier: ^3.0.0
   languageName: unknown
   linkType: soft
 
@@ -22455,7 +22455,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.7.1, prettier@npm:^2.8.8":
+"prettier@npm:^1.18.2 || ^2.0.0, prettier@npm:^2.7.1":
   version: 2.8.8
   resolution: "prettier@npm:2.8.8"
   bin:

From e9b5eed266ec2168cb2f32fd5e17fd8b2ab0bd8f Mon Sep 17 00:00:00 2001
From: Jakub Freisler <jakub@frsource.org>
Date: Mon, 25 Sep 2023 16:48:55 +0200
Subject: [PATCH 4/5] chore: fix next build error

Signed-off-by: Jakub Freisler <jakub@frsource.org>
---
 apps/preview/next/pages/showcases/Alert/Alert.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/preview/next/pages/showcases/Alert/Alert.tsx b/apps/preview/next/pages/showcases/Alert/Alert.tsx
index 01294cc414..d3f96aa488 100644
--- a/apps/preview/next/pages/showcases/Alert/Alert.tsx
+++ b/apps/preview/next/pages/showcases/Alert/Alert.tsx
@@ -1,4 +1,3 @@
-import { ShowcasePageLayout } from '../../showcases';
 // #region source
 import type { PropsWithStyle } from '@storefront-ui/react';
 import { type PropsWithChildren, forwardRef } from 'react';
@@ -17,7 +16,7 @@ const variantClasses = {
   neutral: 'border-neutral-200 bg-neutral-100',
 };
 
-export interface AlertProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, PropsWithStyle, PropsWithChildren {
+export interface AlertProps extends React.HTMLAttributes<HTMLDivElement>, PropsWithStyle, PropsWithChildren {
   size?: keyof typeof sizeClasses;
   variant?: keyof typeof variantClasses;
 }
@@ -44,4 +43,3 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
 
 export default Alert;
 // #endregion source
-Alert.getLayout = ShowcasePageLayout;

From 81c23752491d41cd196c464b446eb969b38fe5d5 Mon Sep 17 00:00:00 2001
From: Jakub Freisler <jakub@frsource.org>
Date: Mon, 25 Sep 2023 16:50:58 +0200
Subject: [PATCH 5/5] chore: filter out unnecessary showcases

Signed-off-by: Jakub Freisler <jakub@frsource.org>
---
 apps/preview/next/pages/api/getShowcases.ts  | 3 ++-
 apps/preview/nuxt/pages/showcases.vue        | 6 +++++-
 apps/preview/shared/utils/showcases.utils.ts | 4 ++++
 3 files changed, 11 insertions(+), 2 deletions(-)
 create mode 100644 apps/preview/shared/utils/showcases.utils.ts

diff --git a/apps/preview/next/pages/api/getShowcases.ts b/apps/preview/next/pages/api/getShowcases.ts
index 75833f051d..94b39a4bdc 100644
--- a/apps/preview/next/pages/api/getShowcases.ts
+++ b/apps/preview/next/pages/api/getShowcases.ts
@@ -1,5 +1,6 @@
 import path from 'path';
 import { NextApiRequest, NextApiResponse } from 'next';
+import { showcasesFilter } from '@storefront-ui/preview-shared/utils/showcases.utils';
 
 import { promise as glob } from 'glob-promise';
 
@@ -8,5 +9,5 @@ export default async function handler(req: NextApiRequest, res: NextApiResponse)
     cwd: path.join(process.cwd(), 'pages', 'showcases'),
   });
 
-  res.status(200).json(fileContents);
+  res.status(200).json(showcasesFilter({ files: fileContents, ext: '.tsx' }));
 }
diff --git a/apps/preview/nuxt/pages/showcases.vue b/apps/preview/nuxt/pages/showcases.vue
index 4e73df595a..3b54f94252 100644
--- a/apps/preview/nuxt/pages/showcases.vue
+++ b/apps/preview/nuxt/pages/showcases.vue
@@ -80,12 +80,16 @@ import {
 } from '@storefront-ui/vue';
 import { ref, watch, reactive, onBeforeMount } from 'vue';
 import { useControlsSearchParams } from '~/composables/utils/useControlsSearchParams';
+import { showcasesFilter } from '@storefront-ui/preview-shared/utils/showcases.utils';
 
 const { currentRoute } = useRouter();
 
 const REST_GROUP_NAME = 'Rest';
 const files = import.meta.glob('./showcases/**');
-const paths = Object.keys(files);
+const paths = showcasesFilter({
+  files: Object.keys(files),
+  ext: '.vue',
+});
 const groupItemHref = (groupName, showcaseName) => {
   return `/showcases/${groupName !== REST_GROUP_NAME ? `${groupName}/` : ''}${showcaseName}`;
 };
diff --git a/apps/preview/shared/utils/showcases.utils.ts b/apps/preview/shared/utils/showcases.utils.ts
new file mode 100644
index 0000000000..9882574255
--- /dev/null
+++ b/apps/preview/shared/utils/showcases.utils.ts
@@ -0,0 +1,4 @@
+const ignoredFiles = ['Alert/Alert'];
+
+export const showcasesFilter = ({ files, ext }: { files: string[]; ext: string }) =>
+  files.filter((filePath) => !ignoredFiles.find((ignoredFile) => filePath.includes(`${ignoredFile}${ext}`)));