npm - @saasquatch/mint-components - Versions diffs - 1.5.4-2 → 1.5.5-1 - Mend

@saasquatch/mint-components 1.5.4-2 → 1.5.5-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (827) hide show

package/dist/collection/components/sqm-titled-section/TitledSection.stories.js CHANGED Viewed

@@ -1,224 +1,224 @@
-import { h } from "@stencil/core";
-import scenario from "./sqm-titled-section.feature";
-export default {
-  title: "Components/Titled Section",
-  parameters: {
-    scenario,
-  },
-};
-export const AlignLeft = () => {
-  return (h("sqm-titled-section", { "text-align": "left" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const AlignCenter = () => {
-  return (h("sqm-titled-section", { "text-align": "center" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const AlignRight = () => {
-  return (h("sqm-titled-section", { "text-align": "right" },
-    h("sqm-text", { slot: "label" },
-      h("h3", null, "Earn more rewards"),
-      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
-};
-export const Padding = () => {
-  return (h("div", null,
-    h("h3", null, "None"),
-    h("sqm-titled-section", { padding: "none" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-small"),
-    h("sqm-titled-section", { padding: "xxx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-small"),
-    h("sqm-titled-section", { padding: "xx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-small"),
-    h("sqm-titled-section", { padding: "x-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "small"),
-    h("sqm-titled-section", { padding: "small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "medium"),
-    h("sqm-titled-section", { padding: "medium" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "large"),
-    h("sqm-titled-section", { padding: "large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-large"),
-    h("sqm-titled-section", { padding: "x-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-large"),
-    h("sqm-titled-section", { padding: "xx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-large"),
-    h("sqm-titled-section", { padding: "xxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxxx-large"),
-    h("sqm-titled-section", { padding: "xxxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
-};
-export const LabelMargin = () => {
-  return (h("div", null,
-    h("h3", null, "None"),
-    h("sqm-titled-section", { "label-margin": "none" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-small"),
-    h("sqm-titled-section", { "label-margin": "xxx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-small"),
-    h("sqm-titled-section", { "label-margin": "xx-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-small"),
-    h("sqm-titled-section", { "label-margin": "x-small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "small"),
-    h("sqm-titled-section", { "label-margin": "small" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "medium"),
-    h("sqm-titled-section", { "label-margin": "medium" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "large"),
-    h("sqm-titled-section", { "label-margin": "large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "x-large"),
-    h("sqm-titled-section", { "label-margin": "x-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xx-large"),
-    h("sqm-titled-section", { "label-margin": "xx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxx-large"),
-    h("sqm-titled-section", { "label-margin": "xxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
-    h("br", null),
-    h("hr", null),
-    h("br", null),
-    h("h3", null, "xxxx-large"),
-    h("sqm-titled-section", { "label-margin": "xxxx-large" },
-      h("sqm-text", { slot: "label" },
-        h("h3", null, "Earn more rewards")),
-      h("sqm-text", { slot: "content" },
-        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
-};
+import { h } from "@stencil/core";
+import scenario from "./sqm-titled-section.feature";
+export default {
+  title: "Components/Titled Section",
+  parameters: {
+    scenario,
+  },
+};
+export const AlignLeft = () => {
+  return (h("sqm-titled-section", { "text-align": "left" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const AlignCenter = () => {
+  return (h("sqm-titled-section", { "text-align": "center" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const AlignRight = () => {
+  return (h("sqm-titled-section", { "text-align": "right" },
+    h("sqm-text", { slot: "label" },
+      h("h3", null, "Earn more rewards"),
+      h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))));
+};
+export const Padding = () => {
+  return (h("div", null,
+    h("h3", null, "None"),
+    h("sqm-titled-section", { padding: "none" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-small"),
+    h("sqm-titled-section", { padding: "xxx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-small"),
+    h("sqm-titled-section", { padding: "xx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-small"),
+    h("sqm-titled-section", { padding: "x-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "small"),
+    h("sqm-titled-section", { padding: "small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "medium"),
+    h("sqm-titled-section", { padding: "medium" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "large"),
+    h("sqm-titled-section", { padding: "large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-large"),
+    h("sqm-titled-section", { padding: "x-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-large"),
+    h("sqm-titled-section", { padding: "xx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-large"),
+    h("sqm-titled-section", { padding: "xxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxxx-large"),
+    h("sqm-titled-section", { padding: "xxxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};
+export const LabelMargin = () => {
+  return (h("div", null,
+    h("h3", null, "None"),
+    h("sqm-titled-section", { "label-margin": "none" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-small"),
+    h("sqm-titled-section", { "label-margin": "xxx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-small"),
+    h("sqm-titled-section", { "label-margin": "xx-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-small"),
+    h("sqm-titled-section", { "label-margin": "x-small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "small"),
+    h("sqm-titled-section", { "label-margin": "small" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "medium"),
+    h("sqm-titled-section", { "label-margin": "medium" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "large"),
+    h("sqm-titled-section", { "label-margin": "large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "x-large"),
+    h("sqm-titled-section", { "label-margin": "x-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xx-large"),
+    h("sqm-titled-section", { "label-margin": "xx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxx-large"),
+    h("sqm-titled-section", { "label-margin": "xxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America"))),
+    h("br", null),
+    h("hr", null),
+    h("br", null),
+    h("h3", null, "xxxx-large"),
+    h("sqm-titled-section", { "label-margin": "xxxx-large" },
+      h("sqm-text", { slot: "label" },
+        h("h3", null, "Earn more rewards")),
+      h("sqm-text", { slot: "content" },
+        h("p", null, "Get points while using Klip. Use those points to redeem rewards like one free month of Klip Enterprise or two plane tickets to anywhere in North America")))));
+};

package/dist/collection/components/sqm-titled-section/sqm-portal-section-view.js CHANGED Viewed

@@ -1,22 +1,22 @@
-import { h } from "@stencil/core";
-import { createStyleSheet } from "../../styling/JSS";
-export function PortalSectionView(props) {
-  // Due to sole usage of props, not feasiable to move out of render function
-  const style = {
-    LabelContainer: {
-      "margin-bottom": props.labelMargin === "none"
-        ? props.labelMargin
-        : `var(--sl-spacing-${props.labelMargin})`,
-    },
-    SectionContainer: {
-      textAlign: props.textAlign || "left",
-      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
-    },
-  };
-  const sheet = createStyleSheet(style);
-  const styleString = sheet.toString();
-  return (h("div", { class: sheet.classes.SectionContainer },
-    h("style", { type: "text/css" }, styleString),
-    h("div", { class: sheet.classes.LabelContainer }, props.label),
-    props.content));
-}
+import { h } from "@stencil/core";
+import { createStyleSheet } from "../../styling/JSS";
+export function PortalSectionView(props) {
+  // Due to sole usage of props, not feasiable to move out of render function
+  const style = {
+    LabelContainer: {
+      "margin-bottom": props.labelMargin === "none"
+        ? props.labelMargin
+        : `var(--sl-spacing-${props.labelMargin})`,
+    },
+    SectionContainer: {
+      textAlign: props.textAlign || "left",
+      padding: props.padding === "none" ? "0" : `var(--sl-spacing-${props.padding})`,
+    },
+  };
+  const sheet = createStyleSheet(style);
+  const styleString = sheet.toString();
+  return (h("div", { class: sheet.classes.SectionContainer },
+    h("style", { type: "text/css" }, styleString),
+    h("div", { class: sheet.classes.LabelContainer }, props.label),
+    props.content));
+}