@websolutespa/bom-mixer-llm 1.8.5 → 1.8.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.7
+
+### Patch Changes
+
+- Modified: theme settings, Added: Font component
+
+## 1.8.6
+
+### Patch Changes
+
+- Modified: Product Card & Product Card Group style
+
 ## 1.8.5
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -1,33 +1,43 @@
-@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
+/*
+@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');
+
 @font-face {
-  font-family: "Aeonik";
-  src: url("https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2") format("woff2"), url("https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2") format("woff");
+  font-family: 'Aeonik';
+  src:
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2') format('woff2'),
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Medium.woff2') format('woff');
   font-weight: 500;
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Aeonik";
-  src: url("https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff2") format("woff2"), url("https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff") format("woff");
+  font-family: 'Aeonik';
+  src:
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff2') format('woff2'),
+    url('https://design.wslabs.it/llm/fonts/Aeonik-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Capraia";
-  src: url("https://design.wslabs.it/llm/fonts/Capraia-Regular.woff2") format("woff2");
+  font-family: 'Capraia';
+  src: url('https://design.wslabs.it/llm/fonts/Capraia-Regular.woff2') format('woff2');
   font-style: normal;
   font-weight: 400;
   font-display: swap;
 }
+
 @font-face {
-  font-family: "Capraia";
-  src: url("https://design.wslabs.it/llm/fonts/Capraia-Light_W.woff2") format("woff2");
+  font-family: 'Capraia';
+  src: url('https://design.wslabs.it/llm/fonts/Capraia-Light_W.woff2') format('woff2');
   font-weight: 300;
   font-style: normal;
   font-display: swap;
 }
+*/
 /*
 @font-face {
   font-family: 'Capraia';
@@ -881,16 +891,16 @@ llm-embed {
   }
 }
 @media (hover: hover) {
-  .llm .llm__trigger-btn--hover:hover + .llm__trigger-welcome > div {
+  .llm .llm__trigger-btn--hover:hover + .llm__trigger-popup > div {
     opacity: 0;
     translate: -50% 10%;
   }
-  .llm .llm__trigger-btn--hover:hover + .llm__trigger-welcome > div + div {
+  .llm .llm__trigger-btn--hover:hover + .llm__trigger-popup > div + div {
     opacity: 1;
     translate: -50% 0%;
   }
 }
-.llm .llm__trigger-welcome > div {
+.llm .llm__trigger-popup > div {
   position: absolute;
   padding: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px);
   width: calc(100vw - 40px);
@@ -900,23 +910,24 @@ llm-embed {
   translate: -50% 0%;
   border-radius: 12px;
   text-align: center;
-  background: var(--llm-color-background);
-  color: var(--llm-color-foreground);
+  background: var(--llm-popup-background);
+  color: var(--llm-popup-foreground);
+  border: var(--llm-popup-border, none);
   transition: 0.4s;
   pointer-events: auto;
   overflow: hidden;
   cursor: pointer;
 }
-.llm .llm__trigger-welcome > div > span {
+.llm .llm__trigger-popup > div > span {
   position: relative;
 }
-.llm .llm__trigger-welcome > div + div {
+.llm .llm__trigger-popup > div + div {
   width: calc(100vw - 40px);
   max-width: var(--llm-popup-max-width);
   translate: -50% 10%;
   opacity: 0;
 }
-.llm .llm__trigger-welcome-cta {
+.llm .llm__trigger-cta {
   position: relative;
   display: block;
   margin: 12px auto 0 auto;
@@ -1169,7 +1180,7 @@ llm-embed {
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 0, 8px);
   text-transform: uppercase;
   user-select: none;
-  color: var(--llm-color-foreground);
+  color: var(--llm-color-title-foreground);
   pointer-events: auto;
   cursor: pointer;
 }
@@ -1245,6 +1256,7 @@ llm-embed {
   display: flex;
   flex-direction: column;
   gap: clamp(24px, 24px + (100vw - 375px) / 1545 * 16, 40px);
+  color: var(--llm-color-title-foreground);
 }
 .llm .llm__intro-hints {
   margin-top: clamp(24px, 24px + (100vw - 375px) / 1545 * 16, 40px);
@@ -1310,11 +1322,14 @@ llm-embed {
   align-items: center;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 8, 16px);
   text-transform: uppercase;
+  color: var(--llm-hint-title-color, inherit);
 }
 .llm .llm__hint-title i {
+  flex-shrink: 0;
   display: block;
-  width: 18px;
-  height: 18px;
+  width: var(--llm-hint-icon-width, 18px);
+  height: var(--llm-hint-icon-height, 18px);
+  color: var(--llm-hint-icon-color, inherit);
 }
 .llm .llm__hint-title i svg {
   fill: currentColor;
@@ -1327,7 +1342,7 @@ llm-embed {
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 0, 8px);
   display: flex;
   flex-wrap: nowrap;
-  align-items: flex-end;
+  align-items: center;
 }
 .llm .llm__prompt-input {
   position: relative;
@@ -1492,15 +1507,21 @@ llm-embed {
   justify-content: center;
   align-items: center;
   column-gap: 4px;
-  padding: 6px 0;
   right: 0;
   left: 0;
-  font-size: 12px;
   color: var(--llm-color-foreground);
   opacity: 0.4;
   transition: opacity ease-in-out 250ms;
   pointer-events: auto;
   cursor: pointer;
+  padding: 4px 0 0 0;
+  font-size: 11px;
+}
+@media (min-width: 1024px) {
+  .llm .llm__prompt-powered-by {
+    padding: 6px 0;
+    font-size: 12px;
+  }
 }
 .llm .llm__prompt-powered-by:hover {
   opacity: 1;
@@ -1513,8 +1534,9 @@ llm-embed {
   line-height: var(--llm-typography-body1-line-height);
   letter-spacing: var(--llm-typography-body1-letter-spacing);
   font-size: clamp(var(--llm-typography-body1-font-size-min) * 1px, var(--llm-typography-body1-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-body1-font-size-max) - var(--llm-typography-body1-font-size-min)), var(--llm-typography-body1-font-size-max) * 1px);
-  background: linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%);
-  border: 1px solid rgba(237, 237, 237, 0.3);
+  background: var(--llm-user-background);
+  color: var(--llm-user-foreground);
+  border: var(--llm-user-border);
   backdrop-filter: blur(20px);
   border-radius: 12px;
   padding: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px) clamp(24px, 24px + (100vw - 375px) / 1545 * 8, 32px);
@@ -1537,6 +1559,9 @@ llm-embed {
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body {
   font-family: var(--llm-font-primary);
+  background: var(--llm-assistant-background);
+  color: var(--llm-assistant-foreground);
+  border: var(--llm-assistant-border);
   /*
   &,
   p {
@@ -1612,7 +1637,7 @@ llm-embed {
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body b,
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body strong {
-  font-weight: 900;
+  font-weight: var(--llm-typography-cta2-font-weight);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body h1,
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body h2,
@@ -1648,11 +1673,11 @@ llm-embed {
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body blockquote {
   margin-bottom: var(--llm-markdown-margin-bottom);
   padding-left: 0.5em;
-  border-left: 4px solid rgba(255, 255, 255, 0.2);
+  border-left: var(--llm-markdown-border);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body hr {
   border: none;
-  border-top: 2px solid rgba(255, 255, 255, 0.2);
+  border-top: var(--llm-markdown-border);
   margin-top: var(--llm-markdown-margin-top);
   margin-bottom: var(--llm-markdown-margin-bottom);
 }
@@ -1660,13 +1685,13 @@ llm-embed {
   text-decoration: underline;
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:link, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:active, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:visited, .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body a:hover {
-  color: var(--llm-color-neutral-100);
+  color: var(--llm-markdown-accent);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body img {
   max-width: 320px;
   padding: 8px;
   border-radius: 8px;
-  border: var(--llm-pill-border);
+  border: var(--llm-markdown-border);
 }
 .llm .llm__message--assistant .llm__inner--string .llm__text .llm__text-body .llm__text-img {
   display: block;
@@ -1697,6 +1722,7 @@ llm-embed {
   display: flex;
   gap: clamp(8px, 8px + (100vw - 375px) / 1545 * 8, 16px);
   padding-top: clamp(16px, 16px + (100vw - 375px) / 1545 * 8, 24px);
+  color: var(--llm-color-foreground);
 }
 .llm .llm__text-disclaimer a {
   text-decoration: underline;
@@ -1706,6 +1732,7 @@ llm-embed {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
+  color: var(--llm-color-accent-foreground);
 }
 .llm .llm__text-disclaimer i svg {
   display: block;
@@ -2079,13 +2106,19 @@ llm-embed {
 .llm .llm__gridrow {
   --grid-columns: var(--llm-grid-columns, 12);
   --grid-size: var(--llm-grid-size, 1fr);
-  --grid-column-gap: var(--llm-grid-column-gap, 2rem);
-  --grid-row-gap: var(--llm-grid-row-gap, 2rem);
+  --grid-column-gap: var(--llm-grid-column-gap, 1rem);
+  --grid-row-gap: var(--llm-grid-row-gap, 1rem);
   display: grid;
   grid-template-columns: repeat(var(--grid-columns), var(--grid-size));
   grid-column-gap: var(--grid-column-gap);
   grid-row-gap: var(--grid-row-gap);
 }
+@media (min-width: 768px) {
+  .llm .llm__gridrow {
+    --grid-column-gap: var(--llm-grid-column-gap, 2rem);
+    --grid-row-gap: var(--llm-grid-row-gap, 2rem);
+  }
+}
 .llm .llm__grid {
   --grid-column: var(--llm-grid-columns, 12);
   grid-column: span var(--grid-column);
@@ -2102,6 +2135,30 @@ llm-embed {
 .llm .llm__grid.--xs-4 {
   --grid-column: 4;
 }
+.llm .llm__grid.--xs-5 {
+  --grid-column: 5;
+}
+.llm .llm__grid.--xs-6 {
+  --grid-column: 6;
+}
+.llm .llm__grid.--xs-7 {
+  --grid-column: 7;
+}
+.llm .llm__grid.--xs-8 {
+  --grid-column: 8;
+}
+.llm .llm__grid.--xs-9 {
+  --grid-column: 9;
+}
+.llm .llm__grid.--xs-10 {
+  --grid-column: 10;
+}
+.llm .llm__grid.--xs-11 {
+  --grid-column: 11;
+}
+.llm .llm__grid.--xs-12 {
+  --grid-column: 12;
+}
 @media (min-width: 768px) {
   .llm .llm__grid.--sm-1 {
     --grid-column: 1;
@@ -2122,6 +2179,46 @@ llm-embed {
     --grid-column: 4;
   }
 }
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-5 {
+    --grid-column: 5;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-6 {
+    --grid-column: 6;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-7 {
+    --grid-column: 7;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-8 {
+    --grid-column: 8;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-9 {
+    --grid-column: 9;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-10 {
+    --grid-column: 10;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-11 {
+    --grid-column: 11;
+  }
+}
+@media (min-width: 768px) {
+  .llm .llm__grid.--sm-12 {
+    --grid-column: 12;
+  }
+}
 @media (min-width: 1024px) {
   .llm .llm__grid.--md-1 {
     --grid-column: 1;
@@ -2315,6 +2412,9 @@ llm-embed {
   overflow: hidden;
   font-weight: 100;
 }
+.llm .llm__product:hover .llm__product-title {
+  text-decoration: underline;
+}
 .llm .llm__product-media {
   position: relative;
   padding: 1rem;
@@ -2380,9 +2480,6 @@ llm-embed {
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
 }
-.llm .llm__product-title:hover {
-  text-decoration: underline;
-}
 .llm .llm__product-abstract {
   line-height: 1;
   font-family: var(--llm-font-secondary);

package/dist/cjs/index.js

@@ -159,7 +159,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 
 var font = {
   primary: "Aeonik, Arial, Helvetica, sans-serif",
-  secondary: "Capraia, Georgia, serif"
+  secondary: "Capraia, Georgia, serif",
+  source: "<link rel=\"stylesheet\" href=\"https://design.wslabs.it/llm/fonts/aeonik.css\"><link rel=\"stylesheet\" href=\"https://design.wslabs.it/llm/fonts/capraia.css\">"
 };
 var typography = {
   display1: {
@@ -321,6 +322,10 @@ var color = {
   },
   background: "var(--llm-color-base-100)",
   foreground: "var(--llm-color-neutral-100)",
+  title: {
+    background: "var(--llm-color-background)",
+    foreground: "var(--llm-color-foreground)"
+  },
   primary: {
     background: "var(--llm-color-base-200)",
     foreground: "var(--llm-color-neutral-100)"
@@ -347,13 +352,16 @@ var trigger = {
   foreground: "var(--llm-color-base-100)",
   boxShadow: "0 0 30px rgba(0, 0, 0, 0.3)"
 };
+var popup = {
+  maxWidth: "210px",
+  background: "var(--llm-color-title-background)",
+  foreground: "var(--llm-color-title-foreground)",
+  border: "none"
+};
 var triggerCta = {
   background: "var(--llm-color-neutral-100)",
   foreground: "var(--llm-color-base-100)"
 };
-var popup = {
-  maxWidth: "210px"
-};
 var hint = {
   fontFamily: "var(--llm-font-primary)",
   background: "linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%)",
@@ -361,10 +369,18 @@ var hint = {
   border: "1px solid rgba(237, 237, 237, 0.3)",
   borderRadius: "12px"
 };
+var hintTitle = {
+  color: "var(--llm-color-foreground)"
+};
+var hintIcon = {
+  width: "18px",
+  height: "18px",
+  color: "var(--llm-color-foreground)"
+};
 var pill = {
   fontFamily: "var(--llm-font-primary)",
   background: "rgba(255, 255, 255, 0.2)",
-  foreground: "var(--llm-color-foreground)",
+  foreground: "var(--llm-color-title-foreground)",
   border: "1px solid rgba(237, 237, 237, 0.3)",
   borderRadius: "5px"
 };
@@ -377,6 +393,23 @@ var input = {
 var checkbox = {
   border: "2px solid var(--llm-color-neutral-100)"
 };
+var user = {
+  background: "linear-gradient(rgba(154, 154, 154, 0.2) 10%, rgba(221, 221, 221, 0.1) 80%)",
+  foreground: "var(--llm-color-title-foreground)",
+  border: "1px solid rgba(237, 237, 237, 0.3)"
+};
+var assistant = {
+  background: "none",
+  foreground: "var(--llm-color-foreground)",
+  border: "none"
+};
+var markdown = {
+  marginTop: "0.5rem",
+  marginBottom: "1rem",
+  marginLeft: "1rem",
+  accent: "var(--llm-color-foreground)",
+  border: "1px solid rgba(237, 237, 237, 0.3)"
+};
 var card = {
   background: "var(--llm-color-neutral-100)",
   foreground: "var(--llm-color-neutral-900)",
@@ -397,11 +430,6 @@ var productLabel = {
   background: "var(--llm-color-neutral-100)",
   foreground: "var(--llm-color-neutral-900)"
 };
-var markdown = {
-  marginTop: "0.5rem",
-  marginBottom: "1rem",
-  marginLeft: "1rem"
-};
 var theme = {
   font: font,
   typography: typography,
@@ -409,17 +437,21 @@ var theme = {
   border: border,
   canvas: canvas,
   trigger: trigger,
-  triggerCta: triggerCta,
   popup: popup,
+  triggerCta: triggerCta,
   hint: hint,
+  hintTitle: hintTitle,
+  hintIcon: hintIcon,
   pill: pill,
   input: input,
   checkbox: checkbox,
+  user: user,
+  assistant: assistant,
+  markdown: markdown,
   card: card,
   cardVideo: cardVideo,
   product: product,
-  productLabel: productLabel,
-  markdown: markdown
+  productLabel: productLabel
 };
 
 const defaultTheme = theme;
@@ -3177,6 +3209,43 @@ const useCanvasOffscreen = canvasRef => {
   }, [canvasOffscreen, canvasRef, pixelRatio]);
 };
 
+const Font = () => {
+  const app = useLlm(state => state.app);
+  const theme = useLlm(state => state.theme);
+  react.useEffect(() => {
+    if (app && bomCore.isBrowser) {
+      const head = document.querySelector('head');
+      if (head) {
+        const fontId = uuid.v4();
+        const htmlText = theme.font.source || `
+<link rel="stylesheet" href="https://design.wslabs.it/llm/fonts/aeonik.css">
+<link rel="stylesheet" href="https://design.wslabs.it/llm/fonts/capraia.css">
+        `;
+        const parser = new DOMParser();
+        const parsedDocument = parser.parseFromString(htmlText, 'text/html');
+        const nodes = Array.from(parsedDocument.querySelectorAll('head>*'));
+        const selector = `llm-font-${fontId}`;
+        nodes.forEach(node => {
+          node.classList.add(selector);
+          head.appendChild(node);
+          console.log('[mixer-llm] added font node', node);
+        });
+        return () => {
+          const addedNodes = Array.from(document.querySelectorAll(`.${selector}`));
+          addedNodes.forEach(node => {
+            if (node.parentNode) {
+              node.parentNode.removeChild(node);
+              console.log('[mixer-llm] removed font node', node);
+            }
+          });
+        };
+      }
+    }
+    return () => {};
+  }, [app]);
+  return jsxRuntime.jsx(jsxRuntime.Fragment, {});
+};
+
 function Canvas() {
   const ref = react.useRef(null);
   useCanvasOffscreen(ref);
@@ -3540,7 +3609,7 @@ const Intro = () => {
             })
           }), jsxRuntime.jsx(framerMotion.motion.div, {
             variants: motionItem,
-            className: "llm__intro-title -llm-t-display-3",
+            className: "llm__intro-title -llm-t-display-2",
             children: app === null || app === void 0 ? void 0 : app.contents.extendedWelcomeText
           })]
         }), jsxRuntime.jsx(framerMotion.motion.div, {
@@ -4846,7 +4915,14 @@ const ProductWrapper = _a => {
     props = __rest(_a, ["children"]);
   // const label = useLabel();
   const classNames = bomCore.getClassNames('llm__product', `llm__product--${props.productType}`);
-  return jsxRuntime.jsx("div", {
+  return props.url ? jsxRuntime.jsx("a", {
+    className: classNames,
+    href: props.url,
+    target: "_blank",
+    rel: "noreferrer",
+    "aria-label": props.title,
+    children: children
+  }) : jsxRuntime.jsx("div", {
     className: classNames,
     children: children
   });
@@ -4864,12 +4940,8 @@ const Product = props => {
   const hasAvailability = props.availability != null;
   const labelKey = props.label ? `-${transliteration.slugify(props.label)}` : '';
   return jsxRuntime.jsxs(ProductWrapper, Object.assign({}, props, {
-    children: [props.media.type === 'image' && props.url && jsxRuntime.jsxs("a", {
+    children: [props.media.type === 'image' && jsxRuntime.jsxs("div", {
       className: "llm__product-media",
-      href: props.url,
-      target: "_blank",
-      rel: "noreferrer",
-      "aria-label": label('llm.tellMeMore'),
       children: [jsxRuntime.jsx("div", {
         className: "llm__product-asset",
         children: jsxRuntime.jsx("img", {
@@ -4884,18 +4956,6 @@ const Product = props => {
         },
         children: props.label
       })]
-    }), props.media.type === 'image' && !props.url && jsxRuntime.jsxs("div", {
-      className: "llm__product-media",
-      children: [jsxRuntime.jsx("div", {
-        className: "llm__product-asset",
-        children: jsxRuntime.jsx("img", {
-          src: props.media.src,
-          alt: props.title
-        })
-      }), props.label && jsxRuntime.jsx("div", {
-        className: "llm__product-label",
-        children: props.label
-      })]
     }), jsxRuntime.jsxs("div", {
       className: "llm__product-content",
       children: [props.sku && jsxRuntime.jsx("div", {
@@ -4903,15 +4963,7 @@ const Product = props => {
         children: props.sku
       }), jsxRuntime.jsxs("div", {
         className: "llm__product-grow",
-        children: [props.title && props.url && jsxRuntime.jsx("a", {
-          className: "llm__product-title",
-          href: props.url,
-          target: "_blank",
-          rel: "noreferrer",
-          dangerouslySetInnerHTML: {
-            __html: props.title
-          }
-        }), props.title && !props.url && jsxRuntime.jsx("div", {
+        children: [props.title && jsxRuntime.jsx("div", {
           className: "llm__product-title",
           dangerouslySetInnerHTML: {
             __html: props.title
@@ -4939,11 +4991,8 @@ const Product = props => {
       }) : jsxRuntime.jsx("div", {
         className: "llm__product-soldout",
         children: label('llm.soldOut')
-      })), props.cta && props.url && jsxRuntime.jsxs("a", {
+      })), props.cta && jsxRuntime.jsxs("div", {
         className: "llm__product-cta",
-        href: props.url,
-        target: "_blank",
-        rel: "noreferrer",
         children: [jsxRuntime.jsx("span", {
           children: props.cta
         }), " ", jsxRuntime.jsx(bomMixerIcons.IconLlmChevronRightCircle, {})]
@@ -4979,7 +5028,7 @@ const ProductGroup = props => {
     children: jsxRuntime.jsx(GridRow, {
       rowGap: "2rem",
       children: props.items.map((item, i) => jsxRuntime.jsx(Grid, {
-        sm: 6,
+        xs: 6,
         md: 4,
         lg: 3,
         children: jsxRuntime.jsx(Product, Object.assign({}, item))
@@ -5341,7 +5390,7 @@ const Trigger = () => {
         children: label('llm.button')
       })]
     }), !opened && jsxRuntime.jsxs("div", {
-      className: "llm__trigger-welcome -llm-t-body-2",
+      className: "llm__trigger-popup -llm-t-body-2",
       children: [jsxRuntime.jsxs(framerMotion.motion.div, {
         exit: {
           opacity: 0
@@ -5350,7 +5399,7 @@ const Trigger = () => {
           text: app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeText
         }), (app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextCta) && jsxRuntime.jsx("button", {
           type: "button",
-          className: "llm__trigger-welcome-cta",
+          className: "llm__trigger-cta",
           children: app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextCta
         })]
       }), (app === null || app === void 0 ? void 0 : app.contents.collapsedWelcomeTextHover) && jsxRuntime.jsxs(framerMotion.motion.div, {
@@ -5413,8 +5462,8 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
   });
   if (mounted) {
     return jsxRuntime.jsx(jsxRuntime.Fragment, {
-      children: app && jsxRuntime.jsx(CanvasOffscreenProvider, {
-        children: jsxRuntime.jsxs("div", Object.assign({
+      children: app && jsxRuntime.jsxs(CanvasOffscreenProvider, {
+        children: [jsxRuntime.jsx(Font, {}), jsxRuntime.jsxs("div", Object.assign({
           ref: innerRef,
           className: classNames
         }, props, {
@@ -5427,7 +5476,7 @@ const LlmComponent = /*#__PURE__*/react.forwardRef((props, ref) => {
             initial: false,
             children: shouldShowTrigger && jsxRuntime.jsx(Trigger, {}, "trigger")
           })]
-        }))
+        }))]
       })
     });
   } else {