spoko-design-system 0.1.3 → 0.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.1.3",
+  "version": "0.1.5",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -28,13 +28,13 @@
   ],
   "dependencies": {
     "@algolia/client-search": "^4.22.1",
-    "@astrojs/mdx": "^2.1.0",
+    "@astrojs/mdx": "^2.1.1",
     "@astrojs/node": "^7.0.4",
     "@astrojs/sitemap": "^3.0.5",
     "@astrojs/vue": "^4.0.8",
     "@docsearch/css": "^3.5.2",
     "@docsearch/react": "^3.5.2",
-    "@iconify-json/ant-design": "^1.1.14",
+    "@iconify-json/ant-design": "^1.1.15",
     "@iconify-json/bi": "^1.1.23",
     "@iconify-json/bx": "^1.1.10",
     "@iconify-json/carbon": "^1.1.28",
@@ -42,20 +42,20 @@
     "@iconify-json/el": "^1.1.8",
     "@iconify-json/eos-icons": "^1.1.10",
     "@iconify-json/flowbite": "^1.1.0",
-    "@iconify-json/fluent": "^1.1.46",
+    "@iconify-json/fluent": "^1.1.47",
     "@iconify-json/fluent-emoji": "1.1.18",
     "@iconify-json/icon-park-outline": "^1.1.15",
     "@iconify-json/la": "^1.1.8",
     "@iconify-json/mdi": "^1.1.64",
     "@iconify-json/noto-v1": "^1.1.11",
     "@iconify-json/octicon": "^1.1.52",
-    "@iconify-json/ph": "^1.1.10",
-    "@iconify-json/simple-icons": "^1.0.5",
+    "@iconify-json/ph": "^1.1.11",
+    "@iconify-json/simple-icons": "^1.1.90",
     "@iconify-json/uil": "^1.1.8",
-    "@iconify/json": "^2.2.175",
+    "@iconify/json": "^2.2.178",
     "@iconify/vue": "^4.1.1",
-    "@types/node": "^20.11.7",
-    "@types/react": "^18.2.48",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.51",
     "@unocss/astro": "^0.58.4",
     "@unocss/preset-attributify": "^0.58.4",
     "@unocss/preset-typography": "^0.58.4",
@@ -64,25 +64,25 @@
     "@unocss/preset-wind": "^0.58.4",
     "@unocss/reset": "^0.58.4",
     "@vueuse/core": "^10.7.2",
-    "astro-compress": "^2.2.8",
+    "astro-compress": "^2.2.9",
     "astro-i18next": "1.0.0-beta.21",
-    "astro-icon": "^1.0.2",
+    "astro-icon": "^1.1.0",
     "astro-navbar": "^2.3.0",
     "astro-pagefind": "^1.4.0",
-    "i18next": "^23.7.20",
+    "i18next": "^23.8.2",
     "i18next-browser-languagedetector": "^7.2.0",
     "i18next-fs-backend": "^2.3.1",
-    "i18next-http-backend": "^2.4.2",
+    "i18next-http-backend": "^2.4.3",
     "i18next-vue": "^3.0.0",
     "sass": "^1.70.0",
+    "swiper": "^11.0.5",
     "unocss": "^0.57.7",
     "vite": "^5.0.12",
-    "vue": "^3.4.15",
-    "swiper": "^11.0.5"
+    "vue": "^3.4.15"
   },
   "devDependencies": {
     "@unocss/transformer-variant-group": "^0.58.4",
-    "astro": "^4.2.4",
+    "astro": "^4.3.2",
     "unocss": "^0.58.3"
   },
   "pnpm": {

package/src/components/FeaturesList.vue

@@ -0,0 +1,41 @@
+
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+    items: {
+        type: Object as PropType<String[] | null>,
+        default: null,
+        required: true,
+    },
+    caption: {
+        type: Object as PropType<String | null>,
+        default: null,
+        required: false,
+    }
+})
+</script>
+
+<template>
+    <h2 class="font-headregular mb-2 font-medium text-lg colon-after" v-if="props.caption">{{ props.caption }}</h2>
+    <ul class="">
+        <li v-for="item in props.items" class="leading-5">
+            {{ item }}
+        </li>
+    </ul>
+</template>
+
+
+<style lang="scss" scoped>
+ul {
+    @apply list-square pl-5;
+
+    li {
+        @apply relative mb-2;
+
+        &::marker {
+            @apply text-blue-400;
+        }
+    }
+}
+</style>

package/src/components/Headline.vue

@@ -4,7 +4,7 @@ import type { PropType } from 'vue'
 const props = defineProps({
   as: {
     type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
-    default: null,
+    default: 'span',
     required: true,
   },
   textSize: {

package/src/components/PartNumber.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'div' | 'td' | 'span' | 'h1' | 'h2' | 'h3'>,
+    default: 'div',
+    required: true,
+  },
+  number: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  class: {
+    type: String,
+    default: '',
+    required: false,
+  },
+})
+
+</script>
+
+<template>
+  <component :is="props.as" :class="props.class">
+    {{ props.number }}
+  </component>
+</template>

package/src/components/PrCode.vue

@@ -7,7 +7,7 @@ import type { PropType } from 'vue'
 
 const props = defineProps({
     prcode: {
-        type: Object as PropType<string[] | null>,
+        type: String,
         default: null,
         required: true,
     },

package/src/components/ProductCodes.vue

@@ -0,0 +1,39 @@
+<script lang="ts" setup>
+import type { PropType } from 'vue'
+import PrCode from './PrCode.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"
+  >
+    <PrCode :prcode="prcode" v-if="!String(prcode).includes('+')" />
+    <span v-else >
+      <PrCode  v-for="(splittedCode, index2) in String(prcode).split('+')" :key="index2" :prcode="splittedCode" />
+    </span>
+  </span>
+</template>
+

package/src/components/ProductDetailName.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType< 'th'| 'td' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'div',
+    required: true,
+  },
+  text: {
+    type: String,
+    default: '',
+    required: true,
+  },
+  styles: {
+    type: String,
+    default: '',
+    required: false,
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as" class="font-bold detail-name w-full sm:w-50 flex">
+    <span class="colon-after" :class="styles && styles.length ? styles : 'mt-auto'">
+      {{ props.text }}
+    </span>
+  </component>
+</template>
+
+
+<style lang="scss">
+.detail-name {
+  @apply overflow-hidden relative;
+
+    span {
+      @apply block bg-white dark:bg-blue-901 relative z-10 pr-1.5 w-full;
+
+      &:before {
+        // order: 2;
+        @apply text-gray-300 absolute select-none border-b border-gray-200 dark:border-gray-600 w-full -z-1;
+        height: 1em;
+        white-space: nowrap;
+        font-weight: 100;
+        bottom: 3px;
+        left: 0;
+        flex: 1;
+        content: '';
+        position:absolute;
+      }
+    }
+
+
+}
+
+</style>

package/src/components/ProductDetailsList.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { PropType } from "vue";
+import ProductDetailName from "./ProductDetailName.vue";
+
+interface TableItem {
+  slug: string,
+  name: string 
+  value: unknown
+}
+
+const props = defineProps({
+  items: {type: Array as PropType<TableItem[]>, default: () => []},
+  caption: { type: String, default: null }
+})
+
+</script>
+
+<template>
+  <table class="details table-auto text-left bg-white">
+    <caption v-if="!!$slots.caption || caption">
+      <slot name="caption">{{ caption }}</slot>
+    </caption>
+    <colgroup>
+      <col>
+      <col>
+    </colgroup>
+    <tbody>
+      <tr class="border" v-for="row, index in props.items" :key="index">
+        <ProductDetailName as="th" :text="row.name" />
+        <td>
+          <slot
+            :name="row.slug"
+          >
+           {{ row.value }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<style lang="scss">
+  .details {
+    border: none;
+    box-shadow: none;
+
+    td,
+    tr,
+    th {
+      border: none;
+      @apply leading-4 text-sm;
+    }
+
+    th {
+      @apply pr-0
+    }
+
+    td {
+      @apply relative;
+    }
+  }
+</style>

package/src/components/ProductNumber copy.astro

@@ -0,0 +1,116 @@
+---
+import { t } from "i18next";
+import ButtonCopy from "./ButtonCopy.vue";
+
+const {
+  copyDisabled,
+  productNumber,
+  isPdp,
+  small,
+  big,
+  class: className,
+} = Astro.props;
+
+const butonTexts = {
+  copy: t("copy"),
+  copied: t("copied"),
+};
+
+const isLetter = (string: string) => {
+  return string.toLowerCase() !== string.toUpperCase();
+};
+
+const niceName = (string: string, separator = "\u00A0") => {
+  let word = string; //e.g. to 6Q0947106EY20 .split('+')
+
+  if (
+    isLetter(string[0]) === true &&
+    isLetter(string[1]) === false &&
+    string.length === 9
+  ) {
+    // mainly liquids
+    word = string
+      .replace(
+        /^(\w{1})(\w{3})(\w{3})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  // wheels / emblems e.g. 6R0601025AK8Z8 --> 6R0 601 025 AB 8Z8 || 6C0601025DFZZ --> 6C0 601 025 D FZZ || 6R0853433ADA1 -> 6R0 853 433 A DA1
+  else if (string.length >= 13) {
+    // console.log('part number: wheels / emblems', word)
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(.*)(\w{3})$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else if (string.length > 12) {
+    // accessories / mats
+    word = string
+      .replace(
+        /^(\w{3})(\w{3})(\w{3})(\w{1})(.*)$/,
+        `$1${separator}$2${separator}$3${separator}$4${separator}$5`,
+      )
+      .replace(/(^\s+|\s+$)/, "");
+  } else {
+    // other parts
+    word = string
+      .replace(/(\w{3})/g, `$1${separator}`)
+      .replace(/(^\s+|\s+$)/, "");
+  }
+
+  return word.replace(" ", separator);
+};
+---
+
+{
+  productNumber !== null && (
+    <div
+      class={`product-number ${
+        big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`
+      }`}
+    >
+      <div
+        class={`inline-flex leading-none relative ${small ? "w-full" : ""}`}
+        itemprop="identifier"
+      >
+        {isPdp ? (
+          <h2 id={productNumber} class="product-code">
+            {productNumber}
+          </h2>
+        ) : (
+          <div id={productNumber} class="product-code">
+            {productNumber}
+          </div>
+        )}
+
+        {copyDisabled && (
+          <ButtonCopy
+            productNumber={String(productNumber)}
+            texts={butonTexts}
+            tooltipClasses=""
+            client:only
+          />
+        )}
+      </div>
+
+      <div
+        class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
+      >
+        <div class="relative inset-0" data-pagefind-ignore>
+          {niceName(productNumber, ".")}
+        </div>
+        <div class="absolute inset-0" data-pagefind-ignore>
+          {niceName(productNumber, "-")}
+        </div>
+        {isPdp ? (
+          <h3 class="number-secondary">{niceName(productNumber)}</h3>
+        ) : (
+          <div class="number-secondary">{niceName(productNumber)}</div>
+        )}
+      </div>
+    </div>
+  )
+}

package/src/components/ProductNumber.astro

@@ -1,10 +1,12 @@
 ---
 import { t } from "i18next";
 import ButtonCopy from "./ButtonCopy.vue";
+import PartNumber from "./PartNumber.vue";
 
 const {
   copyDisabled,
   productNumber,
+  as,
   isPdp,
   small,
   big,
@@ -63,38 +65,20 @@ const niceName = (string: string, separator = "\u00A0") => {
 
   return word.replace(" ", separator);
 };
+
+
+const classes = `product-number ${big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`  }`
+
 ---
 
+<!-- <PartNumber number={productNumber} as="div"></PartNumber> -->
+
+
 {
   productNumber !== null && (
-    <div
-      class={`product-number ${
-        big ? "text-lg" : `text-sm ${className ? className : "mt-2 sm:mt-0"}`
-      }`}
-    >
-      <div
-        class={`inline-flex leading-none relative ${small ? "w-full" : ""}`}
-        itemprop="identifier"
-      >
-        {isPdp ? (
-          <h2 id={productNumber} class="product-code">
-            {productNumber}
-          </h2>
-        ) : (
-          <div id={productNumber} class="product-code">
-            {productNumber}
-          </div>
-        )}
-
-        {copyDisabled && (
-          <ButtonCopy
-            productNumber={String(productNumber)}
-            texts={butonTexts}
-            tooltipClasses=""
-            client:only
-          />
-        )}
-      </div>
+   
+
+      <PartNumber class={`product-code ${classes}`} number={productNumber} as={isPdp ? 'h2' : 'div'} />
 
       <div
         class={`code-formatted ${small ? "tracking-wide" : "tracking-tight"}`}
@@ -105,12 +89,19 @@ const niceName = (string: string, separator = "\u00A0") => {
         <div class="absolute inset-0" data-pagefind-ignore>
           {niceName(productNumber, "-")}
         </div>
-        {isPdp ? (
-          <h3 class="number-secondary">{niceName(productNumber)}</h3>
-        ) : (
-          <div class="number-secondary">{niceName(productNumber)}</div>
-        )}
+        <PartNumber class="number-secondary" number={niceName(productNumber)} as={isPdp ? 'h3' : 'div'} />
       </div>
-    </div>
+    
   )
 }
+
+
+<!-- {!copyDisabled && ( -->
+  <ButtonCopy
+    class="top-3.5 right-0"
+    productNumber={String(productNumber)}
+    texts={butonTexts}
+    tooltipClasses=""
+    client:only
+  />
+<!-- )}  -->

package/src/components/ProductTile.astro

@@ -36,7 +36,7 @@ import ProductNumber from "./ProductNumber.astro"
         { productObject.name }
       </a>
 
-      <ProductNumber productNumber={productObject.number} copyDisabled={true}  />
+      <ProductNumber productNumber={productObject.number} copyDisabled={false}  />
       
       { index !== null && 
         ( <meta itemprop="position" content={String(index)} />

package/src/components/SlimBanner.vue

@@ -16,7 +16,7 @@ const toggleVisibility = () => {
 
 <template>
   <div v-if="isShow" data-pagefind-ignore
-    class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative print-hidden">
+    class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 py-3 flex items-center justify-center text-xs sm:(text-base px-8) leading-none text-white relative print-hidden">
     <span
       class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
     <span class="leading-none "><span
@@ -31,7 +31,7 @@ const toggleVisibility = () => {
     </button>
   </div>
   <div v-else data-pagefind-ignore
-    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white 	 relative bg-black drop-shadow-md z-2 ">
+    class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative bg-black drop-shadow-md z-2 ">
     <div class="tracking-widest leading-none">
       <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3"
         data-text="TERRORIST" /> <span data-text="STATE" />

package/src/config.ts

@@ -29,6 +29,8 @@ export const SIDEBAR = [
   { text: "Card", link: "/components/card/" },
   { text: "Carousel", link: "/components/carousel/" },
   { text: "Copyright", link: "/components/copyright/" },
+  { text: "Details List", link: "/components/details-list/" },
+  { text: "Features List", link: "/components/features-list/"},
   { text: "HandDrive", link: "/components/hand-drive/" },
   { text: "Headline", link: "/components/headline/" },
   { text: "Icons", link: "/components/icons/" },

package/src/layouts/Layout.astro

@@ -44,7 +44,7 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
             createdy by
           </div>
           <img
-            class="h-4 md:h-5 w-min"
+            class="h-4 w-min md:h-5 "
             src="spoko.space.svg"
             alt="Modern Websites"
             width="126"

package/src/pages/components/buttons.mdx

@@ -172,7 +172,7 @@ Rounded edges
         <Button tertiary small rounded>Tertiary</Button>
         
         <Button text medium small rounded>Text</Button>
-        <Button tag small small rounded>Tag Name</Button>
+        <Button tag small rounded>Tag Name</Button>
     </div>
 </div>
 
@@ -193,7 +193,7 @@ Rounded edges
 <Button secondary small rounded>Secondary</Button>
 <Button tertiary small rounded>Tertiary</Button>
 <Button text medium small rounded>Text</Button>
-<Button tag small small rounded>Tag Name</Button>
+<Button tag small rounded>Tag Name</Button>
 ```
 
 ## Outline button

package/src/pages/components/card.mdx

@@ -12,7 +12,7 @@ import Image from '../../components/Image.astro'
 Card - product link component which can be used for carousels, section with related products, recently added etc.
 
 <div class="component-preview">
-  <div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
     <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
@@ -70,7 +70,7 @@ Card - product link component which can be used for carousels, section with rela
 </div>
 
 ```html
-<div class="grid grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
+<div class="grid grid-cols-1 md:grid-cols-3 gap-8 w-full" itemscope itemtype="https://schema.org/ItemList">
     <Card href="https://google.com" imgAlt="Image Alt" imgSrc="https://img.freepik.com/free-photo/beautiful-green-landscape-with-plantations-trees-cloudy-sky_181624-42918.jpg?w=826&t=st=1706315168~exp=1706315768~hmac=ed7872d0924dbda4322a3d346eef282edd77db3673fc209c933b02e37c29f9ac" >
         <a href="#">
             <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white leading-none">Lorem Ipsum</h5>
@@ -97,132 +97,96 @@ Card - product link component which can be used for carousels, section with rela
   <div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
     <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
         <a href="#">
-            <img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
+            <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
             <div class="px-4 py-3 w-72">
                 <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
                 <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
                 <div class="flex items-center">
-                    <p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
+                    <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                     <del>
-                        <p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
+                        <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                     </del>
-                    <div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                            fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd"
-                                d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
-                            <path
-                                d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
-                        </svg></div>
+                    <Icon name="octicon:info-24" class="ml-auto" />
                 </div>
             </div>
         </a>
     </div>
     <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
         <a href="#">
-            <img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
+            <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
             <div class="px-4 py-3 w-72">
                 <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
                 <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
                 <div class="flex items-center">
-                    <p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
+                    <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                     <del>
-                        <p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
+                        <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                     </del>
-                    <div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                            fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd"
-                                d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
-                            <path
-                                d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
-                        </svg></div>
+                    <Icon name="octicon:info-24" class="ml-auto" />
                 </div>
             </div>
         </a>
     </div>
     <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
         <a href="#">
-            <img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
+            <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
             <div class="px-4 py-3 w-72">
                 <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
                 <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
                 <div class="flex items-center">
-                    <p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
+                    <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                     <del>
-                        <p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
+                        <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                     </del>
-                    <div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                            fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd"
-                                d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
-                            <path
-                                d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
-                        </svg></div>
+                    <Icon name="octicon:info-24" class="ml-auto" />
                 </div>
             </div>
         </a>
     </div>
     <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
         <a href="#">
-            <img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
+            <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
             <div class="px-4 py-3 w-72">
                 <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
                 <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
                 <div class="flex items-center">
-                    <p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
+                    <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                     <del>
-                        <p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
+                        <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                     </del>
-                    <div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                            fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd"
-                                d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
-                            <path
-                                d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
-                        </svg></div>
+                    <Icon name="octicon:info-24" class="ml-auto" />
                 </div>
             </div>
         </a>
     </div>
     <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
         <a href="#">
-            <img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
+            <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
             <div class="px-4 py-3 w-72">
                 <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
                 <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
                 <div class="flex items-center">
-                    <p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
+                    <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                     <del>
-                        <p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
+                        <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                     </del>
-                    <div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                            fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd"
-                                d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
-                            <path
-                                d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
-                        </svg></div>
+                    <Icon name="octicon:info-24" class="ml-auto" />
                 </div>
             </div>
         </a>
     </div>
     <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
         <a href="#">
-            <img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
+            <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
             <div class="px-4 py-3 w-72">
                 <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
                 <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
                 <div class="flex items-center">
-                    <p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
+                    <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                     <del>
-                        <p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
+                        <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                     </del>
-                    <div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                            fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
-                            <path fill-rule="evenodd"
-                                d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
-                            <path
-                                d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
-                        </svg></div>
+                    <Icon name="octicon:info-24" class="ml-auto" />
                 </div>
             </div>
         </a>
@@ -233,22 +197,16 @@ Card - product link component which can be used for carousels, section with rela
 <div class="w-fit mx-auto grid grid-cols-1 lg:grid-cols-3 md:grid-cols-2 justify-items-center justify-center gap-y-20 gap-x-14 mt-10 mb-5 ">
   <div class="w-72 bg-white shadow-md rounded-xl duration-500 hover:scale-105 hover:shadow-xl">
       <a href="#">
-          <img src="https://picsum.photos/600/400/?random" alt="Product" class="h-80 w-72 object-cover rounded-t-xl" />
+          <img src="https://picsum.photos/600/500/?random" alt="Product" class="img--1/1 rounded-t-xl" />
           <div class="px-4 py-3 w-72">
               <span class="text-gray-400 mr-3 uppercase text-xs">Brand</span>
               <p class="text-lg font-bold text-black truncate block capitalize">Product Name</p>
               <div class="flex items-center">
-                  <p class="text-lg font-semibold text-black cursor-auto my-3">$149</p>
+                  <p class="text-lg font-semibold text-black cursor-auto my-3">€149</p>
                   <del>
-                      <p class="text-sm text-gray-600 cursor-auto ml-2">$199</p>
+                      <p class="text-sm text-gray-600 cursor-auto ml-2">€199</p>
                   </del>
-                  <div class="ml-auto"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20"
-                          fill="currentColor" class="bi bi-bag-plus" viewBox="0 0 16 16">
-                          <path fill-rule="evenodd"
-                              d="M8 7.5a.5.5 0 0 1 .5.5v1.5H10a.5.5 0 0 1 0 1H8.5V12a.5.5 0 0 1-1 0v-1.5H6a.5.5 0 0 1 0-1h1.5V8a.5.5 0 0 1 .5-.5z" />
-                          <path
-                              d="M8 1a2.5 2.5 0 0 1 2.5 2.5V4h-5v-.5A2.5 2.5 0 0 1 8 1zm3.5 3v-.5a3.5 3.5 0 1 0-7 0V4H1v10a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V4h-3.5zM2 5h12v9a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V5z" />
-                      </svg></div>
+                  <Icon name="octicon:info-24" class="ml-auto" />
               </div>
           </div>
       </a>

package/src/pages/components/details-list.mdx

@@ -0,0 +1,108 @@
+---
+title: "DetailsList"
+layout: "../../layouts/MainLayout.astro"
+---
+
+import ProductDetailsList from '../../components/ProductDetailsList.vue'
+import ProductNumber from "../../components/ProductNumber.astro"
+import ProductCodes from '../../components/ProductCodes.vue'
+
+export const prcodesArray = ["PJ4", "CA2", "C4E", "2JZ"]
+
+export const tableItems = [
+  {
+    slug: "number",
+    name: "Part number",
+    value: "6R0071609GRU",
+  },
+  {
+    slug: "prcodes",
+    name: "PR-Codes",
+    value: ["PJ4", "CA2", "C4E", "2JZ"],
+  },
+  {
+    slug: "color",
+    name: "Color",
+    value: "Black",
+  },
+  {
+    slug: "position",
+    name: "Fitting position",
+    value: "Front axle",
+  },
+  {
+    slug: "brake-disck-thicnkess",
+    name: "Brake disc thicknes",
+    value: "22 mm",
+  },
+  {
+    slug: "weight",
+    name: "Weight",
+    value: "5.185 kg"
+  }
+];
+
+# Product Details Table
+
+<div class="component-preview flex-wrap">
+ <div class="bg-white rounded-lg p-8">
+    <ProductDetailsList items={tableItems}>
+      <ProductNumber slot="number" class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
+      <ProductCodes slot="prcodes" prcodes={prcodesArray} />
+    </ProductDetailsList>
+ </div>
+</div>
+
+```ts
+ const tableItems = [
+  {
+    slug: "number",
+    name: "Part number",
+    value: "6R0071609GRU",
+  },
+  {
+    slug: "prcodes",
+    name: "PR-Codes",
+    value: ["PJ4", "CA2", "C4E"]
+  },
+  {
+    slug: "color",
+    name: "Color",
+    value: "Black",
+  },
+  {
+    slug: "position",
+    name: "Fitting position",
+    value: "Front axle",
+  },
+  {
+    slug: "brake-disck-thicnkess",
+    name: "Brake disc thicknes",
+    value: "22 mm",
+  },
+  {
+    slug: "weight",
+    name: "Weight",
+    value: "5.185 kg"
+  }
+];
+
+```
+### Astro:
+```js
+<ProductDetailsList items={tableItems}>
+  <ProductNumber slot="number" class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
+  <ProductCodes slot="prcodes" prcodes={prcodesArray} />
+</ProductDetailsList>
+ ```
+ ### Vue:
+```js
+<ProductDetailsList items={tableItems}>
+  <template #number >
+    <ProductNumber class="py-0" big isPdp productNumber="6R0071609GRU" copyDisabled={false}  />
+  </template>
+  <template #prcodes >
+    <ProductCodes prcodes={prcodesArray} />
+  </template>
+</ProductDetailsList>
+ ```

package/src/pages/components/features-list.mdx

@@ -0,0 +1,38 @@
+---
+title: "DetailsList"
+layout: "../../layouts/MainLayout.astro"
+---
+
+import FeaturesList from '../../components/FeaturesList.vue'
+
+export const items = [
+  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
+  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
+  "dolore cupidatat ad mollit excepteur quis"
+];
+
+# Product Details Table
+
+<div class="component-preview flex-wrap">
+ <div class="bg-white rounded-lg p-8">
+     <p class="mb-4">Dolor amet excepteur id quis ut. Nisi incididunt occaecat est officia ea do voluptate deserunt aliqua cillum duis eiusmod. Officia veniam nisi mollit exercitation consequat ex fugiat ea veniam in culpa aliquip deserunt ea. Magna elit aliqua reprehenderit anim. Ullamco do nostrud nulla consectetur dolor fugiat adipisicing adipisicing. Reprehenderit est do culpa eu non quis. Veniam anim amet excepteur in sit et eiusmod. Id amet adipisicing amet ut eiusmod et. Tempor Lorem amet aute anim magna. Do ea aute consectetur fugiat nulla laboris pariatur ad enim anim. Dolor culpa veniam aliquip amet aute sunt excepteur consectetur sit excepteur excepteur Lorem. Ipsum esse ad aute nulla eu do incididunt eiusmod nulla sunt labore id cupidatat incididunt.</p>
+    <FeaturesList items={items} caption="Main features"/>
+ </div>
+</div>
+
+```ts
+ const items = [
+  "do ad dolor exercitation dolor eu eiusmod commodo dolor aliqua deserunt aliquip reprehenderit minim. Lorem fugiat deserunt reprehenderit non velit dolore voluptate nostrud aliquip consectetur minim. Labore dolore anim excepteur sit nostrud deserunt eu occaecat.",
+  "cillum dolore cupidatat ad mollit excepteur quis. Non nisi consequat deserunt dolore laboris est culpa. Elit eu aute magna sunt cupidatat officia do adipisicing quis velit. Consectetur deserunt et pariatur ea laborum occaecat veniam proident elit anim dolor eu nostrud voluptate. Do laboris nisi pariatur ipsum est ad anim ex quis officia est ut.",
+  "dolore cupidatat ad mollit excepteur quis"
+];
+
+```
+### Astro:
+```html
+<FeaturesList items={items} caption="Main features" />
+ ```
+ ### Vue:
+```html
+<FeaturesList :items="items" caption="Main features" />
+ ```

package/src/pages/components/pr-code.mdx

@@ -3,7 +3,7 @@ title: "PrCode"
 layout: "../../layouts/MainLayout.astro"
 ---
 import PrCode from '../../components/PrCode.vue'
-
+import ProductCodes from '../../components/ProductCodes.vue'
 
 # PR-Code
 
@@ -17,6 +17,15 @@ They are important when purchasing spare parts as they provide information about
 
 
 ## PR-Code
+Single PR-Code.
+
+### import:
+
+```js
+import PrCode from 'spoko-design-system/src/components/PrCode.vue'
+```
+
+#
 
 <div class="component-preview">
      <div class="bg-white p-6 w-full">
@@ -30,8 +39,27 @@ They are important when purchasing spare parts as they provide information about
      <PrCode prcode="1ZJ" />
 ```
 
+
+
+
+## PR-Codes List
+Component to display list of pr codes from array.
+
 ### import:
 
 ```js
-import PrCode from 'spoko-design-system/src/components/PrCode.vue'
+import ProductCodes from 'spoko-design-system/src/components/ProductCodes.vue'
 ```
+
+#
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full">
+          <ProductCodes prcodes={["2JP", "1ZJ"]}  />
+     </div>
+</div>
+
+```js
+     <ProductCodes prcodes={["2JP", "1ZJ"]} />
+```
+

package/src/pages/components/table.mdx

@@ -4,7 +4,7 @@ layout: "../../layouts/MainLayout.astro"
 
 ---
 
-import MainTable from '../../components/MainTable.vue'
+import Table from '../../components/Table.vue'
 export const tableData = [
   {
     id: 1,
@@ -44,7 +44,7 @@ export const tableDataSecondary = [
 Simple table based on JSON data object.
 
 <div class="component-preview">
-    <MainTable data={tableData}></MainTable>
+    <Table data={tableData}></Table>
 </div>
 
 ## Code
@@ -72,10 +72,10 @@ const tableData = [
 
 ```html
   <!-- Astro -->
-  <MainTable data={tableData} />
+  <Table data={tableData} />
 
   <!-- Vue -->
-  <MainTable :data="tableData" />
+  <Table :data="tableData" />
 ```
 
 
@@ -83,7 +83,7 @@ const tableData = [
 # Table
 
 <div class="component-preview">
-    <MainTable data={tableDataSecondary} />
+    <Table data={tableDataSecondary} />
 </div>
 
 ## Code
@@ -105,5 +105,5 @@ const tableDataSecondary = [
 ];
 
 
-<MainTable data={tableDataSecondary} />
+<Table data={tableDataSecondary} />
 ```

package/src/pages/index.astro

@@ -49,7 +49,7 @@ const navItems = [
     </Button>
 </Jumbatron>
   <nav>
-    <ul class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12  md:(px-0 flex-row) ">
+    <div class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12  md:(px-0 flex-row) ">
       {
         navItems.map(({ title, description, url, icon }) => (
           <a
@@ -65,7 +65,7 @@ const navItems = [
           </a>
         ))
       }
-    </ul>
+    </div>
   </nav>
 </div>
 </Layout>

package/src/pages/patterns/introduction.mdx

@@ -20,7 +20,7 @@ Common patterns for building interfaces.
 
 ### Code
 
-```ts
+```html
 <Container class="bg-white">content</Container>
 ```
 
@@ -33,7 +33,7 @@ Common patterns for building interfaces.
 
 ### Code
 
-```ts
+```html
  <Container class="bg-white" isFullWidth>content</Container>
 ```
 
@@ -50,7 +50,7 @@ Common patterns for building interfaces.
 
 ### Code
 
-```ts
+```html
 <Header>
     <div slot="logo" class="flex-shrink-0 flex items-center h-8">
             <div class="bg-gray">LOGO</div>

package/src/styles/base/_typography.scss

@@ -64,6 +64,7 @@
     font-display: swap;
 }
 
+// for some content which don't need to index in Google
 [data-text]:before {
     content: attr(data-text);
 }

package/src/styles/content.scss

@@ -23,7 +23,7 @@
       font-size: 13pt;
     }
 
-    ul {
+    &>ul {
       @apply list-disc pl-5
     }
   }

package/uno.config.ts

@@ -38,11 +38,11 @@ export default defineConfig({
     ['img--2/3', 'aspect-[2/3] relative object-cover bg-gray-100 h-auto max-w-full'],
     ['img--3/1', 'aspect-[3/1] relative object-cover bg-gray-100 h-auto max-w-full'],
     ['img--16/9', 'aspect-video relative object-cover bg-gray-100 h-auto max-w-full'],
-    ['img--small', 'w-60 sm:(w-22) xl:(w-30)'],
-    ['img--medium', 'w-60'],
+    ['img--small', 'h-full w-60 sm:(w-22) xl:(w-30)'],
+    ['img--medium', 'h-full w-60'],
     ['underline-on-hover', 'relative flex w-full bg-white pb-1 dark:bg-blue-901 after:absolute after:bg-lightBlue-500 after:w-[calc(100%-1rem)] after:left-0 after:h-px  after:top-[calc(100%-1px)] after:bottom-1 after:content-empty after:scale-x-0 after:transition-transform-300 after:origin-top-right hover:after:origin-top-left hover:after:scale-x-100'],
     ['carousel-product-tile', 'flex flex-wrap sm:flex-nowrap content-between w-64 min-w-64 lg:(w-28.57% min-w-28.57%) 2xl:(w-24.09% min-w-24.09%) relative'],
-    ['btn-primary', 'bg-lightBlue-500 border border-transparent font-medium hover:bg-lightBlue-600 inline-flex items-center justify-center shadow text-base text-white'],
+    ['btn-primary', 'bg-lightBlue-400 border border-transparent font-medium hover:bg-lightBlue-500 inline-flex items-center justify-center shadow text-base text-blue-700'],
     ['btn-primary-outline', 'border-lightBlue-500 border font-medium inline-flex items-center justify-center shadow text-base text-lightBlue-500 transition-all hover:(bg-lightBlue-500 text-white)'],
     ['btn-secondary', 'bg-gray-500 border border-transparent font-medium hover:bg-gray-600 inline-flex items-center justify-center shadow text-base text-white'],
     ['btn-secondary-outline', 'border-gray-500 border text-gray-500 font-medium inline-flex items-center justify-center shadow text-base hover:(text-white bg-gray-500)'],
@@ -53,7 +53,7 @@ export default defineConfig({
     ['btn-normal', 'md:px-10 md:py-2 md:text-lg px-8 py-3 whitespace-nowrap'],
     ['btn-sm', 'px-6 py-2 text-sm whitespace-nowrap	'],
     ['btn-xs', 'px-4 py-1 text-sm whitespace-nowrap	'],
-    ['product-number','font-mono content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
+    ['product-number','font-novamono leading-none content-center flex flex-wrap flex-col content-start pr-5 bg-white'],
     ['main','text-gray-700 dark:text-gray-200 dark:bg-blue-700 pt-24 sm:pt-14 relative'],
     ['nav','bg-white dark:bg-black absolute sm:fixed w-full top-0 z-40 sm:z-30 max-w-screen'],
     ['cat-menu','fixed bottom-[-4px] w-full z-10 border-t-1 border-gray-300 bg-white dark:bg-blue-900 text-center sm:(static z-auto border-t-none) sm:min-h-32'],
@@ -91,8 +91,8 @@ export default defineConfig({
     ['cat-link','whitespace-nowrap cursor-pointer text-blue-901 dark:text-white hover:text-lightBlue-400 font-light uppercase py-2 md:py-0'],
     ['plp-name','flex items-center leading-none font-headregular cursor-pointer sm:pr-6 md:pr-12'],
     ['plp-replacements','col-span-3 md:col-span-1 md:col-start-2 text-xs mt-3 md:mt-4'],
-    ['product-code','text-blue-500 dark:text-lightBlue-500 mr-1 leading-none tracking-wide select-all'],
-    ['code-formatted','leading-none mt-0 relative text-xs'],
+    ['product-code','text-blue-500 dark:text-lightBlue-500 mr-1 leading-none tracking-wide select-all '],
+    ['code-formatted','font-novamono leading-none mt-0 relative text-xs'],
     ['btn-copy', 'leading-none opacity-10 hover:opacity-80 ml-auto w-6 h-6 -right-7 sm:(h-4 w-4 -right-5) absolute'],
     ['btn-copy-text','shadow-sm py-0.5 px-1 bg-gray-100 -ml-1 -mt-4 text-xxs whitespace-nowrap'],
     ['plp-icons','absolute top-0 -right-2 md:(top-0.5 right-0) w-12 bottom-auto flex justify-end text-sm'],