@designcrowd/fe-shared-lib 1.5.26-pre-gt-0007 → 1.5.26

package/public/css/tailwind-designCom.css

@@ -946,6 +946,9 @@ video {
 .theme-designCom .tw-w-96 {
   width: 24rem;
 }
+.theme-designCom .tw-w-\[14rem\] {
+  width: 14rem;
+}
 .theme-designCom .tw-w-auto {
   width: auto;
 }
@@ -1210,6 +1213,9 @@ video {
 .theme-designCom .tw-rounded-full {
   border-radius: 9999px;
 }
+.theme-designCom .tw-rounded-lg {
+  border-radius: 0.75rem;
+}
 .theme-designCom .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1306,10 +1312,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(182 58 42 / var(--tw-border-opacity));
 }
-.theme-designCom .tw-border-grayscale-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(250 250 250 / var(--tw-border-opacity));
-}
 .theme-designCom .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(237 237 237 / var(--tw-border-opacity));
@@ -1851,6 +1853,9 @@ video {
 .theme-designCom .tw-font-bold {
   font-weight: 700;
 }
+.theme-designCom .tw-font-medium {
+  font-weight: 500;
+}
 .theme-designCom .tw-font-normal {
   font-weight: 400;
 }
@@ -2098,6 +2103,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(227 227 227 / var(--tw-bg-opacity));
 }
+.theme-designCom .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 209 209 / var(--tw-bg-opacity));
+}
 .theme-designCom .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));
@@ -2122,6 +2131,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(50 71 197 / var(--tw-bg-opacity));
 }
+.theme-designCom .hover\:tw-bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(38 53 148 / var(--tw-bg-opacity));
+}
 .theme-designCom .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 236 236 / var(--tw-bg-opacity));
@@ -2138,6 +2151,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(49 49 49 / var(--tw-bg-opacity));
 }
+.theme-designCom .hover\:tw-bg-secondary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(37 37 37 / var(--tw-bg-opacity));
+}
 .theme-designCom .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(236 238 254 / var(--tw-bg-opacity));

package/public/css/tailwind-designCrowd.css

@@ -946,6 +946,9 @@ video {
 .theme-designCrowd .tw-w-96 {
   width: 24rem;
 }
+.theme-designCrowd .tw-w-\[14rem\] {
+  width: 14rem;
+}
 .theme-designCrowd .tw-w-auto {
   width: auto;
 }
@@ -1210,6 +1213,9 @@ video {
 .theme-designCrowd .tw-rounded-full {
   border-radius: 9999px;
 }
+.theme-designCrowd .tw-rounded-lg {
+  border-radius: 0.5rem;
+}
 .theme-designCrowd .tw-rounded-md {
   border-radius: 0.375rem;
 }
@@ -1306,10 +1312,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
 }
-.theme-designCrowd .tw-border-grayscale-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
 .theme-designCrowd .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1851,6 +1853,9 @@ video {
 .theme-designCrowd .tw-font-bold {
   font-weight: 700;
 }
+.theme-designCrowd .tw-font-medium {
+  font-weight: 500;
+}
 .theme-designCrowd .tw-font-normal {
   font-weight: 400;
 }
@@ -2098,6 +2103,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2122,6 +2131,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(14 121 188 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .hover\:tw-bg-primary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(10 91 141 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .hover\:tw-bg-secondary-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(223 226 230 / var(--tw-bg-opacity));
@@ -2138,6 +2151,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(74 87 103 / var(--tw-bg-opacity));
 }
+.theme-designCrowd .hover\:tw-bg-secondary-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(56 65 77 / var(--tw-bg-opacity));
+}
 .theme-designCrowd .hover\:tw-bg-success-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(213 242 223 / var(--tw-bg-opacity));

package/src/atoms/components/Carousel/carousel.stories.js

@@ -1,7 +1,6 @@
 import Icon from '../Icon/Icon.vue';
 import { cards } from './Carousel.fixtures';
 import Carousel from './Carousel.vue';
-import CarouselSSR from './CarouselSSR.vue';
 
 export default {
   title: 'Components/Carousel',
@@ -529,137 +528,3 @@ export const ResponsiveBreakpoints = {
     },
   },
 };
-
-// CarouselSSR - SSR-safe wrapper that prevents hydration mismatches
-export const SSRSafe = {
-  args: {
-    cards,
-    showControls: true,
-    showBullets: true,
-    options: {
-      loop: true,
-      spaceBetween: 20,
-      slidesPerView: 1,
-      breakpoints: {
-        640: {
-          slidesPerView: 2,
-          slidesPerGroup: 2,
-        },
-        1024: {
-          slidesPerView: 3,
-          slidesPerGroup: 3,
-        },
-      },
-    },
-  },
-  render: (args) => ({
-    components: { CarouselSSR },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <div class="tw-mb-4 tw-p-4 tw-bg-green-50 tw-rounded-lg">
-          <p class="tw-text-sm tw-font-semibold tw-text-green-800">CarouselSSR Component</p>
-          <p class="tw-text-sm tw-text-green-700 tw-mt-1">
-            This wrapper prevents hydration mismatch errors in SSR environments (Nuxt).
-            It renders a static skeleton server-side, then switches to the interactive Swiper on the client.
-          </p>
-        </div>
-        <CarouselSSR
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-h-full">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
-              <span class="tw-text-lg tw-font-semibold tw-text-center">{{ slide.name }}</span>
-            </div>
-          </template>
-        </CarouselSSR>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: `
-**CarouselSSR** is an SSR-safe wrapper around the Carousel component designed for use in Nuxt/SSR environments.
-
-### Why use CarouselSSR?
-Swiper.js initializes client-side and adds classes/styles that don't exist on the server, causing Vue hydration mismatches. CarouselSSR solves this by:
-
-1. **Server-side**: Renders a static skeleton that matches the carousel layout (showing actual card content)
-2. **Client-side**: After mount, switches to the interactive Swiper carousel
-
-### Migration
-Replace \`Carousel\` with \`CarouselSSR\` - the API is identical:
-
-\`\`\`vue
-<!-- Before -->
-<Carousel :cards="cards" :options="options">
-  <template #slide="{ slide }">...</template>
-</Carousel>
-
-<!-- After -->
-<CarouselSSR :cards="cards" :options="options">
-  <template #slide="{ slide }">...</template>
-</CarouselSSR>
-\`\`\`
-
-### Additional Props
-- \`skeletonSlideCount\` (Number, default: 6) - How many slides to show in the skeleton
-        `,
-      },
-    },
-  },
-};
-
-// CarouselSSR with custom skeleton slide count
-export const SSRSafeCustomSkeletonCount = {
-  args: {
-    cards: [...cards, ...cards],
-    skeletonSlideCount: 3,
-    options: {
-      spaceBetween: 20,
-      slidesPerView: 'auto',
-    },
-  },
-  render: (args) => ({
-    components: { CarouselSSR },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <div class="tw-mb-4 tw-p-4 tw-bg-blue-50 tw-rounded-lg">
-          <p class="tw-text-sm tw-text-blue-800">
-            <strong>skeletonSlideCount: 3</strong> - Only shows 3 slides in the SSR skeleton,
-            even though there are more cards. Useful for controlling initial render size.
-          </p>
-        </div>
-        <CarouselSSR
-          :cards="args.cards"
-          :skeleton-slide-count="args.skeletonSlideCount"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-rounded-lg tw-shadow" style="width: 200px;">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
-            </div>
-          </template>
-        </CarouselSSR>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Control how many slides appear in the SSR skeleton with the `skeletonSlideCount` prop.',
-      },
-    },
-  },
-};

package/src/experiences/components/WebsitesContextualUpgradeModal/WebsiteContextualUpgradeModal.vue

@@ -36,9 +36,9 @@
           </div>
         </div>
       </div>
-      <div class="bottom-bar tw-mt-2">
+      <div class="bottom-bar tw-mt-2 tw-border-grayscale-300">
         <div
-          class="bottom-bar tw-mt-6 tw-bg-grayscale-200 tw-flex tw-flex-col md:tw-flex-row md:tw-items-center md:tw-gap-2"
+          class="bottom-bar tw-mt-6 tw-border-grayscale-300 tw-bg-grayscale-200 tw-flex tw-flex-col md:tw-flex-row md:tw-items-center md:tw-gap-2"
         >
           <div class="button-size md:tw-flex-1">
             <Button
@@ -69,9 +69,9 @@
 </template>
 <script setup lang="ts">
 import { Ref, ref } from 'vue';
-import Modal from '../../../atoms/components/Modal/Modal.vue';
 import Button from '../../../atoms/components/Button/Button.vue';
 import Icon from '../../../atoms/components/Icon/Icon.vue';
+import Modal from '../../../atoms/components/Modal/Modal.vue';
 import { websiteContextualUpgradeModalTr } from '../../../useSharedLibTranslate';
 import { WEBSITE_UPGRADE_CONTEXT_TYPES, type WebsiteContextUpgradeType } from '../../models/websiteContextualModel';
 
@@ -190,7 +190,8 @@ const onUpgradeClick = () => {
 </script>
 <style scoped>
 .bottom-bar {
-  @apply tw-absolute tw-p-4 tw-bottom-0 tw-left-0 tw-w-full tw-border-t tw-border-grayscale-300 md:tw-p-0 md:tw-relative md:tw-border-none;
+  @apply tw-absolute tw-p-4 tw-bottom-0 tw-left-0 tw-w-full tw-border-t md:tw-p-0 md:tw-relative md:tw-border-none;
+  @apply tw-absolute tw-p-4 tw-bottom-0 tw-left-0 tw-w-full tw-border-t tw-border-gray-300 md:tw-p-0 md:tw-relative md:tw-border-none;
 }
 .button-size {
   @apply tw-w-full md:tw-max-w-40;

package/.storybook-static/favicon.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:svgjs="http://svgjs.com/svgjs" xmlns:xlink="http://www.w3.org/1999/xlink" width="164" height="164" version="1.1"><svg xmlns="http://www.w3.org/2000/svg" width="164" height="164" fill="none" viewBox="0 0 164 164"><path fill="#FF4785" d="M22.467 147.762 17.5 15.402a8.062 8.062 0 0 1 7.553-8.35L137.637.016a8.061 8.061 0 0 1 8.565 8.047v144.23a8.063 8.063 0 0 1-8.424 8.054l-107.615-4.833a8.062 8.062 0 0 1-7.695-7.752Z"/><path fill="#fff" fill-rule="evenodd" d="m128.785.57-15.495.968-.755 18.172a1.203 1.203 0 0 0 1.928 1.008l7.06-5.354 5.962 4.697a1.202 1.202 0 0 0 1.946-.987L128.785.569Zm-12.059 60.856c-2.836 2.203-23.965 3.707-23.965.57.447-11.969-4.912-12.494-7.889-12.494-2.828 0-7.59.855-7.59 7.267 0 6.534 6.96 10.223 15.13 14.553 11.607 6.15 25.654 13.594 25.654 32.326 0 17.953-14.588 27.871-33.194 27.871-19.201 0-35.981-7.769-34.086-34.702.744-3.163 25.156-2.411 25.156 0-.298 11.114 2.232 14.383 8.633 14.383 4.912 0 7.144-2.708 7.144-7.267 0-6.9-7.252-10.973-15.595-15.657C64.827 81.933 51.53 74.468 51.53 57.34c0-17.098 11.76-28.497 32.747-28.497 20.988 0 32.449 11.224 32.449 32.584Z" clip-rule="evenodd"/></svg><style>@media (prefers-color-scheme:light){:root{filter:none}}</style></svg>

package/.storybook-static/index.html

@@ -1,156 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-
-    <title>storybook - Storybook</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-
-    
-    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
-    
-    <style>
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: normal;
-        font-weight: 400;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-regular.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: italic;
-        font-weight: 400;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-italic.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: normal;
-        font-weight: 700;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-bold.woff2') format('woff2');
-      }
-
-      @font-face {
-        font-family: 'Nunito Sans';
-        font-style: italic;
-        font-weight: 700;
-        font-display: swap;
-        src: url('./sb-common-assets/nunito-sans-bold-italic.woff2') format('woff2');
-      }
-    </style>
-
-    <link href="./sb-manager/runtime.js" rel="modulepreload" />
-
-    
-    <link href="./sb-addons/storybook-core-server-presets-0/common-manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/a11y-1/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/links-2/manager-bundle.js" rel="modulepreload" />
-    
-    <link href="./sb-addons/themes-3/manager-bundle.js" rel="modulepreload" />
-       
-
-    <style>
-      #storybook-root[hidden] {
-        display: none !important;
-      }
-    </style>
-
-    
-  </head>
-  <body>
-    <div id="root"></div>
-
-    
-    <script>
-      
-        
-          window['FEATURES'] = {
-  "argTypeTargetsV7": true,
-  "legacyDecoratorFileOrder": false,
-  "disallowImplicitActionsInRenderV8": true,
-  "viewport": true,
-  "highlight": true,
-  "controls": true,
-  "interactions": true,
-  "actions": true,
-  "backgrounds": true,
-  "outline": true,
-  "measure": true
-};
-        
-      
-        
-          window['REFS'] = {};
-        
-      
-        
-          window['LOGLEVEL'] = "info";
-        
-      
-        
-          window['DOCS_OPTIONS'] = {
-  "autodocs": true
-};
-        
-      
-        
-          window['CONFIG_TYPE'] = "PRODUCTION";
-        
-      
-        
-      
-        
-      
-        
-          window['TAGS_OPTIONS'] = {
-  "dev-only": {
-    "excludeFromDocsStories": true
-  },
-  "docs-only": {
-    "excludeFromSidebar": true
-  },
-  "test-only": {
-    "excludeFromSidebar": true,
-    "excludeFromDocsStories": true
-  }
-};
-        
-      
-        
-          window['STORYBOOK_RENDERER'] = "vue3";
-        
-      
-        
-          window['STORYBOOK_BUILDER'] = "@storybook/builder-vite";
-        
-      
-        
-          window['STORYBOOK_FRAMEWORK'] = "@storybook/vue3-vite";
-        
-      
-    </script>
-    
-
-    <script type="module">
-      import './sb-manager/globals-runtime.js';
-
-      
-        import './sb-addons/storybook-core-server-presets-0/common-manager-bundle.js';
-      
-        import './sb-addons/a11y-1/manager-bundle.js';
-      
-        import './sb-addons/links-2/manager-bundle.js';
-      
-        import './sb-addons/themes-3/manager-bundle.js';
-      
-
-      import './sb-manager/runtime.js';
-    </script>
-  </body>
-</html>