@rededor/cura 0.5.4 → 1.0.0-alpha.0

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

@@ -1,177 +1,177 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class CuraDisplay {
-  constructor() {
-    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()));
-  }
-  static get is() { return "cura-display"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-display.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-display.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "level": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "1 | 2 | 3 | 4 | 5 | 6",
-          "resolved": "1 | 2 | 3 | 4 | 5 | 6",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\nValues: 1(default) to 6."
-        },
-        "attribute": "level",
-        "reflect": true,
-        "defaultValue": "1"
-      },
-      "spotColor": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "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,
-        "defaultValue": "'accent-dark'"
-      },
-      "color": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
-        },
-        "attribute": "color",
-        "reflect": false
-      },
-      "marginBlock": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "CSS margin-block property values.\nDefault to 1.25em"
-        },
-        "attribute": "margin-block",
-        "reflect": true,
-        "defaultValue": "'1.25em'"
-      },
-      "lineHeight": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "CSS line-height property values.\nDefault to 140%"
-        },
-        "attribute": "line-height",
-        "reflect": true,
-        "defaultValue": "'120%'"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "styles": {}
-    };
-  }
-  static get elementRef() { return "host"; }
-  static get watchers() {
-    return [{
-        "propName": "color",
-        "methodName": "handleChangeColor"
-      }, {
-        "propName": "spotColor",
-        "methodName": "handleChangeColor"
-      }];
-  }
+    constructor() {
+        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, { key: 'd81f995e2da8e19498b2839319033cc5d93db1ea', style: this.hostCSSProperties() }, this.getHeadingTag()));
+    }
+    static get is() { return "cura-display"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-display.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-display.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4 | 5 | 6",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level for semantics. Will render the related HTML tag <h1>, <h2>, ...\nValues: 1(default) to 6."
+                },
+                "attribute": "level",
+                "reflect": true,
+                "defaultValue": "1"
+            },
+            "spotColor": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "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,
+                "defaultValue": "'accent-dark'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Text color.\nValues: Color from design system scheme. Default to the font color from the theme."
+                },
+                "attribute": "color",
+                "reflect": false
+            },
+            "marginBlock": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS margin-block property values.\nDefault to 1.25em"
+                },
+                "attribute": "margin-block",
+                "reflect": true,
+                "defaultValue": "'1.25em'"
+            },
+            "lineHeight": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "CSS line-height property values.\nDefault to 140%"
+                },
+                "attribute": "line-height",
+                "reflect": true,
+                "defaultValue": "'120%'"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "styles": {}
+        };
+    }
+    static get elementRef() { return "host"; }
+    static get watchers() {
+        return [{
+                "propName": "color",
+                "methodName": "handleChangeColor"
+            }, {
+                "propName": "spotColor",
+                "methodName": "handleChangeColor"
+            }];
+    }
 }
 //# sourceMappingURL=cura-display.js.map

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  * 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"]}

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

@@ -1,19 +1,19 @@
 var __rest = (this && this.__rest) || function (s, e) {
-  var t = {};
-  for (var p in s)
-    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-      t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function")
-    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-        t[p[i]] = s[p[i]];
-    }
-  return t;
+    var t = {};
+    for (var p in s)
+        if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+            t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
 };
 import { getColorsWithDepths } from "../../../utils/utils";
 const colors = getColorsWithDepths();
 const renderCuraDisplay = (label, args) => {
-  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
+    const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
   cura-display { ${args.cssMarginBlock ? `
     --margin-block: ${args.cssMarginBlock} !important;` : ``}${args.cssLineHeight ? `
     --line-height: ${args.cssLineHeight} !important;` : ``}
@@ -21,7 +21,7 @@ const renderCuraDisplay = (label, args) => {
 </style>
 
 ` : '';
-  const block = `<cura-display${args.level ? `
+    const block = `<cura-display${args.level ? `
   level="${args.level}"` : ''}${args.color ? `
   color="${args.color}"` : ''}${args.spotColor ? `
   spot-color="${args.spotColor}"` : ''}${args.marginBlock ? `
@@ -30,96 +30,96 @@ const renderCuraDisplay = (label, args) => {
   ${label}
 </cura-display>
 `;
-  return `${styles}${block}${block}${block}`;
+    return `${styles}${block}${block}${block}`;
 };
 export default {
-  title: 'Componentes/Text/Display',
-  tags: ['autodocs'],
-  render: (_a) => {
-    var { label } = _a, args = __rest(_a, ["label"]);
-    return renderCuraDisplay(label, args);
-  },
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Define o texto do componente diretamente.',
-      name: 'Content'
+    title: 'Componentes/Text/Display',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var { label } = _a, args = __rest(_a, ["label"]);
+        return renderCuraDisplay(label, args);
     },
-    color: {
-      control: { type: 'select' },
-      options: ['', ...colors],
-      description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'Cor de texto padrão do tema' }
-      }
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Define o texto do componente diretamente.',
+            name: 'Content'
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['', ...colors],
+            description: 'Define a cor de texto do bloco. Aceita qualquer valor do esquema de cores do design system.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'Cor de texto padrão do tema' }
+            }
+        },
+        spotColor: {
+            control: { type: 'select' },
+            options: ['', ...colors],
+            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.',
+            name: 'spot-color',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'accent-dark' }
+            }
+        },
+        level: {
+            control: { type: 'number', min: 1, max: 6, step: 1 },
+            description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc. A semântica é independente do estilo aplicado.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 1 }
+            }
+        },
+        marginBlock: {
+            control: 'text',
+            description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',
+            name: 'margin-block',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '1.25em' }
+            }
+        },
+        lineHeight: {
+            control: 'text',
+            description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',
+            name: 'line-height',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: '130%' }
+            }
+        },
+        cssMarginBlock: {
+            control: 'text',
+            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.',
+            name: '--margin-block',
+            table: {
+                category: 'CSS Properties',
+                defaultValue: { summary: '1.25em' }
+            }
+        },
+        cssLineHeight: {
+            control: 'text',
+            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.',
+            name: '--line-height',
+            table: {
+                category: 'CSS Properties',
+                defaultValue: { summary: '130%' }
+            }
+        },
     },
-    spotColor: {
-      control: { type: 'select' },
-      options: ['', ...colors],
-      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.',
-      name: 'spot-color',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'accent-dark' }
-      }
-    },
-    level: {
-      control: { type: 'number', min: 1, max: 6, step: 1 },
-      description: 'Define a tag semântica do título. Ex. h1, h2, h3, etc. A semântica é independente do estilo aplicado.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 1 }
-      }
-    },
-    marginBlock: {
-      control: 'text',
-      description: 'Define o tamanho do espaçamento superior e inferior do bloco. Valores válidos para a propriedade CSS `margin-block`.',
-      name: 'margin-block',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: '1.25em' }
-      }
-    },
-    lineHeight: {
-      control: 'text',
-      description: 'Define a altura de linha base a ser considerada pelo componente em sua responsividade. Valores válidos para a propriedade CSS `line-height`.',
-      name: 'line-height',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: '130%' }
-      }
-    },
-    cssMarginBlock: {
-      control: 'text',
-      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.',
-      name: '--margin-block',
-      table: {
-        category: 'CSS Properties',
-        defaultValue: { summary: '1.25em' }
-      }
-    },
-    cssLineHeight: {
-      control: 'text',
-      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.',
-      name: '--line-height',
-      table: {
-        category: 'CSS Properties',
-        defaultValue: { summary: '130%' }
-      }
-    },
-  },
 };
 export const Display = {
-  args: {
-    label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
-    level: '',
-    color: '',
-    spotColor: '',
-    marginBlock: '',
-    lineHeight: '',
-    cssMarginBlock: '',
-    cssLineHeight: ''
-  },
+    args: {
+        label: 'Dolor sit <a href="https://www.rededorsaoluiz.com.br" target="_blank">amet</a>, consectetur adipiscing elit.',
+        level: '',
+        color: '',
+        spotColor: '',
+        marginBlock: '',
+        lineHeight: '',
+        cssMarginBlock: '',
+        cssLineHeight: ''
+    },
 };
 //# sourceMappingURL=cura-display.stories.js.map