@websolutespa/bom-llm 0.0.27 → 0.0.29

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @websolutespa/bom-llm
 
+## 0.0.29
+
+### Patch Changes
+
+- Modified: theme settings, Added: Font component
+
+## 0.0.28
+
+### Patch Changes
+
+- Modified: Product Card & Product Card Group style
+
 ## 0.0.27
 
 ### Patch Changes

package/dist/umd/index.css

@@ -1,5 +1,3 @@
-@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");
 .llm html,
 .llm body,
 .llm p,
@@ -134,34 +132,46 @@
   background-color: transparent;
 }
 
+/*
+@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';
@@ -1015,16 +1025,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);
@@ -1034,23 +1044,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;
@@ -1303,7 +1314,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;
 }
@@ -1379,6 +1390,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);
@@ -1444,11 +1456,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;
@@ -1461,7 +1476,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;
@@ -1626,15 +1641,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;
@@ -1647,8 +1668,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);
@@ -1671,6 +1693,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 {
@@ -1746,7 +1771,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,
@@ -1782,11 +1807,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);
 }
@@ -1794,13 +1819,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;
@@ -1831,6 +1856,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;
@@ -1840,6 +1866,7 @@ llm-embed {
   width: 18px;
   height: 18px;
   flex-shrink: 0;
+  color: var(--llm-color-accent-foreground);
 }
 .llm .llm__text-disclaimer i svg {
   display: block;
@@ -2213,13 +2240,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);
@@ -2236,6 +2269,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;
@@ -2256,6 +2313,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;
@@ -2449,6 +2546,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;
@@ -2514,9 +2614,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/umd/index.js

@@ -17760,7 +17760,8 @@
 
 	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: {
@@ -17922,6 +17923,10 @@
 	  },
 	  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)"
@@ -17948,13 +17953,16 @@
 	  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%)",
@@ -17962,10 +17970,18 @@
 	  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"
 	};
@@ -17978,6 +17994,23 @@
 	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)",
@@ -17998,11 +18031,6 @@
 	  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,
@@ -18010,17 +18038,21 @@
 	  border: border,
 	  canvas: canvas,
 	  trigger: trigger$1,
-	  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;
@@ -21169,6 +21201,46 @@ void main(void) {
 	  }, [canvasOffscreen, canvasRef, pixelRatio]);
 	};
 
+	/*
+	<link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+	*/
+	const Font = () => {
+	  const app = useLlm(state => state.app);
+	  const theme = useLlm(state => state.theme);
+	  reactExports.useEffect(() => {
+	    if (app && isBrowser$1) {
+	      const head = document.querySelector('head');
+	      if (head) {
+	        const fontId = 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 /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {});
+	};
+
 	function Canvas() {
 	  const ref = reactExports.useRef(null);
 	  useCanvasOffscreen(ref);
@@ -27298,7 +27370,7 @@ void main(void) {
 	            })
 	          }), /*#__PURE__*/jsxRuntimeExports.jsx(motion.div, {
 	            variants: motionItem,
-	            className: "llm__intro-title -llm-t-display-3",
+	            className: "llm__intro-title -llm-t-display-2",
 	            children: app?.contents.extendedWelcomeText
 	          })]
 	        }), /*#__PURE__*/jsxRuntimeExports.jsx(motion.div, {
@@ -32562,7 +32634,14 @@ void main(void) {
 	  } = _ref;
 	  // const label = useLabel();
 	  const classNames = getClassNames('llm__product', `llm__product--${props.productType}`);
-	  return /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	  return props.url ? /*#__PURE__*/jsxRuntimeExports.jsx("a", {
+	    className: classNames,
+	    href: props.url,
+	    target: "_blank",
+	    rel: "noreferrer",
+	    "aria-label": props.title,
+	    children: children
+	  }) : /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	    className: classNames,
 	    children: children
 	  });
@@ -32581,12 +32660,8 @@ void main(void) {
 	  const labelKey = props.label ? `-${bundle_umd_minExports.slugify(props.label)}` : '';
 	  return /*#__PURE__*/jsxRuntimeExports.jsxs(ProductWrapper, {
 	    ...props,
-	    children: [props.media.type === 'image' && props.url && /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
+	    children: [props.media.type === 'image' && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	      className: "llm__product-media",
-	      href: props.url,
-	      target: "_blank",
-	      rel: "noreferrer",
-	      "aria-label": label('llm.tellMeMore'),
 	      children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	        className: "llm__product-asset",
 	        children: /*#__PURE__*/jsxRuntimeExports.jsx("img", {
@@ -32601,18 +32676,6 @@ void main(void) {
 	        },
 	        children: props.label
 	      })]
-	    }), props.media.type === 'image' && !props.url && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-	      className: "llm__product-media",
-	      children: [/*#__PURE__*/jsxRuntimeExports.jsx("div", {
-	        className: "llm__product-asset",
-	        children: /*#__PURE__*/jsxRuntimeExports.jsx("img", {
-	          src: props.media.src,
-	          alt: props.title
-	        })
-	      }), props.label && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
-	        className: "llm__product-label",
-	        children: props.label
-	      })]
 	    }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	      className: "llm__product-content",
 	      children: [props.sku && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
@@ -32620,15 +32683,7 @@ void main(void) {
 	        children: props.sku
 	      }), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	        className: "llm__product-grow",
-	        children: [props.title && props.url && /*#__PURE__*/jsxRuntimeExports.jsx("a", {
-	          className: "llm__product-title",
-	          href: props.url,
-	          target: "_blank",
-	          rel: "noreferrer",
-	          dangerouslySetInnerHTML: {
-	            __html: props.title
-	          }
-	        }), props.title && !props.url && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
+	        children: [props.title && /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	          className: "llm__product-title",
 	          dangerouslySetInnerHTML: {
 	            __html: props.title
@@ -32656,11 +32711,8 @@ void main(void) {
 	      }) : /*#__PURE__*/jsxRuntimeExports.jsx("div", {
 	        className: "llm__product-soldout",
 	        children: label('llm.soldOut')
-	      })), props.cta && props.url && /*#__PURE__*/jsxRuntimeExports.jsxs("a", {
+	      })), props.cta && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	        className: "llm__product-cta",
-	        href: props.url,
-	        target: "_blank",
-	        rel: "noreferrer",
 	        children: [/*#__PURE__*/jsxRuntimeExports.jsx("span", {
 	          children: props.cta
 	        }), " ", /*#__PURE__*/jsxRuntimeExports.jsx(IconLlmChevronRightCircle, {})]
@@ -32696,7 +32748,7 @@ void main(void) {
 	    children: /*#__PURE__*/jsxRuntimeExports.jsx(GridRow, {
 	      rowGap: "2rem",
 	      children: props.items.map((item, i) => /*#__PURE__*/jsxRuntimeExports.jsx(Grid, {
-	        sm: 6,
+	        xs: 6,
 	        md: 4,
 	        lg: 3,
 	        children: /*#__PURE__*/jsxRuntimeExports.jsx(Product, {
@@ -33080,7 +33132,7 @@ void main(void) {
 	        children: label('llm.button')
 	      })]
 	    }), !opened && /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
-	      className: "llm__trigger-welcome -llm-t-body-2",
+	      className: "llm__trigger-popup -llm-t-body-2",
 	      children: [/*#__PURE__*/jsxRuntimeExports.jsxs(motion.div, {
 	        exit: {
 	          opacity: 0
@@ -33089,7 +33141,7 @@ void main(void) {
 	          text: app?.contents.collapsedWelcomeText
 	        }), app?.contents.collapsedWelcomeTextCta && /*#__PURE__*/jsxRuntimeExports.jsx("button", {
 	          type: "button",
-	          className: "llm__trigger-welcome-cta",
+	          className: "llm__trigger-cta",
 	          children: app?.contents.collapsedWelcomeTextCta
 	        })]
 	      }), app?.contents.collapsedWelcomeTextHover && /*#__PURE__*/jsxRuntimeExports.jsxs(motion.div, {
@@ -33152,8 +33204,8 @@ void main(void) {
 	  });
 	  if (mounted) {
 	    return /*#__PURE__*/jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, {
-	      children: app && /*#__PURE__*/jsxRuntimeExports.jsx(CanvasOffscreenProvider, {
-	        children: /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
+	      children: app && /*#__PURE__*/jsxRuntimeExports.jsxs(CanvasOffscreenProvider, {
+	        children: [/*#__PURE__*/jsxRuntimeExports.jsx(Font, {}), /*#__PURE__*/jsxRuntimeExports.jsxs("div", {
 	          ref: innerRef,
 	          className: classNames,
 	          ...props,
@@ -33166,7 +33218,7 @@ void main(void) {
 	            initial: false,
 	            children: shouldShowTrigger && /*#__PURE__*/jsxRuntimeExports.jsx(Trigger, {}, "trigger")
 	          })]
-	        })
+	        })]
 	      })
 	    });
 	  } else {