@rededor/cura 0.3.4-alpha.0 → 0.3.4-alpha.1

package/dist/esm/cura-display_4.entry.js

@@ -0,0 +1,250 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-7e8c969d.js';
+
+const curaDisplayCss = ".cura-display{display:block;font-size:var(--font-size);text-transform:uppercase}.cura-display h1,.cura-display h2,.cura-display h3,.cura-display h4,.cura-display h5,.cura-display h6{font-family:var(--font-family);font-size:4.285em;font-weight:var(--font-weight-black);color:var(--color-body);line-height:120%;letter-spacing:-4%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}.cura-display h1.large,.cura-display h2.large,.cura-display h3.large,.cura-display h4.large,.cura-display h5.large,.cura-display h6.large{font-size:6.21em}.cura-display h1.small,.cura-display h2.small,.cura-display h3.small,.cura-display h4.small,.cura-display h5.small,.cura-display h6.small{font-size:3em;font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){.cura-display h1,.cura-display h2,.cura-display h3,.cura-display h4,.cura-display h5,.cura-display h6{font-size:4.92em}.cura-display h1.large,.cura-display h2.large,.cura-display h3.large,.cura-display h4.large,.cura-display h5.large,.cura-display h6.large{font-size:7.07em}.cura-display h1.small,.cura-display h2.small,.cura-display h3.small,.cura-display h4.small,.cura-display h5.small,.cura-display h6.small{font-size:3.428em}}@media (min-width: 1366px){.cura-display h1,.cura-display h2,.cura-display h3,.cura-display h4,.cura-display h5,.cura-display h6{font-size:6.14em;line-height:125%}.cura-display h1.large,.cura-display h2.large,.cura-display h3.large,.cura-display h4.large,.cura-display h5.large,.cura-display h6.large{font-size:8.857em;letter-spacing:-6%}.cura-display h1.small,.cura-display h2.small,.cura-display h3.small,.cura-display h4.small,.cura-display h5.small,.cura-display h6.small{font-size:4.285em;letter-spacing:-2%}}.cura-display b,.cura-display strong{font-weight:var(--font-weight-bold)}.cura-display a{font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}.cura-display abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+
+const CuraDisplay = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+    * Heading style size.
+    * Values: small | regular(default) | large.
+    */
+    this.size = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '0.5em');
+  }
+  setColors() {
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (h(Host, { class: "cura-display" }, this.getHeadingTag()));
+  }
+  get host() { return getElement(this); }
+};
+CuraDisplay.style = curaDisplayCss;
+
+const curaHeadingCss = ".cura-heading{display:block;font-size:var(--font-size)}.cura-heading h1,.cura-heading h2,.cura-heading h3,.cura-heading h4,.cura-heading h5,.cura-heading h6{font-family:var(--font-family);font-size:1.71em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:130%;letter-spacing:0%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}.cura-heading h1.bold-weight,.cura-heading h2.bold-weight,.cura-heading h3.bold-weight,.cura-heading h4.bold-weight,.cura-heading h5.bold-weight,.cura-heading h6.bold-weight{font-weight:var(--font-weight-medium)}.cura-heading h1.large,.cura-heading h2.large,.cura-heading h3.large,.cura-heading h4.large,.cura-heading h5.large,.cura-heading h6.large{font-size:2.07em;letter-spacing:-2%}.cura-heading h1.small,.cura-heading h2.small,.cura-heading h3.small,.cura-heading h4.small,.cura-heading h5.small,.cura-heading h6.small{font-size:1.214em;line-height:150%;letter-spacing:0%}.cura-heading h1.small.bold-weight,.cura-heading h2.small.bold-weight,.cura-heading h3.small.bold-weight,.cura-heading h4.small.bold-weight,.cura-heading h5.small.bold-weight,.cura-heading h6.small.bold-weight{font-weight:var(--font-weight-bold)}@media (min-width: 768px) and (max-width: 1365px){.cura-heading h1,.cura-heading h2,.cura-heading h3,.cura-heading h4,.cura-heading h5,.cura-heading h6{font-size:2em}.cura-heading h1.large,.cura-heading h2.large,.cura-heading h3.large,.cura-heading h4.large,.cura-heading h5.large,.cura-heading h6.large{font-size:2.357em}.cura-heading h1.small,.cura-heading h2.small,.cura-heading h3.small,.cura-heading h4.small,.cura-heading h5.small,.cura-heading h6.small{font-size:1.357em}}@media (min-width: 1366px){.cura-heading h1,.cura-heading h2,.cura-heading h3,.cura-heading h4,.cura-heading h5,.cura-heading h6{font-size:2.5em;line-height:135%;letter-spacing:-2%}.cura-heading h1.large,.cura-heading h2.large,.cura-heading h3.large,.cura-heading h4.large,.cura-heading h5.large,.cura-heading h6.large{font-size:2.92em}.cura-heading h1.small,.cura-heading h2.small,.cura-heading h3.small,.cura-heading h4.small,.cura-heading h5.small,.cura-heading h6.small{font-size:1.71em;line-height:160%;letter-spacing:0%}}.cura-heading b,.cura-heading strong{font-weight:var(--font-weight-bold)}.cura-heading a{font-weight:var(--font-weight-bold);color:var(--color-link);text-decoration:none;text-underline-offset:10%;cursor:pointer}.cura-heading abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+
+const CuraHeading = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Heading level for semantics.
+     * Values: 1(default)-6.
+     */
+    this.level = 1;
+    /**
+     * Heading style size.
+     * Values: small | regular(default) | large.
+     */
+    this.size = 'regular';
+    /**
+     * Heading font weight.
+     * Values: regular(default) | bold.
+     */
+    this.weight = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.size.toLowerCase()] = true;
+    classes[`${this.weight.toLowerCase()}-weight`] = true;
+    return classes;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('heading'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold,
+      '--font-weight-black': this.weights.black
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '0.5em');
+  }
+  setColors() {
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '2': h("h2", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '3': h("h3", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '4': h("h4", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '5': h("h5", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      '6': h("h6", { style: this.styles, class: this.getClasses() }, h("slot", null)),
+      'default': h("h1", { style: this.styles, class: this.getClasses() }, h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (h(Host, { class: "cura-heading" }, this.getHeadingTag()));
+  }
+  get host() { return getElement(this); }
+};
+CuraHeading.style = curaHeadingCss;
+
+const curaPageTemplateCss = ".cura-template{display:block}.cura-template .grid-template{display:grid;grid-template-rows:auto;grid-template-columns:auto;grid-template-areas:\"sub-header\" \"header\" \"pre-content\" \"content-container\" \"post-body\" \"footer\" \"sub-footer\"}.cura-template .grid-template #sub-header{grid-area:sub-header}.cura-template .grid-template #header{grid-area:header}.cura-template .grid-template #pre-content{grid-area:pre-content}.cura-template .grid-template #content-container{grid-area:content-container}.cura-template .grid-template #post-body{grid-area:post-body}.cura-template .grid-template #footer{grid-area:footer}.cura-template .grid-template #sub-footer{grid-area:sub-footer}@media (max-width: 360px){.cura-template .grid-template{padding:0px}}@media (min-width: 768px) and (max-width: 1365px){.cura-template .grid-template{padding:0px}}@media (min-width: 1366px) and (max-width: 1919px){.cura-template .grid-template{padding:0px}.cura-template .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 5px)}.cura-template .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 5px)}.cura-template .grid-template #content-container{display:-ms-flexbox;display:flex}.cura-template .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}.cura-template .grid-template #content-container #sidebar-left,.cura-template .grid-template #content-container #sidebar-right{max-width:20%}}@media (min-width: 1920px){.cura-template .grid-template{padding:0px}.cura-template .grid-template #content-container #sidebar-left ::slotted(div[slot=sidebar-left]){margin-right:calc(var(--spacing) * 7px)}.cura-template .grid-template #content-container #sidebar-right ::slotted(div[slot=sidebar-right]){margin-left:calc(var(--spacing) * 7px)}.cura-template .grid-template #content-container{display:-ms-flexbox;display:flex}.cura-template .grid-template #content-container #content{-ms-flex-positive:1;flex-grow:1}.cura-template .grid-template #content-container #sidebar-left,.cura-template .grid-template #content-container #sidebar-right{max-width:20%}.cura-template .grid-template #content-container.centered{max-width:1920px;justify-self:center}}";
+
+const CuraPageTemplate = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.contentwidth = 'default';
+  }
+  connectedCallback() {
+    this.styles = {
+      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
+    };
+  }
+  getClasses() {
+    const classes = {};
+    classes[this.contentwidth.toLowerCase()] = true;
+    return classes;
+  }
+  render() {
+    return (h(Host, { class: "cura-template" }, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
+  }
+  get host() { return getElement(this); }
+};
+CuraPageTemplate.style = curaPageTemplateCss;
+
+const curaParagraphCss = ".cura-paragraph{display:block;font-size:var(--font-size)}.cura-paragraph p{font-family:var(--font-family);font-size:var(--font-size);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:140%;letter-spacing:2%;-webkit-margin-before:var(--block-margin);margin-block-start:var(--block-margin);-webkit-margin-after:var(--block-margin);margin-block-end:var(--block-margin)}.cura-paragraph p.large{font-size:1.21em;line-height:150%;letter-spacing:0%}.cura-paragraph p.small{font-size:0.85em;line-height:135%;letter-spacing:4%}.cura-paragraph p.caption{font-size:0.71em;line-height:135%;letter-spacing:6%}@media (min-width: 768px) and (max-width: 1365px){.cura-paragraph p{font-size:1.14em;line-height:145%}.cura-paragraph p.large{font-size:1.35em;line-height:150%}.cura-paragraph p.small{font-size:1em;line-height:135%}.cura-paragraph p.caption{font-size:0.85em;line-height:135%;letter-spacing:6%}}@media (min-width: 1366px){.cura-paragraph p{font-size:1.42em;line-height:150%;letter-spacing:0%}.cura-paragraph p.large{font-size:1.71em;line-height:160%}.cura-paragraph p.small{font-size:1.21em;line-height:145%;letter-spacing:0%}.cura-paragraph p.caption{font-size:1em;line-height:145%;letter-spacing:2%}}.cura-paragraph b,.cura-paragraph strong{font-weight:var(--font-weight-bold)}.cura-paragraph a{font-weight:var(--font-weight-medium);color:var(--color-link);text-underline-offset:10%}.cura-paragraph abbr{color:var(--color-link);-webkit-text-decoration:underline dashed 1px var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
+
+const CuraParagraph = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /**
+     * Set size of body text.
+     * Values: regular (default) | large | small | caption.
+     */
+    this.size = 'regular';
+    /**
+    * Apply light color to text in dark background.
+    * Values: boolean.
+    */
+    this.inverted = false;
+    /**
+    * Apply base system color to elements like <a> and <abbr>.
+    * Values: String primary(default) | secondary | accent | neutral | success | error | warning | info.
+    */
+    this.spotColor = 'primary';
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.setFontProperties();
+    this.setColors();
+  }
+  setsizeClass() {
+    const sizeclass = {};
+    sizeclass[this.size.toLowerCase()] = true;
+    return sizeclass;
+  }
+  setFontProperties() {
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('body'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-regular': this.weights.regular,
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold
+    };
+    this.setHostProperty('--font-size', window.CuraAPI.theme.fonts.getSize());
+    this.setHostProperty('--block-margin', '1.25em');
+  }
+  setColors() {
+    const fontColor = this.inverted
+      ? window.CuraAPI.theme.colors.getColor('neutral-100')
+      : window.CuraAPI.theme.fonts.getColor();
+    this.styles['--color-body'] = fontColor || window.CuraAPI.theme.colors.getColor('neutral-darker');
+    this.styles['--color-link'] = this.inverted
+      ? window.CuraAPI.theme.colors.getColor(`${this.spotColor}-100`)
+      : window.CuraAPI.theme.colors.getColor(`${this.spotColor}-700`);
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  render() {
+    return (h(Host, { class: "cura-paragraph" }, h("p", { style: this.styles, class: this.setsizeClass() }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+};
+CuraParagraph.style = curaParagraphCss;
+
+export { CuraDisplay as cura_display, CuraHeading as cura_heading, CuraPageTemplate as cura_page_template, CuraParagraph as cura_paragraph };

package/dist/esm/cura-icon.entry.js

@@ -0,0 +1,55 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-7e8c969d.js';
+
+const curaIconCss = ".cura-icon{width:var(--size);height:var(--size)}.cura-icon svg{display:inline-block;stroke:var(--color);width:var(--size);height:var(--size);stroke-width:var(--stroke);fill:none}";
+
+const CuraIcon = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.name = '';
+    this.color = 'neutral-base';
+    this.iconset = 'default';
+    this.disabled = false;
+    this.sizes = {
+      "128": { size: 128, stroke: 5.25 },
+      "72": { size: 72, stroke: 3.5 },
+      "64": { size: 64, stroke: 3.25 },
+      "48": { size: 48, stroke: 2.75 },
+      "40": { size: 40, stroke: 2.5 },
+      "32": { size: 32, stroke: 2.25 },
+      "24": { size: 24, stroke: 2 },
+      "20": { size: 20, stroke: 1.75 },
+      "16": { size: 16, stroke: 1.5 },
+      "default": { size: 24, stroke: 2 }
+    };
+  }
+  sizeHandler(size) {
+    const scaledStroke = (iconSize) => {
+      return `${this.sizes[iconSize].stroke * (this.sizes.default.size / this.sizes[iconSize].size)}px`;
+    };
+    this.setHostProperty('--size', this.sizes[`${size}`] ? `${this.sizes[size].size}px` : `${this.sizes.default.size}px`);
+    this.setHostProperty('--stroke', this.sizes[`${size}`] ? scaledStroke(size) : scaledStroke("default"));
+  }
+  colorHandler() {
+    this.setHostProperty('--color', window.CuraAPI.theme.colors.getColor(this.disabled ? 'neutral-light' : this.color));
+  }
+  connectedCallback() {
+    this.assetsPath = window.CuraAPI.localAssetsPath;
+    this.sizeHandler(this.size);
+    this.colorHandler();
+  }
+  setHostProperty(prop, value) {
+    this.host.style.setProperty(prop, value);
+  }
+  render() {
+    return (h(Host, { class: 'cura-icon' }, h("svg", { version: "1.1", viewBox: "0 0 24 24", preserveAspectRatio: "xMidYMid meet", xmlns: "http://www.w3.org/2000/svg" }, h("use", { xlinkHref: `${this.assetsPath}/icons/iconset-${this.iconset}.svg#${this.name}` }))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "size": ["sizeHandler"],
+    "color": ["colorHandler"],
+    "disabled": ["colorHandler"]
+  }; }
+};
+CuraIcon.style = curaIconCss;
+
+export { CuraIcon as cura_icon };

package/dist/esm/cura-icons-view.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, H as Host } from './index-e11775ce.js';
+import { r as registerInstance, h, H as Host } from './index-7e8c969d.js';
 
 const iconsetdefaulticons = ["360", "accessibility", "alertCircle", "alertTriangle", "arrowDown", "arrowDownCircle", "arrowLeft", "arrowLeftCircle", "arrowRight", "arrowRightCircle", "arrowUp", "arrowUpCircle", "attach", "avatarF", "avatarM", "biometry", "bloodGroup", "calendar", "cam", "camOff", "central", "chatCircle", "check", "checkBadge", "checkCircle", "checkDouble", "clock", "close", "closeCircle", "collapse", "config", "delete", "desktop", "deslike", "download", "duplicate", "edit", "exam", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "google", "hate", "healthPlan", "height", "height2", "home", "horizontalList", "imageUp", "info2", "infoCircle", "instagram", "key", "language", "language2", "languageEN", "languagePT", "lattes", "like", "likeHand", "link", "linkExternal", "linkedin", "list", "login", "logout", "love", "mail", "mail2", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "neutral", "news", "notification", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profile2", "pulldownG", "pulldownP", "pullupG", "pullupP", "questionCircle", "questionSquare", "range", "reload", "schedule", "search", "secure", "share", "share2", "sound", "soundOff", "subItem", "target", "team", "twitter", "unLink", "unSecure", "unlikeHand", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "youtube", "zoomIn", "zoomOut"];
 
@@ -9,10 +9,10 @@ const CuraIconsView = class {
     registerInstance(this, hostRef);
     this.sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];
     this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
+    this.selected = '360';
     this.setSelected = (icon) => {
       this.selected = icon;
     };
-    this.selected = '360';
   }
   render() {
     return (h(Host, null, h("div", { class: "iconDetail" }, h("h4", null, this.selected), h("div", { class: "iconSizes" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size)))), h("div", { class: "iconSizes" }, this.colors.map(color => h("div", { class: "size" }, h("cura-icon", { name: this.selected, color: color }), h("span", null, color))), h("div", { class: "size" }, h("cura-icon", { name: this.selected, disabled: true }), h("span", null, "Disabled")))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: "icon", onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon }), h("span", null, icon))))));
@@ -21,5 +21,3 @@ const CuraIconsView = class {
 CuraIconsView.style = curaIconsViewCss;
 
 export { CuraIconsView as cura_icons_view };
-
-//# sourceMappingURL=cura-icons-view.entry.js.map

package/dist/esm/cura.js

@@ -1,31 +1,19 @@
-import { p as plt, w as win, a as promiseResolve, b as bootstrapLazy } from './index-e11775ce.js';
-export { s as setNonce } from './index-e11775ce.js';
-import { g as globalScripts } from './app-globals-8ed931e6.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-7e8c969d.js';
+import { g as globalScripts } from './app-globals-cb45bff3.js';
 
 /*
- Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.18.1 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
-    // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-    {
-        // shim css vars
-        // TODO(STENCIL-659): Remove code implementing the CSS variable shim
-        plt.$cssShim$ = win.__cssshim;
-    }
     const importMeta = import.meta.url;
     const opts = {};
-    // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
-        // TODO(STENCIL-661): Remove code related to the dynamic import shim
-        // TODO(STENCIL-663): Remove code related to deprecated `safari10` field.
     }
     return promiseResolve(opts);
 };
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["cura-button_6",[[1,"cura-button",{"type":[513],"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"href":[513],"target":[1],"color":[1],"styles":[32]}],[1,"cura-display",{"level":[514],"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[1,"cura-page-template",{"contentwidth":[513]}],[1,"cura-paragraph",{"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-icons-view",[[1,"cura-icons-view",{"selected":[32]}]]]], options);
+  return bootstrapLazy([["cura-icon",[[0,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-icons-view",[[0,"cura-icons-view",{"selected":[32]}]]],["cura-display_4",[[4,"cura-display",{"level":[514],"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[4,"cura-heading",{"level":[514],"size":[513],"weight":[513],"inverted":[516],"spotColor":[513,"spot-color"]}],[4,"cura-page-template",{"contentwidth":[513]}],[4,"cura-paragraph",{"size":[513],"inverted":[516],"spotColor":[513,"spot-color"]}]]]], options);
 });
-
-//# sourceMappingURL=cura.js.map