@rededor/cura 0.5.4 → 1.0.0-alpha.0

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

@@ -1 +1 @@
-{"version":3,"file":"cura-paragraph.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,aAAa;;IAgDxB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;gBA1CkE,QAAQ;qBAMpE,aAAa;;uBAiBX,QAAQ;sBAMT,MAAM;kBAYxB,EAAE;;EA1BpB,iBAAiB;IACf,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EA2BD,iBAAiB;IACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IACzB,IAAI,CAAC,SAAS,EAAE,CAAC;EACnB,CAAC;EAED,YAAY;IACV,MAAM,SAAS,GAAG,EAAE,CAAC;IACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAC1C,OAAO,SAAS,CAAC;EACnB,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;IAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;IAC/C,IAAI,CAAC,MAAM,GAAG;MACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;MACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;MAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;MAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;KACxC,CAAC;EACJ,CAAC;EAED,SAAS;IACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;MAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;MACxC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;IAChC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;EACJ,CAAC;EAED,iBAAiB;IACf,OAAO;MACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;MAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;MACrC,eAAe,EAAE,IAAI,CAAC,UAAU;KACjC,CAAC;EACJ,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;MACnC,SAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;QAC/C,eAAa,CACX,CACC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\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 = '140%';\n\n  /**\n   * Host element <cura-paragraph>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  setsizeClass() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': this.theme.fonts.getFamily('body'),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <p style={this.styles} class={this.setsizeClass()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-paragraph.js","sourceRoot":"","sources":["../../../../src/components/text/cura-paragraph/cura-paragraph.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAOhF,MAAM,OAAO,aAAa;;QAgDxB,UAAK,GAAG,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC;oBA1CkE,QAAQ;yBAMpE,aAAa;;2BAiBX,QAAQ;0BAMT,MAAM;sBAYxB,EAAE;;IA1BpB,iBAAiB;QACf,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IA2BD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;QACzB,IAAI,CAAC,SAAS,EAAE,CAAC;IACnB,CAAC;IAED,YAAY;QACV,MAAM,SAAS,GAAG,EAAE,CAAC;QACrB,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QAC1C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,EAAE,CAAC;QAC7C,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAE,CAAC;QAC/C,IAAI,CAAC,MAAM,GAAG;YACZ,eAAe,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,SAAS,CAAC,MAAM,CAAC;YACnD,uBAAuB,EAAE,IAAI,CAAC,OAAO,CAAC,OAAO;YAC7C,sBAAsB,EAAE,IAAI,CAAC,OAAO,CAAC,MAAM;YAC3C,oBAAoB,EAAE,IAAI,CAAC,OAAO,CAAC,IAAI;SACxC,CAAC;IACJ,CAAC;IAED,SAAS;QACP,MAAM,SAAS,GAAG,IAAI,CAAC,KAAK;YAC1B,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC;YACxC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC;QAChC,IAAI,CAAC,MAAM,mCACN,IAAI,CAAC,MAAM,KACd,cAAc,EAAE,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,gBAAgB,CAAC,EACzE,cAAc,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,SAAS,EAAE,CAAC,GAChE,CAAC;IACJ,CAAC;IAED,iBAAiB;QACf,OAAO;YACL,gBAAgB,EAAE,IAAI,CAAC,WAAW;YAClC,kBAAkB,EAAE,IAAI,CAAC,YAAY;YACrC,eAAe,EAAE,IAAI,CAAC,UAAU;SACjC,CAAC;IACJ,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,iBAAiB,EAAE;YACnC,0DAAG,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE;gBAC/C,8DAAa,CACX,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, Prop, h, Element, Watch, State } from '@stencil/core';\n\n@Component({\n  tag: 'cura-paragraph',\n  styleUrl: 'cura-paragraph.scss',\n  shadow: true,\n})\nexport class CuraParagraph {\n\n  /**\n   * Set size of body text.\n   * Values: regular (deprecated), medium (default) | large | small | caption (deprecated) | xsmall.\n   */\n  @Prop({reflect: true}) size: 'regular' | 'medium' | 'large' | 'small' | 'caption' | 'xsmall' = 'medium';\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 = '140%';\n\n  /**\n   * Host element <cura-paragraph>\n   */\n  @Element() host: HTMLElement;\n\n  /**\n   * Internal Props\n   */\n  weights: any;\n  fontSizeBase: string;\n  @State() styles = {};\n  theme = window.CuraAPI.theme;\n\n  connectedCallback() {\n    this.setFontProperties();\n    this.setColors();\n  }\n\n  setsizeClass() {\n    const sizeclass = {};\n    sizeclass[this.size.toLowerCase()] = true;\n    return sizeclass;\n  }\n\n  setFontProperties() {\n    this.weights = this.theme.fonts.getWeights();\n    this.fontSizeBase = this.theme.fonts.getSize();\n    this.styles = {\n      '--font-family': this.theme.fonts.getFamily('body'),\n      '--font-weight-regular': this.weights.regular,\n      '--font-weight-medium': this.weights.medium,\n      '--font-weight-bold': this.weights.bold\n    };\n  }\n\n  setColors() {\n    const fontColor = this.color\n      ? this.theme.colors.getColor(this.color)\n      : this.theme.fonts.getColor();\n    this.styles = {\n      ...this.styles,\n      '--color-body': fontColor || this.theme.colors.getColor('neutral-darker'),\n      '--color-link': this.theme.colors.getColor(`${this.spotColor}`)\n    };\n  }\n\n  hostCSSProperties() {\n    return {\n      '--margin-block': this.marginBlock,\n      '--font-size-base': this.fontSizeBase,\n      '--line-height': this.lineHeight\n    };\n  }\n\n  render() {\n    return (\n      <Host style={this.hostCSSProperties()}>\n        <p style={this.styles} class={this.setsizeClass()}>\n          <slot></slot>\n        </p>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/text/cura-paragraph/cura-paragraph.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 renderCuraParagraph = (label, args) => {
-  const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
+    const styles = args.cssMarginBlock || args.cssLineHeight ? `<style>
   cura-paragraph { ${args.cssMarginBlock ? `
     --margin-block: ${args.cssMarginBlock} !important;` : ``}${args.cssLineHeight ? `
     --line-height: ${args.cssLineHeight} !important;` : ``}
@@ -21,7 +21,7 @@ const renderCuraParagraph = (label, args) => {
 </style>
 
 ` : '';
-  const block = `<cura-paragraph${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `
+    const block = `<cura-paragraph${args.size && (args.size !== 'medium' && args.size !== 'regular') ? `
   size="${args.size}"` : ``}${args.color ? `
   color="${args.color}"` : ''}${args.spotColor ? `
   spot-color="${args.spotColor}"` : ''}${args.marginBlock ? `
@@ -30,97 +30,97 @@ const renderCuraParagraph = (label, args) => {
   ${label}
 </cura-paragraph>
 `;
-  return `${styles}${block}${block}${block}`;
+    return `${styles}${block}${block}${block}`;
 };
 export default {
-  title: 'Componentes/Text/Paragraph',
-  tags: ['autodocs'],
-  render: (_a) => {
-    var { label } = _a, args = __rest(_a, ["label"]);
-    return renderCuraParagraph(label, args);
-  },
-  argTypes: {
-    label: {
-      control: 'text',
-      description: 'Define o texto do componente diretamente. São válidas todas as tags HTML pertinentes ao `<p>`.',
-      name: 'Content'
+    title: 'Componentes/Text/Paragraph',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var { label } = _a, args = __rest(_a, ["label"]);
+        return renderCuraParagraph(label, args);
     },
-    size: {
-      control: { type: 'select' },
-      options: ['xsmall', 'small', 'medium', 'large'],
-      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.',
-      table: {
-        category: 'Properties',
-        defaultValue: { summary: 'medium' }
-      }
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Define o texto do componente diretamente. São válidas todas as tags HTML pertinentes ao `<p>`.',
+            name: 'Content'
+        },
+        size: {
+            control: { type: 'select' },
+            options: ['xsmall', 'small', 'medium', 'large'],
+            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.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'medium' }
+            }
+        },
+        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' }
+            }
+        },
+        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: '140%' }
+            }
+        },
+        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: '140%' }
+            }
+        },
     },
-    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' }
-      }
-    },
-    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: '140%' }
-      }
-    },
-    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: '140%' }
-      }
-    },
-  },
 };
 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.',
-    size: 'medium',
-    color: '',
-    spotColor: '',
-    marginBlock: '',
-    lineHeight: '',
-    cssMarginBlock: '',
-    cssLineHeight: ''
-  },
+    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.',
+        size: 'medium',
+        color: '',
+        spotColor: '',
+        marginBlock: '',
+        lineHeight: '',
+        cssMarginBlock: '',
+        cssLineHeight: ''
+    },
 };
 //# sourceMappingURL=cura-paragraph.stories.js.map

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

package/dist/collection/index.js

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

package/dist/collection/index.js.map

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

package/dist/collection/rededor-cura-start.js

@@ -1,10 +1,10 @@
-import CuraAPI from './api/cura-api';
+import CuraAPI from "./api/cura-api";
 export default function () {
-  const config = window.CuraInit;
-  window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();
-  const api = window.CuraAPI;
-  window.dispatchEvent(new CustomEvent("CuraAPIReady", { detail: { api } }));
-  if (config && typeof config.onReady === 'function')
-    config.onReady(api);
+    const config = window.CuraInit;
+    window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();
+    const api = window.CuraAPI;
+    window.dispatchEvent(new CustomEvent("CuraAPIReady", { detail: { api } }));
+    if (config && typeof config.onReady === 'function')
+        config.onReady(api);
 }
 //# sourceMappingURL=rededor-cura-start.js.map

package/dist/collection/rededor-cura-start.js.map

@@ -1 +1 @@
-{"version":3,"file":"rededor-cura-start.js","sourceRoot":"","sources":["../src/rededor-cura-start.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAYrC,MAAM,CAAC,OAAO;EACZ,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;EAC/B,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC;EAC9D,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;EAC3B,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC,CAAC;EACzE,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU;IAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAC1E,CAAC","sourcesContent":["import CuraAPI from './api/cura-api';\nimport { CuraConfig } from './api/cura-api.type';\n// import { setAssetPath } from '@stencil/core';\n\n// setAssetPath(import.meta.url);\ndeclare global {\n  interface Window {\n    CuraAPI?: CuraAPI,\n    CuraInit?: CuraConfig\n  }\n}\n\nexport default function() {\n  const config = window.CuraInit;\n  window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();\n  const api = window.CuraAPI;\n  window.dispatchEvent(new CustomEvent(\"CuraAPIReady\", { detail: {api} }));\n  if (config && typeof config.onReady === 'function') config.onReady(api);\n}\n"]}
+{"version":3,"file":"rededor-cura-start.js","sourceRoot":"","sources":["../src/rededor-cura-start.ts"],"names":[],"mappings":"AAAA,OAAO,OAAO,MAAM,gBAAgB,CAAC;AAYrC,MAAM,CAAC,OAAO;IACZ,MAAM,MAAM,GAAG,MAAM,CAAC,QAAQ,CAAC;IAC/B,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC,CAAC,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,IAAI,OAAO,EAAE,CAAC;IAC9D,MAAM,GAAG,GAAG,MAAM,CAAC,OAAO,CAAC;IAC3B,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,cAAc,EAAE,EAAE,MAAM,EAAE,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC,CAAC;IACzE,IAAI,MAAM,IAAI,OAAO,MAAM,CAAC,OAAO,KAAK,UAAU;QAAE,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC;AAC1E,CAAC","sourcesContent":["import CuraAPI from './api/cura-api';\nimport { CuraConfig } from './api/cura-api.type';\n// import { setAssetPath } from '@stencil/core';\n\n// setAssetPath(import.meta.url);\ndeclare global {\n  interface Window {\n    CuraAPI?: CuraAPI,\n    CuraInit?: CuraConfig\n  }\n}\n\nexport default function() {\n  const config = window.CuraInit;\n  window.CuraAPI = config ? new CuraAPI(config) : new CuraAPI();\n  const api = window.CuraAPI;\n  window.dispatchEvent(new CustomEvent(\"CuraAPIReady\", { detail: {api} }));\n  if (config && typeof config.onReady === 'function') config.onReady(api);\n}\n"]}

package/dist/collection/utils/utils.js

@@ -1,16 +1,16 @@
 export function format(first, middle, last) {
-  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
 export function getColorsWithDepths() {
-  const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'];
-  const colorDepths = ['lighter', 'light', 'base', 'dark', 'darker'];
-  const neutralDepths = ['purewhite', 'white', 'pale', 'lighter', 'light', 'base', 'medium', 'dark', 'darker', 'black'];
-  const colorsWithDepths = colors.map(color => {
-    const depths = color === 'neutral'
-      ? neutralDepths.map(depth => depth === 'base' ? `${color}` : `${color}-${depth}`)
-      : colorDepths.map(depth => depth === 'base' ? `${color}` : `${color}-${depth}`);
-    return depths;
-  }).flat(1);
-  return colorsWithDepths;
+    const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'];
+    const colorDepths = ['lighter', 'light', 'base', 'dark', 'darker'];
+    const neutralDepths = ['purewhite', 'white', 'pale', 'lighter', 'light', 'base', 'medium', 'dark', 'darker', 'black'];
+    const colorsWithDepths = colors.map(color => {
+        const depths = color === 'neutral'
+            ? neutralDepths.map(depth => depth === 'base' ? `${color}` : `${color}-${depth}`)
+            : colorDepths.map(depth => depth === 'base' ? `${color}` : `${color}-${depth}`);
+        return depths;
+    }).flat(1);
+    return colorsWithDepths;
 }
 //# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;EAChE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,mBAAmB;EACjC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;EACtG,MAAM,WAAW,GAAG,CAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,CAAC,CAAC;EAC/D,MAAM,aAAa,GAAG,CAAC,WAAW,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,CAAC,CAAC;EAC7G,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;IAC1C,MAAM,MAAM,GAAG,KAAK,KAAK,SAAS;MAC9B,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,CAAC;MACjF,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,CAAC,CAAC;IAClF,OAAO,MAAM,CAAC;EAChB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;EACX,OAAO,gBAAgB,CAAC;AAC1B,CAAC","sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function getColorsWithDepths() {\n  const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'];\nconst colorDepths = ['lighter','light','base','dark','darker'];\nconst neutralDepths = ['purewhite','white','pale','lighter','light','base','medium','dark','darker','black'];\nconst colorsWithDepths = colors.map(color => {\n  const depths = color === 'neutral'\n      ? neutralDepths.map(depth => depth === 'base' ? `${color}` : `${color}-${depth}`)\n      : colorDepths.map(depth => depth === 'base' ? `${color}` : `${color}-${depth}`);\n    return depths;\n  }).flat(1);\n  return colorsWithDepths;\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAa,EAAE,MAAc,EAAE,IAAY;IAChE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,mBAAmB;IACjC,MAAM,MAAM,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,CAAC,CAAC;IACtG,MAAM,WAAW,GAAG,CAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,CAAC,CAAC;IAC/D,MAAM,aAAa,GAAG,CAAC,WAAW,EAAC,OAAO,EAAC,MAAM,EAAC,SAAS,EAAC,OAAO,EAAC,MAAM,EAAC,QAAQ,EAAC,MAAM,EAAC,QAAQ,EAAC,OAAO,CAAC,CAAC;IAC7G,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;QAC1C,MAAM,MAAM,GAAG,KAAK,KAAK,SAAS;YAC9B,CAAC,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,CAAC;YACjF,CAAC,CAAC,WAAW,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC,GAAG,KAAK,IAAI,KAAK,EAAE,CAAC,CAAC;QAClF,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IACX,OAAO,gBAAgB,CAAC;AAC1B,CAAC","sourcesContent":["export function format(first: string, middle: string, last: string): string {\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\n}\n\nexport function getColorsWithDepths() {\n  const colors = ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'];\nconst colorDepths = ['lighter','light','base','dark','darker'];\nconst neutralDepths = ['purewhite','white','pale','lighter','light','base','medium','dark','darker','black'];\nconst colorsWithDepths = colors.map(color => {\n  const depths = color === 'neutral'\n      ? neutralDepths.map(depth => depth === 'base' ? `${color}` : `${color}-${depth}`)\n      : colorDepths.map(depth => depth === 'base' ? `${color}` : `${color}-${depth}`);\n    return depths;\n  }).flat(1);\n  return colorsWithDepths;\n}\n"]}

package/dist/components/cura-accordion-item.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CuraAccordionItem extends Components.CuraAccordionItem, HTMLElement {}
 export const CuraAccordionItem: {
-  prototype: CuraAccordionItem;
-  new (): CuraAccordionItem;
+    prototype: CuraAccordionItem;
+    new (): CuraAccordionItem;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/cura-accordion-item.js

@@ -1,71 +1,72 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { d as defineCustomElement$2 } from './cura-icon2.js';
 
-const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}:host .accordion-item .label::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item .label .label-container{display:-ms-flexbox;display:flex;-ms-flex-positive:1;flex-grow:1;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}:host .accordion-item .label .label-container cura-icon{margin-right:4px}:host .accordion-item .label .label-container:hover{color:var(--color-light)}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item .label .label-container:active{color:var(--color-dark)}:host .accordion-item .label .label-container:active cura-icon{--color:var(--icon-color-dark) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;-webkit-transition:max-height 0.25s ease;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}:host .accordion-item.active .label .label-container{color:var(--color-active-base)}:host .accordion-item.active .label .label-container:hover{color:var(--color-active-light)}:host .accordion-item.active .label .label-container:hover cura-icon{--color:var(--icon-color-active-light) !important}:host .accordion-item.active .label .label-container:active{color:var(--color-active-dark)}:host .accordion-item.active .label .label-container:active cura-icon{--color:var(--icon-color-active-dark) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;-webkit-transition:max-height 0.5s ease 0.14s;transition:max-height 0.5s ease 0.14s}:host .accordion-item.inverted .label .label-container{color:var(--neutral-lighter)}:host .accordion-item.inverted .label .label-container:hover{color:var(--color-lighter)}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-lighter) !important}:host .accordion-item.inverted .label .label-container:active{color:var(--color-light)}:host .accordion-item.inverted .label .label-container:active cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item.active.inverted .label .label-container{color:var(--neutral-purewhite)}:host .accordion-item.active.inverted .label .label-container:hover{color:var(--color-active-lighter)}:host .accordion-item.active.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-active-lighter) !important}:host .accordion-item.active.inverted .label .label-container:active{color:var(--color-active-light)}:host .accordion-item.active.inverted .label .label-container:active cura-icon{--color:var(--icon-color-active-light) !important}@media (min-width: 769px) and (max-width: 992px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 993px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
+const curaAccordionItemCss = ":host{display:block}:host .accordion-item{width:100%}:host .accordion-item .label{display:flex;flex-direction:column}:host .accordion-item .label::before{content:\"\";display:block;border-top:solid 1px var(--neutral-base);width:100%}:host .accordion-item .label .label-container{display:flex;flex-grow:1;justify-content:space-between;align-items:center;gap:calc(var(--base-spacing) * 2px);min-height:40px;word-break:break-word;cursor:pointer;font-size:1.14em;font-weight:var(--font-weight-regular);color:var(--color-base);padding:0px}:host .accordion-item .label .label-container cura-icon{margin-right:4px}:host .accordion-item .label .label-container:hover{color:var(--color-light)}:host .accordion-item .label .label-container:hover cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item .label .label-container:active{color:var(--color-dark)}:host .accordion-item .label .label-container:active cura-icon{--color:var(--icon-color-dark) !important}:host .accordion-item .content{font-size:1em;overflow:hidden;max-height:0;transition:max-height 0.25s ease}:host .accordion-item .content .content-wrapper{padding:calc(var(--base-spacing) * 2px) 0px;border-top:solid 1px var(--neutral-base)}:host .accordion-item.active .label .label-container{color:var(--color-active-base)}:host .accordion-item.active .label .label-container:hover{color:var(--color-active-light)}:host .accordion-item.active .label .label-container:hover cura-icon{--color:var(--icon-color-active-light) !important}:host .accordion-item.active .label .label-container:active{color:var(--color-active-dark)}:host .accordion-item.active .label .label-container:active cura-icon{--color:var(--icon-color-active-dark) !important}:host .accordion-item.active .content{max-height:200vh;overflow-y:auto;transition:max-height 0.5s ease 0.14s}:host .accordion-item.inverted .label .label-container{color:var(--neutral-lighter)}:host .accordion-item.inverted .label .label-container:hover{color:var(--color-lighter)}:host .accordion-item.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-lighter) !important}:host .accordion-item.inverted .label .label-container:active{color:var(--color-light)}:host .accordion-item.inverted .label .label-container:active cura-icon{--color:var(--icon-color-light) !important}:host .accordion-item.active.inverted .label .label-container{color:var(--neutral-purewhite)}:host .accordion-item.active.inverted .label .label-container:hover{color:var(--color-active-lighter)}:host .accordion-item.active.inverted .label .label-container:hover cura-icon{--color:var(--icon-color-active-lighter) !important}:host .accordion-item.active.inverted .label .label-container:active{color:var(--color-active-light)}:host .accordion-item.active.inverted .label .label-container:active cura-icon{--color:var(--icon-color-active-light) !important}@media (min-width: 769px) and (max-width: 992px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}@media (min-width: 993px){:host .accordion-item .label .label-container{font-size:1.29em}:host .accordion-item .content{font-size:1.14em}}";
+const CuraAccordionItemStyle0 = curaAccordionItemCss;
 
 const CuraAccordionItem$1 = /*@__PURE__*/ proxyCustomElement(class CuraAccordionItem extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.label = '';
-    this.iconSize = 32;
-    this.openIcon = 'down';
-    this.closeIcon = 'up';
-    this.iconColor = '';
-    this.iconActiveColor = '';
-    this.colorMode = 'dark';
-    this.opened = false;
-    this.styles = {};
-  }
-  getIconColor() {
-    const inverted = this.colorMode === 'light';
-    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
-    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
-    return this.opened ? iconActiveColor : iconColor;
-  }
-  getClasses() {
-    const classes = {};
-    classes['accordion-item'] = true;
-    classes['active'] = this.opened;
-    classes['inverted'] = this.colorMode === 'light';
-    return classes;
-  }
-  accordionItemClick(_) {
-    this.opened = !this.opened;
-  }
-  render() {
-    return (h(Host, { slot: "accordion-item" }, h("div", { class: this.getClasses(), style: this.styles }, h("div", { class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { class: "label-container" }, h("span", null, this.label), h("cura-icon", { name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { class: 'content' }, h("div", { class: "content-wrapper" }, h("slot", null))))));
-  }
-  static get style() { return curaAccordionItemCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.label = '';
+        this.iconSize = 32;
+        this.openIcon = 'down';
+        this.closeIcon = 'up';
+        this.iconColor = '';
+        this.iconActiveColor = '';
+        this.colorMode = 'dark';
+        this.opened = false;
+        this.styles = {};
+    }
+    getIconColor() {
+        const inverted = this.colorMode === 'light';
+        const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;
+        const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;
+        return this.opened ? iconActiveColor : iconColor;
+    }
+    getClasses() {
+        const classes = {};
+        classes['accordion-item'] = true;
+        classes['active'] = this.opened;
+        classes['inverted'] = this.colorMode === 'light';
+        return classes;
+    }
+    accordionItemClick(_) {
+        this.opened = !this.opened;
+    }
+    render() {
+        return (h(Host, { key: '8d46e9fd7c698c049a9020375cd77b5ebb9d38fd', slot: "accordion-item" }, h("div", { key: 'fdc11f228f3051f2452b0beb56e232de836fa382', class: this.getClasses(), style: this.styles }, h("div", { key: '7507b6c72d3433550b1590530c8070fe07431389', class: "label", onClick: e => this.accordionItemClick(e) }, h("div", { key: '8f6d6deb3fc2e864ac81abb744c5d4a32ad6b974', class: "label-container" }, h("span", { key: '7b1a4e96fa8c3dfdfffa7890c17ed8afacf3032f' }, this.label), h("cura-icon", { key: '0f9c6f9dc664ad96a7b02c084700fd8f75fbc677', name: this.opened ? this.closeIcon : this.openIcon, size: this.iconSize, color: this.getIconColor() }))), h("div", { key: 'fb1860aa74170ff18edc03b8171356cd1a1fd271', class: 'content' }, h("div", { key: '4d3c9252658e9c30521353579f0b3ef9bc8a3087', class: "content-wrapper" }, h("slot", { key: '067f12a534860a5942d01d5945d1e4d272e5a541' }))))));
+    }
+    static get style() { return CuraAccordionItemStyle0; }
 }, [1, "cura-accordion-item", {
-    "label": [513],
-    "iconSize": [514, "icon-size"],
-    "openIcon": [513, "open-icon"],
-    "closeIcon": [513, "close-icon"],
-    "iconColor": [513, "icon-color"],
-    "iconActiveColor": [513, "icon-active-color"],
-    "colorMode": [1, "color-mode"],
-    "opened": [1540],
-    "styles": [32]
-  }]);
+        "label": [513],
+        "iconSize": [514, "icon-size"],
+        "openIcon": [513, "open-icon"],
+        "closeIcon": [513, "close-icon"],
+        "iconColor": [513, "icon-color"],
+        "iconActiveColor": [513, "icon-active-color"],
+        "colorMode": [1, "color-mode"],
+        "opened": [1540],
+        "styles": [32]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["cura-accordion-item", "cura-icon"];
-  components.forEach(tagName => { switch (tagName) {
-    case "cura-accordion-item":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, CuraAccordionItem$1);
-      }
-      break;
-    case "cura-icon":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["cura-accordion-item", "cura-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "cura-accordion-item":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, CuraAccordionItem$1);
+            }
+            break;
+        case "cura-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 
 const CuraAccordionItem = CuraAccordionItem$1;

package/dist/components/cura-accordion-item.js.map

@@ -1 +1 @@
-{"file":"cura-accordion-item.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,2zGAA2zG;;MCO30GA,mBAAiB;;;;;iBAKW,EAAE;oBAMP,EAAE;oBACF,MAAM;qBACL,IAAI;qBAMJ,EAAE;2BACI,EAAE;qBAKL,MAAM;kBAEc,KAAK;kBAE7C,EAAE;;EAEpB,YAAY;IACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IAC5C,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;IAC1E,MAAM,eAAe,GAAG,QAAQ,GAAG,mBAAmB,GAAG,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;IACxF,OAAO,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;GAClD;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;IACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;IAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;IACjD,OAAO,OAAO,CAAC;GAChB;EAED,kBAAkB,CAAC,CAAQ;IACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;GAC5B;EAED,MAAM;IACJ,QACE,EAAC,IAAI,IAAC,IAAI,EAAC,gBAAgB,IACzB,WAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,WAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IACzD,WAAK,KAAK,EAAC,iBAAiB,IAC1B,gBAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,iBAAW,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF,EACN,WAAK,KAAK,EAAC,SAAS,IAClB,WAAK,KAAK,EAAC,iBAAiB,IAC1B,eAAa,CACT,CACF,CACF,CACD,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAccordionItem"],"sources":["./src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","./src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    .label {\n      display: flex;\n      flex-direction: column;\n      &::before {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--neutral-base);\n        width: 100%;\n      }\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: calc(var(--base-spacing) * 2px);\n        min-height: 40px;\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n        color: var(--color-base);\n        padding: 0px;\n\n        cura-icon {\n          margin-right: 4px;\n        }\n\n        &:hover {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-dark);\n          cura-icon {\n            --color: var(--icon-color-dark) !important;\n          }\n        }\n      }\n    }\n\n    .content {\n      font-size: 1em;\n      overflow: hidden;\n      max-height: 0;\n      transition: max-height .25s ease;\n      .content-wrapper {\n        padding: calc(var(--base-spacing) * 2px) 0px;\n        border-top: solid 1px var(--neutral-base);\n      }\n    }\n\n    &.active {\n      .label .label-container {\n        color: var(--color-active-base);\n        &:hover {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-dark);\n          cura-icon {\n            --color: var(--icon-color-active-dark) !important;\n          }\n        }\n      }\n\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n\n    &.inverted {\n      .label .label-container {\n        color: var(--neutral-lighter);\n        &:hover {\n          color: var(--color-lighter);\n          cura-icon {\n            --color: var(--icon-color-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n      }\n    }\n\n    &.active.inverted {\n      .label .label-container {\n        color: var(--neutral-purewhite);\n        &:hover {\n          color: var(--color-active-lighter);\n          cura-icon {\n            --color: var(--icon-color-active-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n      }\n    }\n  }\n\n  @include medium-only() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n\n  @include large-up() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n}\n","import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}
+{"file":"cura-accordion-item.js","mappings":";;;AAAA,MAAM,oBAAoB,GAAG,kmGAAkmG,CAAC;AAChoG,gCAAe,oBAAoB;;MCMtBA,mBAAiB;;;;;qBAKW,EAAE;wBAMP,EAAE;wBACF,MAAM;yBACL,IAAI;yBAMJ,EAAE;+BACI,EAAE;yBAKL,MAAM;sBAEc,KAAK;sBAE7C,EAAE;;IAEpB,YAAY;QACV,MAAM,QAAQ,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QAC5C,MAAM,SAAS,GAAG,QAAQ,GAAG,iBAAiB,GAAG,GAAG,IAAI,CAAC,SAAS,OAAO,CAAC;QAC1E,MAAM,eAAe,GAAG,QAAQ,GAAG,mBAAmB,GAAG,GAAG,IAAI,CAAC,eAAe,OAAO,CAAC;QACxF,OAAO,IAAI,CAAC,MAAM,GAAG,eAAe,GAAG,SAAS,CAAC;KAClD;IAED,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,gBAAgB,CAAC,GAAG,IAAI,CAAC;QACjC,OAAO,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,MAAM,CAAC;QAChC,OAAO,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,OAAO,CAAC;QACjD,OAAO,OAAO,CAAC;KAChB;IAED,kBAAkB,CAAC,CAAQ;QACzB,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;KAC5B;IAED,MAAM;QACJ,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,gBAAgB,IACzB,4DAAK,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,MAAM,IAC/C,4DAAK,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,CAAC,IAAI,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,IACzD,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,+DAAO,IAAI,CAAC,KAAK,CAAQ,EACzB,kEAAW,IAAI,EAAE,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,QAAQ,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,YAAY,EAAE,GAAc,CACxH,CACF,EACN,4DAAK,KAAK,EAAC,SAAS,IAClB,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,8DAAa,CACT,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["CuraAccordionItem"],"sources":["src/components/accordion/cura-accordion-item/cura-accordion-item.scss?tag=cura-accordion-item&encapsulation=shadow","src/components/accordion/cura-accordion-item/cura-accordion-item.tsx"],"sourcesContent":["@import '../../../scss/mixins/responsive.scss';\n\n:host {\n  display: block;\n\n  .accordion-item {\n    width: 100%;\n\n    .label {\n      display: flex;\n      flex-direction: column;\n      &::before {\n        content: \"\";\n        display: block;\n        border-top: solid 1px var(--neutral-base);\n        width: 100%;\n      }\n      .label-container {\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        align-items: center;\n        gap: calc(var(--base-spacing) * 2px);\n        min-height: 40px;\n        word-break: break-word;\n        cursor: pointer;\n        font-size: 1.14em;\n        font-weight: var(--font-weight-regular);\n        color: var(--color-base);\n        padding: 0px;\n\n        cura-icon {\n          margin-right: 4px;\n        }\n\n        &:hover {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-dark);\n          cura-icon {\n            --color: var(--icon-color-dark) !important;\n          }\n        }\n      }\n    }\n\n    .content {\n      font-size: 1em;\n      overflow: hidden;\n      max-height: 0;\n      transition: max-height .25s ease;\n      .content-wrapper {\n        padding: calc(var(--base-spacing) * 2px) 0px;\n        border-top: solid 1px var(--neutral-base);\n      }\n    }\n\n    &.active {\n      .label .label-container {\n        color: var(--color-active-base);\n        &:hover {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-dark);\n          cura-icon {\n            --color: var(--icon-color-active-dark) !important;\n          }\n        }\n      }\n\n      .content {\n        max-height: 200vh;\n        overflow-y: auto;\n        transition: max-height .5s ease .14s;\n      }\n    }\n\n    &.inverted {\n      .label .label-container {\n        color: var(--neutral-lighter);\n        &:hover {\n          color: var(--color-lighter);\n          cura-icon {\n            --color: var(--icon-color-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-light);\n          cura-icon {\n            --color: var(--icon-color-light) !important;\n          }\n        }\n      }\n    }\n\n    &.active.inverted {\n      .label .label-container {\n        color: var(--neutral-purewhite);\n        &:hover {\n          color: var(--color-active-lighter);\n          cura-icon {\n            --color: var(--icon-color-active-lighter) !important;\n          }\n        }\n        &:active {\n          color: var(--color-active-light);\n          cura-icon {\n            --color: var(--icon-color-active-light) !important;\n          }\n        }\n      }\n    }\n  }\n\n  @include medium-only() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n\n  @include large-up() {\n    .accordion-item {\n      .label .label-container {\n        font-size: 1.29em;\n      }\n\n      .content {\n        font-size: 1.14em;\n      }\n    }\n  }\n}\n","import { Component, Host,  Prop, State, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-accordion-item',\n  styleUrl: 'cura-accordion-item.scss',\n  shadow: true,\n})\nexport class CuraAccordionItem {\n\n  /**\n   * Text label for accordion item\n   */\n  @Prop({reflect: true}) label: string = '';\n\n  /** ***Properties below are inherited from the cura-accordion*** */\n  /**\n   * Accordion items icons\n   */\n  @Prop({reflect: true}) iconSize = 32;\n  @Prop({reflect: true}) openIcon = 'down';\n  @Prop({reflect: true}) closeIcon = 'up';\n\n  /**\n   * Color scheme base color\n   * (By default, the icon will use the same color of 'color' and 'activeColor')\n   */\n  @Prop({reflect: true}) iconColor = '';\n  @Prop({reflect: true}) iconActiveColor = '';\n\n  /**\n   * Set the color mode to dark or light\n   */\n  @Prop() colorMode: 'dark' | 'light' = 'dark';\n\n  @Prop({ reflect: true, mutable: true }) opened: boolean = false;\n\n  @State() styles = {};\n\n  getIconColor() {\n    const inverted = this.colorMode === 'light';\n    const iconColor = inverted ? 'neutral-lighter' : `${this.iconColor}-base`;\n    const iconActiveColor = inverted ? 'neutral-purewhite' : `${this.iconActiveColor}-base`;\n    return this.opened ? iconActiveColor : iconColor;\n  }\n\n  getClasses() {\n    const classes = {};\n    classes['accordion-item'] = true;\n    classes['active'] = this.opened;\n    classes['inverted'] = this.colorMode === 'light';\n    return classes;\n  }\n\n  accordionItemClick(_: Event) {\n    this.opened = !this.opened;\n  }\n\n  render() {\n    return (\n      <Host slot=\"accordion-item\">\n        <div class={this.getClasses()} style={this.styles}>\n          <div class=\"label\" onClick={e => this.accordionItemClick(e)}>\n            <div class=\"label-container\">\n              <span>{this.label}</span>\n              <cura-icon name={this.opened ? this.closeIcon : this.openIcon} size={this.iconSize} color={this.getIconColor()}></cura-icon>\n            </div>\n          </div>\n          <div class='content'>\n            <div class=\"content-wrapper\">\n              <slot></slot>\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"],"version":3}

package/dist/components/cura-accordion.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface CuraAccordion extends Components.CuraAccordion, HTMLElement {}
 export const CuraAccordion: {
-  prototype: CuraAccordion;
-  new (): CuraAccordion;
+    prototype: CuraAccordion;
+    new (): CuraAccordion;
 };
 /**
  * Used to define this component and all nested components recursively.