spoko-design-system 0.7.7 → 0.7.9

package/.astro/data-store.json

@@ -1 +1 @@
-[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.6.1","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[]},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"svg\":false,\"serializeConfig\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false},\"legacy\":{\"collections\":false}}"]
+[["Map",1,2],"meta::meta",["Map",3,4,5,6],"astro-version","5.9.2","astro-config-digest","{\"root\":{},\"srcDir\":{},\"publicDir\":{},\"outDir\":{},\"cacheDir\":{},\"site\":\"https://sds.spoko.space/\",\"compressHTML\":true,\"base\":\"/\",\"trailingSlash\":\"ignore\",\"output\":\"static\",\"scopedStyleStrategy\":\"attribute\",\"build\":{\"format\":\"directory\",\"client\":{},\"server\":{},\"assets\":\"_astro\",\"serverEntry\":\"entry.mjs\",\"redirects\":true,\"inlineStylesheets\":\"auto\",\"concurrency\":1},\"server\":{\"open\":false,\"host\":false,\"port\":1234,\"streaming\":true,\"allowedHosts\":[]},\"redirects\":{},\"image\":{\"endpoint\":{\"route\":\"/_image\"},\"service\":{\"entrypoint\":\"astro/assets/services/sharp\",\"config\":{}},\"domains\":[\"placehold.co\",\"api.polo.blue\",\"polo.blue\",\"media.istockphoto.com\",\"freepik.com\",\"img.freepik.com\",\"polo6r.pl\"],\"remotePatterns\":[],\"experimentalDefaultStyles\":true},\"devToolbar\":{\"enabled\":true},\"markdown\":{\"syntaxHighlight\":{\"type\":\"shiki\",\"excludeLangs\":[\"math\"]},\"shikiConfig\":{\"langs\":[],\"langAlias\":{},\"theme\":\"github-dark\",\"themes\":{},\"wrap\":false,\"transformers\":[]},\"remarkPlugins\":[],\"rehypePlugins\":[],\"remarkRehype\":{},\"gfm\":true,\"smartypants\":true},\"security\":{\"checkOrigin\":true},\"env\":{\"schema\":{},\"validateSecrets\":false},\"experimental\":{\"clientPrerender\":false,\"contentIntellisense\":false,\"responsiveImages\":false,\"headingIdCompat\":false,\"preserveScriptOrder\":false,\"csp\":false},\"legacy\":{\"collections\":false}}"]

package/.astro/settings.json

@@ -1,5 +1,5 @@
-{
-	"_variables": {
-		"lastUpdateCheck": 1743420319526
-	}
+{
+	"_variables": {
+		"lastUpdateCheck": 1749557085797
+	}
 }

package/.astro/types.d.ts

@@ -1,2 +1 @@
 /// <reference types="astro/client" />
-/// <reference path="content.d.ts" />

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.7.7",
+  "version": "0.7.9",
   "private": false,
   "main": "./index.ts",
   "module": "./index.ts",
@@ -40,74 +40,74 @@
     "spoko design system"
   ],
   "dependencies": {
-    "@algolia/client-search": "^5.23.3",
-    "@astrojs/mdx": "^4.2.3",
-    "@astrojs/node": "^9.1.3",
-    "@astrojs/sitemap": "^3.3.0",
+    "@algolia/client-search": "^5.27.0",
+    "@astrojs/mdx": "^4.3.0",
+    "@astrojs/node": "^9.2.2",
+    "@astrojs/sitemap": "^3.4.1",
     "@astrojs/ts-plugin": "^1.10.4",
-    "@astrojs/vue": "^5.0.9",
+    "@astrojs/vue": "^5.1.0",
     "@docsearch/css": "^3.9.0",
     "@iconify-json/ant-design": "^1.2.5",
-    "@iconify-json/bi": "^1.2.2",
+    "@iconify-json/bi": "^1.2.4",
     "@iconify-json/bx": "^1.2.2",
-    "@iconify-json/carbon": "^1.2.8",
+    "@iconify-json/carbon": "^1.2.9",
     "@iconify-json/circle-flags": "^1.2.6",
     "@iconify-json/ei": "^1.2.2",
     "@iconify-json/el": "^1.2.1",
     "@iconify-json/eos-icons": "^1.2.2",
     "@iconify-json/et": "^1.2.1",
     "@iconify-json/flowbite": "^1.2.5",
-    "@iconify-json/fluent": "^1.2.19",
+    "@iconify-json/fluent": "^1.2.23",
     "@iconify-json/fluent-emoji": "1.2.3",
     "@iconify-json/ic": "^1.2.2",
     "@iconify-json/icon-park-outline": "^1.2.2",
     "@iconify-json/la": "^1.2.1",
-    "@iconify-json/material-symbols-light": "^1.2.19",
+    "@iconify-json/material-symbols-light": "^1.2.25",
     "@iconify-json/mdi": "^1.2.3",
     "@iconify-json/noto-v1": "^1.2.2",
-    "@iconify-json/octicon": "^1.2.5",
+    "@iconify-json/octicon": "^1.2.6",
     "@iconify-json/ph": "^1.2.2",
-    "@iconify-json/simple-icons": "^1.2.31",
+    "@iconify-json/simple-icons": "^1.2.38",
     "@iconify-json/system-uicons": "^1.2.2",
     "@iconify-json/uil": "^1.2.3",
-    "@iconify/json": "^2.2.326",
-    "@iconify/vue": "^4.3.0",
-    "@playform/compress": "^0.1.9",
+    "@iconify/json": "^2.2.347",
+    "@iconify/vue": "^5.0.0",
+    "@playform/compress": "^0.2.0",
     "@playform/inline": "^0.1.2",
-    "@unocss/astro": "66.1.0-beta.11",
-    "@unocss/preset-attributify": "66.1.0-beta.11",
-    "@unocss/preset-typography": "66.1.0-beta.11",
-    "@unocss/preset-uno": "66.1.0-beta.11",
-    "@unocss/preset-web-fonts": "66.1.0-beta.11",
-    "@unocss/preset-wind": "66.1.0-beta.11",
-    "@unocss/reset": "66.1.0-beta.11",
-    "@vite-pwa/astro": "^1.0.1",
-    "@vueuse/core": "^13.1.0",
+    "@unocss/astro": "66.1.4",
+    "@unocss/preset-attributify": "66.1.4",
+    "@unocss/preset-typography": "66.1.4",
+    "@unocss/preset-uno": "66.1.4",
+    "@unocss/preset-web-fonts": "66.1.4",
+    "@unocss/preset-wind": "66.1.4",
+    "@unocss/reset": "66.1.4",
+    "@vite-pwa/astro": "^1.1.0",
+    "@vueuse/core": "^13.3.0",
     "astro-i18next": "1.0.0-beta.21",
     "astro-icon": "^1.1.5",
-    "astro-meta-tags": "^0.3.1",
+    "astro-meta-tags": "^0.3.2",
     "astro-navbar": "^2.3.9",
     "astro-pagefind": "^1.8.3",
     "astro-remote": "^0.3.4",
     "dotenv": "^16.5.0",
-    "i18next": "^24.2.3",
-    "i18next-browser-languagedetector": "^8.0.4",
+    "i18next": "^25.2.1",
+    "i18next-browser-languagedetector": "^8.1.0",
     "i18next-fs-backend": "^2.6.0",
     "i18next-http-backend": "^3.0.2",
-    "i18next-vue": "^5.2.0",
-    "swiper": "^11.2.6",
-    "unocss": "66.1.0-beta.11",
-    "vue": "^3.5.13"
+    "i18next-vue": "^5.3.0",
+    "swiper": "^11.2.8",
+    "unocss": "66.1.4",
+    "vue": "^3.5.16"
   },
   "devDependencies": {
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^22.14.1",
-    "@unocss/transformer-variant-group": "66.1.0-beta.11",
-    "@vitejs/plugin-vue": "^5.2.3",
-    "@vue/compiler-sfc": "^3.5.13",
-    "astro": "^5.6.1",
+    "@types/node": "^24.0.0",
+    "@unocss/transformer-variant-group": "66.1.4",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vue/compiler-sfc": "^3.5.16",
+    "astro": "^5.9.2",
     "unocss": "^0.65.0",
-    "vite": "^6.2.6"
+    "vite": "^6.3.5"
   },
   "packageManager": "pnpm@9.15.3",
   "pnpm": {

package/src/components/Breadcrumbs.vue

@@ -32,76 +32,60 @@ const props = defineProps({
   }
 })
 
-const isLast = (index: Number) => {
+const isLast = (index: number) => {
   return index === props.breadcrumbs.length - 1
 }
 </script>
 
 <template>
   <nav>
-    <ul class="breadcrumbs flex items-center p-0 leading-none	">
-      <li v-if="props.showBack" class="breadcrumb-item flex">
+    <ul class="breadcrumbs-base">
+      <li v-if="props.showBack" class="breadcrumb-item">
         <button
-          class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-accent-light whitespace-nowrap  my-auto"
-          :title="props.textBack" onclick="history.back()">
+          class="breadcrumb-back-btn"
+          :title="props.textBack" 
+          onclick="history.back()"
+        >
           <span class="block px-3" i-bx-bx-arrow-back />
         </button>
       </li>
     </ul>
-    <ul class="breadcrumbs flex items-center p-0 overflow-x-auto overflow-y-hidden sm:mr-12 leading-none	" itemscope
-      itemtype="https://schema.org/BreadcrumbList">
-      <li v-if="props.showHome" class="breadcrumb-item flex">
+    <ul class="breadcrumbs-base overflow-x-auto overflow-y-hidden sm:mr-12" 
+        itemscope itemtype="https://schema.org/BreadcrumbList">
+      <li v-if="props.showHome" class="breadcrumb-item">
         <a href="/"
-          class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto px-3"
-          :title="textBack" itemprop="item" i-carbon-home>
+          class="breadcrumb-link flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-brand-secondary whitespace-nowrap translate-y-0 text-sm my-auto"
+          :title="props.textBack" 
+          itemprop="item" 
+          i-carbon-home>
         </a>
         <meta itemprop="position" content="1">
       </li>
-      <li v-for="(crumb, index) in  breadcrumbs" :key="index" class="breadcrumb-item flex" itemprop="itemListElement"
-        itemscope itemtype="https://schema.org/ListItem">
-        <a v-if="!isLast(index)" :href="crumb.path" class="breadcrumb-link whitespace-nowrap py-4.25 sm:py-1 px-1"
-          itemprop="item" :title="`Polo 6R ${crumb.name}`">
+      <li v-for="(crumb, index) in breadcrumbs" 
+          :key="index" 
+          class="breadcrumb-item" 
+          itemprop="itemListElement"
+          itemscope 
+          itemtype="https://schema.org/ListItem">
+        <!-- Add separator as template content instead of CSS ::before -->
+        <span v-if="index > 0 || props.showHome" class="text-gray-400 px-1 py-4.25 sm:py-1">/</span>
+        
+        <a v-if="!isLast(index)" 
+           :href="crumb.path" 
+           class="breadcrumb-link" 
+           itemprop="item" 
+           :title="`Polo 6R ${crumb.name}`">
           <strong class="font-normal" itemprop="name">{{ crumb.name }}</strong>
         </a>
-        <a v-else :href="crumb.path"
-          class="breadcrumb-link breadcrumb-link--disabled whitespace-nowrap pointer-events-none py-4.25 sm:py-1 px-1"
-          :title="`Polo 6R ${crumb.name} ${productNumber}`">
-          <strong class="font-normal" itemprop="name" v-html="crumb.name" /> <b>{{ productNumber }}</b>
+        <a v-else 
+           :href="crumb.path"
+           class="breadcrumb-link breadcrumb-link-disabled"
+           :title="`Polo 6R ${crumb.name} ${productNumber}`">
+          <strong class="font-normal" itemprop="name" v-html="crumb.name" /> 
+          <b class="hidden sm:inline font-normal">{{ productNumber }}</b>
         </a>
         <meta itemprop="position" :content="String(props.showHome ? index + 2 : index + 1)">
       </li>
     </ul>
   </nav>
 </template>
-
-<style scoped>.breadcrumbs {
-  list-style: none;
-  font-size: 0.875rem;
-}
-
-.breadcrumb-item + .breadcrumb-item::before {
-  @apply py-4.25 sm:py-1 px-1;
-  display: inline-block;
-  padding-right: .5rem;
-  color: #bdbdbd;
-  content: "/";
-}
-
-.breadcrumb-item b {
-  @apply hidden sm:inline font-normal;
-}
-
-.breadcrumb-link {
-  border: 0;
-  cursor: pointer;
-}
-
-.breadcrumb-link--disabled {
-  cursor: default;
-}
-
-.breadcrumb-link--disabled:hover {
-  color: inherit;
-}
-
-</style>

package/src/components/FeaturesList.vue

@@ -17,25 +17,21 @@ const props = defineProps({
 </script>
 
 <template>
-    <h2 class="mb-2 colon-after text-xl font-textbold block leading-none" v-if="props.caption">{{ props.caption }}</h2>
-    <ul class="mb-6">
-        <li v-for="item in props.items" class="leading-5">
+    <h2 
+        class="features-list-caption" 
+        v-if="props.caption"
+    >
+        {{ props.caption }}
+    </h2>
+    <ul class="features-list-ul">
+        <li 
+            v-for="item in props.items" 
+            class="features-list-item"
+            :key="item"
+        >
             {{ item }}
         </li>
     </ul>
 </template>
 
 
-<style  scoped>
-ul {
-    @apply list-square pl-5;
-
-    li {
-        @apply relative mb-2;
-
-        &::marker {
-            @apply text-blue-400;
-        }
-    }
-}
-</style>

package/src/components/Post/PostCategories.vue

@@ -20,20 +20,12 @@ const props = withDefaults(defineProps<Props>(), {
 <template>
   <a
     :href="props.category.link"
-    class="category-link"
-    :class="{ 'active': props.active }"
+    class="category-link-base"
+    :class="{ 'category-link-active': props.active }"
     :title="props.category.description || props.category.name"
   >
     {{ props.category.name }}
   </a>
 </template>
 
-<style scoped>
-.category-link {
-  @apply text-sm sm:text-base text-accent-lightest uppercase hover:text-blue-500 transition-colors;
-}
-
-.category-link.active {
-  @apply text-blue-500;
-}
-</style>
+<!-- No <style> section - all styles are now UnoCSS shortcuts -->

package/src/components/PrCode.vue

@@ -26,7 +26,7 @@ const props = defineProps({
     </span>
 </template>
 
-<style scoped>
+<style>
 .btn-prcode--pdp {
   @apply mb-1;
 }

package/src/components/ProductDetailsList.vue

@@ -23,14 +23,14 @@ const props = defineProps({
   caption: { type: String, default: null }
 });
 
-//  Function for checking whether a value is a link
+// Function for checking whether a value is a link
 const isLink = (id: string) => {
   return ['blog', 'youtube', 'vimeo'].includes(id);
 };
 
 // Function for specifying header text
 const getHeaderText = (row: TableItem | GroupedLink) => {
-  //  For the blog, we use id instead of name
+  // For the blog, we use id instead of name
   if (row.id === 'blog') {
     return row.id.charAt(0).toUpperCase() + row.id.slice(1); // "Blog" z dużej litery
   }
@@ -39,7 +39,7 @@ const getHeaderText = (row: TableItem | GroupedLink) => {
   return 'name' in row ? row.name : row.id.charAt(0).toUpperCase() + row.id.slice(1);
 };
 
-//  Function to determine the icon class for a link type
+// Function to determine the icon class for a link type
 const getLinkIconClass = (linkId: string) => {
   switch (linkId) {
     case 'blog':
@@ -91,21 +91,25 @@ const groupedItems = computed(() => {
 </script>
 
 <template>
-  <table class="details table-auto text-left bg-white">
+  <table class="details-table">
     <caption v-if="!!$slots.caption || caption">
       <slot name="caption">{{ caption }}</slot>
     </caption>
     <colgroup>
-      <col>
-      <col>
+      <col class="details-table-col">
+      <col class="details-table-col">
     </colgroup>
     <tbody>
-      <tr v-for="row, index in groupedItems" :key="index">
+      <tr v-for="row, index in groupedItems" :key="index" class="details-table-row">
         <!-- We use the getHeaderText function to specify the header text -->
-        <ProductDetailName as="th" :text="getHeaderText(row)" />
+        <ProductDetailName 
+          as="th" 
+          :text="getHeaderText(row)" 
+          class="details-table-header"
+        />
         
         <!-- Handling link groups -->
-        <td v-if="'links' in row" class="link-cell">
+        <td v-if="'links' in row" class="details-table-cell">
           <ul class="list-none p-0 m-0">
             <li v-for="(link, linkIndex) in row.links" :key="linkIndex" class="mb-2 last:mb-0 flex items-center">
               <span :class="[getLinkIconClass(row.id), 'leading-none inline-block mr-2 w-4 min-w-4 h-4 text-gray-400']" />
@@ -116,43 +120,11 @@ const groupedItems = computed(() => {
           </ul>
         </td>
         
-        <!--  Support for standard types -->
+        <!-- Support for standard types -->
         <slot v-else-if="'id' in row" :name="row.id">
-          <td>{{ row.value }}</td>
+          <td class="details-table-cell">{{ row.value }}</td>
         </slot>
       </tr>
     </tbody>
   </table>
 </template>
-
-<style scoped>
-.details {
-  @apply border-none shadow-none w-full md:w-auto;
-  box-shadow: none;
-
-  col {
-    @apply w-1/2 md:w-auto;
-  }
-
-  tr {
-    @apply border-none;
-  }
-
-  tr,
-  th {
-    @apply leading-none text-3.5 py-2 border-none xl:(py-4) 3xl:(text-4);
-  }
-
-  th {
-    @apply px-0;
-  }
-
-  td {
-    @apply relative;
-  }
-}
-
-.link-primary {
-  @apply leading-none text-brand-primary hover:text-accent-light hover:underline;
-}
-</style>

package/uno-config/index.ts

@@ -105,6 +105,16 @@ export function createSdsConfig(customConfig: CustomConfig = {}) {
     safelist: [
       // Existing safelist items
       'md:grid-cols-product',
+
+      'breadcrumb-link-disabled',
+      'breadcrumb-link',
+      'breadcrumb-item',
+      'features-list-caption',
+      'features-list-ul',
+      'features-list-item',
+
+      'category-link-base',
+      'category-link-active',
       
       // Base peer class
       'peer',

package/uno-config/theme/shortcuts/components.ts

@@ -89,5 +89,36 @@ export const componentShortcuts = [
   ['product-link', PRODUCT_STYLES.link.base],
   ['number-big', 'text-3.75 mr-2 mt-2 mb-0 sm:mt-0'],
   ['product-thumb--related', `w-22 min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`],
-  ['product-thumb--carousel', `w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`]
+  ['product-thumb--carousel', `w-60 min-w-60 sm:w-22 sm:min-w-22 xl:w-30 xl:min-w-30 h-auto ${IMAGE_STYLES.objectContain} object-top bg-gray-100 ${aspectRatios['4/3']} ${LAYOUT.position.relative}`],
+
+  
+  // FeaturesList component
+  ['features-list', 'mb-6'],
+  ['features-list-item', 'leading-5 relative mb-2'],
+  ['features-list-ul', 'list-square pl-5 mb-6 marker:[color:#00b0f0]'],
+
+  ['features-list-caption', 'mb-2 colon-after text-xl font-textbold block leading-none'],
+
+
+
+  // Breadcrumbs
+  ['breadcrumbs-base', 'flex items-center p-0 leading-none list-none text-sm'],
+  ['breadcrumb-item', 'flex'],
+  ['breadcrumb-link', 'border-0 cursor-pointer whitespace-nowrap py-4.25 sm:py-1 px-1'],
+  ['breadcrumb-link-disabled', 'cursor-default pointer-events-none'],
+  ['breadcrumb-back-btn', 'flex items-center px-3 sm:px-0 py-4.25 sm:py-1 hover:text-accent-light whitespace-nowrap my-auto'],
+
+  // PostCategories
+  ['category-link-base', 'text-sm sm:text-base text-accent-lightest uppercase hover:text-blue-500 transition-colors'],
+  ['category-link-active', 'text-blue-500'],
+
+  // Details table
+  ['details-table', 'border-none shadow-none w-full md:w-auto'],
+  ['details-table-row', 'border-none'],
+  ['details-table-header', 'leading-none text-3.5 py-2 border-none xl:py-4 3xl:text-4 px-0 text-left'],
+  ['details-table-cell', 'relative'],
+  ['details-table-col', 'w-1/2 md:w-auto'],
+  ['link-primary', 'leading-none text-brand-primary hover:text-accent-light hover:underline'],
+
+
 ];

package/src/components/Product/ProductCodes.vue

@@ -1,174 +0,0 @@
-<script lang="ts" setup>
-import type { PropType } from 'vue'
-
-const props = defineProps({
-  prcodes: {
-    type: Object as PropType<string[] | null>,
-    default: null,
-    required: true,
-  },
-  isPdp: {
-    type: Boolean,
-    default: false,
-    required: false,
-  },
-})
-
-const codes = props.prcodes || []
-const decodedCodes = codes ? codes.sort() : []
-
-const settings = {
-  prcodes: decodedCodes,
-}
-</script>
-
-<template>
- 
- <span
-    v-for="(prcode, index) in settings.prcodes"
-    :key="index"
-    class="not-last:mr-1"
-  >
-    <span data-pagefind-filter="PR-Code"
-      v-if="!String(prcode).includes('+')"
-      class="btn-prcode "
-      :class="`btn-prcode--${prcode}`"
-    >
-      {{ prcode }}
-    </span>
-    <span v-else >
-      <span v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" class="btn-prcode" :class="`btn-prcode--${splittedCode} ${isPdp ? ' btn-prcode--pdp' : ''}` " data-pagefind-filter="PR-Code">
-        {{ splittedCode }}
-      </span>
-    </span>
-  </span>
-
-</template>
-
-<style  scoped>
-.btn-prcode {
-  @apply relative inline-block leading-none px-1 py-0.5 mr-1 cursor-pointer font-mono border-solid border-1 border-gray-200 select-none text-gray-500 last:mr-0 dark:border-white dark:border-opacity-10 dark:text-gray-300 dark:bg-white dark:bg-opacity-30 not-last:mr-2 not-last:after:content-[+] dark:after:text-white/50 after:pl-0.5 after:text-blue-darker after:absolute after:w-4 text-center;
-}
-
-.btn-prcode--pdp {
-  @apply mb-1;
-}
-
-.btn-prcode::before {
-  @apply rounded-2 shadow-sm py-0.5 px-2 bg-gray-100 whitespace-nowrap text-xs dark:text-black dark:bg-accent-light;
-  display: none;
-  position: absolute;
-  text-align: center;
-  top: -10px;
-  transform: translateY(-50%) translateX(-50%);
-  left: 50%;
-  z-index: 50;
-}
-
-.btn-prcode:hover::before {
-  display: block;
-}
-
-.btn-prcode--2JK {
-  color: #f3881d;
-}
-
-.btn-prcode--2JK::before {
-  content: 'CROSS';
-}
-
-.btn-prcode--1LR,
-.btn-prcode--1ZG,
-.btn-prcode--1ZJ {
-  &::before {
-    content: '⌀ 256 mm';
-  }
-}
-
-.btn-prcode--1KD,
-.btn-prcode--1ZP,
-.btn-prcode--1ZR {
-  &::before {
-    content: '⌀ 310 mm';
-  }
-}
-
-.btn-prcode--1ZD,
-.btn-prcode--1ZC,
-.btn-prcode--1LN {
-  &::before {
-    content: '⌀ 288 mm; LUCAS';
-  }
-}
-
-.btn-prcode--2JZ {
-  @apply text-accent-light;
-}
-
-.btn-prcode--2JZ::before {
-  content: 'Bluemotion';
-}
-
-.btn-prcode--7L6 {
-  @apply text-accent-light;
-}
-
-.btn-prcode--7L6::before {
-  content: 'Bluemotion (CFWA + start-stop)';
-}
-
-.btn-prcode--1KK,
-.btn-prcode--1KT,
-.btn-prcode--1KV,
-.btn-prcode--1LV,
-.btn-prcode--2EJ {
-  &::before {
-    content: '⌀ 230 mm';
-  }
-}
-
-.btn-prcode--2JE {
-  @apply text-accent-dark;
-}
-
-.btn-prcode--2JE::before {
-  content: 'BlueGT';
-}
-
-.btn-prcode--2JP::before {
-  content: 'R-Line';
-}
-
-.btn-prcode--E5M,
-.btn-prcode--1KD,
-.btn-prcode--1ZP,
-.btn-prcode--2JQ,
-.btn-prcode--TA2 {
-  color: blue;
-}
-
-.btn-prcode--E5M::before,
-.btn-prcode--1KD::before,
-.btn-prcode--1ZP::before,
-.btn-prcode--2JQ::before,
-.btn-prcode--TA2::before {
-  content: 'R WRC Street';
-}
-
-.btn-prcode--1KV,
-.btn-prcode--1ZD,
-.btn-prcode--1ZR,
-.btn-prcode--0NH,
-.btn-prcode--2JD {
-  color: red;
-}
-
-.btn-prcode--1KV::before,
-.btn-prcode--1ZD::before,
-.btn-prcode--1ZR::before,
-.btn-prcode--0NH::before,
-.btn-prcode--2JD::before {
-  content: 'GTI';
-}
-
-</style>