@designcrowd/fe-shared-lib 1.5.27-ENG-3954 → 1.5.27

package/dist/css/tailwind-designCrowd.css

@@ -617,6 +617,9 @@ video {
 .tw-m-3 {
   margin: 0.75rem;
 }
+.tw-m-4 {
+  margin: 1rem;
+}
 .tw-m-5 {
   margin: 1.25rem;
 }
@@ -684,6 +687,9 @@ video {
 .tw-mb-0 {
   margin-bottom: 0px;
 }
+.tw-mb-0\.5 {
+  margin-bottom: 0.125rem;
+}
 .tw-mb-1 {
   margin-bottom: 0.25rem;
 }
@@ -750,6 +756,9 @@ video {
 .tw-mt-4 {
   margin-top: 1rem;
 }
+.tw-mt-6 {
+  margin-top: 1.5rem;
+}
 .tw-mt-8 {
   margin-top: 2rem;
 }
@@ -759,6 +768,48 @@ video {
 .tw-box-content {
   box-sizing: content-box;
 }
+.tw-line-clamp-1 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+}
+.tw-line-clamp-2 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.tw-line-clamp-3 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+}
+.tw-line-clamp-4 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 4;
+}
+.tw-line-clamp-5 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 5;
+}
+.tw-line-clamp-6 {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 6;
+}
+.tw-line-clamp-none {
+  overflow: visible;
+  display: block;
+  -webkit-box-orient: horizontal;
+  -webkit-line-clamp: none;
+}
 .tw-block {
   display: block;
 }
@@ -908,6 +959,9 @@ video {
 .tw-max-w-2xl {
   max-width: 42rem;
 }
+.tw-max-w-3xl {
+  max-width: 48rem;
+}
 .tw-max-w-full {
   max-width: 100%;
 }
@@ -923,6 +977,9 @@ video {
 .tw-flex-none {
   flex: none;
 }
+.tw-flex-shrink-0 {
+  flex-shrink: 0;
+}
 .tw-grow {
   flex-grow: 1;
 }
@@ -1138,6 +1195,9 @@ video {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.tw-text-ellipsis {
+  text-overflow: ellipsis;
+}
 .tw-whitespace-nowrap {
   white-space: nowrap;
 }
@@ -1246,10 +1306,6 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(195 50 48 / var(--tw-border-opacity));
 }
-.tw-border-grayscale-100 {
-  --tw-border-opacity: 1;
-  border-color: rgb(255 255 255 / var(--tw-border-opacity));
-}
 .tw-border-grayscale-300 {
   --tw-border-opacity: 1;
   border-color: rgb(239 239 239 / var(--tw-border-opacity));
@@ -1266,6 +1322,10 @@ video {
   --tw-border-opacity: 1;
   border-color: rgb(125 130 132 / var(--tw-border-opacity));
 }
+.tw-border-grayscale-700 {
+  --tw-border-opacity: 1;
+  border-color: rgb(82 93 96 / var(--tw-border-opacity));
+}
 .tw-border-info-300 {
   --tw-border-opacity: 1;
   border-color: rgb(112 193 243 / var(--tw-border-opacity));
@@ -1738,9 +1798,6 @@ video {
 .tw-pt-2 {
   padding-top: 0.5rem;
 }
-.tw-pt-4 {
-  padding-top: 1rem;
-}
 .tw-pt-6 {
   padding-top: 1.5rem;
 }
@@ -1763,6 +1820,10 @@ video {
   font-size: 1.5rem;
   line-height: 2rem;
 }
+.tw-text-3xl {
+  font-size: 1.875rem;
+  line-height: 2.25rem;
+}
 .tw-text-4xl {
   font-size: 2.25rem;
   line-height: 2.5rem;
@@ -2033,6 +2094,10 @@ video {
   --tw-bg-opacity: 1;
   background-color: rgb(230 230 230 / var(--tw-bg-opacity));
 }
+.hover\:tw-bg-grayscale-500:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(204 204 204 / var(--tw-bg-opacity));
+}
 .hover\:tw-bg-info-100:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(207 234 251 / var(--tw-bg-opacity));
@@ -2089,6 +2154,10 @@ video {
   --tw-text-opacity: 1;
   color: rgb(39 52 56 / var(--tw-text-opacity));
 }
+.hover\:tw-text-primary-600:hover {
+  --tw-text-opacity: 1;
+  color: rgb(14 121 188 / var(--tw-text-opacity));
+}
 .hover\:tw-text-secondary-500:hover {
   --tw-text-opacity: 1;
   color: rgb(93 109 129 / var(--tw-text-opacity));
@@ -2176,6 +2245,10 @@ video {
     margin-bottom: 1rem;
   }
 
+  .sm\:tw-ml-2 {
+    margin-left: 0.5rem;
+  }
+
   .sm\:tw-ml-4 {
     margin-left: 1rem;
   }
@@ -2224,6 +2297,10 @@ video {
     flex-direction: row;
   }
 
+  .sm\:tw-items-center {
+    align-items: center;
+  }
+
   .sm\:tw-rounded-md {
     border-radius: 0.375rem;
   }
@@ -2235,10 +2312,18 @@ video {
 }
 @media (min-width: 768px) {
 
+  .md\:tw-relative {
+    position: relative;
+  }
+
   .md\:tw-right-6 {
     right: 1.5rem;
   }
 
+  .md\:tw-order-first {
+    order: -9999;
+  }
+
   .md\:tw-mb-0 {
     margin-bottom: 0px;
   }
@@ -2303,6 +2388,10 @@ video {
     width: 6rem;
   }
 
+  .md\:tw-w-3\/4 {
+    width: 75%;
+  }
+
   .md\:tw-w-auto {
     width: auto;
   }
@@ -2315,6 +2404,10 @@ video {
     max-width: 100%;
   }
 
+  .md\:tw-flex-1 {
+    flex: 1 1 0%;
+  }
+
   .md\:tw-grow {
     flex-grow: 1;
   }
@@ -2374,6 +2467,10 @@ video {
        object-fit: contain;
   }
 
+  .md\:tw-p-0 {
+    padding: 0px;
+  }
+
   .md\:tw-p-2 {
     padding: 0.5rem;
   }
@@ -2390,6 +2487,11 @@ video {
     padding: 2rem;
   }
 
+  .md\:tw-px-12 {
+    padding-left: 3rem;
+    padding-right: 3rem;
+  }
+
   .md\:tw-px-4 {
     padding-left: 1rem;
     padding-right: 1rem;
@@ -2405,6 +2507,10 @@ video {
     padding-bottom: 0.5rem;
   }
 
+  .md\:tw-pb-0 {
+    padding-bottom: 0px;
+  }
+
   .md\:tw-pl-4 {
     padding-left: 1rem;
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@designcrowd/fe-shared-lib",
-  "version": "1.5.27-ENG-3954",
+  "version": "1.5.27",
   "scripts": {
     "start": "run-p storybook watch:translation",
     "build": "npm run build:css --production",

package/src/atoms/components/Button/variants/ButtonGray.vue

@@ -1,14 +1,15 @@
 <template>
   <button
     v-if="!url"
-    class="tw-font-sans tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
+    class="tw-font-sans tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300"
     :class="[
       classes,
       computedClasses,
       {
         'no-rounded-l': !rounded && !roundedLeft,
         'no-rounded-r': !rounded && !roundedRight,
-        'tw-cursor-pointer tw-bg-grayscale-300 hover:tw-bg-grayscale-500': !disabled,
+        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-500 hover:tw-bg-grayscale-500':
+          !disabled,
         'tw-bg-grayscale-100 tw-border-grayscale-300 tw-cursor-not-allowed': disabled,
       },
     ]"
@@ -22,15 +23,16 @@
   <a
     v-else
     :href="computedUrl"
-    class="tw-justify-center tw-font-sans tw-inline-flex tw-font-bold tw-text-grayscale-800 hover:tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
+    class="tw-justify-center tw-font-sans tw-inline-flex tw-border-2 tw-font-bold tw-text-grayscale-800 tw-uppercase tw-border-solid tw-transition-colors tw-duration-300 tw-no-underline"
     :class="[
       classes,
       computedClasses,
       {
         'no-rounded-l': !rounded && !roundedLeft,
         'no-rounded-r': !rounded && !roundedRight,
-        'tw-cursor-pointer tw-bg-grayscale-300 hover:tw-bg-grayscale-500': !disabled,
-        'tw-bg-grayscale-100 tw-cursor-not-allowed': disabled,
+        'tw-cursor-pointer tw-bg-grayscale-300 tw-border-grayscale-300 hover:tw-border-grayscale-500 hover:tw-bg-grayscale-500':
+          !disabled,
+        'tw-bg-grayscale-100 tw-border-grayscale-100 tw-cursor-not-allowed': disabled,
       },
     ]"
     :download="download"

package/src/atoms/components/Icon/Icon.stories.js

@@ -14,8 +14,12 @@ export const IconSample = () => {
       return {
         sizes: ['xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'],
         icons: [
-          { name: 'crown' },
-          { name: 'crown-alt' },
+          { name: 'websites-upgrade-to-add-page' },
+          { name: 'websites-upgrade-to-contact-form' },
+          { name: 'websites-upgrade-to-remove-watermark' },
+          { name: 'websites-upgrade-to-publish' },
+          { name: 'websites-upgrade-to-videos' },
+          { name: 'websites-upgrade-to-maps' },
           { name: 'add-page' },
           { name: 'ai' },
           { name: 'arrow-down' },
@@ -383,6 +387,7 @@ export const IconSample = () => {
             <div class="tw-grid tw-grid-cols-8 tw-gap-4 tw-items-center" style="grid-template-columns: repeat(8, minmax(0, 1fr));">
               <Icon
                 v-for="size in sizes"
+                viewBox="0 0 96 96"
                 :name="icon.name"
                 :alt-text="icon.altText"
                 :size="size"

package/src/atoms/components/Icon/Icon.vue

@@ -50,12 +50,12 @@ import IconAttach from './icons/attach.vue';
 import IconAuthFacebookWhite from './icons/auth-facebook-white.vue';
 import IconAuthFacebook from './icons/auth-facebook.vue';
 import IconAuthGoogle from './icons/auth-google.vue';
+import IconBriefcase from './icons/briefcase.vue';
 import IconBackground from './icons/background.vue';
 import IconBannerCentered from './icons/banner-centered.vue';
 import IconBannerLeft from './icons/banner-left.vue';
 import IconBanner from './icons/banner.vue';
 import IconBcMast from './icons/bc-mast.vue';
-import IconBriefcase from './icons/briefcase.vue';
 import IconBrush from './icons/brush.vue';
 import IconBusinessCardFilled from './icons/business-card-filled.vue';
 import IconBusiness from './icons/business.vue';
@@ -105,8 +105,6 @@ import IconCopy from './icons/copy.vue';
 import IconFilterCrazyDomains from './icons/crazy-domains/filter.vue';
 import IconGlobeCrazyDomains from './icons/crazy-domains/globe.vue';
 import IconHomeCrazyDomains from './icons/crazy-domains/home.vue';
-import IconCrownAlt from './icons/crown-alt.vue';
-import IconCrown from './icons/crown.vue';
 import IconDelete from './icons/delete.vue';
 import IconDesigns from './icons/designs.vue';
 import IconDesktop from './icons/desktop.vue';
@@ -224,14 +222,11 @@ import IconSocialInstagramCrazyDomains from './icons/crazy-domains/social-instag
 import IconSocialTwitterCrazyDomains from './icons/crazy-domains/social-twitter.vue';
 import IconSocialYoutubeCrazyDomains from './icons/crazy-domains/social-youtube.vue';
 import IconCrop from './icons/crop.vue';
-import IconDigitalBusinessCardFilled from './icons/digital-business-card-filled.vue';
 import IconFormMessage from './icons/form-message.vue';
 import IconGodaddy from './icons/godaddy/logo.vue';
 import IconIconStyleCircleBg from './icons/icon-style-circle-bg.vue';
 import IconIconStyleNoBg from './icons/icon-style-no-bg.vue';
 import IconIconStyleSquareBg from './icons/icon-style-square-bg.vue';
-import IconLinkInBioFilled from './icons/link-in-bio-filled.vue';
-import IconMedia from './icons/media.vue';
 import IconMinusCircleLight from './icons/minus-circle-light.vue';
 import IconMinus from './icons/minus.vue';
 import IconMobile from './icons/mobile.vue';
@@ -259,8 +254,9 @@ import IconQuestion from './icons/question.vue';
 import IconQuote from './icons/quote.vue';
 import IconReload from './icons/reload.vue';
 import IconReorderable from './icons/reorderable.vue';
-import IconRequestPayment from './icons/request-payment.vue';
 import IconResize from './icons/resize.vue';
+import IconMedia from './icons/media.vue';
+import IconRequestPayment from './icons/request-payment.vue';
 import IconSearch from './icons/search.vue';
 import IconSecure from './icons/secure.vue';
 import IconSend from './icons/send.vue';
@@ -269,6 +265,7 @@ import IconSettings from './icons/settings.vue';
 import IconShare from './icons/share.vue';
 import IconShieldTick from './icons/shield-tick.vue';
 import IconShop from './icons/shop.vue';
+import IconStop from './icons/stop.vue';
 import IconSms from './icons/sms.vue';
 import IconSocialFacebookColor from './icons/social-facebook-color.vue';
 import IconSocialFacebook from './icons/social-facebook.vue';
@@ -280,7 +277,6 @@ import IconSocialTwitterColor from './icons/social-twitter-color.vue';
 import IconStarFilled from './icons/star-filled.vue';
 import IconStarHollow from './icons/star-hollow.vue';
 import IconSticker from './icons/sticker.vue';
-import IconStop from './icons/stop.vue';
 import IconStyles from './icons/styles.vue';
 import IconSubmit from './icons/submit.vue';
 import IconTemplates from './icons/templates.vue';
@@ -308,6 +304,8 @@ import IconWatchlistFilled from './icons/watchlist-filled.vue';
 import IconWatchlistHollowAlt from './icons/watchlist-hollow-alt.vue';
 import IconWatchlistHollow from './icons/watchlist-hollow.vue';
 import IconWebsiteFilled from './icons/website-filled.vue';
+import IconDigitalBusinessCardFilled from './icons/digital-business-card-filled.vue';
+import IconLinkInBioFilled from './icons/link-in-bio-filled.vue';
 import IconWebsite from './icons/website.vue';
 import IconWholesale from './icons/wholesale.vue';
 import IconZoomIn from './icons/zoom-in.vue';
@@ -329,7 +327,6 @@ import IconShape from './icons/shape.vue';
 // New icons copied from dcom
 import IconAnnotateHeart from './icons/annotate-heart.vue';
 import IconAward from './icons/award.vue';
-import IconBezierCurveOutline from './icons/bezier-curve-outline.vue';
 import IconBezierCurve from './icons/bezier-curve.vue';
 import IconBrowser from './icons/browser.vue';
 import IconCardVertical from './icons/card-vertical.vue';
@@ -339,11 +336,12 @@ import IconHeadphones from './icons/headphones.vue';
 import IconImage from './icons/image.vue';
 import IconLightning from './icons/lightning.vue';
 import IconLogo from './icons/logo.vue';
-import IconPaletteOutline from './icons/palette-outline.vue';
+import IconPen from './icons/pen.vue';
 import IconPenOutline from './icons/pen-outline.vue';
 import IconPenSparkle from './icons/pen-sparkle.vue';
-import IconPen from './icons/pen.vue';
 import IconSparkleSquare from './icons/sparkle-square.vue';
+import IconBezierCurveOutline from './icons/bezier-curve-outline.vue';
+import IconPaletteOutline from './icons/palette-outline.vue';
 
 // Maker Icons
 import IconMakerAlignCenter from './icons/maker/align-center.vue';
@@ -424,18 +422,18 @@ import IconFlipVertical from './icons/flip-vertical.vue';
 import IconVolumeMuted from './icons/volume-muted.vue';
 import IconVolume from './icons/volume.vue';
 
-import IconBadge from './icons/badge.vue';
-import IconCalculator from './icons/calculator.vue';
-import IconClipboardCheck from './icons/clipboard-check.vue';
 import IconFile from './icons/file.vue';
 import IconPenTool from './icons/pen-tool.vue';
+import IconClipboardCheck from './icons/clipboard-check.vue';
+import IconBadge from './icons/badge.vue';
+import IconCalculator from './icons/calculator.vue';
 import IconWebsitesUpgradeToAddPage from './icons/websites/upgrade-to-add-page.vue';
 import IconWebsitesUpgradeToContactForm from './icons/websites/upgrade-to-contact-form.vue';
-import IconWebsitesUpgradeToGoogleAd from './icons/websites/upgrade-to-google-ad.vue';
-import IconWebsitesUpgradeToMaps from './icons/websites/upgrade-to-maps.vue';
-import IconWebsitesUpgradeToPublish from './icons/websites/upgrade-to-publish.vue';
 import IconWebsitesUpgradeToRemoveWatermark from './icons/websites/upgrade-to-remove-watermark.vue';
+import IconWebsitesUpgradeToPublish from './icons/websites/upgrade-to-publish.vue';
 import IconWebsitesUpgradeToVideos from './icons/websites/upgrade-to-videos.vue';
+import IconWebsitesUpgradeToMaps from './icons/websites/upgrade-to-maps.vue';
+import IconWebsitesUpgradeToGoogleAd from './icons/websites/upgrade-to-google-ad.vue';
 
 import IconGroup from './icons/group.vue';
 import IconPremiumContent from './icons/premium-content.vue';
@@ -508,7 +506,6 @@ export default {
     IconColumn2,
     IconColumn3,
     IconColumn4,
-    IconCrownAlt,
     IconCopy,
     IconDelete,
     IconDesigns,
@@ -615,7 +612,6 @@ export default {
     IconDisplayStyleContact5,
     IconDisplayStyleContact6,
     IconLetterheadFilled,
-    IconCrown,
     IconLink,
     IconLocation,
     IconLock,

package/src/atoms/components/Price/Price.stories.js

@@ -1,9 +1,7 @@
-import Price from './Price.vue';
+import { defineComponent } from 'vue';
+import { setSharedLibLocaleAsync } from '../../../useSharedLibTranslate';
 import { currencies, locales } from './Price.fixtures';
-import { setSharedLibLocaleAsync } from "../../../useSharedLibTranslate";
-import { defineComponent } from "vue";
-
-await setSharedLibLocaleAsync();
+import Price from './Price.vue';
 
 // noinspection JSUnusedGlobalSymbols
 export default {
@@ -11,7 +9,7 @@ export default {
   component: Price,
   args: {
     currencyName: currencies[0].name,
-    locale: locales[0]
+    locale: locales[0],
   },
   argTypes: {
     amount: {
@@ -44,6 +42,9 @@ export const Sample = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price 
@@ -76,6 +77,9 @@ export const WithFraction = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -109,6 +113,9 @@ export const AlwaysShowFractionOn = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -140,6 +147,9 @@ export const AlwaysShowFractionOff = {
           return currencies.find((x) => x.name === this.args.currencyName);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -174,6 +184,9 @@ export const WithSuffix = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -210,6 +223,9 @@ export const WithLocale = {
           return locales.find((x) => x === this.args.locale);
         },
       },
+      async mounted() {
+        await setSharedLibLocaleAsync();
+      },
       template: `
       <span>
         <price
@@ -235,12 +251,17 @@ export const AllLocalesAndCurrencies = (args, { argTypes }) => {
     data() {
       const combos = new Array(locales.length).fill(0);
       combos.forEach((item, index) => {
-        combos[index] = new Array(currencies.length).fill(0).map((item2, index2) => ({"locale": locales[index], "currency": currencies[index2]}));
-      })
+        combos[index] = new Array(currencies.length)
+          .fill(0)
+          .map((item2, index2) => ({ locale: locales[index], currency: currencies[index2] }));
+      });
       return {
         variants: combos,
       };
     },
+    async mounted() {
+      await setSharedLibLocaleAsync();
+    },
     template: `
       <StorybookPriceComponent
           :variants="variants"/>
@@ -253,20 +274,20 @@ export const AllLocalesAndCurrencies = (args, { argTypes }) => {
 };
 
 const StorybookPriceComponent = defineComponent({
-    components: {
-      Price,
+  components: {
+    Price,
+  },
+  props: {
+    variants: {
+      type: Array,
+      required: true,
     },
-    props: {
-      variants: {
-        type: Array,
-        required: true,
-      },
-      showAbbreviation: {
-        type: Boolean,
-        default: false,
-      },
+    showAbbreviation: {
+      type: Boolean,
+      default: false,
     },
-    template: `
+  },
+  template: `
     <table class="tw-w-full">
       <thead>
         <tr>
@@ -289,4 +310,4 @@ const StorybookPriceComponent = defineComponent({
       </tbody>
     </table>
   `,
-});
+});

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

@@ -36,9 +36,9 @@
           </div>
         </div>
       </div>
-      <div class="bottom-bar tw-mt-2 tw-border-grayscale-300">
+      <div class="bottom-bar tw-mt-2">
         <div
-          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"
+          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"
         >
           <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,8 +190,7 @@ 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 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;
+  @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;
 }
 .button-size {
   @apply tw-w-full md:tw-max-w-40;

package/tailwind.config.js

@@ -16,7 +16,7 @@ const designSystemConfig = {
   viewports,
 };
 
-const theme = designSystemConfig.themes[process.env.tailwindTheme]; // use the environment theme from functions/tailwind.js
+const theme = designSystemConfig.themes[process.env.tailwindTheme] || dcomTheme; // use the environment theme from functions/tailwind.js, default to designCom
 module.exports = {
   prefix: 'tw-',
   content: ['./src/**/components/**/*.vue'],

package/src/atoms/components/Icon/icons/crown-alt.vue

@@ -1,5 +0,0 @@
-<template>
-  <path
-    d="M12.55 12.125C12.6521 12.125 12.7323 12.1536 12.7906 12.2109C12.8635 12.2826 12.9 12.3685 12.9 12.4688V13.1562C12.9 13.2565 12.8635 13.3353 12.7906 13.3926C12.7323 13.4642 12.6521 13.5 12.55 13.5H3.45C3.34792 13.5 3.26042 13.4642 3.1875 13.3926C3.12917 13.3353 3.1 13.2565 3.1 13.1562V12.4688C3.1 12.3685 3.12917 12.2826 3.1875 12.2109C3.26042 12.1536 3.34792 12.125 3.45 12.125H12.55ZM13.2063 5.55078C13.4104 5.35026 13.6583 5.25 13.95 5.25C14.2417 5.25 14.4896 5.35026 14.6938 5.55078C14.8979 5.7513 15 5.99479 15 6.28125C15 6.56771 14.8979 6.8112 14.6938 7.01172C14.4896 7.21224 14.2417 7.3125 13.95 7.3125C13.9062 7.3125 13.8479 7.30534 13.775 7.29102L12.2 11.4375H3.8L2.225 7.29102C2.15208 7.30534 2.09375 7.3125 2.05 7.3125C1.75833 7.3125 1.51042 7.21224 1.30625 7.01172C1.10208 6.8112 1 6.56771 1 6.28125C1 5.99479 1.10208 5.7513 1.30625 5.55078C1.51042 5.35026 1.75833 5.25 2.05 5.25C2.34167 5.25 2.58958 5.35026 2.79375 5.55078C2.99792 5.7513 3.1 5.99479 3.1 6.28125C3.1 6.42448 3.07083 6.56771 3.0125 6.71094L4.5875 7.63477C4.74792 7.73503 4.92292 7.76367 5.1125 7.7207C5.31667 7.66341 5.4625 7.55599 5.55 7.39844L7.34375 4.32617C7.08125 4.11133 6.95 3.84635 6.95 3.53125C6.95 3.24479 7.05208 3.0013 7.25625 2.80078C7.46042 2.60026 7.70833 2.5 8 2.5C8.29167 2.5 8.53958 2.60026 8.74375 2.80078C8.94792 3.0013 9.05 3.24479 9.05 3.53125C9.05 3.84635 8.91875 4.11133 8.65625 4.32617L10.45 7.39844C10.5375 7.55599 10.676 7.66341 10.8656 7.7207C11.0552 7.76367 11.2375 7.73503 11.4125 7.63477L12.9875 6.71094C12.9292 6.56771 12.9 6.42448 12.9 6.28125C12.9 5.99479 13.0021 5.7513 13.2063 5.55078Z"
-  />
-</template>

package/src/atoms/components/Icon/icons/crown.vue

@@ -1,6 +0,0 @@
-<template>
-  <path
-    d="M12.55 12.125C12.6521 12.125 12.7323 12.1536 12.7906 12.2109C12.8635 12.2826 12.9 12.3685 12.9 12.4688V13.1562C12.9 13.2565 12.8635 13.3353 12.7906 13.3926C12.7323 13.4642 12.6521 13.5 12.55 13.5H3.45C3.34792 13.5 3.26042 13.4642 3.1875 13.3926C3.12917 13.3353 3.1 13.2565 3.1 13.1562V12.4688C3.1 12.3685 3.12917 12.2826 3.1875 12.2109C3.26042 12.1536 3.34792 12.125 3.45 12.125H12.55ZM13.2063 5.55078C13.4104 5.35026 13.6583 5.25 13.95 5.25C14.2417 5.25 14.4896 5.35026 14.6938 5.55078C14.8979 5.7513 15 5.99479 15 6.28125C15 6.56771 14.8979 6.8112 14.6938 7.01172C14.4896 7.21224 14.2417 7.3125 13.95 7.3125C13.9062 7.3125 13.8479 7.30534 13.775 7.29102L12.2 11.4375H3.8L2.225 7.29102C2.15208 7.30534 2.09375 7.3125 2.05 7.3125C1.75833 7.3125 1.51042 7.21224 1.30625 7.01172C1.10208 6.8112 1 6.56771 1 6.28125C1 5.99479 1.10208 5.7513 1.30625 5.55078C1.51042 5.35026 1.75833 5.25 2.05 5.25C2.34167 5.25 2.58958 5.35026 2.79375 5.55078C2.99792 5.7513 3.1 5.99479 3.1 6.28125C3.1 6.42448 3.07083 6.56771 3.0125 6.71094L4.5875 7.63477C4.74792 7.73503 4.92292 7.76367 5.1125 7.7207C5.31667 7.66341 5.4625 7.55599 5.55 7.39844L7.34375 4.32617C7.08125 4.11133 6.95 3.84635 6.95 3.53125C6.95 3.24479 7.05208 3.0013 7.25625 2.80078C7.46042 2.60026 7.70833 2.5 8 2.5C8.29167 2.5 8.53958 2.60026 8.74375 2.80078C8.94792 3.0013 9.05 3.24479 9.05 3.53125C9.05 3.84635 8.91875 4.11133 8.65625 4.32617L10.45 7.39844C10.5375 7.55599 10.676 7.66341 10.8656 7.7207C11.0552 7.76367 11.2375 7.73503 11.4125 7.63477L12.9875 6.71094C12.9292 6.56771 12.9 6.42448 12.9 6.28125C12.9 5.99479 13.0021 5.7513 13.2063 5.55078Z"
-    fill="#E3A008"
-  />
-</template>