@rededor/cura 0.5.1 → 0.5.2

package/dist/esm/cura-button-outline.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, h, H as Host } from './index-d99da69e.js';
+
+const curaButtonOutlineCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border:none;-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-base);box-shadow:inset 0px 0px 0px 2px var(--color-base);padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-dark);box-shadow:inset 0px 0px 0px 2px var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-base);box-shadow:inset 0px 0px 0px 2px var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6;-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted,:host a.inverted{-webkit-box-shadow:inset 0px 0px 0px 2px var(--neutral-white);box-shadow:inset 0px 0px 0px 2px var(--neutral-white)}:host button.inverted:not(.disabled):not(.isLoading):hover,:host a.inverted:not(.disabled):not(.isLoading):hover{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-lighter);box-shadow:inset 0px 0px 0px 2px var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover .label,:host a.inverted:not(.disabled):not(.isLoading):hover .label{color:var(--color-lighter)}:host button.inverted:not(.disabled):not(.isLoading):hover cura-icon,:host a.inverted:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.disabled):not(.isLoading):active,:host a.inverted:not(.disabled):not(.isLoading):active{-webkit-box-shadow:inset 0px 0px 0px 2px var(--color-light);box-shadow:inset 0px 0px 0px 2px var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active .label,:host a.inverted:not(.disabled):not(.isLoading):active .label{color:var(--color-light)}:host button.inverted:not(.disabled):not(.isLoading):active cura-icon,:host a.inverted:not(.disabled):not(.isLoading):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
+
+const CuraButtonOutline = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'large';
+    this.disabled = false;
+    this.isLoading = false;
+    this.iconName = undefined;
+    this.iconset = 'default';
+    this.iconPosition = 'left';
+    this.iconOnly = false;
+    this.href = undefined;
+    this.target = "_self";
+    this.color = 'accent';
+    this.fontColor = 'dark';
+    this.textAlign = 'left';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+    this.styles['--font-weight-medium'] = this.weights.medium;
+    this.styles['--text-align'] = this.textAlign;
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[`${this.size.toLowerCase()}`] = true;
+    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes[`icon-only`] = this.iconOnly;
+    classes['inverted'] = this.fontColor === 'light';
+    classes['disabled'] = this.disabled;
+    classes['isLoading'] = this.isLoading;
+    return classes;
+  }
+  setColors() {
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
+  }
+  getIcon() {
+    if (!this.iconName)
+      return '';
+    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+    const color = this.getSymbolColor();
+    return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
+  }
+  getSymbolColor() {
+    return this.disabled
+      ? 'neutral-dark'
+      : this.fontColor === 'light'
+        ? 'neutral-white'
+        : `${this.color}-base`;
+  }
+  handleClick(e) {
+    if (this.disabled || this.isLoading)
+      e.preventDefault();
+  }
+  render() {
+    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
+  }
+  static get watchers() { return {
+    "color": ["handleChangeColor"]
+  }; }
+};
+CuraButtonOutline.style = curaButtonOutlineCss;
+
+export { CuraButtonOutline as cura_button_outline };
+
+//# sourceMappingURL=cura-button-outline.entry.js.map

package/dist/esm/cura-button-outline.entry.js.map

@@ -0,0 +1 @@
+{"file":"cura-button-outline.entry.js","mappings":"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","names":[],"sources":["./src/components/buttons/cura-button-outline/cura-button-outline.scss?tag=cura-button-outline&encapsulation=shadow","./src/components/buttons/cura-button-outline/cura-button-outline.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      border: none;\n      box-shadow: inset 0px 0px 0px 2px var(--color-base);\n\n      &:not(.disabled):not(.isLoading):hover {\n        box-shadow: inset 0px 0px 0px 2px var(--color-light);\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active { \n        box-shadow: inset 0px 0px 0px 2px var(--color-dark);\n        .label { color: var(--color-dark); }\n        cura-icon { --color: var(--color-dark) !important; }\n      }\n    };\n\n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label() {\n      color: var(--color-base);\n      &.inverted { color: var(--neutral-white); }\n    }\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-base);\n      .label, .label.inverted { color: var(--neutral-dark); }\n      &.inverted {\n        opacity: 0.6;\n        box-shadow: inset 0px 0px 0px 2px var(--neutral-white);\n        .label, .label.inverted { color: var(--neutral-white); }\n        cura-icon { --color: var(--neutral-white) !important; }\n        cura-loader-circle { --color: var(--neutral-white) !important; }\n      }\n    };\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    // Light version, inverted.\n    &.inverted {\n      box-shadow: inset 0px 0px 0px 2px var(--neutral-white);\n      &:not(.disabled):not(.isLoading):hover { \n        box-shadow: inset 0px 0px 0px 2px var(--color-lighter);\n        .label { color: var(--color-lighter); }\n        cura-icon { --color: var(--color-lighter) !important; }\n      }\n      &:not(.disabled):not(.isLoading):active {\n        box-shadow: inset 0px 0px 0px 2px var(--color-light);\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n    }\n\n    // Loading State\n    @include button-loading();\n\n  }\n\n}\n","import { Component, Host, h, Prop, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-outline',\n  styleUrl: 'cura-button-outline.scss',\n  shadow: true,\n})\nexport class CuraButtonOutline {\n\n  /**\n  * Button size: small | medium | large (default)\n  */\n  @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({reflect: true}) disabled = false;\n  /**\n  * Loading state. Boolean.\n  */\n  @Prop({reflect: true}) isLoading = false;\n\n  /**\n  * Name of the icon to be used from iconset.\n  */\n  @Prop({reflect: true}) iconName: string;\n  /**\n  * Custom iconset if needed.\n  */\n  @Prop({reflect: true}) iconset = 'default';\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n  /**\n  * Set button to FAB/icon only.\n  */\n  @Prop({reflect: true}) iconOnly = false;\n\n  /**\n  * Property href switch button to link.\n  */\n  @Prop({reflect: true}) href: string;\n  /**\n  * Set target if link.\n  */\n  @Prop({reflect: true}) target = \"_self\";\n\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  @Watch('color')\n  handleChangeColor() {\n    this.setColors();\n  }\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n  /**\n  * Set text aligment for the button label.\n  * Vales: left (default) | center | right.\n  */\n  @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n  @State() styles = {};\n\n  weights;\n\n  connectedCallback() {\n    this.weights = window.CuraAPI.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--text-align'] = this.textAlign;\n    this.setColors();\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes[`icon-only`] = this.iconOnly;\n    classes['inverted'] = this.fontColor === 'light';\n    classes['disabled'] = this.disabled;\n    classes['isLoading'] = this.isLoading;\n    return classes;\n  }\n\n  setColors() {\n    this.styles = {\n      ...this.styles,\n      '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n      '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n      '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n      '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n    };\n  }\n\n  getIcon() {\n    if (!this.iconName) return '';\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const color = this.getSymbolColor();\n    return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n  }\n\n  getSymbolColor() {\n    return this.disabled\n      ? 'neutral-dark'\n      : this.fontColor === 'light'\n        ? 'neutral-white'\n        : `${this.color}-base`;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled || this.isLoading) e.preventDefault();\n  }\n\n  render() {\n    return (\n      <Host>\n       { this.href ? (\n        <a href={this.disabled ? '' : this.href}\n          target={this.target}\n          class={this.getClasses()}\n          style={this.styles}\n          onClick={(e) => this.handleClick(e)}>\n          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n        </a>\n      ) : (\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled || null}\n          onClick={(e) => this.handleClick(e)}>\n          <span class=\"button-container\">\n            { this.getIcon() }\n            <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n          </span>\n          <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n        </button>\n      )}\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/cura-button-transparent.entry.js

@@ -0,0 +1,79 @@
+import { r as registerInstance, h, H as Host } from './index-d99da69e.js';
+
+const curaButtonTransparentCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle}:host button,:host a{outline:none;-webkit-box-shadow:none;box-shadow:none;-webkit-box-sizing:border-box;box-sizing:border-box;display:-ms-flexbox;display:flex;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;-webkit-transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear, -webkit-box-shadow 0.07s linear;border-radius:var(--border-radius);background-color:transparent;border-width:0px;border-color:transparent;padding:calc(var(--base-spacing) * 3.5px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 13px)}:host button:not(.disabled):not(.isLoading):hover .label,:host a:not(.disabled):not(.isLoading):hover .label{color:var(--color-light)}:host button:not(.disabled):not(.isLoading):hover cura-icon,:host a:not(.disabled):not(.isLoading):hover cura-icon{--color:var(--color-light) !important}:host button:not(.disabled):not(.inverted):not(.isLoading):active .label,:host a:not(.disabled):not(.inverted):not(.isLoading):active .label{color:var(--color-dark)}:host button:not(.disabled):not(.inverted):not(.isLoading):active cura-icon,:host a:not(.disabled):not(.inverted):not(.isLoading):active cura-icon{--color:var(--color-dark) !important}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 2.75px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 11px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 1.5px) calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;opacity:1;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}:host button.icon-right .button-container,:host a.icon-right .button-container{-ms-flex-direction:row-reverse;flex-direction:row-reverse}:host button .label,:host a .label{-ms-flex:1;flex:1;font-family:var(--font-family);font-weight:var(--font-weight-medium);font-size:1.43em;line-height:1.2em;text-align:var(--text-align, \"left\");color:var(--color-base)}:host button .label.inverted,:host a .label.inverted{color:var(--neutral-white)}:host button.medium .label,:host a.medium .label{font-size:1.14em}:host button.small .label,:host a.small .label{font-size:1em}:host button.icon-left cura-icon,:host a.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 3px)}:host button.icon-right cura-icon,:host a.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 3px)}:host button.medium.icon-left cura-icon,:host a.medium.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.7px)}:host button.medium.icon-right cura-icon,:host a.medium.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.7px)}:host button.small.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2.5px)}:host button.small.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2.5px)}:host button.disabled,:host a.disabled{cursor:not-allowed;border-color:var(--neutral-base)}:host button.disabled .label,:host button.disabled .label.inverted,:host a.disabled .label,:host a.disabled .label.inverted{color:var(--neutral-dark)}:host button.disabled.inverted,:host a.disabled.inverted{opacity:0.6}:host button.disabled.inverted .label,:host button.disabled.inverted .label.inverted,:host a.disabled.inverted .label,:host a.disabled.inverted .label.inverted{color:var(--neutral-white)}:host button.disabled.inverted cura-icon,:host a.disabled.inverted cura-icon{--color:var(--neutral-white) !important}:host button.disabled.inverted cura-loader-circle,:host a.disabled.inverted cura-loader-circle{--color:var(--neutral-white) !important}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only .label,:host a.icon-only .label{display:none}:host button.icon-only cura-icon,:host a.icon-only cura-icon{margin-left:0 !important;margin-right:0 !important}:host button.icon-only.medium,:host a.icon-only.medium{padding:calc(var(--base-spacing) * 2.75px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 1.5px)}:host button.inverted:not(.isLoading):not(.disabled):hover .label,:host a.inverted:not(.isLoading):not(.disabled):hover .label{color:var(--color-lighter)}:host button.inverted:not(.isLoading):not(.disabled):hover cura-icon,:host a.inverted:not(.isLoading):not(.disabled):hover cura-icon{--color:var(--color-lighter) !important}:host button.inverted:not(.isLoading):not(.disabled):active .label,:host a.inverted:not(.isLoading):not(.disabled):active .label{color:var(--color-light)}:host button.inverted:not(.isLoading):not(.disabled):active cura-icon,:host a.inverted:not(.isLoading):not(.disabled):active cura-icon{--color:var(--color-light) !important}:host button cura-loader-circle,:host a cura-loader-circle{position:absolute;display:none}:host button.isLoading,:host a.isLoading{cursor:wait}:host button.isLoading .button-container,:host a.isLoading .button-container{opacity:0.3}:host button.isLoading.icon-only .button-container,:host a.isLoading.icon-only .button-container{opacity:0}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
+
+const CuraButtonTransparent = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.size = 'large';
+    this.disabled = false;
+    this.isLoading = false;
+    this.iconName = undefined;
+    this.iconset = 'default';
+    this.iconPosition = 'left';
+    this.iconOnly = false;
+    this.href = undefined;
+    this.target = "_self";
+    this.color = 'accent';
+    this.fontColor = 'dark';
+    this.textAlign = 'left';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.weights = window.CuraAPI.theme.fonts.getWeights();
+    this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();
+    this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);
+    this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);
+    this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);
+    this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();
+    this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();
+    this.styles['--font-weight-medium'] = this.weights.medium;
+    this.styles['--text-align'] = this.textAlign;
+    this.setColors();
+  }
+  getClasses() {
+    const classes = {};
+    classes[`${this.size.toLowerCase()}`] = true;
+    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
+    classes[`icon-only`] = this.iconOnly;
+    classes['inverted'] = this.fontColor === 'light';
+    classes['disabled'] = this.disabled;
+    classes['isLoading'] = this.isLoading;
+    return classes;
+  }
+  setColors() {
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`), '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`), '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`), '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`) });
+  }
+  getIcon() {
+    if (!this.iconName)
+      return '';
+    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+    const color = this.getSymbolColor();
+    return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: color });
+  }
+  getSymbolColor() {
+    return this.disabled
+      ? 'neutral-dark'
+      : this.fontColor === 'light'
+        ? 'neutral-white'
+        : `${this.color}-base`;
+  }
+  handleClick(e) {
+    if (this.disabled || this.isLoading)
+      e.preventDefault();
+  }
+  render() {
+    return (h(Host, null, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e) }, h("span", { class: "button-container" }, this.getIcon(), h("span", { class: { label: true, inverted: this.fontColor === 'light' } }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
+  }
+  static get watchers() { return {
+    "color": ["handleChangeColor"]
+  }; }
+};
+CuraButtonTransparent.style = curaButtonTransparentCss;
+
+export { CuraButtonTransparent as cura_button_transparent };
+
+//# sourceMappingURL=cura-button-transparent.entry.js.map

package/dist/esm/cura-button-transparent.entry.js.map

@@ -0,0 +1 @@
+{"file":"cura-button-transparent.entry.js","mappings":"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","names":[],"sources":["./src/components/buttons/cura-button-transparent/cura-button-transparent.scss?tag=cura-button-transparent&encapsulation=shadow","./src/components/buttons/cura-button-transparent/cura-button-transparent.tsx"],"sourcesContent":["@import \"../../../scss/mixins/buttons.scss\";\n\n:host {\n  @include button-host();\n\n  button, a {\n    @include button-element() {\n      background-color: transparent;\n      border-width: 0px;\n      border-color: transparent;\n\n      &:not(.disabled):not(.isLoading):hover {\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n\n      &:not(.disabled):not(.inverted):not(.isLoading):active { \n        .label { color: var(--color-dark); }\n        cura-icon { --color: var(--color-dark) !important; }\n      }\n    }\n    \n    @include button-sizes();\n\n    // Children Elements\n    @include button-container();\n    @include button-label() {\n      color: var(--color-base);\n      &.inverted { color: var(--neutral-white); }\n    }\n    @include button-icon();\n\n    // Disabled state\n    @include button-disabled() {\n      border-color: var(--neutral-base);\n      .label, .label.inverted { color: var(--neutral-dark); }\n      &.inverted {\n        opacity: 0.6;\n        .label, .label.inverted { color: var(--neutral-white); }\n        cura-icon { --color: var(--neutral-white) !important; }\n        cura-loader-circle { --color: var(--neutral-white) !important; }\n      }\n    }\n\n    // FAB / Icon-only\n    @include button-icon-only-behavior();\n\n    &.inverted {\n      &:not(.isLoading):not(.disabled):hover { \n        .label { color: var(--color-lighter); }\n        cura-icon { --color: var(--color-lighter) !important; }\n      }\n      &:not(.isLoading):not(.disabled):active {\n        .label { color: var(--color-light); }\n        cura-icon { --color: var(--color-light) !important; }\n      }\n    }\n\n    // Loading State\n    @include button-loading();\n\n  }\n}\n","import { Component, Host, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-transparent',\n  styleUrl: 'cura-button-transparent.scss',\n  shadow: true,\n})\nexport class CuraButtonTransparent {\n\n   /**\n    * Button size: small | medium | large (default)\n    */\n   @Prop({reflect: true}) size: 'small' | 'medium' | 'large' = 'large';\n\n   /**\n    * Disabled state. Boolean.\n    */\n   @Prop({reflect: true}) disabled = false;\n   /**\n    * Loading state. Boolean.\n    */\n   @Prop({reflect: true}) isLoading = false;\n\n   /**\n    * Name of the icon to be used from iconset.\n    */\n   @Prop({reflect: true}) iconName: string;\n   /**\n    * Custom iconset if needed.\n    */\n   @Prop({reflect: true}) iconset = 'default';\n   /**\n    * Icon position: left (default) | right.\n    */\n   @Prop({reflect: true}) iconPosition: 'left' | 'right' = 'left';\n   /**\n    * Set button to FAB/icon only.\n    */\n   @Prop({reflect: true}) iconOnly = false;\n\n   /**\n    * Property href switch button to link.\n    */\n   @Prop({reflect: true}) href: string;\n   /**\n    * Set target if link.\n    */\n   @Prop({reflect: true}) target = \"_self\";\n\n   /**\n    * Color base from color scheme. Default: accent.\n    */\n   @Prop() color = 'accent';\n   @Watch('color')\n   handleChangeColor() {\n     this.setColors();\n   }\n   /**\n    * Set the font color to dark or light.\n    */\n   @Prop({reflect: true}) fontColor: 'dark' | 'light' = 'dark';\n   /**\n    * Set text aligment for the button label.\n    * Vales: left (default) | center | right.\n    */\n   @Prop({reflect: true}) textAlign: 'left' | 'center' | 'right' = 'left';\n\n\n   @State() styles = {};\n\n   weights;\n\n   connectedCallback() {\n     this.weights = window.CuraAPI.theme.fonts.getWeights();\n     this.styles['--base-spacing'] = window.CuraAPI.theme.spacing.getSpacing();\n     this.styles['--neutral-white'] = window.CuraAPI.theme.colors.getColor(`neutral-white`);\n     this.styles['--neutral-base'] = window.CuraAPI.theme.colors.getColor(`neutral-base`);\n     this.styles['--neutral-dark'] = window.CuraAPI.theme.colors.getColor(`neutral-dark`);\n     this.styles['--font-size'] = window.CuraAPI.theme.fonts.getSize();\n     this.styles['--font-family'] = window.CuraAPI.theme.fonts.getFamily();\n     this.styles['--font-weight-medium'] = this.weights.medium;\n     this.styles['--text-align'] = this.textAlign;\n     this.setColors();\n   }\n\n   getClasses() {\n     const classes = {};\n     classes[`${this.size.toLowerCase()}`] = true;\n     classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n     classes[`icon-only`] = this.iconOnly;\n     classes['inverted'] = this.fontColor === 'light';\n     classes['disabled'] = this.disabled;\n     classes['isLoading'] = this.isLoading;\n     return classes;\n   }\n\n   setColors() {\n     this.styles = {\n       ...this.styles,\n       '--color-lighter': window.CuraAPI.theme.colors.getColor(`${this.color}-lighter`),\n       '--color-light': window.CuraAPI.theme.colors.getColor(`${this.color}-light`),\n       '--color-base': window.CuraAPI.theme.colors.getColor(`${this.color}-base`),\n       '--color-dark': window.CuraAPI.theme.colors.getColor(`${this.color}-dark`)\n     };\n   }\n\n   getIcon() {\n     if (!this.iconName) return '';\n     const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n     const color = this.getSymbolColor();\n     return <cura-icon name={this.iconName} iconset={this.iconset} size={iconSize} color={color}></cura-icon>;\n   }\n\n   getSymbolColor() {\n     return this.disabled\n       ? 'neutral-dark'\n       : this.fontColor === 'light'\n         ? 'neutral-white'\n         : `${this.color}-base`;\n   }\n\n   handleClick(e: Event) {\n     if (this.disabled || this.isLoading) e.preventDefault();\n   }\n\n   render() {\n     return (\n       <Host>\n       { this.href ? (\n         <a href={this.disabled ? '' : this.href}\n           target={this.target}\n           class={this.getClasses()}\n           style={this.styles}\n           onClick={(e) => this.handleClick(e)}>\n           <span class=\"button-container\">\n             { this.getIcon() }\n             <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n           </span>\n           <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n         </a>\n       ) : (\n         <button class={this.getClasses()}\n           style={this.styles}\n           disabled={this.disabled || null}\n           onClick={(e) => this.handleClick(e)}>\n           <span class=\"button-container\">\n             { this.getIcon() }\n             <span class={{label: true, inverted: this.fontColor === 'light'}}><slot></slot></span>\n           </span>\n           <cura-loader-circle size={this.size} color={this.getSymbolColor()}></cura-loader-circle>\n         </button>\n       )}\n       </Host>\n     );\n   }\n\n}\n"],"version":3}

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

@@ -0,0 +1,70 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-d99da69e.js';
+
+const curaDisplayCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:3em;font-weight:var(--font-weight-bold);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:3.429em}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:4.286em;line-height:calc(var(--line-height) + 5%)}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%;cursor:pointer}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(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);
+    this.theme = window.CuraAPI.theme;
+    this.level = 1;
+    this.spotColor = 'accent-dark';
+    this.color = undefined;
+    this.marginBlock = '1.25em';
+    this.lineHeight = '120%';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.setFontProperties();
+    this.setColors();
+  }
+  setFontProperties() {
+    this.weights = this.theme.fonts.getWeights();
+    this.fontSizeBase = this.theme.fonts.getSize();
+    this.styles = {
+      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),
+      '--font-size': window.CuraAPI.theme.fonts.getSize(),
+      '--font-weight-bold': this.weights.bold
+    };
+  }
+  hostCSSProperties() {
+    return {
+      '--margin-block': this.marginBlock,
+      '--font-size-base': this.fontSizeBase,
+      '--line-height': this.lineHeight
+    };
+  }
+  setColors() {
+    const fontColor = this.color
+      ? this.theme.colors.getColor(this.color)
+      : this.theme.fonts.getColor();
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
+  }
+  getHeadingTag() {
+    const tags = {
+      '1': h("h1", { style: this.styles }, h("slot", null)),
+      '2': h("h2", { style: this.styles }, h("slot", null)),
+      '3': h("h3", { style: this.styles }, h("slot", null)),
+      '4': h("h4", { style: this.styles }, h("slot", null)),
+      '5': h("h5", { style: this.styles }, h("slot", null)),
+      '6': h("h6", { style: this.styles }, h("slot", null)),
+      'default': h("h1", { style: this.styles }, h("slot", null))
+    };
+    return tags[`${this.level}`] || tags['default'];
+  }
+  render() {
+    return (h(Host, { style: this.hostCSSProperties() }, this.getHeadingTag()));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "color": ["handleChangeColor"],
+    "spotColor": ["handleChangeColor"]
+  }; }
+};
+CuraDisplay.style = curaDisplayCss;
+
+export { CuraDisplay as cura_display };
+
+//# sourceMappingURL=cura-display.entry.js.map

package/dist/esm/cura-display.entry.js.map

@@ -0,0 +1 @@
+{"file":"cura-display.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,k/BAAk/B;;MCO5/B,WAAW;;;IA+CtB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;iBAzCyB,CAAC;qBAMpB,aAAa;;uBAiBX,QAAQ;sBAMT,MAAM;kBAaxB,EAAE;;EA3BpB,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EA2BD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC/C,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;MAChE,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE;MACnD,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAC;GACH;EAED,iBAAiB;IACf,OAAO;MACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;MAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;MACrC,eAAe,EAAE,IAAI,CAAC,UAAU;KACjC,CAAC;GACH;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;QACxB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAChC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;GACH;EAED,aAAa;IACX,MAAM,IAAI,GAAG;MACX,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,GAAG,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;MAC/C,SAAS,EAAE,UAAI,KAAK,EAAE,IAAI,CAAC,MAAM,IAAE,eAAa,CAAK;KACtD,CAAC;IACF,OAAO,IAAI,CAAC,GAAG,IAAI,CAAC,KAAK,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;GACjD;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,IACjC,IAAI,CAAC,aAAa,EAAE,CACjB,EACP;GACH;;;;;;;;;;;","names":[],"sources":["./src/components/text/cura-display/cura-display.scss?tag=cura-display&encapsulation=shadow","./src/components/text/cura-display/cura-display.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size-base);\n\n  h1, h2, h3, h4, h5, h6 {\n    font-family: var(--font-family);\n    font-size: 3em;\n    font-weight: var(--font-weight-bold);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    margin-block: var(--margin-block);\n    letter-spacing: 0px;\n  }\n\n  @include medium-large() {\n    h1, h2, h3, h4, h5, h6 {\n      font-size: 3.429em;\n    }\n  }\n\n  @include xlarge-only() {\n    h1, h2, h3, h4, h5, h6 {\n      font-size: 4.286em;\n      line-height: calc(var(--line-height) + 5%);\n    }\n  }\n\n  ::slotted(b), ::slotted(strong) {\n    font-weight: var(--font-weight-bold);\n  }\n\n  ::slotted(a) {\n    font-weight: var(--font-weight-bold);\n    color: var(--color-link);\n    text-underline-offset: 10%;\n    cursor: pointer;\n  }\n\n  ::slotted(u) {\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(abbr) {\n    color: var(--color-link);\n    text-decoration: underline dashed 1px var(--color-link);\n    text-underline-offset: 10%;\n    cursor: default;\n  }\n\n}\n","import { Component, Host, h, Element, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'cura-display',\n  styleUrl: 'cura-display.scss',\n  shadow: true,\n})\nexport class CuraDisplay {\n\n  /**\n   * Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\n   * Values: 1(default) to 6.\n   */\n  @Prop({reflect: true}) level: 1 | 2 | 3 | 4 | 5 | 6 = 1;\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '1.25em';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '120%';\n\n  /**\n   * Host element <cura-display>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  theme = window.CuraAPI.theme;\n  @State() styles = {};\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': window.CuraAPI.theme.fonts.getFamily('display'),\n      '--font-size': window.CuraAPI.theme.fonts.getSize(),\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  getHeadingTag() {\n    const tags = {\n      '1': <h1 style={this.styles}><slot></slot></h1>,\n      '2': <h2 style={this.styles}><slot></slot></h2>,\n      '3': <h3 style={this.styles}><slot></slot></h3>,\n      '4': <h4 style={this.styles}><slot></slot></h4>,\n      '5': <h5 style={this.styles}><slot></slot></h5>,\n      '6': <h6 style={this.styles}><slot></slot></h6>,\n      'default': <h1 style={this.styles}><slot></slot></h1>\n    };\n    return tags[`${this.level}`] || tags['default'];\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        { this.getHeadingTag() }\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -0,0 +1,25 @@
+import { r as registerInstance, h, H as Host } from './index-d99da69e.js';
+
+const iconsetdefaulticons = ["360", "accessibility", "addUser", "airdrop", "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", "currency", "delete", "desktop", "doc", "down", "download", "duplicate", "edit", "exam", "examDoc", "expand", "facebook", "fileBmp", "fileJpg", "filePdf", "filePng", "fileUpload", "fileXls", "filter", "fullscreen", "gallery", "geotag", "geotagUnity", "geotagUnityGroup", "google", "graph", "healthPlan", "heart", "height", "height2", "home", "horizontalList", "imageUp", "infoCircle", "instagram", "key", "lamp", "language", "language2", "languageEN", "languagePT", "lattes", "left", "like", "link", "linkExternal", "linkedin", "list", "login", "logout", "mail", "maintenance", "medDoc", "medEspec", "medImg", "medUser", "medical", "menuHamburguer", "menuKebab", "menuMeatballs", "mic", "micOff", "minus", "minusCircle", "minusSquare", "mobile", "news", "notification", "npsDeslike", "npsHate", "npsLike", "npsLove", "npsNeutral", "order", "partner", "phone", "play", "plus", "plusCircle", "plusSquare", "print", "profile", "profileCircle", "questionCircle", "questionSquare", "range", "reload", "ribbon", "right", "schedule", "scheduleCheck", "scheduleHistorico", "search", "secure", "share", "siren", "sound", "soundOff", "subItem", "target", "team", "telegram", "twitter", "unLink", "unSecure", "unity", "unlike", "up", "upload", "verticalList", "viewFalse", "viewTrue", "weight", "whatsapp", "wifi", "wifiOff", "youtube", "zoomIn", "zoomOut"];
+
+const curaIconsViewCss = ":host{display:block;padding:24px;font-family:\"Roboto\", Arial, Helvetica, sans-serif}.iconDetail{display:block}.iconSizes{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.iconSizes .size{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;text-align:center;margin-right:9px;padding:8px}.iconSizes .size:last-child{margin-right:0}.iconSizes .size span{font-size:10px}.iconSizes.invert{margin-top:12px}.iconSizes.invert .size{background-color:#262626;color:#F6F6F6;border-radius:3px}.icons{margin-top:28px;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;position:relative}.icons .icon{position:relative;padding:4px;cursor:pointer;opacity:0.6;-webkit-transition:opacity 0.2s linear;transition:opacity 0.2s linear}.icons .icon span{font-size:12px;padding:6px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#000;color:#FFF;border-radius:2px;position:absolute;top:-2px;left:50%;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%);display:none}.icons .icon:hover{opacity:1}.icons .icon:hover span{display:block}";
+
+const CuraIconsView = class {
+  constructor(hostRef) {
+    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.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))))));
+  }
+};
+CuraIconsView.style = curaIconsViewCss;
+
+export { CuraIconsView as cura_icons_view };
+
+//# sourceMappingURL=cura-icons-view.entry.js.map

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

@@ -0,0 +1 @@
+{"file":"cura-icons-view.entry.js","mappings":"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","names":[],"sources":["./src/assets/icons/iconset-default-list.ts","./src/components/cura-icons-view/cura-icons-view.scss?tag=cura-icons-view&encapsulation=shadow","./src/components/cura-icons-view/cura-icons-view.tsx"],"sourcesContent":["export default [\"360\",\"accessibility\",\"addUser\",\"airdrop\",\"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\",\"currency\",\"delete\",\"desktop\",\"doc\",\"down\",\"download\",\"duplicate\",\"edit\",\"exam\",\"examDoc\",\"expand\",\"facebook\",\"fileBmp\",\"fileJpg\",\"filePdf\",\"filePng\",\"fileUpload\",\"fileXls\",\"filter\",\"fullscreen\",\"gallery\",\"geotag\",\"geotagUnity\",\"geotagUnityGroup\",\"google\",\"graph\",\"healthPlan\",\"heart\",\"height\",\"height2\",\"home\",\"horizontalList\",\"imageUp\",\"infoCircle\",\"instagram\",\"key\",\"lamp\",\"language\",\"language2\",\"languageEN\",\"languagePT\",\"lattes\",\"left\",\"like\",\"link\",\"linkExternal\",\"linkedin\",\"list\",\"login\",\"logout\",\"mail\",\"maintenance\",\"medDoc\",\"medEspec\",\"medImg\",\"medUser\",\"medical\",\"menuHamburguer\",\"menuKebab\",\"menuMeatballs\",\"mic\",\"micOff\",\"minus\",\"minusCircle\",\"minusSquare\",\"mobile\",\"news\",\"notification\",\"npsDeslike\",\"npsHate\",\"npsLike\",\"npsLove\",\"npsNeutral\",\"order\",\"partner\",\"phone\",\"play\",\"plus\",\"plusCircle\",\"plusSquare\",\"print\",\"profile\",\"profileCircle\",\"questionCircle\",\"questionSquare\",\"range\",\"reload\",\"ribbon\",\"right\",\"schedule\",\"scheduleCheck\",\"scheduleHistorico\",\"search\",\"secure\",\"share\",\"siren\",\"sound\",\"soundOff\",\"subItem\",\"target\",\"team\",\"telegram\",\"twitter\",\"unLink\",\"unSecure\",\"unity\",\"unlike\",\"up\",\"upload\",\"verticalList\",\"viewFalse\",\"viewTrue\",\"weight\",\"whatsapp\",\"wifi\",\"wifiOff\",\"youtube\",\"zoomIn\",\"zoomOut\"];",":host {\n  display: block;\n  padding: 24px;\n  font-family: 'Roboto', Arial, Helvetica, sans-serif;\n}\n\n.iconDetail {\n  display: block;\n}\n\n.iconSizes {\n  display: flex;\n  align-items: center;\n\n\n  .size {\n    display: flex;\n    flex-direction: column;\n    text-align: center;\n    margin-right: 9px;\n    padding: 8px;\n\n    &:last-child { margin-right: 0; }\n    span {\n      font-size: 10px;\n    }\n  }\n\n  &.invert {\n    margin-top: 12px;\n\n    .size {\n      background-color: #262626;\n      color: #F6F6F6;\n      border-radius: 3px;\n    }\n  }\n}\n\n.icons {\n  margin-top: 28px;\n  display: flex;\n  flex-wrap: wrap;\n  position: relative;\n\n  .icon {\n    position: relative;\n    padding: 4px;\n    cursor: pointer;\n    opacity: .6;\n    transition: opacity .2s linear;\n    span {\n      font-size: 12px;\n      padding: 6px;\n      box-sizing: border-box;\n      background: #000;\n      color: #FFF;\n      border-radius: 2px;\n      position: absolute;\n      top: -2px;\n      left: 50%;\n      transform: translateX(-50%) translateY(-100%);\n      display: none;\n    }\n\n    &:hover {\n      opacity: 1;\n\n      span { display: block; }\n    }\n  }\n}\n\n","import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = [16, 20, 24, 32, 40, 48, 64, 72, 128];\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = '360';\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <h4>{ this.selected }</h4>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes\">\n            { this.colors.map( color =>\n              <div class=\"size\">\n                <cura-icon name={this.selected} color={color}></cura-icon>\n                <span>{ color }</span>\n              </div>\n            )}\n            <div class=\"size\">\n              <cura-icon name={this.selected} disabled></cura-icon>\n              <span>Disabled</span>\n            </div>\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class=\"icon\" onClick={() => this.setSelected(icon)}>\n              <cura-icon name={icon}></cura-icon>\n              <span>{icon}</span>\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

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

@@ -0,0 +1,65 @@
+import { r as registerInstance, h, H as Host, g as getElement } from './index-d99da69e.js';
+
+const curaLabelCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}:host p.bold-weight,:host p ::slotted(b),:host p ::slotted(strong),:host p ::slotted(u){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(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 CuraLabel = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.theme = window.CuraAPI.theme;
+    this.size = 'medium';
+    this.weight = 'regular';
+    this.spotColor = 'accent-dark';
+    this.color = undefined;
+    this.marginBlock = '0';
+    this.lineHeight = '125%';
+    this.styles = {};
+  }
+  handleChangeColor() {
+    this.setColors();
+  }
+  connectedCallback() {
+    this.setFontProperties();
+    this.setColors();
+  }
+  getClasses() {
+    const sizeclass = {};
+    sizeclass[this.size.toLowerCase()] = true;
+    sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
+    return sizeclass;
+  }
+  setFontProperties() {
+    this.weights = this.theme.fonts.getWeights();
+    this.fontSizeBase = this.theme.fonts.getSize();
+    this.styles = {
+      '--font-family': this.theme.fonts.getFamily('body'),
+      '--font-weight-medium': this.weights.medium,
+      '--font-weight-bold': this.weights.bold
+    };
+  }
+  setColors() {
+    const fontColor = this.color
+      ? this.theme.colors.getColor(this.color)
+      : this.theme.fonts.getColor();
+    this.styles = Object.assign(Object.assign({}, this.styles), { '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'), '--color-link': this.theme.colors.getColor(`${this.spotColor}`) });
+  }
+  hostCSSProperties() {
+    return {
+      '--margin-block': this.marginBlock,
+      '--font-size-base': this.fontSizeBase,
+      '--line-height': this.lineHeight
+    };
+  }
+  render() {
+    return (h(Host, { style: this.hostCSSProperties() }, h("p", { style: this.styles, class: this.getClasses() }, h("slot", null))));
+  }
+  get host() { return getElement(this); }
+  static get watchers() { return {
+    "color": ["handleChangeColor"],
+    "spotColor": ["handleChangeColor"]
+  }; }
+};
+CuraLabel.style = curaLabelCss;
+
+export { CuraLabel as cura_label };
+
+//# sourceMappingURL=cura-label.entry.js.map

package/dist/esm/cura-label.entry.js.map

@@ -0,0 +1 @@
+{"file":"cura-label.entry.js","mappings":";;AAAA,MAAM,YAAY,GAAG,6/BAA6/B;;MCOrgC,SAAS;;;IAsDpB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;gBAhD0C,QAAQ;kBAM3B,SAAS;qBAM1B,aAAa;;uBAiBX,GAAG;sBAMJ,MAAM;kBAYxB,EAAE;;EA1BpB,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EA2BD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;GAClB;EAED,UAAU;IACR,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,SAAS,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC,WAAW,EAAE,SAAS,CAAC,GAAG,IAAI,CAAC;IACxD,OAAO,SAAS,CAAC;GAClB;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC/C,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MACnD,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAC;GACH;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;QACxB,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAChC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;GACH;EAED,iBAAiB;IACf,OAAO;MACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;MAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;MACrC,eAAe,EAAE,IAAI,CAAC,UAAU;KACjC,CAAC;GACH;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE,IACnC,SAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,IAC7C,eAAa,CACX,CACC,EACP;GACH;;;;;;;;;;;","names":[],"sources":["./src/components/forms/cura-label/cura-label.scss?tag=cura-label&encapsulation=shadow","./src/components/forms/cura-label/cura-label.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n  font-size: var(--font-size-base);\n\n  p {\n    font-family: var(--font-family);\n    font-size: 1.143em;\n    font-weight: var(--font-weight-medium);\n    color: var(--color-body);\n    line-height: var(--line-height);\n    margin-block: var(--margin-block);\n    letter-spacing: 0.32px;\n\n    &.bold-weight, ::slotted(b), ::slotted(strong), ::slotted(u) {\n      font-weight: var(--font-weight-bold);\n    }\n\n    &.large {\n      font-size: 1.357em;\n      line-height: calc(var(--line-height) - 4%);\n      letter-spacing: 0px;\n    }\n\n    &.small {\n      font-size: 1em;\n      line-height: calc(var(--line-height) - 4%);\n      letter-spacing: 0.56px;\n    }\n\n    &.xsmall {\n      font-size: 0.857em;\n      line-height: calc(var(--line-height) - 17%);\n      letter-spacing: 0.72px;\n    }\n  }\n\n  ::slotted(a) {\n    font-weight: var(--font-weight-bold);\n    color: var(--color-link);\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(u) {\n    text-underline-offset: 10%;\n  }\n\n  ::slotted(abbr) {\n    color: var(--color-link);\n    text-decoration: underline dashed 1px var(--color-link);\n    text-underline-offset: 10%;\n    cursor: default;\n  }\n\n}\n\n","import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-label',\n  styleUrl: 'cura-label.scss',\n  shadow: true,\n})\nexport class CuraLabel {\n\n  /**\n   * Set size of body text.\n   * Values: medium (default) | large | small | xsmall.\n   */\n  @Prop({reflect: true}) size: 'medium' | 'large' | 'small' | 'xsmall' = 'medium';\n\n  /**\n   * Label font weight. It is possible to use regular HTML tags like <b> or <strong> as well.\n   * Values: regular (default) | bold.\n   */\n  @Prop({reflect: true}) weight: 'regular' | 'bold' = 'regular';\n\n  /**\n  * Apply design system color to interactive elements like <a> and <abbr> inside the text.\n  * Values: Color from design system scheme. Default to 'accent-dark'.\n  */\n  @Prop({reflect: true}) spotColor = 'accent-dark';\n\n  /**\n   * Text color.\n   * Values: Color from design system scheme. Default to the font color from the theme.\n   */\n  @Prop() color: string;\n  @Watch('color')\n  @Watch('spotColor')\n  handleChangeColor() {\n    this.setColors();\n  }\n\n  /**\n   * CSS margin-block property values.\n   * Default to 1.25em\n   */\n  @Prop({reflect: true}) marginBlock = '0';\n\n  /**\n   * CSS line-height property values.\n   * Default to 140%\n   */\n  @Prop({reflect: true}) lineHeight = '125%';\n\n  /**\n   * Host element <cura-label>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  getClasses() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    sizeclass[`${this.weight.toLowerCase()}-weight`] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': this.theme.fonts.getFamily('body'),\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <p style={this.styles} class={this.getClasses()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/esm/cura.js

@@ -1,6 +1,6 @@
 import { p as plt, w as win, a as promiseResolve, b as bootstrapLazy } from './index-d99da69e.js';
 export { s as setNonce } from './index-d99da69e.js';
-import { g as globalScripts } from './app-globals-cc003eaf.js';
+import { g as globalScripts } from './app-globals-29001758.js';
 
 /*
  Stencil Client Patch Browser v3.3.0 | MIT Licensed | https://stenciljs.com
@@ -25,7 +25,7 @@ const patchBrowser = () => {
 
 patchBrowser().then(options => {
   globalScripts();
-  return bootstrapLazy([["cura-accordion_12",[[1,"cura-button",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}],[1,"cura-button-outline",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}],[1,"cura-button-transparent",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}],[1,"cura-accordion-item",{"label":[513],"iconSize":[514,"icon-size"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"iconActiveColor":[513,"icon-active-color"],"colorMode":[1,"color-mode"],"opened":[1540],"styles":[32]}],[1,"cura-icons-view",{"selected":[32]}],[1,"cura-accordion",{"color":[513],"activeColor":[513,"active-color"],"colorMode":[513,"color-mode"],"iconSize":[514,"icon-size"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"iconActiveColor":[513,"icon-active-color"],"behavior":[513],"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"],"color":[8],"styles":[32]}],[1,"cura-loader-circle",{"size":[513],"color":[513]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]]], options);
+  return bootstrapLazy([["cura-accordion_8",[[1,"cura-button",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}],[1,"cura-accordion-item",{"label":[513],"iconSize":[514,"icon-size"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"iconActiveColor":[513,"icon-active-color"],"colorMode":[1,"color-mode"],"opened":[1540],"styles":[32]}],[1,"cura-accordion",{"color":[513],"activeColor":[513,"active-color"],"colorMode":[513,"color-mode"],"iconSize":[514,"icon-size"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"iconActiveColor":[513,"icon-active-color"],"behavior":[513],"styles":[32]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]}],[1,"cura-page-template",{"contentwidth":[513]}],[1,"cura-paragraph",{"size":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]}],[1,"cura-loader-circle",{"size":[513],"color":[513]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-button-outline",[[1,"cura-button-outline",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}]]],["cura-button-transparent",[[1,"cura-button-transparent",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}]]],["cura-icons-view",[[1,"cura-icons-view",{"selected":[32]}]]],["cura-display",[[1,"cura-display",{"level":[514],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]}]]],["cura-label",[[1,"cura-label",{"size":[513],"weight":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]}]]]], options);
 });
 
 //# sourceMappingURL=cura.js.map

package/dist/esm/index.js

@@ -1,3 +1,7 @@
+function CuraInit(options, w = window) {
+  w.CuraInit = options;
+}
 
+export { CuraInit };
 
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"file":"index.js","mappings":"","names":[],"sources":[],"sourcesContent":[],"version":3}
+{"file":"index.js","mappings":"SAWgB,QAAQ,CAAC,OAAmB,EAAE,CAAC,GAAG,MAAM;EACtD,CAAC,CAAC,QAAQ,GAAG,OAAO,CAAC;AACvB;;;;","names":[],"sources":["./src/index.ts"],"sourcesContent":["export { Components, JSX } from './components';\nimport CuraAPI from './api/cura-api';\nimport { CuraConfig } from './api/cura-api.type';\n\ndeclare global {\n  export interface Window {\n    CuraAPI?: CuraAPI,\n    CuraInit?: CuraConfig\n  }\n}\n\nexport function CuraInit(options: CuraConfig, w = window) {\n  w.CuraInit = options;\n}\n"],"version":3}

package/dist/esm/loader.js

@@ -1,6 +1,6 @@
 import { C as CSS, p as plt, w as win, a as promiseResolve, b as bootstrapLazy } from './index-d99da69e.js';
 export { s as setNonce } from './index-d99da69e.js';
-import { g as globalScripts } from './app-globals-cc003eaf.js';
+import { g as globalScripts } from './app-globals-29001758.js';
 
 /*
  Stencil Client Patch Esm v3.3.0 | MIT Licensed | https://stenciljs.com
@@ -29,7 +29,7 @@ const defineCustomElements = (win, options) => {
   if (typeof window === 'undefined') return Promise.resolve();
   return patchEsm().then(() => {
   globalScripts();
-  return bootstrapLazy([["cura-accordion_12",[[1,"cura-button",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}],[1,"cura-button-outline",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}],[1,"cura-button-transparent",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}],[1,"cura-accordion-item",{"label":[513],"iconSize":[514,"icon-size"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"iconActiveColor":[513,"icon-active-color"],"colorMode":[1,"color-mode"],"opened":[1540],"styles":[32]}],[1,"cura-icons-view",{"selected":[32]}],[1,"cura-accordion",{"color":[513],"activeColor":[513,"active-color"],"colorMode":[513,"color-mode"],"iconSize":[514,"icon-size"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"iconActiveColor":[513,"icon-active-color"],"behavior":[513],"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"],"color":[8],"styles":[32]}],[1,"cura-loader-circle",{"size":[513],"color":[513]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]]], options);
+  return bootstrapLazy([["cura-accordion_8",[[1,"cura-button",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}],[1,"cura-accordion-item",{"label":[513],"iconSize":[514,"icon-size"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"iconActiveColor":[513,"icon-active-color"],"colorMode":[1,"color-mode"],"opened":[1540],"styles":[32]}],[1,"cura-accordion",{"color":[513],"activeColor":[513,"active-color"],"colorMode":[513,"color-mode"],"iconSize":[514,"icon-size"],"openIcon":[513,"open-icon"],"closeIcon":[513,"close-icon"],"iconColor":[513,"icon-color"],"iconActiveColor":[513,"icon-active-color"],"behavior":[513],"styles":[32]}],[1,"cura-heading",{"level":[514],"size":[513],"weight":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]}],[1,"cura-page-template",{"contentwidth":[513]}],[1,"cura-paragraph",{"size":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]}],[1,"cura-loader-circle",{"size":[513],"color":[513]}],[1,"cura-icon",{"name":[513],"color":[1],"size":[8],"iconset":[513],"disabled":[4]}]]],["cura-button-outline",[[1,"cura-button-outline",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}]]],["cura-button-transparent",[[1,"cura-button-transparent",{"size":[513],"disabled":[516],"isLoading":[516,"is-loading"],"iconName":[513,"icon-name"],"iconset":[513],"iconPosition":[513,"icon-position"],"iconOnly":[516,"icon-only"],"href":[513],"target":[513],"color":[1],"fontColor":[513,"font-color"],"textAlign":[513,"text-align"],"styles":[32]}]]],["cura-icons-view",[[1,"cura-icons-view",{"selected":[32]}]]],["cura-display",[[1,"cura-display",{"level":[514],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]}]]],["cura-label",[[1,"cura-label",{"size":[513],"weight":[513],"spotColor":[513,"spot-color"],"color":[1],"marginBlock":[513,"margin-block"],"lineHeight":[513,"line-height"],"styles":[32]}]]]], options);
   });
 };
 

package/dist/esm-es5/app-globals-29001758.js

@@ -0,0 +1,2 @@
+var ThemeDefault={color:{primary:{100:"113,197,232",300:"68,142,205",500:"0,61,165",700:"0,48,117",900:"0,40,85"},secondary:{100:"245,236,227",300:"221,192,162",500:"204,160,116",700:"136,107,77",900:"41,32,23"},accent:{100:"255,194,123",300:"255,168,74",500:"255,130,0",700:"215,114,10",900:"155,90,26"}},spacing:{base:4},font:{size:"14px",color:"#4A4A4A",body:"'Roboto', Arial, Helvetica, sans-serif",heading:"'Roboto', Arial, Helvetica, sans-serif",display:"'Roboto', Arial, Helvetica, sans-serif",weights:{thin:100,light:300,regular:400,medium:500,bold:700,black:900}}};var ThemeMaternity=Object.assign(Object.assign({},ThemeDefault),{color:{primary:{100:"248,227,226",300:"255,179,171",500:"218,113,111",700:"145,75,74",900:"73,38,37"},secondary:{100:"253,251,249",300:"247,244,238",500:"245,236,227",700:"204,197,189",900:"163,157,151"},accent:{100:"236,239,249",300:"133,153,203",500:"11,20,151",700:"7,13,101",900:"4,7,50"}},font:{size:"14px",color:"#4A4A4A",body:"'Gotham', Arial, Helvetica, sans-serif",heading:"'Gotham', Arial, Helvetica, sans-serif",display:"'Gotham', Arial, Helvetica, sans-serif",weights:{thin:325,light:325,regular:325,medium:350,bold:400,black:425}}});var ThemeOncology=Object.assign(Object.assign({},ThemeDefault),{color:{primary:{100:"170,190,225",300:"85,126,196",500:"0,61,166",700:"0,41,111",900:"0,12,33"},secondary:{100:"205,215,227",300:"155,175,199",500:"104,134,171",700:"54,95,143",900:"4,54,115"},accent:{100:"153,207,255",300:"71,169,255",500:"0,131,245",700:"0,109,204",900:"0,88,164"},aux:{100:"218,242,239",300:"132,212,202",500:"71,191,176",700:"33,100,92",900:"14,38,35"}},font:{size:"14px",color:"#4A4A4A",body:"'Hanken Grotesk', Arial, Helvetica, sans-serif",heading:"'Hanken Grotesk', Arial, Helvetica, sans-serif",display:"'Hanken Grotesk', Arial, Helvetica, sans-serif",weights:{thin:100,light:300,regular:400,medium:500,bold:700,black:900}}});var ThemeLegacyDefault=Object.assign(Object.assign({},ThemeDefault),{color:{primary:{100:"204,217,231",300:"85,128,174",500:"0,65,134",700:"0,43,89",900:"0,13,27"},secondary:{100:"238,232,206",300:"198,180,92",500:"170,142,11",700:"113,95,7",900:"34,28,2"},accent:{100:"249,232,213",300:"228,160,79",500:"223,141,44",700:"149,94,29",900:"45,28,9"}}});var ThemePresets={default:ThemeDefault,maternidade:ThemeMaternity,oncologia:ThemeOncology,legacyDefault:ThemeLegacyDefault};var Static={color:{success:{100:"223,246,233",300:"148,225,181",500:"95,210,144",700:"49,115,77",900:"19,42,29"},info:{100:"207,226,255",300:"149,191,255",500:"110,168,255",700:"66,100,153",900:"37,56,85"},error:{100:"251,221,221",300:"242,143,143",500:"235,87,87",700:"157,58,58",900:"47,17,17"},warning:{100:"252,250,196",300:"248,244,137",500:"245,239,78",700:"108,106,32",900:"49,48,16"},neutral:{0:"255,255,255",100:"246,246,246",200:"233,233,233",300:"226,226,226",400:"212,212,212",500:"183,183,183",600:"146,146,146",700:"110,110,110",800:"74,74,74",900:"38,38,38"}},breakpoints:{xsmall:{min:0,max:480},small:{min:481,max:768},medium:{min:769,max:992},large:{min:993,max:1920},xlarge:{min:1921,max:4096}}};var CuraThemeColorsModule=function(){function e(){this.NeutralDepthAlias={purewhite:"0",white:"100",pale:"200",lighter:"300",light:"400",base:"500",medium:"600",dark:"700",darker:"800",black:"900"};this.ColorDepthAlias={lighter:"100",light:"300",base:"500",dark:"700",darker:"900"}}e.prototype.getColor=function(e,t){if(e===void 0){e="primary-base"}if(t===void 0){t=1}var r=this.splitColorDepth(e),a=r.color,o=r.depth;var i=this.getStatic(a,o,t);if(i)return i;return this.getDynamic(a,o,t)};e.prototype.getStatic=function(e,t,r){if(r===void 0){r=1}var a,o,i;var n=Static.color[e];if(!n)return null;var s=e==="neutral"?this.NeutralDepthAlias[t]:this.ColorDepthAlias[t];return((a=Static.color[e])===null||a===void 0?void 0:a[s])?"rgba(".concat((o=Static.color[e])===null||o===void 0?void 0:o[s],", ").concat(r,")"):"rgba(".concat((i=Static.color[e])===null||i===void 0?void 0:i[t],", ").concat(r,")")};e.prototype.getDynamic=function(e,t,r){var a=this.ColorDepthAlias[t]?"--cura-color-".concat(e,"-").concat(this.ColorDepthAlias[t]):"--cura-color-".concat(e,"-").concat(t);return getComputedStyle(document.documentElement).getPropertyValue(a)?"rgba(var(".concat(a,"), ").concat(r,")"):"rgba(var(--cura-color-primary-500), ".concat(r,")")};e.prototype.splitColorDepth=function(e){var t=e.toLowerCase().split(/-(.*)/),r=t[0],a=t[1];return{color:r!==null&&r!==void 0?r:"primary",depth:a!==null&&a!==void 0?a:"base"}};return e}();var CuraThemeSpacingModule=function(){function e(){this.curaSpacing="--cura-spacing-base"}e.prototype.getSpacing=function(){if(getComputedStyle(document.body).getPropertyValue(this.curaSpacing)){return"var(".concat(this.curaSpacing,")")}return"4"};return e}();var CuraThemeFontsModule=function(){function e(){this.getSize=function(){return"var(--cura-font-size)"};this.getColor=function(){return"var(--cura-font-color)"}}e.prototype.getFamily=function(e){if(e===void 0){e="body"}var t="--cura-font-".concat(e.toLowerCase());return getComputedStyle(document.body).getPropertyValue(t)?"var(".concat(t,")"):"var(--cura-font-body)"};e.prototype.getWeights=function(){var e={};Object.keys(ThemeDefault.font.weights).forEach((function(t){return e[t]="var(--cura-font-weights-".concat(t,")")}));return e};return e}();var CuraThemeBreakpointsModule=function(){function e(){}e.prototype.get=function(e,t){if(e===void 0){e=null}if(t===void 0){t=null}if(e){var r=t?Static.breakpoints[e][t]:Static.breakpoints[e];if(r||r===0)return r}return Static.breakpoints};return e}();var CuraThemeModule=function(){function e(){var e=this;this.prefix="--cura";this.colors=new CuraThemeColorsModule;this.spacing=new CuraThemeSpacingModule;this.fonts=new CuraThemeFontsModule;this.breakpoints=new CuraThemeBreakpointsModule;this.setCssVar=function(t,r){var a=e.groupPath(r,t[0]);e.rootElement.style.setProperty(a,t[1])};this.groupPath=function(e,t){return"".concat(e,"-").concat(t)};this.isObject=function(e){return e&&typeof e==="object"&&!Array.isArray(e)};this.mergeObject=function(t,r){var a=Object.entries(t);for(var o=0,i=a;o<i.length;o++){var n=i[o];if(e.isObject(n[1])){e.mergeObject(n[1],r[n[0]])}else{r[n[0]]=n[1]}}};this.buildCssVars=function(t,r){var a=Object.entries(r);for(var o=0,i=a;o<i.length;o++){var n=i[o];if(e.isObject(n[1])){e.buildCssVars(e.groupPath(t,n[0]),n[1])}else{e.setCssVar(n,t)}}};this.rootElement=window.document.documentElement}e.prototype.load=function(e){if(e===void 0){e="default"}var t=ThemePresets[e]?ThemePresets[e]:ThemePresets.default;this.buildCssVars(this.prefix,t)};e.prototype.setCustom=function(e){var t=e.name;if(t in ThemePresets){console.log("Error building custom theme. Theme %s already exists. Loading default theme.",t);this.load("default")}else{var r=e.fromPreset&&e.fromPreset in ThemePresets?ThemePresets[e.fromPreset]:ThemePresets.default;var a=Object.assign({},JSON.parse(JSON.stringify(r)));this.mergeObject(e.definitions,a);ThemePresets[t]=a;this.load(t)}};return e}();var CuraAPI=function(){function e(e){this.localAssetsPath=e&&e.localAssetsPath?e.localAssetsPath:"/assets";var t=new CuraThemeModule;this.theme={load:function(e){t.load(e)},setCustom:function(e){t.setCustom(e)},colors:{getColor:function(e,r){return t.colors.getColor(e,r)}},fonts:{getFamily:function(e){return t.fonts.getFamily(e)},getWeights:function(){return t.fonts.getWeights()},getSize:function(){return t.fonts.getSize()},getColor:function(){return t.fonts.getColor()}},spacing:{getSpacing:function(){return t.spacing.getSpacing()}},breakpoints:{get:function(e,r){return t.breakpoints.get(e,r)}}};if(e&&e.customTheme){this.theme.setCustom(e.customTheme)}else{var r=e&&e.theme?e.theme:"default";this.theme.load(r)}}return e}();function appGlobalScript(){var e=window.CuraInit;window.CuraAPI=e?new CuraAPI(e):new CuraAPI;var t=window.CuraAPI;window.dispatchEvent(new CustomEvent("CuraAPIReady",{detail:{api:t}}));if(e&&typeof e.onReady==="function")e.onReady(t)}var globalScripts=appGlobalScript;export{globalScripts as g};
+//# sourceMappingURL=app-globals-29001758.js.map