@rededor/cura 1.1.0 → 1.2.0-alpha.0

package/dist/collection/components/buttons/cura-button-select/cura-button-select.js

@@ -1,45 +1,79 @@
 import { Host, h } from "@stencil/core";
-export class CuraButtonOutline {
+export class CuraButtonSelect {
     constructor() {
         this.theme = window.CuraAPI.theme;
-        this.size = 'medium';
-        this.disabled = false;
         this.selected = false;
-        this.iconPosition = 'right';
-        this.color = 'accent';
-        this.background = 'light';
-        this.fontcolor = 'dark';
+        this.iconName = undefined;
+        this.size = undefined;
+        this.counter = undefined;
+        this.disabled = undefined;
+        this.background = undefined;
+        this.color = undefined;
         this.hovered = false;
         this.styles = {};
     }
     setColors() {
         const colors = [
-            { name: '--color-base', theme: `${this.color}-base` },
-            { name: '--color-darker', theme: `${this.color}-darker` },
-            { name: '--color-lighter', theme: `${this.color}-lighter` },
-            { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },
-            { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },
-            { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },
+            { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },
+            { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },
+            { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },
+            { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },
+            { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },
+            { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },
+            { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },
+            { name: '--color-border-disable-unselect', thema: 'neutral-dark' },
+            { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },
+            { name: '--color-counter', thema: !this.disabled && 'primary-lighter' }
         ];
-        colors.forEach(color => {
-            this.styles = Object.assign(Object.assign({}, this.styles), { [color.name]: this.theme.colors.getColor(color.theme) });
-        });
+        colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));
+        this.styles = Object.assign({}, this.styles);
     }
-    setStyles() {
-        this.weights = this.theme.fonts.getWeights();
-        this.styles['--base-spacing'] = this.theme.spacing.getSpacing();
-        this.styles['--font-size'] = this.theme.fonts.getSize();
-        this.styles['--font-family'] = this.theme.fonts.getFamily();
-        this.styles['--font-weight-medium'] = this.weights.medium;
-        this.styles['--neutral-purewhite'] = this.theme.colors.getColor("neutral-purewhite");
-        this.styles['--neutral-black'] = this.theme.colors.getColor("neutral-black");
-        this.styles['--primary-base'] = this.theme.colors.getColor("primary-base");
-        this.styles['--info-base'] = this.theme.colors.getColor("info-base");
+    getClasses() {
+        const classes = {};
+        classes[`${this.size.toLowerCase()}`] = true;
+        classes['icon'] = true;
+        classes['disabled'] = this.disabled;
+        classes['selected'] = this.selected;
+        return classes;
     }
     connectedCallback() {
-        this.setStyles();
         this.setColors();
     }
+    getLabelFontColor() {
+        if (this.disabled)
+            return 'neutral-dark';
+        if (this.background === 'dark') {
+            return this.selected ? 'neutral-black' : 'neutral-white';
+        }
+        if (this.background === 'light') {
+            return this.selected ? 'neutral-white' : 'neutral-black';
+        }
+    }
+    getColorCounter() {
+        if (this.background === 'dark' && this.disabled) {
+            return !this.selected ? 'neutral-black' : 'neutral-dark';
+        }
+        if (this.background === 'light' && this.disabled) {
+            return 'neutral-pale';
+        }
+        return `${this.color}-lighter`;
+    }
+    getColorBagdeNumber() {
+        if (this.background === 'dark' && this.disabled) {
+            return this.selected ? 'neutral-black' : 'neutral-dark';
+        }
+        if (this.background === 'light' && this.disabled) {
+            return 'neutral-medium';
+        }
+        return `${this.color}-darker`;
+    }
+    getIcon() {
+        const iconSize = this.size === 'large' ? 24 : this.size === 'medium' ? 20 : 16;
+        return h("cura-icon", { class: "button-icon", name: this.iconName, size: iconSize, color: this.getLabelFontColor() });
+    }
+    getCounter() {
+        return (h("cura-badge-number", { color: this.getColorCounter() }, h("cura-label", { color: this.getColorBagdeNumber() }, this.counter)));
+    }
     handleMouseEnter() {
         if (this.disabled)
             return;
@@ -48,37 +82,14 @@ export class CuraButtonOutline {
     handleMouseLeave() {
         this.hovered = false;
     }
-    assignColor() {
-        if (!this.selected)
-            return 'primary-base';
-        const fontcolor = this.disabled
-            ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')
-            : this.selected && this.fontcolor === "dark" ? 'neutral-black' : "neutral-purewhite";
-        return fontcolor;
-    }
-    getIcon() {
-        if (!this.selected)
-            return;
-        const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;
-        const iconName = this.hovered ? 'closeCircle' : 'checkCircle';
-        return h("cura-icon", { class: "button-icon", name: iconName, size: iconSize, color: this.assignColor() });
-    }
     handleClick(e) {
         if (this.disabled)
             e.preventDefault();
         this.selected = !this.selected;
         this.onclick.emit({ selected: this.selected });
     }
-    getClasses() {
-        const classes = {};
-        classes[`${this.size.toLowerCase()}`] = true;
-        classes[`icon-${this.iconPosition.toLowerCase()}`] = true;
-        classes['disabled'] = this.disabled;
-        classes['selected'] = this.selected;
-        return classes;
-    }
     render() {
-        return (h(Host, { key: 'bbd95db4048d0bb3d4c17927da18136402bf91dd' }, h("button", { key: 'ae27bbadadf7597d4e6aaa406cbeee3dc47921cd', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: '6cdcdb3c908673c3babad6fd35cedc38ff358b61', class: "button-container" }, this.getIcon(), h("cura-label", { key: 'c058fedf71ac3c33a5711fba7be80dacd6ee8467', class: "label", lineHeight: '0%', color: this.assignColor() }, h("slot", { key: '5976c1f58c3d5bba77cf6cde7acc31fb49fcd25d' }))))));
+        return (h(Host, { key: '5b612b060b0a7b40ede004322995f0e410da8759' }, h("button", { key: '616ae769e76d647a3806daf33376ca88eb75da5d', class: this.getClasses(), style: this.styles, disabled: this.disabled, onClick: e => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("div", { key: 'ef0a6f7ed31c7c2b4eb0f74e3713c0cc99b79080', class: "button-container" }, this.iconName ? this.getIcon() : null, h("cura-label", { key: '0366f6538cc0ccf76c072de862fe60d87fccb937', class: "label", lineHeight: "0%", color: this.getLabelFontColor(), weight: 'regular' }, h("slot", { key: '72a72cc3a128223e7f41212005caff8aefbf1454' })), this.counter ? this.getCounter() : null))));
     }
     static get is() { return "cura-button-select"; }
     static get encapsulation() { return "shadow"; }
@@ -94,95 +105,91 @@ export class CuraButtonOutline {
     }
     static get properties() {
         return {
-            "size": {
-                "type": "string",
-                "mutable": false,
+            "selected": {
+                "type": "boolean",
+                "mutable": true,
                 "complexType": {
-                    "original": "'small' | 'medium' | 'large'",
-                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Button size: small | medium (default) | large  = medium"
+                    "text": ""
                 },
-                "attribute": "size",
+                "attribute": "selected",
                 "reflect": true,
-                "defaultValue": "'medium'"
+                "defaultValue": "false"
             },
-            "disabled": {
-                "type": "boolean",
-                "mutable": false,
+            "iconName": {
+                "type": "string",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Disabled state. Boolean."
+                    "text": ""
                 },
-                "attribute": "disabled",
-                "reflect": true,
-                "defaultValue": "false"
+                "attribute": "icon-name",
+                "reflect": true
             },
-            "selected": {
-                "type": "boolean",
+            "size": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "selected state. Boolean."
+                    "text": ""
                 },
-                "attribute": "selected",
-                "reflect": true,
-                "defaultValue": "false"
+                "attribute": "size",
+                "reflect": true
             },
-            "iconPosition": {
-                "type": "string",
-                "mutable": false,
+            "counter": {
+                "type": "any",
+                "mutable": true,
                 "complexType": {
-                    "original": "'left' | 'right'",
-                    "resolved": "\"left\" | \"right\"",
+                    "original": "string | number | null",
+                    "resolved": "number | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Icon position: left (default) | right."
+                    "text": ""
                 },
-                "attribute": "icon-position",
-                "reflect": true,
-                "defaultValue": "'right'"
+                "attribute": "counter",
+                "reflect": true
             },
-            "color": {
-                "type": "string",
+            "disabled": {
+                "type": "boolean",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Color base from color scheme. Default: accent."
+                    "text": ""
                 },
-                "attribute": "color",
-                "reflect": false,
-                "defaultValue": "'accent'"
+                "attribute": "disabled",
+                "reflect": true
             },
             "background": {
                 "type": "string",
@@ -196,29 +203,27 @@ export class CuraButtonOutline {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Set the font color to dark or light."
+                    "text": ""
                 },
                 "attribute": "background",
-                "reflect": false,
-                "defaultValue": "'light'"
+                "reflect": false
             },
-            "fontcolor": {
+            "color": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'dark' | 'light'",
-                    "resolved": "\"dark\" | \"light\"",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "fontcolor theme of the checkbox.\nCan be 'dark' or 'light'."
+                    "text": ""
                 },
-                "attribute": "fontcolor",
-                "reflect": false,
-                "defaultValue": "'dark'"
+                "attribute": "color",
+                "reflect": false
             }
         };
     }
@@ -240,12 +245,13 @@ export class CuraButtonOutline {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{ selected: boolean; }",
+                    "original": "{ selected: boolean }",
                     "resolved": "{ selected: boolean; }",
                     "references": {}
                 }
             }];
     }
+    static get elementRef() { return "host"; }
     static get watchers() {
         return [{
                 "propName": "background",
@@ -253,15 +259,6 @@ export class CuraButtonOutline {
             }, {
                 "propName": "color",
                 "methodName": "setColors"
-            }, {
-                "propName": "fontcolor",
-                "methodName": "setColors"
-            }, {
-                "propName": "background",
-                "methodName": "assignColor"
-            }, {
-                "propName": "fontcolor",
-                "methodName": "assignColor"
             }];
     }
 }

package/dist/collection/components/buttons/cura-button-select/cura-button-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"cura-button-select.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-select/cura-button-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Watch, State, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\n\nexport class CuraButtonOutline {\n  /**\n  * Button size: small | medium (default) | large  = medium\n  */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n  /**\n  * Disabled state. Boolean.\n  */\n  @Prop({ reflect: true }) disabled = false;\n  /**\n  * selected state. Boolean.\n  */\n  @Prop({ reflect: true }) selected = false;\n  /**\n  * Icon position: left (default) | right.\n  */\n  @Prop({ reflect: true }) iconPosition: 'left' | 'right' = 'right';\n  /**\n  * Color base from color scheme. Default: accent.\n  */\n  @Prop() color = 'accent';\n  /**\n  * Set the font color to dark or light.\n  */\n  @Prop() background: 'dark' | 'light' = 'light';\n  /**\n  * fontcolor theme of the checkbox.\n  * Can be 'dark' or 'light'.\n  */\n  @Prop() fontcolor: 'dark' | 'light' = 'dark';\n  /**\n  * hovered state. Boolean.\n  */\n  @State() hovered = false;\n\n  @State() styles = {};\n\n  @Event({ eventName: \"onclick\" }) onclick: EventEmitter<{ selected: boolean; }>;\n\n  theme = window.CuraAPI.theme\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  @Watch('fontcolor')\n  setColors() {\n    const colors = [\n      { name: '--color-base', theme: `${this.color}-base` },\n      { name: '--color-darker', theme: `${this.color}-darker` },\n      { name: '--color-lighter', theme: `${this.color}-lighter` },\n      { name: '--neutral-purewhite-black', theme: this.fontcolor === 'light' ? 'neutral-purewhite' : 'neutral-black' },\n      { name: '--neutral-white-primary-darker', theme: this.background === 'light' ? 'neutral-white' : 'primary-darker' },\n      { name: '--neutral-medium-primary-base', theme: this.background === 'light' ? 'neutral-medium' : 'primary-base' },\n    ];\n\n    colors.forEach(color => {\n      this.styles = {\n        ...this.styles,\n        [color.name]: this.theme.colors.getColor(color.theme)\n      };\n    });\n  }\n\n  setStyles() {\n    this.weights = this.theme.fonts.getWeights();\n    this.styles['--base-spacing'] = this.theme.spacing.getSpacing();\n    this.styles['--font-size'] = this.theme.fonts.getSize();\n    this.styles['--font-family'] = this.theme.fonts.getFamily();\n    this.styles['--font-weight-medium'] = this.weights.medium;\n    this.styles['--neutral-purewhite'] = this.theme.colors.getColor(\"neutral-purewhite\");\n    this.styles['--neutral-black'] = this.theme.colors.getColor(\"neutral-black\");\n    this.styles['--primary-base'] = this.theme.colors.getColor(\"primary-base\");\n    this.styles['--info-base'] = this.theme.colors.getColor(\"info-base\");\n  }\n\n  connectedCallback() {\n    this.setStyles()\n    this.setColors();\n  }\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  @Watch('background')\n  @Watch('fontcolor')\n  assignColor() {\n    if (!this.selected) return 'primary-base'\n\n    const fontcolor =\n      this.disabled\n        ? (this.background === 'light' ? 'neutral-medium' : 'primary-base')\n        : this.selected && this.fontcolor === \"dark\" ? 'neutral-black' : \"neutral-purewhite\";\n\n    return fontcolor\n  }\n\n  getIcon() {\n    if (!this.selected) return;\n\n    const iconSize = this.size === 'small' ? 16 : this.size === 'medium' ? 20 : 24;\n    const iconName = this.hovered ? 'closeCircle' : 'checkCircle';\n\n    return <cura-icon class=\"button-icon\" name={iconName} size={iconSize} color={this.assignColor()}></cura-icon>;\n  }\n\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes[`icon-${this.iconPosition.toLowerCase()}`] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n\n\n  render() {\n    return (\n      <Host>\n        <button class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={(e) => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}>\n          <div class=\"button-container\">\n            {this.getIcon()}\n            <cura-label class=\"label\" lineHeight='0%' color={this.assignColor()}><slot></slot></cura-label>\n          </div>\n        </button>\n      </Host>\n    );\n  }\n\n}\n"]}
+{"version":3,"file":"cura-button-select.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-select/cura-button-select.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Host, Prop, State, Watch, h } from '@stencil/core';\n\n@Component({\n  tag: 'cura-button-select',\n  styleUrl: 'cura-button-select.scss',\n  shadow: true,\n})\nexport class CuraButtonSelect {\n  @Element() host: HTMLElement;\n\n  @Prop({ reflect: true, mutable: true }) selected = false;\n  @Prop({ reflect: true, mutable: true }) iconName: string;\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large';\n  @Prop({ reflect: true, mutable: true }) counter: string | number | null;\n  @Prop({ reflect: true }) disabled: boolean;\n  @Prop() background: 'dark' | 'light';\n  @Prop() color: string;\n\n  @State() hovered = false;\n  @State() styles = {};\n\n  @Event({ eventName: 'onclick' }) onclick: EventEmitter<{ selected: boolean }>;\n\n  theme = window.CuraAPI.theme;\n\n  weights;\n\n  @Watch('background')\n  @Watch('color')\n  setColors() {\n    const colors = [\n      { name: '--color-border', thema: this.background === 'light' ? `${this.color}-darker` : 'neutral-white' },\n      { name: '--color-border-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-light` },\n      { name: '--color-background-hover', thema: this.background === 'light' ? `${this.color}-light` : `${this.color}-dark` },\n      { name: '--color-select', thema: this.background === 'light' ? `${this.color}-base` : 'neutral-white' },\n      { name: '--color-select-hover-pressed', thema: this.background === 'light' ? `${this.color}-dark` : `${this.color}-lighter` },\n      { name: '--color-select-focus', thema: this.background === 'light' ? `${this.color}-base` : `${this.color}-lighter` },\n      { name: '--color-disable-select', thema: this.background === 'light' ? 'neutral-white' : 'neutral-black' },\n      { name: '--color-border-disable-unselect', thema: 'neutral-dark' },\n      { name: '--color-counter-disabled', thema: this.background === 'light' ? 'neutral-pale' : 'neutral-black' },\n      { name: '--color-counter', thema: !this.disabled && 'primary-lighter' }\n    ];\n\n    colors.forEach(color => (this.styles[color.name] = window.CuraAPI.theme.colors.getColor(color.thema)));\n    this.styles = { ...this.styles };\n\n  }\n\n  getClasses() {\n    const classes = {};\n    classes[`${this.size.toLowerCase()}`] = true;\n    classes['icon'] = true;\n    classes['disabled'] = this.disabled;\n    classes['selected'] = this.selected;\n    return classes;\n  }\n\n  connectedCallback() {\n    this.setColors();\n  }\n\n  getLabelFontColor() {\n    if (this.disabled) return 'neutral-dark';\n\n    if (this.background === 'dark') {\n      return this.selected ? 'neutral-black' : 'neutral-white'\n    }\n    if (this.background === 'light') {\n      return this.selected ? 'neutral-white' : 'neutral-black'\n    }\n\n  }\n\n  getColorCounter() {\n    if (this.background === 'dark' && this.disabled) {\n      return !this.selected ? 'neutral-black' : 'neutral-dark'\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-pale'\n    }\n    return `${this.color}-lighter`\n  }\n\n  getColorBagdeNumber() {\n\n    if (this.background === 'dark' && this.disabled) {\n      return this.selected ? 'neutral-black' : 'neutral-dark'\n    }\n\n    if (this.background === 'light' && this.disabled) {\n      return 'neutral-medium'\n    }\n\n    return `${this.color}-darker`\n  }\n\n  getIcon() {\n    const iconSize = this.size === 'large' ? 24 : this.size === 'medium' ? 20 : 16;\n\n    return <cura-icon class=\"button-icon\" name={this.iconName} size={iconSize} color={this.getLabelFontColor()} />;\n  }\n\n  getCounter() {\n    return (\n      <cura-badge-number color={this.getColorCounter()}>\n        <cura-label color={this.getColorBagdeNumber()}>{this.counter}</cura-label>\n      </cura-badge-number>\n    );\n  }\n\n\n  handleMouseEnter() {\n    if (this.disabled) return;\n    this.hovered = true;\n  }\n\n  handleMouseLeave() {\n    this.hovered = false;\n  }\n\n  handleClick(e: Event) {\n    if (this.disabled) e.preventDefault();\n    this.selected = !this.selected;\n    this.onclick.emit({ selected: this.selected });\n  }\n\n  render() {\n    return (\n      <Host>\n        <button\n          class={this.getClasses()}\n          style={this.styles}\n          disabled={this.disabled}\n          onClick={e => this.handleClick(e)}\n          onMouseEnter={() => this.handleMouseEnter()}\n          onMouseLeave={() => this.handleMouseLeave()}\n        >\n          <div class=\"button-container\">\n            {this.iconName ? this.getIcon() : null}\n            <cura-label class=\"label\" lineHeight=\"0%\" color={this.getLabelFontColor()} weight='regular'>\n              <slot></slot>\n            </cura-label>\n            {this.counter ? this.getCounter() : null}\n          </div>\n        </button>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/buttons/cura-button-select/cura-button-select.stories.js

@@ -0,0 +1,133 @@
+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;
+};
+import iconNames from "../../../assets/icons/iconset-default-list";
+const renderCuraButtonSelect = (label, args) => {
+    const block = `<cura-button-select ${args.selected
+        ? `
+        selected="${args.selected}"`
+        : ''}${args.disabled
+        ? `
+        disabled="${args.disabled}"`
+        : ''}
+  ${args.iconName
+        ? `
+        icon-name="${args.iconName}"`
+        : ''}${args.size
+        ? `
+        size="${args.size}"`
+        : ''}
+  ${args.counter
+        ? `
+        counter="${args.counter}"`
+        : ''}
+  ${args.background
+        ? `
+        background="${args.background}"`
+        : ''}
+  ${args.color
+        ? `
+        color="${args.color}"`
+        : ''}
+  >
+  ${label}
+      </cura-button-select>
+      `;
+    return `${block}`;
+};
+export default {
+    title: 'Componentes/Buttons/Button Select',
+    tags: ['autodocs'],
+    render: (_a) => {
+        var { label } = _a, args = __rest(_a, ["label"]);
+        return renderCuraButtonSelect(label, args);
+    },
+    argTypes: {
+        label: {
+            control: 'text',
+            description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',
+            name: 'Label',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Estado desabilitado.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false },
+            },
+        },
+        selected: {
+            control: 'boolean',
+            description: 'Estado selecionado.',
+            table: {
+                category: 'State',
+                defaultValue: { summary: false },
+            },
+        },
+        size: {
+            control: { type: 'inline-radio' },
+            options: ['small', 'medium', 'large'],
+            description: 'Tamanhos disponíveis.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'large' }
+            }
+        },
+        color: {
+            control: { type: 'select' },
+            options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],
+            description: 'Cor fundamental do Design System sem profundidade (ex: primary).',
+            table: {
+                category: 'Properties',
+            }
+        },
+        iconName: {
+            control: { type: 'select' },
+            options: ['', ...iconNames],
+            description: 'Nome do ícone a ser utilizado no iconset.',
+            table: {
+                category: 'Icons'
+            },
+            name: 'icon-name'
+        },
+        background: {
+            control: { type: 'inline-radio' },
+            options: ['dark', 'light'],
+            description: 'Define cor clara ou escura do componente.',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 'light' }
+            },
+        },
+        counter: {
+            control: 'number',
+            description: 'Define o número a ser exibido pelo componente',
+            table: {
+                category: 'Properties',
+                defaultValue: { summary: 1 },
+            },
+        },
+    },
+};
+export const Button = {
+    args: {
+        selected: false,
+        iconName: 'calendar',
+        size: 'medium',
+        counter: 1,
+        disabled: false,
+        background: 'light',
+        color: 'primary',
+        label: "Button"
+    },
+};
+//# sourceMappingURL=cura-button-select.stories.js.map

package/dist/collection/components/buttons/cura-button-select/cura-button-select.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cura-button-select.stories.js","sourceRoot":"","sources":["../../../../src/components/buttons/cura-button-select/cura-button-select.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import iconNames from '../../../assets/icons/iconset-default-list';\n\nconst renderCuraButtonSelect = (label: string, args: any) => {\n    const block = `<cura-button-select ${args.selected\n        ? `\n        selected=\"${args.selected}\"`\n        : ''\n        }${args.disabled\n            ? `\n        disabled=\"${args.disabled}\"`\n            : ''\n        }\n  ${args.iconName\n            ? `\n        icon-name=\"${args.iconName}\"`\n            : ''\n        }${args.size\n            ? `\n        size=\"${args.size}\"`\n            : ''\n        }\n  ${args.counter\n            ? `\n        counter=\"${args.counter}\"`\n            : ''\n        }\n  ${args.background\n            ? `\n        background=\"${args.background}\"`\n            : ''\n        }\n  ${args.color\n            ? `\n        color=\"${args.color}\"`\n            : ''\n        }\n  >\n  ${label}\n      </cura-button-select>\n      `;\n    return `${block}`;\n};\n\nexport default {\n    title: 'Componentes/Buttons/Button Select',\n    tags: ['autodocs'],\n    render: ({ label, ...args }) => {\n        return renderCuraButtonSelect(label, args);\n    },\n    argTypes: {\n        label: {\n            control: 'text',\n            description: 'Texto puro com ou sem quebra de linha dentro do componente. Não é propriedade HTML.',\n            name: 'Label',\n        },\n        disabled: {\n            control: 'boolean',\n            description: 'Estado desabilitado.',\n            table: {\n                category: 'State',\n                defaultValue: { summary: false },\n            },\n        },\n        selected: {\n            control: 'boolean',\n            description: 'Estado selecionado.',\n            table: {\n                category: 'State',\n                defaultValue: { summary: false },\n            },\n        },\n        size: {\n            control: { type: 'inline-radio' },\n            options: ['small', 'medium', 'large'],\n            description: 'Tamanhos disponíveis.',\n            table: {\n                category: 'Properties',\n                defaultValue: { summary: 'large' }\n            }\n        },\n        color: {\n            control: { type: 'select' },\n            options: ['primary', 'secondary', 'accent', 'info', 'success', 'error', 'warning', 'neutral'],\n            description: 'Cor fundamental do Design System sem profundidade (ex: primary).',\n            table: {\n                category: 'Properties',\n            }\n        },\n        iconName: {\n            control: { type: 'select' },\n            options: ['', ...iconNames],\n            description: 'Nome do ícone a ser utilizado no iconset.',\n            table: {\n                category: 'Icons'\n            },\n            name: 'icon-name'\n        },\n        background: {\n            control: { type: 'inline-radio' },\n            options: ['dark', 'light'],\n            description: 'Define cor clara ou escura do componente.',\n            table: {\n                category: 'Properties',\n                defaultValue: { summary: 'light' }\n            },\n        },\n        counter: {\n            control: 'number',\n            description: 'Define o número a ser exibido pelo componente',\n            table: {\n                category: 'Properties',\n                defaultValue: { summary: 1 },\n            },\n        },\n    },\n};\n\nexport const Button = {\n    args: {\n        selected: false,\n        iconName: 'calendar',\n        size: 'medium',\n        counter: 1,\n        disabled: false,\n        background: 'light',\n        color: 'primary',\n        label: \"Button\"\n    },\n};\n"]}

package/dist/collection/components/buttons/cura-button-transparent/cura-button-transparent.js

@@ -76,7 +76,7 @@ export class CuraButtonTransparent {
     render() {
         const symbolColor = this.getSymbolColor();
         const labelSize = labelSizes[this.size] || labelSizes["default"];
-        return (h(Host, { key: 'a149c7f0dd3a413c563f891c9298d66cde905f5e' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
+        return (h(Host, { key: 'd7bfd59d8a84d299a3d59dfd2d7b48ca6a9f56ee' }, this.href ? (h("a", { href: this.disabled ? '' : this.href, target: this.target, class: this.getClasses(), style: this.styles, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave() }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor }))) : (h("button", { class: this.getClasses(), style: this.styles, disabled: this.disabled || null, onClick: (e) => this.handleClick(e), onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), type: this.type }, h("span", { class: "button-container" }, this.getIcon(), h("cura-label", { size: labelSize, lineHeight: '105%', color: symbolColor }, h("slot", null))), h("cura-loader-circle", { size: this.size, color: symbolColor })))));
     }
     static get is() { return "cura-button-transparent"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-alert/cura-alert.js

@@ -43,7 +43,7 @@ export class CuraAlert {
         return this.icon ? this.icon : iconMapping[this.type];
     }
     render() {
-        return (h(Host, { key: 'b7b63129f2d0c1d2f8b451a7f795befc9e085238' }, h("div", { key: 'b8450a11d65f0bbb3c9f688fccbb38efc7bf223c', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '9a5dc4295f7c40362a86f77fe805127590812f15', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '6bbe4799d3f73df0cda2e94da2d71cdc1bfc855a', class: "content" }, h("cura-label", { key: '8b761ec2804bb5633893af8ed91f5de268bbf029', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '4e7e7726758c26f1f397e8efc84d5eba1c88b428', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'f589c6fb9016b43b3557492a3ef1b4ede4a807a6' })), h("div", { key: 'b212e9255855b96d5c069dd7544675386f00b372', class: "actions" }, h("slot", { key: '174dfcc7dfc4ff3e29185843e010dddae75463f5', name: "actions" }))), this.closeable ?
+        return (h(Host, { key: 'c5398d59da323dee68eed1cb7c27841df0e12d14' }, h("div", { key: 'd9bb0ab7a2106e710a113513e6eeb1297b9bd205', class: this.getClasses(), style: this.styles }, h("cura-icon", { key: '54665c81a59cbca3686abc6f5e388da32e2211ed', name: this.getNameIcon(), class: "icon-left", size: 16, color: `${this.type}-dark` }), h("div", { key: '466f9f4aed5096658de1e19521cefe2915b095af', class: "content" }, h("cura-label", { key: '6b3d9cd0352b5d5254305baa5a71a1b1782f637f', class: "title", size: "small", color: "neutral-darker", weight: "bold" }, this.label), h("cura-paragraph", { key: '5dbad5e65d88b59a81b7df97154071a607d73900', class: "text", color: `${this.type}-darker`, size: "xsmall", marginBlock: "0", lineHeight: "133.33%" }, h("slot", { key: 'cb75d38c35d34a7bee4e187c640a1269bad192b0' })), h("div", { key: 'a6930bb463601a2ba429b23fad61847e8dee01f3', class: "actions" }, h("slot", { key: '7f4fc8b08a870f578d0b241df00650ebf3db83e0', name: "actions" }))), this.closeable ?
             (h("cura-icon", { name: "close", size: 16, color: "error-dark", class: "icon-right", onClick: this.handleClose }))
             : '')));
     }

package/dist/collection/components/cura-avatar/cura-avatar.js

@@ -39,7 +39,7 @@ export class CuraAvatar {
         this.imageSrc = this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`;
     }
     render() {
-        return (h(Host, { key: 'fc8fbe9cdcab86398c83a55d006badb870ee959a', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '6a107805cd770b98e74f7b0475c9896f59e51832', class: this.getClasses(), style: this.styles }, h("img", { key: '4bd7991bd32b0aa6f87d0725303960b0b4c3b0b9', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
+        return (h(Host, { key: '2760534555a0483e7e30c5f3009ec0cf68d0973b', style: this.hostCSSProperties(), role: "img" }, h("div", { key: '3daf6dd066983dc63525c38b7da498147c0bf387', class: this.getClasses(), style: this.styles }, h("img", { key: 'a5f4de7983722fc3f750404fa985c312590b5e98', src: this.imageSrc || this.imageSrcDefault || `${this.assetsPath}/images/avatar/patient-default.svg`, onError: () => this.onSrcError() }))));
     }
     static get is() { return "cura-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/cura-calendar/cura-calendar.css

@@ -1,6 +1,8 @@
 :host {
   display: block;
   width: var(--width);
+  max-width: 400px;
+  margin: 0 auto;
 }
 :host .calendar {
   display: flex;