@websolutespa/bom-llm 0.0.27 → 0.0.28

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-llm
 
+## 0.0.28
+
+### Patch Changes
+
+- Modified: Product Card & Product Card Group style
+
 ## 0.0.27
 
 ### Patch Changes

package/dist/umd/index.css

@@ -1461,7 +1461,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 +1626,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;
@@ -2213,13 +2219,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 +2248,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 +2292,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 +2525,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 +2593,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

@@ -32562,7 +32562,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 +32588,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 +32604,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 +32611,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 +32639,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 +32676,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, {