@rededor/cura 1.0.0-alpha.7 → 1.0.0

package/dist/collection/components/forms/cura-switch/cura-switch.js

@@ -92,7 +92,7 @@ export class CuraSwitch {
         return classes;
     }
     render() {
-        return (h(Host, { key: '2ccbfc3c5aae5ec8be3f879541b7cbcf203b62a9' }, h("div", { key: '2acacb0bab31f8736155dc764a6e3d57508f7a48', class: this.getClasses(), style: this.styles }, h("div", { key: '16c7cfedbd029d4e481cb2c3268690d594962ff3', class: "info" }, h("cura-label", { key: '24ed0fd9a9c0ebacc52407319b16a202f2defc96', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: '4a84fb18a2fd43c623cb9aa9e9573482a22f6372', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '0ec0427dee691d224daa58db943c07d906d08dd0' }))), h("div", { key: '5b4a04200b4880474b693e605ba3e8671a3bd980', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '2e3e764a87d57edc520f9d56b980d80d455d8d74', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '36b9da57ea3b95e419d7bb0b5ad4f24d7acd1b63', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
+        return (h(Host, { key: 'a18d2e4516e63c9dc080fabb97ded6cb145f096f' }, h("div", { key: 'e6cfb0bada406eef4b6dc400eae2cc8e15ff209b', class: this.getClasses(), style: this.styles }, h("div", { key: '520489765d61a4c96079cc51395c9a7038c1ec12', class: "info" }, h("cura-label", { key: '3b064a7794c262d62e4d8e04475ca20d87febc7b', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, class: "label", weight: "bold", size: this.size === 'large' ? 'medium' : 'xsmall', lineHeight: "125%", color: this.assignColor('neutral-white', 'neutral-black') }, this.label), h("cura-label", { key: 'b94ac8cf1fd1e3ba0dce269b677636f09bc97597', style: { textAlign: this.position === 'right' ? 'right' : 'left' }, color: this.assignColor('primary-lighter', 'neutral-dark'), size: "xsmall", class: "message" }, h("slot", { key: '437f81a5bde1395d97c346928191c8ab0ce7219d' }))), h("div", { key: '3e36e82138a69c5f829f54ec82af0646fdea4fbb', onClick: this.toggleSwitch, class: "control" }, h("div", { key: '7068b0664ebb020037d63df565e5c835b7a4fa46', class: `track ${this.size.toLowerCase()}` }, h("div", { key: '6ce66dfe5d06bdfdb625b38b0e0adb20df7db130', class: `thumb ${this.size.toLowerCase()}`, tabIndex: this.ontabindex }))))));
     }
     static get is() { return "cura-switch"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/loaders/cura-loader-bar/cura-loader-bar.js

@@ -16,7 +16,7 @@ export class CuraLoaderBar {
         this.setProgress();
     }
     render() {
-        return (h(Host, { key: 'fbd3b560f2c5bc00e729300e3f2afa09690cabc8' }, h("div", { key: '0a728618223b33796b63768a543580b5d30e0115', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '06230a2ddf4bea3bef96a09814f3e0da9dde31a3', class: "progress-bar-fill" }))));
+        return (h(Host, { key: 'e8c5cf2c47e5b8a1a3e0ea758df9a5183b94afbe' }, h("div", { key: '4375509425a0f7f8a86ded54c792f04d8b34d004', id: "progress-bar", class: "progress-bar", style: this.styles }, h("span", { key: '2d78b8f09726918cb01ef2ba775cf061f8b1fbab', class: "progress-bar-fill" }))));
     }
     setColor() {
         this.styles = Object.assign(Object.assign({}, this.styles), { '--neutral-base': window.CuraAPI.theme.colors.getColor(`neutral-base`, 0.2), '--color-base': window.CuraAPI.theme.colors.getColor(this.color) });

package/dist/collection/components/loaders/cura-loader-circle/cura-loader-circle.js

@@ -19,7 +19,7 @@ export class CuraLoaderCircle {
         };
     }
     render() {
-        return (h(Host, { key: 'dd0c9e5b82f8f3b41511d31333af00e46435e9db', style: this.getStyles() }, h("svg", { key: '2a6a1edab6501c7788bebed93bbc87143d10fbaf', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '8dd113e23ffc4f5df091738a878eee76e030c904' }, h("circle", { key: 'a6e06aad2260ffb8cec65aed59ef8f09459765a1', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: '88ac6f03cac1030593e06e6062d8d9947474aa62', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '6bae1e73907f3f8a17560ef055290c4ac41959e7' }, h("linearGradient", { key: 'c2510effd844984927f4b32fbb7f770ebcb09a3c', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: '477e90e9eadf1385a8b897917886e1fe352c41d0' }), h("stop", { key: '135e22c3a11916fa1ce4bc5870774ecf37512e6f', offset: "1" }))))));
+        return (h(Host, { key: '4c3a12d61a3b686438ece6752160337ca8cacf18', style: this.getStyles() }, h("svg", { key: 'bf8d817e7624419514e8f918ade94024c0d6bcb9', viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("g", { key: '69885675868e25d75e9b0a461cb6563ba32a317a' }, h("circle", { key: 'a1b20469b5bb76d101cfbba683f99689b2a8b8ed', cx: "8", cy: "8", r: "7", stroke: "url(#paint0_linear_13485_11488)", "stroke-width": "2" }), h("path", { key: 'c74b6313eff3374f711ace4c638fa0e671325f12', d: "M1 8C1 4.13401 4.11877 1 7.96596 1C9.53445 1 10.9819 1.52093 12.1462 2.4C12.8959 2.96601 13.5282 3.68049 14 4.5", "stroke-width": "2" })), h("defs", { key: '5f5861e8cdf8f192cd3312c345b0c3f2afeeb0c2' }, h("linearGradient", { key: '98826d4d31d454e8d013349003bc89c3b82118bd', id: "paint0_linear_13485_11488", x1: "15.7", y1: "4.5", x2: "4.15", y2: "11.5", gradientUnits: "userSpaceOnUse" }, h("stop", { key: 'c0e582f71ef1a6870d0f77047198f58bf18987f6' }), h("stop", { key: '3f120a0b8e9c86388f084d34e4bda9f8c5893702', offset: "1" }))))));
     }
     static get is() { return "cura-loader-circle"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-display/cura-display.css

@@ -36,16 +36,28 @@
   margin-block: var(--margin-block);
   letter-spacing: 0px;
 }
+:host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+  font-size: 2.2857142857em;
+  letter-spacing: -1.68px;
+}
 @media (min-width: 769px) and (max-width: 1920px) {
   :host h1, :host h2, :host h3, :host h4, :host h5, :host h6 {
     font-size: 3.429em;
   }
+  :host h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+    font-size: 2.8571428571em;
+    letter-spacing: -1.92px;
+  }
 }
 @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 h1.small, :host h2.small, :host h3.small, :host h4.small, :host h5.small, :host h6.small {
+    font-size: 3.5714285714em;
+    letter-spacing: -1.2px;
+  }
 }
 :host ::slotted(b), :host ::slotted(strong) {
   font-weight: var(--font-weight-bold);
@@ -59,6 +71,10 @@
 :host ::slotted(u) {
   text-underline-offset: 10%;
 }
+:host ::slotted(i), :host ::slotted(em) {
+  font-style: italic;
+  font-weight: var(--font-weight-medium);
+}
 :host ::slotted(abbr) {
   color: var(--color-link);
   text-decoration: underline dashed 1px var(--color-link);

package/dist/collection/components/text/cura-display/cura-display.js

@@ -3,6 +3,7 @@ export class CuraDisplay {
     constructor() {
         this.theme = window.CuraAPI.theme;
         this.level = 1;
+        this.size = 'large';
         this.spotColor = 'accent-dark';
         this.color = undefined;
         this.marginBlock = '1.25em';
@@ -22,7 +23,8 @@ export class CuraDisplay {
         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-bold': this.weights.bold,
+            '--font-weight-medium': this.weights.medium
         };
     }
     hostCSSProperties() {
@@ -38,20 +40,27 @@ export class CuraDisplay {
             : 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}`) });
     }
+    getClasses() {
+        var _a;
+        const classes = {};
+        classes[`${(_a = this.size) === null || _a === void 0 ? void 0 : _a.toLowerCase()}`] = true;
+        return classes;
+    }
     getHeadingTag() {
+        const classes = this.getClasses();
         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))
+            '1': h("h1", { style: this.styles, class: classes }, h("slot", null)),
+            '2': h("h2", { style: this.styles, class: classes }, h("slot", null)),
+            '3': h("h3", { style: this.styles, class: classes }, h("slot", null)),
+            '4': h("h4", { style: this.styles, class: classes }, h("slot", null)),
+            '5': h("h5", { style: this.styles, class: classes }, h("slot", null)),
+            '6': h("h6", { style: this.styles, class: classes }, h("slot", null)),
+            'default': h("h1", { style: this.styles, class: classes }, h("slot", null))
         };
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '89df8c001192a7526e6976d9b43099562d65809d', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: 'ffd8e58f9bf50038554591ec2b191e0488ae0500', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-display"; }
     static get encapsulation() { return "shadow"; }
@@ -85,6 +94,24 @@ export class CuraDisplay {
                 "reflect": true,
                 "defaultValue": "1"
             },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'large' | 'small'",
+                    "resolved": "\"large\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Display size.\nValues: 'large' (default) | 'small'."
+                },
+                "attribute": "size",
+                "reflect": true,
+                "defaultValue": "'large'"
+            },
             "spotColor": {
                 "type": "string",
                 "mutable": false,
@@ -100,7 +127,7 @@ export class CuraDisplay {
                     "text": "Apply design system color to interactive elements like <a> and <abbr> inside the text.\nValues: Color from design system scheme. Default to 'accent-dark'."
                 },
                 "attribute": "spot-color",
-                "reflect": true,
+                "reflect": false,
                 "defaultValue": "'accent-dark'"
             },
             "color": {

package/dist/collection/components/text/cura-display/cura-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-display.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.tsx"],"names":[],"mappings":"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","sourcesContent":["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,"file":"cura-display.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.tsx"],"names":[],"mappings":"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","sourcesContent":["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   * Display size.\n   * Values: 'large' (default) | 'small'.\n   */\n  @Prop({reflect: true}) size: 'large' | 'small' = 'large';\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() 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      '--font-weight-medium': this.weights.medium\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  getClasses() {\n    const classes = {};\n    classes[`${this.size?.toLowerCase()}`] = true;\n    return classes;\n  }\n\n  getHeadingTag() {\n    const classes = this.getClasses();\n    const tags = {\n      '1': <h1 style={this.styles} class={classes}><slot></slot></h1>,\n      '2': <h2 style={this.styles} class={classes}><slot></slot></h2>,\n      '3': <h3 style={this.styles} class={classes}><slot></slot></h3>,\n      '4': <h4 style={this.styles} class={classes}><slot></slot></h4>,\n      '5': <h5 style={this.styles} class={classes}><slot></slot></h5>,\n      '6': <h6 style={this.styles} class={classes}><slot></slot></h6>,\n      'default': <h1 style={this.styles} class={classes}><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"]}

package/dist/collection/components/text/cura-display/cura-display.stories.js

@@ -22,7 +22,8 @@ const renderCuraDisplay = (label, args) => {
 
 ` : '';
     const block = `<cura-display${args.level ? `
-  level="${args.level}"` : ''}${args.color ? `
+  level="${args.level}"` : ''}${args.size && args.size !== 'large' ? `
+  size="${args.size}"` : ''}${args.color ? `
   color="${args.color}"` : ''}${args.spotColor ? `
   spot-color="${args.spotColor}"` : ''}${args.marginBlock ? `
   margin-block="${args.marginBlock}"` : ''}${args.lineHeight ? `
@@ -45,6 +46,15 @@ export default {
             description: 'Define o texto do componente diretamente.',
             name: 'Content'
         },
+        size: {
+            control: { type: 'inline-radio' },
+            options: ['small', 'large'],
+            description: 'Tamanhos disponíveis.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'large' }
+            }
+        },
         color: {
             control: { type: 'select' },
             options: ['', ...colors],
@@ -112,8 +122,9 @@ export default {
 };
 export const Display = {
     args: {
-        label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
+        label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur <i>adipiscing</i> elit.',
         level: '',
+        size: 'large',
         color: '',
         spotColor: '',
         marginBlock: '',

package/dist/collection/components/text/cura-display/cura-display.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-display.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraDisplay = (label: string, args: any) => {\n  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>\n  cura-display { ${args.cssMarginBlock ? `\n    --margin-block: ${args.cssMarginBlock} !important;` : ``}${ args.cssLineHeight ? `\n    --line-height: ${args.cssLineHeight} !important;` : ``}\n  }\n</style>\n\n` : '';\n  const block = `<cura-display${args.level ? `\n  level=\"${args.level}\"` : ''}${args.color ? `\n  color=\"${args.color}\"` : ''}${args.spotColor ? `\n  spot-color=\"${args.spotColor}\"` : ''}${args.marginBlock ? `\n  margin-block=\"${args.marginBlock}\"` : ''}${args.lineHeight ? `\n  line-height=\"${args.lineHeight}\"` : ''}>\n  ${label}\n</cura-display>\n`;\n  return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n  title: 'Componentes/Text/Display',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraDisplay(label, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Define o texto do componente diretamente.',\n      name: 'Content'\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Cor de texto padrão do tema'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',\n      name: 'spot-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent-dark'}\n      }\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc. A semântica é independente do estilo aplicado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 1}\n      }\n    },\n    marginBlock: {\n      control: 'text',\n      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',\n      name: 'margin-block',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    lineHeight: {\n      control: 'text',\n      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',\n      name: 'line-height',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '130%'}\n      }\n    },\n    cssMarginBlock: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--margin-block',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    cssLineHeight: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--line-height',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '130%'}\n      }\n    },\n  },\n};\n\nexport const Display = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur adipiscing elit.',\n    level: '',\n    color: '',\n    spotColor: '',\n    marginBlock: '',\n    lineHeight: '',\n    cssMarginBlock: '',\n    cssLineHeight: ''\n  },\n};\n"]}
+{"version":3,"file":"cura-display.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-display/cura-display.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraDisplay = (label: string, args: any) => {\n  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>\n  cura-display { ${args.cssMarginBlock ? `\n    --margin-block: ${args.cssMarginBlock} !important;` : ``}${ args.cssLineHeight ? `\n    --line-height: ${args.cssLineHeight} !important;` : ``}\n  }\n</style>\n\n` : '';\n  const block = `<cura-display${args.level ? `\n  level=\"${args.level}\"` : ''}${args.size && args.size !== 'large' ? `\n  size=\"${args.size}\"` : ''}${args.color ? `\n  color=\"${args.color}\"` : ''}${args.spotColor ? `\n  spot-color=\"${args.spotColor}\"` : ''}${args.marginBlock ? `\n  margin-block=\"${args.marginBlock}\"` : ''}${args.lineHeight ? `\n  line-height=\"${args.lineHeight}\"` : ''}>\n  ${label}\n</cura-display>\n`;\n  return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n  title: 'Componentes/Text/Display',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraDisplay(label, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Define o texto do componente diretamente.',\n      name: 'Content'\n    },\n    size: {\n      control: { type: 'inline-radio' },\n      options: ['small', 'large'],\n      description: 'Tamanhos disponíveis.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'large' }\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Cor de texto padrão do tema'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',\n      name: 'spot-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent-dark'}\n      }\n    },\n    level: {\n      control: { type: 'number', min: 1, max: 6, step: 1 },\n      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc. A semântica é independente do estilo aplicado.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 1}\n      }\n    },\n    marginBlock: {\n      control: 'text',\n      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',\n      name: 'margin-block',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    lineHeight: {\n      control: 'text',\n      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',\n      name: 'line-height',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '130%'}\n      }\n    },\n    cssMarginBlock: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--margin-block',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    cssLineHeight: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--line-height',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '130%'}\n      }\n    },\n  },\n};\n\nexport const Display = {\n  args: {\n    label: 'Dolor sit <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">amet</a>, consectetur <i>adipiscing</i> elit.',\n    level: '',\n    size: 'large',\n    color: '',\n    spotColor: '',\n    marginBlock: '',\n    lineHeight: '',\n    cssMarginBlock: '',\n    cssLineHeight: ''\n  },\n};\n"]}

package/dist/collection/components/text/cura-heading/cura-heading.js

@@ -61,7 +61,7 @@ export class CuraHeading {
         return tags[`${this.level}`] || tags['default'];
     }
     render() {
-        return (h(Host, { key: '55016d81f72ce0b506a7e2f2fbca3aa92448d581', style: this.hostCSSProperties() }, this.getHeadingTag()));
+        return (h(Host, { key: '6e3a1f6786d9c1f9c0abb1b54ced47d2c6e8a90d', style: this.hostCSSProperties() }, this.getHeadingTag()));
     }
     static get is() { return "cura-heading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-paragraph/cura-paragraph.css

@@ -47,7 +47,7 @@
   letter-spacing: 0.48px;
 }
 :host p.caption, :host p.xsmall {
-  font-size: 0.714em;
+  font-size: 0.7142857143em;
   line-height: calc(var(--line-height) - 5%);
   letter-spacing: 0.6px;
 }
@@ -106,6 +106,14 @@
   font-weight: var(--font-weight-medium);
   text-underline-offset: 10%;
 }
+:host ::slotted(i) {
+  font-style: italic;
+}
+:host ::slotted(em) {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-link);
+  font-style: normal;
+}
 :host ::slotted(abbr) {
   color: var(--color-link);
   text-decoration: underline dashed 1px var(--color-link);

package/dist/collection/components/text/cura-paragraph/cura-paragraph.js

@@ -45,7 +45,7 @@ export class CuraParagraph {
         };
     }
     render() {
-        return (h(Host, { key: '2c9903f885ae8346efdbb1569264fc078aee9224', style: this.hostCSSProperties() }, h("p", { key: '287c656408d2e9876497f70784ae7ce166417272', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'dde5f8d46c384a76605c1ef33b73c8f442c7a48b' }))));
+        return (h(Host, { key: '0942f1f6c23f0662a604f065ab7347546ed457cf', style: this.hostCSSProperties() }, h("p", { key: '3a16f232c2bd783695a2229eb3181463b28a95fa', style: this.styles, class: this.setsizeClass() }, h("slot", { key: 'c03154a42f5a30f8114ff86b8a62a3f1093d7c73' }))));
     }
     static get is() { return "cura-paragraph"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js

@@ -113,7 +113,7 @@ export default {
 };
 export const Paragraph = {
     args: {
-        label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non dapibus urna. Sed <a href="https://www.rededorsaoluiz.com.br" target="_blank">luctus tincidunt nibh</a>, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. <u>Quisque sed nibh in odio blandit mollis at quis dolor</u>. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',
+        label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non <em>dapibus urna</em>. Sed <a href="https://www.rededorsaoluiz.com.br" target="_blank">luctus tincidunt nibh</a>, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. <u>Quisque sed nibh in odio blandit mollis at quis dolor</u>. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',
         size: 'medium',
         color: '',
         spotColor: '',

package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-paragraph.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,MAAM,mBAAmB,GAAG,CAAC,KAAa,EAAE,IAAS,EAAE,EAAE;IACvD,MAAM,MAAM,GAAG,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;qBACxC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC;sBACrB,IAAI,CAAC,cAAc,cAAc,CAAC,CAAC,CAAC,EAAE,GAAI,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC;qBAChE,IAAI,CAAC,aAAa,cAAc,CAAC,CAAC,CAAC,EAAE;;;;CAIzD,CAAC,CAAC,CAAC,EAAE,CAAC;IACL,MAAM,KAAK,GAAG,kBAAkB,IAAI,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,IAAI,KAAK,QAAQ,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,CAAC;UAC3F,IAAI,CAAC,IAAI,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC;WAChC,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC;gBACjC,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;kBAC1C,IAAI,CAAC,WAAW,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC;iBAC9C,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,CAAC,EAAE;IACpC,KAAK;;CAER,CAAC;IACA,OAAO,GAAG,MAAM,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,EAAE,CAAC;AAC7C,CAAC,CAAA;AAED,eAAe;IACb,KAAK,EAAE,4BAA4B;IACnC,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;YAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;QACvB,OAAO,mBAAmB,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC;IAC1C,CAAC;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,gGAAgG;YAC7G,IAAI,EAAE,SAAS;SAChB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC;YAC/C,WAAW,EAAE,qLAAqL;YAClM,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;aACnC;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC;YACxB,WAAW,EAAE,6FAA6F;YAC1G,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,6BAA6B,EAAC;aACxD;SACF;QACD,SAAS,EAAE;YACT,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC;YACxB,WAAW,EAAE,8IAA8I;YAC3J,IAAI,EAAE,YAAY;YAClB,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,aAAa,EAAC;aACxC;SACF;QACD,WAAW,EAAE;YACX,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,sHAAsH;YACnI,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;aACnC;SACF;QACD,UAAU,EAAE;YACV,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,8IAA8I;YAC3J,IAAI,EAAE,aAAa;YACnB,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAC;aACjC;SACF;QACD,cAAc,EAAE;YACd,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,0IAA0I;YACvJ,IAAI,EAAE,gBAAgB;YACtB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,QAAQ,EAAC;aACnC;SACF;QACD,aAAa,EAAE;YACb,OAAO,EAAE,MAAM;YACf,WAAW,EAAE,yIAAyI;YACtJ,IAAI,EAAE,eAAe;YACrB,KAAK,EAAE;gBACL,QAAQ,EAAE,gBAAgB;gBAC1B,YAAY,EAAE,EAAE,OAAO,EAAE,MAAM,EAAC;aACjC;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,KAAK,EAAE,olBAAolB;QAC3lB,IAAI,EAAE,QAAQ;QACd,KAAK,EAAE,EAAE;QACT,SAAS,EAAE,EAAE;QACb,WAAW,EAAE,EAAE;QACf,UAAU,EAAE,EAAE;QACd,cAAc,EAAE,EAAE;QAClB,aAAa,EAAE,EAAE;KAClB;CACF,CAAC","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraParagraph = (label: string, args: any) => {\n  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>\n  cura-paragraph { ${args.cssMarginBlock ? `\n    --margin-block: ${args.cssMarginBlock} !important;` : ``}${ args.cssLineHeight ? `\n    --line-height: ${args.cssLineHeight} !important;` : ``}\n  }\n</style>\n\n` : '';\n  const block = `<cura-paragraph${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `\n  size=\"${args.size}\"` : ``}${args.color ? `\n  color=\"${args.color}\"` : ''}${args.spotColor ? `\n  spot-color=\"${args.spotColor}\"` : ''}${args.marginBlock ? `\n  margin-block=\"${args.marginBlock}\"` : ''}${args.lineHeight ? `\n  line-height=\"${args.lineHeight}\"` : ''}>\n  ${label}\n</cura-paragraph>\n`;\n  return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n  title: 'Componentes/Text/Paragraph',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraParagraph(label, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Define o texto do componente diretamente. São válidas todas as tags HTML pertinentes ao `<p>`.',\n      name: 'Content'\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xsmall', 'small', 'medium', 'large'],\n      description: 'Define o tamanho do bloco de texto considerando `caption` (depreciado, use xsmall), `xsmall`, `small`, `regular` (depreciado, use medium), `medium` e `large` como valores válidos.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Cor de texto padrão do tema'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',\n      name: 'spot-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent-dark'}\n      }\n    },\n    marginBlock: {\n      control: 'text',\n      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',\n      name: 'margin-block',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    lineHeight: {\n      control: 'text',\n      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',\n      name: 'line-height',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '140%'}\n      }\n    },\n    cssMarginBlock: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--margin-block',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    cssLineHeight: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--line-height',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '140%'}\n      }\n    },\n  },\n};\n\nexport const Paragraph = {\n  args: {\n    label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non dapibus urna. Sed <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">luctus tincidunt nibh</a>, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. <u>Quisque sed nibh in odio blandit mollis at quis dolor</u>. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',\n    size: 'medium',\n    color: '',\n    spotColor: '',\n    marginBlock: '',\n    lineHeight: '',\n    cssMarginBlock: '',\n    cssLineHeight: ''\n  },\n};\n"]}
+{"version":3,"file":"cura-paragraph.stories.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { getColorsWithDepths } from \"../../../utils/utils\";\n\nconst colors = getColorsWithDepths();\n\nconst renderCuraParagraph = (label: string, args: any) => {\n  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>\n  cura-paragraph { ${args.cssMarginBlock ? `\n    --margin-block: ${args.cssMarginBlock} !important;` : ``}${ args.cssLineHeight ? `\n    --line-height: ${args.cssLineHeight} !important;` : ``}\n  }\n</style>\n\n` : '';\n  const block = `<cura-paragraph${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `\n  size=\"${args.size}\"` : ``}${args.color ? `\n  color=\"${args.color}\"` : ''}${args.spotColor ? `\n  spot-color=\"${args.spotColor}\"` : ''}${args.marginBlock ? `\n  margin-block=\"${args.marginBlock}\"` : ''}${args.lineHeight ? `\n  line-height=\"${args.lineHeight}\"` : ''}>\n  ${label}\n</cura-paragraph>\n`;\n  return `${styles}${block}${block}${block}`;\n}\n\nexport default {\n  title: 'Componentes/Text/Paragraph',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    return renderCuraParagraph(label, args);\n  },\n  argTypes: {\n    label: {\n      control: 'text',\n      description: 'Define o texto do componente diretamente. São válidas todas as tags HTML pertinentes ao `<p>`.',\n      name: 'Content'\n    },\n    size: {\n      control: { type: 'select' },\n      options: ['xsmall', 'small', 'medium', 'large'],\n      description: 'Define o tamanho do bloco de texto considerando `caption` (depreciado, use xsmall), `xsmall`, `small`, `regular` (depreciado, use medium), `medium` e `large` como valores válidos.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'medium'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'Cor de texto padrão do tema'}\n      }\n    },\n    spotColor: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor dos itens de interação dentro do bloco de texto como as tags `<a>`. Aceita qualquer valor do esquema de cores do design system.',\n      name: 'spot-color',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'accent-dark'}\n      }\n    },\n    marginBlock: {\n      control: 'text',\n      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',\n      name: 'margin-block',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    lineHeight: {\n      control: 'text',\n      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',\n      name: 'line-height',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '140%'}\n      }\n    },\n    cssMarginBlock: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `margin-block` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--margin-block',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '1.25em'}\n      }\n    },\n    cssLineHeight: {\n      control: 'text',\n      description: 'Permite a definição da propriedade `line-height` por folhas de estilo. É necessário o uso do `!important` conforme o exemplo de código.',\n      name: '--line-height',\n      table: {\n        category: 'CSS Properties',\n        defaultValue: { summary: '140%'}\n      }\n    },\n  },\n};\n\nexport const Paragraph = {\n  args: {\n    label: 'Proin quis <b>turpis</b> et <strong>turpis</strong> efficitur dictum. Suspendisse <i>egestas</i> posuere libero. Sed non <em>dapibus urna</em>. Sed <a href=\"https://www.rededorsaoluiz.com.br\" target=\"_blank\">luctus tincidunt nibh</a>, eu tincidunt justo. Curabitur at ullamcorper mauris, feugiat fermentum nulla. <u>Quisque sed nibh in odio blandit mollis at quis dolor</u>. Sed urna lacus, ultricies ac vulputate at, luctus eu ex. Duis at elit facilisis, iaculis orci sed, suscipit nisl. Phasellus semper lorem sed tincidunt semper. Morbi lobortis eu mi sed ultricies. Sed consequat id orci at iaculis.',\n    size: 'medium',\n    color: '',\n    spotColor: '',\n    marginBlock: '',\n    lineHeight: '',\n    cssMarginBlock: '',\n    cssLineHeight: ''\n  },\n};\n"]}

package/dist/components/cura-alert.js

@@ -54,7 +54,7 @@ const CuraAlert$1 = /*@__PURE__*/ proxyCustomElement(class CuraAlert extends HTM
         return this.icon ? this.icon : iconMapping[this.type];
     }
     render() {
-        return (h(Host, { key: '874149c03df4a705e618cfdbfe98294cd1e3ef13' }, h("div", { key: 'ded92424295ffe7f082dc0152689f0bf6d862466', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: 'cac5d460fa77bb519d0cbdc2a651e52e024f2b80', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '9b7770169053ca34d9a96ef44f6c110d36ee1f87', class: "content" }, h("cura-label", { key: 'b131071ad2e29b165ce767e2c3ef68bb5464a57c', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: 'aa027c5e80769cf3a1446a9f629493eae2bd7263', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: '3ca047a4f9a25c8f060bcd5e14adf0a1c66c7a25' })), h("div", { key: '0c2e0f5e6b88b780236aecedbc9b68413600e6be', class: "actions" }, h("slot", { key: '3866c4c4629f22fa76c034c5ba0bf9ef8f8bdf8b', name: "actions" }))), this.closeable ?
+        return (h(Host, { key: 'b7b63129f2d0c1d2f8b451a7f795befc9e085238' }, h("div", { key: 'b8450a11d65f0bbb3c9f688fccbb38efc7bf223c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '9a5dc4295f7c40362a86f77fe805127590812f15', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6bbe4799d3f73df0cda2e94da2d71cdc1bfc855a', class: "content" }, h("cura-label", { key: '8b761ec2804bb5633893af8ed91f5de268bbf029', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '4e7e7726758c26f1f397e8efc84d5eba1c88b428', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f589c6fb9016b43b3557492a3ef1b4ede4a807a6' })), h("div", { key: 'b212e9255855b96d5c069dd7544675386f00b372', class: "actions" }, h("slot", { key: '174dfcc7dfc4ff3e29185843e010dddae75463f5', name: "actions" }))), this.closeable ?
             (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
             : '')));
     }

package/dist/components/cura-avatar.js

@@ -52,7 +52,7 @@ const CuraAvatar$1 = /*@__PURE__*/ proxyCustomElement(class CuraAvatar extends H
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: '170c3fa2c218520d9689be5c1da0be4757dd1064', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '10b179acec89411c17d44125310658a9fc65a647', class: this.getClasses(), style: this.styles }, h("img", { key: 'cbbfccaab84e08bb08fa37f08c46b625121d339f', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (h(Host, { key: 'fc8fbe9cdcab86398c83a55d006badb870ee959a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '6a107805cd770b98e74f7b0475c9896f59e51832', class: this.getClasses(), style: this.styles }, h("img", { key: '4bd7991bd32b0aa6f87d0725303960b0b4c3b0b9', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     get host() { return this; }
     static get watchers() { return {

package/dist/components/cura-badge-distance.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface CuraBadgeDistance extends Components.CuraBadgeDistance, HTMLElement {}
+export const CuraBadgeDistance: {
+    prototype: CuraBadgeDistance;
+    new (): CuraBadgeDistance;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/cura-badge-distance.js

@@ -0,0 +1,73 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './cura-label2.js';
+
+const curaBadgeDistanceCss = ":host .container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:calc(var(--base-spacing) * 8px);height:calc(var(--base-spacing) * 8px);border-radius:calc(var(--base-spacing) * 1px);background:var(--neutral-pale)}";
+const CuraBadgeDistanceStyle0 = curaBadgeDistanceCss;
+
+const CuraDistance = /*@__PURE__*/ proxyCustomElement(class CuraDistance extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.isThousandRounded = false;
+        this.theme = window.CuraAPI.theme;
+        this.distance = 0;
+        this.label = 'km';
+        this.styles = {};
+        this.displayDistance = 0;
+    }
+    formatDistance() {
+        const roundedDistance = this.distance % 1 !== 0 ? parseFloat(this.distance.toFixed(1)) : this.distance;
+        this.isThousandRounded = Math.abs(roundedDistance) >= 1000;
+        this.displayDistance = this.isThousandRounded ? parseFloat((roundedDistance / 1000).toFixed(1)) : roundedDistance;
+    }
+    connectedCallback() {
+        this.setCssProperties();
+        this.formatDistance();
+    }
+    render() {
+        return (h(Host, { key: 'afc9605f43777e15c026ee00b0ca3fc18b648489' }, h("div", { key: '5e970213baad148605f9fcd0e0f0307f32a99375', class: "container", style: this.styles }, h("cura-label", { key: 'd56a580850734dedf9d7e72c0dce45d05be26119', size: 'xsmall', weight: 'bold', color: 'neutral-black' }, this.displayDistance, this.isThousandRounded ? 'K' : ''), h("cura-label", { key: 'e0ec3d1a6919b3931d807f75054b5d861e6015b3', size: 'xsmall', weight: 'bold', color: 'neutral-dark' }, this.label))));
+    }
+    setCssProperties() {
+        this.styles = {
+            '--neutral-pale': this.theme.colors.getColor(`neutral-pale`),
+            '--base-spacing': this.theme.spacing.getSpacing()
+        };
+    }
+    static get watchers() { return {
+        "distance": ["formatDistance"]
+    }; }
+    static get style() { return CuraBadgeDistanceStyle0; }
+}, [1, "cura-badge-distance", {
+        "distance": [2],
+        "label": [513],
+        "styles": [32],
+        "displayDistance": [32]
+    }, undefined, {
+        "distance": ["formatDistance"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-badge-distance", "cura-label"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-badge-distance":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraDistance);
+            }
+            break;
+        case "cura-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const CuraBadgeDistance = CuraDistance;
+const defineCustomElement = defineCustomElement$1;
+
+export { CuraBadgeDistance, defineCustomElement };
+
+//# sourceMappingURL=cura-badge-distance.js.map

package/dist/components/cura-badge-distance.js.map

@@ -0,0 +1 @@
+{"file":"cura-badge-distance.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,0PAA0P,CAAC;AACxR,gCAAe,oBAAoB;;MCMtB,YAAY;;;;;QAMvB,sBAAiB,GAAG,KAAK,CAAC;QAE1B,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;wBANV,CAAC;qBACa,IAAI;sBACnB,EAAE;+BACO,CAAC;;IAM5B,cAAc;QACZ,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,GAAG,CAAC,KAAK,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,QAAQ,CAAC;QACvG,IAAI,CAAC,iBAAiB,GAAG,IAAI,CAAC,GAAG,CAAC,eAAe,CAAC,IAAI,IAAI,CAAC;QAC3D,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,iBAAiB,GAAG,UAAU,CAAC,CAAC,eAAe,GAAG,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,GAAG,eAAe,CAAC;KACnH;IAGD,iBAAiB;QACf,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACxB,IAAI,CAAC,cAAc,EAAE,CAAC;KACvB;IAED,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IACvC,mEAAY,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,eAAe,IAC1D,IAAI,CAAC,eAAe,EAAE,IAAI,CAAC,iBAAiB,GAAG,GAAG,GAAG,EAAE,CAC7C,EACb,mEAAY,IAAI,EAAC,QAAQ,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,cAAc,IACzD,IAAI,CAAC,KAAK,CACA,CACT,CACD,EACP;KACH;IAED,gBAAgB;QACd,IAAI,CAAC,MAAM,GAAG;YACZ,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,cAAc,CAAC;YAC5D,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;SAClD,CAAA;KACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/badges/cura-badge-distance/cura-badge-distance.scss?tag=cura-badge-distance&encapsulation=shadow","src/components/badges/cura-badge-distance/cura-badge-distance.tsx"],"sourcesContent":["@import \"../../../scss/mixins/spacing.scss\";\n\n:host {\n  .container{\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    width: calc(#{$base-spacing} * 8px);\n    height: calc(#{$base-spacing} * 8px);\n    border-radius: calc(#{$base-spacing} * 1px);\n    background: var(--neutral-pale);\n  }\n}\n","import { Component, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-badge-distance',\n  styleUrl: 'cura-badge-distance.scss',\n  shadow: true,\n})\nexport class CuraDistance {\n\n  @Prop() distance = 0;\n  @Prop({ reflect: true }) label = 'km';\n  @State() styles = {};\n  @State() displayDistance = 0;\n  isThousandRounded = false;\n\n  theme = window.CuraAPI.theme;\n\n  @Watch('distance')\n  formatDistance() {\n    const roundedDistance = this.distance % 1 !== 0 ? parseFloat(this.distance.toFixed(1)) : this.distance;    \n    this.isThousandRounded = Math.abs(roundedDistance) >= 1000;\n    this.displayDistance = this.isThousandRounded ? parseFloat((roundedDistance / 1000).toFixed(1)) : roundedDistance;\n  }\n\n\n  connectedCallback(){\n    this.setCssProperties();\n    this.formatDistance();    \n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"container\" style={this.styles}>\n          <cura-label size='xsmall' weight='bold' color='neutral-black'>\n            {this.displayDistance}{this.isThousandRounded ? 'K' : ''}\n          </cura-label>\n          <cura-label size='xsmall' weight='bold' color='neutral-dark'>\n            {this.label}\n          </cura-label>\n        </div>\n      </Host>\n    );\n  }\n\n  setCssProperties() {\n    this.styles = {\n      '--neutral-pale': this.theme.colors.getColor(`neutral-pale`),\n      '--base-spacing': this.theme.spacing.getSpacing()\n    }\n  }\n\n}\n"],"version":3}

package/dist/components/cura-button-outline.js

@@ -1,9 +1,10 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { l as labelSizes } from './cura-button.definitions.js';
 import { d as defineCustomElement$4 } from './cura-icon2.js';
 import { d as defineCustomElement$3 } from './cura-label2.js';
 import { d as defineCustomElement$2 } from './cura-loader-circle2.js';
 
-const curaButtonOutlineCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;border:2px solid var(--color-dark-neutral-purewhite);box-sizing:border-box}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{background-color:var(--color-lighter-color-darker)}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{background-color:var(--color-light-color-darker)}:host button.large,:host a.large{padding:calc(var(--base-spacing) * 6.12px) calc(var(--base-spacing) * 9.96px);min-height:calc(var(--base-spacing) * 13px);min-width:calc(var(--base-spacing) * 33.7px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3.44px) calc(var(--base-spacing) * 9.96px);min-height:calc(var(--base-spacing) * 11px);min-width:calc(var(--base-spacing) * 29.95px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 3.24px) calc(var(--base-spacing) * 7.44px);min-height:calc(var(--base-spacing) * 8px);min-width:calc(var(--base-spacing) * 21.67px)}:host button:not(.isLoading).large,:host a:not(.isLoading).large{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(.isLoading).medium,:host a:not(.isLoading).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:not(.isLoading).small,:host a:not(.isLoading).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:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button cura-label,:host a cura-label{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\")}:host button.medium cura-label,:host a.medium cura-label{font-size:1.14em}:host button.small cura-label,:host a.small cura-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-dark)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3.5px)}:host button.icon-only cura-label,:host a.icon-only cura-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 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}:host button.isLoading cura-label,:host a.isLoading cura-label{display:none}";
+const curaButtonOutlineCss = ":host{--border-radius:4px;display:inline-block;vertical-align:middle;position:relative}:host button,:host a{outline:none;box-shadow:none;box-sizing:border-box;display:flex;width:100%;align-items:center;justify-content:center;text-decoration:none !important;font-size:var(--font-size);cursor:pointer;transition:background-color 0.07s linear, box-shadow 0.07s linear, border-color 0.07s linear;border-radius:var(--border-radius);position:relative;background-color:transparent;box-sizing:border-box;border:none}:host button:focus,:host a:focus{outline:2px solid #6EA8FF}:host button::before,:host a::before{content:\"\";width:100%;height:100%;position:absolute;left:0px;top:0px;box-sizing:border-box;border:2px solid var(--color-dark-neutral-purewhite);border-radius:var(--border-radius)}:host button:not(.disabled):not(.isLoading):hover,:host a:not(.disabled):not(.isLoading):hover{background-color:var(--color-lighter-color-darker)}:host button:not(.disabled):not(.inverted):not(.isLoading):active,:host a:not(.disabled):not(.inverted):not(.isLoading):active{background-color:var(--color-light-color-darker)}:host button.large,:host a.large{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 4px);min-height:calc(var(--base-spacing) * 11px)}:host button.medium,:host a.medium{padding:calc(var(--base-spacing) * 3px);min-height:calc(var(--base-spacing) * 10px)}:host button.small,:host a.small{padding:calc(var(--base-spacing) * 2px);min-height:calc(var(--base-spacing) * 8px)}:host button .button-container,:host a .button-container{display:flex;align-items:center;opacity:1;transition:opacity 0.2s linear;position:relative}:host button.icon-right .button-container,:host a.icon-right .button-container{flex-direction:row-reverse}:host button.justify .button-container,:host a.justify .button-container{width:100%}:host button cura-label,:host a cura-label{flex:1;text-align:var(--text-align, \"left\")}: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 button.small.icon-left cura-icon,:host a.medium.icon-left cura-icon,:host a.small.icon-left cura-icon{margin-right:calc(var(--base-spacing) * 2px)}:host button.medium.icon-right cura-icon,:host button.small.icon-right cura-icon,:host a.medium.icon-right cura-icon,:host a.small.icon-right cura-icon{margin-left:calc(var(--base-spacing) * 2px)}:host button.disabled,:host a.disabled{cursor:not-allowed}:host button.disabled::before,:host a.disabled::before{border-color:var(--neutral-dark)}:host button.icon-only,:host a.icon-only{padding:calc(var(--base-spacing) * 3px) calc(var(--base-spacing) * 3px)}:host button.icon-only cura-label,:host a.icon-only cura-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) * 3px)}:host button.icon-only.small,:host a.icon-only.small{padding:calc(var(--base-spacing) * 2px)}: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}:host button.isLoading cura-loader-circle,:host a.isLoading cura-loader-circle{display:block}";
 const CuraButtonOutlineStyle0 = curaButtonOutlineCss;
 
 const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOutline extends HTMLElement {
@@ -26,6 +27,7 @@ const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOut
         this.background = 'light';
         this.fontColor = 'dark';
         this.textAlign = 'left';
+        this.justify = false;
         this.styles = {};
         this.hovered = false;
     }
@@ -49,6 +51,7 @@ const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOut
         classes[`icon-only`] = this.iconOnly;
         classes['disabled'] = this.disabled;
         classes['isLoading'] = this.isLoading;
+        classes['justify'] = this.justify;
         return classes;
     }
     setColors() {
@@ -62,9 +65,9 @@ const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOut
         this.styles = Object.assign({}, this.styles);
     }
     getIcon() {
-        if (!this.iconName || this.isLoading)
+        if (!this.iconName)
             return '';
-        const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
+        const iconSize = this.size === 'large' ? 20 : 16;
         return h("cura-icon", { name: this.iconName, iconset: this.iconset, size: iconSize, color: this.getSymbolColor() });
     }
     handleMouseEnter() {
@@ -78,8 +81,7 @@ const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOut
     getSymbolColor() {
         if (this.disabled)
             return 'neutral-dark';
-        if (this.isLoading && this.fontColor === 'light' ? 'neutral-white' : `${this.color}-darker`)
-            return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;
+        return this.fontColor === 'light' ? 'neutral-purewhite' : `${this.color}-darker`;
     }
     handleClick(e) {
         if (this.disabled || this.isLoading) {
@@ -94,7 +96,9 @@ const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOut
         }
     }
     render() {
-        return (h(Host, { key: '8f34ce5bf2dd76b55df5a88fe4537996ae13659e' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, 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), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), tabIndex: 0, type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { lineHeight: '0%', color: this.getSymbolColor() }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: this.getSymbolColor() })))));
+        const symbolColor = this.getSymbolColor();
+        const labelSize = labelSizes[this.size] || labelSizes["default"];
+        return (h(Host, { key: '69e82dd1a26ea932f27f11ad5da295810ed3db1e' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '118%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get formAssociated() { return true; }
     static get watchers() { return {
@@ -118,6 +122,7 @@ const CuraButtonOutline$1 = /*@__PURE__*/ proxyCustomElement(class CuraButtonOut
         "background": [1],
         "fontColor": [1, "font-color"],
         "textAlign": [513, "text-align"],
+        "justify": [516],
         "styles": [32],
         "hovered": [32]
     }, undefined, {