@rededor/cura 0.5.4 → 1.0.0-alpha.0

package/dist/collection/components/cura-icon/cura-icon.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;EACb,KAAK,EAAE,wBAAwB;EAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;QAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;IACvB,mFAAmF;IACnF,gCAAgC;IAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;EACZ,CAAC;EACD,QAAQ,EAAE;IACR,QAAQ,EAAE;MACR,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,qBAAqB;MAClC,KAAK,EAAE;QACL,QAAQ,EAAE,OAAO;QACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;OAClC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC;MAChE,WAAW,EAAE,yHAAyH;MACtI,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;OAC/B;KACF;IACD,KAAK,EAAE;MACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;MAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC;MACxB,WAAW,EAAE,oFAAoF;MACjG,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;QACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;OACpC;KACF;IACD,IAAI,EAAE;MACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;MAC1B,OAAO,EAAE,SAAS;MAClB,WAAW,EAAE,0CAA0C;MACvD,KAAK,EAAE;QACL,QAAQ,EAAE,YAAY;OACvB;KACF;GACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;EAClB,IAAI,EAAE;IACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;IAClB,IAAI,EAAE,IAAI;IACV,KAAK,EAAE,EAAE;IACT,QAAQ,EAAE,KAAK;GAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\nimport { iconSizes } from './cura-icon.definitions';\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Componentes/Icons/Icon',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-icon\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-icon>`;\n  },\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: Object.keys(iconSizes).filter(key => key !== 'default'),\n      description: 'Define o tamanho. Alguns ícones suportam o tamanho <b>micro</b>. Consulte a documentação do iconset para mais detalhes.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '24'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor do ícone. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral'}\n      }\n    },\n    name: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Define o ícone pelo seu nome no iconset.',\n      table: {\n        category: 'Properties'\n      }\n    }\n  },\n};\n\nexport const Icon = {\n  args: {\n    name: iconNames[0],\n    size: '24',\n    color: '',\n    disabled: false,\n  },\n};\n"]}
+{"version":3,"file":"cura-icon.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icon/cura-icon.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,SAAS,MAAM,yCAAyC,CAAC;AAChE,OAAO,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,SAAS,EAAE,MAAM,yBAAyB,CAAC;AAEpD,MAAM,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAErC,eAAe;IACb,KAAK,EAAE,wBAAwB;IAC/B,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,EAAkB,EAAE,EAAE;YAAtB,EAAE,KAAK,OAAW,EAAN,IAAI,cAAhB,SAAkB,CAAF;QACvB,mFAAmF;QACnF,gCAAgC;QAChC,OAAO;UACD,IAAI,CAAC,IAAI;WACR,IAAI,CAAC,KAAK;UACX,IAAI,CAAC,IAAI;cACL,IAAI,CAAC,QAAQ;aACd,CAAC;IACZ,CAAC;IACD,QAAQ,EAAE;QACR,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,qBAAqB;YAClC,KAAK,EAAE;gBACL,QAAQ,EAAE,OAAO;gBACjB,YAAY,EAAE,EAAE,OAAO,EAAE,OAAO,EAAC;aAClC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,KAAK,SAAS,CAAC;YAChE,WAAW,EAAE,yHAAyH;YACtI,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,IAAI,EAAC;aAC/B;SACF;QACD,KAAK,EAAE;YACL,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE;YAC3B,OAAO,EAAE,CAAC,EAAE,EAAE,GAAG,MAAM,CAAC;YACxB,WAAW,EAAE,oFAAoF;YACjG,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;gBACtB,YAAY,EAAE,EAAE,OAAO,EAAE,SAAS,EAAC;aACpC;SACF;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,EAAC,IAAI,EAAE,QAAQ,EAAE;YAC1B,OAAO,EAAE,SAAS;YAClB,WAAW,EAAE,0CAA0C;YACvD,KAAK,EAAE;gBACL,QAAQ,EAAE,YAAY;aACvB;SACF;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,IAAI,GAAG;IAClB,IAAI,EAAE;QACJ,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC;QAClB,IAAI,EAAE,IAAI;QACV,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,KAAK;KAChB;CACF,CAAC","sourcesContent":["import iconNames from '../../assets/icons/iconset-default-list';\nimport { getColorsWithDepths } from \"../../utils/utils\";\nimport { iconSizes } from './cura-icon.definitions';\n\nconst colors = getColorsWithDepths();\n\nexport default {\n  title: 'Componentes/Icons/Icon',\n  tags: ['autodocs'],\n  render: ({ label, ...args }) => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-icon\n  name=\"${args.name}\"\n  color=\"${args.color}\"\n  size=\"${args.size}\"\n  disabled=\"${args.disabled}\">\n</cura-icon>`;\n  },\n  argTypes: {\n    disabled: {\n      control: 'boolean',\n      description: 'Estado desabilitado',\n      table: {\n        category: 'State',\n        defaultValue: { summary: 'false'}\n      }\n    },\n    size: {\n      control: { type: 'select' },\n      options: Object.keys(iconSizes).filter(key => key !== 'default'),\n      description: 'Define o tamanho. Alguns ícones suportam o tamanho <b>micro</b>. Consulte a documentação do iconset para mais detalhes.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: '24'}\n      }\n    },\n    color: {\n      control: { type: 'select' },\n      options: ['', ...colors],\n      description: 'Define a cor do ícone. Aceita qualquer valor do esquema de cores do design system.',\n      table: {\n        category: 'Properties',\n        defaultValue: { summary: 'neutral'}\n      }\n    },\n    name: {\n      control: {type: 'select' },\n      options: iconNames,\n      description: 'Define o ícone pelo seu nome no iconset.',\n      table: {\n        category: 'Properties'\n      }\n    }\n  },\n};\n\nexport const Icon = {\n  args: {\n    name: iconNames[0],\n    size: '24',\n    color: '',\n    disabled: false,\n  },\n};\n"]}

package/dist/collection/components/cura-icons-view/cura-icons-view.js

@@ -1,40 +1,40 @@
-import { Host, h } from '@stencil/core';
-import iconsetdefaulticons from '../../assets/icons/iconset-default-list';
-import { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';
+import { Host, h } from "@stencil/core";
+import iconsetdefaulticons from "../../assets/icons/iconset-default-list";
+import { microIcons, iconSizes } from "../cura-icon/cura-icon.definitions";
 export class CuraIconsView {
-  constructor() {
-    this.sizes = Object.keys(iconSizes).filter(key => key !== 'default');
-    this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
-    this.setSelected = (icon) => {
-      this.selected = icon;
-    };
-    this.selected = iconsetdefaulticons[0];
-  }
-  connectedCallback() {
-    this.sizes.unshift(this.sizes.pop());
-  }
-  render() {
-    return (h(Host, null, h("div", { class: "iconDetail" }, h("cura-heading", { size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", null, this.selected)), h("div", { class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-      h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
-      h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
-      h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
-  }
-  static get is() { return "cura-icons-view"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-icons-view.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-icons-view.css"]
-    };
-  }
-  static get states() {
-    return {
-      "selected": {}
-    };
-  }
+    constructor() {
+        this.sizes = Object.keys(iconSizes).filter(key => key !== 'default');
+        this.colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];
+        this.setSelected = (icon) => {
+            this.selected = icon;
+        };
+        this.selected = iconsetdefaulticons[0];
+    }
+    connectedCallback() {
+        this.sizes.unshift(this.sizes.pop());
+    }
+    render() {
+        return (h(Host, { key: '57820e2608c03f54b58656602ca329c7166e142e' }, h("div", { key: '47fb932e5b2c0876f58fde68b88e30193e14b590', class: "iconDetail" }, h("cura-heading", { key: 'b4ad008b60026ac7ceccee16c68276e9bef114cb', size: "small", "margin-block": "0 24px" }, "Icon: ", h("b", { key: '6634d3ae9cf33df1942563e44e72f470199725e5' }, this.selected)), h("div", { key: '8c565d1b3714dc5b1aad971e408cab340a4aca46', class: "iconSizes" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size }), h("span", null, size)))), h("div", { key: 'd979d1169689f583900d85d592c29bb2869ff62a', class: "iconSizes invert" }, this.sizes.map(size => size === 'micro' && !microIcons.includes(this.selected) ? '' :
+            h("div", { class: "size" }, h("cura-icon", { name: this.selected, size: size, color: "neutral-white" }), h("span", null, size))))), h("div", { key: '0ed5c55f057bcdea8de3bdaa1d2f45a516763d95', class: "icons" }, iconsetdefaulticons.map(icon => h("div", { class: { icon: true, selected: icon === this.selected }, onClick: () => this.setSelected(icon) }, h("cura-icon", { name: icon, size: "32", color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }), h("cura-label", { size: "xsmall", weight: icon === this.selected ? 'bold' : 'regular', color: icon === this.selected ? 'accent-dark' : 'neutral-dark' }, icon), !microIcons.includes(icon) ? '' :
+            h("cura-paragraph", { color: 'success-dark', size: "xsmall", "margin-block": "0px", "line-height": '100%' }, "MICRO"))))));
+    }
+    static get is() { return "cura-icons-view"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-icons-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-icons-view.css"]
+        };
+    }
+    static get states() {
+        return {
+            "selected": {}
+        };
+    }
 }
 //# sourceMappingURL=cura-icons-view.js.map

package/dist/collection/components/cura-icons-view/cura-icons-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = iconsetdefaulticons[0];\n\n  connectedCallback() {\n    this.sizes.unshift(this.sizes.pop());\n  }\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n              <cura-icon\n                name={icon}\n                size=\"32\"\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n              <cura-label\n                size=\"xsmall\"\n                weight={icon === this.selected ? 'bold' : 'regular'}\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n              { !microIcons.includes(icon) ? '' :\n                <cura-paragraph\n                  color='success-dark'\n                  size=\"xsmall\"\n                  margin-block=\"0px\"\n                  line-height='100%'>MICRO</cura-paragraph>\n              }\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-icons-view.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, State } from '@stencil/core';\nimport iconsetdefaulticons from '../../assets/icons/iconset-default-list';\nimport { microIcons, iconSizes } from '../cura-icon/cura-icon.definitions';\n\n@Component({\n  tag: 'cura-icons-view',\n  styleUrl: 'cura-icons-view.scss',\n  shadow: true,\n})\nexport class CuraIconsView {\n\n  sizes = Object.keys(iconSizes).filter(key => key !== 'default');\n  colors = ['primary', 'secondary', 'accent', 'info', 'warning', 'error', 'success', 'neutral'];\n  @State() selected = iconsetdefaulticons[0];\n\n  connectedCallback() {\n    this.sizes.unshift(this.sizes.pop());\n  }\n\n  setSelected = (icon) => {\n    this.selected = icon;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div class=\"iconDetail\">\n          <cura-heading size=\"small\" margin-block=\"0 24px\">Icon: <b>{ this.selected }</b></cura-heading>\n          <div class=\"iconSizes\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size}></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n          <div class=\"iconSizes invert\">\n            { this.sizes.map( size =>\n              size === 'micro' && !microIcons.includes(this.selected) ? '' :\n              <div class=\"size\">\n                <cura-icon name={this.selected} size={size} color=\"neutral-white\"></cura-icon>\n                <span>{ size }</span>\n              </div>\n            )}\n          </div>\n        </div>\n        <div class=\"icons\">\n          { iconsetdefaulticons.map(icon =>\n            <div class={{icon: true, selected: icon === this.selected }} onClick={() => this.setSelected(icon)}>\n              <cura-icon\n                name={icon}\n                size=\"32\"\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}></cura-icon>\n              <cura-label\n                size=\"xsmall\"\n                weight={icon === this.selected ? 'bold' : 'regular'}\n                color={icon === this.selected ? 'accent-dark' : 'neutral-dark'}>{icon}</cura-label>\n              { !microIcons.includes(icon) ? '' :\n                <cura-paragraph\n                  color='success-dark'\n                  size=\"xsmall\"\n                  margin-block=\"0px\"\n                  line-height='100%'>MICRO</cura-paragraph>\n              }\n            </div>\n          )}\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/cura-icons-view/cura-icons-view.stories.js

@@ -1,11 +1,11 @@
 export default {
-  title: 'Componentes/Icons/Iconset Default',
-  tags: ['autodocs'],
-  render: () => {
-    // You can either use a function to create DOM elements or use a plain html string!
-    // return `<div>${label}</div>`;
-    return `<cura-icons-view></cura-icons-view>`;
-  },
+    title: 'Componentes/Icons/Iconset Default',
+    tags: ['autodocs'],
+    render: () => {
+        // You can either use a function to create DOM elements or use a plain html string!
+        // return `<div>${label}</div>`;
+        return `<cura-icons-view></cura-icons-view>`;
+    },
 };
 export const IconsetDefault = {};
 //# sourceMappingURL=cura-icons-view.stories.js.map

package/dist/collection/components/cura-icons-view/cura-icons-view.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-icons-view.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.stories.tsx"],"names":[],"mappings":"AACA,eAAe;EACb,KAAK,EAAE,mCAAmC;EAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;EAClB,MAAM,EAAE,GAAG,EAAE;IACX,mFAAmF;IACnF,gCAAgC;IAChC,OAAO,qCAAqC,CAAC;EAC/C,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC","sourcesContent":["\nexport default {\n  title: 'Componentes/Icons/Iconset Default',\n  tags: ['autodocs'],\n  render: () => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-icons-view></cura-icons-view>`;\n  },\n};\n\nexport const IconsetDefault = {};\n"]}
+{"version":3,"file":"cura-icons-view.stories.js","sourceRoot":"","sources":["../../../src/components/cura-icons-view/cura-icons-view.stories.tsx"],"names":[],"mappings":"AACA,eAAe;IACb,KAAK,EAAE,mCAAmC;IAC1C,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,GAAG,EAAE;QACX,mFAAmF;QACnF,gCAAgC;QAChC,OAAO,qCAAqC,CAAC;IAC/C,CAAC;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,cAAc,GAAG,EAAE,CAAC","sourcesContent":["\nexport default {\n  title: 'Componentes/Icons/Iconset Default',\n  tags: ['autodocs'],\n  render: () => {\n    // You can either use a function to create DOM elements or use a plain html string!\n    // return `<div>${label}</div>`;\n    return `<cura-icons-view></cura-icons-view>`;\n  },\n};\n\nexport const IconsetDefault = {};\n"]}

package/dist/collection/components/cura-page-template/cura-page-template.js

@@ -1,55 +1,55 @@
-import { Host, h } from '@stencil/core';
+import { Host, h } from "@stencil/core";
 export class CuraPageTemplate {
-  constructor() {
-    this.contentwidth = 'default';
-  }
-  connectedCallback() {
-    this.styles = {
-      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
-    };
-  }
-  getClasses() {
-    const classes = {};
-    classes[this.contentwidth.toLowerCase()] = true;
-    return classes;
-  }
-  render() {
-    return (h(Host, null, h("div", { style: this.styles, class: "grid-template" }, h("div", { id: "sub-header" }, h("slot", { name: 'sub-header' })), h("div", { id: "header" }, h("slot", { name: 'header' })), h("div", { id: "pre-content" }, h("slot", { name: 'pre-content' })), h("div", { id: "content-container", class: this.getClasses() }, h("div", { id: "sidebar-left" }, h("slot", { name: 'sidebar-left' })), h("div", { id: "content" }, h("slot", { name: "content" }), h("slot", null)), h("div", { id: "sidebar-right" }, h("slot", { name: 'sidebar-right' }))), h("div", { id: "post-body" }, h("slot", { name: 'post-body' })), h("div", { id: "footer" }, h("slot", { name: 'footer' })), h("div", { id: "sub-footer" }, h("slot", { name: 'sub-footer' })))));
-  }
-  static get is() { return "cura-page-template"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["cura-page-template.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["cura-page-template.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "contentwidth": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "'default' | 'centered'",
-          "resolved": "\"centered\" | \"default\"",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": ""
-        },
-        "attribute": "contentwidth",
-        "reflect": true,
-        "defaultValue": "'default'"
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+    constructor() {
+        this.contentwidth = 'default';
+    }
+    connectedCallback() {
+        this.styles = {
+            '--spacing': window.CuraAPI.theme.spacing.getSpacing(),
+        };
+    }
+    getClasses() {
+        const classes = {};
+        classes[this.contentwidth.toLowerCase()] = true;
+        return classes;
+    }
+    render() {
+        return (h(Host, { key: 'b420fd773b337fbf64107124c3a65b7d543aa0f9' }, h("div", { key: '00e031bf40ed01904107f07367ee5b3042c1871f', style: this.styles, class: "grid-template" }, h("div", { key: '4c5c8112fe739d2b330a5a71bfdd6f6339206b15', id: "sub-header" }, h("slot", { key: '8b9896a17e6016bc791da8fd01f562a41d7f5bb1', name: 'sub-header' })), h("div", { key: '9d45f7a18ce35ae550521b281cfc0d9ea5009343', id: "header" }, h("slot", { key: '79ecbfb33b818b41c98f8a1f09243f6c2082b7bd', name: 'header' })), h("div", { key: '129b9928ddd3c0f0c357fa71494b3b77876ecd49', id: "pre-content" }, h("slot", { key: '71b6fbe0755848ac8df0a800e65b8ebc6909aff3', name: 'pre-content' })), h("div", { key: '80389bc85c71768906aa2ab564a80b84a045705d', id: "content-container", class: this.getClasses() }, h("div", { key: '438eb89b07be453c1a7caf31eb78879a6b000fc3', id: "sidebar-left" }, h("slot", { key: '8e0dd99e31be8d03d767acdee8bd18f4f6fe80bd', name: 'sidebar-left' })), h("div", { key: '21edd321d65ff1a685c699314a2d4617a14b6d09', id: "content" }, h("slot", { key: '125f790bc5d5ecade8946c154b00fdb7591ec26f', name: "content" }), h("slot", { key: 'e52dfd04c751d893335037f6dc970902a37a7d4f' })), h("div", { key: '3d35da8b265ca7a96fe36d8f037c6db0e0857537', id: "sidebar-right" }, h("slot", { key: '1d812f29d7cc068b0c4f6e705a60defc91da7145', name: 'sidebar-right' }))), h("div", { key: '10f23a4d4e837bbb11e140a5fd09be05836a27ba', id: "post-body" }, h("slot", { key: '8f3bd8fea091a0b025e69f1a0916016f1354aeb8', name: 'post-body' })), h("div", { key: '474062139aa0dd1ed49bc9c8594820fa2ff0ba83', id: "footer" }, h("slot", { key: 'ad46b1122b0875390822df6db770413980090f5e', name: 'footer' })), h("div", { key: 'c3de6dd778e675e38099d85d248e7923e276a25c', id: "sub-footer" }, h("slot", { key: '81a48964dc8912a225ea9ea49478d674d8d7271b', name: 'sub-footer' })))));
+    }
+    static get is() { return "cura-page-template"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["cura-page-template.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["cura-page-template.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "contentwidth": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'centered'",
+                    "resolved": "\"centered\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "contentwidth",
+                "reflect": true,
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=cura-page-template.js.map

package/dist/collection/components/cura-page-template/cura-page-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-page-template.js","sourceRoot":"","sources":["../../../src/components/cura-page-template/cura-page-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,gBAAgB;;wBAEmC,SAAS;;EAMvE,iBAAiB;IACf,IAAI,CAAC,MAAM,GAAG;MACZ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;KACvD,CAAA;EACH,CAAC;EAED,UAAU;IACR,MAAM,OAAO,GAAG,EAAE,CAAC;IACnB,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;IAChD,OAAO,OAAO,CAAC;EACjB,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,WAAK,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,eAAe;QAC5C,WAAK,EAAE,EAAC,YAAY;UAClB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;QACN,WAAK,EAAE,EAAC,QAAQ;UACd,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QACN,WAAK,EAAE,EAAC,aAAa;UACnB,YAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B;QACN,WAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;UAClD,WAAK,EAAE,EAAC,cAAc;YACpB,YAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;UACN,WAAK,EAAE,EAAC,SAAS;YACf,YAAM,IAAI,EAAC,SAAS,GAAQ;YAC5B,eAAa,CACT;UACN,WAAK,EAAE,EAAC,eAAe;YACrB,YAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;QACN,WAAK,EAAE,EAAC,WAAW;UACjB,YAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;QACN,WAAK,EAAE,EAAC,QAAQ;UACd,YAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;QACN,WAAK,EAAE,EAAC,YAAY;UAClB,YAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-page-template',\n  styleUrl: 'cura-page-template.scss',\n  shadow: true,\n})\nexport class CuraPageTemplate {\n\n  @Prop({reflect: true}) contentwidth: 'default' | 'centered' = 'default';\n\n  @Element() host: HTMLElement;\n\n  styles: any;\n\n  connectedCallback() {\n    this.styles = {\n      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    }\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.contentwidth.toLowerCase()] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div style={this.styles} class=\"grid-template\">\n          <div id=\"sub-header\">\n            <slot name='sub-header'></slot>\n          </div>\n          <div id=\"header\">\n            <slot name='header'></slot>\n          </div>\n          <div id=\"pre-content\">\n            <slot name='pre-content'></slot>\n          </div>\n          <div id=\"content-container\" class={this.getClasses()}>\n            <div id=\"sidebar-left\">\n              <slot name='sidebar-left'></slot>\n            </div>\n            <div id=\"content\">\n              <slot name=\"content\"></slot>\n              <slot></slot>\n            </div>\n            <div id=\"sidebar-right\">\n              <slot name='sidebar-right'></slot>\n            </div>\n          </div>\n          <div id=\"post-body\">\n            <slot name='post-body'></slot>\n          </div>\n          <div id=\"footer\">\n            <slot name='footer'></slot>\n          </div>\n          <div id=\"sub-footer\">\n            <slot name='sub-footer'></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-page-template.js","sourceRoot":"","sources":["../../../src/components/cura-page-template/cura-page-template.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOlE,MAAM,OAAO,gBAAgB;;4BAEmC,SAAS;;IAMvE,iBAAiB;QACf,IAAI,CAAC,MAAM,GAAG;YACZ,WAAW,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,UAAU,EAAE;SACvD,CAAA;IACH,CAAC;IAED,UAAU;QACR,MAAM,OAAO,GAAG,EAAE,CAAC;QACnB,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,WAAW,EAAE,CAAC,GAAG,IAAI,CAAC;QAChD,OAAO,OAAO,CAAC;IACjB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DAAK,KAAK,EAAE,IAAI,CAAC,MAAM,EAAE,KAAK,EAAC,eAAe;gBAC5C,4DAAK,EAAE,EAAC,YAAY;oBAClB,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B;gBACN,4DAAK,EAAE,EAAC,QAAQ;oBACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,EAAE,EAAC,aAAa;oBACnB,6DAAM,IAAI,EAAC,aAAa,GAAQ,CAC5B;gBACN,4DAAK,EAAE,EAAC,mBAAmB,EAAC,KAAK,EAAE,IAAI,CAAC,UAAU,EAAE;oBAClD,4DAAK,EAAE,EAAC,cAAc;wBACpB,6DAAM,IAAI,EAAC,cAAc,GAAQ,CAC7B;oBACN,4DAAK,EAAE,EAAC,SAAS;wBACf,6DAAM,IAAI,EAAC,SAAS,GAAQ;wBAC5B,8DAAa,CACT;oBACN,4DAAK,EAAE,EAAC,eAAe;wBACrB,6DAAM,IAAI,EAAC,eAAe,GAAQ,CAC9B,CACF;gBACN,4DAAK,EAAE,EAAC,WAAW;oBACjB,6DAAM,IAAI,EAAC,WAAW,GAAQ,CAC1B;gBACN,4DAAK,EAAE,EAAC,QAAQ;oBACd,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;gBACN,4DAAK,EAAE,EAAC,YAAY;oBAClB,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC3B,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Element, Host, Prop, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-page-template',\n  styleUrl: 'cura-page-template.scss',\n  shadow: true,\n})\nexport class CuraPageTemplate {\n\n  @Prop({reflect: true}) contentwidth: 'default' | 'centered' = 'default';\n\n  @Element() host: HTMLElement;\n\n  styles: any;\n\n  connectedCallback() {\n    this.styles = {\n      '--spacing': window.CuraAPI.theme.spacing.getSpacing(),\n    }\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[this.contentwidth.toLowerCase()] = true;\n    return classes;\n  }\n\n  render() {\n    return (\n      <Host>\n        <div style={this.styles} class=\"grid-template\">\n          <div id=\"sub-header\">\n            <slot name='sub-header'></slot>\n          </div>\n          <div id=\"header\">\n            <slot name='header'></slot>\n          </div>\n          <div id=\"pre-content\">\n            <slot name='pre-content'></slot>\n          </div>\n          <div id=\"content-container\" class={this.getClasses()}>\n            <div id=\"sidebar-left\">\n              <slot name='sidebar-left'></slot>\n            </div>\n            <div id=\"content\">\n              <slot name=\"content\"></slot>\n              <slot></slot>\n            </div>\n            <div id=\"sidebar-right\">\n              <slot name='sidebar-right'></slot>\n            </div>\n          </div>\n          <div id=\"post-body\">\n            <slot name='post-body'></slot>\n          </div>\n          <div id=\"footer\">\n            <slot name='footer'></slot>\n          </div>\n          <div id=\"sub-footer\">\n            <slot name='sub-footer'></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n}\n"]}

package/dist/collection/components/forms/cura-checkbox/cura-checkbox.css

@@ -47,9 +47,9 @@
 
 .checkbox {
   appearance: none;
-  border: 2px solid var(--primary-base-neutral-medium);
+  border: 2px solid var(--neutral-base-neutral-medium);
   border-radius: 4px;
-  background: var(--neutral-lighter-neutral-purewhite);
+  background: var(--neutral-black-neutral-purewhite);
   flex: 1 0;
   display: flex;
   align-items: center;
@@ -76,27 +76,27 @@
 
 /* Estado Disabled */
 .disabled .checkbox {
-  background: var(--primary-darker-neutral-white);
-  border-color: var(--primary-base-neutral-base);
+  background: var(--neutral-black-neutral-white);
+  border-color: var(--neutral-darker-neutral-base);
   cursor: not-allowed;
 }
 .disabled .checkbox:hover {
-  border-color: var(--primary-base-neutral-base) !important;
+  border-color: var(--neutral-darker-neutral-base) !important;
 }
 
 .disabled.checked .checkbox,
 .disabled.indeterminate .checkbox {
-  background: var(--primary-base-neutral-white);
-  border-color: var(--primary-base-neutral-base);
+  background: var(--neutral-black-neutral-white);
+  border-color: var(--neutral-darker-neutral-base);
 }
 .disabled.checked .checkbox:hover,
 .disabled.indeterminate .checkbox:hover {
-  border-color: var(--primary-base-neutral-base) !important;
+  border-color: var(--neutral-base-neutral-white);
   background: var(--primary-base-neutral-white);
 }
 
 .disabled .checkbox:focus {
-  border-color: var(--primary-base-neutral-base);
+  border-color: var(--neutral-darker-neutral-base) !important;
 }
 
 /* Estado Checked */
@@ -116,12 +116,16 @@
   opacity: 1;
 }
 
-/* Hover para não disabled, checked, indeterminate */
+/* Hover para não disabled, default, checked, indeterminate */
 :not(.disabled):not(.checked):not(.indeterminate) .checkbox:hover {
-  border-color: var(--primary-base-neutral-dark);
+  border-color: var(--neutral-purewhite-neutral-dark);
 }
 
 /* Estado Success */
+.success.dark .checkbox {
+  background: var(--neutral-black);
+}
+
 .success .checkbox {
   border-color: var(--success-base);
   background: var(--success-lighter);
@@ -139,6 +143,10 @@
 }
 
 /* Estado Error */
+.error.dark .checkbox {
+  background: var(--neutral-black);
+}
+
 .error .checkbox {
   border-color: var(--error-base);
   background: var(--error-lighter);