@saasquatch/mint-components 2.1.10-53 → 2.1.10-55

package/dist/cjs/sqm-big-stat_46.cjs.entry.js

@@ -7877,20 +7877,21 @@ const TimelineReward = class {
   }
 };
 
-function getStyle(props) {
-  return `
-  p {
-    margin: 0;
-    padding: 0;
-    ${props.fontsize && `font-size: ${props.fontsize};`}
-    ${props.fontweight && `font-weight: ${props.fontweight};`}
-    color: ${props.color ? props.color : "var(--sqm-text)"};
-  }`;
-}
 function UserAttributeView(props) {
+  const style = {
+    P: {
+      margin: "0",
+      padding: "0",
+      fontSize: props.fontsize || "inherit",
+      fontWeight: props.fontweight || "inherit",
+      color: props.color || "var(--sqm-text)",
+    },
+  };
+  const sheet = JSS.createStyleSheet(style);
+  const styleString = sheet.toString();
   const loadingSkeleton = (index.h("sqm-skeleton", { width: "200px", height: "20px" }));
   return (props.value && (index.h(index.Host, null,
-    index.h("style", null, getStyle(props)),
+    index.h("style", null, styleString),
     index.h("p", { part: "sqm-base" }, props.loading ? loadingSkeleton : props.value))));
 }
 

package/dist/collection/components/sqm-user-attribute/sqm-user-attribute-view.js

@@ -1,17 +1,19 @@
 import { h, Host } from "@stencil/core";
-function getStyle(props) {
-  return `
-  p {
-    margin: 0;
-    padding: 0;
-    ${props.fontsize && `font-size: ${props.fontsize};`}
-    ${props.fontweight && `font-weight: ${props.fontweight};`}
-    color: ${props.color ? props.color : "var(--sqm-text)"};
-  }`;
-}
+import { createStyleSheet } from "../../styling/JSS";
 export function UserAttributeView(props) {
+  const style = {
+    P: {
+      margin: "0",
+      padding: "0",
+      fontSize: props.fontsize || "inherit",
+      fontWeight: props.fontweight || "inherit",
+      color: props.color || "var(--sqm-text)",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const loadingSkeleton = (h("sqm-skeleton", { width: "200px", height: "20px" }));
   return (props.value && (h(Host, null,
-    h("style", null, getStyle(props)),
+    h("style", null, styleString),
     h("p", { part: "sqm-base" }, props.loading ? loadingSkeleton : props.value))));
 }

package/dist/collection/components/sqm-user-attribute/sqm-user-attribute.js

@@ -6,7 +6,7 @@ import { UserAttributeView, } from "./sqm-user-attribute-view";
 import { useUserAttribute } from "./useUserAttribute";
 /**
  * @uiName User Attribute
- * @exampleGroup Advanced Components
+ * @exampleGroup Advanced
  * @example User Attribute - <sqm-user-attribute value="firstName" loading-text="..."></sqm-user-attribute>
  */
 export class UserAttribute {

package/dist/esm/sqm-big-stat_46.entry.js

@@ -7873,20 +7873,21 @@ const TimelineReward = class {
   }
 };
 
-function getStyle(props) {
-  return `
-  p {
-    margin: 0;
-    padding: 0;
-    ${props.fontsize && `font-size: ${props.fontsize};`}
-    ${props.fontweight && `font-weight: ${props.fontweight};`}
-    color: ${props.color ? props.color : "var(--sqm-text)"};
-  }`;
-}
 function UserAttributeView(props) {
+  const style = {
+    P: {
+      margin: "0",
+      padding: "0",
+      fontSize: props.fontsize || "inherit",
+      fontWeight: props.fontweight || "inherit",
+      color: props.color || "var(--sqm-text)",
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
   const loadingSkeleton = (h$1("sqm-skeleton", { width: "200px", height: "20px" }));
   return (props.value && (h$1(Host, null,
-    h$1("style", null, getStyle(props)),
+    h$1("style", null, styleString),
     h$1("p", { part: "sqm-base" }, props.loading ? loadingSkeleton : props.value))));
 }